Chaining styles with a JavaScript Proxy
If you miss method chaining from Ruby or jQuery when working with styles in JavaScript, you can recreate the pattern with a few lines of code
Smoother & sharper shadows with layered box-shadows
With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects
Cheat sheet for moving from jQuery to vanilla JavaScript
This reference guide will help you convert jQuery's most common patterns to vanilla JavaScript
Breaking to a new row with flexbox
You can break to a new flexbox row or column without setting the size of an item: add a collapsed flex item between two flex items
CSS masonry with flexbox, :nth-child(), and order
Creating a masonry (or mosaic) layout with flexbox produces a grid with a seemingly shuffled and obscure order, but we can achieve a natural ordering by using :nth-child() and the order property
Common CSS Flexbox Layout Patterns with Example Code
Quickly create grids, masonry, stacks and more layouts with these 10 CSS flexbox templates
Meaningful Motion with Action-Driven Animation
Simple guiding principles for making animations more meaningful
Data visualization with Chart.js: An introduction
A step-by-step guide walking you through how to build your first interactive graph with Chart.js
10 Chart.js example charts to get you started
A list of 10 graphs (bar chart, pie, line, etc.) with data set up to render charts that you can copy and paste into your projects
Moving along a curved path in CSS with layered animation
We can apply one timing function per axis to produce curved paths, by using two or more objects to drive an animation.
How to animate box-shadow with silky smooth performance
Spoiler-alert: you don't. You use a pseudo-element.
Animating Link Underlines
A quick trick: add a pseudo-element and animate it with CSS transitions on hover.
Chaining in jQuery
Chaining in jQuery let's you write code that is faster to execute, easier to read, and easier to maintain.
