ankeetmaini

import 'pp-vx/dist/components/button/button.css'
import React from 'react'
import clsx from 'clsx'

const sizes: {[key: string]: string} = {
  md: 'vx_btn--size_md',
  sm: 'vx_btn--size_sm',
}

export type OneOrAnother<T1, T2> =

ankeetmaini

import React from 'react';

class ReducerComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  reducer = (state, action) => state;

  dispatch = action => this.setState(state => this.reducer(state, action));

ankeetmaini

Back To The Basics

Chapter 2: Using Flow

Introduction

Why does it make sense to use FlowType or TypeScript when working with JavaScript? To give an appropriate answer, the best idea would be to build a small game or application to make the benefits clear.

ankeetmaini

"We need Webpack presets" and "Webpack and its plugins are too hard to configure correctly" have been the number one cause of developer pain shared with me from large sites adopting Progressive Web Apps and optimising their load performance.

If I was building a Webpack preset pack for performance, I might use the following:

• Ensure you're using a production build of your framework: new webpack.DefinePlugin({ 'process.env': env })
• Minify your JS: webpack.optimize.UglifyJsPlugin
• Compress your resources (GZip): compression-webpack-plugin
• Split your vendor chunks: CommonsChunkPlugin

ankeetmaini

• https://www.zachleat.com/web/comprehensive-webfonts/
• https://calendar.perfplanet.com/2016/loading-web-fonts-asynchronously/
• https://www.bramstein.com/writing/web-font-loading-patterns.html
• https://developers.google.com/web/updates/2016/02/font-display
• https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization
• https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
• https://www.keycdn.com/blog/web-font-performance/
• https://prowebtype.com/delivering-web-fonts/

ankeetmaini

Auto-deploying built products to gh-pages with Travis

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

Create a compile script

You want a script that does a local compile to e.g. an out/ directory. Let's call this compile.sh for our purposes, but for your project it might be npm build or gulp make-docs or anything similar.

The out/ directory should contain everything you want deployed to gh-pages. That almost always includes an index.html.

ankeetmaini

// Usage:
// 
// function loader() {
//   return new Promise((resolve) => {
//     if (process.env.LAZY_LOAD) {
//       require.ensure([], (require) => {
//         resolve(require('./SomeComponent').default);
//       });
//     }
//   });

ankeetmaini

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },

  "plugins": ["react"],

  "ecmaFeatures": {