Notes related to front-end development.

Resources

• Standard JS - JavaScript Standard Style

  • Rules for writing JavaScript.

• You Don’t Need jQuery

• JavaScript Plugin for Web Forms
• JavaScript Encyclopedia

Tools

• Lerna - Manage JavaScript projects with multiple packages
• Colmena - Colmena - CMS system.

Performace tools

• Calibre
• Speedcurve
• Bundlesize
• httparchive.org - beta.httparchive.org - data/insights

Ionic

• Include font-awesome fonts in project.

  • FontAwesome in Ionic

    • Install FontAwesome - npm install --save font-awesome

    • Create script to copy fonts into www/assets/fonts

    • Set path to fonts in SCSS - $fa-font-path: /assets/fonts; in scr/app/app.scss;

    • https://forum.ionicframework.com/t/adding-font-awesome-to-rc0/65925/3 - comments for using with sass to convert to ion-icon.

Fixing Issues

• “SyntaxError: Unexpected keyword ‘const’. Const declarations are not supported in strict mode.”
  • Resolution: Safari/Babel/Webpack Const declarations are not supported in strict mode #922 - Don’t exclue node_modules when building with webpack.
• “ReferenceError: regeneratorRuntime is not defined”
• Resolution: Async Functions Producing Error - Include transform-runtime to plugins seems to work.

NPM Notes

• Update npm modules
  • npm outdated - list of outdated files
  • npm install {} {} - install list of outdated files.

Other

• Normalizr - create schema to normalize the result of a returned schema.

Captcha

let getCaptcha = new Promise(
    function(resolve) {
            let captcha = true;
            resolve(captcha);
        }
)

export default getCaptcha;

import Vue from 'vue'
import App from './App.vue'
import getCaptcha from './recaptcha'

window.captchaCallback = function() {
    console.log('called')
    getCaptcha.then(function(fulfilled){

            grecaptcha.render('html_element', {
                'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'
            });

        })
        .catch(function(error){
            console.log(error);
        });
}


new Vue({
  el: '#app',
  render: h => h(App)
})

Axios

• Issue: Axios is not showing all headers of response
  • Set Global Axios Headers
  • Mozilla CORS

Fingerprint2 - use a quick and dirty way to track submissions.

• Wrap code in a promise.

  import Fingerprint2 from "fingerprintjs2";
  
  const getFinger = new Promise((resolve) => {
  
    new Fingerprint2().get((result) => {
      resolve(result);
    });
  });
  
  export default getFinger;
  

• In Component - call a function from the promise and the set local var for finger.

  getFinger.then( (result) => this.getInitHeaders(result) );
  

Notes for github

• https://github.com/catenare/proto-app-demo
  • vue
  • awesome-typescript-loader
  • Production options
  • Marvel css prototype
• https://github.com/catenare/basic-typescript-project
  • using webpack, typescript, faucet and tape
• https://github.com/catenare/foundation-cli-template-site
  • Foundation 6 template with typescript
• https://github.com/catenare/webpack-starter
  • Basic webpack template with leaflet

Shared files

• tslint.json

  {
    "defaultSeverity": "error",
    "extends": [
        "tslint:recommended"
    ],
    "jsRules": {},
    "rules": {},
    "rulesDirectory": []
  }
  

• tsconfig.json

  {
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
       "lib": [
         "es2016", "dom"
       ],
       "allowSyntheticDefaultImports": true,
       "experimentalDecorators": true,
       "emitDecoratorMetadata": true
    }
  }
  

• postcss.config.js

  module.exports = {
    plugins: {
      'postcss-cssnext': {}
    }
  }
  

• .eslintrc.json

  {
    "extends": "standard"
  }
  

• .eslintignore

  dist
  node_modules
  

• .babelrc

  {
    "presets": [
      "env",
      "react",
      "stage-3"
    ],
    "plugins": [
      "transform-class-properties",
      "transform-decorators",
      "transform-react-constant-elements",
      "transform-react-inline-elements"
    ]
  }
  

Other

• npm-run-all - cli options

Notes for eslint

• Disable eslint rules

Getting hex codes for FontAwesome to work.

• font-family should be “FontAwesome”

    &::before {
      font-family: "FontAwesome";
      content: "\f00d";
    }
  

• List of hex codes for font-awesome: FontAwesomeSnippet

Material Design

• Material Design Web

Notes for material.angular.io

• Using with autocomplete
  • displayWith issue: don’t have access to the host component.
    • Issue 3308
    • Issue 3359
  • Fix/workaround below.

      get displayName() {
        return (val) => val ? this.accounts.filter( (account) => account.account_uuid === val)[0].full_name : undefined;
      }
    

JavaScript Project Startup

Basic setup

• .editorconfig

  root = true
  
  [*]
  indent_style = space
  indent_size = 2
  end_of_line = lf
  charset = utf-8
  trim_trailing_whitespace = true
  insert_final_newline = true
  

• Setup git repository

• touch .gitignore
• git init
• .gitignore

  node_modules
  dist
  .vscode/
  .idea/
  

NPM Setup

1. npm init -f - create package.json

2. Setup eslint

   • ./node_modules/.bin/eslint --init
   • Use a popular style guide
   • Standard
   • JSON

3. Setup tslint

   • ./node_modules/.bin/tslint --init

4. Setup tsconfig.json

   • ./node_modules/.bin/tsc --init

Npm Scripts

  "scripts": {
    "start": "npm-run-all -n -p dev:server",
    "dev": "npm-run-all -n -p dev:server lint:watch",
    "dev:server": "cross-env webpack-dev-server --history-api-fallback --color --progress --hot --inline",
    "build": "npm-run-all -s build:webpack",
    "build:webpack": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "lint": "esw webpack.config.* src --color",
    "lint:watch": "npm run lint -- --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

---

Last update: April 13, 2020 16:50:19