> All in One 586

Ads

Thursday, December 2, 2021

Embrace your code’s transience

Websites change. Healthy codebases are constantly being updated. Legacy code dies when it eventually goes down with the ship. Recognizing that my code is transient allows me to be more practical about my code and what guides my decision-making as I author it.

Your code is transient.

I like to think that code changes stem from one of two causes: code decay or website relevance.

Code decay 

The code we write follows specifications from authorities like web browsers or frameworks. It can also be based on requirements from a business or organization the website is for. All of these rules change as our websites and their contexts evolve. I think of this as code decay. Maybe an HTML spec is adopted by browsers allowing our markup to become more semantic, or perhaps we’re using a framework and want to upgrade to the latest major version. Maybe a business needs to change payment providers, or perhaps there’s a new security requirement we need to adopt. Our code frequently needs to be maintained in order to keep up and, at times, keep working. Occasionally, we can get by without changing it for long periods of time, but there is always a point at which old code needs either to be changed or disposed of.

Website relevance

Let’s face it, our website is not as cool as it used to be. Maybe this is because the design has grown old, or perhaps what it does is less important to people than it was before. Maybe there’s a new requirement and feature that needs to be added, or perhaps we’re just tired of staring at it. Redesign! Rebrand! Iterate! It is unreasonable to expect most websites to stay relevant without changing their content or code significantly over time. We should expect our code to do the same and change over time—especially on the front end.

Accepting change

The reality of change seems like a fairly obvious thing to acknowledge, however, I find it to be a helpful reminder as someone who has a tendency to go off coding as if I am building The Great Pyramid of Giza. Coding is often much more like setting up camp, not knowing if we will be staying for a few days or a year. I try to start with the assumption that it will be brief, and settle in over time. Consider picking up some overpriced water at the store before we dig an entire well. So often I find myself in a frenzied relocation days after pitching my tent. I do not need to look much further back than a few months to find code I have written that already needs to change. It doesn’t need to change because I didn’t do it good enough the first time—it’s just time to change it! How should this influence the way we code or think about our code? Here are a few thoughts I have adopted recently.

1) Write transient code.

Knowing that my code may change in the near future allows me to focus on its current purpose and ensuring its footprint is isolated. It has freed me to focus on the code in front of me and not be distracted by the possible future timelines of the code I am writing. This is particularly applicable for large portions of small projects. For large projects, you can apply this principle to pieces of your codebase. If you have used a component in a library for an entire year, often its requirements have changed over time. Removing the cruft of the past can help give it purpose for the immediate future. I often find writing a replacement component to be quicker than updating an old one, and the result to be easier to use and understand. Where applicable, I try to replace instead of rehabilitate. When I create something new, I prioritize the present, trusting that I will give myself space to solve future problems later on. Future problems are often best solved in the future because you tend to have more facts and fewer assumptions the closer you are to the problem.

2) When possible, avoid dependencies.

More and more I am drawn towards built-in browser functionality and have a high bar when justifying the use of frameworks. At certain scales dependencies are unavoidable and frequently more efficient in collaborative environments. When I do use them, I try to isolate or wrap their functionality so that it is easier to untangle later on if I need to. If you can justify the effort of writing your own code, you become more familiar with web specifications and learn just how robust they are on their own. You also end up with something that can be easier to maintain long-term because it is closest to the core evolutionary path of the web. There is no dependency upgrade between your code and ever-evolving browser functionality.

3) Let the code die.

While this is only an acceptable outcome for situations that don’t require change for important reasons, like usability, this is my favorite thing to do when it makes sense. Let things get old. Don’t intend on updating them. Creative projects and demos are a great case for this. By letting old projects die, I am acknowledging that their value was very much tied to the moment of time they existed within. Not everything needs to be around forever (spoiler, nothing we make will be around forever). If something is important and you want to preserve it, capture its meaningfulness through screen recordings and documentation, and then move on. This has allowed me to proceed to the next the thing more freely.

Moving forward

