WebDevPro #2: Microsoft's Kiota AI Code Builder, PostgreSQL® JSONB Cheat sheet and VSCode Tailwind extensions.

Hi << Test First Name >>,

Welcome to the _webdevpro - your gateway to all the latest stories in web development! In this edition, we highlight web dev community discussions on a Complete Roadmap to Become a Pro in MERN STACK, PostgreSQL® JSONB Cheatsheet, and VSCode Extensions for Developing with Tailwind and news on Django, Node.js and Spring releases along with Microsoft Kiota code generator for REST HTTP APIs described by OpenAPI.

Our infographic brings back the heated MEAN vs. MERN stack debate and resources get you started with API debugging and code playgrounds for Web development. Developing with React and Typescript? Our React with TypeScript tutorial will guide you all 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

• 4 VSCode Extensions for Developing with Tailwind - TailwindCSS is a framework like no other. Rather than constraining you to a set design, it gives you the tools and the standardization to build exactly what you want. Here are four VSCode extensions that might come in handy. All these extensions are available in this VSCode extension pack TailwindCSS Kit.
   

• Boost Your JavaScript with JSDoc Typing - There are many reasons why you can't or don't want to use TypeScript in your project. One common reason is that you are using a legacy codebase that is not compatible with TypeScript. Or the switch to TypeScript is harder than everyone tells you. For whatever reason, you are stuck with JavaScript. But that doesnt completely mean you must give up on the benefits of TypeScript. In this article, we will explore the magic of JSDoc typing, with which you can use most TypeScript features right away. Learn how!
   

• PostgreSQL® JSONB Cheatsheet: Complete & Fast Lookup Guide - How do I extract a JSON item? What about tabulating the content? Can I build a set of rows from an array? Dealing with JSON datasets in PostgreSQL® is becoming more and more common, and we can see the mix PostgreSQL + JSON appearing frequently in StackOverflow. Knowing all the PostgreSQL JSON functions and operators by heart might make you famous at a PostgreSQL trivia night, but is not an essential skill to have. PostgreSQL® JSONB Cheatsheet, a complete and fast lookup guide to all the PostgreSQL JSONB functions and operators. Read it now!
   

• How to Make Your HTML Responsive Using Display Grid - Making your HTML responsive using display grid is easy with these steps: Defining the grid container, setting the grid template columns and rows, placing grid items and using media queries. Click to read the step-by-step tutorial now.
   

• Angular: The Framework of Past, Present, and Future - In this blog, you will read about Angular’s journey from its release in 2010 to its current state. It summarizes all the fantastic things Angular is going to bring to you as a developer. Read about the evolution of Angular here.
   

• Complete Roadmap to Become a Pro in MERN STACK - Are you looking to become a master of web development and create robust, scalable, and feature-rich web applications? Look no further than the MERN stack! The MERN stack is a powerful combination of MongoDB, Express, React, and Node.js that can take your web development skills to the next level. In this article, you will find a complete roadmap to guide you in your journey to becoming a pro in MERN stack. Explore the roadmap now.
   

• What is Prop Drilling in React? - Prop drilling is the process of passing down data or state through multiple layers of a component hierarchy. Prop drilling can be a necessary and effective way to manage application state, it can also become a problem when the hierarchy of components becomes too deep or complex. This can lead to several issues. Let's say, code duplication, increased cognitive load and decreased maintainability. This article discusses what are props, what prop drilling is and how it can impact your application. You will also explore some best practices for fixing prop drilling in your codebase. Learn more.

Web Development Motivation

"Web development is not just about writing code; it's about creating experiences that impact and inspire users."

- Unknown

Food for Thought...

Web development is not solely about writing lines of code, but rather about crafting immersive and engaging user experiences on the web. It emphasizes the importance of considering the end-users and creating web applications that leave a lasting impact, inspire, and resonate with the audience. It reminds web developers to prioritize the user experience as they design and develop websites and web applications, keeping in mind that the goal is to create meaningful interactions that captivate and delight users.
 

