Skip to content

Instantly share code, notes, and snippets.

View didi0613's full-sized avatar

Sheng Di didi0613

12 followers · 4 following
  • Walmart Labs
  • Sunnyvale, CA
View GitHub Profile
@didi0613
didi0613 / 2018-jira-tickets.md
Last active November 27, 2018 20:03
2018 JIRA Tickets
@didi0613
didi0613 / webpack4-component-archetype.md
Last active November 14, 2018 02:06
Component Archetype Webpack 3 & 4 Performance Comparison

Webpack 3 & 4 Performance Comparison

Home App

webpack 3

Hash: 8cd9886d070e82aa564e
Version: webpack 3.12.0
Time: 29991ms
@didi0613
didi0613 / home-app-webpack4.md
Last active October 9, 2018 22:10
Webpack 4 performance report

Webpack 4 performance report on home app

Version: webpack 4.20.2
Time: 28190ms
Built at: 2018-10-09 15:07:19
                                                          Asset      Size  Chunks Chunk Names
                 homepage_styles.style.d946634cbdd1f45455ed.css   192 KiB       2  [emitted] homepage_styles
                           1812c8940a09b7e8de827e9e19a63ecb.eot   119 KiB          [emitted]
                          6560fefbed8fc6693665874ad7aa5565.woff  58.8 KiB          [emitted]
@didi0613
didi0613 / core-modules-bundle-size-instructions.md
Last active September 12, 2018 21:21
Use core module bundle sizes cli tool instructions

Core Module Bundle Size Instruction

Clone the CLI tool

Clone core-modules-bundle-size CLI tool to your local

git clone https://gecgithub01.walmart.com/s0d00px/core-modules-bundle-size
@didi0613
didi0613 / webpack4.md
Last active April 18, 2022 10:15
Migrate to Webpack 4

Upgrade to webpack 4

Config changes

Mode

  • Specify the mode (development/production) explicitly for running webpack.

Plugins

@didi0613
didi0613 / core-modules-bundle-size.md
Last active September 4, 2018 23:05
Code Modules Bundle Size

Code Modules Bundle Size Comparison

Option #1: CLI Tool

How does the CLI Tool work?

Generate JS files

@didi0613
didi0613 / gist:a85464cbfa8a570215745e13467e7e32
Last active August 7, 2018 03:10
styles fix for grocery

Duplicated dependencies list for grocery app

From electrode-archetype-react-app(-dev)

  • babel-plugin-transform-object-rest-spread
  • prop-types
  • react
  • react-dom
  • webpack
  • autoprefixer
  • babel-eslint
  • babel-polyfill
@didi0613
didi0613 / shorten-css-classname.md
Last active March 22, 2021 08:46
Shorten css class names for css module

Shorten css class names for css module

Jira Ticket

https://jira.walmart.com/browse/CEECORE-255

Background

Electrode Application can use css-modules as one of the style options, CSS names can get long with local identifier name and random hash.

@didi0613
didi0613 / add-flow-to-electrode-app.md
Last active June 22, 2018 23:18
How to add flow to existing electrode app

How to add flow to existing electrode app

Flow is a static type checker for Javascript and widely used by frontend developers nowadays. It helps us to code faster, smarter, bigger and more confidently. Since Electrode has already got Babel in place, we need to set up flow with babel: using babel to compile the code and integrate Flow into Electrode app.

Steps

If you wants to add Flow with the existing app, here is what you'll need to do:

  • update package.json:
@didi0613
didi0613 / flow-checker-update.md
Last active June 19, 2018 20:07
Flow type checker frequent ask

Flow type checker frequent ask

Below are the issues that frequently being ask, you can update them if you see any similar issue:

- Cannot assign this.handlerFunction.bind(...) to this.handlerFunction because property handlerFunction is not writable.

Update this.handlerFunction = this.handlerFunction.bind(this);

to (this:any).handlerFunction = this.handlerFunction.bind(this);

- How to use EventTarget?

Declare type by