Perl6::Math::Matrix (Part 3: When to Use MMD)

In this guide about what to consider when writing a Perl 6 module, we (after Part 1 and Part 2) will reach Perl 6’s great power of signatures. They enable a feature that is very often used in Perl 6 (internally and externally). Here are I look at when the usage of MMD makes the most sense.
In short: Multi Method Dispatch allows you to have multiple methods or subs with the same name but different signatures. When you call the method, the compiler decides according to the type and number of arguments, which actual method is allowed to run (and if no signature fits the call, an error will be thrown — same as with any malformed call). But this is just the technical side. There is also the software engineering/API side. When is it useful to combine different functionalities under the same name and when does it just muddy the waters? To clear up that question, I want to look at three (+1) examples from the module at hand.

Link: https://dzone.com/articles/perl6mathmatrix-part-3-when-to-use-mmd

AngularJS, Basic to Expert: Day Three

Introduction:
In the previous articles of AngularJS from basic to expert Day One and Day Two, we learned what AngularJS is, and we looked at some basics of AngularJS and AngularJS expressions and directives and used AngularJS in our demo application.
You can check the previous articles here:

Link: https://dzone.com/articles/angularjs-basic-to-expert-day-three?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

How to Bundle a Simple Static Site Using Webpack

Webpack is all the rage right now. It has over 30,000 stars on GitHub and has been embraced by some of the big guns in the JavaScript world, such as the React and Angular.
However, you don’t need to be working on a large-scale project to take advantage of Webpack. Webpack is primarily a bundler, and as such you can also use it to bundle just about any resource or asset you care to think of.
In this article, I’m going to show you how to install and configure Webpack, then use it to create a minified bundle for a simple static site with a handful of assets.
But Why Would You Want to Do That?
Good question. Glad you asked!
One of the primary reasons for doing this is to minimize the number of HTTP requests you make to the server. As the average web page grows, you’ll likely include jQuery, a couple of fonts, a few plugins, as well as various style sheets and some JavaScript of your own. If you’re making a network request for each of these assets, things soon add up and your page can become sluggish. If you include all of the above in one bundle however, that problem disappears.
Webpack also makes it easy to minify your code, further reducing its size, and it lets you write your assets in whatever flavor you desire. For example, in this article I will demonstrate how to have Webpack transpile ES6 to ES5. This means you can write JavaScript using the latest, most up-to-date syntax (although this might not be fully supported yet), then serve the browsers ES5 that will run almost everywhere.
And finally, it’s a fun learning exercise. Whether or not you employ any of these techniques in your own projects is up to you, but by following along you’ll get a firm understanding of what Webpack does, how it does it and whether it’s a good fit for you.
Getting up and Running
The first thing you’ll need is to have Node and npm installed on your computer. If you haven’t got Node yet, you can either download it from the Node website, or you can download and install it with the aid of a version manager. Personally, I much prefer this second method, as it allows you to switch between multiple versions of Node and it negates a bunch of permissions errors, which might otherwise see you installing Node packages with admin rights.
We’ll also need a skeleton project to work with. Here’s one I made earlier. To get it running on your machine, you should clone the project from GitHub and install the dependencies.
git clone https://github.com/sitepoint-editors/webpack-static-site-example
cd webpack-static-site-example
npm i

This will install Slick Slider and Lightbox2 — two plugins we’ll be using on the site — to a node_modules folder in the root of the project.
After that you can open index.html in your browser and navigate the site. You should see something like this:

If you need any help getting with any of the steps above, why not head over to our forums and post a question.
Introducing Webpack to the Project
The next thing we’ll need to do is to install Webpack. We can do this with the following command:
npm i webpack –save-dev

This will install Webpack and add it as a devDependency to your package.json file:
“devDependencies": {
"webpack": "^3.2.0"
}

Next we’ll make a dist folder which will contain our bundled JavaScript.
mkdir dist

Now we can try and run Webpack from the command line to see if it is set up correctly.
./node_modules/webpack/bin/webpack.js ./src/js/main.js ./dist/bundle.js

What I am doing here is telling Webpack to bundle the contents of src/js/main.js into dist/bundle.js. If everything is installed correctly, you should see something like this output to the command line:
Hash: 1856e2c19ecd9b2d9026
Version: webpack 3.2.0
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 2.67 kB 0 [emitted] main
[0] ./src/js/main.js 192 bytes {0} [built]

