<img src=\"../path/to/image.jpg\" loading=\"lazy\">I’ve created a demo to show you how it works, look closely on the network tab.
\n![\"Lazy](\"/1827f7c8b9ed52279a64a0fab330f8d9/loading.gif\")
Here is a CodePen which contains the code.
\nI’ve just used below bash script to hack together the HTML 🤷🏽♂️.
\nfor i in {400..499}; \r\n> do echo \"<img loading='lazy' \r\nsrc='https://placedog.net/${i}/${i}' height='${i}' width='${i}' />\"; \r\n> doneAbout the attribute
\nCurrently the images are fetched with different priority in Chrome, the ones which are not in the viewport have less priority. But they’re fetched as soon as possible regardless.
\nWith this new loading attribute, you can completely defer the loading of offscreen images (and iframes) to when they’re reached by scrolling:
<img src=\"../path/to/image.jpg\" loading=\"lazy\">\r\n<iframe src=\"https://placedog.net\" loading=\"lazy\"></iframe>You can use three values with this attribute:
\n- \n
auto: Default behaviour of the browser, equal to not including the attribute. \nlazy: Defer loading of resources until it reaches a calculated distance from viewport. \neager: Load the resource immediately \n
My Chrome version is 76.0.3809.100 as of writing this post, but if you have any of the previous version below 76, you can activate this using flags:
- \n
- For images 👉🏽
chrome://flags/#enable-lazy-image-loading\n - For iframes 👉🏽
chrome://flags/#enable-lazy-frame-loading\n
Feature detection
\nIf you want to use this attribute today, you can use below code to feature detect it and have a polyfill in place such as loading-attribute-polyfill.
\nif ('loading' in HTMLImageElement.prototype === true) {\r\n // use the attribute\r\n} else {\r\n // use polyfill\r\n}Prevent content reflow
\nSince the images are lazy loaded, if you haven’t set width and height for your image, the content might reflow when the image is loaded and fill its place. To prevent that to happen, simply set the required values on the image tag by either style or directly using width and height attributes:
![]("../path/to/image.jpg")
`, `4792709798682915000`)\"\n >\n <img src=\"../path/to/image.jpg\" \r\nloading=\"lazy\" width=\"200\" height=\"200\">\r\n\r\n<img src=\"../path/to/image.jpg\" \r\nloading=\"lazy\" style=\"height:200px; width:200px;\">iframe loading
\nThe same behaviour is applied to iframe when it’s used with loading attribute. However, there are times when an iframe is hidden for analytics purposes. Examples are they are very small (less than 4px in width and height), or they have display:none or visibility: hidden applied to them, or simply is offscreen using negative margin.
In these cases it won’t get lazy loaded even if you have used the attribute.
\nWhat’s the catch
\nThere are few points you have to consider when using lazy loading in general. Plus there are a few things you can’t do with the loading attribute as of now.
Can’t do
\n- \n
- You can’t change the threshold to load the resource for now since it’s been hard coded in the source. \n
- This can’t be used with CSS’ background image for now \n
Catches
\n- \n
- This might affect the third party ads since they will be lazy loaded too \n
- There will be side effect when printing 😉, as in the lazy loaded resources won’t be printed. However, there is an open issue you can follow. \n
What about other browsers?
\nFor now, Chrome is the only browser supporting this feature. Although there is an open bug for Firefox and nothing for Edge and IE.
\nHappy lazy loading everybody and make sure not to miss the catches 👋🏽.
","timeToRead":3,"frontmatter":{"title":"Native lazy loading is landed in Chrome","unformattedDate":"2019-08-25T00:00:00.000Z","date":"Aug 25, 2019","path":"/native-lazyloading/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","chrome","lazyloading"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAACRElEQVR42oWS30tTYRjH9090ZUQQQdKVEBL9C9FF0SSoM47nvO9wDdFyuh/mOKWFNStpboIu2o/cxubOds7Z2VZujqW5RjdeFEjNIlBjy6XbOds0y/XupCQpBg/vzcvn+32e5/vIAFs6vCCzDpk1yK7v/5IdBAiAK4OwiDCCqygi21ikhvNb/4chJxBcFffncV9OwW+3Bz6ZbGPjZh3lCiMhwBYPgwmm1OlKdzlmNK5Z8+j92O0zrw0Nmd4jqb4TGncGZzf29v8XhmxRwVYH6bls0vImNBSnmjLGo+mBxtn+0ymqMTXQpA0u4NEamuUgGE0Y2bTax2doK++xvLrbHOk65gQNT5Un54zHLeqzVykn6XhfXwdT/AcuAq7S5kp39N2yPtBadZciulOUFsq7R+7BZv7OuY7+4RasDVPrYPQH2DWXIUOlVCQrQM+Hm5PT0J99Mnh9woQZ/G+JeG10RD/xkOjklsipGkRB7NmZDOcrWPQnHtsEXAmEyzAsKjlx2G5/ZtbAUIFkiir669DzSRW9QjL7orrh/my0ZXps7wC9I0mwZTW31hP62MpV68mFN0geSQvSUlGWUv2B5+UX5tXdi9qLJucLjP8F6RwaiQx8w73LwPuF9C2T7kX0glAB0PlWpoSHdgqFKnvklV+21hKpMc+040qopmRW6/70KvAtkYEcCORJ3woIFpAiEfyuj4uGhKCPC7q42B4RZPKX5zt4VTbV8jiWvMZsKbni7oWK9VY56VSlnpFVb0KkkqJ2StRL8G/iwPSSNvtkYwAAAABJRU5ErkJggg=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/78f70ef2f2bafa692761cf7602393772/e0c1a/lazy-load.png","srcSet":"/static/78f70ef2f2bafa692761cf7602393772/e0c1a/lazy-load.png 730w","sizes":"(min-width: 730px) 730px, 100vw"},"sources":[{"srcSet":"/static/78f70ef2f2bafa692761cf7602393772/9fb36/lazy-load.webp 730w","type":"image/webp","sizes":"(min-width: 730px) 730px, 100vw"}]},"width":730,"height":478}}}}}},{"node":{"id":"a5f65ad5-7230-5b8d-8e21-01f67d24897a","html":"Sometimes you want to connect to internet without someone watching you. This can be due to restrictions applied by governments, ISPs, etc. Maintaining privacy while using internet is very important to some people, and for me personally, the experience was to bypass a ridiculous censor on sites like Twitter and software like Telegram.
\n\nSo I thought how hard can it be to setup a VPN server (because I didn’t want to pay $5 per month) for a web developer. After Googling a bit, I found out you could easily do this on AWS for free using OpenVPN. I started setting it up and a couple of mins later I had it up and running.
\n\n\nOpenVPN is a popular open-source tool that is well tested and give you a production ready VPN solution.
\n
So just to not forget how I did it, as usual I thought let’s write up something, and who knows, maybe it was useful to you too 😉.
\nSo are you ready?
\nAWS console
\nIf you don’t have an account on AWS (Amazon Web Services), go ahead and create one. It’s free, but you will need to have your credit card info handy.
\nOnce signed up, login and under the services menu look for EC2 (you can type and it will filter the services as you type).
\nClick on select button on the first one with the free tier eligible badge.
Selecting instance type
\nOn the next page click continue and select t2.micro from instance type list.
At this stage click on Review and Launch button.
\nLaunch the instance
\nSelect general purpose SSD from the pop up and click next. Now click Launch and you’ll see a pop up asking you to select a key pair. This is to let you access the instance later on.
Select create a new key pair (or an existing if you already have one), enter a name and click download key pair.
\nSave the .pem file somewhere safe as this is like a back door to your server 😁. Click Launch Instance and wait for the instance to go to running state.
Select your instance and click connect.
\nPreparation
\nYou’ll see a set of instructions on a popup on how to connect to your instance.
\nIn the instruction set they tell you to use PuTTY to connect to your instance using SSH. However, I already have Ubuntu set up in WSL (windows subsystem for Linux) and we can use that. Otherwise you can use PuTTY or even the web browser connection.
Before we do anything we need to set the permissions for our private key 👉🏽 .pem 👈🏽 file, otherwise it wouldn’t allow you to connect. If you’re using a Linux or Mac machine, simply run the following command:
chmod 400 {name-of-file}.pemFor the rest of you who are like me, right click on the .pem file and click Security > Advance. Then change the owner to yourself, click disable inheritance and remove all permissions. Click add and add yourself and give full control.
Connecting
\nOnce that’s done, open a command prompt, type bash and then enter the following command:
\nsudo ssh -i \"{name-of-file}.pem\" openvpnas@{serveraddress}.compute.amazonaws.comDon’t forget to replace the file name with whatever you’ve chosen previously and replace the name of server with what you got from the instruction popup.
\nfetchPizzas()\r\n .then((pizzas) =＞ {\r\n return sortByToppings(pizzas)\r\n .then((pizzas) =＞ {\r\n return checkDeliveryOptions(pizzas)\r\n .then((pizzasWithDelivery) =＞ {\r\n return checkBirthdayGift(pizzasWithDelivery)\r\n .then((pizza) =＞ {\r\n return sendToCustomer(pizza);\r\n });\r\n });\r\n });\r\n });A little bit of background
\nThere are many a times where we have a bunch of tasks to be executed sequentially. The examples are from File handling to calling databases multiple times based on the result of the previous call. Or calling multiple APIs in a sequence where one call is dependenat on another.
\nPrior to introduction of async/await, many used callbacks alongside setTimeOut to simulated the behaviour they wanted (aka callback hell). Later on people started to use promises which made the code much more readable but they would end up in the same place when the number of calls where high (aka promise hell).
Async functions
\nA function in JavaScript is async when it operates asynchronously via the event loop, using an implicit promise to return its result. Furthermore, the type of its result should be an AsyncFuncton object.
This function is nothing but a combination of promises and generators. I will not going into details of generators, but they usually contains one or many yield keywords.
Now lets see the async function in action. Assume we have a function which returns a string:
function hi() {\r\n return 'Hi from JavaScript';\r\n}\r\n\r\nhi(); // 'Hi from JavaScript'If we put async in front of the function, then it no longer returns string, it will be a promise which is wrapped around the string value automatically.
async function hi() {\r\n return 'Hi from JavaScript';\r\n}\r\n\r\nhi(); // Promise {<resolved>: \"Hi from JavaScript\"}Now in order to get the value from the promise we act like before:
\nhi().then(console.log); // 'Hi from JavaScript'You might be wondering how this can help to solve the promise hell. Just bare with me and we’ll get there step by step with examples so it’d be clear when we’re finished.
\nAwait
\nThe await makes JavaScript engine to wait until a promise is resolved/rejected and returns it’s result. This keyword can only be used inside an async function.
const doSomething = async () => {\r\n console.log(await hi())\r\n};\r\n\r\n// 'Hi from JavaScript'You might think since await forces the JavaScript engine to wait, it will have some cost on CPU. But that’s not the case because the engine can perform other scripts while waiting for the promise to get resolves/rejected. Plus this is way more elegant that using promises and .then.
async function using await inside a normal function, you will get a syntax error.function doSomething() {\r\n await hi(); // Uncaught SyntaxError: await is only valid in async function\r\n}A small catch
\nMost people who start working with async/await forget that they can’t invoke an async function on top level code. This is due to the fact that we can’t have await inside a normal function and the top level functions are normal by default.
let response = await hi(); // syntax error in top-level code\r\nconsole.log(response);What you can do however, is to wrap your code in an async IIFE (immediately invoked function execution) and call it right there:
(async () => {\r\n let response = await hi(); \r\n console.log(response); // 'Hi from JavaScript'\r\n ...\r\n})();Error handling
\nAs I said before, most async functions can be written as a normal function with promises. However, async functions are less error-prone when it comes to error handling. If an awaited call fails, the exception is automatically caught and the Error object will be propagated to the caller using the implicit return promise.
Prior to this, we had to reject the promise which was returned from the normal function and use a .catch in the caller. I’ve seen many places where the developers used a try/catch and throw a new exception which meant the stack trace would be reset.
async function hi() {\r\n throw new Error(\"Whoops!\");\r\n};\r\n\r\nasync function doSomething() {\r\n\r\n try {\r\n let response = await hi();\r\n return response;\r\n } catch(err) { \r\n console.log(err);\r\n }\r\n}\r\n\r\ndoSomething();Or you can avoid the try/catch because the promise generated by the call to hi becomes rejected. Then simply use .catch to handle the error.
async function hi() {\r\n throw new Error(\"Whoops!\");\r\n};\r\n\r\nasync function doSomething() {\r\n let response = await hi();\r\n return response;\r\n}\r\n\r\ndoSomething().catch(err => {\r\n console.log(err);\r\n});You can ignore the catch all together and handle all the exceptions using a global exception handler if you think that’s more suitable to your situation. Something like this which uses the onrejectionhandled property of WindowsEventHandlers mixin.
window.onrejectionhandled = function(e) {\r\n console.log(e.reason);\r\n}Promise.all compatibility
\nYou can use async/await alongside Promise.all to wait for multiple promises:
const responses = await Promise.all([\r\n fetch('yashints.dev/rss'),\r\n hi(),\r\n ...\r\n])If an error occurs, it propagates as usual, from the failed promise to Promise.all and then turns to an exception that you can catch using any of the above methods.
await can take in a “thenable”
\nSimilar to promise.then, if you have any object which has a .then method, await will accepts it. This is to support scenarios where a 3rd-party object which is not a promise, but promise-compatible (it supports .then), it would be enough to use it with await.
class Greeting {\r\n constructor(name) {\r\n this.name = name;\r\n }\r\n\r\n then(resolve, reject) {\r\n console.log(resolve);\r\n\r\n setTimeout(() => resolve(`Hi ${this.name}`));\r\n }\r\n};\r\n\r\nasync function greet() {\r\n const greeting = await Greeting('Yaser');\r\n\r\n console.log(greeting); // Hi Yaser\r\n};\r\n\r\ngreet();async class methods
\nYou can have an async class method. Just prepend it with async and you’re good to go.
class Order {\r\n async deliver() {\r\n return await Promise.resolve('Pizza');\r\n }\r\n}\r\n\r\nnew Order()\r\n .delivery()\r\n .then(console.log); // PizzaSummary
\nJust to quickly go through what we discussed so far:
\n- \n
asynckeyword makes a method asynchronous, which in turn always returns a promise and allowsawaitto be used. \nawaitkeyword before a promise makes JavaScript wait until that is resolved/rejected. If the promise is rejected, an exception is generated, otherwise the result is returned. \n- Together, they provide a great opportunity for us to write clean, more testable, asynchronous code. \n
- With
async/awaityou wouldn’t need.then/.catch, but just note that they are still based on promises. \n - You can use
Promise.allto wait for multipleasyncfunctions calls. \n - You can have an
asyncmethod in a class. \n
I know there are many great articles around async/await, but I tried to cover some items where I had to constantly remind myself of. Hope it will help you to have a centralised place for most of what you need to write clean asynchronous JavaScript.
Have fun exploring these points.
","timeToRead":4,"frontmatter":{"title":"6 points you need to know about async & await in JavaScript","unformattedDate":"2019-08-17T00:00:00.000Z","date":"Aug 17, 2019","path":"/js-async-await/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","async","await"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHKrFkFf//EABgQAAIDAAAAAAAAAAAAAAAAAAECABEg/9oACAEBAAEFAgLjKM//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGH/8QAGBAAAgMAAAAAAAAAAAAAAAAAAAESILH/2gAIAQEABj8CFHa//8QAGxAAAQQDAAAAAAAAAAAAAAAAAQARIUEgMYH/2gAIAQEAAT8hJo3SjaYl7Y//2gAMAwEAAgADAAAAENQv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFhEBAQEAAAAAAAAAAAAAAAAAAREQ/9oACAECAQE/EFLbn//EABsQAQEAAQUAAAAAAAAAAAAAAAERACBBUXGx/9oACAEBAAE/EBGjOA9xBAASdu560//Z"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/fb3883e15852de11a094b8a6a3d8aee8/52fd2/asyncawaitjs.jpg","srcSet":"/static/fb3883e15852de11a094b8a6a3d8aee8/c93cd/asyncawaitjs.jpg 750w,\n/static/fb3883e15852de11a094b8a6a3d8aee8/c41e3/asyncawaitjs.jpg 1080w,\n/static/fb3883e15852de11a094b8a6a3d8aee8/52fd2/asyncawaitjs.jpg 1200w","sizes":"(min-width: 1200px) 1200px, 100vw"},"sources":[{"srcSet":"/static/fb3883e15852de11a094b8a6a3d8aee8/11ba1/asyncawaitjs.webp 750w,\n/static/fb3883e15852de11a094b8a6a3d8aee8/089e1/asyncawaitjs.webp 1080w,\n/static/fb3883e15852de11a094b8a6a3d8aee8/823ad/asyncawaitjs.webp 1200w","type":"image/webp","sizes":"(min-width: 1200px) 1200px, 100vw"}]},"width":1200,"height":600}}}}}},{"node":{"id":"216f119b-1511-59ea-b804-655c3b9b17e9","html":"It’s been a while since one of the X can do that posts I’ve been publishing. Furthermore, Firefox Developer tools is just getting better and better everyday, so I thought it’s about time I write one for it.
\nSo, are you ready? 😎
\n\nHow to open it
\nYou can open the Firefox Developer Tools from the menu by selecting Tools > Web Developer > Toggle Tools or use the keyboard shortcut Ctrl + Shift + I or F12 on Windows and Linux, or Cmd + Opt + I on macOS.
\nPage Inspector
\nThere are many useful features in the page inspector (equivalent to Chrome DevTools inspect element), but there are a few which I use the most:
\nSearch for CSS classes
\nYou can use the search box right below the inspector tab to search for elements, classes and other selectors. But I mostly use it to search for elements with a specific class. This is very useful if you have multiple elements which visually look similar but have specific class, or if you can’t see it because it is hidden.
\n![\"CSS](\"/b874d25602de8b85fb5d72d8944e9c9c/css-class-search.gif\")
Filter styles
\nIn the section below, there is box for filtering styles which can be used to easily spot a particular style you might be looking for. The good thing is, it highlights the selectors and expands properties which lets you easily spot what you’re looking for.
\n![\"Search](\"/f5a3d6740361ac6d084301c7db987782/style-filter.gif\")
See colour codes in different formats
\nOne of my favourites is this little nugget of gold. With this you can easily Shift + click and see all different types of colour representation including name, hex, rgb, and hsl. Of course not all colours have names, you in some cases you only see the other ones.
![\"Colour](\"/519a544dca2564e2c5891ef89f254bbd/colourrep.gif\")
Cool hah?
\nWeb Console
\nWho doesn’t love the console in the browsers’s developer tools. It’s used for logging, calculation, evaluation and much more.
\nStyling console messages
\nYou can get fancy with the messages in the console by applying CSS styles to them. This becomes important when you have heaps of logs and want to highlight a specific part by a different style for example.
\n![\"Adding](\"/c98852ac8be49189f2a44d6f1ac3bb27/console-style.gif\")
Note that you already have console.info, console.warn and console.error at your disposal. So this will be a level above what you can get with those.
![\"console](\"/96fb71566bd9667b5a1ae0a9705c97da/console-msg.jpg\")
Search in history of commands
\nThis one is helpful if you have typed many commands and want to search between those commands. Simply type all or part of the command you’re looking for and it shows you all that matches that phrase.
\nPress F9 on windows or CTRL + R to open the search box. Then type your term and if the count on the right hand side shows you have results, you can move between those by pressing the F9 and SHIFT + F9 on windows. For Mac users, navigate between those using CTRL + R and CTRL + S.
\n![\"search](\"/8efaad5bf616d8af11a6d08a4756be07/console-search.gif\")
PS: I am just using arrow keys because F9 is mapped to pause and play on my recording software and I am just too lazy to change that 😁.
\nScreenshot of the whole page
\nTo get a screen shot of the whole page, view port, or just an element, all you need to do is type :screenshot and pass the parameter you like. Combinations are:
:screenshot //the visible part of the page\r\n:screenshot --fullpage // whole page even invisible parts\r\n:screenshot --selector .css-selector // only one element (including its children)![\"taking](\"/98703d3a1343cc27253858545f50356e/screenshot.gif\")
Find out more about other parameters you can pass to it in the documentation.
\nAnd of course you can take the screenshots using photo icon on the left side of the console in the above picture too.
\nJavaScript debugger
\nApart from the above two sections, like any other developer tools, is the debugger section where you could look into source code to see why something is happening the way it shouldn’t or just simply test out something.
\nPretty print minified code
\nTo prettify a minified file, click this icon: {} in the source pane. The debugger will format the source and display it as a new file with a name like: ”{ } [original-name]“.
![\"Pretty](\"/612c8fa42b081fefac862d958bae7769/pretty-print.gif\")
Search for files/functions
\nTo search for a specific file, simply press CTRL + P (or CMD + P on a Mac). The display panel shows a list of files matching the search term as you type which you can choose. Just press Enter to open the file.
\n![\"Searching](\"/d896579b21ae48757fc069fe487aadcf/search-file.gif\")
XHR (XMLHttpRequest) breakpoint
\nSometimes you need to figure out what happens when you visit/send a request to a particular URL. Once set and the URL is hit, the execution will stop so you can see the state of the application at that point.
\nJust click on the + in the XHR breakpoint section or if you want to enable it for all URLs, just tick the ‘Pause on any URL’ checkbox.
\n![\"URL](\"/4bfcdd2487eb43d6146affb30b178147/urlbreakpoint.gif\")
Performance tool
\nThe performance tool is where I usually spending most of my time in. As you might know, I’ve been actively working on web performance and also have a series of posts on some important aspects of it.
\nHowever for the purpose of keeping this post short (pardon the pun 😁), I will only point to two of the ones I regularly use. You can find out more about the rest in the official docs.
\nWaterfall tab
\nBefore you get to see these tabs, you should record a page’s load by pressing the ⏱ icon. Once it’s done, you will see the waterfall tab by default. Along the X axis is time.
As you can see, all sorts of the stuff which browser has done such as running JavaScript, updating layout, garbage collection, and so on is shown in the view. You can find out how your application is performing on load and what type of things take the most time to finish easily in this view.
\nThe good thing is that each category is coloured differently so you can spot them easily in each category.
\nFor a full reference of what each colour represents, refer to the markers table on the docs.
\nCall tree
\nYou can see a call tree of all the functions which has been called from top to bottom in this view. The main purpose of this view is to show you which function has taken the most time executing. By analysing these calls, you can find bottlenecks in your code.
\nYou can see in the result table that each row represents one function and the order is highest to lowest by the number of samples which has been taken while the function was executing. From docos:
\n\n\nTotal Time is that number translated into milliseconds, based on the total amount of time covered by the selected portion of the recording. These numbers should roughly be the same as the number of samples.
\n
\nTotal Cost is that number as a percentage of the total number of samples in the selected portion of the recording.
\nSelf Time is calculated as the time spent in that particular function, excluding its children. This comes from the captured stacks where this function is the leafmost function.
\nSelf Cost is calculated from Self Time as a percentage of the total number of samples in the selected portion of the recording.
Miscellaneous
\nThere are heaps of other stuff which is outside of scope of a single post. But I want to point out a few of the other useful things you can do with Firefox Developer Tools.
\nAccessibility Inspector
\nThe Accessibility Inspector allows you to access important information exposed to assistive technologies on the current page via the accessibility tree, which lets you to check what’s missing or needs improvements.
\nYou can click on the icon and the layout will be toggled in the page for you to see the grid with lines separating each cell:
\n![\"Toggle](\"/550baee639c0fb6c3f4c624642b9f338/gridview.gif\")
By default line numbers and area names are hidden. But you can check the two checkbox on the right to enable these.
\nFirst of all let me apologise for not writing as frequent as I would’ve liked. It’s been a crazy busy couple of weeks and I had heaps of fun speaking at DDD Perth 2019.
\nThat taken care of, this time I thought let’s go through the new features which are added into the ECMAScript 2019 (aka ES2019 or ES10), because they’re super exciting and make our lives much easier 😎.
\n\nTLDR;
\nAt a glance, this version adds a few built-in functions on Array.prototype, flat and flatMap. Then we have Object.fromEntries for directly turning the return value of Object.entries into a new Object.
We also have trimStart and trimEnd on String.prototype over the widely used non-standard versions String.prototype.trimLeft and trimRight.
Another exciting feature is optional catch binding parameters. In addition to those, there are some JSON improvements, addition of Symbol.prototype.description which allows you to specify a description for your symbol, JSON.stringify returns well-formed UTF-8 regardless of input, and at last clarifying Function.prototype.toString by requiring that it either return the corresponding original source text or a standard placeholder.
So if you’re ready let’s dig in.
\nArray.prototype.{flat, flatMap}
\nflat() is a new method which let’s you create a one-dimensional array from a multi-dimensional one.
Imagine we have an array like below:
\nconst myArray = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, 12]]]];Prior to flat if you wanted to achieve this, you had to do something like this:
const myNewArray = [].concat.apply([], myArray)\r\n// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]Or:
\nvar myNewArray = myArray.reduce(\r\n function(prev,curr) {\r\n return prev.concat(curr)\r\n }\r\n)\r\n// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]With this new addition, it would be as simple as:
\nvar myNewArray = myArray.flat(4);\r\n// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]You can also chain multiple calls:
\nvar myNewArray = myArray.flat().flat().flat().flat();\r\n// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]The argument into the flat function just specifies how deep it should look into the array. If you’re not sure how deep the array is, simply use Infinity as input:
var myNewArray = myArray.flat(Infinity);\r\n// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]And if you don’t provide any input, by default it only goes one level deep:
\nvar myNewArray = myArray.flat(); \r\n// [1, 2, 3, 4, 5, 6, Array(4)];\n
flatMap on the other hand, allows you to map each element using a mapping function and then flattens the result into a new array. Think of it as chaining a map function with a single flat. However, it can be really helpful both in terms of usage and efficiency of execution.
let myArray = [1, 2, 3, 4, 5];\r\n\r\nlet mappedArray = myArray.map(x => [x, x * 2]);\r\n// [Array(2), Array(2), Array(2), Array(2), Array(2)]\r\n// 0: (2)[1, 2]\r\n// 1: (2)[2, 4]\r\n// 2: (2)[3, 6]\r\n// 3: (2)[4, 8]\r\n// 4: (2)[5, 10]\r\n\r\nlet mappedFlattenedArr = mappedArray.flat();\r\n\r\n// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]\r\n\r\nlet myNewArray = myArray.flatMap(v => [v, v * 2]);\r\n// [1, 2, 2, 4, 3, 6, 4, 8, 5, 10]String.prototype.{trimStart, .trimEnd}
\nThese methods are fairly obvious as to what they will do for us. Just keep in mind that we had trimLeft which will be replaced by trimStart and trimRight which will be replaced by trimEnd.
let message = ' This is a string with white space around ';\r\n\r\nmessage = message.trimStart();\r\n// 'This is a string with white space around '\r\n\r\nmessage = message.trimEnd();\r\n// 'This is a string with white space around'Object.fromEntries
\nThis method get an Iterable and transforms key-value pairs to an object. But let’s see what is an Iterable:
\n\nJavaScript supports a protocol by which objects such as arrays can be used by control structures such as
\nfor…ofand the spread operator...to loop through data sequentially. This is referred to as the iterable and the data structures that support this functionality are called iterables. While JavaScript provides maps, arrays and sets with an iterable property from the get-go, plain objects do not have this by default.
To see this in action:
\nlet entries = new Map([[\"name\", \"john\"], [\"age\", 22]]);\r\n\r\nlet newObj = Object.fromEntries(entries);\r\n// { name: 'john', age: 22 }A real life use case is when parsing query strings:
\nlet query = Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'));\r\n\r\n// { foo: 'bar', baz: 'qux' }Optional Catch Binding
\nOptional catch binding allows us to use try/catch without the error parameter inside the catch block.
Previously you had to use this syntax regardless of whether you cared about err or not, such as when you had to fall back to feature to support older browsers:
try {\r\n // try to use a web feature which may not be implemented\r\n} catch (unused) {\r\n // fall back to a less desirable web feature with broader support\r\n}With ES2019 you can do:
try {\r\n // ...\r\n} catch {\r\n // ...\r\n}Symbol.description
\nThis new read-only description property is a string returning the optional description of Symbol objects. This method is encouraged to be used instead of Symbol.prototype.toString\r\nwhere it wasn’t obvious what will be returned.
let description = 'This symbol represents an emoji 😁';\r\n\r\nlet mySym = Symbol(description);\r\n// Symbol('This symbol represents an emoji 😁')\r\n\r\nconsole.log(mySym.description);\r\n'This symbol represents an emoji 😁'Function.toString
\nThis method is a really useful one which returns the source code of a function. Imagine doing a troubleshooting on a block of code which is using a third party function. This can potentially help you to see the implementation (given it’s got source maps).
\nfunction myFn(emoji) {\r\n let msg = `${emoji} is hellav an emoji`;\r\n console.log(msg);\r\n}\r\n\r\nconsole.log(myFn.toString());\r\n\r\n// \"function myFn(emoji) {\r\n// let msg = `${emoji} is hellav an emoji`;\r\n// console.log(msg);\r\n// }\"Of course this doesn’t work for everything. If we try it for map function on array:
Array.prototype.map.toString();\r\n\r\n// \"function map() { [native code] }\"Since the implementation is not written in JavaScript, it will just show you that this function is written in native code.
\nJSON.stringify
\nThe team have done an improvement with Unicode characters and now this method can’t return malformed data.
\n// Non-BMP characters still serialize to surrogate pairs.\r\nJSON.stringify('𝌆')\r\n// → '\"𝌆\"'\r\nJSON.stringify('\\uD834\\uDF06')\r\n// → '\"𝌆\"'\r\n\r\n// Unpaired surrogate code units will serialize to escape sequences.\r\nJSON.stringify('\\uDF06\\uD834')\r\n// → '\"\\\\udf06\\\\ud834\"'\r\nJSON.stringify('\\uDEAD')\r\n// → '\"\\\\udead\"'Array.sort Stability
\nThe team has decided to change the sort implementation so that it would be stable (that is, elements that compare equal must remain in their original order).
\nconst grades = [\r\n { topic: 'math', grade: 10 },\r\n { topic: 'literacy', grade: 10 },\r\n { topic: 'chemical', grade: 13 },\r\n { topic: 'geography', grade: 12 },\r\n { topic: 'modern history', grade: 12 },\r\n { topic: 'art', grade: 13 },\r\n { topic: 'computer basics', grade: 14 },\r\n { topic: 'algebra', grade: 14 },\r\n];\r\n\r\ngrades.sort(a, b => a.grade - b.grade);\r\n\r\n// 0: {topic: \"math\", grade: 10}\r\n// 1: {topic: \"literacy\", grade: 10}\r\n// 2: {topic: \"geography\", grade: 12}\r\n// 3: {topic: \"modern history\", grade: 12}\r\n// 4: {topic: \"chemical\", grade: 13}\r\n// 5: {topic: \"art\", grade: 13}\r\n// 6: {topic: \"computer basics\", grade: 14}\r\n// 7: {topic: \"algebra\", grade: 14}Summary
\nIn general JavaScript is moving in the right direction for helping developers write more stable, reliable and consistent code. You can find more information on their GitHub repo here.
\nHope to see more awesome features in JavaScript and see you soon with another article.
","timeToRead":5,"frontmatter":{"title":"JavaScript: useful features of ECMAScript 2019 reviewed","unformattedDate":"2019-08-06T00:00:00.000Z","date":"Aug 06, 2019","path":"/es2019/","author":"Yaser Adel Mehraban","tags":["webdev","javascript","showdev","es2019"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB10lEQVR42k2R7U8TQRDGr+2+9CpSaG0JatTg3+4HP5oSqR8gEEBKCUqtBQlEMSZo6Nu99a7X291xZtsak83lsvv8npl5xtEPJei7MHDN0NXDoh5JPRZ4lP3Br1rcSHxCDSpJ3C8h6CwxV42IMZ6k4wtICiYQEHGYMDOW83trJ/5ZOECYVAtMGJ9DyE0oep/qqVe8/7F2960CCcN7e8iCyoyKBM+7stU4BNxEAmZ89FDafrcFkL//udrceQmQU5GEUICPLiRWY66GRWfZqiUnUscCpZ3zjePDZwCOSgvvG1uD3yug8vQUChMwatDWd/RiSEYPCdcJQ/j2en1//znCviebO68mGMGsYKY4P8JcY/92fmeZECd4yk3KQOcCT2w3Xn+/XW+fbu7tkUsWk6+ekExTcQvP29Z2WhWJNBIJhqxzw/6jOOahLyNMweTI1OQh5ToSJP4fzgIJinXbld0PmxdnT96+edE6qp0c17qd8lVv9eb68WW3fH5aaX+sZZHEFc53tkib4Bm/65UvWtWbr2snB/WD3Y3LTqV1VP/crv75tdI6rDUbT7+cVVPcVmi3hWnjujB05WEzEsPLfKlw/qQAU6YDYWIMCSdimScUhhLammMiYeD+BWwvoragF0BGAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/0010bff258a8fb3470b02787d5fbb94a/bda6f/es.jpg","srcSet":"/static/0010bff258a8fb3470b02787d5fbb94a/ebf29/es.jpg 750w,\n/static/0010bff258a8fb3470b02787d5fbb94a/1c35b/es.jpg 1080w,\n/static/0010bff258a8fb3470b02787d5fbb94a/bda6f/es.jpg 1280w","sizes":"(min-width: 1280px) 1280px, 100vw"},"sources":[{"srcSet":"/static/0010bff258a8fb3470b02787d5fbb94a/ad370/es.webp 750w,\n/static/0010bff258a8fb3470b02787d5fbb94a/10f26/es.webp 1080w,\n/static/0010bff258a8fb3470b02787d5fbb94a/5d501/es.webp 1280w","type":"image/webp","sizes":"(min-width: 1280px) 1280px, 100vw"}]},"width":1280,"height":710}}}}}},{"node":{"id":"d6a0252f-70c0-5d1a-861f-fe0802407d8b","html":"I’ve been sitting many interview sessions recently as part of our recruitment process and let me tell you it’s one of the hardest tasks I’ve ever had. In this post I wanted to share my findings and approach with you so we can all be more intelligent, inclusive and successful in our hiring process. And I am super keen to hear from you in comments 👇🏼.
\n\nContext
\nThe most important part of every interview is how to qualify a candidate without being too specific about a technology or framework. It’s about measuring their abilities and potentials rather than asking questions where any person can find somewhere and memorise the answer.
\nWe, at Readify, have a very specific and complex (if I may say so, which I just did 😁) process for hiring great fits, not just technical, but also culturally.
\nTo be able to do this, we need to be very careful with what is being asked during our technical interviews which is reached after a coding challenge and live coding session.
\nWhat do we ask
\nI don’t want to review our hiring process, more focus on what is being asked and how do we phrase them. There are plenty of sites which show you what to ask and unfortunately most of them have some predictable questions like:
\n\n\nWhere do you see yourself in 5 years?
\n
To be honest I don’t even know what happens for me in 5 months, let alone 5 years. So the question is what should we ask to be able to find out as much as we can about a candidate without falling into trap of asking fruitless questions.
\nTo determine whether someone is a good fit for the job, you want to draw them out, ask a mix of technical and situational questions, and listen closely to not only what they have to say but how they say it. The so called technical questions shouldn’t be around what, but about how. You want to evaluate how they perform in certain situations like solving a tough problem.
\nSo let’s begin.
\n1. What challenging problem have you had in the last couple of months?
\nThis question is like an ice breaker. It will put them at ease because they will be able to talk about something they’re comfortable with. This will also give you an opportunity to see how they go about solving a problem. You can go in more details in areas where you see value in, such as why did you choose this specific way to solve it, or why didn’t you try blah.
\nYou can get an overview of their team work too, did they collaborate on solving his problem, or did they help someone or get help from them.
\n2. What resources do you use to learn or sharpen your skills?
\nMany developers turn to websites such as StackOverflow, Medium, or Dev when they need help with something. Serious professionals will have their own selection of websites, online communities, social media feeds and other resources specific to their interests. The answer to this question will give you an indication of how engaged the candidate is with the broader IT community.
\nApart from those, Meetups, conferences, YouTube Channels, taking online courses, joining hackathons, plugging away at personal IT projects and many more can be discussed to see how the candidate keep themselves up to date, or find answer to a problem.
\n3. How do you explain X in simple terms?
\nThis is very good to see how they can simplify a technical term or subject. It’s very good to understand how deep they know something or how broad their knowledge is.
\nAnother aspect about this is to be able to communicate to stakeholders of a project. If you can explain a subject to your Product Owner, BA, Tester and so on, your whole team would be more successful delivering your project.
\n4. What qualities do you think is required for X?
\nThis questions will help you unravel some of the candidate’s expectations and also how they see the role. Some people may focus on certifications and technical abilities, while others may talk more about problem solving, attention to detail, communication and other general job skills. Look for candidates who give a nice balance of both.
\n5. What are X words your colleagues describe you with?
\nThis might sound cliché, but it will help you find out about some of their aspects not found in resume or social media profiles. It also gives insight into how the individual perceives themselves and the role they’re applying for. For example, if their answer focuses on their creative side but the position is very analytical in nature, the job may not be a good fit.
\n6. Tell us about a challenging situation you had which resulted in failure, such as missing a deadline or a promotion being rejected?
\nWe all deals with professional setbacks at some point in our career. What you want to know is how people handled — and what they learned from — those situations. The best employees are resilient, using setbacks as a springboard toward positive changes. So listen to not only the problem they mention, but also what they did after the disappointment.
\n7. What is your most and least favourite framework/product?
\nThis question helps you evaluate enthusiasm and knowledge. Do candidates become animated when discussing the advantages and disadvantages of certain tools/framework/library? Do they admire solid engineering, sleek design, intuitive user experience or another aspect of good technology?
\nWhat is their focus area in a tool, what they look for and what value they see in their favourite choice. These will give you great insight about them.
\n8. What are the pros and cons of working in an agile environment?
\nThis question can help you understand their perception of agile, how they operate in a fast pace environment which means lots of quick meetings and a steady stream of feedback from fellow team members. Most developers don’t like too many meetings especially if they’re doing SCRUM until they realise the benefit of each of those and how they help reduce the time waste.
\nA candidate’s answer to this question can tell you not only their level of understanding of this popular environment, but also their attitudes toward collaboration and communication.
\n9. What was your last presentation?
\nFirst of all, let me clear the fact that by presentation I don’t mean public speaking like conferences and meetups. However, having public speaking background is a bonus since it proves a couple of points.
\nToday’s tech workers can’t be lone wolves. They have to discuss changes with colleagues, coordinate with other departments, advocate for platforms they prefer and much more. While not everyone has to love public speaking, your new hire should be able to conduct research, put together a solid presentation and persuade stakeholders why X is better than Y.
10. How do you manage your work life balance?
\nThere many scenarios where one has to work harder than usual. A pressing deadline, on-call duties (fortunately we don’t have this), or simply someone who is addicted to spend all their time working are examples where we need to be careful about.
\nWhile you want dedicated team members, you should also seek employees who know how to relax and take care of themselves. Burnout is a very real problem in our industry, and top performers have good strategies in place to prevent it. As a follow up to their answer, you could talk about how your company supports a healthy work life balance (we do this via multiple ways) — something that can be very tempting for candidates with multiple offers.
\nSummary
\nThere are many questions you can ask during an interview, but those who target intelligence, creativity, and learning abilities are the most helpful ones. When interviewing a candidate, always look for their strength and quick learning ability. Don’t ask technical questions which their answer wouldn’t help you uncover the candidate’s potential. People can spend a couple of days and find out those questions and their answers from many sources. But the questions mentioned here and those similar in nature would help you find a good fit for your team.
\nAnd a final advice from truly yours, don’t be a jerk when interviewing a candidate. Don’t be biased on gender, background, appearance, and other factors which prevent you from finding good people.
","timeToRead":5,"frontmatter":{"title":"10 questions to ask in a technical interview","unformattedDate":"2019-07-17T00:00:00.000Z","date":"Jul 17, 2019","path":"/interview-questions/","author":"Yaser Adel Mehraban","tags":["recruitment","interview","questions"],"thumbnail":null}}},{"node":{"id":"a97edd92-c626-50e0-88f7-816e694d07af","html":"You might be wondering why I am writing less these days. I assure you, it’s not because I am getting lazy (I am ATM 🤩), it’s just that I am on a long overdue holiday. But to keep my juices going, I thought now that I am having fun, let’s write a fun post 😊.
\n\nIn this post I will go through some of the funniest yet unbelievable JavaScript snippets ever. Are you ready?
\n[] is equal ![]
\nArray is equal to not array 😂:
\n;[] == ![] // -> true💡 What’s happening?
\nThe abstract equality operator converts both sides to numbers before comparing them, and both sides will be converted to 0 for different reasons. Arrays are truthy, so the right hand side becomes false which then is coerced to 0. On the left however, the empty array is coerced to a number without becoming a boolean first, and empty arrays are coerced to 0, despite being truthy 🤯.
true is false
\nTrue is false:
\n!!'false' == !!'true' // -> true\r\n!!'false' === !!'true' // -> true💡 What’s happening?
\ntrue is truthy and is represented by value 1 (number), true in string form, is NaN. So:
true == 'true' // -> false\r\nfalse == 'false' // -> falsefalse is not the empty string, so it’s a truthy value, so:
!!'false' // -> true\r\n!!'true' // -> trueCool, ha? 😎
\nbaNaNa 🍌
\nLet’s create a banana:
\n'b' + 'a' + +'a' + 'a' // -> baNaNa💡 What’s happening?
\nThis one is an old trick, remixed. The expression is converted to \"ba\" + (+\"a\") + \"a\", and since \"a\" is converted to a number, it becomes NaN.
Let’s fail
\nYou wouldn’t believe this in your wildest dreams, but:
\n;(![] + [])[+[]] +\r\n (![] + [])[+!+[]] +\r\n ([![]] + [][[]])[+!+[] + [+[]]] +\r\n (![] + [])[!+[] + !+[]]\r\n// -> 'fail'💡 What’s happening?
\nIf we break this lot into smaller pieces, we notice that the following pattern occurs often:
\n![] + [] // -> 'false'\r\n![] // -> falseWe try adding [] to false, but because of a number of function calls internally, we’ll end up converting the right operand into a string:
![] + [].toString() // -> 'false'Thinking of a string as an array we can access its first character via [0]:
'false'[0] // -> 'f'The rest is obvious, but the i is tricky. The i in fail is grabbed by generating the string falseundefined and taking the element on index ['10'].
Array equality is evil 👾
\nArray equality is evil in JavaScript, see below:
\n[] == '' // -> true\r\n[] == 0 // -> true\r\n[''] == '' // -> true\r\n[0] == 0 // -> true\r\n[0] == '' // -> false\r\n[''] == 0 // -> true\r\n\r\n[null] == '' // true\r\n[null] == 0 // true\r\n[undefined] == '' // true\r\n[undefined] == 0 // true\r\n\r\n[[]] == 0 // true\r\n[[]] == '' // true\r\n\r\n[[[[[[]]]]]] == '' // true\r\n[[[[[[]]]]]] == 0 // true\r\n\r\n[[[[[[ null ]]]]]] == 0 // true\r\n[[[[[[ null ]]]]]] == '' // true\r\n\r\n[[[[[[ undefined ]]]]]] == 0 // true\r\n[[[[[[ undefined ]]]]]] == '' // true💡 What’s happening?
\nThe explanation behind this is rather long. So I introduce you to section 7.2.13 Abstract Equality Comparison of the specification.
\nparseInt is just bad
\nparseInt is famous by its quirks, I just mention one of the most famous ones:
parseInt('f**k') // -> NaN\r\nparseInt('f**k', 16) // -> 15💡 What’s happening?
\nThis happens because parseInt will continue parsing character by character until it hits one it doesn’t know. The f in f**k is the hexadecimal digit 15.
NaN is not a number
\nType of NaN is a number:
typeof NaN // -> 'number'💡 What’s happening?
\nExplanations of how typeof and instanceof operators work:
Comparison of three numbers
\nThis one is gold:
\n1 < 2 < 3 // -> true\r\n3 > 2 > 1 // -> false💡 What’s happening?
\nWhy does this work that way? Well, the problem is in the first part of an expression. Here’s how it works:
\n1 < 2 < 3 // 1 < 2 -> true\r\ntrue < 3 // true -> 1\r\n1 < 3 // -> true\r\n\r\n3 > 2 > 1 // 3 > 2 -> true\r\ntrue > 1 // true -> 1\r\n1 > 1 // -> falseYou can fix this with greater than or equal operator (>=):
3 > 2 >= 1 // trueRead more about Relational operators in the specification:
\n\nAnd that’s just some of the fun we can have with JavaScript. No wonder some people do not like it, since they don’t understand how it works 😂.
","timeToRead":3,"frontmatter":{"title":"JavaScript can do that?","unformattedDate":"2019-06-26T00:00:00.000Z","date":"Jun 26, 2019","path":"/js-can-do-that/","author":"Yaser Adel Mehraban","tags":["webdev","javascript","showdev"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUBAwT/xAAWAQEBAQAAAAAAAAAAAAAAAAABAAL/2gAMAwEAAhADEAAAAVTLBfmkWg//xAAaEAEBAAIDAAAAAAAAAAAAAAACAQADEiIx/9oACAEBAAEFAjsowuUQ6rmpdE7xvv8A/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8BV//EABYRAQEBAAAAAAAAAAAAAAAAAAABEv/aAAgBAgEBPwGxl//EAB4QAAEDBAMAAAAAAAAAAAAAAAABERICITGRQWFx/9oACAEBAAY/AoozeErEqmdexcaONCn/xAAaEAEAAwEBAQAAAAAAAAAAAAABABEhMVFx/9oACAEBAAE/ISup6GWw3M0lyjW84iH2dDBqqb5m29Z//9oADAMBAAIAAwAAABBc7//EABcRAAMBAAAAAAAAAAAAAAAAAAABEXH/2gAIAQMBAT8QTjpg/8QAGBEAAgMAAAAAAAAAAAAAAAAAAAERMVH/2gAIAQIBAT8QY1ZLT//EABsQAQEAAwEBAQAAAAAAAAAAAAERACExQVGx/9oACAEBAAE/EHiCqiGydc66dRCwvDBW4sAK8wtBV2Q59TDiLaAn5juSosJ7n//Z"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/b42bb6525b368ec041da166081559181/ec5b0/hdtew.jpg","srcSet":"/static/b42bb6525b368ec041da166081559181/ec5b0/hdtew.jpg 500w","sizes":"(min-width: 500px) 500px, 100vw"},"sources":[{"srcSet":"/static/b42bb6525b368ec041da166081559181/8e0eb/hdtew.webp 500w","type":"image/webp","sizes":"(min-width: 500px) 500px, 100vw"}]},"width":500,"height":283}}}}}},{"node":{"id":"9a746bea-89be-5b20-9358-1c21d605e305","html":"For most companies, ranking #1 is like a blessing to their business. However, most of the web developers are not aware of what should be done to reach to that point.
\nIn this article we go through 10 simple steps to increase the ranking organically rather than paying search engines to do that for us. So, are you ready 🧐?
\n\nWhat does HTML tags tell search engines?
\nCertain HTML tags tell search engines how to read your document properly and index it against specific keywords. In other words, when they crawl web, they will categorise your page with some keywords which then is surfaced when a user searches for them.
\nSome of these tags also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles like this for example 👇🏽.
\n\nJust a reminder to not miss my talk on micro apps and web components @NDC_Conferences #NDCOslo 👇🏽https://t.co/JjBDfpAhmd
— Yaser A Mehraban👨🏽💻🎤☕️😴 (@yashints) June 10, 2019
So let’s see what are these tags.
\n1. Title tag
\nPerhaps one the most important tags is title. This is used as a label for your page and defines how search engines like Google and Bing see your page and show it in their search result.
\nIn most cases, this tag reflects the title of the article/page itself. This isn’t exactly a bad practice, but you’ll miss out on a few opportunities to score big in search engines like Google.
\nThe question which comes up is, does it have to be the same as keywords. And the answer is absolutely not. However, it’s good to make sure you’re not confusing the reader 😉. But this gives opportunity to expand on what your page is relevant to for the search engine. Title should be short anyway, so having different but related tags makes it accessible to a wider range of searches.
\nA normal title tag is shown below:
\n<title>Your Title Text for Search Engines</title>It sounds very simple right? Well as simple as it looks, below are the points you have to consider when writing your title:
\n- \n
- Use only one title tag \n
- Try to create a unique title \n
- Don’t use your title keywords as your meta tags too (read further on tags) \n
- Make it relevant to content \n
- It’s good to keep it under 60 characters \n
- Try to not use stop words \n
- Show the branding last \n
- Make it readable \n
- Use dates, numbers and questions if relevant \n
Here is an example of one of my articles being the first result on Google 😍:
\n2. Meta description tags
\nAs I mentioned above, having description tags is really helpful to expose your page to a wider range of searches in addition to title.
\n<meta\r\n name=\"description\"\r\n content=\"Key HTML tags to have better SEO.\"\r\n/>For example, above is a tag where someone tried to highlight “Key HTML tags” and “better SEO” phrases and also to be displayed in search results.
\n3. Header tags
\nYou should not underestimate header tags. They are often used to break up the content to make it easier to read. Imagine reading my article in one giant paragraph rather than these nicely separated pieces.
\nIt’s been discovered that about %55 of the users will spend 15 seconds at most skimming your text. In terms of SEO, header tags are what most search engines use to help determine segments of content and create featured rich snippets.
\nThese tags are as follows:
\n- \n
<h1></h1>– Usually is used for webpage titles. \n<h2></h2>– Highlights the topic of the content following it. \n<h3></h3>– Reflects points in regards to the topic. \n<h4></h4>– Supports points from<h3>. \n<h5></h5>– Not often used, but great for supporting points of<h4>\n
4. Alt tags for images
\nThis is often the most important part of an image tag not just for SEO but also for accessibility. Unfortunately, search engines cannot determine what images are showing. That’s when the alt tag comes handy.
For example:
\n<img src=\"cute-puppy.jpg\" />Search engines wouldn’t know whether this image is showing a cute puppy or a cat. So adding alt tag would help them understand it and use it for categorisation.
<img\r\n src=\"cute-puppy.jpg\"\r\n alt=\"Such a cute puppy\"\r\n/>Above tag will correctly help search engines identify what the image is about. This will help to show this image when someone is trying to search for a cute puppy using Google images for example.
\n5. Hyperlinks
\nAlthough it doesn’t look like it, hyperlinks are vital, not only to external content, but also to your own content. To give you an example, when I posted my first of series on web performance on Dev community, I had links to other articles on my site. That resulted in a spike of traffic to my site which was basically helping my natural traffic to go up and also help the search engine link these articles together.
\nIn its core, they are like you’re voting for other content, so use it in your benefit and make sure the linked content is relevant.
\n<a\r\n href=\"https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0\"\r\n>\r\n My previous post about pet projects\r\n</a>If for some reason you didn’t want the search engine to make a connection with what you’re linking to, consider using rel=nofollow. This tells the search engine to not link your current article with the link destination. In other words, you won’t help improve the domain authority of an external site.
<a\r\n href=\"https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0\"\r\n rel=\"nofollow\"\r\n>\r\n My previous post about pet projects\r\n</a>6. Open graph tags
\nThese tags are great for showing nicely formatted version of your page on social media. You might have seen it before, but here is how my post appears on LinkedIn 👇🏽:
\nHere is an example of an open graph tag:
\n<meta\r\n name=\"og:title\"\r\n property=\"og:title\"\r\n content=\"The Title of Your Article\"\r\n/>Now if this article is shared on something like Facebook, the social site will pull the title directly from this tag. As you saw from the tweet I showed above, open graph supports things like descriptions and images as well. It simply gives you customization options if your webpage is shared on social media.
\n7. Robots Tag
\nThis tag is useful if you want to prevent your page/article from being indexed. These can stop crawlers from sites like Google or Bing from accessing the content. You might now ask why would you want that?
\nSome articles might not be the most influencing for rankings. There are veraity of reasons why you might want this, but let’s say you have an article which lacks quality and you want to get some user’s opinion before it appears on any search engine results.
\n<meta name=\"robots\" content=\"noindex, nofollow\" />8. Canonical tags
\nA canonical tag is great for organizing your content and prioritizing one web page over a duplicate web page. Just to give you an example, I always like to post my posts on my website first before I post it somewhere else.
\nI do it because of a couple of reasons. The most important one is that the reach might be higher on those platforms like Dev.to. However, I want search engines to know that this post is not a separate one, and in fact it is a copy of what is published on my website first. In other words, it is a way of telling search engines that a specific URL represents the master copy of a page.
\nAnother reason why you should use this tag is that search engines might crawl your website using any of these URL forms:
\n- \n
- http://www.yashints.dev \n
- https://www.yashints.dev \n
- http://yashints.dev \n
- http://yashints.dev/index.html \n
- http://yashints.dev/index.html?param=value \n
To a human, all of these URLs represent a single page. To a crawler, though, every single one of these URLs is a unique page. Even in this limited example, we can see there are five copies of the homepage in play. In reality, though, this is just a small sample of the variations you might encounter.
<link\r\n rel=\"canonical\"\r\n href=\"http://yashints.dev/index.html?param=value\"\r\n/>So by putting above tag on my home page, I can tell search engines that this URL is representing the same and not a separate page.
\nHere is a good article going more deep into canonical tags.
\n9. Responsive site meta tags
\nLet’s first go through the fact that more than %80 of traffic in China comes through mobile devices. In Australia this number is %56. These numbers show us how important it is to pay attention to responsive design.
\nFor the same reason it’s important to let the search engines know that this site has responsive design available. This will ensure that the page is surfaces if a user is searching through a mobile device.
\n<meta\r\n name=\"viewport\"\r\n content=\"width=device-width, initial-scale=1\"\r\n/>Above tag is the minimum you will need to let search engines know your site is mobile friendly. It’s important to note that Google puts emphasis on websites that are mobile-friendly. And if you don’t have something readily available that people can view from a hand-held device, it will reflect your rankings in search.
\n10. Twitter cards
\nApart from open graph tags, Twitter has its own tags. Now that tweets can exceed historic 140 characters, these cards are a nice extension that allows your tweets to stand out in the crowd of common text.
\nHere are a few of them:
\nSummary
\n<meta name=\"twitter:card\" content=\"summary\" />\r\n<meta name=\"twitter:site\" content=\"@flickr\" />\r\n<meta\r\n name=\"twitter:title\"\r\n content=\"Small Island Developing States Photo Submission\"\r\n/>\r\n<meta\r\n name=\"twitter:description\"\r\n content=\"View the album on Flickr.\"\r\n/>\r\n<meta\r\n name=\"twitter:image\"\r\n content=\"https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg\"\r\n/>Example:
\nPlayer
\n<meta name=\"twitter:card\" content=\"player\" />\r\n<meta\r\n name=\"twitter:title\"\r\n content=\"Bison in Yellowstone\"\r\n/>\r\n<meta\r\n name=\"twitter:site\"\r\n content=\"@BrightcoveLearn\"\r\n/>\r\n<meta\r\n name=\"twitter:description\"\r\n content=\"Bison walking in Yellowstone National Park.\"\r\n/>\r\n<meta\r\n name=\"twitter:player\"\r\n content=\"https://solutions.brightcove.com/bcls/twittercards/bison.html\"\r\n/>\r\n<meta name=\"twitter:player:width\" content=\"360\" />\r\n<meta\r\n name=\"twitter:player:height\"\r\n content=\"200\"\r\n/>\r\n<meta\r\n name=\"twitter:image\"\r\n content=\"https://solutions.brightcove.com/bcls/twittercards/bison.jpg\"\r\n/>Example:
\nFor more info on these tags, visit their official documentation.
\nSo no keyword tags?
\nYou might wondering why I didn’t mention keyword tags. That’s because most search engines like Google use content to categorise the page. So having them doesn’t add any value that much and in fact to many of them just adds extra weight to your pages.
\nSummary
\nYou now know 10 tips to improve your SEO organically and save some money. So head to a bar or coffee shop and spend it responsibly 😉.
\nAnother tip I forgot to mention was around people who use a SPA framework. If you want to have SEO for your site, you will need to define some critical paths (i.e. homepage) and create a server side rendered of that page which gets replaced by the normal route on client side. This way crawlers would be able to index your statically generated file while your end users still have the benefit of fast interactions on client side.
\nTill next post 👋🏼.
","timeToRead":8,"frontmatter":{"title":"Boost your ranking with these 10 tips","unformattedDate":"2019-06-11T00:00:00.000Z","date":"Jun 11, 2019","path":"/seo-tips/","author":"Yaser Adel Mehraban","tags":["webdev","seo","showdev"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAARABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAECAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAHuog0BWoaA/8QAGBAAAgMAAAAAAAAAAAAAAAAAARAAAhH/2gAIAQEAAQUCM1WZf//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8BH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8BH//EABQQAQAAAAAAAAAAAAAAAAAAADD/2gAIAQEABj8CH//EABsQAAICAwEAAAAAAAAAAAAAAAABMUEQIWFx/9oACAEBAAE/IdKFxikC8FBUUiP/2gAMAwEAAgADAAAAECAAAP/EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQMBAT8QH//EABQRAQAAAAAAAAAAAAAAAAAAACD/2gAIAQIBAT8QH//EAB4QAAICAQUBAAAAAAAAAAAAAAABETEhQVFhcZGx/9oACAEBAAE/EKYkuxu70WVOS30Ea0elUpJ8FxV2VP/Z"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/ade4d6c9fffc2fdc0b7e342f5b1ca365/061d6/seo.jpg","srcSet":"/static/ade4d6c9fffc2fdc0b7e342f5b1ca365/061d6/seo.jpg 546w","sizes":"(min-width: 546px) 546px, 100vw"},"sources":[{"srcSet":"/static/ade4d6c9fffc2fdc0b7e342f5b1ca365/d4db1/seo.webp 546w","type":"image/webp","sizes":"(min-width: 546px) 546px, 100vw"}]},"width":546,"height":469}}}}}},{"node":{"id":"edd61449-211d-533a-8170-5752eb355a9f","html":"Let’s face the reality, we can’t live without passwords these days. In fact our entire online life is depending on them. But with passwords, comes heaps of problems not only for users, but also for us developers.
\n\nA bitter fact
\nMost people have a weak password (and probably the same) used for many websites they’re member of. Social media, email, productivity tools, you name it, they all have different policies around passwords and majority of users find a way to bypass it using a weak password, or a strong one written on a post it 🤷🏽♂️.
\nIn fact 81% of all data breaches that happen due to hacking, leverage stolen or weak passwords.
\nThere is a better way
\nBut thanks to great efforts from W3C and FIDO, we’re not bound to use passwords for everything. Web Authentication API, aka WebAuthn is a fairly new specification which is introducing a new way of authentication without passwords, and also alongside them.
Google, Microsoft, Yubico and other big names in the industry are all part of the contributors to get this spec widespread. This API allows servers to register and authenticate users using public key cryptography instead of passwords.
\nWindows Hello, Apple’s Touch ID, Yubikey devices, are all examples of a different type of authentication mechanism which doesn’t require passwords. They use biometrics or hardware devices to be able to achieve this.
\nHow it works
\nFrom 1000ft, instead of using a password, you will use a key pair (public and private) which is generated for a website.
\nThe private key is stored securely on user’s device, whereas the public key along with a randomly generated credential ID is sent to a web server to be stored and used later for authenticating that particular user.
\nOverall, WebAuthn relies on three major parties:
\n- \n
- Authenticator (the device which is doing the authentication and verification) \n
- Relying party (the web application owner) \n
- Browser’s Web Authentication API \n
The flow is fairly simple, first step is registration, then it would be authentication.
\nRegistration a credential
\nSame as password authentication flows where the web server usually provides a form for user to enter their password which is sent back to the server for verification.
\nWith WebAuthn, it’s fairly similar, but instead of asking for a password, the relying party asks for a public key.
\n
The object which is returned from the Verifying the registration data by relying party\nOnce the public key is received along with other properties of registration data to the server, there is a procedure to validate this data. \nOf course the implementation depends on what language you’re using, but, there are some examples out there if you want to have an idea how to implement these steps. Duo Labs has provided full implementation in Go and Python. \nAuthenticating with WebAuthn\nAfter completing the registration, the user is able to be to authenticate to the site. During registration user has obtained an assertion which indicates they have the private key. This contains a signature using the mentioned private key. Web server uses the public key during registration to verify this. \nThe authentication flow looks something like this: \n
The The The most interesting part in this object is the transport property. The server can optionally indicate what transports it prefers, like USB, NFC, and Bluetooth. \nThe returned object is a For more info around this object refer to spec. \nValidating authentication data\nAfter the assertion is acquired, it is sent to server for verification. After being validated, the signature is verified with the stored public key. \nFurther reading and resources\nFollowing resources are a good starting point for any further reading: \n
Summary\nWe saw how simple and straight forward is to implement this amazing feature and I highly recommend if you’re working on a green field project definitely consider having this implemented and give users ability to live passwordless 🔥👊🏻. For the current products, this can be a turning point to gain more users into system by simplifying the most important part of their flow 😊. ","timeToRead":5,"frontmatter":{"title":"A world without passwords","unformattedDate":"2019-06-05T00:00:00.000Z","date":"Jun 05, 2019","path":"/webauthn/","author":"Yaser Adel Mehraban","tags":["webdev","webauthn","frontend","showdev"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAW2zdZyxQ//EABwQAAICAgMAAAAAAAAAAAAAAAIDAAEEERIUMf/aAAgBAQABBQJeKV2SV2HQ3Ft5s8jco1N//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAHhAAAQQBBQAAAAAAAAAAAAAAAQACERIQITEzYaH/2gAIAQEABj8CFtAq7Ll8T2xFcOaII7X/xAAbEAADAQEAAwAAAAAAAAAAAAAAAREhMUFRYf/aAAgBAQABPyFhIq6rpizS2pl6bfB4Rnb00Lyoq9D/2gAMAwEAAgADAAAAEKgv/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQMBAT8Qh//EABURAQEAAAAAAAAAAAAAAAAAABAR/9oACAECAQE/EKf/xAAcEAEAAgMAAwAAAAAAAAAAAAABABEhMUFRcYH/2gAIAQEAAT8QOrhZZHzUxb1dlHXYoshz4TnY5uBd1lTVY1GkSnuSB+mIVCDXq7n/2Q=="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/a5f40103ea42e2db324e4000350cc118/d7bd6/webauthn.jpg","srcSet":"/static/a5f40103ea42e2db324e4000350cc118/a83d8/webauthn.jpg 750w,\n/static/a5f40103ea42e2db324e4000350cc118/d7bd6/webauthn.jpg 1000w","sizes":"(min-width: 1000px) 1000px, 100vw"},"sources":[{"srcSet":"/static/a5f40103ea42e2db324e4000350cc118/80567/webauthn.webp 750w,\n/static/a5f40103ea42e2db324e4000350cc118/e18f2/webauthn.webp 1000w","type":"image/webp","sizes":"(min-width: 1000px) 1000px, 100vw"}]},"width":1000,"height":667}}}}}},{"node":{"id":"3044cabc-d627-5af0-8307-1cb11553053a","html":"You might already know that Angular 8 is out now, but what it means for you or your organisation is described below. \n\nIvy\nTo put your mind at rest, Ivy is not here yet. If you don’t know what is Ivy, it’s the Angular’s new renderer which promises a ton of improvements in term of how Angular renders the view. It is radically different from anything we have seen in mainstream frameworks, because it uses incremental Differential loading\nDifferential loading is a feature in which browser decides to use modern vs legacy JavaScript based on its own capabilities. \nThis is really important not just because we can use modern JavaScript but because we can get rid of all of those polyfills we’ve had to ship with our applications previously. \nIn short it takes advantage of the At runtime, Angular generates two script tags in your HTML: \n |
|---|