For me, the most meditative and rejuvenating thing I can do as someone who writes code is to reflect on the fact that the code I write is transient. So often this space can be highly combative when we talk about tooling, best practices, and the new hot thing. A spirit of urgency to adopt the “best” approach applies immense amounts of pressure as we plan out projects. We speak in absolutes with an air of permanence and often overlook just how dated our opinions are going to sound in the near future. The stakes are ultimately never as high as they feel when you are making decisions about tooling.

I prefer to be in a place where I am continually recognizing that the code I write is temporary, that technology is growing faster than I can individually match pace, and that I will never need to have expertise in all things. It is here that I find comfort in knowing the best code I write is in front of me and that the best website I can make right now is the next one.



from CSS-Tricks https://ift.tt/3G2YFkm
via IFTTT

Fractional SVG stars with CSS

Some ⭐️

⭐️ ⭐️ ⭐️ ⭐️ star rating systems aren’t always exactly even stars. Say you want to support rating something 2.25 stars. To do that you could “fill” the shape of the stars partially. I like this idea by Samuel Kraft. The tricky part is:

The final step is making the overlay div only affect the star SVGs beneath, not the background. We can do this by using the CSS mix-blend-mode property with the color value.

Check out Samuel’s post for an interactive demo and deeper information, but I thought I’d give it a crack myself to get a feel for the idea:

The idea is that this is an overlay on top of the stars. You can’t see it and it doesn’t affect the stars because it’s either black or white and mix-blend-mode: color; means that overlay will only effect elements that do have color.

There are loads of ways to do rating stars, for the record. We covered five of them a little while back. One rather clever method in there is using unicode stars (like, as text), then filling their background with -webkit-background-clip: text; which means you can partially fill them (like with a hard-stop linear-gradient()). Solid trickery, that.

To Shared Link — Permalink on CSS-Tricks



from CSS-Tricks https://ift.tt/3Ei44Ur
via IFTTT

Streaming Optimized Videos From AWS S3 in Minutes

(This is a sponsored post.)

Videos appeal to humans in a way no other form of the content does. A video includes motion, music, still images, text, speech, and a few other elements, all of which combine to deliver engagement like never before.

According to research, users spend 88% more time on a website with videos, and video content receives 1200% more shares than images or text. This is corroborated by the trend we see on key social media platforms, with businesses on these platforms now preferring video content over still images.

When streaming videos on one’s website or app, hosting a video on a platform like YouTube might not be a viable option. This is especially true if you want to present a native-looking user experience and control it, or you do not want to share revenues with a third party.

In such cases, cloud providers like AWS become the go-to choice for hosting and streaming videos.

Streaming optimized videos from S3 — current methods and drawbacks

A typical setup includes hosting the videos on AWS S3, the most popular cloud object storage around, and then directly streaming them on the users’ device.

For an even better video load time, you can use AWS CloudFront CDN with your S3 bucket.

Typical video streaming setup with AWS S3 and CloudFront CDN without any video optimizations

However, given that the original videos are often massive in size and that neither S3 nor CloudFront have built-in video optimization capabilities, this is far from ideal.

Therefore, the video streaming is slow and results in unnecessary waste of bandwidth, lower average video playback time, and lower user retention and revenues.

To solve this, we need to optimize videos for different devices, network speeds, and our website or app layout before streaming from the S3 storage.

While you could use a solution like AWS Elemental MediaConvert for all kinds of transcoding and optimizations, such solutions often have a steep learning curve and often become very complex to manage. For example:

  1. You need to understand how to set up these tools with your existing workflow and storage, understand job creation in these tools, and manage job queues and job completion notifications in your workflow.
  2. To create MediaConvert jobs, you would have to understand different streaming protocols, encoding, formats, resolution, codecs, etc., for video streaming and map them to your requirements to build the right jobs.
  3. AWS MediaConvert is not an on-the-fly video conversion tool in itself. You need to pair it with other AWS services to make it work in real-time, making the setup even more complex and expensive. If you do not opt for on-the-fly video conversion, you need to configure MediaConvert’s jobs correctly from the go. Any new requirement will require the job to be changed and re-run on all videos to generate a new encoding or format. With an ever-changing video streaming landscape coupled with new device sizes, this can be a severe limitation if you have a lot of videos coming in regularly.
