Skip to content

Instantly share code, notes, and snippets.

View kamleshchandnani's full-sized avatar

Kamlesh Chandnani kamleshchandnani

View GitHub Profile
@adityapunjani
adityapunjani / asyncCSS.js
Last active August 29, 2017 12:16
Simpler Async CSS load
function loadCSS( href, before, media){
"use strict";
// Arguments explained:
// `href` is the URL for your CSS file.
// `before` optionally defines the element we'll use as a reference for injecting our <link>
// By default, `before` uses the first <style> element in the page.
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document.
// If so, pass a different reference element to the `before` argument and it'll insert before that instead
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
var ss = window.document.createElement( "link" );
@ahmadina
ahmadina / pm2.json
Last active December 15, 2019 09:26
using PM2 for run ES6 (babel) application
{
"apps": [{
"name": "Application",
"exec_interpreter": "./node_modules/babel-cli/bin/babel-node.js",
"script": "./bin/www",
"args": [],
"watch": ["public", "package.json", "pm2.development.json"],
"ignore_watch": ["public"],
"watch_options": {
"persistent": true,
@kamleshchandnani
kamleshchandnani / reactiveconf-2017-progressive-loading-cfp.md
Last active June 29, 2020 08:22
Progressive loading for modern web applications via code splitting!
1-In the github repo on Settings > Integration & Services, enable
2-Go to travisCI page and enable the repo
3-Configure the env variables on TravisCI so that it is not necessary to save credentials on github
-in the project Settings on TravisCI, add the entry for netlify site id: NETLIFY_SITE_ID - <site_id from .netlify file generated on netlify create>
-create a netlify access token for TravisCI
-On Netlify Dashboard, Go to Account Settings > OAuth Applications (https://app.netlify.com/account/applications) > Personal access tokens and press New Access Token
-Name it anything, but to make it easier the suggestion is name TravisCI.
-Generate it and COPY it - you won’t see it again!
-in the project Settings on TravisCI, add the entry for netlify personal access token generated for TravisCI: NETLIFY_ACCESS_TOKEN
4-Generate a .travis.yml file in the local repo
@mxstbr
mxstbr / idea.md
Last active February 16, 2021 18:33
Code splitting react-router routes with webpack 2

NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...

With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent function over and over again. (See here for an explanation how it works with webpack 1)

Example:

<Router history={history}>
  <Route
    path="/"
// // LUI Next Colors
// // LUI Now colors live in @lendi-ui/color package
import hexToRgba from 'hex-to-rgba';
export const isHex = (str: string) => str.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/);
type Shade = Partial<950 | 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 | 25 | 0>;
type Format = 'hexadecimal' | 'rgba';
type Category = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'shade' | 'focus';
type ColorObject = Partial<{ [key in Shade]: { value: string; format: Format } }>;
@transitive-bullshit
transitive-bullshit / rollup.config.js
Created November 1, 2017 05:46
example rollup config for react module transpilation
import babel from 'rollup-plugin-babel'
import commonjs from 'rollup-plugin-commonjs'
import postcss from 'rollup-plugin-postcss'
import resolve from 'rollup-plugin-node-resolve'
import pkg from './package.json'
export default {
input: 'src/index.js',
output: [
@acdlite
acdlite / coordinating-async-react.md
Last active March 20, 2022 12:27
Demo: Coordinating async React with non-React views

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

No, .mjs is not a Python 3-like split

Seen a few tweets on this. I want to dispel some FUD.

Node is probably going to introduce a new file extension for JavaScript modules, .mjs. The reasons for this are long and perilous, and trying to summarize the discussion that led to it is maddening. The short version is that ES6 modules have different semantics from existing scripts, and need to be executed differently. In browsers, this is done with <script type="module">. In Node, this will be done by analyzing the file extension of the imported file.

I'll be honest: I don't love this solution! I was rooting for the TC39 counter-proposal. But I also understand the solution that the Node developers chose, and why they chose it.

The new file extension is a good enough solution. You can read the [draft spec](https://github.com/nodejs/node-eps/

@EvanBacon
EvanBacon / expo-vscode-settings.json
Created February 14, 2023 18:33
Expo file nesting patterns. Ensure all related extensions are nested inside of the default file.
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.patterns": {
"*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map",
"*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx",
"*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(captur