DEV Community: Alex Trost

Making Dynamic Animations with Shaders

Alex Trost — Tue, 01 Sep 2020 21:39:00 +0000

I’ve been following ilithya’s shader demos for a while and wanted to write about her work weeks ago, but quickly learned that I was out of my depth with shaders. Instead, ilithya helped me write the Introduction to Shaders issue as a warm-up. Now it's race day!

If you're new to shaders and haven't read the Introduction to Shaders issue, that would be a good place to start. It provides a conceptual foundation that will make it easier to understand the shaders we're covering.

Summer Screen

Let's dive deep into how ilithya made this awesome shader, Summer Screen.

There's a few things going on here. First, we've got these vertical line sections that are shifting back and forth. Then we've got these gradients coming in from the top and bottom like color waves on a beach. Let's figure out these two effects.

First we'll check out a shortened version of the GLSL code so we can see what's going on. You might see a new language and some math here but don't worry! We'll trot through them nice and slow.

// Create three static colors
vec3 colorA = vec3(0.5, 0., 0.5); // Purple
vec3 colorB = vec3(1.0, 0.41, 0.71); // Pink
vec3 colorC = vec3(0.0, 1.0, 1.0); // Teal blue

// Create three dynamic colors
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

// Our color output
gl_FragColor = vec4(color3, 1.0);

The first thing to address is that GLSL is a typed language, so when you declare a variable you also declare its type.

A float for our purposes can be thought of as a number with a decimal.

A vec3 for our purposes is kind of like a special JavaScript array with three values.

A vec4 has one more value than a vec3 and is what the output of a shader main() function needs to be. The four values there align to red, green, blue, alpha.

First ilithya creates colorA, colorB, and colorC. Each of these are static colors that aren't going to change.

Then she uses these colors and other variables to create dynamic colors that will change. We'll look at the vertical lines first.

Vertical Lines

For the vertical lines let's zoom in and see what's really going on here.

The lines are really repeated gradients going from dark to light.

To make gradients with GLSL we use the mix function. mix takes three arguments: x: the start of the range, y: the end of the range, and a: the point between x and y.

// vec3 mix(vec3 x, vec3 y, vec3 a)
vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));

ilithya is making a gradient between the purple and pink, so those are her first two arguments. The colors get mixed in different amounts based on the value of a, which is a value from 0 to 1. If a is 0, we'll see 100% of the first color. If a is 1 we'll see 100% of the second color. Anything in between and we get a blend:

So that can give us one gradient, but how do we get repeating gradients?

To get the gradients to stop and start from 0 again, ilithya is using a GLSL function called fract. This returns the fraction of a number, dropping the integer. fract(x) is the same as doing x - Math.floor(x) or x % 1 in JavaScript. So as x increases, fract(x) will always be a float between 0 and 1.

I'm going to simplify it beyond what ilithya has in her piece to show how the fract function works:

As we can see, even though x keeps increasing, the result of fract(x) just returns the fraction, or whatever comes after the decimal, giving us that same purplish color. Translate that over the entire piece and you've got ilithya's cool vertical bars!

We'll touch on how all these pieces animate a bit later.

Pink & Blue Gradient

Now we move to color2.

vec3 color2 = mix(colorB, colorC, (y - sin(u_time)) * 0.5);

Another mix, this time between the pink and blue. No fract this time, so we're getting a smooth gradient. The y value makes it change color from bottom to top. We'll touch on the sin(u_time) bit soon.

Putting it All Together

Then she combines color1 and color2, using a mix amount that gets closer to 1 on the right side. The horizontal change is due to the x value. The cos(u_time+2) is for animation.

vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

Here's a simplified version of the shader's parts and the final color output:

You can see our simplified version looks similar to the finished shader, it's just missing animations.

Animation

There are three main animations happening in Summer Screen:

The bars shifting left and right in color1
The pink and blue gradient moving up and down in color2
The mix value for color3 moving left and right

Each of these are using the value of the current time, and familiar math functions, sin and cos.

vec3 color1 = mix(colorA, colorB, fract(x*fr+cos(u_time)));
vec3 color2 = mix(colorB, colorC, (y-sin(u_time))*0.5);
vec3 color3 = mix(color1, color2, x*cos(u_time+2.));

That time value comes from a Three.js Clock and is how ilithya animates most of her shaders. It returns the elapsed time since the page loaded.

Don't worry if you don't know Three.js. The code ilithya uses is reusable boilerplate that makes the shader code simpler. We'd have to have a lot more GLSL code without the little bit of Three.js. It's a handy WebGL abstraction.

When ilithya calls either sin(u_time) or cos(u_time) she's going to get back a value between -1 and 1, and it'll transition smoothly. If you're familiar with CSS animations, it feels a lot like an ease-in-out.

Super Quick Sine Wave Refresher:

As we increase the value along the horizontal axis, the sine wave moves us up and peaks at 1, brings us down to 0 and bottoms out at -1 before climbing again. No matter high the horizontal value is, the sine of that value will always be between -1 and 1. Cosine works similarly but gives a different value.

And there you have it! Three different parts being blended and animated together to make one awesome animation.

Break it Yourself

As she was helping me understand it, ilithya encouraged me to swap values out in the shader code. I highly recommend you go and do just that.

To see the vertical bars isolated, change the last line of the shader code to:

gl_FragColor = vec4(color1, 1.0);

To see the vertical pink and blue gradient:

gl_FragColor = vec4(color2, 1.0);

Or you can change that to colorA, colorB, or colorC to see a screen of solid color. Play with it, have fun, figure out how it works.

Check out Summer Screen →

Bubble Gum

I won't be diving into how this shader works, but it's just so dang soothing to stare at, I had to share it. Let me know if you'd like to read about it in a future issue.

Check out Bubble Gum →

Shader Resources

Ilithya shared some great resources for learning shaders over on her blog. The resource that everyone recommends is The Book of Shaders, so definitely check that out if you're interested.

Creating Realistic Art with CSS

Alex Trost — Mon, 24 Aug 2020 12:32:00 +0000

It can be challenging enough to use CSS to match the exact layout you're going for, but could you imagine using it to paint a landscape? Or recreate an intricate playing card? Or even create a realistic portrait? That's exactly how Ben Evans uses CSS, and the methods he uses to make his art are fascinating.

I could write pages about how detailed and beautiful each of these pieces are. I love it when people push the limits of HTML and CSS, so we had to bring Ben in and learn his techniques!

Unique HTML

The first thing that struck me when I look through Ben's code was HTML. There's an intense amount of styling happening, and yet he isn't using a single class or id. For example, here's the first 12 lines of code in his landscape piece:

<landscape>
  <sky>
    <x>
      <x></x>
      <x></x>
      <x></x>
    </x>
    <x>
      <x></x>
      <x></x>
      <x></x>
      <x></x>
      ...

Ben explains that he's obsessed with small code and likes the appearance of the <x> elements. They're custom elements so there's no default CSS to battle against. For your own mental model, you can think of them as behaving just like divs.

So how does he style all these elements if they don't have classes?

Styling with nth-of-type

Ben creates a bunch of elements in his HTML and then moves to his CSS. There he doesn't need to worry about naming each bit, because he's using the nth-of-type selector. This way he doesn't have to name things or change his HTML.

