Search

Nalezeno "handy": 43

Why I love Tailwind


Max Stoiber wrote some interesting notes about why he loves Tailwind. (Max created styled-components, so he has some skin in the styling methodology game.) There’s a lot of great history in this post about how Tailwind emerged and became a valuable tool for designers and engineers alike, but...

Parsing Markdown into an Automated Table of Contents


A table of contents is a list of links that allows you to quickly jump to specific sections of content on the same page. It benefits long-form content because it shows the user a handy overview of what content there is with a convenient way to get there. This tutorial will show you how to parse...

JavaScript Operator Lookup


Okay, this is extremely neat: Josh Comeau made this great site called Operator Lookup that explains how JavaScript operators work. There are some code examples to explain what they do as well, which is pretty handy. My favorite bit of UI design here are the tags at the bottom of the search...

The New CSS-Tricks Video Intro by dina Amin


You know we do video screencasts, right? It’s not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing them. I publish them here, but you can subscribe over on YouTube as well. I’ve had a couple of different custom video intro...

Everything You Need to Know About FLIP Animations in React


With a very recent Safari update, Web Animations API (WAAPI) is now supported without a flag in all modern browsers (except IE).  Here’s a handy Pen where you can check which features your browser supports. The WAAPI is a nice way to do animation (that needs to be done in JavaScript) because...

No-Class CSS Frameworks


I linked up Water.css not long ago as an interesting sort of CSS framework. No classes. No <h2 class="is-title">. You just use semantic HTML and get styles. Is that going to “scale” very far? Probably not, but it sure is handy for styling things quickly, where — of course...

Selectors Explained


Have you ever found yourself either writing a CSS selector that winds up looking confusing as heck, or seen one while reading through someone's code? That happened to me the other day. Here's what I wrote: .site-footer__nav a:hover svg ellipse:first-child { } At the end of it, I honestly couldn't...

New Year, New Job? Let’s Make a Grid-Powered Resume!


Many popular resume designs are making the most of the available page space by laying sections out in a grid shape. Let’s use CSS Grid to create a layout that looks great when printed and at different screen sizes. That way, we can use the resume online and offline, which might come in handy during...

Detecting Inactive Users


Most of the time you don’t really care about whether a user is actively engaged or temporarily inactive on your application. Inactive, meaning, perhaps they got up to get a drink of water, or more likely, changed tabs to do something else for a bit. There are situations, though, when tracking...

A Handy Sass-Powered Tool for Making Balanced Color Palettes


For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, "borrowing" from favorite brands, or just sort of randomly picking from a color wheel until...

JAMstack Tools and The Spectrum of Classification


With the wonderful world of JAMstack getting big, all the categories of services and tools that help it along are as important as ever. There are static site generators, headless CMSs, and static file hosts. I think those classifications are handy, and help conversations along. But there is a point...

Protecting Vue Routes with Navigation Guards


Authentication is a necessary part of every web application. It is a handy means by which we can personalize experiences and load content specific to a user — like a logged in state. It can also be used to evaluate permissions, and prevent otherwise private information from being accessed...

Building a Conference Schedule with CSS Grid


It’s hard to beat the feeling of finding a perfect use for a new technology. You can read every handy primer under the sun and ooh-and-ahh at flashy demos, but the first time you use it on your own project… that’s when things really click. I gained a new appreciation for CSS Grid when building...

Every Layout


Every Layout is a new work-in-progress website and book by Heydon Pickering and Andy Bell that explains how to make common layout patterns with CSS. They describe a lot of the issues when it comes to the design of these layouts, such as responsive problems and making sure we all write maintainable...

Level up your .sort game


Sorting is a super handy JavaScript method that can display the values of an array in a certain order. Whether that’s real estate listings by price, burger joints by distance, or best nearby happy hours by rating, sorting arrays of information is a common need. If you’re already doing this with...

An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods


Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right into how you can leverage (and remember how to use!) these super handy methods. Array.map() Array.map() updates each individual value in...

Typography for Developers


This is intended as a practical guide for developers to learn web typography. We’ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We’ll go over the principles...

Table design patterns on the web


Chen Hui Jing has tackled a ton of design patterns for tables that might come in handy when creating tables that are easy to read and responsive for the web: There are a myriad of table design patterns out there, and which approach you pick depends heavily on the type of data you have and...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace