transitive-bullshit

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: [

steffencrespo

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

gaearon

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

• Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

threepointone

(I'm enjoying doing these raw, barely edited writeups; I hope they're useful to you too)

Feature flags

This is my own writeup on feature flags; for a deep dive I'd recommend something like Martin Fowler's article (https://martinfowler.com/articles/feature-toggles.html).

So. Feature flags. The basic idea that you'll store configuration/values on a database/service somewhere, and by changing those values, you can change the user experience/features for a user on the fly.

Let's say that you're building a new feature, called 'new-button' which changes the color of buttons, which is currently red, to blue. Then you'd change code that looks like this -

sarahbethfederman

// // 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 } }>;

EvanBacon

{
  "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