{"componentChunkName":"component---src-templates-blog-list-js","path":"/blog/3/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"id":"e2cfbc70-88fb-55db-8c76-c9223b28dbcd","html":"

If you’re a windows user like me, you might have heard of PowerToys Utilities from Microsoft. They are a set of utilities which come handy in many situations, but not many people know and use them. So I thought let’s write how and when I use them to help other people be more efficient too.

\n\n

PowerToys utilities

\n

Microsoft PowerToys are a set of small applications which helps windows users streamline their day to day activities and windows experience for greater productivity. However, these are not new. There were a set of tools in Widows 95 (yes I’m that old) which inspired this project.

\n

Installation

\n

Simply head to the Downloading and Release notes section on their GitHub repository, download the version you’re after and install it using its installer.

\n

The latest version as of writing this article is v0.23.0. Once you get it installed, it will update itself on a regular basis.

\n

So let’s see what are these and how you can use them.

\n

Color picker

\n

Color Picker is a handy little tool which allows you to pick a color from anywhere on your screen. As a web developer there are many times when I want to get the hex or rgb value of a background color, border, or other areas.

\n

I used to use browser DevTools, but they only help you within the browser and if you want something from a document, picture or other files on your file system, then this tool will come in handy.

\n

If you haven’t customised the default shortcuts, press Win + Shift + C to open the picker. Once opened, you can use your mouse scroll to zoom in and left click to copy the value to your clipboard.

\n

\"PowerToys

\n

Fancy zones

\n

Fancy Zones allows you to create complex window layouts and quickly position your windows into those. This comes really handy if you have a super wide monitor setup.

\n

To open it, press Win + ` and select your desired layout from the opened window. Once selected you can arrange your windows into those areas by pressing Win + ⬅ or Win + ➡.

\n\"Fancy\n
\n

💡 If the arrow keys didn’t work for you, simply select the option to override windows shortcuts in the settings. You can access the settings from clicking the PowerToys icon in your toolbar.

\n
\n

File explorer add-ons

\n

File Explorer add-ons will enable SVG icon rendering and markdown preview for your file explorer. To see your preview pane simply click the view menu and click the preview pane.

\n\"Fancy\n

Image resizer

\n

Image Resizer is a really cool shell extension which allows you to quickly resize images. Simply right click on your image or images and resize them instantly.

\n\"Fancy\n

keyboard manager

\n

Keyboard manager allows you to create your own keyboard layout to increase your productivity. You can map keys and mix them however you like, of course you would need a keyboard with detachable key caps for a better use.

\n

Open PowerToys settings and click on keyboard manager menu. First thing first, make sure it’s enabled.

\n

Remap keys

\n

If you want to remap a key, click on the remap keys, then click + button to add a key and then select what key you want that mapped to.

\n\"Keyboard\n

You can also map a single key to a shortcut, for example map V to Ctrl + V.

\n
\n

💡 Just remember that when you map a key to a shortcut, the combination remains even as part of other key presses. So if you’ve mapped V as above, then pressing Ctrl + V now means you’ve pressed Ctrl + V + V.

\n
\n

Remap shortcuts

\n

You can map shortcuts as well, to do so, click on the remap a shortcut button and follow the same procedure. You can click on type button to press multiple keys and at the end you can specify which application this shortcut remap applies to.

\n\"Keyboard\n

PowerRename

\n

PowerRename is another shell extension for balk renaming of files which offers search and replace and supports regex.

\n

Select and right click on multiple files or folders, then click PowerRename. From the opened dialog, select your desired options and once you’re happy, click rename.

\n\"Keyboard\n

PowerToys run

\n

This one is my favourite. It brings back the memories of the days we used to install add-ons on windows XP and 7 to add these sort of functionalities. First, make sure it’s enabled in the settings, and then press Alt + Space. A pop up will open and you can search for your application.

\n
\n

💡 Since I use this shortcut to select my open window to be able to move it between my monitors, I’ve set my shortcut to Ctrl + Alt + Space.

\n
\n

Shortcut guide

\n

Shortcut guide is a quick and easy way to savailable shortcuts for the current state of the desktop. You can open it by pressing and holding down your Win key for 1 second.

\n\"Keyboard\n

Summary

\n

Hopefully these tools will help you as much as they helped me. Have a great weekend ahead and till next article 👋🏻.

","timeToRead":3,"frontmatter":{"title":"Do you know about PowerToy Utilities? 💪🏻","unformattedDate":"2020-10-09T00:00:00.000Z","date":"Oct 09, 2020","path":"/powertoys/","author":"Yaser Adel Mehraban","tags":["showdev","windows","powertoys"],"thumbnail":null}}},{"node":{"id":"db113d4f-1e9c-531c-82cd-4571a56e8a9a","html":"

Searching for items in an array has been the point of discussion for many years and debate on what is the best and optimum way for searching for objects has had many solutions, some effective and some not.

\n

However, with the all new findIndex method on Array.prototype you have the flexibility to search for objects using your own comparison callback method.

\n\n

The what

\n

The findIndex method returns the index of the first element in an array if the callback method passed to it returns true, otherwise it returns -1.

\n {\r\n return num > 0 && Math.sqrt(num) % 1 === 0;\r\n}\r\n\r\nconsole.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1\r\nconsole.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1`, `1946705612305521400`)\"\n >\n \n Copy\n \n \n
const isPerfectSquare = (num) => {\r\n  return num > 0 && Math.sqrt(num) % 1 === 0;\r\n}\r\n\r\nconsole.log([1, 3, 8, 9, 12].findIndex(isPerfectSquare)); // 1\r\nconsole.log([1, 6, 7, 10, 14].findIndex(isPerfectSquare)); // -1
\n

