Search
CSS Functions and Mixins Module Notes
31.7.2024
Most days, I’m writing vanilla CSS. Thanks to CSS variables and nesting, I have fewer reasons to reach for Sass or any other preprocessor. The times I reach for Sass tend to be when I need a @mixin to loop …
CSS Functions and Mixins Module Notes originally published on CSS-Tricks...
Mixin’s $20 Million Plea: Platform Transmits Onchain Bid to Reclaim Stolen Assets
27.9.2023
After a cyberattack resulted in a staggering $200 million loss from the decentralized exchange (dex) platform Mixin, the company revealed that its cloud service provider had been compromised. In a bid to recover the stolen funds, Mixin is now extending a $20 million reward to the hacker upon...
A Practical Tip For Using Sass Default Parameters
13.1.2022
Sass offers functions and mixins that accept parameters. You can use Sass default parameters, that is, parameters that have a value even if you don’t provide them when the function or mixin is called.
Let’s focus on mixins here. …
A Practical Tip For Using Sass Default...
Efficient Infinite Utility Helpers Using Inline CSS Custom Properties and calc()
6.8.2021
I recently wrote a very basic Sass loop that outputs several padding and margin utility classes. Nothing fancy, really, just a Sass map with 11 spacing values, looped over to create classes for both padding and margin on each side. …
The post Efficient Infinite Utility Helpers Using Inline...
How to Make localStorage Reactive in Vue
24.6.2020
Reactivity is one of Vue’s greatest features. It is also one of the most mysterious if you don’t know what it’s doing behind the scenes. Like, why does it work with objects and arrays and not with other things, like localStorage?
Let’s answer that that question, and while we’re at it, make...
How the Vue Composition API Replaces Vue Mixins
15.4.2020
Looking to share code between your Vue components? If you’re familiar with Vue 2, you’ve probably used a mixin for this purpose. But the new Composition API, which is available now as a plugin for Vue 2 and an upcoming feature of Vue 3, provides a much better solution.
In this article...
Using Custom Properties to Wrangle Variations in Keyframe Animations
12.9.2019
Have you ever wondered how to customize CSS animations keyframes without using any preprocessor feature, like mixins? I keep reaching for preprocessors for this reason, but it would so nice to drop yet one more dependency and go with vanilla CSS.
Well, I found a way to account for variations within...
Code as Documentation: New Strategies with CSS Grid
24.5.2019
I work for Supercool, a fast-moving design agency that makes custom built sites for arts clients, powered by the off-the-shelf system, Craft CMS; it's high-spec graphic design with relatively demanding typography and art direction. Over the past few months we’ve been moving to CSS grid. We’re...
Using a Mixin to Take the Math out of Responsive Font Sizes
9.4.2019
Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport.
If you’re thinking that sounds familiar, that’s because there is a slew of tools out there that offer various approaches for fluid...
What Hooks Mean for Vue
4.2.2019
Not to be confused with Lifecycle Hooks, Hooks were introduced in React in v16.7.0-alpha, and a proof of concept was released for Vue a few days after. Even though it was proposed by React, it’s actually an important composition mechanism that has benefits across JavaScript framework ecosystems,...