Search
The ineffectiveness of lonely icons
11.2.2019
Icons are great and all, but as we've been shown time and time again, they often don't do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people...
Would You Watch a Documentary Walking Through Codebases?
22.1.2019
This resonated pretty strongly with people:
I’d watch a documentary series of developers giving a tour of their codebases.
— Chris Coyier (@chriscoyier) January 6, 2019
I think I was watching some random Netflix documentary and daydreaming that the subject was actually something I was super...
Why we need CSS subgrid
11.1.2019
I’m a huge fan of CSS Grid and I use it on pretty much every project these days. However, there’s one part of it that makes things much more complicated than they really ought to be: the lack of subgrids. And in this post on the matter, Ken Bellows explains why they’d be so gosh darn useful:
But...
A CSS Venn Diagram
17.12.2018
This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.
I also think it’s super...
Solved with CSS! Logical Styling Based on the Number of Given Elements
26.7.2018
This post is the third in a series about the power of CSS.
Article Series:
Colorizing SVG Backgrounds
Dropdown Menus
Logical Styling Based On the Number of Given Elements (this post)
Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical...
Fast, Good, Local Site Search with Jetpack
12.7.2018
If you have, say, 20 posts/pages on your WordPress site, the search functionality that is baked right into your self-hosted WordPress site will probably do a great job. Search is a pretty cool feature to ship with WordPress, truth be told. But as a site grows, you'll find limits. How it works...
Emojis as Icons
11.7.2018
There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. What if you could take just the shape of an emoji...
Fitting Text to a Container
29.6.2018
There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.
Magic Number it with viewport units
If you set type with...
What is SVG good for?
21.6.2018
Y'all probably wouldn't be surprised if I told you it's pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I'm a fan of just inlining those suckers, particularly when they are pretty simple.
But what else?
Logos is a classic example! A lot...
Creating a Bar Graph with CSS Grid
12.6.2018
If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you!
Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might...
1 Element CSS Rainbow Gradient Infinity
5.6.2018
I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn't look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than...
3 Useful TypeScript Tips for Angular
4.6.2018
These are the 3 tips I found pretty handy while working with Typescript:
Eliminating the need to import interfaces
Making all interface properties optional
Stop throw
HSL() / HSLa() is great for programmatic color control
1.6.2018
If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We've talked about it before but we can break it down a little more and do some interesting things...
Build Multiple Stacking Sticky Sidebars with Pure CSS and Bootstrap 4
31.5.2018
Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4.
This will be a quick and pretty cool tutorial on a neat trick on how to have m
Developing a design environment
28.5.2018
Jules Forrest discusses some of the work that her team at Credit Karma has been up to when it comes to design systems. Jules writes:
...in most engineering organizations, you spend your whole first day setting up your development environment so you can actually ship code. It’s generally pretty...
Build Nodejs APIs Using Serverless
17.5.2018
Simona Cotin did a great talk at Microsoft Build about Serverless technologies, called "Build Node APIs Using Serverless." In this talk, she addresses pretty much every major gotcha that you might run into while creating Serverless infrastructure for JavaScript applications. Some of the topics...
Page Transitions for Everyone
14.5.2018
As Sarah mentioned in her previous post about page transition using Vue.js, there is plenty of motivation for designers and developers to be building page transitions. Let's consider mobile applications. While mobile applications are evolving, more and more attention is given to the animation...
Add Authentication to Any Web Page in 10 Minutes
10.5.2018
This content is sponsored via Syndicate Ads
Adding authentication to web pages can be pretty annoying.
While I'd like to say that
VS Code Can Do That?
7.5.2018
Clever microsite from Burke Holland and Sarah Drasner that highlights some of VS Code's coolest features. All fifteen of them are pretty darn cool. Here's a few other compelling features I've seen people use/love:
There is a terminal right in there, so you don't need a separate app.
The GitLens...
Animating Progress
30.4.2018
Jonathan Snook on the complexity of animating the <progress> element. If you’re unfamiliar, that’s the element that spits out a bar chart-like visual that indicates a position between two values:
This example has custom styles, but you get the point.
Jonathan's post shows off a method...