Newsletter • Issue 56
Chrome DevTools, Neon Trails, and Wavy Buttons!
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 — trost.codes
A list of my favorite tools and features hidden away in Google’s Command Menu.
CodePens
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!
Check out this fun “Like” animation done with SVG and Anime.js.
Wavy Upload Button — codepen.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 — frontend.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.
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! — 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 — material.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 — www.youtube.com
The wonderful Kevin Powell breaks down the basics of background images.
We use too many modals — modalzmodalzmodalz.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