I have difficulty knowing what is the current media queries in my viewport, so in this post I'm sharing how to overcome it.

How to know current media queries in tailwind

---
title: Have you come across any websites that frustrate you?
published: true
description: Few things what you can do to fix websites.
tags: javascript
cover_image: https://source.unsplash.com/1K9T5YiZ2WU
---


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.

```html

<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 <kbd>CMD</kbd><kbd>SHIFT</kbd><kbd>c</kbd> (mac) or <kbd>CTRL</kbd><kbd>SHIFT</kbd><kbd>c</kbd> (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.

```javascript
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.

```css
body { overflow: hidden };
```

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

1. Make sure you are on the website that you want to overwrite.
2. Click the extension and click "add new"
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d1vmrdwvhqqf5wj9dfyi.png)
 
3. It will redirect you to a new tab.
4. Paste this css into css section

```css
body { overflow: unset !important }
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epdh9c2lauetayppadja.png)
 

* 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. 

```javascript
  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](https://github.com/AzrizHaziq/tradingview-syariah-indicator/blob/d3803978a70225ac6e4e4f4171ebb664761821e0/src/helper.js#L163-L181). 

```typescript
// 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](https://dev.to/codingnepal/detect-adblock-using-html-css-javascript-dkh) by @CodingNepal.
* Use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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.

```css 
  @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).

```javascript
// 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 <kbd>CTRL</kbd><kbd>2</kbd>, 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

Few things what you can do to fix websites.

Have you come across any websites that frustrate you?

---
title: I've been using vim in total a year, and I'll stick to it. 
published: true
description: level up vim with these tips. 
tags: vim, dx, developerexperience 
cover_image: https://source.unsplash.com/wvJuYrM5iuw
---

And heres why:
* after you learn vim, you will be less pressing <kbd>ALT</kbd>, <kbd>CMD</kbd>, <kbd>CTRL</kbd>, <kbd>HOME</kbd>.
* 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.




{% youtube IiwGbcd8S7I %}

{% youtube d8XtNXutVto %}


* 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](https://dev.to/azrizhaziq/unpopular-opinion-on-learning-approach-119i).

## 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 <kbd>q</kbd>, it means press the 'q' key in keyboard.
- Lastly, I'm using this awesome [repo](https://github.com/amix/vimrc) 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:


{% gist https://gist.github.com/AzrizHaziq/adcfdbf12c3b30b6523495e19f282b58 file=vim.md %}



- 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.


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

---
title: Unpopular opinion on learning approach.
published: true
description: Learn 2x time faster than your peers, give it a try first.
tags: learnfaster
cover_image: https://source.unsplash.com/CiUR8zISX60
---

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

{% youtube _Ib0avVtpEg %}

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.

```md
// 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>`
```html
// 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate)
```js
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
- https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk
- https://github.com/igrigorik/videospeed

Hope you enjoy this article and learn something.

