Skip to content

Instantly share code, notes, and snippets.

@Fractalbonita

Fractalbonita/cheat-sheet-web-dev-tools.md

Last active March 24, 2022 21:50
Show Gist options
  • Save Fractalbonita/7b6364fdfe412cbd1eb7efc93a60a7dc to your computer and use it in GitHub Desktop.
Save Fractalbonita/7b6364fdfe412cbd1eb7efc93a60a7dc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cheat-sheet-web-dev-tools.md

Cheat sheet for the installation (and usage) of web development tools

Babel

  • Free and open source (source-to-source) complier / transpiler
  • Converts ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

Compiler A compiler produces an executable binary. A complier produces a lower-level output than the input was.

Transpiler A transpiler produces ann output, which is on a similar level as the input.

.babelrc

{    "presets": ["@babel/preset-env"]   }

Links

Bootstrap

  • Developed by Twitter (Twitter Bootstrap) for consistency across internal tools
  • Front-end open source toolkit
  • Ideal framework for prototyping responsive mobile first sites (quick & dirty)
  • CSS based with optional JS

Installation

npm install bootstrap

BootstrapCDN

  • Online version
  • Delivers cached version of Bootstrap’s compiled CSS and JS
  • CDN stands for content delivery network
  • Scattered servers (short paths with quick sort)
<!-- CSS only -->
<link
  rel="stylesheet"
  href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
  integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
  crossorigin="anonymous"
/>

<!-- JS, Popper.js, and jQuery -->
<script
  src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
  integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  crossorigin="anonymous"
></script>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
  integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  crossorigin="anonymous"
></script>
<script
  src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
  integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
  crossorigin="anonymous"
></script>

Links

Cypress

  • Frontend testing tool for modern JS frameworks
  • Cypress is most often compared to Selenium
  • End-to-end tests
  • Integration tests
  • Unit tests

Installation

cd [your project path]
npm install cypress --save-dev
npx cypress open

npm init must be executed so that npm init cypress is added to node_modules folder and package.json file in the root of your project

Links

Express

  • Express for HTTP-server in node.js

Installation

npm install express

Endpoint API in Express, e.g. HTTP request GET

const express = require('express');
const path = require('path');
const app = express();
app.get('/styles.css', (request, response) => {
  response.sendFile(path.join(__dirname, 'styles.css'));
});
app.get('/', (request, response) => {
  response.sendFile(path.join(__dirname, 'index.html'));
});
app.listen(8080, () => console.log(`App listening on http://localhost:8080`));

Emmet

Emment homepage

  • Plugin for text editors (already included in most editors)
  • Enhances coding
  • Syntax inspired by CSS selectors
  • Autocompletion (tab) of HTML and CSS
  • Structuring and auto-fill
  • Abbreviations are the heart of the Emmet toolkit
  • Abbreviation syntax is based on nesting and attribute operators
  • Various abbreviations can be combined
  • Code can be wrapped with new tags

Examples

Child Creates an unordered list with one list item

ul>li

Multiplication Creates an unordered list with three list items

ul>li*3

Sibling Create a div, paragraph, and list with list items

div+p+ol>li*5

Climb up Create a div with a heading and paragraph well as a paragraph on the same level as the div

div>h2+p^p

Grouping Group header elements in complex abbreviations

div>(header>ul>li*2>a)+footer>p

Text Add text to an element

a{Click me}

Item numbering Number items with $

ul>li*5>{item$}

Custom attributes Add a custom attribute with the [attr] notation

td[title="Hello world!" colspan=3]

ID Add an ID to an element

h1#title

Class Add a class to an element

div.container

Formik

  • Library for building and validating forms
  • Getting values in and out of form state
  • Validation and error messages
  • Handling form submission
  • Smaller and performanter than Redux-Form
  • Formik has a special config option / prop for Yup called validationSchema
  • validationSchema will automatically transform Yup's validation errors into a pretty object

Installation

npm install formik --save

Import

import { Formik, Form, Field, ErrorMessage } from 'formik';

Links

Jest

  • Test framework
  • Pre-installed from create-react-app
  • Setup and Teardown: describe, test, it, beforeAll, beforeEach, afterAll, afterEach, Scoping, Execution
  • Matcher - Assertions

Installation

npm install --save-dev jest
npm run test

JSON server

Installation

npm install -g json-server

Setup

npx json-server --watch [directory]/[filename]

Links

Node.js // npm // MongoDB Shell

  • Node.js is a framework, which interprets commands
  • JavaScript can be executed without a browser and used for the backend
  • Node.js is based on the same runtime engine as Google Chrome
  • npm is installed with Node.js

Installation on Windows

  1. Download installation zip or installer.
  2. Extract and save files in the desired location.
  3. Add binary to PATH environment variable.
    1. Open Control Panel.
    2. Choose System in System and Security.
    3. Click Environment Variables.
    4. Select Path from the System Variables.
    5. Click Edit to display the Edit Environment Variable modal.
    6. Click New and add the filepath of the binary.
    7. Confirm changes by clicking OK on each modal that pops up.
    8. Check configuration by opening the bash and entering command --help.
    9. Check the current version with command --version or command -v.

Update versions

npm install npm@latest -g
npm install [package]@latest -g

Example for a little Node.js JS program

Hello world program hello-world.js

let http = require('http');
http
  .createServer(function (request, response) {
    response.writeHead(200, { 'Content-Type': 'text/html' });
    response.end('Hello world!');
  })
  .listen(8080, () => console.log(`Listening on http://localhost:8080`));

Program execution in shell

node \users\<username>\hello-world.js

Display "Hello world!" in browser

http://localhost:8080

Links

Node version manager

  • Keep up-to-date with versions and version requirements
  • Manage different node versions
  • e.g. nvm, nodist (for Windows), n, nave, ...

