Frontend JS - atabegruslan/Notes GitHub Wiki

<object>

Generic way to embed media. https://www.geeksforgeeks.org/html-object-tag/

Embed PDF

https://stackoverflow.com/questions/291813/recommended-way-to-embed-pdf-in-html

Image zoom view

Tool: https://github.com/openseadragon/openseadragon

Result: https://www.raremaps.com/gallery/detail/84631/medieval-mappa-mundi-apographon-descriptionis-orbis-ter-anonymous

<noscript>

When JS isn't supported. https://www.w3schools.com/tags/tag_noscript.asp

Boilerplates (scaffolder)

With Initializr

Initializr website: http://www.initializr.com/
You can chose choose Modernizr, Shivs ... here

Ability-wise: Modernizr includes shiv. They are used to detect browser differences.

https://stackoverflow.com/questions/8275580/modernizr-vs-html-shiv

The "no-js" class

When Modernizr runs, it removes the "no-js" class and replaces it with "js".

https://stackoverflow.com/questions/6724515/what-is-the-purpose-of-the-html-no-js-class

With Yeoman

npm install -g yo
npm install -g generator-webapp

cd into project folder, yo
choose eg webapp
choose what u wanna include: eg modernizr ...

https://www.youtube.com/watch?v=gKiaLSJW5xI&t=317s

Node.js & NPM (package manager)

https://github.com/atabegruslan/Notes/wiki/Backend-JS#nodejs--npm

Other frontend tools

Yarn (package manager)

Bower (package manager)

  1. Install Node
  2. Run in terminal from any directory: npm install -g bower
  3. Run in terminal from project directory: bower install jquery, bower list --paths

Grunt (automatic task runner)

Gulp (automatic task runner)

Have Node.js first

npm install --global gulp-cli # Install Gulp
mkdir my-project # Make project
cd my-project
npm init
mkdir sass
touch index.html
touch sass/one.scss
touch sass/two.scss
npm install --save-dev gulp # Install Gulp into project
touch gulpfile.js
npm install sass
npm install gulp-sass
npm install gulp-concat-css
npm install gulp-uglifycss

gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
const concatCss = require('gulp-concat-css');
var uglifycss = require('gulp-uglifycss');


gulp.task('sass', function() {
  return gulp.src('./sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concatCss('all.css'))
    .pipe(gulp.dest('./css'));
});

gulp.task('css', function () {
  return gulp.src('./css/*.css')
    .pipe(uglifycss({
      "uglyComments": true
    }))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('run', gulp.series('sass', 'css'));

gulp.task('watch', function(){
  gulp.watch('./sass/*.scss', gulp.series('sass'));
  gulp.watch('./css/*.css', gulp.series('css'));
});

gulp.task('default', gulp.series('run', 'watch'));

In index.html make <link rel="stylesheet" href="/dist/all.css">

gulp

Compass (automatic task runner)

https://github.com/Ruslan-Aliyev/compass_sprites

Templating Engines

Twig

Jade/Pug

Smarty

Web worker

Performance

⚠️ **GitHub.com Fallback** ⚠️