Skip to content

Instantly share code, notes, and snippets.

View MQuy's full-sized avatar
🎯
Focusing

Minh Quy MQuy

🎯
Focusing
251 followers · 320 following
View GitHub Profile
@MQuy
MQuy / bundles.md
Created March 12, 2021 09:25

Separated frontend bundles

  • Status: active
  • Date: 2020-09-22

Context and Problem Statement

Most web browsers have good support for es6+ features while serving legacy/polyfills will increase and harm our user experience. According to our google analytics

| Browsers | Sessions |

@MQuy
MQuy / bokio-mono.md
Last active October 3, 2019 16:37

Usage

$ yarn
$ cd node_modules/ts-loader && yarn && yarn build
$ cd packages/areas/invoices && yarn start

Structure

@MQuy
MQuy / css.md
Last active March 7, 2021 02:43

How to reduce stylesheet's size by 55% and even more?

Before diving into Long answer 👩‍🏫, let see why stylesheet's size is one of the most important factors in term of web experience.

In general, a stylesheet is just bunch of rules/selectors which can be defined in:

  • External files.
  • Style tags.
  • Inline style attributes.

✍️ There are a lot of discussions for pros and cons of each approach and it's beyond the scope of this article, but if you are interested in you can read here.

@MQuy
MQuy / deadcode.md
Last active April 8, 2018 19:09

WTF is deadcode elimination? How to do it by yourself

Scenario

According to wiki

Deadcode elimination is a compiler optimization to remove code which does not affect the program results.

  • Past me: 🤩it is the compiler's job to do deadcode elimination and we, developers, don't have to care anything about it right.
  • Me: 🙅🏼It is also our duty, developers, to clean our own 💩.
@MQuy
MQuy / React structure.md
Last active March 16, 2018 11:49

Folder Structure

src
├── components
│   ├── Dropdown
│   │   ├── Dropdown.tsx
│   │   └── dropdown.less
│   └── VerificationModal
│       ├── VerificationSummary
@MQuy
MQuy / v8.md
Created February 24, 2018 21:21 — forked from kevincennis/v8.md
V8 Installation and d8 shell usage

Installing V8 on a Mac

Prerequisites

  • Install Xcode (Avaliable on the Mac App Store)
  • Install Xcode Command Line Tools (Preferences > Downloads)
  • Install depot_tools
    • git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
    • sudo nano ~/.bash_profile
    • Add export PATH=/path/to/depot_tools:"$PATH" (it's important that depot_tools comes first here)
@MQuy
MQuy / state.md
Last active February 4, 2018 16:07

Bokio Frontend State Management

State Tree

There are many ways to manage our state in frontend, but in my opinion (after debugging websites which use react), state can be classified into three categories:

  • Domain state: data that we get from our servers (list of invoices, customers, signalR ...).
  • App state: data that we use for specific components (will explain details in the section below).
  • UI state: data that represents how UI is displayed.

App State ("Dynamic")

I think best way to explain this concept is via example.

@MQuy
MQuy / vscode.config
Last active August 19, 2018 13:13
VSCode Vim
{
"editor.tabSize": 2,
"editor.detectIndentation": true,
"editor.trimAutoWhitespace": true,
"files.trimTrailingWhitespace": true,
"terminal.integrated.copyOnSelection": true,
"explorer.confirmDelete": false,
"window.zoomLevel": 0,
"workbench.sideBar.location": "left",
"editor.minimap.enabled": false,
@MQuy
MQuy / Bokio.md
Last active August 2, 2017 22:36
@MQuy
MQuy / webpack-1.js
Created May 12, 2017 20:21
assets = ['vendor.js', 'app.js'];
if (!("fetch" in window && "Promise" in window)) {
assets.unshift('polyfill.js');
}
scripts.forEach(function(src) {
var scriptEl = document.createElement('script');
scriptEl.src = src;
scriptEl.async = false;
document.head.appendChild(scriptEl);
});