Free design resources for Web Developers...

Deepayan Mukherjee — Wed, 30 Jun 2021 17:30:42 +0000

Pexels

The best free stock photos & videos shared by talented creators
Website : https://www.pexels.com/

Landing Stock

Landing Stock is a niche site providing free stock photos that are suitable for your website landing page. Created by London-based product designer Craig Barber, it features only high-quality, clean, and minimalistic photos
Website : https://www.landingstock.com/

StockSnap

With a large selection of free high-definition stock photos, StockSnap offers a valuable resource to web designers, bloggers, and content curators
Website : https://stocksnap.io/

Photo Creator

CREATE YOUR REALISTIC PHOTOS IN MINUTES. Choose from thousands of models, objects, and backgrounds to perfectly tell any story
Website : https://icons8.com/mega-creator

Drawkit

DrawKit is a collection of free, beautiful, customizable MIT licensed SVG illustrations in two styles, to use on your next website, app, or project
Website : https://www.drawkit.io/

Ionicons

Ionicons are premium icons for use by designers in web, iOS, Android, and desktop apps. Built by the Ionic Framework team, they're all free and open source
Website : https://ionic.io/ionicons

Pixlr

The Pixlr Editor is similar to Photoshop, Pixlr Express is perfect for quick fixes, and Pixler O-Matic features easy-to-use pre-made filters that can be applied to photos
Website : https://pixlr.com/

Coolors

The super fast color schemes generator!
Create the perfect palette or get inspired by thousands of beautiful color schemes
Website : https://coolors.co/

Dribbble

Discover the world’s top designers & creatives
Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals
Website : https://dribbble.com/

Type Genius

The site makes it simple to find the perfect font combination, offering multiple suggested pairings for any typeface selected. It also provides real-world examples of combos used on other websites
Website : https://webdesignledger.com/type-genius-webapp/

Map(), Filter() and Reduce()

Deepayan Mukherjee — Fri, 04 Jun 2021 06:55:15 +0000

In this blog we will be discussing about some higher order Array methods which will be of immense use while working on any project and will up your vanilla JavaScript game.

Map:

map() is an array method that is used to iterate over an array and return a new array with the results of the function provided inside it

Key Points:

map() takes in a callback/function
map() always returns a new array be it a empty array
Does not change the size of array(unlike filter)
Always uses values from original array when making new one, but you don't have to use them if you don't want to but you will always have access to them

Now, we have an array of objects people where each object has a id, name, age and job

const people = [
  {
    id: 1,
    name: 'susan smith',
    age: 24,
    job: 'web developer',
  },
  {
    id: 2,
    name: 'anna johnson',
    age: 21,
    job: 'web designer',
  },
  {
    id: 3,
    name: 'peter jones',
    age: 32,
    job: 'intern',
  },
  {
    id: 4,
    name: 'bill anderson',
    age: 27,
    job: 'web developer',
  },
]

Example 1:

We want to iterate over people and only print the names

const names = people.map((person)=>{
   return person.name;
})

console.log(names);  //returns ["susan smith", "anna johnson", "peter jones", "bill anderson"]

We make a names array to store our results
We take an iterator named person to iterate over each element of people using map()
Within the arrow function we return the name of every object by accessing each object one at a time using person iterator
We then print the result array names

Example 2:

We want to iterate over people and return the name, age and job as an object

const infos = people.map((person)=>{
   return {
            firstName : person.name,
            age : person.age,
            position : person.job
           };
})

console.log(infos);  /*returns [{
  age: 24,
  firstName: "susan smith",
  position: "web developer"
}, {
  age: 21,
  firstName: "anna johnson",
  position: "web designer"
}, {
  age: 32,
  firstName: "peter jones",
  position: "intern"
}, {
  age: 27,
  firstName: "bill anderson",
  position: "web developer"
}]*/

We make a infos array to store our results
We take an iterator named person to iterate over each element of people using map()
Within the arrow function we return the name, age and job as an object, of every object by iterating each object with person iterator
We then print the result array infos

Filter:

As the name suggests filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback function returns a value that is true

Key Points:

filter() takes in a parameter which is a callback/function
filter() always returns a new array be it a empty array
Changes the size of array as it returns an item only if the callback function returns true
If none of the item in the array satisfies the given condition then filter will return an empty array but if all the items satisfies the condition then all items in array will be returned

We will again take the same array people to understand how filter works

const people = [
  {
    id: 1,
    name: 'susan smith',
    age: 24,
    job: 'web developer',
  },
  {
    id: 2,
    name: 'anna johnson',
    age: 21,
    job: 'web designer',
  },
  {
    id: 3,
    name: 'peter jones',
    age: 32,
    job: 'intern',
  },
  {
    id: 4,
    name: 'bill anderson',
    age: 27,
    job: 'web developer',
  },
]

Example:

We want to iterate over people and only print the detail of employees having job as web developer

const webDevelopers = people.filter((person)=>{
   if(person.job == 'web developer'){
      return person;
   }
})

console.log(webDevelopers);  /*returns [{
  age: 24,
  id: 1,
  job: "web developer",
  name: "susan smith"
}, {
  age: 27,
  id: 4,
  job: "web developer",
  name: "bill anderson"
}]*/

We make a webDevelopers array to store our results
We take an iterator named person to iterate over each element of people using filter()
Within the arrow function we return the items that satisifies the condition which here is job being web developer
We then print the result array webDevelopers

Reduce:

The reduce() method reduces the array to a single value.It does not work for array elements without any value

Key Points:

reduce() takes in a callback/function
reduce() reduces our array and returns a single value which can be anything(number, array, object)
The callback function takes in 2 parameters :
- First parameter - total of all calculations('accumulator')
- Second parameter - iterator('current')

Now the parameters can be named anything you want but a common practice is to name them accumulator and current

We will again take the same array people with an added attribute salary to understand how reduce() works

const people = [
  {
    id: 1,
    name: 'susan smith',
    age: 24,
    job: 'web developer',
    salary: 500,
  },
  {
    id: 2,
    name: 'anna johnson',
    age: 21,
    job: 'web designer',
    salary: 300,
  },
  {
    id: 3,
    name: 'peter jones',
    age: 32,
    job: 'intern',
    salary: 100,
  },
  {
    id: 4,
    name: 'bill anderson',
    age: 27,
    job: 'web developer',
    salary: 500,
  },
]

Example:

We want to iterate over people and print the total amount of salary of all the employees

const totalSalary= people.reduce((acc,curr)=>{
  acc += curr.salary;
  return acc;
},0)

console.log(totalSalary);//returns 1400(sum of salaries)//

We make a totalSalary variable to store our results
We take an iterator named curr to iterate over each element of people and an accumulator acc to store the sum of salaries
Within the arrow function we return acc that has the total sum of salary of all the employees
We then print the result totalSalary

DEV Community: Deepayan Mukherjee

Free design resources for Web Developers...

Pexels

Landing Stock

StockSnap

Photo Creator

Drawkit

Ionicons

Pixlr

Coolors

Dribbble

Type Genius

Map(), Filter() and Reduce()

Map:

Key Points:

Example 1:

Example 2:

Filter:

Key Points:

Example:

Reduce:

Key Points:

Example:

Thanks for reading!