Destructuring nested objects explained with some examples
30th January 2019One of the most useful and yet advanced aspects that ES6 introduced was destructuring objects and arrays. But it is most interesting when we use it for nested objects and arrays. We will check out some examples. Destructuring definition in practice Firstly we need to define how destructuring works.Take a look at this example: const…
Using map method in real word use cases; mostly in React
24th January 2019As we know the map() method creates a new array with the results of calling a provided function on every element in the calling array. Therefore whenever we need to manipulate data without actually changing the data itself, map is the best option. Render lists using map Basically the most use case for map in React specifically…
Similarities and differences between rem and em CSS units explained with examples
15th January 2019One of the most important take over in CSS is units. Understanding how units and specifically rem and em work make a huge difference on how we write CSS. We will explain similarities and differences of rem and em with examples in this article. The all mighty pixel Once and for all we better learn…
How to use positon : sticky in CSS to create awesome sticky header and flexible sticky elements without Javascript
5th January 2019Creating sticky elements on the page and specifically sticky header has always been a Javascript thing. We used to create a class with position: fixed and assign it to the sticky element based on user’s scroll. Position: sticky the new solution Using position: sticky in CSS we create an sticky element which sticks the element…
React fundamentals to build real world applications: how React renders elements
31st December 2018This article is inspired by the very informative site called Egghead.io which I enjoy so much. Where I learnt things from deeply. Therefore I want to share a very important concept in React as how it renders elements comparing to pure Javascript. Rendering element using Javascript Basically we create an element into the DOM using…
React Context API and how to use it explained in simple steps with examples
25th December 2018React Context API is getting a lot of attention after the latest updates. Because in some cases that the application is not too complicated and using Redux to manage states seems an overkill this API looks prefect. In this article we will have a look at how it works with some examples. React Context API…
Manipulate DOM elements and their CSS styles using useful Javascript methods
16th December 2018It is the reign of CSS in Js thoughts and practices and almost everything in Javascript these days. Therefore manipulating DOM elements using Javascript is an important skill to know and practice. In this article we will look at most important and useful functions that we need in a daily basis development. Methods for selecting…
Using CSS variables to create dynamic CSS transform values
8th December 2018One of the things that I hear a lot about is the ability to dynamically change CSS transform values by the power of CSS variables. So this way we can control our transform properties at any time as CSS variables are live in the browser. Change CSS transform rotate on hover We will not go…
Heads up for WordPress Gutenberg; How to get ready for the big change
2nd December 2018Most of us do not like change of any kind, but a change of this magnitude may be devastating for some! This change could have many implications for those of us who are expecting the change. For those whom these changes catch off-guard, the surprise could be a nightmare. If you are reading this article, you know…
Remove duplicate items from arrays using reduce() method explained with examples
24th November 2018We have explained use cases of reduce() method in this and this article. Eventually there are lots of use cases like removing duplicate values from arrays. We will explain this case here with some examples. Remove duplicate value use case We have had a situation while we needed to filter our array to get only…