A very happy and healthy New Year to all our readers! We hope 2022 will be prosperous for you all!
Some popular stories from this first week of 2022 are Dmitri Pavlutin's "A Smarter JavaScript Mapper: array.flatMap()", Seth Lutske's "How to Automate Performance Profiling in Node.js" and Fernando Doglio's "I Tried Uber’s React Web Components Library" on Bits and Pieces.
General
The Efficient Way to Create a MERN App
Whether you are a newbie or an expert in the programming space, you've probably wondered how others developers set up and configure their starting project application. This article tackles an...
Authored by: Bit
Create a Beautiful To-Do List App With Vuetify: Deleting Tasks
Welcome back to our ongoing tutorial series, in which we're going to build a great-looking to-do list app from start to finish using Vuetify and Vue JS. Last time we learned how to use FABs, dialogs, and form controls to give users the ability to create new tasks in the app.
Authored by: JavaScript In Plain English
How to Get Started As a Front-end Web Developer in 2022 (Complete Roadmap with Free Resources)
What started as a Medium publication by Quincy Larson is one of the go-to destinations for web developers today. And whatever you can think of, they pretty much have courses for that. If you want to walk fast, walk alone. But if you want to walk far, walk together.
Authored by: Salvor Pirenne
How to Make Your First Open Source Contribution
In this post, you will be taken through how to make your very first open-source contribution. This article is for developers of all levels who are yet to make their first pull request. It is also for designers, technical writers, translators, and all other people in tech who need to collaborate and do so using open source technology like GitHub.
Authored by: Bit
How to create an Animated Sea using CSS & HTML
It is beneficial to your mental health to be exposed to the sun and ocean air. "Surf therapy" has been demonstrated to improve your mood. Getting in the water and moving about helps you to be more conscious while also getting some exercise. It helps to relieve tension.
Authored by: JavaScript In Plain English
Beyond JSON Performance
Despite being likely the most deployed data exchange format in the software industry to date, and beside the existing competing implementations chasing the best way to stringify or parse faster than a speeding bullet, there are still various "gotchas" around this standard that most developers are un
Authored by: Andrea Giammarchi
JavaScript
JavaScript S
Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it's still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences.
Authored by: David Walsh
JavaScript Frontend Speed is the Next Big Thing
Faster and lighter web experiences are the next big things and teams of developers are reengineering their solutions to make them faster not only because speed metrics are being taken into consideration by search engines but because of the value of time for customers.
Authored by: Makhtar Diop
How Web Workers Work in JavaScript - With a Practical JS Example
In this article, I will walk you through an example that will show you how web workers function in JavaScript with the help of WebSockets. I think it's helpful to work with a practical use case because it is much simpler to understand the concepts when you can relate them
Authored by: keyur paralkar
A Smarter JavaScript Mapper: array.flatMap()
array.map() is a very useful mapper function: it takes an array and a mapper function, then returns a new mapped array. But in this post you'll read about an alternative to array.map(): the array.flatMap() (available starting ES2019). This method gives you the ability to map, but also to remove or even add new items in the resulting mapped array.
Authored by: Dmitri Pavlutin
Create a PWA from Scratch with Vanilla JavaScript
When COVID started spreading in China in January 2020, I took it upon myself to build The Coronavirus App. That simple PWA has since been used by more than 15 million individual users.
Authored by: JavaScript In Plain English
Why Choose Next.js Over Other JavaScript Frameworks in 2022
Which is better, React or Vue? Which is the best JavaScript framework? Is NextJS better than ReactJS? Which JavaScript framework should I learn first? Should I learn React or Vue? Frame the question whichever way you want, the reality is - among developers, these questions pop up quite often.
Authored by: Salvor Pirenne
How to Reverse a String in JavaScript
Reversing a string isn't uncommon in development, and fairly popular for entry-level interview questions. With JavaScript, we have many ways to reverse a string. We can use a combination of string's split() method as well as array's reverse() and join() methods (since strings are ultimately arrays of characters).
Authored by: StackAbuse
Angular
Angular - Getting Started!
Hello, there! It's me, your friendly neighborhood Angular guy! So let's address the elephant in the room. Angular! The framework which everyone is scared of (well, yeah). You must have heard these phrases out there, in the wild that Angular is "tough", "you can't learn Angular", "it's not fun to learn Angular" (oof).
Authored by: Sujay Das
React
React Show Loading Spinner on Submit Click Tutorial
You click on the submit button, form is processed, but nothing is being shown to you. Such a type of negligence leads to a bad user experience. To tackle this problem, in this tutorial, we will show you how to show loader or spinner in submit button while the form is processing.
Authored by: Digamber Singh
Code Splitting in React - All You Need to Know
Many JavaScript frameworks bundle all dependencies into one large file. This makes it easy to add your JavaScript to an HTML page. The bundle requires only one link tag, and there are fewer calls needed to set up the page since all the JavaScript is in one place.
Authored by: sumeet bhalla
Create A Real-Time Medical App With React Native
In today's tech-driven world, people have adopted their habit of solving the majority of their problems simply by using mobile apps. And healthcare has not left an exception. In addition, with the growing prevalence of chronic health issues and the rising usage of wearables, undoubtedly the health tech industry is thriving and making a strong future of healthcare apps.
Authored by: Sophia Martin
Node.js
How to Automate Performance Profiling in Node.js
Performance profiling is very useful for finding out where your application is slow, and how you can make it more efficient. With the right tools, profiling a Node.js application can be fairly straightforward. But the experience described by many tutorials is so involved, and requires the developer to walk through the profiling process step by step, every time.
Authored by: Bit
How to Use MySQL with Node.js
Open up your MySQL workbench and log in with the password that you used during the installation process. After logging in, use this command to get a list of all the databases that exist in your MySQL local instance: show databases; After typing the command use the thunder icon at the top to execute the query: You will get a list of databases that exists on your machine.
Authored by: Tirlochan Arora
Libraries and Tools
Create Your Own Angular Component Library
Reusing frontend components across different projects is a neat little trick that only a few developers have. It makes your code more readable(if done correctly) and in general keeps it pleasantly organized. Your applications look more consistent and coherent when you reuse your components.
Authored by: ding
5 Awesome Libraries To Use In Your Next ReactJs Project
We all know Reactjs is a UI library using which we can build user interfaces rapidly. but Reactjs ecosystem is so rich that you can build dynamic interactive web applications just by using some...
Authored by: Sachin Chaurasiya 👨🏻💻
I Tried Uber's React Web Components Library
To show you something practical, instead of going over a list of features, I'm going to build a very basic password generator app. I'm taking the cue from their own documentation, but I'm just going with a very simplistic version of it, to show you how easy it is to get started.
Authored by: Bit
Testing
Cypress JSON Test Results
How to save the test results as a JSON file using a reporter or a plugin. Sometimes you want to run the Cypress tests and do something based on the number of tests passed or failed. You need the test results in a JSON format, maybe saved as a text file.
Authored by: Gleb Bahmutov
Get Started with React Testing Library and Jest
React testing library has become the most popular option to write test cases for React applications. These test cases resemble how a user would use your application. If you are using the latest version of the create-react-app tool then you already have Jest and Testing Library already installed for you.
Authored by: JavaScript In Plain English