< Description: Typical setup with on-the-fly video conversion with AWS MediaConvert involving multiple components. (Source: AWS)

With videos becoming the choice of media online, it should be easier to stream videos from your S3 storage so that you can focus on delivering a better user experience and the core business rather than understanding the intricacies of video streaming.

This is where ImageKit comes in.

ImageKit is a complete media management and delivery platform with a Video API that allows you to stream videos stored in AWS S3 and optimize and transform them in real-time with just a few minutes of setup.

That’s right. You will be able to deliver videos perfected for every device without learning about the complications of video streaming and without spending hours configuring a tool.

ImageKit + AWS S3 video streaming setup with on-the-fly video optimizations

Let’s look at how you can use ImageKit for streaming videos from your S3 bucket.

S3 video streaming with ImageKit

To be able to stream videos from in our S3 bucket with ImageKit, we would need to do two things:

  1. Allow ImageKit to read the objects in the S3 bucket
  2. Access the video in the S3 bucket via their ImageKit URLs

Let’s look at these two steps in detail.

1. Connecting your bucket with ImageKit for access

ImageKit can pull assets from all popular storage and servers, including private and public S3 buckets. Access to a private S3 bucket is done using a pair of read-only keys that you create in your AWS account. You can read more about adding the S3 bucket origin in detail here.

If your bucket or the video objects inside it are public, you can add it as a web folder type origin. To do this, you would need to use the S3 bucket’s domain name as the base URL for this origin.

Also, ensure that you map the S3 bucket to a URL endpoint in the ImageKit dashboard.

That’s it! You have now connected your S3 bucket with ImageKit.

Bonus: ImageKit also provides an integrated Media Library, file storage built on AWS S3, with easy-to-use UI and APIs for advanced media management and search. If you do not have an S3 bucket or want a better solution to organize your video content, you can host your videos in ImageKit’s Media Library as well.

2. Video Streaming from S3 using ImageKit URLs

With your S3 bucket now attached to ImageKit, you can now access any video file in your bucket via ImageKit.

For example, we have the video sample.mp4 in our test bucket at the key videos/woman-walking.mp4. We can access it with ImageKit using the following URL:

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4

When we open this URL in a browser tab, the browser will stream the video via ImageKit.

We can now use this URL in a <video> tag to stream videos on our web page.

<video src="https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4" controls></video>

And because ImageKit comes integrated with AWS CloudFront CDN, your videos will get delivered in milliseconds to your users, thereby improving the overall streaming experience.

Using video optimizations and transformations with S3 streaming

We have seen how to stream videos from S3 using ImageKit on our apps. However, as mentioned earlier in the article, we need to optimize videos for different devices, website layout, and other conditions.

ImageKit helps us there as well. It can optimize and scale your videos or encode them to different formats in real-time. In addition, ImageKit makes most of the necessary optimizations automatically, using the best defaults, or exposes the functionalities as easy-to-use URL parameters that work in real-time.

So, unlike the other tools like AWS MediaConvert, there is minimal learning you need to do. And you definitely won’t have to learn the nuances of video streaming and encoding.

Let’s look at the video optimizations and transformations ImageKit is capable of, apart from direct streaming of videos from S3.

1. Automatic conversion to best format while streaming

ImageKit automatically identifies the video formats supported in browsers and combines them with the original video information to encode it to the best possible output format.

The video format optimization is done in real-time when you request your S3 video via ImageKit and results in a smaller video size sent to the user.

To enable this automatic format conversion, you have to enable the corresponding setting in your ImageKit dashboard. No complex setup, no configurations needed.

For example, after enabling the above setting, an MP4 video gets delivered in WebM format in Chrome and MP4 in Safari.

Same video delivered in WebM format in Chrome browser

2. Automatic compression of videos while streaming

Modern cameras capture videos that can easily run into a few 100MBs, if not GBs. It is not ideal to deliver such large video files to your users. It will take them ages to stream the video, results in a poor user experience, and impact your business.

Therefore, we need to compress the video to deliver it quickly to our users. However, we need to do so while maintaining the visual quality of the video.

