WebDevPro #10: Building with ChatGPT, ToolJet, and PostgreSQL, GitHub React repositories and Optimizing SQL Queries
Hi,
Welcome to the _webdevpro! Today's edition covers web development community discussions on Building with ChatGPT, ToolJet, and PostgreSQL, the Art of Code Review, Top GitHub React repositories and Optimizing SQL Queries . We bring you the latest in Web Dev, with releases from Bootstrap, Laravel, Microsoft and Vue.js to help you keep up to date!
Working on understanding state in React? Our React with TypeScript tutorial can help! Don't miss our repository of curated tools to help you boost your web development.
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
Building an email marketing app with ChatGPT, ToolJet, and PostgreSQL - In this tutorial, you'll learn how to build an email marketing application using ToolJet, ChatGPT, and PostgreSQL. The application allows you to add subscribers to your mailing list, group them into categories, and send them newsletters using Brevo. We'll also use ChatGPT for generating email content. All these features are very easy to integrate with the help of ToolJet. Learn more.
The Art of Code Review - As a developer, one of the most important skills is being able to write code that is clean, maintainable, and error-free. However, no matter how skilled you are, it's always possible that you may overlook certain bugs or issues in your code. This is where the code review process comes in. In this article, we'll take a closer look at the code review process and how it can help you create better software. Learn more.
Top GitHub repositories to learn modern React development - Open source is great for many things. One of them is learning new skills. In this article, we'll look at some of the best Open Source React projects on GitHub that you can use to quickly boost your hands-on React learning and coding experience. If you are looking to boost your React development skills, check out this blogpost.
Secret to Optimizing SQL Queries - Understand the SQL Execution Order - In this article, we will learn how SQL queries are executed by the database engine and how we can use this knowledge to optimize our queries for better performance and accuracy. We will also learn about some common techniques and best practices for writing efficient and SARGABLE queries. Explore the tutorial here.
Say Goodbye to Spread Operator: Use Default Composer - When working with objects in JavaScript, it is common to need to set default values for empty strings/objects/arrays, null, or undefined properties. When dealing with nested objects, this can become even more complicated and require complex programming logic. However, with the "default-composer" library, this task becomes simple and easy. This tutorial will guide you on how to use default composer.
How to Detect Unnecessary Renderings of DOM Elements in Your Web App - Unnecessary repaints in a web app can have a critical impact on performance. While you may be developing it on a high-end device, you may not even notice. But a user running it on a lower end device performance may be compromised. One question remains: How to be aware of unnecessary repaints? This blog post answers that very question.
21 Mind-Blowing Web Features You Probably Haven't Heard Of - If you're a web developer, buckle up because the web platform has landed some game-changing new features that will alter the way we build websites forever. Let's dive into these incredible new additions! Explore now.
Web Development Motivation
"The Web is more a social creation than a technical one. I designed it for a social effect—to help people work together—and not as a technical toy."
- Tim Berners-Lee, founder, World Wide Web.
Food for Thought...
In this quote, Tim Berners-Lee emphasizes that the web is not solely a technical marvel but a powerful social creation with a purposeful intent. Rather than being a mere gadget or plaything, Berners-Lee conceived the web as a platform to foster meaningful social interactions and enable effective collaboration among individuals. The true value of the web lies in its ability to bring people together, facilitating cooperation, and enabling the collective sharing of knowledge and resources.
WebDev Resources
Here are some User Interface components to boost for Web development. You can use these drop-in UI components for web sites and applications in your next project.
Buttons: The term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.
Code: Code viewers and editors designed for embedding inside a website.
Forms: A HTML form on a web page allows a user to enter data that is sent to a server for processing. Web users fill out the forms using checkboxes, radio buttons, or text fields.
Galeries & Image Sliders: A sophisticated way to present a collection of images on your website.
Grid: CSS Grid Layout Systems.
Rich Text Editors: A rich text editor is the interface for editing rich text within web browsers. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
Table Of Contents: Components for automatic table of contents generation.
UI Kits: Collections of ready to use components.
Video & Audio: Components for playing audio and video files on a website.
React Web Development Tutorial
Understanding TypeScript
TypeScript was first released in 2012 and is still being developed, with new releases happening every few months. But what is TypeScript, and what are its benefits?
TypeScript is often referred to as a superset or extension of JavaScript because any feature in JavaScript is available in TypeScript. Unlike JavaScript, TypeScript can’t be executed directly in a browser – it must be transpiled into JavaScript first.
Note
It is worth being aware that a proposal is being considered that would allow TypeScript to be executed directly in a browser without transpilation. See the following link for more information: https://github.com/tc39/proposal-type-annotations.
TypeScript adds a rich type system to JavaScript. It is generally used with frontend frameworks such as Angular, Vue, and React. TypeScript can also be used to build a backend with Node.js. This demonstrates how flexible TypeScript’s type system is.
When a JavaScript codebase grows, it can become hard to read and maintain. TypeScript’s type system solves this problem. TypeScript uses the type system to allow code editors to catch type errors as developers write problematic code. Code editors also use the type system to provide productivity features such as robust code navigation and code refactoring.
Next, we will step through an example of how TypeScript catches an error that JavaScript can’t.
Catching type errors early
The type information helps the TypeScript compiler catch type errors. In code editors such as Visual Studio Code, a type error is underlined in red immediately after the developer has made a type mistake. Carry out the following steps to experience an example of TypeScript catching a type error:
Open Visual Studio Code in a folder of your choice.
Create a new file called
calculateTotalPrice.jsby choosing the New File option in the EXPLORER panel.
Creating a new file in Visual Studio Code
Enter the following code into the file:
function calculateTotalPriceJS(product, quantity, discount) {
const priceWithoutDiscount = product.price * quantity;
const discountAmount = priceWithoutDiscount * discount;
return priceWithoutDiscount - discountAmount;
}Remember that the code snippets are available online to copy. The link to the previous snippet can be found at https://github.com/PacktPublishing/Learn-React-with-TypeScript-2nd-Edition/blob/main/Chapter2/Section1-Understanding-TypeScript/calculateTotalPrice.js.
There is a bug in the code that might be difficult to spot, and the error won’t be highlighted by Visual Studio Code...read more.
What's Happening in Web Dev?
Django
Django bugfix release: 4.2.2 - The 4.2.2 bugfix is released. The release package and checksums are available from our downloads page, as well as from the Python Package Index. The PGP key ID used for this release is Natalia Bidart: 2EE82A8D9470983E.
Ruby on Rails
HTML5 sanitizer, path_params and more – Want to know about the changes in Ruby this week? You can view the whole list of changes here. Checkout this blog post to know more.
Spring
Spring Security Kerberos 2.0.0 available now - I'm happy to announce that a Spring Security Kerberos 2.0.0 is now available from maven central.
Web.dev
New CSS color spaces and functions in all major engines - All major engines now support the new CSS color spaces and functions. Find out how they can bring vibrancy to your designs. CSS now supports color spaces that allow us to access colors outside of the sRGB gamut. This means that you can support HD (high definition) displays, using colors from HD gamuts. This support comes with new functions to make better use of color on the web.