You might think this makes it harder to keep track of, but Ben leaves comments by the major pieces and that makes it easier to sort through.

A great tip from Ben for anyone trying CSS illustration: Start with the background and work forward instead of using z-index or translateZ. Ben says, "Safari in particular gets very confused with pseudo-elements and z positioning."

Responsive rems

The fact that all of these pieces are responsive is pretty dang neat. How does he do it?

html {
  font-size: 1vmin;
}

The vmin unit responds to the viewport's smallest side, so it will decrease if the screen gets smaller. The rem unit is relative to the font-size of the root element. So if we base everything in rems, they're all relative to the same value. Great technique!

Drawing Techniques

Ben sets the elements he's drawing with to position: absolute; top: 0; left: 0; so that they leave the document flow. Then he moves them into place by using transform: translate3d(). He shapes the pieces with border-radius and various transforms, and sizes them with rems. Then most of the actual drawing uses background: linear-gradient and/or box-shadow.

box-shadow and linear-gradient are extra useful because they allow for multiple values separated by commas. Let's see how he used this technique to make the hair of the King of Hearts.

King of Hearts

Box Shadow Hair

I've mainly used the box-shadow element for making soft blurry shadows under cards and other elements. Ben is using it for WAY more creative purposes in his work! The hair on the king is actually multiple layers of box-shadow. Let's check it out by messing with it.

By using commas you can put multiple box-shadows on a single element. Ben alternates blue and white, increasing the offset each time to space them out. In my version, I changed the $blue to different colors to show us how it's working.

The key for crisp lines? Setting the third property, blur-radius, to 0.

Animation

When you hover over the card it does a nice little spin and flip.

Ben's doing a few things to achieve this great effect.

First, there's a bit of thickness to the card. It's really just two elements with white backs that Ben moves just a bit apart. The flip is quick enough that our eye registers the white in between as thickness. Awesome trick!

As the card rotates it gets dark when facing down and brighter when facing upwards. You almost don't pick up on it because it's so realistic. Ben has elements covering the front and back that animate between transparent, black, and white. Here's the code for the effect with a nice animation shorthand:

@keyframes light {
  0%,
  100%,
  50% {
    background-color: $none;
  }
  25% {
    background-color: rgba($card, 0.7);
  }
  75% {
    background-color: $body;
  }
}

And you might not believe it, but the back of the card is just a single element. Pretty awesome.

Check out the video timelapse for this one to watch it all come together. Check out the King of Hearts on CodePen.

Isla

This was the first piece I saw of Bens, and it's still probably my favorite. All the subtle touches he added to this to make the skin feel more realistic are just fantastic.

If you look close you can see that the iris is a bunch of rounded squares rotated around the center point. Ben used the same technique in the next piece for the center of the lemons.

The perfectly detailed hair really makes this piece. The eyelashes, eyebrows, face fuzz, and head hair all have different properties and make it feel more realistic. Ben's using box-shadow here in a more complex way than he did for the King's hair. Instead of white between the colors, he makes the gap transparent and changes the color to add depth.

Here's a timelapse of Ben making the piece, and here's Isla on CodePen.

Water and Lemons

CSS Glass

I assumed the most difficult part of this piece was the glass. All the refractions and highlights are perfect and make this glass look so good!

Turns out I was mistaken. Ben says, "The main thing I have learned through all my CSS art is that man-made materials are a lot easier to draw with CSS than organic materials."

Makes sense now that I think about it. The shapes and coloring of the lemons are much more complex than most man-made things. Ben even points to our Frontend Friend Oscar Salazar's awesome glass ball as an example of glass done well in CSS!

Landscape

Not only is this piece stunning, but it holds a clever SCSS trick that lets the viewer tweak the colors. At the top of the CSS you see:

// v CHANGE THE COLOUR OF THE SUN v //

$sun1: #f2de6f;

What's cool is that by using SCSS color functions, every other color is based on this one color. From that seed, Ben shifts the hue, changes the saturation, brightness, and opacity to create the rest of the colors.

As an example, let's set the variable $start to aqua then use the adjust-hue function to make a new color. Hue is a value between 0 and 360 as you can see in the color wheel below. We can make a new color by increasing the teal's hue by 60deg.

The result is more of a 'blue' rather than teal. If we were to use -60deg we'd get a green color.

Ben is using this function and many other SCSS/Sass color functions to create his palette from the color you choose.

Let's look at some examples. On the left is Ben's original color and four of the colors that are based on it. Then check out the results as I change $sun1 to orange, dodgerblue, and darkgray.

What a great way to utilize SCSS color functions! I love this concept and would love to see more people use it in their work.

Halftone Dots

If you look closely you'll notice a dot pattern in the water similar to an old-school comic strip.

They're called halftone dots, and I didn't realize they could be made with just a couple lines of CSS. Ben shares his solution with us:

