Raymon Schouwenaar

I'm Ray a Dutch Front-end Developer, and I love to share my passion for HTML, CSS, JavaScript, and Tooling!

Find duplicate property values in an Array of Objects in JavaScript

Finding duplicate property values in an Array of Objects in JavaScript is not always that simple if you thought, so let’s dive in! A few days ago I needed to work this out, so I thought let’s write it down, so I could use it later again! Array of Objects Let’s define an example Array of Objects, where each Object is a user: var myArray = [ {id: 1, name: 'Foo Bar', email: 'foo@bar.

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.

JavaScript Basics: Add something to the beginning of an array in JavaScript

How to add something (Object, Array, String, Number) to an Array in JavaScript. Well that is simply done with the Array.push() method. var arrayName = ['1', '2', '3']; arrayName.push({ property1: 'First property of Object', property2: ['Array', 'of', 'Items'] }); arrayName.push('Last item'); The result will be: [ '1', '2', '3', { property1: 'First property of Object', property2: ['Array', 'of', 'Items'] }, 'Last item' ] That was simple! Right?

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.

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!

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.

How to update $scope or vm with an eventlistener in AngularJS

Today I had such an annoying problem with AngularJS. I couldn’t understand why the $scope didn’t update with an eventlistener! In my case, it is vm (if you want to know why to choose vm instead of $scope, check out this of John Papa) that didn’t update. And it was only updating after my mouse left the browser and clicking on the other program. Really weird issue! So I thought I should do $scope.

Frontend Workflow #1: NPM, NodeJS, GulpJS, Bower & Git (video)

This post originally published on the Mr Frontend Community Blog! This is the first episode about NPM, NodeJS, GulpJS, Bower and Git. There will be more episodes the next coming weeks. In this video, I show how to install all the tools I use for my workflow. I did this screencast on a mac, but on a windows machine will also work (almost) the same.

When I was a Junior Frontend Developer I needed a mentor or coach!

There was a time when I was a Junior Frontend Developer and needed a mentor/coach. This is not what I thought when I started my career as Frontend Developer, this is what I´ve been thinking about the past weeks. Side note: In my opinion is a Junior Frontend Developer, someone who just started with doing Frontend Development or someone who has a little experience with HTML, CSS, but need some guidance.

5 CSS Tips for Junior Frontend Developers

HTML & CSS are the basic skills for Frontend Developers. But basic will not always say it is easy to write clean CSS code. So from the things that I’ve learned in all these years as a Frontend Developer, I’ll like to share some tips for writing clean CSS and not spaghetti CSS. 1. Think before you write Think before you write sounds logical. But a lot of Frontend Developers choosing weird class names that don’t make any sense to others, even worse, after a while it doesn’t make any sense to themselves.