DEV Community: Azriz Jasni

Have you come across any websites that frustrate you?

Azriz Jasni — Mon, 07 Jun 2021 00:57:05 +0000

Frustrated because of:

Accessibility.
Color contrast.
Font too small, font type was set to comic-sans.
Input does not auto-focus. Usually in sign-in page.
Can't scroll the website since you have ad-block installed.
Cant click disabled element
No shortcut key
Manually key-in a lot of input forms

Fret not, I'll share few things from the list what you can do about it.

1. Can't click disabled dropdown/button

Usually I faced this on client-side validation. The dev implement this to ensure and prevent user doing something funny. For your information, this is only on client side validation and let's be honest here, it's not all developer had a time to work on backend validation. So this is where we can take advantage.

Most of the time the DOM will have similar structure like below.

<!-- copied from w3school -->
<label for='iphone'>Buy iphone now!!</label>

<select id='iphone'>
  <option value='6'>6 (only 50 left)</option>
  <option value='7' disabled>7 (sorry out of stocks)</option>
  <option value='8'>8</option>
</select>

You are dying want to buy iphone 7 but none left. What are we waiting for? just open your devtools and inspect the element using CMDSHIFTc (mac) or CTRLSHIFTc (window/linux), and hover to dropdown. After that, just double-click disable and delete it. Now try to select and submit the form. If there is no error message then we are all good!!. You can use the same trick with disabled button.

Also please note that, the dev could also set the element with user-select: none. So in this case, just delete that css property.

Notes for devs:

You should really consider working on validation in server side.
Write tests, so that you can ship your product with confidence.
For client side, add a second validation in javascript if else statement. It's not a perfect solution, but it just so that naughty user have difficult time.

function submit(e) {
  e.preventDefault()

  if (!isFormValid) {
    showErrorMessage = true
  }

  fetch('your-post-url', { method: 'POST' }).then(console.log)
}

2. Can't scroll the website since you have ad-block installed.

If you happen to face this, we are on the same side. Kinda annoying since the website will usually block the scroll and will have big popup modal. So how to overcome this issue is:

Install this extension
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld.

What you can do with this extension is, you can inject your own javascript or css. So in our case here, usually I notice the dev will add overflow: none to body.

body { overflow: hidden };

So how we can combat this, here are the steps that you can follow:

Make sure you are on the website that you want to overwrite.
Click the extension and click "add new"
It will redirect you to a new tab.
Paste this css into css section

body { overflow: unset !important }

Easy right? Somehow, not all website are structured like this.
Sometimes, it's not the body that is being blocked. It could be 2-3 level children of <body>
Also, to put this to every website it's not friendly. So in that case, change match url to *, it will run to every website. Be warned tho, that this can have side effect tho.

How about the big modal?. You can use something like below to remove the modal.

  document.querySelector('.ads-modal').remove()

But it'll be a little bit tricky, since we don't know when the modal is being shown to us. So I'm gonna share you an approach to auto remove the modal.

Using mutation observer + promise

Basic idea with mutation observer is, if there are any changes happen to element that being observe, it will trigger an event. For example if the attributes, classes, children is being mutate, added, or deleted.

This function is pretty handy and its really use-full especially if you are working on with browser extension. I also happen to use this function in my extension here.

// The original of work is from StackOverflow.
function waitForElm(selector) {
    return new Promise(resolve => {
      if (document.querySelector(selector)) {
        console.log('found')
        return resolve(document.querySelector(selector))
      }

      const observer = new MutationObserver(() => {
        if (document.querySelector(selector)) {
          console.log('found, observer.disconnect()')
          resolve(document.querySelector(selector))
          observer.disconnect()
        }
      })

      observer.observe(document.body, {
        childList: true,
        subtree: true,
      })
    })
  }

// find the element that you want to delete. 
// Once mutation observer found it, it will resolve and run .remove()
waitForElm('.ads-modal').then(x => x.remove())

Notes for devs

You can do a lot of stuff to punish users using ad-block.

You can use this approach by @codingnepal .
Use a MutationObserver to the element you want to observe. Check if the element's attribute or css property is being changed or not, if so then run your custom script.
Also there is some other people will use print mode to read the content before the big modal popup show up. So in this case, write a custom css print media-queries.

  @media print { 
    body.user-has-ads-block * { display: none !important }
  }

But, if you do like aforementioned above, I'm sure you are not getting any visitor soon 🤣.

