Checking web accesibility

Manual tools

• Check reading nad colour contrast with Wave extension
• Tab through the site

Use the CLI

aXe-cli

Gives documentation, but doesn’t tell you where exactly you have messed up

• Install the package

  1	npm install axe-cli --save dev

• Generate the script

  1 2 3

  "scripts": { "test-axe": "run axe ./index.html" }

• Run the script

  1	npm test-axe

pa11y - automated accesibility testing

Tells you where exactly is the error, but not so well documented

• Install the package

  1	npm install pa11y --save dev

• Generate the script

  1 2 3

  "scripts": { "test-a11y": "run pa11y ./index.html" }

• Run the script

  1	npm test-a11y

Node Version Manager (nvm) cheatsheet

With NVM: you can manage the NodeJs version with this system, so you don’t have to endure the installing and uninstalling process each time you work in a different project. There is also a NVM Windows installer.

Install a version

• Download, compile, and install the latest release of node

  1	nvm install node # "node" is an alias for the latest version

• Download the latest long term support version

  1	nvm install --lts

• Install a specific version of node

  1	nvm install 6.14.4 # or 10.10.0, 8.9.1, etc

• Uninstall a version

  1 2	nvm uninstall 6.14.4 nvm uninstall --lts # uninstall the lates lts

Listing versions

If you want to see what versions are installed:

1
2

nvm ls # which version you already have installed
nvm ls-remote # which versions are available to install

Select a version

• Set an installed version

  1	nvm use node # set the version you just installed

• run node for a certain installed version

  1 2 3

  nvm run node --version nvm exec 4.2 node --version nvm which 5.0 # get the path for the exec

System version of node

If you want to use the system-installed version of node, you can use the special default alias “system”:

1
2

nvm use system
nvm run system --version

Migrate a version

• Install a new version of Node.js and migrate npm packages from a previous version

  1 2	# nvm install node --reinstall-packages-from=node nvm install 6 --reinstall-packages-from=5

• Set default global packages from file while installing

If you have a list of default packages you want installed every time you install a new version, just add the package names, one per line, to the file $NVM_DIR/default-packages.

1
2
3

# $NVM_DIR/default-packages
eslint
gulp

Update npm

This is a good practice.

1

nvm install-latest-npm

Shortcuts

Install multiple packages in one command

1

npm i -S react redux react-redux lodash @material-ui/core

Install packages from different sources

• Default source for npm install is the npm-registry
• You can get it from a tarball or git

  1 2 3 4 5 6 7 8

  # from git service npm i https://github.com/username/myrepository.git npm i bitbucket:username/myrepository npm i gitlab:username/myrepository ## from GitHub: userName + from repo name (Redux) npm i username/myrepository ## from GitHub: from a branch npm i username/myrepository#develop

Linking Packages

• Package linking works by creating a symlink in your node_modules folder that points to the local repository of your package. * * You can edit packages locally and the changes will be instantly available in the project using it.

1
2
3
4
5
6
7

# You have myPackage which will be used by myProject
# Go to the package folder 
cd ./myPackage
npm link
# then go to the main project folder
cd ../myProject
npm link mypackage

The npx command

• When using sciprting tools, such as Grunt, gulp, react-create-app, react-native-cli or mocha.
• Before NPM 5.x you had to install them either as global packages or as devDependencies. This was time-consuming, it was time consuming.
• npx is binary which downloads an installs automatically

  1	npx create-react-app my-new-project

Monitor and clean your project

• Scope: to solve issues and to make the dependency tree and the final bundle size as small as possible.

1. Check dependecy tree and which package versions have actually been installed.

   1 2 3 4

   # check dependency tree npm list # only top level + global packages npm list --depth=0 -g

2. dedupe your project before publishing.

   1 2 3

   npm dedupe # or you can use the shortcut npm ddp

3. Overview of your outdated and missing packages

   1	npm outdated

   3.1. If you get a lot of red rows, update to the latest possible version according to your package.json

   1	npm update

   3.2. If you are using the caret ‘^’ in front of your versions in package.json, the major versions will not be updated (hence the yellow rows). This is good, because there might be breaking changes updating to a new major version.

3.3. If you still want to update everything to the latest version, you should do it from the main folder

1

npx npm-update-all

Documentation from the terminal

Use NPM scripts

• Fewer dev-dependencies or global dependencies to maintain.
• No new tools for contributors and team members to learn
• Less code and configuration.

