January 5, 2021 Smashing Newsletter: Issue #282

Editorial

Everybody loves a good little nifty tool. After all, there are plenty of tedious repetitive tasks or little day-to-day challenges that take just a little bit too much effort. What about figuring out just the right gradient, or just the right box-shadow values? Or perhaps finetuning an animation? Or just some random data to stress test the app?

We absolutely love these tools. So we dedicate this issue to those little tiny helpers — small tools that we could use in our toolbox to get good results, faster. We’ll also highlight many more of useful tools in New Adventures In Front-End, 2021 Edition with yours truly, our new workshop focused on new front-end techniques to help us get our work done well.

And, of course, if you are building something that you think other people would appreciate and love, please let us know on Twitter, and we’ll spread the word for sure. Thanks for being smashing, everyone!

— Vitaly (@smashingmag)

1. From CSS Gradients To Fake Data
2. CSS Shadow Generator
3. Upcoming Front-End & UX Workshops
4. Z-Index Visualizer
5. Perfect Cubic-Bezier Curves
6. Better Subtle Patterns, For Everyone
7. Useful Little Web Dev Helpers

1. From CSS Gradients To Fake Data

Imagine that you just need to find CSS triangle styles for elements and pseudo-elements. Or perhaps refine the color palette a bit by exploring tints and shades of a given color. Or perhaps generate a linear and radial CSS gradient for a section of the page. There is no need to do it all manually or try to find those CSS snippets all over the web. You can always find them on Omatsuri.

Omatsuri means festival in Japanese, and the site is a lovely little festival of open-source browser tools for everyday use. On the site, you’ll find a triangle generator, a color shades generator, a gradient generator, page dividers, SVG compressor, SVG → JSX converter, a fake data generator, CSS cursors, and keyboard event codes. Designed and built by Vitaly Rtishchev and Vlad Shilov. The source code of the site is available as well. (vf)

2. CSS Shadow Generator

Looking for a tool that’ll automatically generate CSS code for really smooth, layered box-shadows? Well, you’re going to love SmoothShadow. Inspired by an article written by Tobias Ahlin Bjerrome, this nifty tool was created to help anyone generate the code they need on the spot.

Once you’ve given it a try, it will be difficult to not use it. The little tool allows you to visually design a layered smooth box-shadow, but also tweak alpha, offset and blur with individual easing curves. And it gets even better: The creator of the tool, Philipp Brumm, has also released SmoothShadow as a Figma plugin, so you can optimize your workflow just like you’ve always wanted to! (il)

3. Upcoming Front-End & UX Workshops

Hear, hear! We’ve just announced yet another batch of new online front-end & UX workshops dedicated to form design, SVG animation, design systems, HTML email and front-end.

Our Smashing Workshops are filled with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been an incredible experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount, so we’d be honored to welcome you in 2021!

4. Z-index Visualizer

If you ever wondered why layout appears a bit glitchy, or why content panels unexpectedly overlap, or why some text is cut off, the issue might be very well related to the context stacking and z-index. z-index controls the vertical stacking order of elements that overlap. Sounds trivial, but debugging it isn’t trivial at all — as some CSS properties put elements in a new stacking order, or a child element is limited to the stacking context of its parent.

But the first thing to know is whether z-index is set right in the first place. We can do that with VisBug Chrome Extension — among many other things — we can use z-index-visualizer to highlight the different levels of stacking on a page. We can also use it as a bookmarklet to display z-index-values when necessary.

And if you want to get fancier, PolyPlane also shows z-indeces of ancestors, and Edge DevTools has an incredible 3D DOM view, and in Firefox you can explore and navigate the DOM in 3D. Changing the values of z-index might help fix some issues, or at least understand what the root of the problem is. Now, this should help track those pesky z-index issues! (vf)

5. Perfect Cubic-Bezier Curves

Sometimes an animation just doesn’t feel right, does it? Perhaps the duration is off, or the easing is quirky, and figuring it out might take quite some time. With cubic-bezier, you can preview and compare animations, slow them down and even adjust them visually. And then copy-paste the CSS snippet to plug into your project right away.

And if you need basic or complex CSS @keyframe animations, Keyframes.app provides a visual timeline editor similar to video-editing software. You can add steps, change sizing and position, apply transforms and color changes and get the CSS to copy-paste as well. Ah and not to forget the Animation panel in Chrome and Firefox for debugging! Happy animating, everyone! (vf)

6. Better Subtle Patterns, For Everyone

Ah, lovely patterns! A subtle geometric background pattern can help give a site just a little bit of polish and personality, and make the content stand out just a bit more. Luckily, there isn’t a shortage of websites that allow you to generate and copy patterns with a simple click.

Patternify is a CSS Pattern generator that allows you to define a pattern in a 10×10 grid, preview the outcome, and download PNG or CSS. If you need a bit of inspiration, Hero Patterns is a collection of repeatable SVG background patterns for you to use on your web projects.

MagicPattern provides a library of pure CSS background patterns like ZigZag or diagonal ones. Not enough? CSS Tricks has collected a large overview of websites that provide all kinds of background patterns as well. Now, this should keep you covered for a while! (vf)

7. Useful Little Web Dev Helpers

If you need a few more tools in your life, luckily, there are a lot of good ’ol web developers collecting their favorite useful tools all in one place named Tiny Helpers. Maintained by Stefan Judis, you’re sure to find all sorts of tools: from APIs, accessibility and color, to fonts, performance, regular expressions, SVG, and Unicode.

Of course, there are many more shared on other platforms, such as the very useful Twitter thread by Josh W. Comeau but also by Stefan Judis himself. Whatever it is that you’ve been eager to find that will help you get work done better and faster, you’re bound to find it there! (il)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.