WebDev Resources

API debugging tools like ExtendsClass.com, RequestBin.com, and Beeceptor.com provide functionalities to inspect, test, and debug APIs, while code playgrounds like CodePen, CodeSandbox, Glitch, JSFiddle, and others offer web-based environments for developers to experiment with and test code snippets or programs in different languages. These tools streamline web development workflows, allowing developers to troubleshoot API issues, prototype code, and collaborate with others, ultimately leading to more efficient and effective web development processes. Here are some tools that you can use for your web development:

API Debugging

• ExtendsClass.com

• RequestBin.com

• Beeceptor.com

Code Playgrounds

• CodePen

• CodeSandbox

• Glitch

• JSFiddle

• JS BIN

• Dabblet

• CSSDeck

• Plunker

• Liveweave

• StackBlitz

• FastSitePHP

• DataFormsJS

• AnyChart Playground

Stack Picks for 2023

Source: Xongo Labs

React Web Development Tutorial

Understanding the React entry point

The entry point of this React app is in the index.js file. Open this file by clicking on it in the Files panel and inspect its contents:

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

There is quite a lot going on in this code. Here’s an explanation of each line of the code (don’t worry if you don’t fully understand it all at this point in the book, you will soon!):

• The first statement imports a StrictMode component from React. This means that the StrictMode component from the react library will be used later in the code in this file. We will cover import statements in detail in the next section.

• The second statement imports a createRoot function from React.

• The third import statement imports an App component from the App.js file in our project.

• A rootElement variable is then assigned to a DOM element with an id of "root".

• React’s createRoot function takes in a DOM element and returns a variable that can be used to display a React component tree. The rootElement variable is then passed into createRoot, and the result is assigned to a root variable. ...read more.

Read the Book!

What's Happening in Web Dev?

Django

• Django bugfix release: 4.1.8 - 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 Mariusz Felisiak: 2EF56372BA48CD1B

Microsoft

• Data Encryption at rest with Customer Managed keys for Azure Cosmos DB for PostgreSQL - Data stored in your Azure Cosmos DB for PostgreSQL cluster is automatically and seamlessly encrypted with keys managed by Microsoft (service-managed keys). Optionally, you can now choose to add an additional layer of security by enabling encryption with customer-managed keys. Many organizations require full control of access to the data using a customer-managed key. Data encryption with customer-managed keys for Azure Cosmos DB for PostgreSQL enables you to bring your own key to protect data at rest. It also allows organizations to implement separation of duties in the management of keys and data.
   

• You can now use Microsoft Kiota within Visual Studio Code - Microsoft Kiota, code generator for REST HTTP APIs described by OpenAPI, is now available on Visual Studio Code as an extension. Kiota is a client generator for HTTP REST APIs described by OpenAPI. The experience is available as a command-line tool and as a Visual Studio Code extension. Kiota helps eliminate the need to take a dependency on a different API client for every API that you need to call, as well as limiting the generation to the exact API surface area you’re interested in, thanks to a filtering capability.

Node.js

• Node v18.16.0 (LTS) release -This new version helps developers: Add initial support for single executable applications and compile a JavaScript file into a single executable application. Node.js also gets a new URL parser called Ada that is compliant with the WHATWG URL Specification and provides more than 100% performance improvement to the existing implementation.

Spring

• Spring Framework 6.0.8, 5.3.27 and 5.2.24. release fix cve-2023-20863 - The Spring Framework 6.0.8, 5.3.27 and 5.2.24.RELEASE versions are available now. Spring Framework 6.0.8 ships with 60 fixes and documentation improvements, including 5 fixes for regressions. Spring Framework 5.3.27 ships with 20 fixes and documentation improvements, including 4 fixes for regressions. Spring Framework 5.2.24.RELEASE ships with 3 fixes.

See you next week!