There are two facts you should know:

\n\n

Syntax

\n\n \n Copy\n \n \n
array.findIndex(function(currentValue, index, arr), thisValue);
\n

Parameters

\n
    \n
  • function: This is your callback function which checks for a condition to match the element you’re after.
    • \n
  • currentValue: This holds the current element’s value.
    • \n
  • index: This is an optional parameter which holds the current index.
    • \n
  • arr: This is also an optional parameter which holds the array that the current element belongs to.
    • \n
  • thisValue: Yet another optional parameter, if a value is passed, it will be used as this value inside the function, otherwise undefined will be passed.
    • \n
\n

Return value

\n

It will return the index of the found item or -1 if the callback function is not satisfied.

\n

How it works under the hood?

\n

When the findIndex is called with one or two arguments, the following steps are executed:

\n
    \n
  1. Let O be ? ToObject(this value)
    2. \n
  2. Let len be ? LengthOfArrayLike(O)
    3. \n
  3. If IsCallback(predicate) is false, throw a TypeError exception
    4. \n
  4. Let k be 0
    5. \n
  5. Repeat, while k < len
    6. \n
\n
    \n
  • Let Pk be ! ToString(k)
    • \n
  • Let kValue be ? Get(O, Pk)
    • \n
  • Let testResult be ! ToBoolean(? Call(predicate, thisArg, « kValue, k, O »))
    • \n
  • If testResult is true, return k
    • \n
  • Set k to k + 1
    • \n
\n
    \n
  1. Return -1
    2. \n
","timeToRead":1,"frontmatter":{"title":"Find an item in an array with the new 'findIndex' method 🔎","unformattedDate":"2020-10-05T00:00:00.000Z","date":"Oct 05, 2020","path":"/array-findindex/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","findindex"],"thumbnail":null}}},{"node":{"id":"311de7ae-f9be-5da6-b42d-e979c22a3b3e","html":"

It’s been a while since I last wrote about Intersection Observer V2, partly because I had a lot on my plate and I was feeling exhausted and partly because I was working on my first PluralSight course on web performance for PWAs.

\n

But I am back, and this time we’re going to review how to take a selfie from your webcam using Image Capture API.

\n\n

Image Capture API

\n

There are some really useful APIs which allow us to work with media like audio, video, etc. I will write about those too, but this time I wanted to show you how you can extract a frame from your video feed such as your webcam with a few lines of code.

\n

Image Capture API enables us to capture an image or frame from video devices. In addition to capturing data, it also allows you to retrieve information about device capability such as image size, red-eye detection and whether or not there is flash turned on.

\n

Usage

\n

We need to take some actions to be able to work with media devices. First thing first we need to get a reference of the device:

