Hi all!
Welcome to another edition of {Tech & Dev} Newsletter. This week is an eclectic collection of internet finds, React, cloud platforms, and articles that you may have missed.
Without further ado, let’s dive into this week’s stories.
Top 10 JavaScript CSV Parsers
CSV — love them or hate them, they are part of many businesses and how they operate. These comma-separated values come in the form of a text file with a specific format that allows for data to be translated into a tabulated structure when imported into spreadsheet software and apps such as Excel and Google Sheets. These table-based reports are often used by analysts, accountants, commercial, and marketing to view, add, and manipulate.
As developers, a majority of us work primarily with JSON, making CSV an incompatible dataset. We cannot easily filter it in its raw form or hook into the data the way we can with JSON. This is where JavaScript CSV parsers come in. For JavaScript-based apps, CSV parsers are bridging libraries that translate tabular data into JSON compatible formats.
Here are the top 10 free JavaScript CSV parsers that you can use for your next (or current) project that contains comma-separated values.
Read it here 👉 Top 10 JavaScript CSV Parsers
Next.js is the next best thing — but what’s the catch?
Next.js is a popular open-source JavaScript framework for developing server-side rendered React applications. It’s simple, lightweight, and efficient, making it an ideal choice for small- to medium-sized projects.
In a nutshell, the framework enables you to get up and running with React quickly and easily. It provides a number of powerful features and components that make developing React applications simpler and more efficient. These include automatic code-splitting, hot module reloading, and routing.
But what are the good and the bad parts of Next.js?
Read it here 👉 Next.js is the next best thing — but what’s the catch?
Moving from JavaScript to TypeScript
JavaScript is already pretty time-consuming to learn and nobody truly masters it because the API keeps getting updated along with the documentation as the language evolves. There are also a lot of frameworks and libraries to learn.
It was outdated thinking and fortunately, I saw the light when I was between jobs looking for work. Companies were looking for polyglot developers which essentially means a person who knows and is able to use several programming languages.
Here’s an article outlining the experiences of moving from JavaScript to TypeScript.
Read it here 👉 Moving from JavaScript to TypeScript
How to set up Firebase Authentication in React
Firebase authentication is part of the services suite offered by Google’s full-stack app platform. It covers a majority of authentication options including email, and federated identity providers such as Google, Facebook, Twitter, and GitHub. Firebase authentication is a free service, with the exception of phone verification — which is free for the first 10k API calls.
There are multiple ways to implement Firebase authentication, including a ‘drop-in’ solution where an external user flow is provided to sign in users. Another way is to use the Firebase SDK authentication, which is a package that can be leveraged for backend and native applications.
For this tutorial, we are going to focus on implementing Firebase authentication in a React app.
Read it here 👉 How to set up Firebase Authentication in React
Level-Up Your React Game with Testing
Are you currently learning React JS or using it in your work?
Let’s step up your React game by learning how to test a React App. In this series, we will learn how to test using packages that come bundled with create-react-app, Jest and React Testing Library. In this first part of the series, let's understand these two packages and a simple test.
Read it here 👉 Level-Up Your React Game with Testing
Killing me softly…the slow death of Bootstrap
CSS is hard.
There, I said it. It’s hard to create a cohesive, consistent design across different browsers, devices, and screen sizes. It’s hard to keep up with the latest advancements and trends in web design. It’s hard to make your website look good, period.
But it doesn’t have to be.
Read it here 👉 Killing me softly…the slow death of Bootstrap
Is Supabase your new Firebase alternative?
The implementation of PostgresSQL on Supabase also makes it highly accessible and low-code projects. What is low-code? Low code is a growing trend and software approach that’s supported by an infrastructure that enables minimal coding to build fully functional applications.
The interface for PostgresSQL on Supabase is akin to working on a spreadsheet, with the ability to easily add, edit, and update data in a no-code manner. Meanwhile, there is also an SQL editor interface that lets you create tables, functions, joins, and whatever else is required for your data needs.
Read it here 👉 Is Supabase your new Firebase alternative?
How do React Fragments work under the hood?
React aims to stay neat and clean that’s why fragments are out there. They allow getting rid of excess wrappers while rendering multiple elements!
That’s pretty cool, but how do they work under the hood?
Read it here 👉 How do React Fragments work under the hood?
7 Toxic Habits of bad programmers and why teams fall apart
As developers, we’ve all encountered that toxic programmer in some form. However, it’s also easy to be blindsided by our own behaviors.
Bad programmers can be one of the biggest sources of toxic habits in an organization. Here is a rundown of common toxic behaviors and what they can do to teams.
Read it here 👉 7 Toxic Habits of bad programmers and why teams fall apart
How does React allow creating custom components?
React strives to give its users the ability to build encapsulated, reusable components, but how does it implement this logic in JSX?
Here is a solid article about custom components with walkthrough code.
Read it here 👉 How does React allow creating custom components?
This is How I Switch from Angular to React
The story began when I was working as a frontend engineer at my first workplace using Angular at that time. At first, I enjoyed Angular but it changed when I want to switch jobs in the mid of 2021. Most of the job vacancies required React as the main skillset. After that, I change my mind and take a maneuver from Angular to React as my main frontend tech stack.
Not only that, when I did some troubleshooting or debugging I need more time to google some stuff if I code using Angular. It’s very different when I use React, I just enter some keywords and the search result will display more accurately based on my needs. This lasted for about almost one year until I finally realized it was time for me to change.
Here is a developer’s tale on what he experienced during the switch from Angular to React.
Read it here 👉 This is How I Switch from Angular to React
How to create a countdown timer using React Hooks
React(aka ReactJS) is a library that builds declarative and component-based user interfaces. With the inclusion of functional components and hooks, it is even more potent in reusability, better code organization, and data flow.
Web developers widely use React’s standard hooks like useState, useEffect to manage state within the components. However, the practice of writing custom hooks seems to be a bit lesser. This article aims to explain the usages of the custom hook in a beginner-friendly manner. What could be better than learning it by developing a small but practical application?
We will create a countdown timer that will allow us to set an initial date and time to start the countdown. Once the date and time expire, it will show an expiry notice.
Read it here 👉 How to create a countdown timer using React Hooks
And that's it for this week. Be sure to subscribe and stay tuned for next week's edition.
Top comments (0)