DEV Community: Ajmal Hassan

Halftone text effect using HTML & CSS

Ajmal Hassan — Thu, 23 Sep 2021 10:16:02 +0000

Long story short, got fascinated with Halftone and took a crack at it...

Drop a ❤️

Sunday Fun: Music Player

Ajmal Hassan — Mon, 24 Aug 2020 06:02:20 +0000

Saw a cool design, opened codepen and the rest was... well...
you tell me.

drop a ❤️ if you like it.

My go to places for beautiful free web templates

Ajmal Hassan — Sun, 05 Jan 2020 17:50:33 +0000

1. Cruip.com

It was purely by accident that I stumbled on to this website and it was long before they started offering paid templates, I've used them in a couple of my projects and found it to be pretty good.

2. Creative-tim.com

While cruip mainly focuses on landing pages, creative-tim has you covered for dashboards and UI kits.

I have scouted around for free templates from other sites but more often than not ran into some licensing issues.

If you know of good websites to get free web templates sans the licensing issues, please let me know in the comments.

[JS bits] Value vs Reference variable assignment

Ajmal Hassan — Wed, 04 Dec 2019 17:34:57 +0000

Assignment is one of the first things we are introduced to while learning JavaScript and it's of paramount importance to understand how Javascript does this to ensure that you write bug free code that doesn't changes values unintentionally.

Let's get down to business

When assignment is performed between two variables and the value that gets assigned is one of the five primitive types (Number, String, Boolean, Null and undefined) then a copy of the actual value is assigned. On the other hand, when the value getting assigned is one of the special types (Array, Function, Object), a reference to the value gets assigned.

So what does this mean for you?

Example Time!

Assignment of primitive type

const num1 = 1;
let num2 = num1;

console.log(num1, num2); // output: 1 1 

num2 = 2;

console.log(num1, num2); // output: 1 2

num1 is assigned a value of type Number and then num2 is assigned num1, since num1 is a primitive type, num2 is set as equal to the value in num1 and is an entirely separate from num1 and so reassigning num2 to 2 has no effect on num1.

Assignment of special type

const person1 = { name: 'John Doe' };
let person2 = person1;

console.log(person1, person2); 
// output: {name: "John Doe"} {name: "John Doe"}

person2.name = "Sam Smith"; // Reassigning person2

console.log(person1, person2); 
// output: {name: "Sam Smith"} {name: "Sam Smith"}

The difference between both types of assignment can be seen clearly, as the reassignment of person2 affects person1 since only the reference of the value in person1 is assigned to person2 as person1 is a special type and not a primitive type.

If left unchecked this could result in unintentional bugs that'll be tricky to debug.

Liked the post? Show some ❤️

Resources

MDN Web Docs — Assignment operators

Remove duplicates from an Array the short & sweet way!

Ajmal Hassan — Fri, 22 Nov 2019 03:28:26 +0000

tldr;

const numbers = [1,2,2,3,3,3,4,4,4,4]
console.log([...new Set(numbers)]) //output:  [1,2,3,4]
// OR
console.log(Array.from(new Set(numbers))) //output: [1,2,3,4]

The long version

lets start by looking at what a Set is...

According to MDN

Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collection.

What we can understand from the above is that Sets are like Arrays, in the sense that they are a collection of values that you can iterate through but the prime difference lies in the fact that is highlighted above i.e

A value in the Set may only occur once;

The above property of a Set is what we will be leveraging to expell duplicates from our array.

Let's now cut to the chase and see some code,

so, consider an array riddled with duplicates

const numbers = [1,2,2,3,3,3,4,4,4,4]

We're going to divide the process into two steps

1. Converting Array to Set

console.log(new Set(numbers)) //output: {1,2,3,4}

As you may have noticed, The duplicates have been eliminated! also another thing to notice is that eventhough Sets and Arrays have their similarities, the notation they use are different.

2. Converting Set to Array

There are two ways of going about this

a) Using `spread operator`

console.log([...new Set(numbers)]) //output: [1,2,3,4]

b) Using `Array.from()`

console.log(Array.from(new Set(numbers))) //output: [1,2,3,4]

Liked the post? Show some ❤️

Resources

MDN Web Docs — Set

DEV Community: Ajmal Hassan

Halftone text effect using HTML & CSS

Sunday Fun: Music Player

My go to places for beautiful free web templates

1. Cruip.com

2. Creative-tim.com

[JS bits] Value vs Reference variable assignment

Let's get down to business

Example Time!

Assignment of primitive type

Assignment of special type

Liked the post? Show some ❤️

Resources

Remove duplicates from an Array the short & sweet way!

tldr;

The long version

Let's now cut to the chase and see some code,

1. Converting Array to Set

2. Converting Set to Array

a) Using spread operator

b) Using Array.from()

Liked the post? Show some ❤️

Resources

a) Using `spread operator`

b) Using `Array.from()`