3. Website does not provide shortcut key

If you are regular visitor to certain website, and you also happen to click a lot certain buttons/actions, then is a good use case where you can create your own shortcut key. We will use same extension here, and below I would like to share a shortcut key to navigate twitter <nav> faster(the left side navigations).

// go to twitter.com, and click "add new" at the extension popup. 
// you might want to change the url match to https://twitter.com/**
// put this script in javascript section
document.body.addEventListener('keyup', function(event) {
  if (event.ctrlKey) {
    const navEle = document.querySelector('nav')
    const noKeyPress = +event.code.replace('Digit', '') // get user key pressed and convert it to number

    // if user click No that larger than menu navigation has, then ignore it.
    if (noKeyPress > navEle.children.length - 1) {
      return
    }

    // click the nav item
    navEle.children[noKeyPress - 1].click()
  }
})

Now that you have set up it, try press CTRL2, it will navigate you to https://twitter.com/explore. You can customise your shortcut to your own preferences.

To summarise

So if you have ever face any frustration with any websites, then just write a script for it. You can also get more creative and write script to:

Automate your stuff. For example, buying hot-deals items which open at a limit time.
Execute buy/sell in trade markets (should do with api tho).
Stomping noobs in game.
For Quality Engineer to test.
Find a loophole in website for security purpose.

Hope you learn something and thank you for your time.

cover image by: https://unsplash.com/@punttim

I've been using vim in total a year, and I'll stick to it.

Azriz Jasni — Sat, 05 Jun 2021 00:06:19 +0000

And heres why:

after you learn vim, you will be less pressing ALT, CMD, CTRL, HOME.
you can achieve so many things with less keystrokes
vim also can record your commands with macros, so be sure to check it out below.

I'll be sharing few highlights from both of the video above that I feel its very handy. Hence, if you just started to learn how to use vim, please watch both of the video first as my examples below is suitable to someone already familiar with basics(Visual, Editing, Deleting, and Navigating).
However, I'll try to make this interactive as much as possible, so that anyone could get start easily. Since both of the video is quite long, I have 1 little tip on how to learn faster on my previous article.

Few notes before we start:

First, I've been editing this article for quite long with nested bullet points, and it doesn't really work. The numbering, indentation and some other stuff not properly align. Hence, I'll be using gist since it works fine. Also average reading will be around ~10min instead of 2min.
All the char is case-sensitive, and please excuse me if I'm using incorrect term/syntax 😅.
Please note that on below example I'll be using a lot of <cursor here> to indicate you need to move your cursor somewhere around there.
If you see <enter> it means you have to press enter. Same goes to <esc>.
Plus, if you see a formatting like this q, it means press the 'q' key in keyboard.
Lastly, I'm using this awesome repo for my vim config.

If you prefer to read in github gist, you can click this link. https://gist.github.com/AzrizHaziq/adcfdbf12c3b30b6523495e19f282b58#file-vim-md

Let's get started then:

Now that you have learn few things here, why not give it a try first? You might have same hobbies like mine (search above 🤣).
Please, don't try to remember all the keys, since vim already have a good mnemonics.
However, there is a lot of things that I didn't mention in both of the videos. Hence, I strongly suggest you to watch it. - I hope my example is easy to understand. Let me know if the example is not clear enough for you/typos or anything in comment. Thank you for reading.

Unpopular opinion on learning approach.

Azriz Jasni — Wed, 02 Jun 2021 08:54:28 +0000

Have you ever seen a scene in Dragon Ball where Goku went on training in other dimension? If you didn't you can watch below

The idea is, you get to train 1year in other dimension which is equal to 1 day in earth. But can we apply the same to our real world?

Yes, but there is trade off.

You can achieve this when watching a video or listening to audio. But, in this article, I would like to share more on video, since I'm rarely listen to any audio(podcast etc...)

Have you notice that Youtube have Playback Speed. You can find this at youtube's gear icon(bottom right side) and then click Playback Speed and it will show you a list of options which is 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2. Try to change it to 2. The video play faster right?.

At first it's quite hard to understand some of the content creator's message or when they communicate and you have to really focus and listen carefully what they said. You can set to 1.25 first and then, after few trials, try set to 2.

Imagine that you are watching a video 30min long, and if you set the speed to 2, averagely you only watched the video in ~15min long instead of 30min and this save you 50% of time.

// formula
videoLength/playbackSpeed = new total video 
30min/2 = ~15min