image source: [jakobowens1](https://unsplash.com/@jakobowens1)

Learn 2x time faster than your peers, give it a try first.

Unpopular opinion on learning approach.

---
title: How self-xss work in bookmark.
published: true
description: How self-xss work in bookmark and how you can prevent it
tags: xss, javascript, bookmark
cover_image: https://source.unsplash.com/eMemmpUojlw
---

On my previous [article](https://dev.to/azrizhaziq/github-on-steroids-3d23), 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.

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

```js
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 **eval**uate it with `eval` or `new Function`.

And the snippet code in [github gist](https://gist.github.com/AzrizHaziq/adcfdbf12c3b30b6523495e19f282b58#file-notify-js) is exactly like below 
```js
// 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:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h77x4u5nm89161d4ap8.png) 

2. Go to https://example.com.
3. 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)
4. Click the bookmark that you just create. 
5. If you didn't see the notification then that's mean, I can panic 🤣🤣. If yes, well done you follow the steps correctly 😀.
6. 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](https://web.dev/browser-fs-access/) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). 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.

```html
  
<img src="https://example.com/static/logo.png"> 
<img src="https://unsplash.com/static/my-image.png"> 

  
<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.

![twitter CSP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ct51pj8xlm2e7b7fz5t.png) 


## 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](http://imbrianj.github.io/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](https://unsplash.com/@firmbee)

How self-xss work in bookmark and how you can prevent it

How self-xss work in bookmark.

---
title: Github on Steroids 
published: true
description: Improve github experience with octotree, github1s, githubsurf, and githistory
tags: Github, developerexperience, dx, debugging
cover_image: https://source.unsplash.com/gnyA8vd3Otc
---

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](https://www.octotree.io/) (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.

{% youtube tyUNy-WFs-c %}


## 2. [Github 1s](https://github.com/conwnet/github1s)
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.

1. Since I'm using chrome go to `chrome://bookmarks`
2. Then click 3 dots icon on your most top right
3. Create a bookmark and enter this line of code to URL input box. For name you can named it yourself (I named it Github1s)
```js
javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' })
```

4. It will look like this
![bookmark github1s.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvxfhm7q0rqjvqpz8mu3.png)
5. Once that done, now feel free to open any repo and click the bookmark that you just created. 
[Github ReactJS](https://github.com/facebook/react)
[Github1s ReactJS](https://github1s.com/facebook/react)

Another alternative for this is [Github Surf](https://github.com/surfcodes/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](https://githistory.xyz/)

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


- https://github.com/facebook/react/blob/master/package.json
- https://githistory.xyz/facebook/react/blob/master/package.json

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


![githistory.xyz reactjs package.json file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3rn9dfvfw06ejx04lsz.png)
 

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

```js
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 <kbd>.</kbd>

{% twitter 1425505817827151872 %}


Hope you enjoy reading it, Thank you.









Improve github experience with octotree, github1s, githubsurf, and githistory

Github on Steroids 

---
title: Better way to unsubscribe in Angular
published: true
description: 
tags: rxjs, angular, typescript
---

---
You might be wondering why do we need to unsubscribe every subscriptions. Well, you can get the answer from our friend here [Netanel Basal](https://netbasal.com/why-its-important-to-unsubscribe-from-rxjs-subscription-a7a6455d6a02). 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.

{% gist https://gist.github.com/AzrizHaziq/837befe71d64d5e73ae540e981ded24a file=base-inheritence.ts %}


And this is how to implement in component class.

{% gist https://gist.github.com/AzrizHaziq/837befe71d64d5e73ae540e981ded24a file=child-inheritence.component.ts %}


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

{% gist https://gist.github.com/AzrizHaziq/837befe71d64d5e73ae540e981ded24a file=any-child.ts %}


## 2. Decorators

I think this approach kinda complicated a little bit as it mutate prototype. BTW i'm using [mixin](https://javascript.info/mixins) approach. Plus is not battle tested with `this`.

{% gist https://gist.github.com/AzrizHaziq/837befe71d64d5e73ae540e981ded24a file=base-decorator.ts %}


And here how to implement it

{% gist https://gist.github.com/AzrizHaziq/837befe71d64d5e73ae540e981ded24a file=child-decorator.component.ts %}

Thats all, feel free to play around here.

{% stackblitz better-way-to-unsubscribe-in-angular view=both %}

### 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.

You might be wondering why do we need to unsubscribe every subscriptions. Well, you can get the...

Better way to unsubscribe in Angular

---
title: Secure your apps with Angular Directive when using target='_blank'
published: true
description: Best way to secure you apps when using target='_blank'
tags: security, frontend, angular
---
    
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.

```js
// 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';
}
```

```html
// 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.

```js
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 
{% stackblitz angular-target-blank %}


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                                                  |

You can read more here 
https://www.pixelstech.net/article/1537002042-The-danger-of-target%3D_blank-and-opener








Best way to secure you apps when using target='_blank'

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

---
title: Inspect Stateless Component Props in ReactJs
published: true
description: Inspe in React
tags: debugging, javascript, reactjs, rxjs
---

Hi, recently I've shared my tips in javascript, [checkout here](https://dev.to/azrizhaziq/tip-when-in-javascript-497f). 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()`

```javascript
   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](https://reactjs.org/docs/typechecking-with-proptypes.html). Hence, it a little bit hard to know what kind of `props` shape it will receive. 

Lets jump to the example: 

```javascript
// 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: 

```javascript
// 😓, 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`.

```javascript
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.



Inspect Stateless Component Props in ReactJs

---
title: Tips in Javascript
published: true
description: Write better and efficient way console.log
tags: javascript, console.log, debugging
---

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](https://jsonplaceholder.typicode.com/). Also noted that I'm going to use [Javascript ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla) syntax.

```javascript
  // 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) come to the rescue.


```javascript
    
    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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Advanced_Syntax) and [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)

```javascript
    // 👍 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.  

```javascript
   // 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.

```javascript
   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 }))
```
![output](https://thepracticaldev.s3.amazonaws.com/i/a31o4cr8f3eobl2rknhd.png)


**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  😁😁;

Write better and efficient way console.log