And Webpack will create a bundle.js file in the dist folder. If you have a look at that file in your text editor of choice, you’ll see a bunch of boilerplate and the contents of main.js at the bottom.
Automating Our Setup
Now if we had to type all of the above into the terminal every time we wanted to run Webpack, that’d be quite annoying. So let’s create an npm script we can run instead.
In package.json, alter the scripts property to look like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack ./src/js/main.js ./dist/bundle.js"
},

Notice how we can leave out the full path to the Webpack module, as when run from a script, npm will automatically look for the module in the node_modules folder. Now when you run npm run build, the same thing should happen as before. Cool, eh?
Create a Webpack Configuration File
Notice how we’re passing the path of the file to bundle and the path of the output file as arguments to Webpack? Well, we should probably change that and specify these in a configuration file instead. This will make our life easier when we come to use loaders later on.
Create a webpack.config.js file in the project root.
touch webpack.config.js

And add the following code.
module.exports = {
entry: ‘./src/js/main.js’,
output: {
path: __dirname + ‘/dist’,
filename: ‘bundle.js’
}
}

And change the npm script to the following:
"scripts": {

"build": "webpack"
},

In webpack.config.js we are specifying the entry point and output location of the bundle as properties of the configuration object, which we are then exporting . Run everything again and it should all work as before.
Continue reading %How to Bundle a Simple Static Site Using Webpack%

Link: https://www.sitepoint.com/bundle-static-site-webpack/

Introduction to FuseBox — a Faster, Simpler Webpack Alternative

Webpack has arguably become the de facto JavaScript module bundler, but it has a reputation for being confusing and difficult to learn. In this article I want to present a faster, simpler Webpack alternative — FuseBox. FuseBox is a next generation ecosystem of tools that provides for all of the requirements of the development lifecycle. […]
Continue reading %Introduction to FuseBox — a Faster, Simpler Webpack Alternative%

Link: https://www.sitepoint.com/fusebox-faster-webpack-alternative/

ECMAScript Modules in Browsers

As Jake Archibald says, they are starting to land! The support landscape is already:

Safari 10.1.
Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags.
Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config.
Edge 15 – behind the Experimental JavaScript Features setting in about:flags.

There are plenty of weird gotchas to be aware of, like minor syntax things that are intentionally not supported, and the order of script execution.
We covered Stefan Judis’s …

ECMAScript Modules in Browsers is a post from CSS-Tricks

Link: https://jakearchibald.com/2017/es-modules-in-browsers/

ES6 modules support lands in browsers: is it time to rethink bundling?

Modules, as in, this kind of syntax right in JavaScript:
import { myCounter, someOtherThing } from ‘utilities’;
Which we’d normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge.
It’s designed to support progressive enhancement, as you can safely link to a bundled version and a non-bundled version without having browsers download both.
Stefan Judis shows:

<script src=”app/index.js" type="module"></script>
<!– in case ES6 modules …

ES6 modules support lands in browsers: is it time to rethink bundling? is a post from CSS-Tricks

Link: https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/

The Future of Trust in Node.js Dependencies

At Node.js Interactive 2016 in Austin, TX, we were able to announce an entirely new product – NodeSource Certified Modules™ – in our Day One keynote with Joe McCann. Your reception has been phenomenal, only enhancing our own excitement and dedication to Certified Modules. A big shout out to everyone who signed up, provided feedback, and helped us tune the user experience.
Today, we are happy to make NodeSource Certified Modules generally available. 

Link: https://dzone.com/articles/the-future-of-trust-in-nodejs-dependencies-1?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev

Angular Modules vs ES6 Modules

I often see people being confused when it comes to understanding Angular Modules vs. ES6 Modules. This happens especially for newcomers in the JavaScript and front-end development ecosystem and immediately get confronted with both of them. Here’s a short article that hopefully sheds some light on the matter.
Contents are based on Angular version 2+.

Link: https://dzone.com/articles/angular-modules-vs-es6-modules?utm_medium=feed&utm_source=feedpress.me&utm_campaign=Feed%3A+dzone%2Fwebdev