In other words, if you allocate 1hour to learn everyday, you can actually enjoy learning up to 2hour of content while other people only spend 1hour!!. Unfortunately its not 1 to 1 mapping with Dragon Ball, but this is good enough.

Remember when I mention that there is trade off. Yes, it does have trade off as follows:

Sometime its hard to listen the video clearly.
You might miss the essential part of the video. And usually if I didn't understand it, I had to go back to previous frame multiple times.
You need to have a good internet connections as well as CPU and RAM (I'll explain down below why)
Generally, if you are learning something that is not in your expertise, sometime it's hard to understand few keywords/jargon that they are using. I experience this a lot when learning finance terms. It is very challenging path.
Depend on content creator effort. Creating a content it's not an easy task. It require huge passion to create a video. (Please thumbs up creator's video, they'll feel appreciated)
Can't really rely everything you learn in youtube. Might be misleading. Hence, still need to have other resources.

However, I believe that, the PRO out-weight the CONS:

Save you a lot of time and you can spend learning other things as well.
If you didn't understand a word in a video, you can just search another video with the same content. You might be able to understand the next one.
Huge benefit if someone who would like to sharpen their practical skill. Cooking, sewing, renovate, makeover room to name a few. In some cases, you don't really need to hear the audio at all.

Lastly, this is just my opinion and do give it a try. Who know you might like it.

Now that we are done with theories let proceed to, how behind the scene is done with Javascript.

Usually a video will render in this kind of element in DOM, while for audio is <audio>

// taken from youtube html and stripped few things
<video class="video-stream html5-main-video" src="blob:https://www.youtube.com/...id"></video>

So how do we change the playback speed rate? Every <video> and <audio> element exposed a playbackRate getter and setter. You can set this to any speed. 3, 4, 5, 6 and so on... its your call. Just be aware that, higher the number might hang your browser since its your browser doing the work.

Let's get hand dirty with javascript. Open the console in Devtool and paste this. It will find all video element and set the playbackRate to 2. This is useful if the website still didn't implement playback rate like in facebook, twitter, vimeo, netflix and etc...

MDN Doc

document.querySelectorAll('video')
        .forEach(i => i.playbackRate = 2)

But to write this code to every website and open Devtool its not cool. And I want to share 1 extension tools that I used. Just install it and press s to slower, and d to faster. And you can set the speed more than 2. You can find other extension tho, I'm just lazy to try others 🤣.

Video Speed Controller

Hope you enjoy this article and learn something.

image source: jakobowens1

How self-xss work in bookmark.

Azriz Jasni — Sat, 29 May 2021 01:39:15 +0000

On my previous article, I share on how to add javascript code in bookmark which later user can just click on it and browser will run it. And after published the article, I had another idea of writing this article. Before I share my findings, I would like to share with the audience what is the definition of Self-XSS.

Self-XSS operates by tricking users into copying and pasting malicious content into their browsers' web developer console

wikipedia

So let's continue on our example.

First let setup our bookmark script. But before you copy the code, let me brief what the code does.

javascript: ((url) =>
  fetch(url)
    .then((response) => response.text())
    .then((scriptInString) => eval(scriptInString))
    /* .then(scriptInString => new Function(scriptInString)()) */
)(`https://gist.githubusercontent.com/AzrizHaziq/adcfdbf12c3b30b6523495e19f282b58/raw/a959157530b4c282aae0386fda1b3c3b1656bb7d/notify.js`);

First we wrap our code in IIFE. Which mean it will execute it right away. Also I used it because, I want to avoid naming a function. Hence, it will make shorter scripts.

Next, we use fetch to trigger http GET(pun intended) to our script. Once the http is resolve, we want to convert it to string. And finally, since our script is in the form of string, we can evaluate it with eval or new Function.

And the snippet code in github gist is exactly like below

// notify.js in gist github
// code copied from https://developer.mozilla.org/en-US/docs/Web/API/notification
// and was changed into iife

(() => {
  // Let's check if the browser supports notifications
  if (!("Notification" in window)) {
    alert("This browser does not support desktop notification");
  }

  // Let's check whether notification permissions have already been granted
  else if (Notification.permission === "granted") {
    // If it's okay let's create a notification
    var notification = new Notification("Hi there!");
  }

  // Otherwise, we need to ask the user for permission
  else if (Notification.permission !== "denied") {
    Notification.requestPermission().then(function (permission) {
      // If the user accepts, let's create a notification
      if (permission === "granted") {
        var notification = new Notification("Hi there!");
      }
    });
  }

  // At last, if the user has denied notifications, and you
  // want to be respectful there is no need to bother them any more.
})()

Once you save into bookmark it will look like this:

Go to https://example.com.
Just for the sake of this example, please allow notification. Since our script in gist will trigger notification. (For chrome, click the padlock icon in url bar and Allow notification)
Click the bookmark that you just create.
If you didn't see the notification then that's mean, I can panic 🤣🤣. If yes, well done you follow the steps correctly 😀.
You can block notification, and delete the bookmark too.

Now of course this example does not have big impact to you, since my objective is to make it interactive. But, I would like to highlight one thing here.

Imagine that if let say after a few month or years after I published this article, I can just silently edit my notify.js to any nasty code. Anyone who click the bookmark usually would assume it just the same old script and will fall into my trap. Pretty slick right?

There is also another scenario I want to share. In future, we will have read & write permission in browser. What will happen if you just blindly run a script that you copy and paste? That script may hog your file-size, plant a malware, read sensitive file, and it could be anything else.

As developer, how do you prevent this

This example work because at time of me writing this article https://example.com doesn't have CSP protection. CSP is big topic which I'm not an expert. It has a lot of configs and in case this is your first time hearing it, let me try to give a tldr(too long didn't read).

Explicitly define what kind of tasks/scrips/images/domain/styles/things that can run/load in your document. (psst: I might be wrong, please correct me 🙂)

For example:

Let say I'm on https://example.com
I also specify images to load only from https://unsplash.com.
And if there is a request to different domain then it will trigger CSP error in Devtools.

<!-- these should load fine in dom -->  
<img src="https://example.com/static/logo.png"> 
<img src="https://unsplash.com/static/my-image.png"> 

<!-- CSP errors and it will not load -->  
<img src="https://s3.aws.com/bucket...">

// please check the MDN doc as it is more detail example

Just in case if you click the bookmark while you are currently in twitter.com it will not trigger the notification since twitter.com already have CSP layer. And if you want to see how they implement it, you can go to network tool and look at the first downloaded document, then look for content-security-policy in response header. You will be surprise to see how long it is.

In Conclusion.

Please be aware copying and pasting any code from online. Especially obfuscated code.
Please take you time understand the code. Any term or keyword that you never heard of it just search in MDN or google.

Originally, the idea for this article is coming from DebugCSS. After I knew how they implement it and ensure that every user who click it, will always run the latest version, I just write a draft for this article. For you information, while they are using <style> and inject to dom, mine was using http get and eval the script.

Image Source: firmbee

Github on Steroids

Azriz Jasni — Fri, 21 May 2021 14:22:39 +0000

Hi everyone, I have few tips on how to increase productivity with Github.

Navigating through source codes in repository

Often time when we open any repository in Github we will be displayed with root folders and files. But, what if you want to navigate deep nested file? You would have to navigate through each nested folder until you find the file you want to open.

It's not really efficient way since every click to folder its actually trigger a lot of network calls, waiting for it to resolve and then browser render it to UI(user interface). And imagine that you are currently on slow 3G connection, you would have wasting your time waiting and clicking.

There are other points that can be added up but its not the objective of this article. So there are 2 way that I can recommend you:

1. Octotree (freemium)

It is a browser extension and they support a lot of browsers(please check their website). For me, their killer feature is Code Review and multiple tabs 🙂. It's much easier when reviewing your peer PR(pull request). Please refer their main website for services that they provide.

2. Github 1s

This is another level of navigating thru all the files and folder. Just add 1s to the domain from github.com to github1s.com. Then you will see vscode in your browser.

from https://github.com/facebook/react
to   https://github1s.com/facebook/react

Cool right!. But I would like to highlight 1 more interesting thing, which is how to improve your workflow. Based on their readme, they share a shortcut key with a click in your bookmark, and here how would you setup it.

Since I'm using chrome go to chrome://bookmarks
Then click 3 dots icon on your most top right
Create a bookmark and enter this line of code to URL input box. For name you can named it yourself (I named it Github1s)

javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })

