Tagged “quick-tip”
Year 2023 (4×)
Grouping posts by year with Nunjucks in Eleventy
Group by year in a clear and readable manner
(Updated )
Select an element which doesn’t descend from another in CSS
Avoid false positives when using :not() to exclude ancestors from a scope
Animate an SVG shape's inner stroke
Grow a stroke on an SVG shape but only covering the inner part
Plucking a nested property from an object
Retrieving a property of an object which is also in an object in JavaScript.
Year 2022 (2×)
CSS Grid with a preferred column count
Set up a CSS grid with a specific ideal number of columns.
Animate your z-index for cleaner hover effects
Clean up overlap animations on hovered elements
Year 2021 (1×)
Rotating floating animation with chained transforms
Using chained CSS transforms to get a rotation without rotating the element itself.
Year 2020 (3×)
Inline lists with conditional separators
Only show a separator when two items are next to each other, and skip for new lines.
Building and maintaining components from utility classes in Eleventy
Use a collection of utilities to form components without additional CSS.
Modern Fluid Typography with clamp()
Get a more consistent sizing with viewport-based font sizing
Year 2019 (1×)
Breakout Container
Make a contained element span the entire horizontal space.