\n {\r\n // Do something with the stream.\r\n })`, `51721049651523070000`)\"\n >\n \n Copy\n \n \n
navigator.mediaDevices.getUserMedia({ video: true })\r\n  .then(mediaStream => {\r\n    // Do something with the stream.\r\n  })
\n

Next we need to get the visual parts of the media stream by calling getVideoTracks method of the mediaStream object:

\n\n \n Copy\n \n \n
const track = mediaStream.getVideoTracks()[0];
\n

Of course we’re assuming that the first item in the array is the one you want to use, but don’t worry if not, you can loop through all the tracks, find the one you need and either get it with its right index, or by calling getTrackById method.

\n

After we’ve got our track, it’s time to capture our image. If you wanted to configure some of the settings on your media device such as zoom level, you need to do it now before capturing our image:

\n\n \n Copy\n \n \n
const capabilities = track.getCapabilities();\r\n// Check whether zoom is supported or not.\r\nif(!capabilities.zoom) {\r\n  return;\r\n}\r\n\r\nconst zoom = capabilities.zoom.max - capabilities.zoom.min;\r\n\r\ntrack.applyConstraints({ advanced : [{ zoom: zoom }] });
\n

When we’re done with settings, we can then create an instance of the ImageCapture object:

\n\n \n Copy\n \n \n
let imageCapture = new ImageCapture(track);
\n

Once that’s done, you can capture an image from your video feed by calling the takePhoto method:

\n createImageBitmap(blob))\r\n .then(imageBitmap => {\r\n // do something with the photo\r\n })\r\n .catch(error => console.error(error));`, `68179393071911944000`)\"\n >\n \n Copy\n \n \n
imageCapture.takePhoto()\r\n  .then(blob => createImageBitmap(blob))\r\n  .then(imageBitmap => {\r\n    // do something with the photo\r\n  })\r\n  .catch(error => console.error(error));
\n

Permissions

\n

Similar to other APIs you would need permission to be able to access the webcam on devices. If you didn’t see any pop up, make sure you give the camera permission to the site on your browser to be able to get your code working properly. You can try that with below demo.

\n

Demo

\n

You can see a working example of this in my CodePen below:

\n\n

I hope you’ve learnt a new thing or two and till next time 👋🏽.

","timeToRead":2,"frontmatter":{"title":"Take a selfie 🤳 using Image Capture API and a few lines of code","unformattedDate":"2020-09-06T00:00:00.000Z","date":"Sep 06, 2020","path":"/image-capture-api/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","imagecaptureapi"],"thumbnail":null}}},{"node":{"id":"7764a9b0-4602-58ba-98eb-d277a36b4768","html":"

As I mentioned in one of my other posts, Intersection Observer will report when an element appears in the viewport, after applying all overflow and CSS clips. However, there is no way currently to find out whether an item is being put on top of this element, or some filter is applied to it which may alter or obscure the element’s display.

\n\n

Context

\n

Intersection Observer is now widely used by developers especially since Safari added support a while back and it’s now available in all major browsers. If you want to be notified when an element appears in the viewport such as an image, if you want to lazy load it you can use this API. In its most basic form the code looks like this:

\n {\r\n for (const entry of entries) {\r\n if (entry.isIntersecting) {\r\n console.log(entry);\r\n }\r\n }\r\n};\r\n\r\nconst observer = new IntersectionObserver(logIfIsInViewPort);\r\nobserver.observe(document.querySelector('.element-selector'));`, `21598417141367144000`)\"\n >\n \n Copy\n \n \n
const logIfIsInViewPort = (entries) => {\r\n  for (const entry of entries) {\r\n    if (entry.isIntersecting) {\r\n      console.log(entry);\r\n    }\r\n  }\r\n};\r\n\r\nconst observer = new IntersectionObserver(logIfIsInViewPort);\r\nobserver.observe(document.querySelector('.element-selector'));
\n

The problem

\n

As great as it sounds, this API is not perfect. For example it can’t tell you whether or not an element is covered by another content (which is called occluded), or if a filter is applied to it to hide or obscure it’s content (such as opacity, filter, transform, etc.).

\n

This can lead to dangerous situations where some people might do fraud or abuse the web. So Intersection Observer V2 was born to prevent these types of scenarios.

\n

Intersection Observer V2

\n

As I said, the primary motivation for this API is to prevent those situations where a fraud might be possible, or people could abuse the user’s privacy in a way especially if the said content is put in an iframe.

\n

Intersection Observer V2 works by tracking the actual visibility of the element, just like the end user would see it. By passing an option to it’s constructor, the collection of IntersectionObserverEntry will contain a new boolean called isVisible.

\n {\r\n for(const change in changes) {\r\n // feature detection\r\n if(typeof change.isVisible !== 'undefined') {\r\n if(change.isIntersecting && change.isVisible) {\r\n console.log(\\`Visible since \\${change.time}\\`);\r\n } else {\r\n // fallback to v1 if not supported\r\n change.isVisible = true;\r\n }\r\n }\r\n }\r\n}\r\n\r\nconst observer = new IntersectionObserver(handler, {\r\n threshold: [1.0], \r\n trackVisibility: true, // this will give you the isVisible property\r\n delay: 100\r\n});\r\n\r\nobserver.observe(document.querySelector('.target-element-selector'));`, `56778081925252825000`)\"\n >\n \n Copy\n \n \n
const handler = (changes) => {\r\n  for(const change in changes) {\r\n    // feature detection\r\n    if(typeof change.isVisible !== 'undefined') {\r\n      if(change.isIntersecting && change.isVisible) {\r\n        console.log(`Visible since ${change.time}`);\r\n      } else {\r\n        // fallback to v1 if not supported\r\n        change.isVisible = true;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nconst observer = new IntersectionObserver(handler, {\r\n  threshold: [1.0],  \r\n  trackVisibility: true, // this will give you the isVisible property\r\n  delay: 100\r\n});\r\n\r\nobserver.observe(document.querySelector('.target-element-selector'));
\n

Additional parameters

\n

The object which is passed in the constructor has a few properties:

\n
    \n
  • threshold: A list of thresholds which will trigger a callback.
    • \n
  • trackVisibility: A boolean indicating whether or not to track the visibility of the element.
    • \n
  • delay: A number defining the minimum delay in milliseconds between notification for a given object.
    • \n
\n
\n

💡 Note that tracking visibility is an expensive operation and should only be used when necessary. The performance implications can cause more harm than good if abused.

\n
\n

How does it determine visibility?

\n

Determining whether the element is visible or not is not as simple as you might think. Based on the spec:

\n
    \n
  • If false is passed as the value of trackVisibility, the element is considered visible.
    • \n
  • If the target element has an effective transformation matrix other than 2D then the element is considered invisible.
    • \n
  • If the target element or any of its children, has an effective capacity other than 1.0, then it’s considered invisible.
    • \n
  • If the target element or any of its children has a filter applied, then it’s considered invisible.
    • \n
  • If the browser cannot guarantee the target is fully visible, then it’s considered invisible.
    • \n
\n

What’s the catch?

\n

This is in a draft state and still work in progress. Apart from Chrome, none of the other major browsers currently support it.

\n

Summary

\n

Although this hasn’t been implemented in most browsers yet, it’s a great tool to prevent some of the common attacks such as clickjacking or likejacking, or cursorjacking.

","timeToRead":2,"frontmatter":{"title":"Introducing the Intersection Observer V2 ⛌","unformattedDate":"2020-06-22T00:00:00.000Z","date":"Jun 22, 2020","path":"/Intersection-observer-v2/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","intersectionobserver"],"thumbnail":null}}},{"node":{"id":"58b5aa93-3d99-5e38-80dc-701eef573c6a","html":"

I remember a while back (not sure how long), Chrome had the ability to save all tabs when you closed the browser regardless of whether it was by accident or not. But they removed that ability and now if you close the window you will lose the tabs.

\n\n

What now?

\n

Well there are still some ways you can save your current tabs and open them next time you open a new Chrome window.

\n

1. Small hack but works (most times 😁)

\n

Open your task manager and kill the Chrome’s task. It’s a dirty hack but it works. When you open Chrome next time it asks you do you want to restore the last session and when you click the button, it will open all of your previously open tabs.

\n

So first kill the task:

\n

\n \n \n \n \n

\n

2. Save them as bookmarks

\n

Yes, you read right. You can save all open tabs as bookmarks and open them all later when you come back. Simply press Ctrl + Shift + d in windows or ⌘ + Shift + d in Mac to save all your open tabs in a new bookmark folder.

\n

\n \n \n \n \n

\n

It also has Microsoft Edge and Firefox versions which is great.

\n

Session Buddy

\n

Session Buddy is a popular extension with more than 24K installs. It will do all of the above for you automatically in one place. Whether your browser crashes or you choose to close it manually.

\n

\"IMAGE

\n

Summary

\n

Hope this helps you from a possible disaster if you have millions of tabs open at a time. If you are a tab person, check out my other article on managing your tabs in Chrome here. Until next time, 👋🏽.

","timeToRead":2,"frontmatter":{"title":"Chrome - where did save sessions go? 🤔","unformattedDate":"2020-06-17T00:00:00.000Z","date":"Jun 17, 2020","path":"/chrome-save-tabs/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","chrome","savetabs"],"thumbnail":null}}},{"node":{"id":"e4b82b57-2f2d-556c-8080-63025c9b2b94","html":"

If you’re one of those people with so many tabs open than you can manage, read on.

\n\n

The why

\n

For those of you who have many tabs open all at the same time and are struggling to keep a tab on your tabs, the time has come to get a bit more organised using this new feature in Chrome called tab groups.

\n

The whole purpose has been to help users keep their tabs organised and easier to find them in their sea of open tabs.

\n

How can I do it?

\n

Simply right click your tab and select Add tab to tab group option. Then there will be a dot right before your tab. Click on the dot, a pop up will open in which you can select a colour for your tab group, and name your group.

\n

If you are clicking on an existing group, you will have the following options in addition:

\n
    \n
  • Add a new tab to the group
    • \n
  • Ungroup tabs in a group
    • \n
  • Close group
    • \n
  • Move the group to a new window
    • \n
  • Send feedback if you have any
    • \n
\n

I’ve demonstrated this in below video:

\n

\"Adding

\n

But I don’t see the option

\n

If you can’t see the option, don’t worry, just go to chrome://flags, then search for tab groups and enable the option. It’s still experimental, but you can use it now.

\n

Summary

\n

Hope this will help you to keep a tab on your tabs and till next time 👋🏽.

","timeToRead":1,"frontmatter":{"title":"Chrome - Arrange your tabs with tab groups 😍","unformattedDate":"2020-06-15T00:00:00.000Z","date":"Jun 15, 2020","path":"/chrome-tab-groups/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","chrome","tabgroups"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAB3KFB/8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEREv/aAAgBAQABBQLKmURH/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhABAQEAAAAAAAAAAAAAAAAAADEB/9oACAEBAAY/AomI/8QAGRAAAgMBAAAAAAAAAAAAAAAAAAERMWHB/9oACAEBAAE/IWmgUPIyH//aAAwDAQACAAMAAAAQAA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAZEAEAAwEBAAAAAAAAAAAAAAABABFRIdH/2gAIAQEAAT8QZIdYESHomJT4z//Z"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/bfee17b55a0f5a23e44cd563538e0640/1509a/tabgroups.jpg","srcSet":"/static/bfee17b55a0f5a23e44cd563538e0640/a1fc4/tabgroups.jpg 750w,\n/static/bfee17b55a0f5a23e44cd563538e0640/bb684/tabgroups.jpg 1080w,\n/static/bfee17b55a0f5a23e44cd563538e0640/1509a/tabgroups.jpg 1102w","sizes":"(min-width: 1102px) 1102px, 100vw"},"sources":[{"srcSet":"/static/bfee17b55a0f5a23e44cd563538e0640/7bd67/tabgroups.webp 750w,\n/static/bfee17b55a0f5a23e44cd563538e0640/ae9e6/tabgroups.webp 1080w,\n/static/bfee17b55a0f5a23e44cd563538e0640/53728/tabgroups.webp 1102w","type":"image/webp","sizes":"(min-width: 1102px) 1102px, 100vw"}]},"width":1102,"height":307}}}}}},{"node":{"id":"e17ac429-5a2f-512f-9056-66626a7b7ec0","html":"

You probably have used fragments in links to point a link to a part of your page such as a heading. This technique is used in table of content for example and it’s a common pattern.

\n\n

Background

\n

To extend the current support for scrolling to an anchor element in a page, the W3C have proposed a solution which basically adds the ability to link to a DOM element with id, or textual content on a page to make it easier for browsers to understand what the users are interested and scroll there when they visit the page. In addition to make it visually easier to follow, they have added the highlight to the text so that users will know where to look at on first sight.

\n

Scroll to Text Fragment

\n

So that’s how Scroll to Text Fragment was born. It has been shipped to Chrome and Microsoft Edge called Scroll to Text Fragment which allows you to link to a specific text on a page, using a fragment provided in the URL. When the page is loaded, the browser highlights the text and scrolls it into view.

\n

This is the generic syntax:

\n
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]\r\n          context  |-------match-----|  context
\n
\n

💡 Square brackets indicate an optional parameter.

\n
\n

Here is an example:

\n\r\n Click to go to a specific portion of a page\r\n`, `24544895499245210000`)\"\n >\n \n Copy\n \n \n
<a href=\"https://yashints.dev/#:~:text=Meet&text=Yas\">\r\n  Click to go to a specific portion of a page\r\n</a>
\n

And you can test it live by clicking here.

\n

If you want to target an exact text:

\n\r\n Click to go to a specific portion of a page\r\n`, `50372966146058930000`)\"\n >\n \n Copy\n \n \n
<a href=\"https://yashints.dev/#:~:text=almond%20croissant%20addict\">\r\n  Click to go to a specific portion of a page\r\n</a>
\n

Try it here.

\n

You can also add an end text in which case the text directive refers to a range of text on the page.

\n\r\n Click to go to a specific portion of a page\r\n`, `92691127370110040000`)\"\n >\n \n Copy\n \n \n
<a href=\"https://yashints.dev/#:~:text=Although,web%20developer\">\r\n  Click to go to a specific portion of a page\r\n</a>
\n

Try it here.

\n

Use cases

\n

Search engines

\n

When search engines will link to pages which contain relevant information to the query, they will scroll and highlight that so the user will find it easier.

\n

Citation / Reference links

\n

Links are sometimes used as citations on some pages where the author wishes to enforce a claim by pointing to a reference such as Wikipedia. These reference pages can contains large chunks of text and finding the information can be difficult. So having the ability to scroll to that section and highlight it is really encouraging to readers to follow the links.

\n

Sharing a specific text or paragraph

\n

Sometimes you want to share a piece of text to someone for example by email or on social media, it’s really helpful to be able to link directly to the specific section rather than the whole page.

\n

Nowadays people share short snippets directly in tweets or create screenshots which can contain more text and post those. With this they won’t need to do that since links can be more meaningful.

\n

Summary

\n

And that’s how the web is moving towards a better place where users are the centre of attention for us developers and the more we know how to make their lives easier the more they trust us to take care of it for them.

\n

Enjoy your evening and till next time 👋🏽.

","timeToRead":2,"frontmatter":{"title":"Did you know about scroll to text? 📜","unformattedDate":"2020-06-14T00:00:00.000Z","date":"Jun 14, 2020","path":"/scroll-to-text/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","scrolltotext"],"thumbnail":null}}},{"node":{"id":"9507529c-b56d-5ca8-a624-65ac967832a6","html":"

I see some occasions where web developers who are a bit less familiar with accessibility use links incorrectly in different forms. So I thought let’s write a quick guide on Links in JavaScript apps.

\n\n

Background

\n

It’s safe to assume that anyone who’s used the web have seen them. They take users from one page to another either within the same application or to an external website. There were really hot when they were introduced back in 1966 by a team led by Douglas Engelbart.

\n

In the early 1980s Ben Shneiderman, a computer scientist at the University of Maryland, with his graduate student Dan Ostroff were preparing a videodisk exhibit for a museum. It was then where they used a caption that had all the information and users could click on it to see the photo associated with it.

\n

At first, this discovery was called embedded menu but that term was quickly replaced by hyperlink. Tim Berners-Lee cited Shneiderman’s hyperlink work in his spring 1989 manifesto for what would become the World Wide Web.

\n

Back then, this feature was super hot and it still is. People use it without even thinking about it and it’s become a natural part of the web.

\n

Enough background, tell me what’s this all about

\n

Let’s review what they do:

\n
    \n
  • As mentioned before they allow users to navigate between pages within a site or to an external one.
    • \n
  • And more importantly they help search engines and bots to find resources and going from one page to another by following the links. Think of this as a giant maze where they need to blindly follow the links to discover stuff.
    • \n
  • And last, the crawlers use them to understand the architecture of a site and the type of content they have. It’s a critical part of their decision making when assigning a page to a specific topic.
    • \n
\n

But how do you make a link?

\n

a tag with href

\n

Turns out it’s not as straightforward as one might think. The simplest way to put a link on your site is to use a good old <a> tag with a URL which it points to in the href attribute.

\nA good link, YES ╰(*°▽°*)╯`, `5600599628600445000`)\"\n >\n \n Copy\n \n \n
<a href=\"/elsewhere\">A good link, YES ╰(*°▽°*)╯</a>
\n

a tag with href and event handler

\n

For those with special circumstances, they might sprinkle a little bit of JavaScript on top and use an event handler to navigate the user programmatically:

\nOkay ¯\\_(ツ)_/¯`, `23499111752792380000`)\"\n >\n \n Copy\n \n \n
<a href=\"/elsewhere\" onclick=\"goTo('elsewhere')\">Okay ¯\\_(ツ)_/¯</a>
\n

This is fine as the link stays functional and you can upgrade the functionality using JavaScript.

\n

a tag without href

\n

But some people decide to remove the href attribute. This is not a good idea because you now prevented crawlers to find out where this link goes to:

\nPlease don't ╯︿╰`, `67032642378138990000`)\"\n >\n \n Copy\n \n \n
<a onclick=\"goTo('elsewhere')\">Please don't ╯︿╰</a>
\n

a tag with href but no link

\n

In other occasions, people use the href attribute without a URL or with a pseudo URL:

\nSeriously? (⊙_⊙)？`, `86821309195078480000`)\"\n >\n \n Copy\n \n \n
<a href=\"javascript:goTo('elsewhere')\">Seriously? (⊙_⊙)？</a>
\n

This is even worse than the previous case as it just confuses the hell out of every crawler out there.

\n

using button

\n

You might think it’s a good idea to use a button to navigate the user, but let me tell you, that’s not a good idea either. The rule of thumb is that if the purpose is to do something on the current page, it could be a button. But if it’s takes users to another page or to an external site, it should be a link.

\nBut why? <( _ _ )> `, `74968693135261970000`)\"\n >\n \n Copy\n \n \n
<button onclick=\"goTo('elsewhere')\">But why? <( _ _ )> </button>
\n

any other HTML element

\n

It’s worth noting that you shouldn’t simulate a link using any other HTML element and add a click handler with JavaScript:

\nNOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#\\`O′)`, `68165252318563580000`)\"\n >\n \n Copy\n \n \n
<div onclick=\"goTo('elsewhere')\">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>
\n

This not only wrong for crawlers, but also messes up the screen readers and causes a lot of trouble for people with any vision impairment. So please just use a link with a proper URL.

\n

What is a proper URL? I hear you ask

\n

You saw we ruled out the pseudo URLs like javascript:doSomething(), but let’s take a look at URLs more closely.

\n\n \n Copy\n \n \n
http://example.com/old-school-url\r\n\r\nexample.com/page#section
\n

A URL contains these elements:

\n
    \n
  • A protocol (optional), which defines the protocol to be used for navigation such as http, or https.
    • \n
  • It also has a host, example.com or yashints.dev. A host is a name that one or some computers respond to. Usually it points to an IP address.
    • \n
  • It has a path to specific asset on that computer such as an HTML file, an image, CSS file or a font. But that’s not always the case, sometimes the path is handled via JavaScript and is used to replace part of the content in a page. This technique is called Single Page Application or SPA.
    • \n
  • Some URLs might contain another part such the second example above. That part which comes after the # sign, is called a fragment identifier. By itself a fragment identifier is not a piece of content. It just points to a specific part in the content such as a header.
    • \n
\n
\n

💡 Because fragments are not suppose to point to different content, crawlers ignore them altogether. This means for single page applications where they use fragment like routing, crawlers don’t follow them and that’s why people use techniques such as server side rendering or SSR to allow crawlers become aware of the page’s content.

\n
\n

Summary

\n

To sum it all up:

\n
    \n
  • Use proper link markup, a tag with href attribute.
    • \n
  • Do not use other HTML elements to navigate users.
    • \n
  • Do not omit the href attribute on an anchor tag.
    • \n
  • And last but not least, do not use fragment identifiers to load different content in SPAs if you can.
    • \n
\n

Hope you’ve enjoyed reading this and thanks for drooping by. Until next article, Ta.

","timeToRead":4,"frontmatter":{"title":"Links and JavaScript 🔗","unformattedDate":"2020-06-03T00:00:00.000Z","date":"Jun 03, 2020","path":"/links/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","links"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAIDBf/EABYBAQEBAAAAAAAAAAAAAAAAAAECA//aAAwDAQACEAMQAAAB2kolFjANj//EABsQAAIBBQAAAAAAAAAAAAAAAAECAwAQEiEx/9oACAEBAAEFAgAtRvlYdk1GWZj/AP/EABURAQEAAAAAAAAAAAAAAAAAAAAR/9oACAEDAQE/AVf/xAAYEQACAwAAAAAAAAAAAAAAAAAAEyExYf/aAAgBAgEBPwG4Eaf/xAAaEAEAAgMBAAAAAAAAAAAAAAABABECEDES/9oACAEBAAY/AnySnu8k7UtWf//EABsQAAICAwEAAAAAAAAAAAAAAAABESEQMXFB/9oACAEBAAE/IUsNN30tohMbB9f9CUE+n//aAAwDAQACAAMAAAAQ/wAf/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxAf/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARITH/2gAIAQIBAT8QNsusOf/EABsQAQEAAgMBAAAAAAAAAAAAAAERACEQMUGR/9oACAEBAAE/EFumQEFNY69vknBmx+40oTQG+scLE9Gf/9k="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/ded954c9096452afa1ce0e02c9b7791f/84808/link.jpg","srcSet":"/static/ded954c9096452afa1ce0e02c9b7791f/9e0f0/link.jpg 750w,\n/static/ded954c9096452afa1ce0e02c9b7791f/84808/link.jpg 960w","sizes":"(min-width: 960px) 960px, 100vw"},"sources":[{"srcSet":"/static/ded954c9096452afa1ce0e02c9b7791f/cbeef/link.webp 750w,\n/static/ded954c9096452afa1ce0e02c9b7791f/f07e3/link.webp 960w","type":"image/webp","sizes":"(min-width: 960px) 960px, 100vw"}]},"width":960,"height":540}}}}}},{"node":{"id":"55d486ce-6cdf-536f-9251-83e8572adea6","html":"

Microsoft Build went on fully online and it came with some really exciting announcements. For us developers some of these can bring massive efficiencies. So let’s see what’s on offer.

\n\n

WSL2

\n

Windows Subsystem for Linux v2 (aka WSL2) is here with a ton of awesome features allowing developers to have a really great experience working in a side by side Windows/Linux environment.

\n
    \n
  • No Hyper-V image is needed to run docker containers
    • \n
  • GPU Support
    • \n
  • 100% system call compatibility
    • \n
  • Increased I/O performance
    • \n
\n

Linux GUI apps in Windows

\n

This was really an exciting announcements. Microsoft is adding a full Linux Kernel to its Windows Subsystem for Linux v2 (aka WSL2) with GUI support and GPU acceleration.

\n

This will be enabled without us having to use X11 forwarding and it’s mainly designed for developers to run Linux integrated development environments alongside regular Windows apps.

\n

\n \n \n \n \n \r\nImage from Microsoft’s official blog

\n

Winget, Microsoft’s package manager

\n

This is probably one of those controversial topics where people will say: oh another package manager. But Microsoft believes they have considered all options and this decision was made with lots of considerations.

\n

You can install winget via it’s App Installer package. You can also join their insider program which contains the winget by default.

\n

You can easily add your package to this package manager by following their instructions on their GitHub repository and create a PR containing your package’s information and link to download.

\n

Just so you know how excited people are, there are already 228 open PR’s and 541 closed. Of course not all of those PR’s have been packages, but even so, it’s a lot of packages submitted already.

\n

Microsoft’s new PowerToys Run launcher

\n

Microsoft just released a new Spotlight-like launcher app for Windows 10. This launcher is part of a series of apps which come with the PowerToys tool set.

\n

It’s still preview, but you can install it today. Jump into this page and download the msi file, then install it.

\n

Or if you like to do it a bit more fancy, just run this in your terminal:

\n\n \n Copy\n \n \n
WinGet install powertoys
\n

Remember this requires winget to be installed to work.

\n

Once installed, press Alt + Space and you’ll get this beautiful launcher:

\n

\n \n \n \n \n \r\nImage from Microsoft blog

\n

Others

\n

There were dozens of other stuff announced, but here are some of the developer related ones:

\n
    \n
  • Blazer WASM is released
    • \n
  • MAUI makes mobile app development easier
    • \n
  • Visual Studio is becoming Visual Studio Codespaces
    • \n
  • GitHub Codespaces brings amazing developer experience right from your browser
    • \n
  • GitHub Discussions for brainstorming feature ideas, help new users
    • \n
  • Code scanning and secret scanning on GitHub on private repositories
    • \n
  • GitHub Private Instances – a fully managed environment for enterprises
    • \n
  • GitHub Actions for Azure are now integrated within: Visual Studio Code, Azure CLI, and the Azure Portal. This makes it easier to deploy from GitHub to Azure!
    • \n
\n

Hope this has given you some pointers to go play with some of these amazing features and till next time 👋🏽.

","timeToRead":4,"frontmatter":{"title":"Microsoft Build 2020 highlights 🔣","unformattedDate":"2020-05-23T00:00:00.000Z","date":"May 23, 2020","path":"/build2020/","author":"Yaser Adel Mehraban","tags":["showdev","microsoft","build"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABtUlEQVR42lWSYW/aMBCG8///wz5sH6tJkzpVg6K1pHRNqAqUMCgkISQkduz47DgMSlVN2s4GqlY6S+fzPeez73UoB1rJNyuFZMbUwcpKMag51OVbwtFBCpwTo97xqjyRstHDh/X4MYdG04884QeYAwOEFbFdoH/gKZf1bnN9Gf1yY3Rway88VsceHVymN6m5bIT+A81O1BtzZssLrWdTMp9TaBpMYKArtamUZpY3ML4KQ3r7gk5akHiVYhLFoqByBikpqQAkC1zPr5RXa2J6YhZWlWrq7X6z2/cfBt3rTrf7M8mKZF4nqcxX02jixxkNl+lwMnv5+8/3bsbB8AOM0TQn7o172Tr37++XWe63lqNRvvIupheffofZKIq+3PVAyvaPb2Ec2n5PcLPd9/t3nfb3ntuZPj3hPYtFcuuNWmdnM+8qTNZBmrbpuu/13G4np5QJwE9xzIOlLjkEwdj3vXj+SAefKWOVVJiSEcYkztlMu6AsmASLKMJnWxgcIwYwf0u4KFjFWL4afEUEz7AAN7OwsjnlYJxyYaTFLWyPlRWWURgVNdbGkZZHO2jOyMFUtA4a4fAfPGFL7CLoLwcAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/475d9ada33dde9cbf03e0d0b43005d41/f0d4e/build.png","srcSet":"/static/475d9ada33dde9cbf03e0d0b43005d41/f5ed6/build.png 750w,\n/static/475d9ada33dde9cbf03e0d0b43005d41/f0d4e/build.png 1024w","sizes":"(min-width: 1024px) 1024px, 100vw"},"sources":[{"srcSet":"/static/475d9ada33dde9cbf03e0d0b43005d41/58c96/build.webp 750w,\n/static/475d9ada33dde9cbf03e0d0b43005d41/dbb52/build.webp 1024w","type":"image/webp","sizes":"(min-width: 1024px) 1024px, 100vw"}]},"width":1024,"height":561}}}}}},{"node":{"id":"7dfe0f5f-240c-5739-80c3-b98d87efe202","html":"

There may be many different reasons why you’d want to swap two variables be it just changing two item’s location in an array or when sorting collections. The traditional way is just define a new variable, assign one value to it, put one of the items in the old place, then put the temp variable back in the new place. But my question is, is that the only way?

\n\n

Traditionally

\n

The old way of swapping two variables is done like below:

\n\n \n Copy\n \n \n
let x = \"Yas\";\r\nlet y = \"Hints\";\r\n\r\nlet temp = x;\r\nx = y;\r\ny = temp;\r\n\r\nconsole.log(x); // Hints\r\nconsole.log(y); // Yas
\n

There is nothing wrong with this approach unless you’re doing it frequently.

\n

Without the temp variable

\n

There is another way you could swap two variables without any temp variable. But this only works with numbers:

\n\n \n Copy\n \n \n
let x = 10;\r\nlet y = 20;\r\n\r\nx = x + y;\r\ny = x - y\r\nx = x - y;\r\n\r\nconsole.log(x); // 20\r\nconsole.log(y); // 10
\n

This works two, but now we’re doing three additional operations to save some space, so you need to be careful when you use this one. Another thing to consider with this approach is the chance of having overflows with additions or subtractions (sum should be less than Number.MAX_SAFE_INTEGER which is 9007199254740991).

\n

Bitwise XOR

\n

Similar to above approach, you could use XOR to swap the two variables, but this also works only on numbers:

\n\n \n Copy\n \n \n
let x = 3;\r\nlet y = 5;\r\n\r\nx = x ^ y;\r\ny = x ^ y;\r\nx = x ^ y;\r\n\r\nconsole.log(x); // 5\r\nconsole.log(y); // 3
\n

If you’re not familiar with XOR, it works on bits. When you perform XOR two bits, it evaluates to 1 if they are different, and evaluates to 0 if they’re the same.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
xyXOR
000
110
011
101
\n

So let’s see why this works.

\n
    \n
  1. x = x ^ y
    2. \n
  2. y = y ^ x when x = (x ^ y), so the y = (x ^ y) ^ y which equals to x ^ (y ^ y) = x ^ 0 = x. So now our y is the old x.
    3. \n
  3. x = x ^ y when according to our first step x is not x ^ y, and so x = (x ^ y) ^ x = y ^ (x ^ x) = y ^ 0 = y.
    4. \n
\n

Is this better than the previous one, probably faster, but still limited to numbers only.

\n

ES6 destructuring

\n

Destructuring is an ES6 feature which is used a lot in many of the modern frameworks. In its core, it allows you to store array elements in variables.

\n\n \n Copy\n \n \n
let x;\r\nlet y;\r\n\r\n[x, y] = [1, 2, 3];\r\n\r\nconsole.log(x); // 1\r\nconsole.log(y); // 2
\n

Now considering how we can use this to swap the elements of an array:

\n\n \n Copy\n \n \n
let x = \"Yas\";\r\nlet y = \"Hints\";\r\n\r\n[x, y] = [y , x];\r\n\r\nconsole.log(x); // Hints\r\nconsole.log(y); // Yas
\n

This method is much elegant, but still creates two arrays to perform the swapping. So the efficiency might not be that good if you’re swapping many elements.

\n

Summary

\n

Just because a feature is available, doesn’t mean you should use it in every situation. Think about what is the most important factor in the solution you’re implementing. If it’s space, choose one which doesn’t take much, although it’s a bit slower.

\n

If the memory doesn’t matter but speed is important, choose accordingly. But definitely consider the situation before deciding on your approach.

","timeToRead":2,"frontmatter":{"title":"Swapping variables in JavaScript 🔁","unformattedDate":"2020-05-15T00:00:00.000Z","date":"May 15, 2020","path":"/swap/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","swap"],"thumbnail":null}}}]}},"pageContext":{"limit":10,"skip":20,"numPages":13,"currentPage":3}},"staticQueryHashes":[],"slicesMap":{}}