-
When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!
-
Always use fewer utility classes when possible. For example, use
mx-2
instead ofml-2 mr-2
and don't be afraid to use the simplerp-4 lg:pt-8
instead of the longer, more complicatedpt-4 lg:pt-8 pr-4 pb-4 pl-4
. -
Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use
block lg:flex lg:flex-col lg:justify-center
instead ofblock lg:flex flex-col justify-center
to make it very clear that the flexbox utilities are only applicable at the
const ACCESS_TOKEN = "token"; | |
const FILE_ID = "fileId"; | |
const NODE_ID = "Check the url for something like => 3%3A2"; | |
const container = document.getElementById("figma-container") | |
function apiRequest(url) { | |
return fetch(url, { | |
method: 'GET', | |
headers: { "x-figma-token": ACCESS_TOKEN } | |
}).then(function(response) { |
/** | |
* to augment missing styled-system types. @see here - https://tinyurl.com/y5e4bl3f | |
*/ | |
// "wipe over" the existing module definitions in @types/styled-system with this declare | |
declare module "styled-system" { | |
// Type definitions for styled-system 4.2 | |
// Project: https://github.com/jxnblk/styled-system#readme |
With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.
This document is a comparison of various ways the <script>
tags in HTML are processed depending on the attributes set.
If you ever wondered when to use inline <script async type="module">
and when <script nomodule defer src="...">
, you're in the good place!
Note that this article is about <script>
s inserted in the HTML; the behavior of <script>
s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)
All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.
A number of methods in React are assumed to be "pure".
On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.
This document details some tips and tricks for creating redux containers. Specifically, this document is looking at the mapDispatchToProps
argument of the connect
function from [react-redux][react-redux]. There are many ways to write the same thing in redux. This gist covers the various forms that mapDispatchToProps
can take.
ウインドウのスクロール量を取得するクラスブラウザなコードを考えます。
Workbox runtime caching recipes
Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:
importScripts('workbox-sw.prod.v1.3.0.js');
const workbox = new WorkboxSW();
// Placeholder array populated automatically by workboxBuild.injectManifest()