It will look like this
Once that done, now feel free to open any repo and click the bookmark that you just created. Github ReactJS Github1s ReactJS

Another alternative for this is Github Surf

Look at file history interactively

Sometime you want to know what changes have been made to a file. Github do have a history button for a file, but In my opinion, it's not really detail and still have to click a a lot of things. Luckily there is another awesome tool Git History

We will use this ReactJS package.json file as for our example. Same thing like above, you want to change the url domain.

from https://github.com/repo/path/to/file
to   https://githistory.xyz/repo/path/to/file

To make it easier for the audience to click, you can play around below links

Please use keyboard arrow right and left to navigate and for mobile user you can drag left and right as well.

And lastly, you also can create a bookmark and below is the code. Please refer the step above.

javascript: window.location.href =   `https://${window.location.hostname === 'github.com' ? 'githistory.xyz' : 'github.com' }${window.location.pathname}`

3. [Github] New update!, Github have built in editor

Just click .

// Detect dark theme var iframe = document.getElementById('tweet-1425505817827151872-681'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1425505817827151872&theme=dark" }

Plus it also support Pull Request view!!.
PR: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56026
Editor view: https://github.dev/DefinitelyTyped/DefinitelyTyped/pull/56026

Hope you enjoy reading it, Thank you.

Better way to unsubscribe in Angular

