Arek Bartnik arekbartnik

## README.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                arekbartnik
                / README.md
            
            
              Created
              February 25, 2021 16:56
                — forked from tannerlinsley/README.md
            
              
                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


## 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 = () => {

## whatev.js
// stores/location.ts

import { writable, derived } from "svelte/store";
import { beforeUpdate } from "svelte";

export interface LocationStore {
  current: Location | undefined;
  previous: Location | undefined;
}

## build.mjs
////////////////////////////////////////////////////////////////////////////////
// Create a directory called "pages" next to
// this file, put markdown files in there, and
// then run:
//
// ```
// $ node build.mjs
// ```
//
// Then deploy the "build" directory somewhere.

## gist:e9bad975d635659f8b40b4cc8aa94673
// return true if the Web App is running as PWA (installed)
const isPWA = () => (
  matchMedia('(display-mode: standalone)').matches ||
  navigator.standalone ||
  document.referrer.includes('android-app://')
);

## optimize.js
const glob = require("glob");
const fs = require("fs");
const path = require("path");
const { PurgeCSS } = require("purgecss");
const cssnano = require("cssnano");
const cheerio = require("cheerio");
const minify = require("html-minifier").minify;
const sharp = require("sharp");

// This runs on Netlify after Jekyll builds a full site.

## hooked-style.js
import {define as hookedDefinition} from 'hooked-elements'; // or wicked-
import css from 'ustyler';

export const define = (selector, definition) => {
  // let the library throw on duplicated selectors
  const result = hookedDefinition(selector, definition);
  // add styles for this selector
  if (definition.style) css(definition.style);
  // return the wicked/hooked magic 🌈
  return result;

## differential-js-loader.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                arekbartnik
                / differential-js-loader.md
            
            
              Created
              April 14, 2020 01:22
                — forked from WebReflection/differential-js-loader.md
            
              
                Differential JS Loader
              
          
    This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.
Compatibility

This technique has been successfully tested down to IE9.
<!DOCTYPE html>
<html lang="en">

  
## dominant-color.ts
function dominantColorRGBA(pxv :ArrayLike<int>, pxcount :int, stride :int) :RGBA {
  let cm = new Map<int,int[]>()

  // average and count RGB values
  for (let i = 0; i < pxcount; i += stride) {
    let r = pxv[i], g = pxv[i + 1], b = pxv[i + 2], a = pxv[i + 3]
    // key = (a << 24) + (r << 16) + (g << 8) + b
    let key = (r << 16) + (g << 8) + b

    // update or store entry in temporary map.

## multiple_ssh_setting.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                arekbartnik
                / multiple_ssh_setting.md
            
            
              Created
              February 20, 2020 22:40
                — forked from jexchan/multiple_ssh_setting.md
            
              
                Multiple SSH keys for different github accounts
              
          
    Multiple SSH Keys settings for different github account

create different public key

create different ssh key according the article Mac Set-Up Git
$ ssh-keygen -t rsa -C "your_email@youremail.com"
	(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 = () => {
	// stores/location.ts

	import { writable, derived } from "svelte/store";
	import { beforeUpdate } from "svelte";

	export interface LocationStore {
	current: Location \| undefined;
	previous: Location \| undefined;
	}
	////////////////////////////////////////////////////////////////////////////////
	// Create a directory called "pages" next to
	// this file, put markdown files in there, and
	// then run:
	//
	// ```
	// $ node build.mjs
	// ```
	//
	// Then deploy the "build" directory somewhere.
	// return true if the Web App is running as PWA (installed)
	const isPWA = () => (
	matchMedia('(display-mode: standalone)').matches \|\|
	navigator.standalone \|\|
	document.referrer.includes('android-app://')
	);
	const glob = require("glob");
	const fs = require("fs");
	const path = require("path");
	const { PurgeCSS } = require("purgecss");
	const cssnano = require("cssnano");
	const cheerio = require("cheerio");
	const minify = require("html-minifier").minify;
	const sharp = require("sharp");

	// This runs on Netlify after Jekyll builds a full site.
	import {define as hookedDefinition} from 'hooked-elements'; // or wicked-
	import css from 'ustyler';

	export const define = (selector, definition) => {
	// let the library throw on duplicated selectors
	const result = hookedDefinition(selector, definition);
	// add styles for this selector
	if (definition.style) css(definition.style);
	// return the wicked/hooked magic 🌈
	return result;
	function dominantColorRGBA(pxv :ArrayLike<int>, pxcount :int, stride :int) :RGBA {
	let cm = new Map<int,int[]>()

	// average and count RGB values
	for (let i = 0; i < pxcount; i += stride) {
	let r = pxv[i], g = pxv[i + 1], b = pxv[i + 2], a = pxv[i + 3]
	// key = (a << 24) + (r << 16) + (g << 8) + b
	let key = (r << 16) + (g << 8) + b

	// update or store entry in temporary map.