What do these beautiful sites say? | Frontend Horse | Creative Web Development

Newsletter • Issue 77

What do these beautiful sites say?

Howdy, partner!

I hope your week's off to a great start. I've rounded up some great CodePens, articles, and resources for this week! I've also found a couple of inspirational websites that I don't understand but love anyway.

You can always read this on the web.


Save the Fish

I only just found Pedro Ondiviela, but they have so many wonderful CodePens! In this one, you've got a fish with a leaky bowl, so you need to use the faucet to keep the water level up or the fish dies.

Please save the fish.

Check it out

Designer's Eye

This is such a great animation and effect, you really need to see it for yourself. Works best on Chrome and Firefox.

Check it out

Leaping Loader

Our friend Adam Kuhn created this fun loader that looks like it's running and jumping platforms. It's made with CSS keyframe animations, so comment out 'wobble' or 'run' to see how each is affecting the letters.

Check it out



The browser that puts you in the saddle

It won't take your site to the Horsehead Nebula but the newly launched Polypane Portal will take your localhost where you need it, to all the devices you need to test on. Scroll, click and edit styles in Polypane and see all your devices update along in an instant. Or share your in progress work with your fellow cowboys and share your design changes as you make them.

"You've just changed the way I develop for phones." - Alex Trost, famed equestrian.

Quit horsing around in a normal browser, and switch to one that "feels like devtools with cheats enabled". Try it out for free and see for yourself. Use code FRONTENDHORSE20 to get 20% off any plan.

Check it out


Making SVG Loading Spinners: An Interactive Guide

Sébastien Noël continues to make wonderful resources over at fffuel. In addition to this guide, he's made more SVG generators than I can count. A site that needs to be in your bookmarks.

Check it out

How I Solved My Font Rendering Problem

Two headings, one with an overly bold look and the other looks proper

Michelle Barker describes an annoying iOS font issue as well as its solution. I just happened to run into this exact same problem two days after Michelle published this, and Kilian sharing it in the Frontend Horse Discord was a godsend.

Check it out

A Practical Guide to Using Shadow DOM

The shadow dom and light dom

Declarative shadow DOM is now available across Chrome, Firefox, and Safari, so Mayank is here to provide a practical guide. They explain imperative vs declarative, some common use cases, style scoping, and the problems that still exist with the shadow DOM.

Check it out


Codrops Demo Archive

The legendary Codrops have launched a new page where all of their incredible demos are easier to browse through. If you ever need some ideas for a great new effect, look no further.

Check it out


Eat more pineapple

A pineapple graphic

Goodness this is a gorgeous site with excellent 3d model work.

The only downside? It seems to only be in Italian, so I can't read a word of it. They seem to be selling me pineapple and damn it, it's working.

Check it out

Grab & Go

An illustration of a shop front

Is this another site where I can't read a single word? Yes.

Is this another site where it just doesn't matter because it's so damn good? Also yes.

Cool parallax effects, perspective typography, 3D scroll animations - this little landing page has it all. Lots of fun techniques to steal from this one.

Check it out

So long, partner

Thanks for riding with me this week!

If you liked the issue, it's always appreciated if you send it along to a friend. If you don't like the issue, send it to an enemy. I won't tell them which one they are.

Your neigh-bor,