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)); // -1There are two facts you should know:
\n- \n
- This method does not run once it found the first matching element. \n
- It does not change the original array. \n
Syntax
\narray.findIndex(function(currentValue, index, arr), thisValue);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
thisvalue inside the function, otherwiseundefinedwill be passed. \n
Return value
\nIt will return the index of the found item or -1 if the callback function is not satisfied.
How it works under the hood?
\nWhen the findIndex is called with one or two arguments, the following steps are executed:
- \n
- Let
Obe ?ToObject(this value)\n - Let
lenbe ?LengthOfArrayLike(O)\n - If
IsCallback(predicate)isfalse, throw a TypeError exception \n - Let
kbe 0 \n - Repeat, while
k < len\n
- \n
- Let
Pkbe !ToString(k)\n - Let
kValuebe ?Get(O, Pk)\n - Let
testResultbe !ToBoolean(? Call(predicate, thisArg, « kValue, k, O »))\n - If
testResultistrue, returnk\n - Set
ktok + 1\n
- \n
- Return
-1\n
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.
\nBut I am back, and this time we’re going to review how to take a selfie from your webcam using Image Capture API.
\n\nImage Capture API
\nThere 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.
\nImage 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.
\nUsage
\nWe 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:
\nnavigator.mediaDevices.getUserMedia({ video: true })\r\n .then(mediaStream => {\r\n // Do something with the stream.\r\n })Next we need to get the visual parts of the media stream by calling getVideoTracks method of the mediaStream object:
const track = mediaStream.getVideoTracks()[0];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.
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:
\nconst 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 }] });When we’re done with settings, we can then create an instance of the ImageCapture object:
let imageCapture = new ImageCapture(track);Once that’s done, you can capture an image from your video feed by calling the takePhoto method:
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));Permissions
\nSimilar 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.
\nDemo
\nYou can see a working example of this in my CodePen below:
\n\nI 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.
Context
\nIntersection 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:
\nconst 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'));The problem
\nAs 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.).
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.
\nIntersection Observer V2
\nAs 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.
\nIntersection 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.
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'));Additional parameters
\nThe 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
How does it determine visibility?
\nDetermining whether the element is visible or not is not as simple as you might think. Based on the spec:
\n- \n
- If
falseis passed as the value oftrackVisibility, the element is considered visible. \n - If the target element has an effective transformation matrix other than
2Dthen 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
What’s the catch?
\nThis is in a draft state and still work in progress. Apart from Chrome, none of the other major browsers currently support it.
\nSummary
\nAlthough 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.
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\nBackground
\nTo 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.
\nScroll to Text Fragment
\nSo 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.
\nThis is the generic syntax:
\n#:~:text=[prefix-,]textStart[,textEnd][,-suffix]\r\n context |-------match-----| context\n\n💡 Square brackets indicate an optional parameter.
\n
Here is an example:
\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>And you can test it live by clicking here.
\nIf you want to target an exact text:
\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>You can also add an end text in which case the text directive refers to a range of text on the page.
\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>Use cases
\nSearch engines
\nWhen 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.
\nCitation / Reference links
\nLinks 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.
\nSharing a specific text or paragraph
\nSometimes 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.
\nNowadays 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.
\nSummary
\nAnd 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.
\nEnjoy 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\nBackground
\nIt’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.
\nIn 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.
\nAt 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.
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.
\nEnough background, tell me what’s this all about
\nLet’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
But how do you make a link?
\na tag with href
\nTurns 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.
<a href=\"/elsewhere\">A good link, YES ╰(*°▽°*)╯</a>a tag with href and event handler
\nFor those with special circumstances, they might sprinkle a little bit of JavaScript on top and use an event handler to navigate the user programmatically:
\n<a href=\"/elsewhere\" onclick=\"goTo('elsewhere')\">Okay ¯\\_(ツ)_/¯</a>This is fine as the link stays functional and you can upgrade the functionality using JavaScript.
\na tag without href
\nBut 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:
<a onclick=\"goTo('elsewhere')\">Please don't ╯︿╰</a>a tag with href but no link
\nIn other occasions, people use the href attribute without a URL or with a pseudo URL:
<a href=\"javascript:goTo('elsewhere')\">Seriously? (⊙_⊙)？</a>This is even worse than the previous case as it just confuses the hell out of every crawler out there.
\nusing button
\nYou 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.
\n<button onclick=\"goTo('elsewhere')\">But why? <( _ _ )> </button>any other HTML element
\nIt’s worth noting that you shouldn’t simulate a link using any other HTML element and add a click handler with JavaScript:
\n<div onclick=\"goTo('elsewhere')\">NOOOOOOOOOOOOOOOO!!!!!!!!!!!! (#`O′)</div>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.
\nWhat is a proper URL? I hear you ask
\nYou saw we ruled out the pseudo URLs like javascript:doSomething(), but let’s take a look at URLs more closely.
http://example.com/old-school-url\r\n\r\nexample.com/page#sectionA URL contains these elements:
\n- \n
- A protocol (optional), which defines the protocol to be used for navigation such as
http, orhttps. \n - It also has a host,
example.comoryashints.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
Summary
\nTo sum it all up:
\n- \n
- Use proper link markup,
atag withhrefattribute. \n - Do not use other HTML elements to navigate users. \n
- Do not omit the
hrefattribute 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
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":"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\nTraditionally
\nThe old way of swapping two variables is done like below:
\nlet 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); // YasThere is nothing wrong with this approach unless you’re doing it frequently.
\nWithout the temp variable
\nThere is another way you could swap two variables without any temp variable. But this only works with numbers:
\nlet 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); // 10This 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).
Bitwise XOR
\nSimilar to above approach, you could use XOR to swap the two variables, but this also works only on numbers:
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); // 3If 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.
| x | \ny | \nXOR | \n
|---|---|---|
| 0 | \n0 | \n0 | \n
| 1 | \n1 | \n0 | \n
| 0 | \n1 | \n1 | \n
| 1 | \n0 | \n1 | \n
So let’s see why this works.
\n- \n
x = x ^ y\ny = y ^ xwhenx = (x ^ y), so they = (x ^ y) ^ ywhich equals tox ^ (y ^ y) = x ^ 0 = x. So now ouryis the oldx. \nx = x ^ ywhen according to our first stepxis notx ^ y, and sox = (x ^ y) ^ x = y ^ (x ^ x) = y ^ 0 = y. \n
Is this better than the previous one, probably faster, but still limited to numbers only.
\nES6 destructuring
\nDestructuring 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.
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); // 2Now considering how we can use this to swap the elements of an array:
\nlet 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); // YasThis 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.
\nSummary
\nJust 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.
\nIf 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}}},{"node":{"id":"3fabe53b-b745-5c26-8ed8-75d0debab547","html":"String is one of the primitive types in JavaScript and we use it in every project we work on no matter what. But how familiar are you with the methods available in JavaScript to work with a string variable? Let’s have a quick look at those in this article.
Introduction
\nA primitive value such as “Yas” doesn’t have any methods or properties, mainly because it’s not an object. But with JavaScript, methods and properties are available because it treats primitive values as objects.
\nLet’s have a look at the simplest method you have most definitely used:
\nString length
\nThe length property returns the length of a string:
const alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\nconsole.log(alphabet.length); // 26Pay attention on how length property is available on a primitive type. Not all languages are following the same principle when dealing with such behaviour though. In PHP we have helper functions:
<?php\r\necho strlen(\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\");\r\n?>Finding a text in string
\nThere are a few methods to help you find a sub-string in a String. Let’s go through them and see what are their differences:
indexOf
\nThe indexOf method returns the index of the first occurrence of a specified text in a string:
const txt = \"Can you find Yas in 'dryasdust'?\";\r\nconsole.log(txt.indexOf('yas')); // 23There a few points you need to know here. First, JavaScript counts positions from zero, and second, indexOf is case sensitive.
const txt = \"Can you find Yas in 'dryasdust'?\";\r\nconsole.log(txt.indexOf('Yas')); // 13This method returns -1 if it can’t find the text:
const txt = \"There is no 0 in 11\";\r\nconsole.log(txt.indexOf('zero')); // -1You can pass a second argument to let the indexOf know where to start looking for the text:
const txt = \"We have SQL and no-SQL databases!\";\r\nconsole.log(txt.indexOf('SQl', 10)); // 19lastIndexOf
\nAs the name suggests, lastIndexOf is used to find the last occurrence of a text in a string.
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.indexOf('Jam')); // 21This method also returns -1 if it can’t find the text you’re looking for, and takes a second parameter to start the search. However, since this method starts the search backward, the second parameter acts as cutting the string from that position to the end:
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.lastIndexOf('Jam', 6)); // -1search
\nThe search method also searches the string for a text and returns the first occurrence of the text:
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.search('Jam')); // 13You might think that search and indexOf are the same. However, there are differences in these two:
- \n
searchdoesn’t accept any other parameter \nindexOfcannot take powerful search values such as regular expressions \n
That’s right, search will accept regex as argument as well, for example, to perform a case insensitive search you might want to use search instead of indexOf:
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(str.search(/jam/i)); // 9\r\n\r\nconsole.log(txt.indexOf('jam')); // -1You can also search for non usual patterns, e.g. finding any character that is not a word or whitespace:
\nconst txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.search(/[^\\w\\s]/g)); // 24endsWith
\nThe endsWith methods checks whether the string ends with the specified text. It returns true if it does, and false if it doesn’t:
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.endsWith(\"Stack!\")); // true\n\n💡 This method is case sensitive.
\n
startsWith
\nSimilar to endsWith, this method checks whether a string starts with the specified text. This method is also case sensitive:
const txt = \"JamStack's got Jam\";\r\nconsole.log(txt.startsWith(\"JamStack\")); // trueincludes
\nincludes allows you to check whether or not a string contains a specified text and is case sensitive:
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.includes(\"in\")); // true\r\nconsole.log(txt.includes(\"Jam\")); // true\r\nconsole.log(txt.includes(\"jam\")); // falselocaleCompare
\nlocaleCompare will compare two strings in the current locale. It returns a negative number indicating if the reference string occurs before the compare string, positive if it occurs after, and 0 if they are equivalent:
const a = 'réservé'; \r\nconst b = 'RESERVE';\r\nconsole.log(a.localeCompare(b)); // 1\r\nconsole.log(a.localeCompare(b, 'en', { sensitivity: 'base' })); // 0Extracting sub-strings
\nThere are three methods which allow you to extract part of a string.
\nslice
\nslice extracts part of a string and returns the extracted part in a new string. It takes two arguments, start position, and end position (the end position will not be included).
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(9, 12)); // JamIf you pass a negative value, it will start from the end of the string:
\nconst txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(-16, -13)); // JamYou can omit the second parameter, and it will extract from start to the end of the string:
\nconst txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(16)); // JamStack!substring
\nThe substring method is similar to slice but it won’t accept negative indexes:
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substring(16)); // JamStack!\r\nconsole.log(txt.substring(9, 12)); // Jamsubstr
\nsubstr method is similar to slice with one difference that the second parameter is the length of the text to be extracted and not the position:
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substr(9, 3)); // JamAnd if you omit the second parameter, it will extract to the end of the string. Furthermore, if the index you pass is negative, it will count from the end:
\nconst txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substr(-9)); // JamStack!split
\nAlthough this method is not directly used for extracting a text value, it’s good for splitting the string value by a character and return an array of substrings:
\nconst txt = \"There is Jam in JamStack!\";\r\nconst words = txt.split(' ');\r\nconsole.log(words[4]); // JamStack!A few points regarding this method:
\n- \n
- The simplest case is a single character, also referred to as delimiter. For example you can split a tab separated value (TSV) by using
str.split(\"\\t\"). \n - If the separator contains multiple characters, that entire string needs to be found. \n
- If the separator cannot be found, the return value is an array with one element containing the whole string. \n
- If the separator appears at the beginning or end of the array, it still counts. Meaning the return value is an array with a string value, and one empty string item either at the start or at the end of the array. \n
- If you pass an empty string
\"as the separator, it splits the string into single UTF-16 characters. \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.split('Jam')); // [\"There is \", \" in \", \"Stack!\"]\r\nconsole.log(txt.split('test')); // [\"There is Jam in JamStack!\"]\r\nconsole.log(txt.split('There')); // [\"\", \" is Jam in JamStack!\"]\r\nconsole.log(txt.split('')); // [\"T\", \"h\", \"e\", \"r\", \"e\", \" \", \"i\", \"s\", \" \", \"J\", \"a\", \"m\", \" \", \"i\", \"n\", \" \", \"J\", \"a\", \"m\", \"S\", \"t\", \"a\", \"c\", \"k\", \"!\"]Replacing string content
\nThe replace method, as the name suggests, replaces a part of the string with the provided text:
const txt = \"Who's awesome!\";\r\nconsole.log(txt.replace(\"Who's\", \"You're\")); // You're awesome!\n\n💡 This method doesn’t change the original string, it returns a new one.
\n
By default, it’s case sensitive and just replaces the first match:
\nconst txt = \"This 🐶 is a good 🐶!\";\r\nconsole.log(txt.replace(\"This\", \"That\")); // This 🐶 is a good 🐶!\r\nconsole.log(txt.replace(\"🐶\", \"🐕🦺\")); // This 🐕🦺 is a good 🐶!To do a case insensitive replace or to replace all matches, you could use regex:
\nconst txt = \"This 🐶 is a good 🐶!\";\r\nconsole.log(txt.replace(/THIS/i, \"That\")); // That 🐶 is a good 🐶!\r\nconsole.log(txt.replace(/🐶/g, \"🐩\")); // This 🐩 is a good 🐩!Case conversion
\nTo convert a string to uppercase or lowercase you can use toUpperCase and toLowerCase respectively:
const txt = \"What's up bro!\";\r\nconsole.log(txt.toLowerCase()); // what's up bro!\r\nconsole.log(txt.toUpperCase()); // WHAT'S UP BRO!We also have toLocaleLowerCase and toLocaleUpperCase methods to convert according to user’s current locale:
const dotted = 'İstanbul';\r\nconsole.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`); // \"i̇stanbul\"\r\nconsole.log(`TR: ${dotted.toLocaleLowerCase('tr')}`); // \"İSTANBUL\"Concatenation
\nYou can use concat to join two strings together (like + operator):
let message = \"Hello\" + \" \" + \"World!\";\r\nconsole.log(message); // Hello World!\r\nmessage = \"Hello\".concat(\" \", \"World!\");\r\nconsole.log(message); // Hello World!Trimming and padding
\ntrim
\nTo remove whitespace from both sides of a string value, you can use the trim function:
let message = \" Hello World! \";\r\nconsole.log(message.trim()); // \"Hello World!\"\n\n💡 Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.).
\n
padStart
\nThe padStart method adds a given string at the start of the original string (multiple times, if needed), until the resulting string reaches the given length.
const str1 = '5';\r\nconsole.log(str1.padStart(6, '0')); // 000005padEnd
\nThe opposite of padStart is the padEnd.
const txt = 'OMG Jam';\r\nconsole.log(txt.padEnd(25, '.')); // OMG Jam..................\r\nconsole.log('OMG Jam'.padEnd(10)); // \"OMG Jam \"Getting the string value
\nThere are two methods where you can get the value of a string in JavaScript. You might say, Yas are you crazy, we already have the value in the variable. But remember that I said JavaScript treats a string variable as an object under the hood, so these methods come from the Object.prototype.
valueOf
\nThe valueOf returns the primitive value of an object. For string values, JavaScript does it for you under the hood whenever you invoke a method which needs the primitive value. But you can also call this method to get it:
const txt = \"Yas\";\r\nconsole.log(txt.valueOf()); // \"Yas\"toString
\nSimilar to the above method, toString is used to return the value of a string.
const stringObj = new String('Yas');\r\nconsole.log(stringObj); // String {\"Yas\"}\r\n\r\nconsole.log(stringObj.toString()); // \"Yas\"repeat
\nThis method is my personal favourite. You can pass a number to the repeat method and it returns your string repeated by that number. It’s really good if you want to have some long text generated for testing purposes:
const txt = \"Lorem ipsum faked,\";\r\nconsole.log(txt.repeat(5)); // Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Character methods
\ncharAt
\nThe charAt returns a new string consisting of the single UTF-16 code unit which is located at the index specified:
const txt = \"There is Jam in JamStack!\";\r\nconst index = 4;\r\nconsole.log(`The character at index ${index} is ${txt.charAt(index)}`); // \"The character at index 4 is r\"charCodeAt
\nThe charCodeAt returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index:
const txt = \"There is Jam in JamStack!\";\r\nconst index = 4;\r\nconsole.log(`The character code at index ${index} is ${txt.charCodeAt(index)}`); //The character code at index 4 is 101codePointAt
\nThe codePointAt method returns a non negative integer representing the Unicode point value of the specified index:
const icons = '☃★♲';\r\nconsole.log(icons.codePointAt(1)); // \"9733\" \r\n'\\uD800\\uDC00'.codePointAt(0) // 65536normalize
\nAnd last, but not least, the normalize method returns the Unicode normalisation form of a string:
const myAlias = '\\u0059\\u0061\\u0073\\u0068\\u0069\\u006e\\u0074\\u0073';\r\nconsole.log(`${myAlias}`); // YashintsSummary
\nHope you enjoyed reading this and learnt a few tricks which could help you at what you do day to day. And let’s finish this article with a joke:
\n\n\nWhat do you call it when Wilhelm II makes a string of bad puns? 👉🏽
\n
A Kaiser roll
","timeToRead":8,"frontmatter":{"title":"All you need to know about string in JavaScript 🧵","unformattedDate":"2020-05-11T00:00:00.000Z","date":"May 11, 2020","path":"/string/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","string"],"thumbnail":null}}},{"node":{"id":"9b8890c9-10f7-509c-8612-814b703680c7","html":"There are many different sorting algorithms out there such as quick sort, merge sort, insertion sort, bubble sort, etc., that could be useful in our day to day life, writing code which gets shipped to production. Knowing all of them is not necessary, but if you have a basic understanding of each one, you can decide on the most efficient one for your scenario.
\n\nIntroduction
\nChoosing a suboptimal sort algorithm could lead to longer completion time, code complexity, or worse, a program that crashes half way through an operation.
\nWe use sorting algorithms everyday, Array.sort is one of the sort algorithms which is used to sort an array in ascending order. But that is not a solution for every scenario.
When choosing a sorting algorithm, we need to consider the complexity, or the number of operations performed (usually mentioned as O(x), which is read Big O of x) and also number of swaps along the way. So let’s review and implement some of the most used ones together and learn about their complexity.
Bubble sort
\nThe way bubble sort works is very simple. You compare the first item of the collection with the second. If the first one is bigger, then swap the two. If not, move to the second item, and repeat the same. We keep repeating this until we reach the end of the list.
\nSo far we have bubbled up the biggest item of the list to the far right side in its position. Now we repeat this for the rest of the items again until the list is sorted.
\nLet’s see this in action:
\n![\"Bubble](\"/d4c88b8cc620af6af67c33910899fcf7/bubblesort.gif\")
function bubbleSort(list) {\r\n let len = list.length;\r\n\r\n for(let i = len - 1; i >= 0; i--) {\r\n for(let j = 1; j <= i; j++) {\r\n if(list[j - 1] > list[j]) {\r\n let temp = list[j - 1];\r\n list[j - 1] = list[j];\r\n list[j] = temp;\r\n } \r\n } \r\n }\r\n\r\n return list;\r\n}\r\n\r\nbubbleSort([7, 5, 2, 3, 9, 6]); // [2, 3, 5, 6, 7, 9]As you can see this algorithm is not optimal, in fact it is one of the heaviest in terms of number of operations in worst-case scenarios. But in terms of swaps, it’s one of the best since it sorts in place.
\nThe complexity of bubble sort in worst-case is O(n2), read as big O of n square, where n is the number of items in the collection.
However, in a best case scenario (already sorted collections), it will be O(n) with O(1) swaps.
\n| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n2) comparisons | \n
| \n | O(n2) swaps | \n
| Best-case performance | \nO(n) comparisons | \n
| \n | O(1) swaps | \n
| Average-case performance | \nO(n2) comparisons | \n
| \n | O(n2) swaps | \n
Selection sort
\nSelection sort is really simple like bubble sort. We go through the list, find the index of the lowest element, then swap the lowest element with the first one. Now that the first item is sorted, we repeat this for all remaining elements.
\nLet’s see this in action:
\n![\"Selection](\"/f20b8898585b3ca03843d93ce2c35a68/selectionsort.gif\")
function selectionSort(list) {\r\n let minIndex, temp,\r\n len = list.length;\r\n \r\n for(let i = 0; i < len; i++) {\r\n minIndex = i;\r\n for(let j = i+1; j < len; j++) {\r\n if(list[j] < list[minIndex]) {\r\n minIndex = j;\r\n }\r\n }\r\n\r\n temp = list[i];\r\n list[i] = list[minIndex];\r\n list[minIndex] = temp;\r\n }\r\n\r\n return list;\r\n}\r\n\r\nselectionSort([11, 25, 12, 22, 64]); //[11, 12, 22, 25, 64]Let’s see how the list is sorted in each iteration in the above example:
\n| Sorted list | \nUnsorted sublist | \nLowest elements | \n
|---|---|---|
| [] | \n[11, 25, 12, 22, 64] | \n11 | \n
| [11] | \n[25, 12, 22, 64] | \n12 | \n
| [11, 12] | \n[25, 22, 64] | \n22 | \n
| [11, 12, 22] | \n[25, 64] | \n25 | \n
| [11, 12, 22, 25] | \n[64] | \n64 | \n
| [11, 12, 22, 25, 64] | \n[] | \n\n |
In terms of complexity, this algorithm remains the same regardless of which scenario we’re facing. Which is O(n2) for comparisons, and O(n) swaps. But if you look at the code, it’s self explanatory and simple and sometimes we just want exactly that. In terms or swaps, it’s less than bubble sort.
\n| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n2) comparisons | \n
| \n | O(n) swaps | \n
| Best-case performance | \nO(n2) comparisons | \n
| \n | O(n) swaps | \n
| Average-case performance | \nO(n2) comparisons | \n
| \n | O(n) swaps | \n
Insertion sort
\nThis is like when I play cards and someone is handing me the them one by one. I usually put them in my hand in order as I receive them. Insertion sort builds the final list one item at a time. This means it’s less efficient for large lists relative to it’s competitors such as quick sort, or merge sort.
\nHowever, it provides several advantages:
\n- \n
- Simple implementation (we’ll get there shortly). \n
- Efficient for small data sets. \n
- More efficient than bubble or selection sorts. \n
- Adaptive, i.e. efficient for already sorted collections. \n
- In place. \n
- Online, can sort a list as it receives it. \n
Let’s see how it works in action:
\n![\"selection](\"/6e67d1c722106442b422ee53e98575b3/insertionsort.gif\")
function insertionSort(list){\r\n let i, len = list.length, item, j;\r\n\r\n for(i = 1; i < len; i++){\r\n item = list[i];\r\n j = i;\r\n\r\n while(j > 0 && list[j-1] > item) {\r\n list[j] = list[j-1];\r\n j--;\r\n }\r\n\r\n list[j] = item;\r\n }\r\n\r\n return list;\r\n}In terms of complexity, it’s similar to bubble sort in worst and average cases with O(n2) for both comparisons and swaps. But in best case, it’s really efficient with O(n) comparisons and O(1) swaps.
\n| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n2) comparisons | \n
| \n | O(n2) swaps | \n
| Best-case performance | \nO(n) comparisons | \n
| \n | O(1) swaps | \n
| Average-case performance | \nO(n2) comparisons | \n
| \n | O(n2) swaps | \n
Merge sort
\nMerge sort is in the divide and conquer algorithms and is implemented with a recursive pattern. We break down the list into small pieces until you have one item in each piece. Then we merge them back together but will compare them and put the items in order.
\nIt’s really easy to understand, but let’s see it in action:
\n![\"merge](\"/a29c0dd0186d1f8cef3c5ebdedf3e5a3/mergesort.gif\")
function mergeSort(list) {\r\n let len = list.length;\r\n if(len < 2)\r\n return list;\r\n let mid = Math.floor(len/2),\r\n left = list.slice(0,mid),\r\n right =list.slice(mid);\r\n \r\n return merge(mergeSort(left),mergeSort(right));\r\n}\r\n\r\nfunction merge(left, right) {\r\n let result = [],\r\n lLen = left.length,\r\n rLen = right.length,\r\n l = 0,\r\n r = 0;\r\n while(l < lLen && r < rLen) {\r\n if(left[l] < right[r]) {\r\n result.push(left[l++]);\r\n }\r\n else{\r\n result.push(right[r++]);\r\n }\r\n } \r\n \r\n return result.concat(left.slice(l)).concat(right.slice(r));\r\n}Merge sort is much better in terms of complexity from previous algorithms. It takes O(n log n) operations to sort an array. In terms of memory needed, it’s O(n) total with O(n) auxiliary if we use array and O(1) if we use a linked list.
\n| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n log n) | \n
| Best-case performance | \nO(n log n) | \n
| Average-case performance | \nO(n log n) | \n
| Worst-case space | \nO(n) total, O(n) auxiliary with list, O(1) with linked list | \n
Quick sort
\nQuick sort is similar to merge sort, with the difference that the we don’t split the collection in half. We choose a pivot point and split from there. Once we have chosen the pivot point, we put all smaller items to the left and all the larger items to the right of that.
\nThat means that the pivot point itself is sorted now. We continue this for left and right side recursively until we have the full list sorted.
\nChoosing the pivot could be random, middle point, first, or last item of the list. There are many ways to do this each with their own pros and cons.
\nLet’s see this in action to better understand the difference:
\n![\"quick](\"/42561febe484d44ab4fd5faf2a6d6fb6/quicksort.gif\")
function quickSort(list, left, right) {\r\n let len = list.length, \r\n pivot,\r\n partitionIndex;\r\n\r\n\r\n if(left < right) {\r\n pivot = right;\r\n partitionIndex = partition(list, pivot, left, right);\r\n \r\n //sort left and right\r\n quickSort(list, left, partitionIndex - 1);\r\n quickSort(list, partitionIndex + 1, right);\r\n }\r\n return list;\r\n}\r\n\r\nfunction partition(list, pivot, left, right) {\r\n let pivotValue = list[pivot],\r\n partitionIndex = left;\r\n\r\n for(let i = left; i < right; i++) {\r\n if(list[i] < pivotValue) {\r\n swap(list, i, partitionIndex);\r\n partitionIndex++;\r\n }\r\n }\r\n swap(list, right, partitionIndex);\r\n return partitionIndex;\r\n}\r\n\r\nfunction swap(list, i, j) {\r\n let temp = list[i];\r\n list[i] = list[j];\r\n list[j] = temp;\r\n}\r\n\r\nquickSort([11,8,14,3,6,2,7],0,6); \r\n//[2, 3, 6, 7, 8, 11, 14]As you can see, the more efficient the algorithm gets, the more complex the implementation will be. In terms of complexity, it’s worst than merge sort in worst-case, and equal in average and best.
\n| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n2) | \n
| Best-case performance | \nO(n log n) with simple partition, O(n) with three-way partition | \n
| Average-case performance | \nO(n log n) | \n
| Worst-case space | \nO(n) auxiliary | \n
Heap sort
\nHeap sort is a comparison based sort, you can think of it as an improved version of selection sort. It divides it’s input into a sorted and an unsorted region, then iteratively shrinks the unsorted region by extracting the largest item and inserting it into the sorted region.
\nThe unsorted region is kept in heap data structure to more quickly find the largest item in each step.
\n\n\n💡 Since there is no heap data structure in JavaScript, we can use an array to represent it.
\n
That was a mouthful, so let’s see it in action:
\n![\"heap](\"/2d571b4de2faccf2df0c7890db0dc9b7/heapsort.gif\")
function heapSort(list) {\r\n let len = list.length;\r\n let i = Math.floor(len / 2 - 1);\r\n let j = len - 1;\r\n\r\n while(i >= 0) {\r\n heapify(list, len, i);\r\n\r\n i--;\r\n }\r\n\r\n while(k >= 0) {\r\n [list[0], list[k]] = [list[k], list[0]];\r\n\r\n heapify(list, k, 0);\r\n\r\n k--;\r\n }\r\n\r\n return list;\r\n}\r\n\r\nfunction heapify(list, len, i){ \r\n let largest = i;\r\n let left = i * 2 + 1;\r\n let right = left + 1;\r\n\r\n if(left < len && > list[left] > list[largest]) {\r\n largest = left;\r\n }\r\n\r\n if(right < len && list[right] > list[largest]) {\r\n largest = right;\r\n }\r\n\r\n if(largest != i) {\r\n [list[i], list[largest]] = [list[largest], list[i]];\r\n\r\n heapify(list, len, largest);\r\n }\r\n\r\n return list;\r\n}In the above code snippet, heapify function compares three elements, the parent, and two children. It then makes sure that they are in the correct order for a max heap since we’re building the heap from bottom up.
| Case | \nComplexity | \n
|---|---|
| Worst-case performance | \nO(n log n) | \n
| Best-case performance | \nO(n log n) distinct keys, O(n) with equal keys | \n
| Average-case performance | \nO(n log n) | \n
| Worst-case space | \nO(n) total, O(1) auxiliary | \n
Summary
\nYou should have a good understanding of these sort algorithms by now. If not, I recommend going through them again and try to write a few examples with a pen and paper. Don’t worry if you have trouble understanding the more complex ones like heap sort. It’s completely OK as I had the same trouble initially. But with practice and trying to implement them I learnt them at the end.
\nThere are many other sort algorithms out there, so feel free to explore them and compare the way they work with what you’ve learnt so far.
\nThanks for reading and enjoy sorting your collections.
\n\n","timeToRead":7,"frontmatter":{"title":"Let's sort with JavaScript 🔢","unformattedDate":"2020-05-03T00:00:00.000Z","date":"May 03, 2020","path":"/sorting/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","sorting"],"thumbnail":null}}},{"node":{"id":"a1f94a5d-1909-5e69-914d-89aefa4369ea","html":"⚡ All the images in this post are pulled from the algorithm’s Wikipedia pages.
\n
Using a loop is almost a must in our day to day life. But have you ever thought what kind of loop should you use? Do you know the difference between enumerables and iterables? This article sheds some light in this space, so read on if you’re interested.
\n\nBackground
\nLooping has seen quite a few changes from when I started programming. I remember using while loops and thinking wow, this is cool (I was printing starts on console using MS-DOS).
\nFor loop is another way to iterate through a data structure which contains many items. But non of these methods iterate over the actual structure. They use a sequence, usually named i which mirrors the identifier for you.
const fruits = ['🍉', '🍎', '🍌'];\r\n\r\nfor (let i = 0; i < fruits.length; i++) {\r\n console.log(fruits[i]);\r\n}\r\n\r\n// 🍉, 🍎, 🍌Here i is an index which allows you to access the elements of fruits array and is not part of the array itself. But with progress on JavaScript towards more modern ways of programming, things have changes now. We have for...in, and for...of loops which use a different mechanism for going through items in a collection.
Concepts
\nBefore we delve into these newer ways of iteration, we need to be on the same page around some concepts. So let’s go through them now:
\n- \n
- Iterables: This is a kind of loop where we are performing a repetition. Meaning the same set of actions are performed on each item. \n
- Enumerables: This is a kind of loop where we making mention of, or counting items one at a time. This means the collection’s elements can be distinctly identified and referenced. \n
That didn’t click for me at first, but after going through some examples, it finally made sense. If you consider a full pencil case, that’s an enumerable. When you line up at Aldi to pay, that line is an iterable. A wad of cash is an enumerable, whereas a row of keys on your keyboard is an iterable.
\n\n\n💡 In order for an object to be
\niterable, it MUST implement an@@iteratorproperty which returns an iterator. An iterator object is one which has anextmethod which returns the next item in the collection. That’s why an object is not an iterable.
By now you should have started to see the pattern here. The best analogy I came across is:
\n\n\n😍 Enumerables are like rectangles whereas iterables are squares. This means all
\niterablesareenumerables, however, not allenumerablesareiterables.
for...in
\nSo let’s start from enumerables. You can go through enumerables using for...in. The use case is mainly to go through key-value pairs in an object:
const superCar = {\r\n make: 'Lamborghini',\r\n model: 'Veneno',\r\n year: '2020'\r\n};\r\n\r\nfor (let key in superCar) {\r\n console.log(`${key} --> ${superCar[key]}`);\r\n}\r\n\r\n// make --> Lamborghini\r\n// model --> Veneno\r\n// year --> 2020You can also use for...in to go through index values of an iterable like an array or a string:
let fact = 'Lamborghini is the best!';\r\n\r\nfor (let index in fact) {\r\n console.log(`Index of ${fact[index]}: ${index}`);\r\n}\r\n\r\n// Index of L: 0\r\n// Index of a: 1\r\n// Index of m: 2\r\n// Index of b: 3\r\n// ...\n\n💡 Beware that you can’t iterate on
\nSymbolproperties withfor...inand that’s becauseSymbolsare primitive data types that are always unique. They are generally used as private properties to avoid name clashes when inheritance is used.
Using for...of
\nThis kind of loop is applicable to “iterable objects” meaning the item after of MUST be an iterable:
const fruits = ['🍉', '🍎', '🍌'];\r\n\r\nfor (let fruit of fruits) {\r\n console.log(`${fruit} is delicious.`);\r\n}\r\n\r\n// 🍉 is delicious.\r\n// 🍎 is delicious.\r\n// 🍌 is delicious.And again we can use it on strings, but with a slight difference:
\nlet fact = 'Yas';\r\n\r\nfor (let char of fact) {\r\n console.log(char);\r\n}\r\n\r\n// Y\r\n// a\r\n// sSummary
\nWe saw the difference between these two modern ways of looping through collections, let’s make more informed decisions as to use what where and write cleaner, more readable code 👊🏽.
","timeToRead":3,"frontmatter":{"title":"Have you ever thought about for loops? ➰","unformattedDate":"2020-04-24T00:00:00.000Z","date":"Apr 24, 2020","path":"/iterators/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","forloops"],"thumbnail":null}}},{"node":{"id":"f6f677e2-1b27-5eb6-b4ab-5a13e47a66ed","html":"There are many situations where we want to see what’s wrong with out code without the trouble of changing source code and push the changes again, regardless of whether we’re using local environment or production. Most folks start by writing console.log statements throughout their code base and go step by step to find the place where the bug is happening. That’s OK for beginners and where you have access to source code, but what if you don’t want to waste so much time or you don’t even have access to source code?
DevTools
\nAll major browsers have developer tools (aka DevTools) nowadays. It’s important for us web developers to know them well not just because we use them as our daily drivers to test our applications and see how they look like once deployed, but also for times when something is wrong as we want to find them efficiently.
\nThat’s when the DevTools comes very handy if you know the ropes. DevTools have a lot of functionalities; refer to my articles Chrome DevTools can do that? and FireFox DevTools can do that? to have a glimpse of some of these. However, in this article we only focus on debugging experience.
\nThe bug
\nIn order to be able to have a common ground, we need a bug to fix. I’ve created this demo which will be working on in Glitch. In this demo, you would select a date and press the calculate age button. It will calculate your age and show it in the bottom section.
\nHowever, there is a bug where sometimes it calculates the age by one year higher than actual. We will be looking into how to fix this.
\nDevTools’s debugger
\nBoth Chrome and Firefox have a debugger section we will be using in this article. I won’t go through Edge because it’s the same as Chrome.
\nChrome
\nYou can open your DevTools in Chrome using Ctrl+Shift+J on Windows or Ctrl+Option+J.
\nOnce opened, navigate to the Sources tab. You will see a file navigator pane on the left where you can inspect the files that the page uses. Then there is the editor pane in the middle where you can click on the file from the navigator pane and see the content and edit them locally in the browser. And last you will see the JavaScript debugging pane where you have a set of features which you’ll learn about shortly.
\n\n\n💡 If you resize the DevTools you might see these panes in different positions.
\n
![\"Chrome](\"/747a9023138d663f0ee47ceecf64bddf/chromedevtools.jpg\")
Firefox
\nIn Firefox you need to use Ctrl+Shift+I on Windows or Ctrl+Option+I to open up the web developer tools.
\nWhen opened, click on debugger tab which is very similar to what you saw before. On the left, you’ll see the navigation pane, next to it is editor pane and to the left (or below depending on how wide you’ve got your DevTools open) is the debug pane.
\n![\"Firefox](\"/b62cf79f3cab1f58d2a5b86faa600faa/firefoxdevtools.jpg\")
Setting a breakpoint
\nWhen it comes to debugging, a common method is to use console.log statements throughout the code base which sometimes is abused.
const yo = document.querySelector('#yo');\r\n\r\nfunction getAge() {\r\n console.log('Getting the date of birth value');\r\n const dateString = document.querySelector('#age').value;\r\n console.log(`date of birth is ${dateString}`);\r\n var today = new Date();\r\n var birthDate = new Date(dateString);\r\n var age = today.getFullYear() - birthDate.getFullYear();\r\n console.log(`age is ${age}`);\r\n var m = today.getMonth() - birthDate.getMonth();\r\n console.log(`Birth month is ${m}`);\r\n if (m < 0 || (m = 0 && today.getDate() < birthDate.getDate())) {\r\n console.log('The birth month is negative or is zero, we need to reduce the age by one year');\r\n age--;\r\n console.log(`Real age is ${age}`);\r\n }\r\n yo.textContent = age;\r\n}And then you look at the console to see where the bug might be. But this process is painstakingly slow which impacts your productivity a lot. So let’s see how breakpoints help us get to the point real quick.
\nBreakpoints have the advantage of being in real time compared to console.log statements where you need to wait for the code to get deployed and inspect the console. Apart from that, with console.log statements, you need to explicitly mention which values you want to expect whereas in a breakpoint debugger shows you all of them.
Now let’s take one step back and see how we can go about finding where to set our breakpoint to. In some cases like this you will think OK, the age is correct sometimes and not others depending on the month. So you can find your file and set your breakpoint right where the if condition is.
In some other cases where the code base might be larger, or you might be new to the team, it makes sense to follow the flow of the page. In our case user selects a date and then clicks on the calculate age button.
\nThe logic behind happens under that click, you the best thing for us is to set a breakpoint on the click event listener. Event Listener Breakpoints are designed for this.
\nChrome
\nIn Chrome, in the debug page, click on the Event Listener Breakpoints and expand the section. Then find the Mouse category and select the click event.
\nNow click on the calculate age button and DevTools will pause when the event listener executes. You might need to click on the Resume Script Execution getAge function. Once you’ve stepped into the function you wanted, you can go one line at a time by clicking on the step over button or pressing F10.
![\"Mouse](\"/2f49357f26e80756caa7edb7cdf77fbc/breakpointchrome.gif\")
Firefox
\nYou can use the same approach to enable a mouse click event listener breakpoint in Firefox, simply expand the Event Listener Breakpoints section in the debugger pane, then expand Mouse and select the click event.
\nOnce enables, you could follow the same procedure we described before. First click on the calculate age button and the debugger automatically pauses on the first function call. In case of using a platform like Glitch or CodePen, that might not be what you’re after, so simply press the Resume
![\"Firefox](\"/252ca5c56aa00b316ffccba44665a81b/firefoxclickbreakpoint.gif\")
Line breakpoint
\nLine breakpoints are mainly used when you’ve narrowed down where the bug might actually be. In our case when we stepped through the getAge function, we saw that the age is calculated based on the year, then there is an if condition which will be responsible to reduce the age by one if the month is less than the current month minus the month of birth.
So we roughly know that if the age is calculated right in some cases and wrong by one year in others, the if condition is where we should set our line breakpoint on.
\nThere are two ways to do this in DevTools, one is to follow the event listener breakpoint flow explained above. But if you know the filename beforehand, you can simply open the file in the editor pane and scroll through until you reach the line you want.
\nOnce you’re there, simply click the line number and it will put a Line Breakpoint
Firefox
\nSpotting the bug
\nNow let’s see where the bug is and how to fix it. If you have a look at the if condition more closely, you’ll see that there are two main parts in there. First one is m < 0 to check whether the month is less than zero, and the second is m = 0 && today.getDate() < birthDate.getDate() to check if the month is zero and today is less than birthday.
Now we know that someone’s used an equal sign instead of equality operator which has caused this bug. So let’s replace the = with === and then press Ctrl+S to save the changes. You can leave the breakpoint or remove it test with some dates to see if the bug is fixed or not. But after some tests we know that the bug is fixed. It’s time for you to go and write a test for this function so you won’t face the same bug again 😁.
Console window
\nDon’t forget that you can evaluate your expressions in the console window of the browser. As in you could simply put your condition in the console and see whether it’s returning true or false.
We saw how powerful the DevTools are and how much they can help us to find and fix bugs in our code. So stop using There are many situations where we’d like to see our web page in fullscreen mode. Be it games, online courses, video tutorials, or simply wanting more reading space while reading a book. What we usually do in these sort of scenarios is we manually set our browser’s tab/window in fullscreen mode (F11), but the result is not always what we expect, because some content is not designed to be viewed in fullscreen mode. Besides, what if we help our users to go fullscreen automatically instead, again it all comes to having a better user experience. Full Screen API adds methods to the HTML So let’s see this in action first and then go through some details: All we’re doing here is to call a method which is added by the Full Screen API: There are two properties exposed on the 💡 The 💡 The You’ll want to be sure to let your users know that they can press the Esc key (or F11) to exit fullscreen mode. In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well. As you saw in the example above, exiting the fullscreen mode can be done using You can simply detect whether the feature is supported or not using either or: As mentioned earlier, the When toggling fullscreen mode programmatically, you’re responsible for how the elements will look like and what appears on the screen. It’s obvious you will need to change the width and height of the element to Also you might want to hide some other elements on the screen to reduce clutter: The browser support is really good at this point, almost all major browsers fully support it. Only IE11 and Safari have partial support. Opera mini and Android Browser do not support it at this point. Hope you’ve learned a new trick if you didn’t know about this API and happy fullscreening (just made up the word 😁). I’ve been writing web applications for more than a decade. From classic ASP to PHP, ASP.Net web forms and the list goes on and on. However, something that’s been common between all those years for me has been to care about how performing the site is. One important part of that has been to look out for memory leaks, because they can cause the page to go super slow or even crashing in more serious scenarios. Memory leaks are a common problem in software development, regardless of whether the language you’re using is memory managed or not. By that I mean languages which come with a garbage collector. Memory leaks happen when a piece of memory is allocated, but never freed by the application, and is not returned to the container app or the operating system. I remember going through the concept in uni, but I can’t remember anything apart from the fact that usually there is a tree made up of all the occupied memory locations. Every time the garbage collector is looking into the memory parses that tree, and if a node is not connected to any branch, it gets recollected and returned to the main program. Most of us web developers are likely to use one of the major frameworks or libraries to write our applications. Some maybe using a bit older languages like PHP or Ruby, but no matter what we use, there will be a high chance that we come face to face with this problem one way or another. So what happens when there is a memory leak in our applications 🤔? In some cases the memory consumption just keeps going up. If the user is using a decent spec machine, they might not even realise it. Not everyone is obsessed like us developers checking their task manager often to see how much memory is consumed. Regardless, it slows down the page, makes interactions not responsive, and might even cause the tab or the whole window to crash. It’s way easy in JavaScript to allocate some memory and forget about it. Even if you’re not writing plain JavaScript, it’s still possible that a memory leak happen, without you noticing it. In JavaScript there are a few possible ways a memory leak can happen. It’s very simple to create an unwanted global variable in JavaScript. Consider below code: In this simple function we have created a global variable called name. We didn’t want to, but we did it anyway. 💡 A reference to an undeclared variable creates a new variable inside the global object. Same thing can happen if you use Even thought we consider accidental global variables one of the memory leak sources, there are still many global variables defined by the framework we use, or even the ones we intend to be there. Remember these are non collectable variables and unless nulled or reassigned, garbage collectors can’t do anything about them. The use of However, there are quite a number of scenarios where we need to use it in order to call a function at a later time or on a schedule. This example shows how a timer can turn into something that cannot be collected. Even if the list node is removed from the DOM, the reference inside the handler remains active and cannot be collected. That causes their dependencies to be non collectable as well. So the data variable which might be really large, would sit in memory long after its need has ended. Now let’s see how we can improve this to avoid a memory leak: When some nodes are removed from the DOM but still exists in memory through JavaScript, we have out of DOM references or detached DOM. Usually it means there is a reference to a variable which was referencing that node. DOM is a doubly linked tree, meaning any reference to any node would mean the entire tree would not be garbage collected. Clicking the delete button, will remove the list from the DOM, but there is a reference in JavaScript, so the list never gets garbage collected. We could identify detached node using heap snapshots in your browser DevTools. I am using Chrome here, but you can use Edge (similar to Chrome), and Firefox too. And once the snapshot is taken, type detached in the filter text box and you’ll see the detached DOM nodes. The way to fix these kind of issues is to always use local variables so that the reference is destroyed once the function execution is done. Closures are one of the JavaScript’s features where most beginners struggle with. But once you’ve got it, it’s really easy to follow. In it’s core, a closure gives you access to an outer function’s scope from an inner function. A more technical definition is that a closure is a combination of a function bundled together with references to it’s surrounding state (the lexical environment). Now that we know what’s a closure, let’s see how they can cause memory leaks. Imagine the following code: In the above code, the So what we can we do about these type of scenarios? First we need to stop using Every time you attach an event handler to a specific element, you need to keep a reference and remove it when you’re finished. So instead of: We should be doing: We saw what will cause a potential memory leak in JavaScript and how to fix those issues, however, keep in mind that in most cases if you’re using a framework or library, these things are handled for you. If you’re using a library which you might suspect is causing memory leaks, you could easily find out using your browser DevTools memory profiler. Hope this article has raised some awareness so that you can write more performing code and make user experience much better. No one wants to have their browser chew up memory like cheesecake right 😁? Everybody likes a fast loading web page. In fact, Google has an entire section dedicated to performance and how companies are moving towards a faster web. Wouldn’t it be good if we could measure some critical metrics like page load time in our production environment and constantly monitor them to find out where can be improved? Navigation Timing API is a JavaScript API which can be used to accurately measure performance on the client side. This data can then be transmitted to server side to allow real time monitoring of performance metrics. The API provides a simple way to natively get accurate and detailed timing statistics for page navigation and load events. Metrics such as page load time, amount of time needed to unload the previous page, how long domain lookups take and so on can be measured by this API. This API has two interfaces, You can try this API in the browser’s console (pressing Ctrl+Shift+J for Chrome on Windows or CMD+Option+J for Mac users): And you will see an object like this: Now let’s have a look at how we can calculate some metrics using these useful properties. In order to calculate the total page load time, you can use the To calculate the total time taken to render the page, simply use To calculate the time between beginning of the request to the end of response retrieval, you can use: If you want to measure network latency: To have the sum of navigation and page load time: To find out about any issue in redirects: There are many ways to end up on a page. If you want to know how your user ended up on your page, or how many redirects they’ve had before landing there, this property is your friend. The We saw how we can use the Navigation Timing API to get performance metrics on client side which can be sent to server to monitor performance of users in real time regardless of where they are and how they got there. This API is really powerful and has helped me a lot to help customers find out where they need to focus their energy to improve performance on which pages 😍. Hope this has been helpful and till next time, au revoir 👋. Are you want of those people with 200 tabs open? Are you tired of carrying your laptop charger with you all the time? Well, I am here to let you know we can help users save battery, data, and time, if we know how to use the Page Visibility API. Imagine your user has a few tabs open, one running a heavy animation, the other getting a lot of data from the server, and another running a video from YouTube. These all require resources from user’s computer and that’s why sometimes having a few tabs open you suddenly realise you’re running out of battery, or your data allowance is finishing. 💡 What if you could pause the current operation on a tab/window if the user isn’t looking at it? With This API allows a developer to become aware if the user has lost focus on the page, or has returned to it again. When the user minimises, or switches to another tab/window, the API sends a Page Visibility API is a very useful tool in your toolbox which gives you the power to not perform unnecessary operations when the page is not visible to user. This API adds the following properties to the You can also listen to the As mentioned before, this property can have four different values each of which representing a different tab/window state: The simplest scenario is playing video on the page, so we will be using that as an example. Let’s use a simple video element on the page which will be paused when the user focuses on another tab.(function () {\r\n function hello() {\r\n console.log('hello');\r\n }\r\n function world() {\r\n console.log(' world');\r\n }\r\n hello(yo); // This works.\r\n world();\r\n})();\r\ndebug(hello); // This doesn't work. hey() is out of scope.Summary
\nconsole.log and get to know your DevTools better. Happy coding from home ❤️.Intro
\nElement to enable us to programmatically turn any content on a page to enter in fullscreen mode via JavaScript. WebGL, canvas, and video elements are the usual targets when it comes to going fullscreen. Online newspapers and magazines are other areas where this can be helpful.const vid = document.getElementById('shuttle');\r\n\r\nfunction toggleFullScreen() {\r\n if (!document.fullscreenElement && vid.requestFullscreen) {\r\n vid.requestFullscreen();\r\n } else {\r\n if (document.exitFullscreen) {\r\n document.exitFullscreen(); \r\n }\r\n }\r\n}\r\n\r\ndocument.addEventListener(\"keydown\", function(e) {\r\n if (e.keyCode == 13) {\r\n toggleFullScreen();\r\n }\r\n}, false);Exposed properties
\ndocument object:DocumentOrShadowRoot.fullscreenElementfullscreenElement property will give you the element that is displayed in fullscreen mode at the moment. It’s a way to check whether we’re in full screen mode or not.Document.fullscreenEnabledfullscreenEnabled property tells you whether or not the document is currently in a state that would allow fullscreen mode to be requested.Exiting fullscreen
\ndocument.exitFullscreen:if (document.exitFullscreen) {\r\n document.exitFullscreen(); \r\n}Feature detection
\ndocument.requestFullscreen or Element.requestFullscreen:if(element.requestFullscreen) {\r\n element.requestFullscreen();\r\n}if(document.requestFullscreen) {\r\n // enter fullscreen mode\r\n}Finding whether or not you’re in fullscreen mode
\ndocument.fullscreenElement is a good way to check whether the browser is in full screen mode or not. The value of this property will be null if we’re not in fullscreen, and the current fullscreen element otherwise.boolean property called fullscreen which is deprecated and should not be used. Although most of the browsers still support it.Presentation
\n%100, and fortunately, there is a CSS pseudo-selector for you to use:#shuttle:fullscreen {\r\n width: 100%;\r\n height: 100%;\r\n}:fullscreen .hide {\r\n display: none;\r\n}Browser support
\n![\"Browser](\"/2f6bdf83bea61460d60ed9d65117439e/caniuse.png\")
Intro
\nConsequences
\nMemory leak in JavaScript
\nBut how does it happen?
\n\n
\nGlobal variables
\nfunction helloWorld() {\r\n name = 'Yas';\r\n console.log(`Hello ${name}`);\r\n}\n
\nthis:function helloWorld(args) {\r\n this.name = 'Yas';\r\n console.log(`Hello ${name}`);\r\n}strict mode. You can do it by adding use strinct; at the top of your JavaScript file.Timers and callbacks
\nsetInternal and setTimeout has gotten less and less popular as we’ve moved towards more modern concepts like async/await. Furthermore, some libraries and frameworks provide observables to facilitate callbacks. In which case they’re responsible for making sure the callbacks are unreachable once their own instance gets destroyed.let data = fetchData();\r\nsetInternal(function() {\r\n let node = document.querySelector('#list');\r\n // loop through data and create the html\r\n node.innerHTML = transform(data);\r\n}, 1000)let node = document.querySelector('#list');\r\nlet data = fetchData();\r\n\r\nfunction handler(data) {\r\n if(node) {\r\n // do stuff with data and create the list\r\n node.innerHTML = transform(data);\r\n }\r\n};\r\n\r\nsetInterval(handler, 1000);Out of DOM references (detached DOM)
\nfunction create() {\r\n let ul = document.createElement('ul');\r\n ul.id = 'list';\r\n for (var i = 0; i < 10; i++) {\r\n var li = document.createElement('li');\r\n li.textContent = `Item # ${i}`;\r\n ul.appendChild(li);\r\n }\r\n return ul;\r\n}\r\n\r\nconst list = create();\r\n\r\ndocument.body.appendChild(list);\r\n\r\nfunction deleteList() {\r\n document.body.removeChild(document.getElementById('list'));\r\n}\r\n\r\ndocument.getElementById('delete').addEventListener('click', deleteList);![\"taking](\"/7159b04df500677056bf34af6120b1a0/heapsnapshot.jpg\")
Closures
\nfunction init() {\r\n var hello = 'Hello'; // hello is a local variable created by init\r\n function helloWorld() { // helloWorld() is the inner function, a closure\r\n console.log(`${hello} world!`); // use variable declared in the parent function\r\n }\r\n helloWorld();\r\n}\r\ninit();var newElem;\r\n \r\nfunction outer() {\r\n var someText = new Array(1000000);\r\n var elem = newElem;\r\n\r\n function inner() {\r\n if (elem) return someText;\r\n }\r\n\r\n return function () {};\r\n}\r\n\r\nsetInterval(function () {\r\n newElem = outer();\r\n}, 5);inner function is never called, but it holds a reference to the elem. Keep in mind the scope of the inner is the same as function () {} which is returned by the outer function. Since newElem is a global variable, as long as a reference is pointing to function () {}, the shared context is preserved and someText is kept. Each call will then result in a remaining reference and as time goes by, we run out of memory eventually.var. And furthermore, if we call the inner function like outer()(), then there won’t be any references left.Event listeners
\nfunction deleteList() {}\r\n\r\ndocument.getElementById('delete').addEventListener('click', deleteList);function deleteList() {}\r\n\r\ndocument.getElementById('delete').addEventListener('click', deleteList);\r\n\r\n// do stuff\r\n\r\ndocument.getElementById('delete').removeEventListener('click', deleteList);Summary
\nResources
\n\n
","timeToRead":6,"frontmatter":{"title":"Stop gobbling up that memory 🛑","unformattedDate":"2020-02-28T00:00:00.000Z","date":"Feb 28, 2020","path":"/mem-leak/","author":"Yaser Adel Mehraban","tags":["webdev","showdev","memoryleak","javascript"],"thumbnail":null}}},{"node":{"id":"46dd7d3e-d489-5c9a-86c6-7991ff30045f","html":"Navigation Timing API
\nHow to use it?
\nPerformance and PerformanceNavigationTiming. The window.performance property returns a Performance interface which is defined by High Resolution API, plus two additional properties:\n
\n> performanceSome use cases
\nTotal page load time
\nloadEventEnd and navigationStart properties:const perfObj = window.performance.timing;\r\n\r\nlet pageLoadTime = perfObj.loadEventEnd - perfObj.navigationStart;Page render time
\ndomComplete and domLoading properties:const perfObj = window.performance.timing;\r\n\r\nlet renderTime = perfObj.domComplete - perfObj.domLoading;Request response time
\nconst perfObj = window.performance.timing;\r\n\r\nlet renderTime = perfObj.responseEnd - perfObj.requestStart;Network latency
\nconst perfObj = window.performance.timing;\r\n\r\nlet renderTime = perfObj.responseEnd - perfObj.fetchStart;Navigation and page load together
\nconst perfObj = window.performance.timing;\r\n\r\nlet renderTime = perfObj.loadEventEnd - perfObj.navigationStart;Pinpoint redirect problems
\nconst perfObj = window.performance.timing;\r\n\r\nlet renderTime = perfObj.redirectEnd - perfObj.redirectStart;
\nnavigation propertyperformance.navigation has two properties:\n
\ntype property is an enum which can have three values:\n
\nSummary
\nThe why
\nPage Visibility API, you can do that.Page Visibility API
\nvisibilitychange event to let the listeners know the state of the page.Document interface:\n
\nhidden: which is a read-only attribute and returns true if the page is in a state to be considered hidden to user.visibilityState: which is a DOMString indicating the document’s current visibility state. It can have four values, visible, hidden, prerender, and unloaded.visibilitychange event which will trigger your callback function whenever the visibility changes:function handleVisibilityChange () {\r\n if (document.hidden) {\r\n // stop that task 🛑\r\n } else {\r\n // you can start it again go ▶️\r\n }\r\n}\r\n\r\ndocument.addEventListener('visibilitychange', handleVisibilityChange, false);
\nvisibilityState\n
\nDemo
\nDemo: Page Visibility API
\r\n \r\n