Azriz Jasni — Mon, 16 Mar 2020 01:48:09 +0000

You might be wondering why do we need to unsubscribe every subscriptions. Well, you can get the answer from our friend here Netanel Basal. He have a nice .gif example so check it out.

As time goes on, we(developer) really tired of keep repeating the same process:

1. Importing ngOnDestroy,
2. Implement the interface
3. Create public function ngOnDestroy() { … }
4. Create a variables to keep list of subscriptions
5. … 
6. …
7. And repeat the whole process for other components.

This is tedious and a waste productivity.
So, I'm going to share a 2 approach on how to unsubscribe subscription easily. But let's start with normal approach.

1. Using Inheritance

Create a BaseComponent so that, whoever extends this component are able to easily add subscription and easily unsubscribe on destroy.

And this is how to implement in component class.

One caveat tho, if the component extends BaseComponent and it also have implement ngOnDestroy() you would have to add super.ngOnDestroy();

2. Decorators

I think this approach kinda complicated a little bit as it mutate prototype. BTW i'm using mixin approach. Plus is not battle tested with this.

And here how to implement it

Thats all, feel free to play around here.

Update

Decorator approach with previous example it doesn't really work
Added once method to auto close the subscription. Can be really help full for something like click button, then trigger one http, and after that close it. (save your time to import take)
Added type to functions params and return
I'm still having difficulty with the return type in Decorator approach. Any typescripts master, please help me with this.

Secure your apps with Angular Directive when using target='_blank'

Azriz Jasni — Wed, 01 May 2019 10:16:41 +0000

Hi, today I want to share with you guys on how to secure your apps if you are using target='_blank'.

Usually to link an external url, we will do something like this:
<a href='https://dev.to'>Dev.to</a>.Please noted that this will still work. But unfortunately there is an security issues here.You can read more about it here and it also included with example:
https://mathiasbynens.github.io/rel-noopener/#hax

To solve this issue we can simply add an extra attribute to anchor tag.
<a href='https://dev.to' rel='noopener noreferrer'>Dev.to</a>.

However, let say in our app we have a lot of external link to put.
And personally, I dont really like to write rel='noopener noreferrer' to every anchor tag I have.

With that, we can automatically add rel='noopener noreferrer' to every anchor tag with Angular Directive.

// target-blank.directive.ts

import { Directive, HostBinding } from '@angular/core';

@Directive({
  // target every <a target="_blank">...<a>
  selector: 'a[target=_blank]',
})
export class TargetBlankDirective {
  // will add <a ... rel='noopener noreferrer'>...</a>
  @HostBinding('attr.rel') rel = 'noopener noreferrer';
}

// and just use it like this
<a href='someurl' target='_blank'>someurl</a>

// will render like this
<a href='someurl' target='_blank' rel='noopener noreferrer'>someurl</a>

One last thing, let say you have dynamic action on click. How would we want to prevent this.

function openInNewTab(url: string): void {
    // open link in new tab
    const newTab = window.open(url, '_blank')

    // set opener to null so that no one can references it
    newTab.opener = null
}

openInNewTab('https://dev.to')

You can play around here

In conclusion:

Pro	Cons
Automatically add rel='noopener noreferrer'	New Developer unaware of this directive behaviour
Able to prevent this issue automatically	Client disable JS

