Skip to content

Instantly share code, notes, and snippets.

View volkancakil's full-sized avatar
:octocat:
Trying to quit vim

Volkan Çakıl volkancakil

:octocat:
Trying to quit vim
  • Antalya, Turkey
View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active April 19, 2024 06:03
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@CMCDragonkai
CMCDragonkai / higher_kinded_types_in_rust_and_haskell.md
Last active April 15, 2024 16:50
Rust/Haskell: Higher-Kinded Types (HKT)

Rust/Haskell: Higher-Kinded Types (HKT)

A higher kinded type is a concept that reifies a type constructor as an actual type.

A type constructor can be thought of in these analogies:

  • like a function in the type universe
  • as a type with a "hole" in it
@ld100
ld100 / ArchLinuxWSL2.md
Last active April 15, 2024 03:09
Steps for setting up Arch Linux on WSL2

Migrating from Ubuntu on WSL to ArchLinux on WSL2

Obsolete notice

This document was created back in 2020 and might not be actual nowadays. It is not supported anymore, so use thise information at your own risk.

Upgrading to WSL 2

  • Download WSL2 Kernel
  • run wsl --set-default-version 2 in windows command line, so that all future WSL machine will use WSL2.
@EllyLoel
EllyLoel / reset.css
Last active April 13, 2024 18:14
CSS Reset
/*
Made by Elly Loel - https://ellyloel.com/
With inspiration from:
- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
- Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE
Notes:
- `:where()` is used to lower specificity for easy overriding.
*/
@tannerlinsley
tannerlinsley / README.md
Last active April 12, 2024 17:04
Replacing Create React App with the Next.js CLI

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

@davidfowl
davidfowl / MinimalAPIs.md
Last active April 10, 2024 04:24
Minimal APIs at a glance
@davestewart
davestewart / broadcast-channel.md
Last active April 1, 2024 16:47
Example of using BroadcastChannel to communicate with pages in the same domain

screenshot

@ericelliott
ericelliott / essential-javascript-links.md
Last active March 28, 2024 23:01
Essential JavaScript Links
@DavidKuennen
DavidKuennen / minimal-analytics-snippet.js
Last active March 28, 2024 01:45
Minimal Analytics Snippet
(function (context, trackingId, options) {
const history = context.history;
const doc = document;
const nav = navigator || {};
const storage = localStorage;
const encode = encodeURIComponent;
const pushState = history.pushState;
const typeException = 'exception';
const generateId = () => Math.random().toString(36);
const getId = () => {