On package.json :

1
2
3
4
5

"scripts":
{
    "test": "jest",
    "format": "eslint src --fix"
}

• Running NPM scripts on Terminal
  Now you can run npm run format and ESLint will do its job.
  You can get the list of available scripts via npm run

  1 2 3 4

  # get the list of available scripts npm run # run the script we created previously npm run format

• Running NPM Scripts in VScodium
  On VSCodium, you can list all your npm-scripts in the explorer and run your scripts with a click of a button by enabling the option.

  1	npm.enableScriptExplorer: true

Set your default values

Intialize the project and fill the default values:

1
2
3

npm config set init.author.name "Angeles Broullon"
npm config set init.author.email "AngelesBroullon@mail.com"
npm init -y

Update npm

1

npm install -g npm@latest

Status codes

• HTTP/1.1: Status Code Definitions

Summary

Setting up a Gitlab page with a NodeJS blogging system

I started a new project in order to generate a static web page, a small blog to store and share my programming notes and cheatsheets which I write by default in Markdown. There are several alternatives, but I chose to use Hexo since I wanted to try the new NodeJS version.

Software used

• Git: version management.
• NVM: you can manage the NodeJs version with this system, so you don’t have to endure the installing and uninstalling process each time you work in a different project. There is also a NVM Windows installer.
• VSCodium: a free open source version of Visual Studio Code. Microsoft budles it with some extra layers such as telemetry and who knows what else, and this version is free from all that.

Environment

❗ Note: while I prefer using the console when I’m not doing any major merge, you can always use a GUI Git system.

First I will download the latest NodeJs version via NPM and check it out.

1
2

nvm install
nvm list

To get the code into my local system.

1

git clone https://gitlab.com/usuario/code-notepad

Then I get the Hexo command line interface via npm, the NodeJs default package manager.

1

npm install hexo-cli -g

And now, welcome to Hexo.

Creating the blog

First we initialize the blog.

1
2
3

hexo init blog
cd blog
npm install

Then if we want to have assets (e.g. images) for each post, we should set the right variable for that. It is stored in _config.yml.

1

post_asset_folder: true

And finally we deploy in single command to check everything works as we want to.

1

hexo server

Customization with themes and plugins

We may want to use a custom theme. It’s as easy as to go the repository, download it an store it in the themes folder.

I love mermaidJS diagrams, as they provide an easy way to create diagrams while taking notes, and they are portable. Hence I added a pluging to been able to use them in my posts via npm.

1

npm i hexo-filter-mermaidjs

And then I configured them.

1. In _config.yml, on the plugins section I added.

   1 2 3 4 5 6

   # mermaid chart mermaid: ## mermaid url https://github.com/knsv/mermaid enable: true # default true version: "7.1.2" # default v7.1.2 options: #startOnload: true // default true

2. And in the footer.ejs from my theme template.

   1 2 3 4 5 6 7 8 9

   <% if (theme.mermaid.enable) { %> <script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script> <script> if (window.mermaid) { mermaid.initialize({theme: 'forest'}); } </script> <% } %>

Adding the CI

Finally I added the CI (Continuous Integration) file, in the root of the directory: .gitlab-ci.yml. This file will use a docker container with a NodeJS 10.15.3 image, where it will install Hexo, build the packages, generate the pageand deploy the content in Gitlab pages.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

image: node:10.15.3

cache:
  paths:
    - node_modules/

before_script:
  - npm install hexo-cli -g
  - test -e package.json && npm install
  - hexo generate

pages:
  script:
    - hexo generate
  artifacts:
    paths:
      - public
  only:
    - master

With this we have the skeleton ready, so now we only need to upload the code to Gitlab, and that will automatically launch the process getting the page to something similar to this: https://angelesbroullon.gitlab.io/code-notepad/.

1
2

git commit -a -m "Init blog system"
git push

How to blog

We can create posts from the source folder by writing them using Markdown syntaxn.

1
2

cd source
hexo new post "My firts post"

This will generate a markdown file with the following header, which will allow us to sort out the content.

1
2
3
4
5

---
title: My fist post
date: 2018-04-17 10:00:00
tags: [Tag1, Tag2]
---

We can store images in the folder which was created with the same name as the post, using the following syntax (e.g. in the “My first post” folder we store an image image.jpg):

1
2

{% asset_img "image.jpg" "Image description
" %}

Then we commit, push, and Gitlab will do its magic.