That is again something ImageKit does for you automatically.

You can turn on the corresponding setting from the ImageKit dashboard and set the default compression level for your videos. By default, this value would be 50, which strikes a good balance between output size and visual quality.

Turning on automatic quality optimization in the dashboard

After enabling this setting, ImageKit will encode your video at the specified compression level before streaming it to the user’s device.

Because of the compression, though the following video has the same format as its original video, it is lighter by almost 15% at 12.6MB compared to the original video at 14.6MB.

Using real-time video compression for slow network users

As explained with examples later in this article, ImageKit allows you to transform videos in real-time. One of the real-time URL transformations possible in ImageKit is to modify the compression level.

This transformation allows us to override the default compression level selected in the dashboard.

The video below, for example, is compressed to a quality level of 30 and is almost 70% smaller than the video we encoded using the default quality level of 50 set in the dashboard.

This real-time compression-level transformation allows us to adapt our videos to users on slow networks.

For example, if someone is experiencing poor network conditions, you can stream a more compressed, lighter video to them.

3. Scaling S3 videos in real-time while streaming

Imagine you want to load a video on your page and have only a 200px width available for your content. The resolution of the original video you have, almost always, would be a lot higher than this size. Loading anything significantly larger than the size you require is a waste of bandwidth and offers no benefit to the user.

With ImageKit, you can scale the video to any size in real-time before streaming it on the device. Just like its real-time image transformation API, you can add a width or height parameter to the URL, and you will get a video with the required dimensions in real-time.

For example, we have scaled down our video to a width of 200px using the URL given below.

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4?tr=w-200

4. Adapting videos to different placeholders and creating vertical videos

We often shoot videos in landscape mode, i.e., the video’s width is greater than its height. However, you would often require a portrait or vertical video where the height is greater than the video’s width.

A very common use case would be converting your landscape video to a vertical one like an Instagram story.

ImageKit makes it super simple with its real-time video transformations. You can add the width and height parameters to the video URL and get the output video in the requested size.

https://ik.imagekit.io/ikmedia/videos/woman-walking.mp4?tr=w-300,h-500

ImageKit streams the video in the most suitable format and at the right compression level for all the transformations above. The video is delivered via its integrated AWS CloudFront CDN for a fast load time.

For the demo video used in this article, we started with a 14.6MB original video, but after all the optimizations and scaling it down, we were able to bring down the size to 1.8MB in the last example of the vertical video.

Signup with ImageKit for S3 video streaming for free

ImageKit offers a Forever Free plan that includes video delivery as well as processing. On this plan, you would be able to optimize and transform over 15 minutes of fresh video content every month and then deliver it to thousands of users without paying a single penny or even providing your credit card. This is perfect for a small business or your side project where you can connect your S3 bucket to ImageKit and start streaming optimized videos immediately.

Sign up now for ImageKit to start streaming optimized videos from S3 for free.



from CSS-Tricks https://ift.tt/3dcaice
via IFTTT

Wednesday, December 1, 2021

Clear today!



With a high of F and a low of 35F. Currently, it's 42F and Clear outside.

Current wind speeds: 9 from the Southwest

Pollen: 0

Sunrise: December 1, 2021 at 07:52PM

Sunset: December 2, 2021 at 05:29AM

UV index: 0

Humidity: 34%

via https://ift.tt/2livfew

December 2, 2021 at 10:04AM

Dock Life: Using Docker for All The Things!

I think if you’re a DevOps person in any capacity, the utility of Docker is very clear. Your things run in containers that are identical everywhere. Assuming Docker is working/running, the code will execute in a reliably consistent way whether that is Docker running on some developer’s computer, or a sky computer. The (massive) appeal there is that bugs will happen consistently. “Production-only” bugs become a thing of the past. There are other benefits, too, like shipping a dev environment to a team of developers that is entirely consistent, even across platforms, rather than battling with individual developers computers.

So… great? Use it all the time for everything? The stopper there is that it’s complicated, and web dev is already friggin complicated and it often just feels like too much. Andrew Welch, however, makes the case that you don’t have to learn Docker super deeply in order to use it:

Dock­er is a devops tool that some peo­ple find intim­i­dat­ing because there is much to learn in order to build things with it. And while that’s true, it’s actu­al­ly quite sim­ple to start using Dock­er for some very prac­ti­cal and use­ful things, by lever­ag­ing what oth­er peo­ple have created.

Fair point. I don’t deeply understand most of the technology I use, but I can still use it.

While I run Docker all day for CodePen’s fancy dev environment, that’s what my use is limited to. I don’t reach for it like Andrew does for everything. But I can see how it might feel liberating having all that isolation between projects. One of my favorite of points that Andrew makes is:

Switch­ing to a new com­put­er is easy. You don’t have to spend hours metic­u­lous­ly recon­fig­ur­ing your shiny new Mac­Book Pro with all the inter­con­nect­ed tools & pack­ages you need.

I find myself bopping around between computers fairly often for various odd reasons, and being able to make the switch with minimal fussing around is appealing.

To Shared Link — Permalink on CSS-Tricks



from CSS-Tricks https://ift.tt/3G50opl
via IFTTT

Embrace the Unpredictable

In nature, no two things are ever the same. Life is imperfect, unpredictable, and beautiful. We can walk through the same forest every day and see differently colored leaves. We can look up at the clouds every minute and watch a whole new formation. The physical world is transient and ever-changing. What if our designs were a little more like this?

Often, we spend hours, weeks, even months carefully crafting our websites/applications, sculpting every last pixel until they are just right. Then, we set them free into the world — a perfectly formed, yet static snapshot of something that once was a living, evolving thing.

There is (of course!) nothing wrong with this way of working. But what if we let go of the idea that there can be only one final version of a design? What if our interfaces were free to take more than one form?

I could write forever about this stuff, but I think it’s best to show you what I mean. Naturally, here’s a Pen:

Try clicking the “Regenerate” button above. Notice how the interface changes just a little every time? By parameterizing aspects of a design, then randomizing those parameters, we can create near-infinite variations of a single idea. For those familiar with generative art — art made using a system that includes an element of autonomy — this is likely a familiar concept.

For makers (particularly perfectionists like me!), this approach to design can be incredibly liberating.

For the folk who use the things we make, it creates an experience that is truly individual. In randomizing carefully chosen aspects of our interfaces, they become ephemeral, and to me, this is kind of magical. No two people will ever see the same version of our work.

The web can be a cold, sterile place. By embracing the unpredictable, we can add a joyful, organic touch to our creations — to me, this is the essence of generative UI design, and I would love if you gave it a try! SVG, Canvas, and CSS/Paint API are all excellent mediums for generative work, so pick the one that is most familiar and experiment.

Just remember: apply carefully, and always be mindful of accessibility/UX. Magically evolving designs are great, but only if they are great for everyone.



from CSS-Tricks https://ift.tt/31jTXQ2
via IFTTT

Exactly What You Want

What is one thing people can do to make their website better?

Exactly what you want to build!

Ask yourself:

  • What drew you to development in the beginning?
  • Is there an experimental API that you’ve been wanting to try out?
  • What could you spend all night hacking away at, just for the fun of it?

Your personal site is a statement of who you are and what you want to do. If you showcase your favorite type of work, you’ll get more requests for similar projects or jobs — feeding back into a virtuous cycle of doing more of what you love.

Like stage performances, you can tell when love and excitement went into creating a website. One of my favorite examples is Cassie Evans’ website. She added so many fun flourishes (including an adorable SVG self-portrait). The joy baked into her work has (at least partially) led to her current role, bestowing animation superpowers at GreenSock!


So, go forth, and create a trailing mouse cursor. Or a confetti component! A real-time drawing pad, or some hardware to show the current state of your coffee machine. Really, anything that gets you excited to build!



from CSS-Tricks https://ift.tt/3GkMdgf
via IFTTT

Mostly Clear today!

With a high of F and a low of 33F. Currently, it's 39F and Fair outside. Current wind speeds: 6 from the Northwest Pollen: 3 Sun...