Frontend Horse #6  - Rockstars, Logo Grids, & Image APIs
Tags: css, html, javascript, webdev
Published: 2020-07-07 11:46:19

_This is an issue from the newsletter Frontend Horse. This was originally published on July 2nd, 2020. Visit [Frontend.Horse](https://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
![Slash by Oscar Salazar](https://dev-to-uploads.s3.amazonaws.com/i/v8lzpw9kwxp2bxrssmj2.png)
[This SVG animation](https://codepen.io/raczo/pen/YzwZNed) is so much fun that it actually won [GreenSock’s CodePen challenge](https://greensock.com/cpc/)! Based on [this excellent Dribble shot](https://dribbble.com/shots/6576616-Sliding-Slash), 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](https://twitter.com/twistneck), 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixj33b8s8s1jldun7jzh.png)

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

![Slash with and without SVG Filters](https://dev-to-uploads.s3.amazonaws.com/i/40biijleetblk6zb8ixa.png)


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](https://twitter.com/jh3yy). Oscar watched him make [this CodePen](https://codepen.io/jh3y/pen/rNxjPNX) on a live-stream and was able to use a similar effect.

Oscar used a similar lightning effect on this fun [Pokedex](https://codepen.io/raczo/pen/BajBdmJ) he made previously.  We also saw Kasper De Bruyne use it to make water back in [Issue #1](https://frontend.horse/issues/1/)! 

#### Resources
One resource Oscar shared is a great tutorial, [SVG Filters 101](https://tympanus.net/codrops/2019/01/15/svg-filters-101/), by [Sara Soueidan](https://twitter.com/SaraSoueidan). The other is a super useful [SVG Filter Playground](https://yoksel.github.io/svg-filters/) by  [@yoksel_en](https://twitter.com/yoksel_en). I hadn’t seen either of these before, and they’re both excellent.

[Check it out ->](https://codepen.io/raczo/pen/YzwZNed)
- - - -

### TUTORIAL
## Aligning Logo Images in CSS
Ahmad Shadeed has [a great tutorial](https://ishadeed.com/article/aligning-logos-css/) 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!

![Aligning logo images](https://dev-to-uploads.s3.amazonaws.com/i/t8jiqftincfdsff0x3b1.png)
[Image credit: Ahmad Shadeed](https://ishadeed.com/article/aligning-logos-css/)

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 ->](https://ishadeed.com/article/aligning-logos-css/)

### 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](https://unsplash.com/) is the common choice for free, high-quality images, but did you know they have [a super simple API](https://source.unsplash.com/)? 

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`
![Horses](https://dev-to-uploads.s3.amazonaws.com/i/sjsv0pq5lm9ycs5i5ecn.jpeg)

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"/>
```
![Cached Images repeating](https://dev-to-uploads.s3.amazonaws.com/i/we7r2qblf3uz86dx901o.png)

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"/>
```
![Different images each time](https://dev-to-uploads.s3.amazonaws.com/i/7g8kdctcw2mn05m8co7b.png)

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](https://source.unsplash.com/) 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](https://pravatar.cc/) or [Adorable Avatars](http://avatars.adorable.io/) if the app is more fun.

Thanks to [this thread by Swyx](_https://twitter.com/trostcodes/status/1277371838528708610_) for inspiring this bit.

### COMMUNITY
## Around the Stable
Friend of the newsletter Jhey [gave us an awesome shoutout this week](https://twitter.com/jh3yy/status/1276937907761229824), 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](https://shoptalkshow.com/) 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](https://www.twitter.com/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](_https://twitter.com/frontendhorse_), 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](https://www.frontend.horse) to subscribe! You'll get the next issue before it's posted here on Dev.