Newsletter #56 - Chrome DevTools, Neon Trails, and Wavy Buttons!

May 12, 2022

Howdy! I've got a handy DevTools blog post, a delightful button, new Figma Updates, and Roboto now has a variable font.

Let's ride!


Chrome's Dev Tools are robust and powerful, yet I spend 99% of my time in the Console and Elements panels. There are a ton of features I'm not even aware of.

Luckily Chrome has a handy Command Palette that makes it easy to find features you never knew it had!

Did you know it has a built-in way to turn off local fonts? Or that you can take a full-page screenshot from the DevTools? Or that there are all kinds of emulators for vision impairments?

I put together a short blog post highlighting some of my favorites.

Hidden Dev Tools: Chrome's Command Menu Hidden Dev Tools: Chrome's Command Menutrost.codes

A list of my favorite tools and features hidden away in Google's Command Menu.

CodePens

Neon Cursor Neon Cursorcodepen.io

This is less of a CodePen to dig through and more of a showcase for a cool library.

Kevin Levron, the creator of Trois.js, shows off the Neon Cursor that you can import and use with a simple function call.

Trois is Three.js + Vue.js + Vite, and worth checking out!

Like Icon Like Iconcodepen.io

Check out this fun "Like" animation done with SVG and Anime.js.

Wavy Upload Button Wavy Upload Buttoncodepen.io

The excellent Aaron Iker is back at it with more fantastic button animations. If you want to learn how he does it, the article below features his work in depth.

Articles

Buttons that Spark Joy Buttons that Spark Joyfrontend.horse

Whenever Aaron Iker posts a new animated button, I think back to when he showed us his wonderful techniques.

In this article, we covered his work and learned how to make buttons that bring delight to our users through fun effects and great interactions.

Penguins!

We shared the adorable walking penguin in last week's newsletter, and Chris Coyier found even more wonderful penguins! Check out this cool collection of adorable CodePen-guins

New Figma Features! New Figma Features!www.figma.com

I'm a huge fan of Figma, and it just keeps getting better. At Config 2022 they announced a slew of new features like:

  • Dark Mode
  • Variable font support
  • Revamped Auto Layout (Flexbox)
  • Borders on individual sides
  • Spring animations
  • Component properties

Resources

Roboto Flex now on Google Fonts - Material Design Roboto Flex now on Google Fonts - Material Designmaterial.io Google’s most popular font gets customizable with the launch of Roboto Flex, a #variablefont with a huge range of weights, widths, optical sizes, grades – and even parametric axes.

Background images with HTML & CSS Background images with HTML & CSSwww.youtube.com

The wonderful Kevin Powell breaks down the basics of background images.

We use too many modals We use too many modalsmodalzmodalzmodalz.com

An oldie but a goodie. If you're trying to convince someone why they shouldn't add a modal, this site is essential.

All the reasons you don't need a modal — and what to use instead.

Community Question

Last Week's Question

What frontend framework are you using now? Which one are you most excited about? (Link)

Brent and David are excited about SvelteKit. Paul is excited about React, and JP is loving Next.js. Both Christian and Ramon are getting into Vue, while Scott and Brent are loving my current favorite, Astro.

For CSS Frameworks, Sean is getting into Fylgja, and Adrian is a long-time Bootstrap user.

This Week's Question

[tweet https://twitter.com/FrontendHorse/status/1522978852997419010]

Head over to Twitter to answer!

So Long, Partner

That's all for this week! Thanks so much for reading!

If you read this far, here's a bonus just for you. A super fun dumpling golf game from Mailchimp. Enjoy!

Your neigh-bor,

Alex

Buy Me a Coffee at ko-fi.com

Fill your mailbox with frontend fun

A weekly newsletter that demystifies the best CodePens, tutorials, and resources. It's always fun, free, and you can hang up your spurs any time.

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.
Check out past issues
A mailbox stuffed with letters