As we edge over the halfway mark for November, if you're looking for some good reading material to see you through the laid back days in the festive season, David Attard has put together a wonderful list of books that have enough evergreen content to make them worth keeping in "9 (FREE) JavaScript Books That Are Well Worth Reading." on Bits and Pieces.
Other highlights this week include Theodoros Mathioudakis' "How to emulate a “Constructor” in React Functional Component with Custom Hooks" and "How to Build Desktop Applications using Electron the Right Way" by Juan Cruz Martinez.
General
Array.Reduce() - Think Twice Before Using it!
Let's take a look at how we can write the above code in a more readable manner without using the reduce() method. const g = new Map();for (const [u, v] of edges) { if (!g.has(u)) g.set(u, []); if (!g.has(v)) g.set(v, []); g.get(u).push(v);} When we read the code from top to bottom, we understand that it creates an empty Map for the graph.
Authored by: Bit
Warp: Improved JS performance in Firefox 83 - Mozilla Hacks - the Web developer blog
We have enabled Warp, a significant update to SpiderMonkey, by default in Firefox 83. SpiderMonkey is the JavaScript engine used in the Firefox web browser. With Warp (also called WarpBuilder) we're making big changes to our JIT (just-in-time) compilers, resulting in improved responsiveness, faster page loads and better memory usage.
Authored by: Mozilla Hacks
How A Full Stack Framework Can Make An Impact In Your Business | Hacker Noon
It's been a year since the exhibition of QCObjects in the Web Summit and now a lot of people and companies are interested in placing QCObjects at the very core of its enterprise software solution. But why is it? Think for a moment about what is what a CIO of a big company should be looking for...
Authored by: Hacker Noon
How to Build Desktop Applications using Electron the Right Way
If you are like me, you love JavaScript and its ecosystem, and you have been building amazing web applications using frameworks like React or performant web servers with NodeJS . Now you want to develop a desktop application, and you don't want to learn a new programming language, or perhaps you want to re-use as much as you can from existing web projects.
Authored by: livecodestream
Top NextJS Boilerplates for 2021
Boilerplates are the minimal reusable code that is common and required across all applications. They can be thought of as a reusable "glue" for components. Combining them with independent reusable components boosts delivery and, quite simply, makes coding much more enjoyable. In this article, we will learn about some of the popular NextJS Boilerplates.
Authored by: Bit
Mock APIs: Different Techniques for React and Angular
In web development, specialization improves productivity. In line with this, we can find developers who specialize in frontend or backend. However, splitting work and combining them to deliver functionality isn't that easy when it comes to development. But the good news is, there are proven techniques that work in these circumstances.
Authored by: Bit
The Fetch API Cheatsheet: Nine of the Most Common API Requests
Almost every project needs to communicate with the outside world. If youʼre working with JavaScript frameworks, you'll most likely use Fetch API to do that. But when you're working with the API, do you remember the syntax by heart or do you need a little help? I have written many
Authored by: Ondrabus
JavaScript
Stranger Things alphabet wall scene using vanilla JavaScript
If you're a Stranger Things fan like me then I need explain no further, you understand exactly what we are trying to make here right ? Recall Season One, Will vanishes but remains near his house in the other dimension, uses the Christmas lights set up at his house by his mother to warn her of the demons and tells her to RUN.
Authored by: JavaScript In Plain English
JavaScript Decorators From Scratch
A decorator is simply a way of wrapping a function with another function to extend its existing capabilities. You "decorate" your existing code by wrapping it with another piece of code. This concept...
Authored by: Bit
Build an Accessible Web App with HTML, Sass, and JavaScript
Are you looking for another web app project to build? Are you interested in incorporating accessibility into your websites? Do you want to learn more about creating mobile first apps? If you answered "yes" to any of those questions, you will like the new tutorial we released on the freeCodeCamp.
Authored by: Beau Carnes
9 (FREE) JavaScript Books That Are Well Worth Reading
So when you consider a book on JavaScript, or any language, you have to shop smart. You have to find books that have enough evergreen content to make them worth buying instead of using your favourite programming websites for free. We think the following 9 JavaScript books have enough to make them worth keeping.
Authored by: Bit
3 Ways to Check if a Variable is Defined in JavaScript
How to check if a variable is defined in JavaScript using typeof operator, try/catch blocks, or window.hasOwnProperty().
Authored by: Dmitri Pavlutin
TypeScript
Making Sense Of TypeScript, In 50 Lessons
Meet our new book, "TypeScript in 50 Lessons", a deep-dive to understand what TypeScript is, how it works, and how you can make it work for you. With code walkthroughs, hands-on examples and common gotchas. 464 pages. Jump to the table of contents and get the book right away.
Authored by: Smashing Magazine
Angular
Adjusting Dates By Adding Date / Time Parts In Angular 11.0.0
Over the past week, I've had fun exploring dates in Angular. First, when I stumbled upon the formatDate() function that ships with Angular core; and then after, when I demonstrated how to recreate the Moment.js .fromNow() functionality in Angular.
Authored by: Ben Nadel
How To Translate Dynamic Strings In Angular 10
I am using some dynamic values to create a string and sending that to sweetalert2 configuration. There are a lot of ways we can translate the title text before passing to sweetalert2 but it is getting difficult when we have dynamic values in the title itself.
Authored by: patelatit53
React
React Redux Made Easy.
I personally believe that state management is still a huge mess because no matter what you do, as your project Grows no matter what you used, it will become difficult to manage state and the project structure overall.
Authored by: Raja Osama🔮
Building a Secure Mobile App With React Native
With the total global mobile app revenue estimated to amount from $365 billion in 2018 to $935 billion in 2023, undoubtedly mobile app development has become one of the thriving sectors for investors...
Authored by: Sophia Martin
How To Embed VSCode Into A Browser With React
To explain why TypeScript is important, you need to explain why developer tooling is important. To explain why developer tooling is important you will need a code editing environment. Fortunately the editor for VSCode (monaco editor) is open source, and feels just like VSCode.
Authored by: Matthew Caseres
4 Tips Beginner React Devs Should Follow
Okay, so when I say Server Side rendering, I also mean quite a few things related to it. For instance, NodeJS and webpack. You obviously wouldn't bother rendering your react app server-side as a beginner when you're still figuring out how react works and it's fine.
Authored by: DEB
The React Beginner's Handbook
React is one of the most popular JavaScript frameworks ever created, and I believe that it's one of the best tools out there. The goal of this handbook is to provide a starter guide to learning React. At the end of the book, you'll have a basic understanding of: What
Authored by: freeCodeCamp.org
Configuring prettier and eslint plugins for React from scratch
Hi everyone, how are you? Today we are going to configure the prettier and eslint plugins for a React project from scratch. We will be using VSCode as the default IDE, and all of the extension links in the below section will point to VSCode extensions.
Authored by: Anuradha Kumari
Vue
How to redirect to external URL in Vue
In this tutorial, we are going to learn about how to redirect to an external URL in the Vue Router. Normally, we redirect a user to a different page on the same site by using the following method: Suppose we have a /contact route in our vue app, when a user visits the /contact page we need to redirect them to an external url https://www.google.com/contact/ instead of the same domain redirect.
Authored by: Sai gowtham
What's New In Vue 3?
Vue 3 comes with a lot of interesting new features and changes to some of the existing ones that are aimed at making development with the framework a lot easier and maintainable. In this article, we're going to take a look at some of these new features and how to get started with them.
Authored by: Smashing Magazine
How to Add A Chatbot To Your Vue.js Apps
In this post, we will be learning how to add chatbots in Vue.js apps. Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. To get started, you would need a Dialogflow chatbot or working knowledge of Dialogflow and Vue JS. To integrate the chatbots with Vue.js, you will need a Kommunicate account.
Authored by: JavaScript In Plain English
Node.js
How To Log Like A Boss With Node.js
Last couple weeks were tough for me. The reason behind the challenging and long working hours for weeks was launching the new version of a backend which had been developed for seven years. From day to day until this September, the codebase got bigger and bigger with every new features and their bug fixes.
Authored by: JavaScript In Plain English
Handling Async Operations in Node.js
After a lot of digging, I understood how node.js internally works. This blog is based on my researches, stay patient to deep dive!😁 Okay! So let's understand first what Node.js is 🐘. The documentation says: "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine ."
Authored by: JavaScript In Plain English
Libraries and Tools
Top 5 React state management libraries in late 2020
So, less than 2 months left and 2020 will be over! What an amazing year this was, wasn't it? 🙃 Enough of this sarcasm. I think we all know the reality. I only brought this up because timing is quite important for the topic of today's post (as it might differ over time), which is a list of - in my opinion - top React state management libraries.
Authored by: areknawo
Alternative libraries for Console.log() for your next JavaScript Project
If you are a JavaScript developer you must be using console.log() for debugging your JavaScript project. But do you know that there are some alternative libraries to console.log() . These libraries...
Authored by: Manish Mandal
How I learned reactive programming by re-building RxJs from scratch
Yes, the title is not a typo. We are actually going to reverse engineer RxJs library (stay tuned, tons of code to come 😀). But before we proceed let me tell you why I embarked on this crazy endeavour. In my day job I work with libraries such as React and RxJs religiously.
Authored by: Bit
Functional Programming
Use Constructor in React Functional Component with Custom Hooks
So, in simple words with a Constructor we initialize the state of our component, and someone could say that "Function components don't need a constructor. You can initialise the state in the useState call." The problem here is that Function components are... functions. They run whenever you call them.
Authored by: JavaScript In Plain English
Async/await is awesome, but don't abandon Promises
Let's create a button that will: perform an expensive synchronous operation, fire 2 AJAX requests, and update the DOM based on the AJAX responses. Here is the markup. Here are the functions. Let's also measure the duration of each operation with the Performance API, which visualizes when and how long each function executes on the Chrome DevTools Performance Timeline.
Authored by: Suhan Wijaya