WebDevPro #3: ChatGPT+React+Node.js notifications, VS Code extensions 2023, Page Visibility APIs
Hi << Test First Name >>,
Welcome to the _webdevpro - where you will find the latest in web development including Node.js, Laravel and Spring releases! In this edition, we talk about web dev community discussions on a how to Master Notifications With ChatGPT, React and NodeJS, Scale Your React Applications, and Awesome VS Code Extensions for 2023.
Web development testing is crucial to ensure websites and applications are functional, secure, and meet users' needs - we've out together a repository of testing tools to so just that.
Can't decide whether to pick React or Angular framework for your Web Dev? Check out our infographic on React vs Angular to weigh in! Want to learn how to build an alert component? Our React with TypeScript tutorial will lead the way!
We have listened to the _webdevpro readership and we think this is something you have been searching for. If you liked this installment in our new series, fill in our survey below and win a free Packt credit. We're committed to bringing our readers exactly what they want, so help us make the right choices.
Take the Survey and Win a Free Packt Credit!
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
Web Developer Community Insights
Master Notifications With ChatGPT, React and NodeJS - In this tutorial, you'll learn how to build a web application that allows you to send notifications generated by ChatGPT to your users, using React and NodeJS. it helps you understand how to communicate with it in a Node.js application, and how to send ChatGPT-generated notifications to users via Novu in a React and Node.js application. Learn more.
Awesome VS Code Extensions for 2023 - VS code is one of the best code editors and IDE. There are various features such as multiple themes, changing icons, an inbuilt terminal, and support for a large number of extensions. VS Code extension library is enormous and no other code editor can compete with it. Here is list of the awesome VS Code extensions for 2023. This extension can be of various backgrounds and can help you in improving the writing, theming, and accessibility of the VS Code. Read now.
JavaScript Destructuring - Have you ever heard of object or array destructuring? In the world of JavaScript, Object and Array Destructuring are powerful tools that can simplify complex code and make it more readable. By breaking down objects and arrays into smaller, more manageable pieces, developers can write cleaner and more efficient code. In this article, we will explore the fundamentals of Object and Array Destructuring and how they can be used to create more concise and effective code. Learn more.
The Page Visibility API: Improve User Experience and Performance – This blog has insights about lesser-known yet powerful APIs in the modern web ecosystem. Dive into the Page Visibility API - this invaluable tool helps developers optimize their web applications by detecting when users are actively viewing or interacting with a page. Explore them here.
8 Awesome VS Code Extensions for JavaScript Developers - Visual Studio Code (VS Code) is a popular, lightweight, and powerful source code editor developed by Microsoft. It has extensive support for JavaScript and TypeScript, making it the go-to choose for many developers. One of the most significant features of VS Code is its extensibility, allowing you to add custom extensions to enhance your development experience. In this tutorial, we will explore 8 awesome VS Code extensions for JavaScript developers. Check them out now.
How To Scale Your React Applications - Scaling a front-end application requires careful planning and close attention to detail. With the rise of single-page applications (SPAs) and the growing complexity of front-end architectures, developers face significant challenges when it comes to scaling their applications. In this article, you will explore best practices to help you scale your frontend applications (specifically those built with React) efficiently and maintain their performance and responsiveness as they grow. Click for the tutorial.
Exploring Google Zanzibar: A Demonstration of Its Basics - For those who haven't heard of it yet, Zanzibar is the authorization system used by Google to handle authorization for hundreds of its services and products, including YouTube, Drive, Calendar, Cloud, and Maps. With the ability to handle complex authorization policies at a global scale, Zanzibar processes billions of access control lists and queries per second. In this article, we will take a closer look at Zanzibar by implementing some of its fundamentals. Learn more.
Web Development Motivation
"The web is like a canvas, and your code is the paintbrush. Use it wisely and create something beautiful."
- Unknown
Food for Thought...
This quote is a powerful reminder that web development is not just about writing code, but about creating a work of art that can capture the imagination and engage users. It suggests that the web is like a blank canvas waiting to be filled with unique and meaningful experiences, and that developers are the artists who can turn their code into a masterpiece. Developers must approach web development as a creative endeavor, not just a technical one. By seeing the web as a canvas, developers can unlock their imagination and create truly unique and impactful digital experiences that can leave a lasting impression on users.
WebDev Resources
Web development testing is crucial to ensure websites and applications are functional, secure, and meet users' needs. Testing includes functional and non-functional aspects and can be automated with tools to catch errors and bugs in the code. Here are some tools to boost your web testing skills:
Server-side Testing
Benchmark Testing
JS
Network
Test Doubles (Fakes, Mocks, Stubs and Spies)
Fake Data
HTTP Mocking - Nock
Monkey Patching - Mockery, babel-plugin-rewire
Analysis
Code Coverage
Software Complexity
Node.js Security
Web Page
WebDev Framework Comparison 2023
Source: pixelcrayons
React Web Development Tutorial
Creating a basic alert component
Now, we are going to create a component that displays an alert, which we will simply call Alert. It will consist of an icon, a heading, and a message.
Important note
A React component name must start with a capital letter. If a component name starts with a lowercase letter, it is treated as a DOM element and won’t render properly. See the following link in the React documentation for more information: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized.
Carry out the following steps to create the component in the CodeSandbox project:
In the Files panel, right-click on the
srcfolder and choose Create File in the menu that appears.The cursor is placed in a new file, ready for you to enter the component filename. Enter
Alert.jsas the filename and press Enter.
Note
The filename for component files isn’t important to React or the React transpiler. It is common practice to use the same name as the component, either in Pascal or snake case. However, the file extension must be .js or .jsx for React transpilers to recognize these as React components.
The
Alert.jsfile automatically opens in the code editor panel. Enter the following code into this file:
function Alert() {
return (
<div>
<div>
<span role="img" aria-label="Warning">⚠</span>
<span>Oh no!</span>
</div>
<div>Something isn't quite right ...</div>
</div>
);
}Remember that the code snippets are available online to copy. The link to the preceding snippet can be found at https://github.com/PacktPublishing/Learn-React-with-TypeScript-2nd-Edition/blob/main/Chapter1/Section3-Creating-a-component/Alert.js.
The component renders the following items:
A warning icon (note that this is a warning emoji) ...read more.
What's Happening in Web Dev?
Django
Announcement of 5.x Technical Board Election Registration - The release of Django 4.2 represents the final feature release of a major release series of Django. Per DEP-0010 this release triggers the election for the Technical board for the Django 5.x release cycle. All individual DSF members are automatically registered electors.If you are not a DSF member and would like to apply to vote you need to register here.
Laravel
Laravel 10.8 Released - The Laravel PHP framework released version 10.8 this week, which introduces several new features and improvements, including a new Pint rule for formatting method chaining indentation and syntactic sugar added to the Process::pipe() method. Additionally, class-based "after" validation rules were added.
Node.js
Node.js 20 is now available! - The release of Node.js 20 is announced! Highlights include the new Node.js Permission Model,a synchronous import.meta.resolve, a stable test_runner, updates of the V8 JavaScript engine to 11.3, Ada to 2.0, and more! The project continues to make progress across a number of areas, with many new features and fixes flowing into existing LTS releases. For that reason, the changes outlined in the changelog for Node.js 20 only represent a small subset of the features and work since the last major release.
Spring
Spring for GraphQL 1.2.0-RC1 released - Spring for GraphQL 1.2 release candidate is now available via https://repo.spring.io/milestone. The current release candidate completes this by extending pagination support to our Querydsl and Query By Example DataFetcher implementations, both of which now expose a scrollable factory method. In addition, the auto-registration for both Querydsl and Query by Example repositories has been extended to work for queries that return a Connection type.
See you next week!