![[ERR!]](https://pbs.twimg.com/profile_images/828593972029317120/4UXq5Hmj_normal.jpg)
React is a really hot topic this week, so if you're a fan or thinking of becoming one, bookmark this edition!
Some of the more popular stories this week include "React Router 6 Tutorial" by Robin Wieruch, "Top 7 React Developer Tools to Use in 2021 (With Bonus!)" by Sunil Joshi and Indrajith's "Axios Mocking with ReactJS" on Bits and Pieces.
General
Angular vs React vs Vue: Finding Value in Each
Between these three, there's no clear winner that should be most definitely used in your next project to achieve mind-blowing success. If you've already settled on one framework or a library - as a...
Authored by: JavaScript In Plain English
RxJs Challenge: Spot the Mistake
Our team works in Angular + Node.js. We use proper OO with heavy Reactive influence (RxJs) when it's applicable. We're pragmatic programmers: get stuff done fast, keep it short and maintainable, we don't believe in silver bullets: always try to use the best fitting solution. We're making the backend logic of a game.
Authored by: Imre Gábor
Debug like a pro
Being a web developer one must be aware of some awesome debugging techniques. To be honest I have been using console.log() along with debugger to debug my code, but debugging is not limited to these two. I have came across some great articles informing there is so much more.
Authored by: Amnah Khatun
Array.prototype.at
Working with arrays is an essential skill in any programming language, especially JavaScript, as we continue to rely on external data APIs. JavaScript has added methods like find and ` findIndex recently, but one syntax I love from languages like Python is retrieving values by negative indexes.
Authored by: David Walsh
Introducing Svelte, and Comparing Svelte with React and Vue
Josh Collingsworth is clearly a big fan of Svelte, so while this is a fun and useful comparison article, it's here to crown Svelte the winner all the way through. A few things I find compelling: One of the things I like most about Svelte is its HTML-first philosophy.
Authored by: CSS-Tricks
Let's build our own Redux
I coded in Java/Kotlin for most of my college life, and hence, followed the MVC pattern mostly for projects. Ironically, my first job right after college was as a ReactJS developer. Now that I had to shift my paradigm from that to the functional approach of modeling data, Redux, it wasn't easy for me and, I had my share of tough times getting my head around.
Authored by: Shivam Bhasin
Svelte and Elder.js with Nick Reese on Web Rush #158
Nick Reese chats with us about what Elder.js is and why would someone use it for development? What are short codes and how do they benefit development in Svelte? How does Elder.js fit alongside Sveltekit? And how does hydration work with Elder.js?
Authored by: John Papa
The Developer's Guide To Building A Notifications Systems: Part 1 - User Requirements
Before building a notification system, you should know the requirements for your internal users who will be creating the notifications for your end-users.
Authored by: Courier
The Solution to Npm Package Hijacks & Malware Is Deno - I Like Kill Nerds
I think it has become abundantly clear that Node.js and how it deals with dependencies is flawed and has become a total liability now. On October 22, 2021, a popular Npm package was hijacked and exposed to anyone who downloaded it to a password harvester and cryptocurrency miner for 4 hours.
Authored by: Dwayne Charrington
JavaScript
Finding unresolved promises in JavaScript | Swizec Teller
JavaScript is a fantastic server-side language because it's async. That also makes it tricky. 💩 Async means you can write code that doesn't hit the usual thread-safety problems and lets you run multiple tasks in "parallel". Like waiting for a file read without blocking computation.
Authored by: Swizec
The Best JavaScript Interview Question I've Ever Come Across
We are calling the SayHi() function calling in its body the sayBye() function. The sayHi() function enters the stack and immediately after that, the sayBye() function is stacked upon it. When sayBye() finishes executing, it will exit the call stack and after that, the sayHi() exists as well.
Authored by: JavaScript In Plain English
Responsible JavaScript
High five to Jeremy on the big release of Responsible JavaScript on A Book Apart. There is a lot of talk about how the proliferation of JavaScript has had a negative impact on the web, but now we have the canonical reference tome.
Authored by: CSS-Tricks
Atomized Transactions of Web Assets: JavaScript's Role in the Web3 Internet Economy
Immutable, transferable, and trackable links will play a major role in the web3-driven internet that is coming. Because if you know a bit about how the internet works, you can see that a link between two web pages is a relation like a liaison between two blocks of a chain, like a contract between two parties - here, two pages.
Authored by: Makhtar Diop
TypeScript
Using Firestore with TypeScript in the v9 SDK
So I've been playing with the new Firebase/Firestore V9 SDK recently and have come up with a very simple and very minimal way to make it play nice with TypeScript. The only thing we're going to do is to create an abstraction that maps all of the possible collections in our DB, and returns a typed Firestore collection reference.
Authored by: GuardLine VPN
A Deep Dive Into Serverless UI With TypeScript
Serverless UI is simply a free, open-source command-line utility for quickly building and deploying serverless applications on the AWS platform. In this article, we will learn and cover everything needed on using Serverless UI to deploy our projects or serverless applications to cloud services providers.
Authored by: Smashing Magazine
React
Axios Mocking with ReactJS
When it comes to mocking Axios, it all starts with the Mock Adapter. It's a different NPM library that provides the additional capabilities to Mock the API requests. You can install it using the command npm install --save-dev axios-mock-adapter. Then, you need to create an Axios instance and pass it to the Axio adapter.
Authored by: Bit
Common React Hooks Mistakes You Should Avoid
React Hook feature was first introduced on React 16.8 update and became immensely popular among developers due to its capabilities. It allows you to hook into React state and lifecycle features. And, sometimes, it could be challenging when using it for advanced use cases.
Authored by: Bit
React Router 6 Tutorial
A React tutorial which teaches you how to use React Router 6. In order to get you started, create a new React project (e.g. create-react-app). Afterward, install React Router by following the official instructions from their documentation. The first implementation detail will be telling our React application that we want to use React Router.
Authored by: Robin Wieruch
You can use React Query for slow computation, not just API | Swizec Teller
React Query brings the ergonomics of GraphQL clients to RESTful APIs. It scratched my itch. Getting a whole company onto a new way of writing the API layer is hard and there's real work to do. React Query offers the perfect middle ground.
Authored by: Swizec
GraphQL On The Front-End (React And Apollo)
Quick summary ↬ Within the last decade, technologies like GraphQL have changed how we build web apps and how they communicate with each other. GraphQL provides certain benefits over REST APIs - let's find out what they are.
Authored by: Smashing Magazine
Teaful: tiny, easy and powerful React state management
Teaful is a new npm package where you can manage your stores with less than 1kb without the need of boilerplate: reducers, actions, selectors, connect, etc. And without unnecessary rerenders! It subscribes only to the changes of the used properties.
Authored by: Aral Roca
Build a Simple React Login Form using Event Handlers and React Hook
I think many people face difficulties at the beginning of learning React. In my perspective, one has to try to build simple projects along with the concepts, so that we can understand clearly. So, here I am to help you out by building a simple login form using React and boosting your React knowledge This is another super duper simple project.
Authored by: K Hemanth Raju
Implementing a timer using React
Implementing a timer using React might seem straightforward until you actually try to implement one. This seemingly run-of-the-mill task can put your React knowledge to a stern test. First, let us try the obvious way-creating a state and incrementing it using setInterval.
Authored by: Frontend Weekly
Why I'm excited about React 18 - talk | Swizec Teller
React 18 is coming soon. I hope 🤞 React 18 is the one with Suspense. The major refactor that enables transparent asynchronous rendering. Yes that means you can load data without async functions and draw large animations that skip frames without UI blocking.
Authored by: Swizec
Aurelia
How to Get the Viewmodel Instance From the Aurelia 2 Au-Compose Element - I Like Kill Nerds
Dynamic composition is a crucial part of developing robust user interfaces in Aurelia. If you worked with the compose element in Aurelia 1, you might (or might not have) needed to obtain a reference to the composed view-model itself. While Aurelia 2 keeps many things the same, how dynamic composition works is a little different.
Authored by: Dwayne Charrington
Vue
How to Show/Hide Elements in Vue
Hiding and showing elements on a web page is an often occuring UI-related task. You might want to toggle the visibility of some detail sections, tooltips, and more.
Authored by: Dmitri Pavlutin
Node.js
Node.js and npm: introductory tutorial
In this tutorial we will see how to install and use both Node.js and the npm package manager. In addition,... | Web design web development news, website design and online marketing. Web design, development, javascript, angular, react, vue, php, SEO, SEM, web hosting, e-commerce, website development and search engine optimization, social media management.
Authored by: MA-NO WebDesign&Dev
Deploy a Node.js App to Oracle Cloud
I'll assume you have the private key given by Oracle cloud when you create your instance (in my case it will be acecom-server-3), and you have it store it somewhere on your PC.
Authored by: JavaScript In Plain English
Libraries and Tools
Top 7 React Developer Tools to Use in 2021 (With Bonus!)
Whether you are just starting to learn React or you're already full-time working professionally in it, there are many tools (both free and paid) that you can use in your personal or professional projects. They are always beneficial as they help speed up the workflow or get things done quickly.
Authored by: JavaScript In Plain English
Testing
Getting Started With Testing In React - Upmostly
In this tutorial I will be giving an introduction to testing in React.
Authored by: Upmostly
Faster test execution with cypress-grep
How to run filtered specs and tests faster using cypress-grep plugin. Recently I have written the cypress-grep that can be useful to run the tests selectively by part of the title, or by using tags.
Authored by: Gleb Bahmutov
Functional Programming
React Error: "this.setstate is not a function" - How to Fix - Upmostly
By Jesse Ryan Shue "this.setstate is not a function" is a common error message that comes up in React. In this article, we'll learn how to fix it. As a reminder, we use this.setstate in React class components. If you're using functional components, you'll likely use the useState hook instead.
Authored by: Upmostly
