Skip to content

Notes related to front-end development.

Resources

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

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

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

Notes for eslint

Getting hex codes for FontAwesome to work.

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

Material Design