Skip to content

Instantly share code, notes, and snippets.

@sandren
sandren / tailwind.md
Last active February 28, 2025 13:05
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. 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!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. 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 of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@renatodeleao
renatodeleao / figma-api-get-svg-via-images-endpoint.js
Last active September 14, 2023 17:04
Figma API — Get an svg node (via /images endpoint)
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) {
@elmpp
elmpp / styled-system.d.ts
Created June 13, 2019 09:46
styled-system typescript definitions updated
/**
* 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
@rstacruz
rstacruz / README.md
Last active October 17, 2024 15:36
Setting up Babel and TypeScript

Install Babel 7 and TypeScript

yarn add --dev \
  @babel/core \
  @babel/cli \
  @babel/preset-env \
  @babel/preset-typescript \
  typescript
@jakub-g
jakub-g / async-defer-module.md
Last active July 3, 2025 05:06
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

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)

@remarkablemark
remarkablemark / README.md
Last active May 23, 2024 20:32
How to mock `window.location.reload` in Jest and jsdom: https://remarkablemark.org/blog/2018/11/17/mock-window-location/
@sebmarkbage
sebmarkbage / The Rules.md
Last active June 17, 2025 01:41
The Rules of React

The Rules of React

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.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

@heygrady
heygrady / mapDispatchToProps.md
Last active April 5, 2025 08:11
Redux containers: mapDispatchToProps

Redux containers: mapDispatchToProps

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.

@think49
think49 / Webブラウザのウインドウのスクロール量を取得する.md
Last active October 4, 2021 03:29
Webブラウザのウインドウのスクロール量を取得する.md
@addyosmani
addyosmani / workbox.md
Last active January 20, 2024 16:14
Workbox recipes

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()