ES6 VAR, LET and CONST explained!

ES6 (ES2015) is one of the buzzwords in JavaScript nowadays. There are a lot of new features in it. Let’s watch the var, let and const!

What is a VAR?

VAR can be used for anything everywhere

The var keyword can be used everywhere. You can put in all kinds of information. Strings, Int, Object, Array, Function. That is great, well most of the time!

Variables can be used for everything, but also everywhere. You can access a var from inside a function, object, if-else statement, really everywhere! That maybe sounds cool, but can have a big effect on the performance of a website or web-application.

Globally scoped

A var is or can be globally scoped. Cool to access everything from inside anything! But is that good? With the coming of ES6 there are a few alternatives ahead. There are called let and const. They have different behavior than var. But let’s talk about that later.

Can be changed later

A variable can be defined with a string, later on, reassigned to an integer and later it could be a function. That is a power but also a weakness.

var globalVariable;

globalVariable = 'I Love Pizza!';

console.log(globalVariable); // Will be 'I Love Pizza!'

Read more

The JavaScript array.forEach() method doesn’t return anything!

A while ago working on a cool Angular2 project I discovered some weird behavior, weird because I didn’t realise it was working that way.

I was checking if an id property of an object, was already in an array. If it was, it won’t push it again. It is wasn’t in there, it could push the object in the array.

It doesn’t seem that difficult. So I created a little function so I could check it from anywhere in my application. (take into account that the code is from an Angular2 Typescript application.)

private doesFormExistsInSubmittedArray(list, val) {
    if (list !== undefined && list.length > 0) {
        list.forEach(function (item, index, arr) {
            if(item.formObject.id === val.id) {
                return true;
            }
        });
    }
    return false;
}

Read more

Handle PostCSS (with plugins) with NPM scripts

PostCSS becomes more and more popular these days. And yeah, why should we develop in these weird file extensions for Sass, Scss or Less. With PostCSS, we just stick to CSS extensions.

That’s what I love about PostCSS! There are currently loads of plugins for to do the same magic as we were used to in Sass/Scss! PreCSS is my favorite! You can use Variables, Conditionals, Loops, Mixins, Extends, Imports, Property lookup, Root and so much more! Autoprefixer and Color functions are also very cool!

You can choose your favorite tool/task runner to handle PostCSS. Gulp, Grunt, PostCSS CLI, NodeJS. But more and more people want to stick to NPM scripts, people like me!

I like the idea to do everything with NPM scripts. Just use your already created package.json, drop in your CLI commands in the scripts object, and of we go!

Step 1
Let’s create a package.json (if you didn’t have that already) with npm init.

Step 2
Start with a few commands to install the dependencies:
npm install postcss normalize-css precss --save-dev. And install postcss-cli globally on your system: npm install postcss-cli.

Step 3
After the installation create a CSS file (style.css) in a folder CSS.

Step 4
On the first rule of the CSS file set this @import: @import "../node_modules/normalize-css/normalize.css";.

Step 5
Let’s create an postcss-options.json.

Step 6
Add this content to the postcss-options file:

{
"use": ["precss"],
"input": "./CSS/style.css",
"output": "./CSS/final.css",
"local-plugins": true
}

Read more