Skip to content

Instantly share code, notes, and snippets.

Avatar
:shipit:
Trying to quit vim

Volkan Çakıl volkancakil

:shipit:
Trying to quit vim
View GitHub Profile
@yyx990803
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: esm.run, 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
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
tannerlinsley / README.md
Last active May 12, 2021
Replacing Create React App with the Next.js CLI
View README.md

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
donaldpipowitch / README.md
Last active Oct 3, 2020
Example for a codemod which can run on a TypeScript code base
View README.md

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
developit / *valoo.md
Last active Apr 14, 2021
🐻 Valoo: just the bare necessities of state management. 150b / 120b. https://npm.im/valoo
View *valoo.md

🐻 valoo

just the bare necessities of state management.

Usage

Hotlink it from https://unpkg.com/valoo.

See Interactive Codepen Demo.

@evantahler
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 || 'https://www.actionherojs.com'
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')
@regilero
regilero / nginx.conf
Last active Feb 26, 2021 — forked from thoop/nginx.conf
Altered prerender.io 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 example.com (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
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 (
<div>
...
@paulirish
paulirish / what-forces-layout.md
Last active May 14, 2021
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

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