In JavaScript, deep clone means creating a brand new object that includes all nested objects, with all properties being completely independent copies. This is different from shallow copying, which only copies the first-level properties, with nested objects being referenced rather than copied.There are multiple ways to perform deep copying in JavaScript, but the best one to use depends on the specific use case.Can use JSON.parse & JSON.stringify? ❌JSON.parse(JSON.stringify(obj)) is a depth cloning method that uses JSON serialization to create an object. It works for objects that do not co...

Creating a web scraper is no easy task. This is because it requires precision to identify the specific data points that we intend to collect for the end goal we are working towards. Whether we are looking to create a marketing content database or analyze market trends, the last thing we need from our scraper is for it to return a lot of unnecessary data that will not help our cause.To avoid the inconvenience of going through huge amounts of data to get what we requested, it is crucial to plan beforehand and include a parser in our web scraper. This is where CSS selectors come in, as they ...

As a veteran JavaScript developer, I have seen the evolution of JavaScript's asynchronous programming landscape. From callbacks to promises and now async/await, JavaScript has come a long way in making it easier to handle asynchronous operations in a clean and readable manner.In this article, we will delve into the world of async/await and explore why it has become a popular choice for handling asynchronous operations in JavaScript. We will cover the basics of async/await, its syntax, and how it differs from traditional promises. Additionally, we will go through several examples of using async...

CSS Flexbox is a layout module that makes it easier to create flexible and responsive layouts in CSS. It provides a simple and powerful way to align elements within a container and distribute space between them.To use flexbox, you need to set the display property of an element to "flex". You can do this by adding the following rule to your CSS:.container { display: flex;}The flex container will now have two main axes: the main axis and the cross axis. By default, the main axis runs horizontally and the cross axis runs vertically. You can change this by setting the flex-direction property:.con...

CSS's :has is a pseudo-class representing an element if any of the selectors passed as parameters matching at least one element. From the name, it's also easy to understand how it matches elements.The syntax is pretty easy as well::has([some-selector])With this pseudo class, it can do lots of things which previously would be challenging or need tweaking the DOM elements with JavaScript. This post will demonstrate what :has can be used for.IntroductionBelow are a few simple examples on how it works.If wanna select all children with img in element a, can havea:has(> img)If wann...

rollup.js is a module bundler for JavaScript. It compiles small piece of JavaScript modules spreading in different files into a single larger standardized ES code file. This post will show some entry level usage for this library.IntroductionNormally a bundler tool would compile a few small JavaScript files into a single JavaScript so that web browser can read, parse and render it properly. A bundler tool may be needed because of a few reasons:Some early stage browsers don't understand modules, the modularized JS codes need to be packed into standard JS code so that browser can understandThe mo...

...

Below are a list of ES6 code snippets which are used frequently. Hope that it will be helpful.1. Shuffle array elementslet arr = [67, true, false, '55']arr = arr.sort(() => 0.5 - Math.random())console.log(arr)// [ '55', 67, false, true ]2. Remove characters which are not numbersconst str = 'xieyezi 23213 is 95994 so hansome 223333'const numbers = str.replace(/\D/g, '')console.log(numbers)// 23213959942233333. Reverse sequence or wordsconst sentence = 'xieyezi js so handsome, lol.'const reverseSentence = reverseBySeparator(sentence, "")console.log(reverseSentence);// .lol ,emosdnah os sj ize...