--- title: Best JavaScript posts — November 2021 | daily.dev description: The most upvoted JavaScript posts from November 2021, curated by the daily.dev community. canonical: https://daily.dev/tags/javascript/best-of/2021/11 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/javascript/best-of/2021/11 og:type: website og:site_name: daily.dev og:title: Best JavaScript posts — November 2021 | daily.dev og:description: The most upvoted JavaScript posts from November 2021, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of JavaScript — November 2021 1. 1 [](https://daily.dev/posts/4-javascript-concepts-that-every-developer-should-know-whm7kjtpr "4 JavaScript Concepts That Every Developer Should Know") Article JavaScript in Plain English · 5y 4 JavaScript Concepts That Every Developer Should Know In this post, I will discuss four of the most important JavaScript concepts. IIFE IIFE, aka, Immediately Invoked Function Expression, are JavaScript functions defined as expressions that are immediately invoked and executed as soon as they are defined. Scope Scope determines which variables you have (or do not have) access to in different contexts. Closures are helpful to employ when you would like to pass variables, arrays, or methods from an outer function to an inner function. 315 14 2. 2 [](https://daily.dev/posts/advanced-javascript-design-patterns-hakr-ecpz "Advanced Javascript Design Patterns") Article DEV · 5y Advanced Javascript Design Patterns Design Patterns are the solutions to commonly occurring problems in software design. These patterns are easily re-usable and are expressive. We will be discussing all these design patterns using Javascript es6 classes. I have covered here 20+ design patterns explanations in javascript. If you wish to learnAdvanced react component patterns, please find it here. 237 5 3. 3 [](https://daily.dev/posts/writing-clean-code-in-javascript-pzleetrma "Writing Clean Code in JavaScript") Article Bits and Pieces · 5y Writing Clean Code in JavaScript Using object destructuring makes the code much simpler and easier to understand. Use multiple input parameters instead of single object inputs. Arrow functions provide a concise way of writing JavaScript functions. Use Template Literals for String Concatenations. Avoid the most popular way to express and handle nested functions in JavaScript 7. 154 7 4. 4 [](https://daily.dev/posts/free-100-mern-mean-stack-resources-ldsccjgtv "Free 100+ MERN / MEAN Stack resources") Article DevDojo · 5y Free 100+ MERN / MEAN Stack resources I have gathered all the resources that you will require to become a MERN or MEAN stack developer. All these resources will include Articles, Videos, Course, Websites, Tutorials, Books etc. And everything is FREE. You should know the basics of HTML, CSS AND JS. 142 5 5. 5 [](https://daily.dev/posts/array-cheatsheet-javascript-s4izmbb3d "Array cheatsheet Javascript") Article DEV · 5y Array cheatsheet Javascript An array is a variable which can contain several independent data, indexed by a number, called index. The index of an array is thus the element allowing to access the data stored in it. Variables in Javascript allow only one data to be stored at a time. Javascript proposes a data structure allowing to store all these data in a "common variable": the array. 96 4 6. 6 [](https://daily.dev/posts/how-to-make-blob-menu-using-html-css-and-javascript-a0kyiqn3l "How to make blob menu using HTML, CSS and JavaScript") Article Hashnode · 5y How to make blob menu using HTML, CSS and JavaScript I wanted to make something simple with a little transition animation to make it look cool, so I created this blob menu. I got a lot of positive feedback when I shared it so here is the step-by-step process on how to create it. First, we got the tag which is used to import font awesome icons. We got our menu items Menu icon from font-awesome icons. A "links" div that wraps all the items in the menu in one element to be shown or hidden. JavaScript code to show and hide the menu items and the blob. 88 10 7. 7 [](https://daily.dev/posts/introduction-to-webassembly-wasm--36cgt9kif "Introduction to WebAssembly (WASM)") Article Medium · 5y Introduction to WebAssembly (WASM) As of today, 94% of installed browsers support WebAssembly. It enables near-native execution speed in a web browser, making it possible to port desktop applications (like AutoCAD) and video games (e.g. Doom 3) It has the potential to change websites from what we know them today to something much more. 88 1 8. 8 [](https://daily.dev/posts/vs-code-tips-frameworks-js-utils-react-native-k7cxwi-0s "VS Code Tips, Frameworks, JS Utils, React Native") Article Web Tools Weekly · 5y VS Code Tips, Frameworks, JS Utils, React Native This week we look at why VS Code is so popular with developers and programmers. We also share some productivity tips and hacks to help you get the most out of the tool. And we ask you to share your favourite VS Code tips in the discussion below. Now on to this week's tools! 79 4 9. 9 [](https://daily.dev/posts/tap-bar-with-liquid-animation-using-css-and-javascript-grn-unnn2 "Tap bar with liquid animation using CSS and JavaScript") Article DEV · 5y Tap bar with liquid animation using CSS and JavaScript In this article, we will create a tap bar that you can use in your mobile projects. In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations. Let's first look at what are we building: 75 3 10. 10 [](https://daily.dev/posts/how-to-build-a-web-scraper-with-node-js-htlrwnscc "How to Build a Web Scraper With Node.JS") Article DevDojo · 5y How to Build a Web Scraper With Node.JS This tutorial will demonstrate how to automate scraping data off of the website and using it for whatever purpose. The project will be built with Node.js and Express. The source code of the completed project can be found on CodeSandbox. Fork, tweak the scripts and run the code. 74 6 11. 11 [](https://daily.dev/posts/flutter-vs-react-native-the-battle-of-the-cross-platform-arena-ivoaeglaa "Flutter vs React Native: The Battle of the Cross-platform Arena") Article Honeypot · 5y Flutter vs React Native: The Battle of the Cross-platform Arena Flutter is a cross-platform software development kit (SDK) used to build natively compiled applications. React Native was introduced back in 2015 by facebook to develop native Android and iOS applications. Flutter ships with native components by default and compiles to X86 and ARM out of the box. 67 7 12. 12 [](https://daily.dev/posts/how-facebook-encodes-videos-ynsdtg75c "How Facebook Encodes Videos") Article Quastor Daily · 5y How Facebook Encodes Videos Quastor Daily is published every Thursday. This week we look at how Facebook encodes videos. We also look at the benefits and downsides of Rust for JavaScript tooling. Plus, a couple awesome tech snippets on Unity for Software Engineers and a new question from Facebook. 65 4 13. 13 [](https://daily.dev/posts/javascript---everything-you-always-wanted-to-know-about-localstorage-but-you-were-afraid-to-ask--bkmakgytv "javascript - Everything you always wanted to know about localStorage (but you were afraid to ask)") Article DEV · 5y javascript - Everything you always wanted to know about localStorage (but you were afraid to ask) LocalStorage is a read-only property of the window interface that allows us to access the Storage for the Document’ origin (aka the browser). It let us save key-value pairs on the user browser. This was introduced on HTML 5 and everything it’s stored as a String, but I will show you how to save JSON objects. 57 3 14. 14 [](https://daily.dev/posts/top-5-javascript-es12-features-you-should-start-using-now-iapz6smie "Top 5 JavaScript ES12 Features You Should Start Using Now") Article gitconnected · 5y Top 5 JavaScript ES12 Features You Should Start Using Now Learn the amazing features offered by the ECMAScript 2021 update. Beginners and experienced developers can benefit from this article. Top 5 JavaScript ES12 Features You Should Start Using Now. The new features include Numeric Separators, Private Class Methods and Accessors, and AggregateError. 50 15. 15 [](https://daily.dev/posts/top-6-javascript-chart-libraries-b3w-sj0-x "Top 6 Javascript Chart Libraries") Article DevDojo · 5y Top 6 Javascript Chart Libraries JavaScript is a programming language used to develop dynamic and interactive websites. There are over 1.8 Billion websites in the world, and JavaScript is used on 95% of them. I have compiled the best and useful Chart Libraries that you need as a Javascript developer. The JavaScript Chart Libraries helps you easily visualize data using JavaScript. 47 4 16. 16 [](https://daily.dev/posts/code-with-pleasure-typescript-improves-developer-experience-cfunbd0co "Code with pleasure. Typescript improves Developer Experience") Article The Software House · 5y Code with pleasure. Typescript improves Developer Experience Developer experience is a concept of making the day-to-day of software developers better and easier. TypeSccript is a programming language that is a superset of JavaScript. TypeScript lets you balance between not-as-predictable dynamic code and static typed code. 36 5 17. 17 [](https://daily.dev/posts/is-next-js-here-to-stay--a8pho-4z1 "Is Next.js Here to Stay?") Article DZone · 5y Is Next.js Here to Stay? Next.js allows developers to create super fast and ultra user-friendly websites. The Javascript framework is employed by many big digital companies such as Twitch and Netflix. Next.js is considerably more pricey than other frameworks and it doesn’t offer free management. There are also ongoing costs that you have to consider, such as hiring a web developer. 29 2 18. 18 [](https://daily.dev/posts/free-javascript-mine-of-resources-yvjopqv71 "Free JavaScript mine of resources") Article DevDojo · 5y Free JavaScript mine of resources Free resources for learning JavaScript. Includes free books, courses, tutorials and playlists. Each of the sites listed below has an excess of JavaScript information to learn from and refer back to. Listed below are some fantastic beginners JavaScript playlists to watch and code along to. If you wanna add something comment below. 28 1 19. 19 [](https://daily.dev/posts/throw-me---a-hassle-free-url-shortener-3xdvhjo5l "Throw-Me - A hassle free URL shortener") Article Product Hunt · 5y Throw-Me - A hassle free URL shortener 27 4 20. 20 [](https://daily.dev/posts/webassembly-vs-javascript-the-complete-guide-dcfboeit "WebAssembly vs. JavaScript: The Complete Guide") Article SNIPCART · 5y WebAssembly vs. JavaScript: The Complete Guide WebAssembly (WASM) was designed with a single aim: to execute efficient modern browser-based apps at high-performance levels. It is a low-level, bytecode, assembly-like language designed to run natively on the web. We take a long hard look at WebAssembly, how it works, what makes it different from JavaScript, and the last burning question: is it better than JavaScript? 27 1 21. 21 [](https://daily.dev/posts/code-a-cookie-based-darkmode-switch-in-css-and-vanilla-javascript-7bkkwcoml "Code a cookie-based darkmode switch in CSS and vanilla JavaScript") Article gitconnected · 5y Code a cookie-based darkmode switch in CSS and vanilla JavaScript Code a cookie-based darkmode switch in CSS and vanilla JavaScript. The darkmode button is located inside the

