DEV Community: Arnaldo Gabriel

A Quick Way of Minifying an HTML File

Arnaldo Gabriel — Thu, 23 May 2019 20:47:01 +0000

Note to self

A quick way of minifying an HTML file including the <style> and <script> tags within it.

Start by installing the HTML minifier with:
npm install html-minifier -g
Execute the minifier command:
html-minifier --minify-css true --minify-js true input.htm -o output.htm

Additional options:
--collapse-whitespace --remove-comments --remove-optional-tags --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype

One-liner to reset the password associated with git

Arnaldo Gabriel — Sun, 28 Apr 2019 16:15:47 +0000

Note to self

One-liner to reset the password associated with git. Once it is run git will prompt the user to re-enter the password before making a push. Useful for those times when you change the GitHub password.

git config --global --unset user.password

Simple way of modifying Ant Design default theme

Arnaldo Gabriel — Sun, 28 Apr 2019 13:55:09 +0000

Note to self

Start by installing lessc.

npm install less -g

Move into the 'dist' directory inside the antd package.

Create a file with the following content and name it 'my-theme.less'

@import "./antd.less";   // Import Ant Design styles by less entry

@primary-color: #d228e9;                         // primary color for all components
@link-color: #1890ff;                            // link color
@success-color: #52c41a;                         // success state color
@warning-color: #faad14;                         // warning state color
@error-color: #f5222d;                           // error state color
@font-size-base: 40px;                           // major text font size
@heading-color: rgba(0, 0, 0, .85);              // heading text color
@text-color: rgba(0, 0, 0, .65);                 // major text color
@text-color-secondary : rgba(0, 0, 0, .45);      // secondary text color
@disabled-color : rgba(0, 0, 0, .25);            // disable state color
@border-radius-base: 4px;                        // major border radius
@border-color-base: #d9d9d9;                     // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, .15);  // major shadow for layers

Execute the following command in the terminal:

lessc --js my-theme.less result.css

Example to compile it inside the project styles folder:

lessc --js my-theme.less ../../../src/style/custom-antd.css

Now import the resulting CSS into your project.

One-liner to prevent accidental pushes to public repositories

Arnaldo Gabriel — Sun, 28 Apr 2019 13:43:45 +0000

Note to self

One-liner to disable remote pushing. Useful to prevent accidental pushes to public repositories.

git remote set-url --push origin no_push

NPM Package Creation - µGuide

Arnaldo Gabriel — Sun, 28 Apr 2019 00:28:59 +0000

Note to self.

How to Publish

Create an NPM account
Create GitHub repo
Clone repo with git clone <url>
Inside the repo run: npm init
Fill the required fields
Push to Github: git push origin master
Publish publicly: npm publish

Basic Commands

To publish a new version of the package: npm version 1.0.0 && npm publish
To see the current profile: npm profile get
To change a property: npm profile set <property> <value>
To get current local version: npm version
To update a specific package: npm install package@latest
To update if the version change is minor: npm update package

Whitelisting Specific Directories

This is useful to minimize the size of the package by not including unnecessary files present in the repo.

    {
      "name": "package-name",
      "main": "./lib/index.js",
      "files": [
        "/allowed-directory"
      ]
    }