Minimal introduction to WebPack

WebPack is a module bundler.

First setup your project to work with node. In your project root, run

npm init

Install webpack locally foreach project. Note: this is the recommended practice. Installing globally locks you down to a specific version of webpack and could fail in projects that use a different version.

npm install --save-dev webpack
npm install --save-dev webpack-cli 

Next create a webpack config file (optional) in the root directory.

touch webpack.config.js

Configure that file (optional). Note: by default this is internally set to production.

module.exports = {
    mode: 'development'
};

Webpack expects ./src/index.js and ./dist/main.js as entry and output points by default. If you need to change this, edit the webpack.config.js and set them up there. See https://webpack.js.org/concepts/ for details.

Change mode: 'production' in webpack.config.js when you want to minimise your project.

Edit your package.json to include webpack in the scripts > build property

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

Make sure your index.html (specified in package.json under main:) or whatever main app file, points to the dist output file.

<script src="dist/main.js"></script>

Export your JavaScript files using the latest ES6 syntax to your default /src/index.js file.

To test your project build, run

npm run build

Note the file created in /dist/main.js.

How to update npm on Windows 8.1

Open PowerShell as Administrator

Find PowerShell: Windows key > Apps (by name) > Windows System (List organiser) > PowerShell

Then right click the PowerShell icon and select Run as Administrator

Execute the 3 commands

Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install -g npm-windows-upgrade
npm-windows-upgrade

I've been using the wrong date delimiters in PHP for JavaScript

So I've been making dates in PHP like this

$dt = new DateTime("2017-07-15");
$date = $dt->format("Y-m-d");

and passing that to JS like this

echo "foo = new Date(\"$date\");";
// returns: Sat Jul 15 2017 00:00:00 GMT+0300 (FLE Summer Time)

and that was working fine in Chrome and Firefox. However, if you try and call foo in Safari, you'll get an invalid date error. This is because Safari doesn't currently support the dash delimiter format. More info.

To avoid this in the future, I need to start remembering to format my dates in php with / instead of - when I'm going to be using it in the web-page. So like this

$dt = new DateTime("2017/07/15");
$date = $dt->format("Y/m/d");

The only thing I can see still needing dashes, would be in URLs. If you need to switch to dashes while in JS, you can do something like .replace(/\//g, "-")

I've been neglecting testing in Safari which is pretty bad. Luckily, you can still download an old version of Safari for Windows, so testing is easy enough.

My essential web development tools, processes, libraries

This post will be continuously updated/revised.

Visualisation

Charts and graphs: https://gionkunz.github.io/chartist-js/

Charts and graphs: http://www.chartjs.org/

Sortable tables: http://tablesorter.com/docs/

Vertical slides: http://alvarotrigo.com/pagePiling/#page1

Front-end customisation

tablecloth.js is a jQuery plugin that helps you easily style HTML tables along with some simple customizations.

List.js adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.

Select 2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

scrollMonitor allows you to receive events when elements enter or exit a viewport.

ScrollReveal - Easy scroll animations for web and mobile browsers.

Parsley is JavaScript form validation library, based on jQuery.

Dev tools

Emmet Re:View - A browser extension for displaying responsive web-pages in a side-by-side views to quickly test how it looks at different resolutions and devices.

MailTrap - Safe email testing for dev teams.

References

Learn Layout teaches the CSS fundamentals that are used in any website’s layout.

Language libraries

The Voca library offers helpful functions to make string manipulations comfortable

Front-end libraries

W3.CSS is a modern CSS framework with built-in responsiveness. It's based on Google's material design, and is extremely light and easy to work with.

Detecting change in state of a group of checkbox elements

Here’s how you can detect the original state of some checkboxes (or radio buttons). So to be clear, it will report if the state has changed and if the state has reverted back to its original state combination. It can be modified for all kinds of input elements and is handy, for example, when you want to offer a user a save option when a change is made to their original configuration.

Fiddle: https://jsfiddle.net/n2fole00/z40bm13g/

<head><script src="https://code.jquery.com/jquery-2.2.0.min.js"></script></head>

<input type="checkbox" name="id_1" id="id_1" value="id_1" checked="checked" />One
<input type="checkbox" name="id_2" id="id_2" value="id_2" />Two
<input type="checkbox" name="id_3" id="id_3" value="id_3" checked="checked" />Three

<br>Same state?: <span id="show">true</span>

<script>

// initial state object 
var initial = $(':checkbox').map(function(){ 
    return this.checked 
});

// detect clicks to checkboxs, radiogroups...
$( ':checkbox' ).click(function() {
    // assign user input to a comparing object 
    var change = $(':checkbox').map(function(){ 
        return this.checked 
    });
    // compare the Objects and output the result
    $('#show').text( 
        JSON.stringify(initial) === JSON.stringify(change)
    );
});

</script>