background-image: radial-gradient(blue 30%, #fff 0);
background-size: 1rem 1rem;
background-position: 0 0, 0.5rem 0.5rem;

Ben uses them in this landscape piece to add a bit of texture to the water. He's also using them on parts of the lemons in the previous piece.

Check out the timelapse here.

Wrap Up

Well, that's the end of the trail for us today. We learned so much by looking through Ben Evans's work. Ben doesn't use ids or classes but instead picks up the next element to style with nth-of-type. We saw just how powerful box-shadow can be, and how Ben uses it to make repetitive shapes or thin, wispy hair. Ben made his landscape customizable through Sass variables, and we saw how they work along with a few examples.

I hope this inspires you to give some CSS art a try, or maybe just use box-shadow in a new way on your next web build.

Huge thanks to Ben for teaching us his techniques. Go check out his website and follow him on Twitter.

An Introduction to Shaders - Frontend Horse

Alex Trost — Sun, 26 Jul 2020 18:13:51 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on July 16th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Howdy, and welcome to the thoroughbred web-dev newsletter!

We've got something extra special on the trail this week. In collaboration with the amazing ilithya, we're bringing you an introduction to shaders!

Shaders can be a super power for a frontend developer, so it's good to have a general understanding of what they are and how they work. That's what this issue is all about.

It's an overview of some main shader concepts and will serve as a gentle introduction to the wide world of shaders. If you already have some shader experience, this might help you solidify some of your understanding as well.

In a future issue we'll dive into the awesome shaders ilithya makes on CodePen, so keep an eye out for that.

Let's hit the trail and learn about shaders!

A Conceptual Shader Introduction

Shaders can feel a bit overwhelming if we immediately jump into the code. Instead, let's gain a high-level understanding of shaders by using a metaphor.

A Pixel Classroom

Let's imagine a classroom of pixel students. Real screens can hold thousands of pixels, but for simplicity, there are just 16 pixels in this classroom representing our screen. The students' desks are lined up in 4 rows and 4 columns.

Each pixel is taking a shader test to determine its color. Like any good school, there's no cheating! Each pixel has the same test and has to complete it on their own. Everyone takes the test at the same time and changes color to the answer at the same time.

So if we want to make a solid pink shader, we'd give everyone a test that returns the color pink.

Each student gets the same answer because there are no dynamic values. It's all hard-coded.

So how would we make a gradient?

We can't hard-code the gradient by handing students slightly different tests. Remember: each student gets the same test.

However, our pixel students know where they sit in the classroom, and we can reference their column and row numbers on the test. If the test tells them to set their opacity of the pink color equal to 3 divided by their column number, the students across the columns will get:

0,

0.33,

0.66,

and 1.0.

With that set to their opacity our classroom will go from white to pink like this:

This little pixel classroom is heavily simplified but helps us grasp some basic shader principles. Shader artists use factors like pixel position, the time, and math like sine waves and random values to create amazing visuals.

It's important to note that shaders are great for animations. Our pixels are super fast and can take 60 tests every second (60 frames per second), as long as they're not too complex.

Now that we have a metaphor to work with, let's transition to reality and learn what shaders are.

So what is a shader?

Shaders are a special program that run on your computer's Graphics Processing Unit (GPU) instead of the CPU. The shader program gets called for each individual pixel in parallel, making them super fast. This was our classroom all taking the test at the same time.

This comes with a catch, though: you need to design shaders differently than you might a JavaScript function.

If I wanted to color a grid of pixels with JavaScript I might write a loop like this.

// Loop across each pixel and change one at a time
for (let i = 0; i < width; i++) {
  for (let j = 0; j < height; j++) {
    grid[i][j] = someColor;
  }
}

But this changes one pixel at a time in the order of the loops. This would be like our students being told by the teacher one at a time what color they should show.

With shaders you only have access to the inside of the loop, so you’d write this.

// function called for every pixel at the same time
void main() {
  COLOR = some_color;
}

Shaders are incredibly versatile and are used in graphics across movies, video games, and the web! That animated gradient on the new Stripe site? That’s a shader!

Vertex and Fragment Shaders

There are two types of shaders, vertex shaders and fragment shaders. While we're only talking about fragment shaders today, It's helpful to briefly touch on the difference. Vertex shaders change the vertices of a shape, while fragment shaders change the pixels inside that shape.

A vertex shader defines the shape of our pixel classroom while the fragment shader controls the color of the pixels inside.

We need both to make our image, but our vertex shader is very simple when we want to focus on the colors.

Cool, so I'm beginning to understand what shaders are, and I know they’re awesome. How tough is it to become a shader expert?

Are shaders hard?

Ilithya explained that getting started with shaders can be tough. They’re not written in JavaScript, but in OpenGL Shading Language (GLSL), a C-style language. She also said that yeah, you should be decent with math if you’re going to be making custom shaders.

But ilithya told me how to start learning shaders without getting a mathematics degree or learning C:

Tweak other people’s shaders.

For any piece of code you’re trying to figure out: try to break it. Learn what each line does through trial and error. Then add comments as you figure it out.

Use a simple shader example as a starting point. Find the numbers in the shader and change them to see what they do. This playing with values, and changing a + to a - to see what happens is exactly how ilithya got started.

Now we've covered a conceptual overview of shaders. Let's take a look at a few shaders to see some of what's possible.

Shader Examples

Here are just a few examples of shaders used on the web. I recommend searching on CodePen and other similar sites for 'shader' to see what's out there.

Shader Resources

The Book of Shaders

Ilithya pointed us to the holy grail of shader resources: The Book of Shaders. The authors take you by the hand and show you how a few basic shaders work. Like giving you red and yellow paint, then you mix them yourself to discover orange.

The site has tons of working code demos, and they even point out lines of code that you should edit to change the effect. They even have a super helpful introduction for those coming from JS.

ShaderToy

ShaderToy is basically a CodePen dedicated purely to shaders. There’s some incredible stuff here, so don’t get overwhelmed. Start with the Book of Shaders to learn the basics, but peek here to see what’s possible.

Check out ilithya’s site and her CodePen ->

So Long, Partner

Well, that’s the end of the trail for this week. I appreciate you riding with me.

Follow @FrontendHorse on Twitter, and if you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.

Extra special thanks to ilithya for helping me write this piece for two weeks! It went through a ton of revisions and she provided so much information and feedback for both parts of the issue. Please assume that any mistakes are mine and anything clever was her insight. It was a huge collaborative effort and I'm incredibly thankful!

This issue was very different from previous issues, so I'd love to know what you think. You can reply to this email to let me know. I read everything I get.

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,

Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Gooey SVG Effects, Game UI, and Meetups - Frontend Horse #7

Alex Trost — Mon, 20 Jul 2020 19:31:13 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on July 16th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Helloooo, and welcome to the Seabiscuit of frontend newsletters!

We’ve got a coffee cup, a Zelda UI tutorial, and a meetup I'm hosting all ready for race day. I hope you're wearing some ridiculous clothing and your fanciest hat.

So place your bets, find your seats, and let’s get started!

CODEPEN

Coffee For You

I’m amazed by the level of detail and care that’s gone into Vadim Bauer’s gorgeous cup of coffee. It's a great piece and I just had to know how he made it.

The detailed CSS drawing is stunning in its own right. However, the part that dropped my jaw was the animation on the bubbles. They drift from the center of the cup towards the edge to join the other foam there. When they get close, the edge foam moves outward like real form on liquid would!

How the heck is he achieving this effect?

His answer? SVG Filters

Welp, it’s official: I’m crushing hard on SVG filters. They’re just so dang versatile! In previous issues we’ve seen them used to make water and lightning effects. Now you’re telling me that they can make stuff goop together? So rad.

Vadim breaks down the effect:

It’s an SVG filter that basically applies a huge blur to the elements and then increases the contrast for the alpha channel, so that the now bigger shape doesn’t look blurred anymore. The result is the elements merging when they get close to each other.
It’s known as the gooey effect. You can find a pretty good post about it on CSS-Tricks: Gooey Effect

This is an awesome tutorial and you can see how it’s similar to Vadim’s effect.

The other thing I loved about “Coffee for you” was the subtle steam that drifted by. Guess how he made it?

That’s also an SVG filter. This time with feTurbulence for the texture and feDisplacementMap to distort it. The rest was pure trial and error to get it to look like some real steam.

To learn, Vadim recommends digging into the CodePens you admire and playing with them.

Changing things and seeing what happens is always a great way to learn about code.

Vadim, I couldn’t agree more.

Check it out ->

TUTORIAL

Building a Zelda UI

I’ve always been a fan of video games, and the Zelda series is by far my favorite franchise. So when my friend Tim sent me a a Zelda UI tutorial, how could I not dig into it?

At first I thought it was just a cool idea, maybe a fun gimmick for a tutorial. But it’s much more than that. The author, Florent Lagrede, shows you how to build out a quality UI using React, TailwindCSS, and Framer-Motion.

This is the gummy-vitamin of tutorials. Zelda is the hook, but there’s great stuff here, too.

So much of teaching is packaging the content in ways that the learner enjoys. That’s why people like Bill Nye the Science Guy was able to sneak so much education into our brains.

Throughout both articles, Florent decomposes the interface down to small parts, and concretely talks about how he plans to implement it. Turning a design spec into a web layout is such an important skill to develop, and it’s always helpful for me to see how other people approach it.

The result is just awesome. Not only can you navigate with your keyboard the way you’d expect to in the game, but it even accurately combines character buffs you get from wearing certain parts of clothing.

The tutorials are a part of something larger: Florent’s project, Game UI on Web. It’s Florent’s site where he’s recreating video game UIs and creating tutorials on his process. To start he’s recreated menus from Hollow Knight and Zelda. It started when Florent was looking through the UI resource Interface In Game, which has hundreds of stills and videos from all kinds of video games. He wondered why can’t we do this on the web?

So he built out the Hollow Knight demo as a challenge, and had so much fun he got hooked on making game UIs.

Then I came up with the idea to make tutorials that would focus on doing instead of only reading. As developers, I think we learn best by doing. However, it can be difficult to get started. I find that having a motivating goal can help you begin. Having fun while learning makes the process even easier.

I asked Florent what he thought web developers could learn from building these game interfaces? He said:
• How to make interactions more enjoyable, visible and understandable
• Small details that add to the experience
• Using sounds in an interface

While web dev has a lot of ‘sameness’ right now, Florent’s projects and tutorials on GameUIonWeb feel unique. Creating game UIs with web technology is such a great concept. So many UX design principles carry over.

Picking apart a well designed game UI will deepen your understanding of web and user experience design. Plus, as the web becomes more whimsical, some of these game dev skills are going to come in handy!

What’s to Come
Florent has big plans for Game UI on Web. He wants to build more game UIs that go beyond the ‘inventory menu’ type that he’s done already. He also wants to write tutorials that teach web developers the tricks that bring delight and joy to games.

I think it’s safe to say that Florent wants to make the web a lot more fun.

Check out Part 1 and Part 2 of his Zelda Breath of the Wild tutorial. Then check out Game UI on Web to see the demos of what he’s built so far.

Resources

This Interface In Game site is such a fantastic resource. For example, check out this huge collection of Animal Crossing screenshots and videos!
Florent created his excellent wireframes in Excalidraw, a free web-based drawing tool.

EVENT

Codefwd: Design Patterns

If you’re reading this as it comes out, then I have some exciting news! I’m going to be hosting a meetup with a wonderful round of talks and I’d LOVE to see you there!

We’ll be streaming over on the Codefwd Twitch channel starting at 6PM EST. Please ride through and throw some horse puns into the chat! It’s my first time hosting a remote conference, so I’m pretty excited.

Here’s the lineup:

Responsive Design in 2020 - Kilian Valkhof
Event Driven Serverless Microservices - Gareth Mc Cumskey
Simple Rules for Complex Systems - Jake Burden
MongoDB Schema Design Best Practices - Joe Karlsson

I hope to see you there!

So Long, Partner

And it's a photo finish! What a race, I don't care who won, I'm just glad you were here for it!

Follow @FrontendHorse on Twitter. If you enjoyed this I’d be over the moon if you share it with a friend or tweet about it.

Special thanks to Vadim Bauer and Florent Lagrede for speaking with me about their work.

Now let's get out of here before the next race starts. You take care.

Your Neigh-bor,

Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #6 - Rockstars, Logo Grids, & Image APIs

Alex Trost — Tue, 07 Jul 2020 11:46:19 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on July 2nd, 2020. Visit Frontend.Horse to subscribe and find more issues.

Howdy, and welcome to the most educational horse trail on the internet! Saddle up, because we’re going to be racing through SVG filters, image APIs, and alignment techniques.

We might stop for a snack or two, but we won’t dilly-dally.
We never dilly-dally.

Let’s ride!

CODEPEN

Slash

This SVG animation is so much fun that it actually won GreenSock’s CodePen challenge! Based on this excellent Dribble shot, it shows guitarist Slash shredding on his guitar as he slides across an infinite stage. The coolest part to me is the lightning and shock waves that follow every strum!

The developer, Oscar Salazar, was kind enough to show us some of his techniques, and even share some fantastic resources.

To get the remarkable lightning effect, Oscar applied two SVG filters to a long thin rectangle: feTurbulence and feDisplacementMap. We can see how those two filters can warp what they’re applied to:

If we comment out the HTML filters, we can see the dramatic effect they have on the piece!

When you use these filters, the content can often overflow, Oscar says. You can see that the lightning bolt gets much bigger than the original line. Oscar’s tip: avoid clipping issues by giving the bolt a parent element with plenty of padding.

Those circular shock waves add so much to the effect, and it turns out they’re just a div! Oscar took a square div, made it a circle with border-radius: 50%; and applied those same wavy filters. Great solution!

It’s subtle, but the blur effect on each strum is the icing on the cake. Oscar added an feGaussianBlur filter to the body with a value of 0. This turns off the effect but allows him to animate that value, bumping up the blur when he wanted. If you change line 115 of his code to have stdDeviation="5" you’d see a very blurry Slash!

Oscar credits the blur technique to friend of the newsletter, Jhey. Oscar watched him make this CodePen on a live-stream and was able to use a similar effect.

Oscar used a similar lightning effect on this fun Pokedex he made previously. We also saw Kasper De Bruyne use it to make water back in Issue #1!

Resources

One resource Oscar shared is a great tutorial, SVG Filters 101, by Sara Soueidan. The other is a super useful SVG Filter Playground by @yoksel_en. I hadn’t seen either of these before, and they’re both excellent.

Check it out ->

TUTORIAL

Aligning Logo Images in CSS

Ahmad Shadeed has a great tutorial for making a logo grid of proportionately sized elements. When you have a grid of images with different proportions, it’s tough to get them to all look equal.

Here’s the key part of the tutorial: set a width and height and use object-fit: contain;. Check out the difference!

Image credit: Ahmad Shadeed

Ahmad sums it up: “The great thing about object-fit: contain is that no matter how the width or the height is, the logo is contained within them, without distorting it.”

I also learned that you can target specific file types with CSS: img[src$='.jpg']

Lots of good stuff in this one.

Check it out ->

HORSE RESOURCE

Placeholder Images

When I’m in the early stages of a project, building out components that have images can be a pain. I don’t want to switch between my image editor and code editor if I can help it. Luckily there are a couple of great resources that make using images in projects way more fun.

Unsplash is the common choice for free, high-quality images, but did you know they have a super simple API?

If not: hold your horses. You’re gonna love this.

Use this API to get a perfectly sized image that matches your search term.
https://source.unsplash.com/{width}x{height}/?{search term}

Let’s use it to grab a random picture of horses:
https://source.unsplash.com/1600x900/?horses

The best part is, there’s no auth you need to worry about, it just works. Use it as if it were a path to any jpg:
<img src="https://source.unsplash.com/1600x900/?horses" alt="Horses, I hope" />

Now if your designs change, you don’t have to open photoshop to crop a bunch of pictures.

Hot Tip
If you’re hitting the same URL over and over, your browser will cache the result and serve up the same image. Images like this don’t look too great.

<img src="https://source.unsplash.com/550x225/?horses"/>
<img src="https://source.unsplash.com/550x225/?horses"/>
<img src="https://source.unsplash.com/550x225/?horses"/>
<img src="https://source.unsplash.com/550x225/?horses"/>

Bypass the cache by adding any query onto the end and feeding it a different value. The index of the item works nicely.

<img src="https://source.unsplash.com/550x225/?horses&i=0"/>
<img src="https://source.unsplash.com/550x225/?horses&i=1"/>
<img src="https://source.unsplash.com/550x225/?horses&i=2"/>
<img src="https://source.unsplash.com/550x225/?horses&i=3"/>

Just like that, our site is mag-neigh-fique! This is a common cache-busting technique, but especially useful for giving your pages some variety with this API.

The Unsplash Source API has a few other features, but I think this is the most useful.

One thing to note: Unsplash isn’t great if you need a bunch of user avatars. For that I reach for Pravatar or Adorable Avatars if the app is more fun.

Thanks to this thread by Swyx for inspiring this bit.

COMMUNITY

Around the Stable

Friend of the newsletter Jhey gave us an awesome shoutout this week, along with a bunch of other great newsletters! Check out that thread and subscribe to some of those other newsletters, too.

Naming the community
Every cool community has a title for its members. Listeners of the Shoptalk Show are “Shop-o-maniacs,” for example. So what do you want to be called? Who do I address at the top of each issue?

Comment on this post or tweet @FrontendHorse to help name us, and we can do a poll next week to make it official. The prize is huge for this one: you’ll be able to tell everyone you came up with the name. Forever.

Will they write this accomplishment on your tombstone? Probably.

I’m excited to hear what you come up with! All ideas welcome!

So Long, Partner

Well, that’s the end of the trail for this week. I appreciate you riding with me.

Follow @FrontendHorse on Twitter, and if you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.

Special thanks to Oscar Salazar for speaking with me about their work.

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,

Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #5 - Infinite Scrolling and Slick Animations

Alex Trost — Fri, 26 Jun 2020 15:51:33 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on June 25th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Oh, howdy, I didn’t see you there! I was just saddling up to hit the trail. Care to ride with us? There’s a lot to learn in this issue, so I hope you packed a lunch.

This week we’re taking a close look at a beautiful portfolio site menu and a CodePen demo for an impressive carousel library!

SITE SHOWCASE

Marvin Schwaibold

I can’t say enough about the incredible portfolio site of Marvin Schwaibold. I love the font choice and elegant design, the way every element has its own transition when you go to a new page, and the perfect execution.

I spoke with Jesper Vos, the site’s developer, to learn some of his techniques. Jesper was kind enough to show us all the magic that went into making the Projects Page.

Technique: Infinite Scroll

The page seems simple: a list of projects flipped on its side so that as you scroll down, they move from right to left. There are 15 projects on display here, and yet you can scroll forever. The trick here is to double the list to make 30 items. Then, when the user is about to scroll to the end, you instantly snap them back to the start.

It’s hard to wrap your head around, so here’s how you can visualize it. With your dev tools, change the text on one of the items to something noticeable like “HOOOOOOWDY.” Then, start scrolling and notice that at a certain point, it ‘fixes’ itself. Keep scrolling and watch your “HOOOOOOWDY” come right back around.

It’s a great trick you can apply to anything to make it appear infinite. I used it on a couple of CodePens myself!

Technique: Image Layering

A few changes happen when you hover your mouse over a portfolio piece in the list. Let’s use the portfolio piece “Death of Stalin” as an example.

For one, the background turns red to match the “Death of Stalin” page. That way if you click through, that part of the page transition has already happened.

An image from the movie appears behind the “Death of Stalin” text but in front of the other items. When hovered, the “Death of Stalin” list item gets an active class, which gives it z-index:2;. The corresponding image becomes visible and gets a z-index:1;, and everything else keeps the default z-index of 0. The other items also drop a bit in opacity, letting you focus on the current element.

Technique: Image Physics

My favorite part of this page is the tiny bit of rotation you’ll get on the images based on your mouse’s velocity. Jesper explains that “springy easing gives them that little physical/tactile feeling.” I highly recommend you open your dev tools as you mouse around the page to see the transforms taking place in real-time.

The site was developed by Jesper Vos, designed by @MSchwaibold and motion by @YaelBienenstock. This same team won the Awwwards Site of the Month for March 2020 for their work on Madeleine Dalla. That’s another must-see site with impeccable design and animations!

The entire site has wonderful page-transitions on the images and text. If you’re interested in learning that technique, this Codrops article seems like a great place to start.

Check it out ->

CODEPEN

Mustache Guy

This CodePen by We The Collective is a fun demo to show off their new carousel library. Since Carousels & Horses go together like Peanut Butter & Jelly, we just had to check it out.

I’ve gotta start with the excellent illustrations. The hairstyle slideshow feels like looking through old photos of your dad over the decades.

“It was the 60’s!”
“There’s no excuse, Dad. No excuse.”

The illustrator, Ariel Hitchcock, did a fantastic job, especially on the hover-state illustrations. I recommend hovering over each Mustache Guy to find his hidden attire.

The Mustache Guys are all SVG, brought to life with CSS animations. The carousel uses their new library, wtc-controller-carousel, as well as another of their packages, wtc-tween. I reached out to Liam of We the Collective to discover why his team decided to write their own carousel library.

The carousel library is meant to fill a really specific requirement, which is to have a responsive, infinite carousel of elements. There are other libraries that can accomplish this, but they clock in at huge file sizes. We built this library because we’d been doing this from scratch over and over again. We also have a number of other libraries that we built to do different things (like galleries) that are lean, simple-to-use, and fully accessible.

I couldn’t agree more with his reason to make a library. My hatred for doing the same task, again and again, is the entire reason I picked up programming. His team has done the same thing multiple times, so now they save time and we all benefit from it being open sourced.

One of my favorite parts of the pen is when you click the “Accelerate” button. The carousel starts speeding up until it’s a blur, while the sides shrink down. It then switches to one Mustache Guy at a time, and the whole effect is so good, I had to know how it worked.

This library has a property called speed, which alters the speed at which it runs. We just tween that from the base speed to the speed at which this slideshow effect would happen while at the same time tweening down the width to a single element.

For the tweening, the developer, Marlon Marcello, is using another custom library, wtc-tween. There’s something to be said for having your own libraries to suit your specific needs!

Check out this CodePen and then take their carousel library for a spin.

Around the Campfire

I’d like to start ropin' in conversations from other parts of town. Cause at the end of the day, there’s nothin’ nicer than a warm, friendly community.

Colby Fayock tweeted:

Let it be known that this is now canon. If Frontend Horse becomes a podcast, it’ll be voiced by Sam Elliott.

I’ll be on the lookout for more tweets to rope in next week. Just give a holler @FrontendHorse, and I’ll hear it.

So Long, Partner

Well, that’s the end of the trail for this week. I appreciate you riding with me.

Follow @FrontendHorse on Twitter, and if you enjoyed this, I’d be over the moon if you share it with a friend or tweet about it.

Special thanks to Jesper Vos and Liam Egan for speaking with me about their work.

This is the part where we ride off into the sunset. You take care.

Your Neigh-bor,
Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #4 - Airplanes, Inclusive Components, and Bootstrap V5

Alex Trost — Mon, 22 Jun 2020 20:08:18 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on June 18th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Howdy, partner and welcome to this week’s round-up!

As always, I want to make you a prize-winning developer by showing you how others have created their brilliant frontend work. The best part is I learn from these, too, so we’re all growing together! Let’s hit the trail.

CODEPEN

Airplanes

Steve Gardner’s Airplane is my favorite kind of tech demo. It looks good enough to be on a professional site, but the copy lets you know Steve had a lot of fun with it.

A 3D airplane moves through the scene as we scroll, and even transitions to an x-ray style wireframe mode. I had to learn some of the techniques behind this one!

I was going to embed the CodePen, but the scaling doesn't make certain animations match up right. I highly suggest you open it in its own window.

The Techniques

I love how the plane moves throughout the piece smoothly without any noticeable hard stops. Steve explained that it’s really just a GSAP timeline that the user moves through with the scrollbar. He even gives us a great behind-the-scenes tip to watch it in action!

Right after line 340 in the JavaScript, make a new line and add tl.play();

You should see the airplane go through the animations while the rest of the page stays put!

The other thing I had to know was how he does this transition from solid to wireframe.

Steve explained that there are actually two airplanes animating at the same time. He’s using a ThreeJS trick that allows him to have two cameras in the scene. Each camera can only see one version of the plane, so the wireframe section only shows what the wireframe camera sees.

Resources

Steve used an open-source airplane model from Google Poly. It’s a great free resource you should definitely lean on.

Steve also shared his favorite ThreeJS tutorial with us, and I’ve gotta say, it’s AMAZING. A single tutorial, using basic shapes, but with a gorgeous result. Check this one out!

The scrolling is thanks to GSAP’s new ScrollTrigger plugin, which we mentioned last week as well. I have a feeling this won’t be the last time, either!

Check it out ->

HORSE RESOURCE

Inclusive Components

I’ve been reading Inclusive Components, an excellent book on “designing inclusive web interfaces, piece by piece.” The author, Heydon Pickering, teaches a11y principles by building out several common components.

I wanted to share what I learned in the chapter “A Todo List” with you.

Placeholders and Autocomplete

There’s a big design trend to remove labels, leaving only placeholders to show users what each input is for. Sure labels look like clutter, but it’s necessary information, especially the longer a form gets.

Heydon points out two things I hadn’t thought of that make this pattern extra terrible: focus and autocomplete. “Placeholders disappear on focus and can be eradicated by autocomplete behavior, meaning sighted users lose their labels.” Yet another reason to always have a visible label!

`<form>` for more than Forms

When I’ve made todo list apps in the past, I’d use an <input /> and a <button /> but not a form element, because I didn’t think I needed it. Heydon points out why you’d want to use a <form> element to wrap that input and button:

“We’ll want to allow users to submit on Enter and this only works reliably where a <form> contains the input upon which Enter is being pressed.”

So to make sure your user can slam that enter key across all browsers, devices, and assistive technologies, wrap your input in a <form>.

You can check out this specific chapter here, and buy the book here. Big thanks to Jhey for recommending I pick up this fantastic book.

DEV NEWS

Bootstrap V5

Version 5 of Bootstrap has released this week, and while I haven’t used Bootstrap in years, this feels like a big step for the web. Bootstrap is still massively popular, so the fact that they’ve dropped jQuery and support for IE feels huge. As someone who is eagerly awaiting the death of Internet Explorer, I fully support this move.

Check it out ->

So Long, Partner

That’s the end of the trail for this week. Thanks for riding with me.

Follow @FrontendHorse on Twitter and Instagram. If you enjoyed this, I’d be thrilled if you share it with a friend or tweet about it.

Special thanks to Steve Gardner for speaking with me about their work.

This is the part where we ride off into the sunset. Roll credits.

Your Neigh-bor,
Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #3 - iPads, Turntables, Cards and lots of GSAP!

Alex Trost — Wed, 17 Jun 2020 11:06:12 +0000

This is an issue from the newsletter Frontend Horse. This was originally published on June 11th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Hey, there! I hope your week is going great, and welcome to our third issue!

While this week is a return to form, racial equality isn’t a trend. There’s still so much to do, and it’s going to take a long time. I encourage you to sign up for monthly donations to an organization like Black Lives Matter.

I’m still looking to match $400 to a related charity. Reply to this email with your receipts.

Here’s our weekly round-up of awesome things. I learned a lot this week, and I’m excited to share what we’ve got. Let’s ride!

CODEPEN

One Div iPad Pro

First up is this awesome one div iPad Pro from Annie Liew. Photorealistic CSS pictures are awesome, and it’s like playing in Hard Mode when it’s done in a single div.

The Technique

There’s a few techniques to pick up here. The drawing is done by chaining radial-gradient and linear-gradient functions on the background property. You could use this trick to add some details to a button or header without adding more DOM elements.

Important to note: Annie uses both the ::before and ::after psuedoelements on that div. With that she gains two more elements to work with.

Annie says that the order of the gradient layers makes a big difference. "Having an understanding of how gradients work with transparency is very important."

Annie said the two resources that helped her the most were a CSSDays talk, and a blog post, both by the excellent Lynn Fisher.

Lastly, the whole piece is responsive because everything is done with the vmin unit. This unit is based on the viewport’s smallest side.

Start small and take some of these techniques for a ride!

Check It Out ->

CODEPEN

Superstar DJ

This week GreenSock announced their amazing new ScrollTrigger plugin that integrates with GSAP. There are a bunch of awesome demos made with it, and I especially love this record player by Jhey Tompkins . It uses your scroll to move the record back and forth, like a DJ scratching!

The Technique

Jhey is using GSAP to rotate the record at a set speed. Then he needs to detect the velocity of the user’s scroll. ScrollTrigger provides a built in getVelocity() function. Using that value, he’s able to change the speed. So if a user scrolls up quickly, the record goes backwards quickly.

It even works on mobile, letting you swipe up and down to DJ. Super cool!

Jhey says he’s adding a couple Easter eggs to this pen in the coming days, so circle back!

Check It Out ->

CODEPEN

User Interaction Card

I love this card interaction demo by Shahid Shaikh. My favorite part is the way the button at the bottom animates to become a bottom bar. It’s so smooth that I thought he was manipulating SVG elements to get the effect.

The Technique

Turns out it’s a regular button with a border-radius. When clicked, it expands , moves, and loses the border radius at the same time. It’s so seamless!

Shahid used GSAP to animate, and said he made this to learn more about controlling timelines. He used the official docs and included videos to learn.

This card has animations we’re used to seeing in mobile apps, but I’d love to see more of this quality across the web, too!

Check It Out ->

TUTORIAL

Background Image Grid Motion Effect

This is a great tutorial for making a grid of images that move with the user’s mouse. Mary Lou walks us through this great technique that you’ve probably seen on several sites by now.

Like all Codrops tutorials, it’s a professional-grade effect, complete with Demos and source files on GitHub. One thing the tutorial doesn’t mention is you’ll definitely need the source files. Especially this utils.js file.

There’s some nice, reusable functions in there, the key one being get mouse position. With that value and a little math, you get new x and y position for the grid. Transition between positions with GSAP and you’re set!

The technique of offsetting things based on mouse position can be taken even further, as their inspiration examples show. I’d love to see how you take this technique and run with it.

Check It Out ->

HORSE RESOURCE

Live-Code Streaming

I’ve been watching live-coding streamers the past couple months and have learned so much! Getting to watch someone work and explain their thought process is invaluable. I ask lots of questions and have found these streamers more than happy to help. I highly recommend stopping by even for a few minutes when you see someone go live.

Here are some of the excellent streamers I’ve dropped in on in the last couple months.

In Horse News

I’m very new to the horse world, but I’m thrilled that non-digital equestrians are Breaking The Silence Surrounding White Privilege..

So Long, Partner

That’s the end of the trail for this week. Thanks for riding with me.

Follow @FrontendHorse on Twitter and if you enjoyed this, I’d be thrilled if you share it with a friend or tweet about it.

Special thanks to Annie Liew, Shahid Shaikh, and Jhey Tompkins for speaking with me about their work.

Your Neigh-bor,
Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #2 - Black Lives Matter

Alex Trost — Mon, 15 Jun 2020 21:49:59 +0000

This is an issue from the newsletter Frontend Horse. It was originally sent June 4th, 2020. Visit Frontend.Horse to subscribe and find more issues.

Like many of you, I spent this week witnessing the violence against Black people that occurs every day in the United States and across the world. I’m sad, I’m angry, I’m ashamed, I’m disgusted. Racist policies and ideas corrupt our government, law enforcement, and financial institutions.

It’s not one bad apple. It’s the tree.

While massive changes need to happen, individuals will make the difference. You can protest, you can donate, you can vote, you can inform your friends and family.

I stand with the Black community against these racist policies and police brutality. I stand in solidarity with George Floyd, Breonna Taylor, Ahmaud Arbery, and countless others.

This was a week for listening, not talking tech, so I’m including a different set of links. I urge you to support these organizations, support Black businesses, Black voices, and the Black community.

If you donate to these, or any other similar organizations, send me the receipt and I’ll match up to $400.

Black Lives Matter

National Bail Fund Network

NAACP Legal Defense and Educational Fund

Equal Justice Initiative

If you’re in the US, reach out and apply Pressure on Your Representative. Last, here’s a resource I personally found helpful for White men and White women who want to make meaningful change right now.

Please, take care.

Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

Frontend Horse #1 - Our First Rodeo

Alex Trost — Fri, 12 Jun 2020 02:12:11 +0000

This is an issue from the newsletter Frontend Horse. Visit Frontend.Horse to subscribe and find more issues.

Hey there, and welcome to the first issue of Frontend Horse! I can’t say how thankful I am that you subscribed before the very first one. Someday this will be worth as much as a copy of Spider-Man #1!

Probably.

For all the things I share I’ll try to bring you more details and a deeper understanding. Often times I’ll reach out to the creators to get it straight from the horse’s mouth.

I’ve got a lot for you this week, so let’s saddle up!

CODEPEN

Water

I love the composition and colors in this pen by Kasper De Bruyne , but the animated water effects steal the show!

The Technique

Kasper is using a combination of SVG filters and animation to simulate the water ripples. He’s using a fractal noise filter, which creates an image like this:

He’s then using a displacement map, which displaces or warps an image with the color values of another image.

Kasper explains that we pass the fractal noise_“to the displacement map and then animate thebaseFrequencyvalue of the fractal noise.”_ Animating that value is what creates the water ripples!

Kasper gives us this Codrops article by Sara Soueidan to learn more about the effect. For all the animations in the piece, he’s utilizing GSAP .

CODEPEN

Canyonlands

Adam Kuhn makes such delightful pens, and this one is no exception . The colors are gorgeous in light and dark mode, and the interactivity is a great touch.

The Technique

There’s so much to learn from this pen, but I want to focus on the way he’s changing the paths.

He’s declared a bunch of SVG paths as variables in his CSS. In the HTML he’s made a grid of SVG shapes that all look to their local var(--path)

For context, there’s a 6x6 grid of SVG elements. JavaScript loops through and randomly assigns each SVG a new path variable like this:
var(--path): var(--path5);

Adam tells us the key to his smooth transitions. “Each path needs to use the same number of handles and points as the next or they won’t transition smoothly. Rather, it looks as if they jump from one state to the next”

Adam also points out that this trick only works in Chrome and Edge at the moment.

To learn how to use scope with CSS custom properties, here’s a great article by Jhey Tompkins .

SITE SHOWCASE

Say Cheese

This wonderful one-page experience teaches the basics of photography through clear interactive examples and scroll-based animation.

The Techniques

Say Cheese has a lot going on with animations, hover states, and dynamic typography. The key is they all support the content, never take from it. The creator, Arthur de Almeida knows that content is king. He wanted the subject matter to “be as simple and accessible as possible.”

This is great web design and education design, too. As web developers, we’re always educating our users. It might be about a brand, a product, a topic like photography, or even telling about ourselves.

When your goal is to educate, break the subject into its simplest components,and build from there.

Arthur avoided as much technical jargon as he could, putting it in simple terms anyone can understand. Try this in your next project!

HORSE RESOURCE

Blush

Image resources like Unsplash and Undraw help you communicate your message and look professional. Pablo Stanley and his team recently launched Blush , the newest picture resource site. With Blush, you can create, mix, and customize illustrations from artists around the world.

Like Pablo’s Humaaans and Open Peeps , the bodies and scenes are highly customizable. The difference is that Pablo isn’t the only horse in the stable: he’s got 7 other illustrators, with more to come.
There’s a Figma plugin with a Sketch plugin on the way.

Everything in this scene is customizable! From the background to the body positions, clothes, heads, hair, and facial expressions. It’s a bit like playing dress-up, and a great tool to have in your toolbox.

You can download up to a medium PNG with a free account, and unlock the large PNG and SVG options with a paid plan.

TOP TROTTIN’ TUTORIAL

Animated Sparkle Text in React

Josh W. Comeau has made his site one of the most delightful places on the web, and he shares his methods in tutorials like this one . We make a component that can wrap elements like text and images in animated sparkles.

An image can’t do the animation justice. You’ve gotta see it for yourself!

The Technique

The technique to learn here is much more than just animated sparkle text! It’s the concept of adding emotion, clarity, and fun to content through reusable components.

Like any great idea, it’s catching on! Josh pointed us to Richard Haines’s animated music notes , and Mindsaha uses it with a few different icons.

I want to see devs take this idea and run with it. How about rainclouds that drench your pictures when toggled? Or a rainbow that animates across text? Josh has given us the tools, let’s use them!

So Long, Partner

That’s it for this week! I hope you found this useful, informative, and just a bit of fun. I’ll occasionally share what I’ve been working on, but for the past couple of weeks, I’ve been working towards this first issue!

Follow @FrontendHorse on Twitter and Instagram , or send this to a friend who might enjoy it!

Special thanks for Adam Kuhn, Arthur de Almeida, Kasper De Bruyne, Pablo Stanley, and Josh W. Comeau for speaking with me about their work.

Your Neigh-bor,
Alex

If you liked this post, head to Frontend.Horse to subscribe! You'll get the next issue before it's posted here on Dev.

12 Mac Apps That Do One Thing Really Well

Alex Trost — Mon, 22 Jul 2019 02:22:16 +0000

Tools created to solve one problem often solve that problem best.

Swiss army knives are convenient, but they’re not the best bottle-opener, nail file or saw.

These little macOS apps do one or two things well and I consider most of these to be essential.

Grab a couple if you’re looking for a cleaner, faster, and more productive workflow.

Most of these are free, a couple are under $5.

Magnet - Window Organization

Arranging windows, especially with multiple screens, can be a hassle. Magnet makes it easy to set apps to whatever fraction you’d like. Full, half, thirds, fourths - whatever you want, it’s easy with Magnet.

You trigger Magnet by keyboard shortcut or dragging a window to the edges of the screen. It snaps into place and gives you perfect proportions.

Magnet even allows you to move windows across screens. With a few keyboard strokes, my code editor moves from the left monitor to the right monitor.

Easily one of my most-used apps and the first thing I install on new computers. It even works on vertical screens! For $1 it’s surprisingly robust.

Price: $1
Website Magnet Website

Vanilla - Tidy Toolbar

If you’re running all the apps on this list, your toolbar will be pretty cluttered. You might already have 10 icons across the top of your screen, driving you insane.

That’s where Vanilla comes in.

With an open/close toggle, it tucks away the icons you want hidden. I only want to see my volume, battery and the time. Other than that, everything gets folded into Vanilla’s drawer.

If you like clean desktops and minimal clutter, Vanilla is a must-have.

So fresh. So clean.

Price: Free (Pro versions available)
Website: Vanilla Website

Dato - Time Toolbar++

Dato looks identical to the macOS clock, but when clicked you get so much more.

That might seem like a trivial improvement over the regular toolbar, but I’ve already used it many times in the 3 days I’ve had it.

When you open it, you get a little calendar, events for the day, and you can even add time zones that you care about.

Having quick access to a calendar is handier than you might think right now. You’ll use it. Trust me.

Price: Free
Website: Dato Website

Horo - Easy Timer

Horo is a great little timer that lives in your toolbar. It understands natural language, so typing 30m or 30 minutes both get you a 30-minute timer.

Horo’s developer, Matthew Palmer, says:

If starting a timer takes more than a second, your timer app sucks.

I agree. Horo can handle multiple timers, is effortless to start, and best of all it’s free. Grab it.

Price: Free (Pro version available)
Website: Horo Website

aText - Text Expansion

If you have a snippet plugin for your IDE, you probably know just how great it is to type a few letters and get lines of code generated for you.

On the iPhone, there are handy typing shortcuts, like omw expands to “On my way!”

aText brings that functionality and then some. The developer explains:

aText accelerates your typing by replacing abbreviations with frequently used phrases you define.

aText is great for boilerplate text like email responses or journaling templates. It’s a massive timesaver.

It can even insert images, the current date/time, AppleScript, Shell Script, etc. Check out the trial.

Price: $5

Trial: 21 Days
Website: aText Website

CopyClip - Clipboard History

As a programmer, you’re doing a lot of copying and paste. (Insert Stack Overflow joke here)

The problem is the clipboard only fits 1 item at a time. If you copy something new, the last item is gone forever.

That’s where CopyClip helps. Instead of losing each item copied, it hangs on to your last 20 or so. Don’t worry, you can also clear the clipboard to remove sensitive info.

As one reviewer puts it, CopyClip is an “invaluable time and stress reliever.”

Price: Free
Website: Apple Appstore

Karabiner - Custom Keyboard

Karabiner is a power-user’s dream. It allows you to remap your keyboard however you want. Karabiner lets you set up custom hotkeys for pretty much anything.

The same way you can create snippets and shortcuts in VSCode, you can set keyboard shortcuts across your entire OS.

I recently found a great use case for it when I started using a Windows keyboard at work.

The Mac and Windows keyboards are the same, but command and alt buttons are flipped, so I kept making mistakes. Easy Karabiner change.

Price: Free
Website: Karabiner Website

Amphetamine - Screen Espresso

Sometimes you need your computer to stay on to finish an install or run tests, or whatever else.

Amphetamine stops your computer from going to sleep until you turn it off.

Simple app, handy function. Give it a spin.

Price: Free
Website: Apple Appstore

Muzzle - Auto DND

Muzzle blocks potentially embarrassing alerts while screen sharing.

It’s good practice to put your computer on Do Not Disturb whenever you have people watching your screen. Muzzle recognizes when you’re sharing your screen and triggers DND for you. When you’re done, it toggles it off.

Even if you don’t download it, check out the website for a few laughs and an excellent lesson on how to show a product’s value.

Price: Free
Website: Muzzle Website

Toothfairy - Better Bluetooth

Connecting your AirPods or other Bluetooth headphones to your MacBook can be a pain.

Toothfairy makes connection dead simple. Connect with a menu bar click or even set up a keyboard shortcut.

Toothfairy lets you create an icon in your toolbar for each Bluetooth device. Icons let you know when you’re connected and when your battery is running low.

Do you switch your headphones between your phone and laptop often? Toothfairy is worth the 5 bucks.

Price: $5
Trial: Nope
Website: Apple Appstore

Kap - Screen Recorder

Kap is the quickest way I’ve found to create GIFs from my screen. Set the aspect ratio, select the area, and click record.

Easily convert snippets of videos or your latest CodePen into a repeating GIF. Then share to Twitter, Reddit, Giphy, Slack, wherever.

Kap also features a bunch of plugins to make sharing or saving even faster.

Price: Free
Website: Kap Website

Rocket - Quick Emojis

If you use emojis often, this one’s a must-have.

Not all apps allow for quick and easy emoji-ing. Slack has introduced us to the excellent :dog: = 🐶 emoji shorthand. Rocket spreads that same functionality everywhere.

Type a colon, start typing, and watch the autocomplete matches populate.

Rocket even lets you choose which websites and Apps to not run in, so it won’t get annoying when you’re programming.

Price: Free
Website: Rocket Website

That’s It!

If you know of any other great apps that solve one or two problems, please let me know! Hopefully, you’ve found an app on this list to make your day go a bit smoother.

I think this kind of app is a great way for any developer to think about creating products. Don’t try to be Evernote with 1,000 features. Identify your problem and solve it well.

DEV Community: Alex Trost

Making Dynamic Animations with Shaders

Summer Screen

Vertical Lines

Pink & Blue Gradient

Putting it All Together

Animation

Break it Yourself

Bubble Gum

Shader Resources

Creating Realistic Art with CSS

Unique HTML

Styling with nth-of-type

Responsive rems

Drawing Techniques

King of Hearts

Box Shadow Hair

Animation

Isla

Water and Lemons

CSS Glass

Landscape

Halftone Dots

Wrap Up

An Introduction to Shaders - Frontend Horse

A Conceptual Shader Introduction

A Pixel Classroom

So what is a shader?

Vertex and Fragment Shaders

Are shaders hard?

Shader Examples

Shader Resources

The Book of Shaders

ShaderToy

So Long, Partner

Gooey SVG Effects, Game UI, and Meetups - Frontend Horse #7

CODEPEN

Coffee For You

TUTORIAL

Building a Zelda UI

Resources

EVENT

Codefwd: Design Patterns

So Long, Partner

Frontend Horse #6 - Rockstars, Logo Grids, & Image APIs

CODEPEN

Slash

Resources

TUTORIAL

Aligning Logo Images in CSS

HORSE RESOURCE

Placeholder Images

COMMUNITY

Around the Stable

So Long, Partner

Frontend Horse #5 - Infinite Scrolling and Slick Animations

SITE SHOWCASE

Marvin Schwaibold

Technique: Infinite Scroll

Technique: Image Layering

Technique: Image Physics

CODEPEN

Mustache Guy

Around the Campfire

So Long, Partner

Frontend Horse #4 - Airplanes, Inclusive Components, and Bootstrap V5

CODEPEN

Airplanes

The Techniques

HORSE RESOURCE

Inclusive Components

Placeholders and Autocomplete

<form> for more than Forms

DEV NEWS

Bootstrap V5

So Long, Partner

Frontend Horse #3 - iPads, Turntables, Cards and lots of GSAP!

CODEPEN

One Div iPad Pro

The Technique

`<form>` for more than Forms