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

Frontend Workflow #2: CSS automation with GulpJS

This post originally published on the Mr Frontend Community Blog!

This is the second episode of  the “Frontend Workflow” series. In this episode, I will use GulpJS, some plugins and Browser-sync to show you how you can automate your CSS development in your workflow.

Read more