Just a log of... tutorials.
These tutorials are produced by the amazing teams linked below.
The Fetch API is finally coming to Node.js
The Fetch API was a long time coming, and its introduction heralded a new era of live and interactive webpages. On 1 February 2022, the Node.js core team merged a pull request adding the Fetch API to Node. To understand why this is such a big deal, let’s explore how Fetch came to be and what this new addition means for Node.js developers.
| View Tutorial on LogRocket | by Childi Orig | Publish Date: August 15, 2020 |
Create a Next.js and MDX blog
Markdown is a language that is widely used by developers to write different types of content, like posts, blogs, and documents. If you haven’t used it, chances are you’ve already seen it in action. Markdown provides an easy syntax for writing and structuring content compared to regular HTML or other writing tools.
| View Tutorial on LogRocket | by | Publish Date: January 31, 2022 |
Building a React Component Library — The Right Way
In this tutorial, we’ll build a modular React + TypeScript “library” with rich documentation, isolated component rendering, tests, and more (the quotation marks will soon be made clearer). It’s not a short article but once you’re done reading, you’ll not only build libraries differently but drastically change the way you structure any web project and collaborate on code. We’ll use Bit to develop and version multiple independent components, all in the same workspace.
| View Tutorial on Bits and Pieces | by | Publish Date: May 25, 2022 |
7 Free React Templates You can Use for Your Projects
React is one of the popular JavaScript libraries for frontend developers, it’s a powerful tool to easily build user interfaces and create web applications. There are a lot of free React resources that you can use to help you boost your productivity and build projects faster than ever. Templates and themes are the best way to save time when starting a React project. Especially if you just want to quickly build a project without focusing a lot on the design process.
| View Tutorial on JavaScript in Plain English | by | Publish Date: January 16, 2022 |
How To Test Your React Apps With The React Testing Library
Today, we’ll briefly discuss why it’s important to write automated tests for any software project, and shed light on some of the common types of automated testing. We’ll build a to-do list app by following the Test-Driven Development (TDD) approach. I’ll show you how to write both unit and functional tests, and in the process, explain what code mocks are by mocking a few libraries. I’ll be using a combination of RTL and Jest — both of which come pre-installed in any new project created with Create-React-App (CRA). To follow along, you need to know how to set up and navigate a new React project and how to work with the yarn package manager (or npm). Familiarities with Axios and React-Router are also required.
| View Tutorial on Smashing Magazine | by | Publish Date: July 3, 2020 |
Setting Up Tailwind CSS In A React Project
This article introduces Tailwind CSS, a CSS library that gives you all of the building blocks you need to build bespoke designs without opinionated styles. You’ll also learn how to seamlessly set up Tailwind CSS in a React project. With Tailwind CSS, you get to create the components that suit what you want or what you are working on. These components can be created by harnessing the power of the utility-first prowess of Tailwind CSS.
| View Tutorial on Smashing Magazine | by Blessing Krofegha | Publish Date: February 24, 2020 |
User Registration and Auth Using Firebase and React
Writing authentication code without a framework or libraries available can take a ton of time to do right — not to mention the ongoing maintainance of that custom code. This is where Firebase comes to the rescue. Its ready-to-use and intuitive methods make setting up effective user identity management on a site happen in no time. This tutorial will work us through on how to do that: implementing user registration, verification, and authentication.
| View Tutorial on CSS-Tricks | by Taminoturoko Briggs | Publish Date: February 2, 2022 |
React Philosophy For Beginners
Important concepts every React developer should know and understand. This article is one of many others that seeks to explain the software design patterns and principles, concepts and basic features of React JavaScript library for a learner by a learner.
| View Tutorial on Bits and Pieces | by ThankGod Ukachukwu | Publish Date: March 5, 2020 |
7 JavaScript Tricks You Should Know
These tips became treasures when I found out about them
| View Tutorial on Bits and Pieces | by Adarsh Gupta | Publish Date: January 1, 2022 |
Asynchronous Programming in Javascript
Asynchronous programming in javascript is possible and more efficient when working with technologies like AJAX and Fetch API which is used to make HTTP requests to files, services, and browser/server APIs internally or externally, and there are a few key concepts when working with Async code in javascript we have callbacks, promises, and Async/Await.
| View Tutorial on Geek Culture | by Yasir Gaji | Publish Date: January 24, 2022 |
Building E-Commerce Website with Next.js, Stripe API, and Firebase.
Throughout my tutorial series, you will learn how to make an e-commerce application from scratch with Next.js SSR (Server-Side Rendering), Stripe API, and Firebase. Let’s start your project, code, test, and deploy.
| View Tutorial on Geek Culture | by Ryohei Arai | Publish Date: January 31, 2022 |
Deploy a React app for free using Vercel
Vercel is a serverless cloud platform that allows developers to host websites and online services that launch instantaneously, grow automatically, and require no monitoring, all with minimal/no configuration. Vercel is a perfect choice for deploying your React applications easily providing comprehensive tools to build high-performance websites and applications. Vercel provides you with free domains (which contains the vercel.app suffix) to deploy your code on the live server.
| View Tutorial on LogRocket | by Joel Olawanle | Publish Date: January 11, 2022 |
A Step-By-Step Process for Turning Designs Into Code
Turning website design files into a combination of HTML, CSS and JavaScript is the bread and butter of many front-end web development jobs, but there’s a part of this work that doesn’t neatly fit in to tutorials on any specific topic. In this post, we’ll take a look at how to go from design to code, and why you might want to follow a process like this instead of just diving into code head-first
| View Tutorial on CSS-Tricks | by Mark Noonan | Publish Date: July 21, 2021 |
Using Storybook to develop React components faster
Storybook is an “open-source platform that allows you to document, view, and test many permutations of your JavaScript components within an isolated environment. Before I start to create a component, I first create stories for it in Storybook, then I start integrating it into my React app. The great thing about this is that we haven’t touched our main application at all. I don’t have to muck around with production configuration, environment variables, or running local API services.
| View Tutorial on LogRocket | by Alec Brunelle | Publish Date: February 15, 2021 |
Let’s Explore The Best React Developer Tools
Designing websites and apps nowadays necessitate using the best-in-class, complex technologies. It entails the creation of fully engaging web pages that aid in the efficient management of web content and the organization’s long-term performance. In this aspect, the arrival of React development tools is a blessing. Among the most extensively utilized front-end development technologies are React development services. It is made up of many libraries that assist developers in creating highly efficient multi-platform apps.
| View Tutorial on JavaScript in Plain English | by A Smith | Publish Date: October 1, 2024 |
Why you should use a proxy server with Create React App
There are many cases in which developers need to consume APIs from the backend while using Create React App (CRA) to build an application. Because most client apps are hosted on different servers than the backend application, there are complications that arise as a result of requests being sent across both servers. CRA supports proxying to mitigate or entirely eliminate these issues. In this article, we will discuss what a proxy server is, why you should use a proxy server in development, and uses cases for proxying requests in a React application. Then, we will implement a real life example of setting up a proxy server in React.
| View Tutorial on LogRocket | by Joel Adewole | Publish Date: March 22, 2022 |
How to Use Tailwind CSS to Rapidly Develop Snazzy Websites
Tailwind CSS is a utility-first CSS (Cascading Style Sheets) framework with predefined classes that you can use to build and design web pages directly in your markup. It lets you write CSS in your HTML in the form of predefined classes. In this article, we’ll learn about Tailwind CSS — a CSS framework that aids in building and designing web pages. We’ll start by explaining how to install and integrate Tailwind CSS in your project, see some practical applications, and also how you can create your custom styles and plugins.
| View Tutorial on Kinsta | by Ihechikara Abba, | Publish Date: March 18, 2022 |
Build a CRUD application in React with Firebase Web SDK v9
The Firebase v.9 SDK introduces a new API surface that follows a modular approach, resulting in a change to the use of its services, one of which is Firestore database. Now we are left with the challenge of relearning how to perform operations like CRUD in the database.In this tutorial, we’ll cover how to carry out CRUD operations in Firestore by building a task manager. In this tutorial, we’ll cover how to carry out CRUD operations in Firestore by building a task manager.
| View Tutorial on LogRocket | by Taminoturoko Briggs | Publish Date: October 1, 2024 |
AWS Amplify Studio - Designer and Developer Collaboration Just Got Easier
The AWS Amplify team recently launched AWS Amplify Studio, a new visual development environment that lets front-end developers build full-stack apps with minimal coding while integrating Amplify’s powerful backend configuration and management capabilities. Amplify Studio helps automate the design implementation process, helping designers and developers to work better together, and ensuring that designs are implemented into the final product. Let’s dive in and check out the new capabilities.
| View Tutorial on CSS Tricks | by CSS Tricks | Publish Date: October 1, 2024 |
Modern API data-fetching methods in React
Understanding how to fetch data into React applications is mandatory for every React developer who aims to build modern, real-world web applications. In this guide, we will cover the modern React data-fetching methods and learn how to handle our application’s state while fetching data. Furthermore, we will cover how to handle the application’s state when something goes wrong with the data.
| View Tutorial on LogRocket | by Ibadehin Mojeed | Publish Date: October 1, 2024 |
Building a Trello Clone with React DnD
Building applications with drag-and-drop functionality can be overly complicated using traditional JavaScript. React DnD is a set of utilities that simplifies transferring data between different parts of your application, allowing you to easily create high-performance interfaces with drag-and-drop functionality. React DnD is a perfect fit for apps like Trello, ProofHub, and ClickUp, which provide a UI for organizing your projects into different boards with drag and drop. In this tutorial, we’ll explore React DnD by building our own Trello clone.
| View Tutorial on LogRocket | by Ekekenta Odionyenfe | Publish Date: October 1, 2024 |
How to Use JavaScript Arrays Like a Pro
In this article, we are going to see the modern ways of using arrays and doing operations with arrays. These methdos are far more convenient and will help you in writing code with less lines.
| View Tutorial on JavaScript In Plain English | by Kanchana Ranmuthu | Publish Date: October 1, 2024 |
A Complete Beginner’s Guide to npm
We’ll start by talking about the current lay of the land; what npm is, a bit about where it came from, and how we got here. From there, we’ll cover what Node itself is, followed by what package managers are in general, before actually working with npm. We’ll finish by installing Node and npm (if they’re not already), initializing a project to get an idea of how it works, and finally, installing a real-life npm project from GitHub with all its packages and commands.
| View Tutorial on CSS Tricks | by Josh Collinsworth | Publish Date: October 1, 2024 |
React Server Components in Next.js 12
There have been continuous efforts to deliver a unanimous rendering solution for React apps. By December 2020, the React team had introduced the idea of React Server Components — abbreviated as “RSC” in this post — a feature for their upcoming version, React 18. RSC is an experimental, opt-in feature that aims to cut out the work we usually give to the client by rendering everything, including the components, on the server. This approach produces zero bundle-sized components, consequently improving the load time of your web pages.
| View Tutorial on LogRocket | by Chinwike Maduabuchi | Publish Date: October 1, 2024 |
A Complete Guide to Flexbox Avatar of Chris Coyier
| View Tutorial on CSS Tricks | by Chris Coyier | Publish Date: October 1, 2024 |
Useful React Hooks That You Can Use In Your Projects
Hooks are game-changers. They have simplified React, made it neater, easier to write and debug, and also reduced the learning curve. Hooks are simply functions that allow you to hook into or make use of React features.
| View Tutorial on Smashing Magazine | by Ifeanyi Dike | Publish Date: October 1, 2024 |
Creating a navbar in React
In this tutorial, we’ll go over the basics of building navbars in React. We’ll build a navbar that’s fixed to the top of the page, and the user will be able to switch between webpages like you can on a dashboard, for instance. We’ll then put all our newfound skills into practice by building a live sample app.
| View Tutorial on LogRocket | by David Atanda | Publish Date: October 1, 2024 |
Meet Hydrogen: A React Framework For Dynamic & Personalized E-Commerce
Meet Hydrogen: A React-based framework for building custom and creative storefronts gives you everything you need to start fast, build fast, and deliver the best personalized and dynamic customer experiences powered by Shopify’s platform and APIs.
| View Tutorial on Smashing Magazine | by Ilya Grigorik | Publish Date: October 1, 2024 |
Building a Next.js shopping cart app
To learn how to build a Next.js application, this tutorial details how to build a shopping cart web app for a fictional game store with the ability to add or remove items from the cart, view all products, view products by category, and more
| View Tutorial on LogRocket | by Nitin Ranganath | Publish Date: October 1, 2024 |
Data Structures You Should Know as a JavaScript Developer
Understanding Data Structures is helpful in all aspects of programming. A data structure is not just the way you structure your data, but also the logic associated with it. The way you insert data, what happens to it inside of it, and even the way you take data out of your structure. That, is where the real magic of data structures resides and the whole point for their existence. Otherwise, we would all be using Arrays for everything.
| View Tutorial on Bits and Pieces | by Fernando Doglio | Publish Date: October 1, 2024 |
Serverless deployments via Vercel using Node.js
Serverless functions are pieces of server-side code run on cloud servers without the need of an actual backend as a part of the serverless computing architecture. Serverless functions (also known as cloud functions or functions-as-a-service (FaaS)) can be used to send emails, perform database queries, handle user authentication, manage form submissions, and more.
| View Tutorial on LogRocket | by Adebiyi Adedotun | Publish Date: October 1, 2024 |
How To Protect Your API Key In Production With Next.js API Route
Front-end developers have to interact with private or public APIs whose method of authorization requires a secret key/API key that enables developers to use these APIs. The key(s) are important, hence the need to store/protect the key(s) arises. The environment variable does not protect the key(s) from anyone that knows their way around the dev-tools of their browser. That’s why we need to use our keys at server-side when we’re writing our API calls.
| View Tutorial on Smashing Magazine | by Caleb Olojo | Publish Date: October 1, 2024 |
The best styling options for Next.js
Created by Vercel, Next.js is a JavaScript framework based on React. With its ability to offer static and server rendering, its popularity quickly shot up amongst developers. What’s less known is that Next.js offers many ways to support CSS in your application. Whether you prefer utility CSS with its classes or prefer CSS-in-JS, Next.js has you covered. In this tutorial, you will discover a few ways to implement styling in your Next.js application.
| View Tutorial on LogRocket | by Marie Starck | Publish Date: October 1, 2024 |