element on line 13\. In the stylesheet, I define the body in its light and dark state. Also I set the design for dark mode button in lightmode und darkmode (classname active) status. 27 22. 22 [](https://daily.dev/posts/json-for-beginners-javascript-object-notation-explained-in-plain-english-1s7es3sts "JSON for Beginners – JavaScript Object Notation Explained in Plain English") Article freeCodeCamp · 5y JSON for Beginners – JavaScript Object Notation Explained in Plain English JSON (JavaScript Object Notation) is a text-based data exchange format. It is a collection of key-value pairs where the key must be a string type. The key and value must be separated by a colon (:) symbol. No comments (// or /\* \*/) are allowed in JSON data. 26 23. 23 [](https://daily.dev/posts/web-push-notification-using-react-and-node-js-7-mtlrqwz "Web-push Notification using React and Node js") Article DEV · 5y Web-push Notification using React and Node js The React app uses a service worker to serve content to users. This lets the app load faster on subsequent visits in production, and gives it offline capabilities. It also means that developers (and users) will only see deployed updates onsequent visits to a page, after all the existing tabs open on the page have been closed. 25 24. 24 [](https://daily.dev/posts/responsive-side-navigation-bar-in-html-css-and-javascript-9tgp1c2az "Responsive Side Navigation Bar in HTML CSS and JavaScript") Article DEV · 5y Responsive Side Navigation Bar in HTML CSS and JavaScript In this article you will learn how to create Responsive Sidebar Menu using HTML CSS JavaScript. Below I have shared a video tutorial for you which will help you to know how to make this Responsives Side Navigation Bar step by step. I created this project with the help of HTML CSS and JavaScript. First I created a top menu bar with a logo and a menu button. I then created a site bar that contains a lot of icons and menu items. 22 25. 25 [](https://daily.dev/posts/how-to-fetch-data-in-svelte-ll23ebpqx "How to Fetch Data in Svelte") Article SitePoint · 5y How to Fetch Data in Svelte This tutorial explores how you can consume and render data from an API in your Svelte application. We’ll build a sample application that interacts and displays data provided by a REST API server. This application will allow users to fetch lists of blog posts and display them on the page. 19 1 [See all JavaScript archives](/tags/javascript/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/javascript/best-of/2021/11#page","url":"https://daily.dev/tags/javascript/best-of/2021/11","name":"Best JavaScript Posts — November 2021","description":"The most upvoted JavaScript posts from November 2021, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/javascript/best-of/2021/11#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/4-javascript-concepts-that-every-developer-should-know-whm7kjtpr","name":"4 JavaScript Concepts That Every Developer Should Know"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/advanced-javascript-design-patterns-hakr-ecpz","name":"Advanced Javascript Design Patterns"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/writing-clean-code-in-javascript-pzleetrma","name":"Writing Clean Code in JavaScript"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/free-100-mern-mean-stack-resources-ldsccjgtv","name":"Free 100+ MERN / MEAN Stack resources"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/array-cheatsheet-javascript-s4izmbb3d","name":"Array cheatsheet Javascript"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/how-to-make-blob-menu-using-html-css-and-javascript-a0kyiqn3l","name":"How to make blob menu using HTML, CSS and JavaScript"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/introduction-to-webassembly-wasm--36cgt9kif","name":"Introduction to WebAssembly (WASM)"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/vs-code-tips-frameworks-js-utils-react-native-k7cxwi-0s","name":"VS Code Tips, Frameworks, JS Utils, React Native"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tap-bar-with-liquid-animation-using-css-and-javascript-grn-unnn2","name":"Tap bar with liquid animation using CSS and JavaScript"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/how-to-build-a-web-scraper-with-node-js-htlrwnscc","name":"How to Build a Web Scraper With Node.JS"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/flutter-vs-react-native-the-battle-of-the-cross-platform-arena-ivoaeglaa","name":"Flutter vs React Native: The Battle of the Cross-platform Arena"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/how-facebook-encodes-videos-ynsdtg75c","name":"How Facebook Encodes Videos"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/javascript---everything-you-always-wanted-to-know-about-localstorage-but-you-were-afraid-to-ask--bkmakgytv","name":"javascript - Everything you always wanted to know about localStorage (but you were afraid to ask)"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/top-5-javascript-es12-features-you-should-start-using-now-iapz6smie","name":"Top 5 JavaScript ES12 Features You Should Start Using Now"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/top-6-javascript-chart-libraries-b3w-sj0-x","name":"Top 6 Javascript Chart Libraries"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/code-with-pleasure-typescript-improves-developer-experience-cfunbd0co","name":"Code with pleasure. Typescript improves Developer Experience"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/is-next-js-here-to-stay--a8pho-4z1","name":"Is Next.js Here to Stay?"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/free-javascript-mine-of-resources-yvjopqv71","name":"Free JavaScript mine of resources"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/throw-me---a-hassle-free-url-shortener-3xdvhjo5l","name":"Throw-Me - A hassle free URL shortener"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/webassembly-vs-javascript-the-complete-guide-dcfboeit","name":"WebAssembly vs. JavaScript: The Complete Guide"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/code-a-cookie-based-darkmode-switch-in-css-and-vanilla-javascript-7bkkwcoml","name":"Code a cookie-based darkmode switch in CSS and vanilla JavaScript"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/json-for-beginners-javascript-object-notation-explained-in-plain-english-1s7es3sts","name":"JSON for Beginners – JavaScript Object Notation Explained in Plain English"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/web-push-notification-using-react-and-node-js-7-mtlrqwz","name":"Web-push Notification using React and Node js"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/responsive-side-navigation-bar-in-html-css-and-javascript-9tgp1c2az","name":"Responsive Side Navigation Bar in HTML CSS and JavaScript"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/how-to-fetch-data-in-svelte-ll23ebpqx","name":"How to Fetch Data in Svelte"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"JavaScript","item":"https://daily.dev/tags/javascript"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/javascript/best-of"},{"@type":"ListItem","position":5,"name":"November 2021"}]}]} ```