Inspect Stateless Component Props in ReactJs

Azriz Jasni — Sat, 17 Nov 2018 05:58:51 +0000

Hi, recently I've shared my tips in javascript, checkout here. On the last section, I did mention how do you debug using console.log.

So today, I'm going to share a little bit the same concept but it will be in ReactJs context. I hope it will useful for us 😊.

In my previous post, you can log current params of a callback function with
console.log(data) || ...someFn()

   const nameAndEmails = users.map((user) => console.log(user) || ({ 
    name: user.name, 
    email: user.email 
   }))

In ReactJs, especially for stateless components, sometime our coworker didn't write any PropTypes. Hence, it a little bit hard to know what kind of props shape it will receive.

Lets jump to the example:

// let say you have this kind of component
const Button = (props) => (
    <button class="btn btn-primary" type="button" {...props} >
        {`${props.children}`}    
    </button>
);

// use it like this 
<Button type="Submit">Click Me</Button>

You would not want to convert this component into { ... return (); }, because it requires a lot of typing, like this:

// 😓, need to type aloot of things here
const Button = (props) => {
    console.log(props);

    return (
        <button class="btn btn-primary" type="button" {...props} >    
           {`${props.children}`}
        </button>
    );
};

So, instead of convert to ordinary function, you can try this approach to log the props.

const Button = (props) => console.log(props) || (
     <button class="btn btn-primary" type="button" {...props}>
        {`${props.children}`}
     </button>
);

// It will logs: 
// { 
//    type: 'Submit',
//    children: 'Click Me'
// }

Essentially, you can use this trick to any callback function like in map., .filter, .reduce

I hope you get the idea, See you next time.

Tips in Javascript

Azriz Jasni — Mon, 12 Nov 2018 14:15:20 +0000

Hi and greetings. So today I would like to share some different way when writing console.log. You can freely copy the code and paste it on your browser's devtool.

At the time I'm writing, I was using Chrome 70. We will be using JSON response from this awesome service JSONPlaceholder. Also noted that I'm going to use Javascript ESNext syntax.

  // this will be our dummy data list of users
  const users = [
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net",
    "address": {
      "street": "Douglas Extension",
      "suite": "Suite 847",
      "city": "McKenziehaven",
      "zipcode": "59590-4157",
      "geo": {
        "lat": "-68.6102",
        "lng": "-47.0653"
      }
    },
    "phone": "1-463-123-4447",
    "website": "ramiro.info"
  }
]

We have a dummy data called users and we only interested in user's name and email. Array.prototype.map come to the rescue.


    const nameAndEmails = users.map(user => {
        return {
            name: user.name,
            email: user.email,
        };
    })

/*
  [
    {
      "name": "Leanne Graham",
      "email": "Sincere@april.biz"
    },
    {
      "name": "Ervin Howell",
      "email": "Shanna@melissa.tv"
    },
    {
      "name": "Clementine Bauch",
      "email": "Nathan@yesenia.net"
    }
  ]

*/

Yay, the result we get contains name and email. But we can write this better and shorter syntax with object literal expression and destructuring

    // 👍 implicitly return object literal expression
    const nameAndEmails = users.map(user => ({
      name: user.name,
      email: user.email,
    }))


    // 👍👍destructuring function parameter and return object literal expression
    const nameAndEmails = users.map(({ name, email }) => ({ name, email }))

Ok, lets pretend that after 1 months after coding this code, there is a high chances that you already forgot the User Shape, and you might also need to return user's phone number. So we need to console.log so that we can have a look at our User Shape again.

   // 1) Write console.log(users) before running the function.
   console.log(users);
   const nameAndEmails = users.map(({ name, email }) => ({ name, email }))

   // 2) Open devtool and reload the browser
   // 3) Lastly, look at the logged `users`

As for me this approach is kinda tiresome and below is approach that I found in the internet.

   const nameAndEmails = users.map((user) => console.log(user) || ({ 
        name: user.name, 
        email: user.email
   }))

   or 

   const nameAndEmails = users.map(({ name, email, ...otherPayload }) => console.log({ name, email, ...otherPayload }) || ({ name, email }))

WHY?, it is because console.log return undefined, and the browser will still running the code after ||.

You can play around with these examples into devtool:

undefined || 'return me'.
console.log('log me') || 'return me'
true && console.log('log me')
false && console.log('do not log me')

I hope you learned something 😁😁;