Skip to content

Instantly share code, notes, and snippets.

Trying to quit vim

Volkan Çakıl volkancakil

Trying to quit vim
View GitHub Profile
yyx990803 / exampe-config.js
Created Jan 13, 2021
A vite plugin that loads the specified deps over CDN during dev, and downloads/includes them into bundle during build.
View exampe-config.js
// example vite.config.js
import { cdn } from './vite-plugin-cdn'
export default {
plugins: [
// also supported:, jspm
// loads the dep over the CDN during dev
// auto downloads and includes into the bundle during build
cdn('skypack', {
vue: '^3.0.5'
rikschennink / nudgeable.ts
Last active Mar 7, 2021
⌨️ A Svelte action to add arrow key interaction to an element
View nudgeable.ts
export default (element: HTMLElement, options: any = {}) => {
// if added as action on non focusable element you should add tabindex=0 attribute
const {
direction = undefined,
shiftMultiplier = 10,
bubbles = false,
stopKeydownPropagation = true,
} = options;
tannerlinsley /
Last active May 12, 2021
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

donaldpipowitch /
Last active Oct 3, 2020
Example for a codemod which can run on a TypeScript code base

Install @codemod/cli globally:

$ npm install -g @codemod/cli
# or
$ yarn global add @codemod/cli

This package works out of the box with most code bases, because it comes bundled with @babel/preset-env and @babel/preset-typescript. If you need other presets or plugins for parsing your source code you can use a custom Babel config as well. Note that the codemod will not apply the transformations from these presets and plugins - they are only used for parsing. Therefor you keep your TypeScript types in your source code for example. Formatting will be kept the same as much as possible.

View minimal-analytics-snippet.js
(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 = () => {
developit / *
Last active Apr 14, 2021
🐻 Valoo: just the bare necessities of state management. 150b / 120b.
View *

🐻 valoo

just the bare necessities of state management.


Hotlink it from

See Interactive Codepen Demo.

evantahler / buildSitemap.js
Last active Dec 17, 2020
35 lines to build a sitemap for next.js projects
View buildSitemap.js
#! /usr/bin/env node
// I am ./bin/buildSitemap.js
const path = require('path')
const glob = require('glob')
const fs = require('fs')
const SITE_ROOT = process.env.SITE_ROOT || ''
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')
regilero / nginx.conf
Last active Feb 26, 2021 — forked from thoop/nginx.conf
Altered nginx.conf for nginx
View nginx.conf
# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change (server_name) to your website url
# Change /path/to/your/root to the correct value
# Generate $prerender_ua bool value based on user agent
# indexation bots will get this as 1,
# prerender user agent will always get 0 (avoid loops)
map $http_user_agent $prerender_ua {
default 0;
emilong / component.jsx
Created May 27, 2016
Creating semantic links for react-router using HOCs
View component.jsx
import React, { Component } from 'react'
import { SubWidgetLink } from './routes'
export default class MyComponentWithALink extends Component {
render() {
const { widget } = this.props
return (
paulirish /
Last active May 14, 2021
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