Parcel

Prettier

React

  • JS Library, from Facebook (2013)
  • Single Page Applications (SPA) of components
  • Extends JavaScript with HTML-like syntax, known as JSX

Installation

npx create-react-app [project name]
npm run start
# or
npm scripts

Import

import React from 'react';
import React, { useState, useEffect } from 'react';

Example

// Variables
function Component() {
  const subject = 'React';
  return (
    <header className='App-header'>
      <p> Hello, {subject}! </p>
    </header>
  );
}

// Props
function HelloComponent({ subject }) {
  return <p> Hello, {subject}! </p>;
}

<HelloComponent subject={'Clarice'} />;

React form validation

  • Validation: user experience & never trust user input (security)
  • Controlled Components: React is taking over the form element’s state

Links

React PropTypes

Installation

npm add prop-types

Example

Component.propTypes = {
  anyProp: PropTypes.any,
  booleanProp: PropTypes.bool,
  numberProp: PropTypes.number,
  stringProp: PropTypes.string,
  functionProp: PropTypes.func,
};

Links

React-router-dom

  • Routing takes place as App is rendering
  • React Router keeps UI in sync with URL
  • Component rendering

Installation

npm install react-router-dom

Import

import { BrowserRouter as Router } from 'react-router-dom';
import { Switch, Route } from 'react-router-dom';
import { Link, NavLink } from 'react-router-dom';

index.js

ReactDom.render(
  <Router>
    <App />
  </Router>,
document.getElementById(“root”)

App.js

<Switch>
<Route exact path=”/” component={Home} />
    <Route path=”/pokedex” component={Pokedex} />
</Switch>

Navigation.js

<Link exact to=”/”>Home</Link>
<NavLink to=”/home”>
Home
</NavLink>

Links

React Testing Library

Links

Sass & SCSS

  • Systematically awesome stylesheets
  • Stylesheet language compiled to CSS

Preprocessing Watch individual file with the --watch flag for automatic re-compilation when changes are saved

sass --watch input.scss output.css
#  Example:
sass --watch ./styles.sass ./css/styles.css

Watch directory with the --watch flag for automatic re-compilation when changes are saved

sass --watch app/sass:public/stylesheets

Links

Storybook

  • Tool for developing UI components independently
  • Storybook is a collection of stories
  • Each story represents a single visual state of a component
  • A story is a function that returns something that can be rendered to screen

Installation

Automatic setup inside root directory of Create React App

npx -p @storybook/cli sb init

Automatic setup using Create React App

npx -p @storybook/cli sb init --type react_scripts

Manual setup

  1. Add dependencies
# Add @storybook/react
npm install @storybook/react --save-dev
# Add react, react-dom, @babel/core, and babel-loader
npm install react react-dom --save
npm install babel-loader @babel/core --save-dev
  1. Add npm script to package.json
{
"scripts": {
  "storybook": "start-storybook"
  }
}
  1. Create the main file at .storybook/main.js to load stories
module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

module.exports = {
  stories: ['../src/components/**/*.stories.js'],
};

  1. Create ../src/index.stories.js file to write stories

  2. Run Storybook

npm run storybook

Example

import React from 'react';
import Navigation from '../components/Navigation';

export default {
  title: 'Navigation',
};

export const Text = () => <Navigation />;

Addons

Addon Storysource

Installation

npm i @storybook/addon-storysource -D

Add configuration to .storybook/main.js

module.exports = {
  addons: ['@storybook/addon-storysource'],
};

Addon storybook-formik

Installation

# -D stands for --save-dev -> add to devdependencies
npm i storybook-formik -D

Register addon in .storybook/addons.js

import 'storybook-formik/register';

Links

Styled components

  • Library for component based styling in React
  • styled as object

Installation

npm install styled-components

Import

import React from 'react';
import styled from 'styled-components';

Example

// Standard with nested styling
export default function Navigation() {
  return <StyledNavigation />;
}

const StyledNavigation = styled.nav`
  width: 100px;
  height: 100px;
  background: teal;

  p {
    background: hotpink;
  }
`;

// Using props to reuse component with new style
import React from 'react';
import styled from 'styled-components';

export default function Navigation() {
  return <StyledNavigation width={400} border='1px' />;
}

const StyledNavigation = styled.nav`
  width: ${(props) => props.width || 200}px;
  height: 100px;
  background: teal;
  border: ${(props) => props.border || '5px'};
`;

GlobalStyles.js

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
  box-sizing: border-box;
  }
`;

index.js

import React from 'react'
import GlobalStyles from './GlobalStyles'

ReactDom.render(
  <Router>
    <GlobalStyles />
      <App />
  </Router>,
document.getElementById(“root”)

Links

Testing

Links

uuid

  • universally unique identifier
  • important to create unique keys for persistent objects
  • UUIDs are an octet string of 16 octets (128 bits)
  • UUIDs are standardized by the Open Software Foundation (OSF)

Installation

npm install uuid

Import

import { v4 as uuidv4 } from 'uuid';
uuidv4();

Links

Vue

  • Progressive javaScript framework: server-side application Vue part "injection"
  • Approachable, versatile, performant, maintainable, testable
  • Virtual DOM
  • Reusable components
  • Created by Evan You (former Google employee)

Installation CLI

npm install -g @vue/cli

Setup new project

vue create [project-name]
# Manually select features such as formatting, linting, stylesheets, by selecting "Manually select features"

Links

Yup

  • Object schema validation
  • 3rd party library
  • Small enough for the browser and fast enough for runtime usage

Installation

npm install yup --save

Import

import * as Yup from 'yup';

Links

.gitignore (no create-react-app)

node_modules.DS_Store;
vscode;
dist.cache;

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment