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":"5a075de4-36f3-5743-b35b-23b50c63ac5f","html":"You’ve spent many hours trying to improve your web performance and have got it to a good speed. What happens next? How do you ensure it remains in good shape especially if you’re working in a team with diverse backgrounds and level of coding.
\n\nWeb performance must be monitored
\nI truly believe web performance shouldn’t be an item in your backlog, rather part of acceptance criteria on each story. That said, having discipline is hard when it comes to web performance. Each member of the team should be aware of dos and don’ts so that they can right code which doesn’t add a few seconds to current page load time, or user’s interactivity with the page.
\nIn order to do so, you need to constantly monitor the performance of your application and when is a better time to do it than your CI/CD pipeline or when creating a pull request to get the code merged in (it’s worth mentioning having a CI/CD pipeline is not necessary to have a high quality, well written and performing site).
\nIn addition to all of that, your site performs differently from your localhost, so you need to ensure you’re testing close to your actual environment.
\nLighthouse CI
\nLighthouse CI is a set of commands that make continuously running, asserting, saving, and retrieving Lighthouse results as easy as possible.
\nThis is a great tool which allows you to run audits on your code base using command line, and raise an alert when someone unintentionally downgrades the performance.
\nWhat to measure?
\nThere are countless metrics on which we could focus on. Some are user centric like time to interact, some are resource centric such as the size of your JavaScript or CSS files. Lighthouse CI allows us to easily focus on the size of the files. You can create two types of budgets:
\n1- Number of given resource: This will help you to for example enforce having only 3 JavaScript and 1 CSS file.\r\n2- Size of a given resource: This budget will enforce that a given resource is of certain size, e.g. only 500kb.
How does it know?
\nYou’re probably wondering how does Lighthouse CI know what to measure and when to raise an alert. This **||is done via a JSON file which is usually named budget.json, but you can choose any name you prefer.
Performance budget
\nThe content of this file is an array of objects representing the budgets for a path. The content will look like below if you only have one path to assert:
\n[\r\n {\r\n \"resourceSizes\": [\r\n ...\r\n ],\r\n \"resourceCounts\": [\r\n ...\r\n ]\r\n }\r\n]Within the resourceSizes and resourceCounts arrays, you can add individual objects that specify the resourceType and its budget. The budget can be any positive integer and the resourceType can be any of the following:
| Resource type | \nDescription | \n
|---|---|
| script | \nJavaScript files | \n
| document | \nHTML documents | \n
| image | \nImages | \n
| stylesheet | \nCSS files | \n
| font | \nWebfonts | \n
| media | \nOther media | \n
| other | \nAny other resource which doesn’t match the above, e.g. data transfers over Websocket connections | \n
| third-party | \nAll resources from a third-party domain | \n
| total | \nAll resources combined | \n
For example, the following file will set a 200Kb budget for all scripts, a 500Kb for all images, and a 500Kb for all other resources. Then it sets the total network requests to be 25.
\n[\r\n {\r\n \"resourceSizes\": [\r\n {\r\n \"resourceType\": \"script\",\r\n \"budget\": 200\r\n },\r\n {\r\n \"resourceType\": \"image\",\r\n \"budget\": 500\r\n },\r\n {\r\n \"resourceType\": \"total\",\r\n \"budget\": 500\r\n }\r\n ],\r\n \"resourceCounts\": [\r\n {\r\n \"resourceType\": \"total\",\r\n \"budget\": 25\r\n }\r\n ]\r\n }\r\n]As of Lighthouse 5.3 you can add a path property to select which pages the budget should apply to. This is very handy because it allows you to have a centralised budget file for all your pages.
[\r\n {\r\n \"path\":\"/*\",\r\n \"resourceSizes\": [\r\n ...\r\n ],\r\n \"resourceCounts\": [\r\n ...\r\n ]\r\n },\r\n {\r\n \"path\":\"/blog\",\r\n \"resourceSizes\": [\r\n ...\r\n ],\r\n \"resourceCounts\": [\r\n ...\r\n ]\r\n },\r\n {\r\n \"path\":\"/contact\",\r\n \"resourceSizes\": [\r\n ...\r\n ],\r\n \"resourceCounts\": [\r\n ...\r\n ]\r\n }\r\n]How should you choose your numbers?
\nFinding the performance budget is not an easy task since it will depend on your application’s structure and bundling style. However, you can use this useful tool called Performance Budget Calculator to have a starting point. You might have to run the tool multiple time to each to a point where you’d be happy with the result. You don’t want to be too aggressive and also too complacent either.
\nUsing the CI locally
\nYou can install the CI locally with:
\nnpm install -g @lhci/cliIt also has a dashboard which shows you the historical runs, compares reports and store their results.
\nnpm install @lhci/serverBefore running the CI, you need to have a configuration file to tell the tool what to test and where to find the budget file (you could also pass those individually without a config file, but it’d be a pain):
\n// lighthouserc.json\r\n{\r\n \"ci\": {\r\n \"collect\": {\r\n \"numberOfRuns\": 2,\r\n \"startServerCommand\": \"yarn serve\",\r\n \"url\": \"http://localhost:8080\"\r\n },\r\n \"preset\": \"lighthouse:recommended\"\r\n }\r\n}Then you can run the tool on your local web server by first running:
\nlhci autorun --config=./lighthouserc.jsonand then:
\nlhci assert --no-lighthouserc --budgetsFile=budget.jsonAnd you will get a result similar to below based on your app’s performance:
\n2 result(s) for http://localhost:8080/\r\n\r\n × resource-summary.script.size failure for maxNumericValue assertion\r\n Keep request counts low and transfer sizes small\r\n Documentation: https://developers.google.com/web/tools/lighthouse/audits/budgets\r\n\r\n expected: <=102400\r\n found: 2416174\r\n all values: 2416174, 2416174\r\n\r\n\r\n × resource-summary.total.size failure for maxNumericValue assertion\r\n Keep request counts low and transfer sizes small\r\n Documentation: https://developers.google.com/web/tools/lighthouse/audits/budgets\r\n\r\n expected: <=512000\r\n found: 2437694\r\n all values: 2437694, 2437694\r\n\r\nAssertion failed. Exiting with status code 1.Using the tool on your PRs
\nI am focusing on GitHub using actions here. But you can apply this technique to Azure DevOps, CircleCI, TeamCity, or any other tool you’re using. For this to work you will need to have a GitHub flow in your git repository defined.
This article’s focus is not to teach you how to create a workflow, but here is the bare minimum you will need to have. Create a .yaml/.yml file in the .github/workflows folder, you can name it whatever you want. I usually name them after what’s their purpose, e.g. lighthouse.yml or lhci-performance-bot.yml.
But before we get to the content of our yaml file, let’s see what we need to do on each PR:
- \n
- Pull down the code \n
- Build the app \n
- Deploy to a temporary site (I am using Netlify Preview here, but you can use others like staging slots on Azure App Service, etc) \n
- Run Lighthouse CI on the site \n
- Fail if the conditions are not met \n
For this to work, we need an application. So I just spun up a new Vue application using Vue CLI, then added my workflow to it and pushed it to a new GitHub repo.
\nHere is how my workflow looks like:
\nname: Lighthouse CI\r\n\r\non:\r\n pull_request:\r\n branches: [master]\r\n\r\njobs:\r\n lighthouse:\r\n runs-on: ubuntu-latest\r\n\r\n steps:\r\n - uses: actions/checkout@v2\r\n - name: Setup Node 12\r\n uses: actions/setup-node@v1\r\n with:\r\n node-version: 12.x\r\n - name: Yarn Install and Build\r\n run: |\r\n yarn\r\n yarn build\r\n \r\n - name: Waiting for 200 from the Netlify Preview\r\n uses: jakepartusch/wait-for-netlify-action@v1\r\n id: waitFor200\r\n with:\r\n site_name: \"lighthouse-ci-pr\"\r\n\r\n - name: Audit URLs using Lighthouse\r\n uses: treosh/lighthouse-ci-action@v2\r\n with:\r\n urls: |\r\n $DEPLOY_URL/\r\n $DEPLOY_URL/about\r\n runs: 3\r\n budgetPath: ./budget.json\r\n env:\r\n DEPLOY_URL: ${{ steps.waitFor200.outputs.url }}What is happening is that I am just creating an action on each PR. In this action, we need to pull down the code, install node, run yarn and yarn build to build the application, wait for Netlify to deploy our PR into a preview site, then get the URL and inject it into the next step.
I’m just using wait-for-netlify-action, but it’s not that hard to implement this part. Then we will be using the lighthouse-ci-action to run our audit on the paths we have specified.
Notice I am not using a Lighthouse configuration file in this workflow because it’s not needed. You can pass the parameters directly to the action like I’ve done above. I am just auditing the home and about pages since I’ve only got these two pages.
\nYou can pass as many URL’s to this as you like, but if there are many of the, it makes more sense to add the config file back.
\n\n\n💡 Remember to setup Netlify for your site and set it to create a deployment for every PR. Then get the site id and pass it to the
\nwait-for-netlify-actionaction.
Pro tip: When you setup your Vue CLI generated application which is using Vue Router, the non default routes won’t work if the user types them in the browser URL bar and hits enter. That’s because that route is handled on the client side and server doesn’t know about it. To fix that you need to add a URL rewrite rule to return your index.html for all legitimate routes.
In case of Netlify, just create a file named _redirects inside your public and add the following line to it.
/* /index.html 200Result
\nI created a branch and pushed it up. Then created a PR and voila, the action kicked in and failed, since I have a large image on the about page.
\nconsole.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 😁? I help some of my friends perform code reviews on their code bases from time to time as a side activity. I’ve used SonarQube® is an automatic code review tool to detect bugs, vulnerabilities and code smells in your code. It can integrate with your existing workflow to enable continuous code inspection across your project branches and pull requests. It has a server component where you can create projects and apply configurations like adding plugins and updating existing ones. And then there is a scanner component where it scans your code base and sends the result to the server to show in the SonarQube dashboard. There are multiple versions of SonarQube but we’re going to use the community edition which is free and open source. So without further ado, let’s get to it. The documentation is really great, and there is a great two minute get started which is what I used to get my hand wet real quick. However, soon I realised that I have to install a lot of dependencies to get it working. I was thinking how to avoid the extra installations, when suddenly a smile came to my face when I saw there is a docker image as well. On the Docker Hub, you can find the information you need to get started, but for the purpose of this article, I just use a single command to get it going. This command will pull the image down and create a container from it. Run the container in the background mode and then exposes the port 9000 through to host. Once done, you need to wait for a few mistunes for the server to get started. You can open a browser of your choice and go to Use the default username as I don’t want to go deep into SonarQube here, but a project represents a code base where you can see the result of a scan done by the scanner. So once logged in, click on create a new project button in the centre of the page, then enter a unique project key and a display name. On the next page enter a name for your project token. This is the key which scanner will use to authenticate to the server and send the result of a scan up. Take note of this key as you can never see it once you’re navigated away from this page. Click continue and you’ll see a screen where you can specify your project configuration. I wanted to run this on an Angular project with TypeScript, so I chose other, and then windows from the OS prompt. At this point you need to download the scanner and unzip it in a folder named Once done, open your scanner config file named Once done, you’re ready to go. Run the command below from your project root and wait for the scan to finish. Don’t forget to replace the key you got from the previous step in the 💡 In the last step when you downloaded the scanner zip file, the command you need to execute is written down for you ready to go, just add the exclude folder to avoid code analysis on external libraries. It takes a while for the scan to finish based on the size of your code base. But once done, you can see the result in the SonarQube dashboard. ℹ️ Remember to run And once done, here is yow your dashboard will look like. Obviously the code base I was reviewing was a bit chaotic. And you when you click on issues you can see them by category and also the rules used to perform the scan. In terms of the speed, I was very happy with the result. It took nearly 2 minutes to scan my entire code base with more than 520 files and thousands line of code. In term of the scan result, I would say based on the default rule set and considering that this was the community edition, the results are slightly better than So go ahead and give it a shot, I am sure you’ll find enough to keep you busy for a while to fix those. And bare in mind that it not only gives you linting errors, it will also give you some security hints based on OWASP top 10 as well. One of the first things I learnt to do with HTML was using marquee to move text across the screen horizontally. It was so cool to be able to create advertisements on a page and make users notice things with just a tag. Of course people overused it and then it became a out of fashion item in the new designs just like baggy jeans from 90s. The HTML You can see it in action: So I want to simulate some of these with just So let’s play with For the animation we will use an infinite linear with 10 seconds duration. And the HTML is simple: Now let’s slide in the text and fix it at the beginning. We’ll use I won’t repeat the Now let’s move the text from left to right this time. Again, we’ll use a linear infinite animation with the reverse values for The only other difference will be the initial value for transform property. By now you should be comfortable guessing what will be using. Instead of Now let’s assume back then people wanted to get fancy. We want to bounce the text this time 😃. We will need to add Now this time we want to mix our animation with a bit of stepping to create a typewriter effect. We will be using Don’t forget to add the That was it. You can go back to whatever important job you were doing. A bit of distraction is always good for me and hope this bit was good for you too 😊. Until next time 👋🏼.(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":"38f38c9e-3667-53ff-ab7d-4c474b19875c","html":"codelyzer before and it’s very similar to tslint in a sense. However, I wanted to test something new and thought let’s give SonarQube a shot this time.Intro
\nSetup
\ndocker run -d --name sonarqube -p 9000:9000 sonarqubelocalhost:9000 to see the server dashboard.admin and the password admin to login.![\"SonarQube](\"/9572ec987eacfab62a0913acfc3f9a05/sonarhome.jpg\")
Create a project
\nDownloading the scanner
\nsonarqube on your drive. I usually use c:\\tools for these sort of usage (replace this with what you used if you chose to unzip it elsewhere).sonar-scanner.properties from c:\\tools\\sonarqube\\config folder and uncomment the line which specifies the server address.#Configure here general information about the environment, such as SonarQube server connection details for example\r\n#No information about specific project should appear here\r\n\r\n#----- Default SonarQube server\r\nsonar.host.url=http://localhost:9000\r\n\r\n#----- Default source code encoding\r\nsonar.sourceEncoding=UTF-8Running a scan
\nC:\\tools\\sonar\\bin\\sonar-scanner.bat -D\"sonar.projectKey=fp\" -D\"sonar.sources=.\" -D\"sonar.host.url=http://localhost:9000\" -D\"sonar.login=**********************************\" -D\"sonar.exclusions=node_modules/**/*\"sonar.login argument.\n
\n\n
\nnpm install or yarn if you’ve just forked the code base from your git repository. I faced a few errors before I realised I didn’t have those installed and they are used by the scanner.Summary
\ntslint or codelyzer. I could easily navigate through issues, find out what line of code needed attention. It showed me the results with syntax highlighting and a lo of categories and tags where I could drill down and find what I wanted quickly.History
\n<marquee> element was used to insert a scrolling area of text. You could control what happened when the text reached the edge of it’s area using its attribute. Of course when I use past tense it doesn’t mean it’s not supported anymore. It became obsolete a while back, but most browsers still support it.CSS marquees
\nCSS. We’ll be using CSS animations and play with overflow to simulate text reaching to the edge.Scrolling text
\ntranslateX() to specify the content placement at the start and end of the animation. We’ll use this to keep the text moving between start and end..marquee {\r\n height: 50px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.marquee span {\r\n font-size: 2em;\r\n color: turquoise;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n transform:translateX(100%);\r\n animation: cssmarquee 10s linear infinite;\r\n}\r\n@keyframes cssmarquee {\r\n 0% {\r\n transform: translateX(100%);\r\n }\r\n 100% {\r\n transform: translateX(-100%);\r\n }\r\n}<div class=\"marquee\">\r\n <span>Scrolling Text </span>\r\n</div>Slide in
\nease-out with a 200% value for translateX start and 0% for the end..marquee {\r\n height: 50px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.marquee span {\r\n font-size: 2em;\r\n color: green;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: left;\r\n animation: cssmarquee 10s ease-out;\r\n}\r\n@keyframes cssmarquee {\r\n 0% {\r\n transform: translateX(200%);\r\n }\r\n 100% {\r\n transform: translateX(0%);\r\n }\r\n}HTML code again to save some typing 😁. It’s exactly as above.Left to right
\ntranslateX as our first example..marquee {\r\n height: 50px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.marquee span {\r\n font-size: 2em;\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n color: green;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n /* Starting position */\r\n transform: translateX(-100%);\r\n animation: cssmarquee 20s linear infinite;\r\n}\r\n@keyframes cssmarquee {\r\n 0% {\r\n transform: translateX(-100%);\r\n }\r\n 100% {\r\n transform: translateX(100%);\r\n }\r\n}Scroll vertically
\ntranslateX, we will be using translateY..marquee {\r\n height: 100px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.marquee span {\r\n font-size: 2em;\r\n position: absolute;\r\n color: green;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n transform: translateY(-100%);\r\n animation: cssmarquee 5s linear infinite;\r\n}\r\n@keyframes cssmarquee {\r\n 0% {\r\n transform: translateY(-100%);\r\n }\r\n 100% {\r\n transform: translateY(100%);\r\n }\r\n}Bouncing text
\nalternate to our animation and reduce the delay. We will also add trnslateX so that the content doesn’t bounce off the whole page..marquee {\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n}\r\n.marquee span {\r\n font-size: 2em;\r\n position: absolute;\r\n color: turquoise;\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n line-height: 50px;\r\n text-align: center;\r\n transform: translateY(70%);\r\n animation: cssmarquee 1s linear infinite alternate;\r\n}\r\n@keyframes cssmarquee {\r\n 0% {\r\n transform: translateY(70%);\r\n }\r\n 100% {\r\n transform: translateY(0%);\r\n }\r\n}Typewriting effect
\nfrom and to for our keyframes. Then use steps and step-end to simulate the text and blink cursor effect.body {\r\n font-family: 'Special Elite', cursive;\r\n background: #efefef;\r\n padding-top: 5em;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.typewriter h1 {\r\n overflow: hidden; \r\n border-right: .15em solid green; \r\n white-space: nowrap;\r\n margin: 0 auto; \r\n letter-spacing: .15em; \r\n animation: \r\n type 4s steps(50, end),\r\n blink-cursor .7s step-end infinite;\r\n}\r\n\r\n@keyframes type {\r\n from { width: 0 }\r\n to { width: 100% }\r\n}\r\n\r\n@keyframes blink-cursor {\r\n from, to { border-color: transparent }\r\n 50% { border-color: green; }\r\n}Special Elite font from Google fonts.<head>\r\n <link href=\"https://fonts.googleapis.com/css?family=Special+Elite&display=swap\" rel=\"stylesheet\">\r\n</head>Summary
\n