Five users for the Spread Operator in JavaScript

5 Uses for the Spread Operator

Copy array

let arr = [1,2,3,4]
let copy = [...arr]
// copy is [ 1, 2, 3, 4 ]

Concatenate arrays

let arr1 = [1,2,3,4]
let arr2 = [5,6,7,8]
let concat = [...arr1, ...arr2]
// concat is [ 1, 2, 3, 4, 5, 6, 7, 8 ]

Pass arguments as arrays

function dev(x, y, z) { }
var args = [0, 1, 2]
dev(...args) // call function

Copy Object

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// obj is {a: 1, b: 2, c: 3}

Merge Object

let obj1 = {a: 1, b: 2, c: 3}
let obj1 = {d: 4, e: 5, f: 6}
let merge = {...obj1, ...obj2}
// merge is {a: 1, b: 2, c: 3, d: 4, e: 5, f: 6}

Find more details on the source link above, thanks to @laurie for putting this list together https://dev.to/laurieontech

Transform black into any given color with CSS filters

How to transform black into any given color using only CSS filters:

My question is: given a target RGB color, what is the formula to recolor black (#000) into that color using only CSS filters?

For an answer to be accepted, it would need to provide a function (in any language) that would accept the target color as an argument and return the corresponding CSS filter string.

There are only a few number of SO questions which are worth reading and this one is for sure one of them, I really enjoyed reading the thought process from the author’s point of view and how complex this feature it is even though it seems so simple and something that should be readily available.

Instagram filters with CSS3 Effects

Instagram filters recreated using CSS3 filter effects

Ever wanted to recreate Instagram filters on the fly using CSS3 (without needing to open a graphics program)? Now you can!

Using the new filters feature in CSS3, you can recreate all of the Instagram filters. I have, with varying levels of success, recreated every Instagram filter. They’re definitely not perfect, but they show how CSS3 can be used to do things that weren’t possible before. The CSS code is included with each filter, so you can use them as is or play around for more accuracy.

It is amazing that just a few years ago you had to fire up Photoshop or a similar product in order to produce effects like those in Instagram, but thanks to how far the web has come and the tools available to browsers you only need your imagination to create something similar.

Blank Target vulnerability

A developer that opens a new window or tab with target=‘_blank’ is exposing their users to a little known vulnerability which deals with a malicious code taking ownership of the new opened window.

This can be easily solved by appending rel=“noopener noreferrer” to the anchor tags. With that said the URLs should look like this:

<a href="newpage.html" target="_blank" rel="noopener noreferrer">New Page</a>