-
Set up rust + wasm + TypeScript without webpack
Sunday, April 25, 2021
1 Set up the rust code and wasm-pack install wasm-pack Set up a new project with wasm-pack. Run 1 2 $ wasm-pack new hello-wasm $ cd hello-wasm Build with this command 1 $ wasm-pack build --target web This should produce a pkg/ directory which should contain some d.ts file, a .wasm file and a .js file in ES6 module format.…
-
Roll Your Own CSS-in-JS Library (5) - Tagged Templates
Wednesday, March 24, 2021
In this post, we will explore a different CSS-in-JS syntax. CSS-in-JS but using CSS syntax End result: Notice that we get to write CSS similar to template strings rather than as objects. This has a few advantages: Our CSS code now looks closer to vanilla CSS. We can sequence CSS properties. We can duplicate CSS properties to support fallback behavior. In practice, 1 is probably the strongest driver for adopting this syntax, as typically there’s no benefit in sequencing CSS properties except for fallback behavior.…
-
Roll Your Own CSS-in-JS Library (2) - Dynamic Styles
Friday, March 12, 2021
In our last post we developed a simple CSS-in-JS library, but it was missing an important feature - supporting dynamic styles. We will patch that in this post. End result Dynamic styles are more useful when we are building components. In this post, we will use React as our component library. Here’s how our library may be used in production: Dynamic class names This is the simplest approach that requires making the smallest change to our little library.…
-
Roll Your Own CSS-in-JS Library (1) - Introduction
Sunday, March 7, 2021
CSS-in-JS is an idea to tackle various issues with CSS by writing them in JavaScript (or whatever else that can compile to JavaScript, such as TypeScript). Some popular examples include libraries like styled component , emotion and JSS . I originally started this series to document some of my experiments with CSS-in-JS, but it later turned out to be a fun investigation project. In total, this series will cover The basic idea of run-time static CSS-in-JS (this post) The basic idea of run-time dynamic CSS-in-JS Run-time dynamic CSS-in-JS with CSS variables An extremely simplified approach to build-time CSS-in-JS A simple approach to implementing tagged template based CSS-in-JS Please note that this series focus on the high level ideas with a simple demo, so expect to notice a lot of missing features.…