WebDevPro #1: ChatGPT Web Dev resources, MERN Stack Projects, AI-powered Image Bots.

Apr 06, 2023

Hi,

Welcome to the first edition of _webdevpro - your one stop shop for all things web development! In this edition, we cover curated web dev community blogs on MERN stack projects, building generative image bots, and trending Node,js libraries while reporting on news from Bootstrap, WebAssembly and Microsoft.

Our infographic covers top trends in web development for 2023 and resources get you started with tools to build on web using ChatGPT. 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. We're committed to bringing our readers exactly what they want, so help us make the right choices.

Take the Survey!

Thanks,
Apurva Kadam
Editor-in-Chief, Packt

Web Developer Community Insights

What You Need to Know About Pure Functions & Impure Functions in JavaScript - Functions are essential building blocks for creating complex and interactive apps in JavaScript. One of the most common uses of functions is mapping, where they take input values and produce corresponding output values. This allows for the transformation and manipulation of data, which is critical in creating dynamic user experiences. With this article, you will explore what pure/impure functions are and their differences in JavaScript. Explore now!
Top 5 MERN STACK Projects to Improve Your Practical Understanding - Want to improve your practical understanding of MERN stack development? Are you familiar with the entire procedure for creating applications utilizing frameworks? What projects can you complete to prove your proficiency as a MERN-stack developer? This article answers all these questions using a few interesting beginners projects to learn MERN STACK web development along with some details for getting started.
7 Tricks to Take the Performance of Your Website to the Moon - Are users complaining about your slow website? This article shares tricks to boost the performance of your website by fetching only relevant resources, minifying your code, pre-fetching resources, using responsive images, lazy loading, tree-shaking your code, and using page speed insights. Read about the tricks here.
Community-favorites from the New React Documentation Updates - The React legacy docs didn’t favour new developers who had to learn React twice - once with class components and then once again with Hooks. The new docs teach modern React and have a much better structure with more interactive examples, opinions and a better colour scheme Since there are a lot of changes, here is an outline of community favourites.
Building a Generative Image Bot with OpenAI, Telegram, FastAPI and Deta Space - You may have seen some of the amazing images generated by new AI services, like Midjourney and Open AI's DALL·E 2. Want to get in on the action? In this step-by-step guide, we'll build a personal Telegram bot that will let you use DALL·E 2 from your device. Try it now!
Folder Structure for Modern Web Applications - It is critical to create a maintainable folder structure while developing web apps, having the right files in the correct folder helps organize your code and makes other developers have an idea of how the architecture of your web application is or will be during development. This post explains how to organise with folder names when building your modern web project. Know more.
10 Trending Node.js Libraries and Frameworks to Boost Your Web Development - Are you looking to enhance your Node.js development experience? Look no further, here is a list of the top 10 trending Node.js libraries and frameworks that can help you improve your web development projects. Whether you are a beginner or an experienced developer, these tools can help you streamline your development process and improve the performance of your applications. Check them out!

Web Development Motivation

"The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past."

- Tim Berners-Lee, Inventor of the World Wide Web

Food for Thought...

The web has come a long way since its inception, and it has transformed the way we communicate, access information, and conduct business. With the advancements in technology, the web is constantly evolving, and there are countless opportunities for growth and innovation. The emergence of new technologies such as artificial intelligence, blockchain, and the Internet of Things (IoT) present new opportunities for web development. It is an exciting time to be a web developer, as the future of the web is full of opportunities to create new and exciting applications that can change the world.

WebDev ChatGPT Resources

ChatGPT is an AI language model that can aid web developers in a variety of ways. Its ability to answer questions related to web development topics, such as syntax, concepts, and best practices, can help developers save time and improve productivity. ChatGPT can assist with brainstorming ideas for design, functionality, and user experience. When developers encounter problems, ChatGPT can suggest solutions and workarounds to help resolve them. ChatGPT can provide useful resources such as tutorials, documentation, and libraries to assist developers in their work. Overall, ChatGPT is a helpful tool for web developers looking to improve their efficiency and productivity in building web applications. Here are some ChatGPT resources to boost your Web Development:

API Tools

Chrome Extensions

Web Development Trends 2023

Source: TriStateTechnology

React Web Development Tutorial

Understanding JSX

JSX is the syntax we use in a React component to define what the component should display. JSX stands for JavaScript XML, which starts to give us a clue as to what it is. We will start to learn about JSX in this section and write some JSX in an online playground.

The following code snippet is a React component with its JSX highlighted:

function App() {
  return (
    <div className="App">
      <Alert type="information" heading="Success">
        Everything is really good!
      </Alert>
    </div>
  );
}

You can see that JSX looks a bit like HTML. However, it isn’t HTML because an HTML div element doesn’t contain a className attribute, and there is no such element name as Alert. The JSX is also embedded directly within a JavaScript function, which is a little strange because a script element is normally used to place JavaScript inside HTML.

JSX is a JavaScript syntax extension. This means that it doesn’t execute directly in the browser – it needs to be transpiled to JavaScript first. A popular tool that can transpile JSX is called Babel.

Carry out the following steps to write your first piece of JSX in the Babel playground:

Open a browser, go to https://babeljs.io/repl, and enter the following JSX in the left-hand pane:

<span>Oh no!</span>

The following appears in the right-hand pane, which is what our JSX has compiled down to:

React.createElement("span", null, "Oh no!");

We can see that it compiles down to a React.createElement function call ...read more.

Read the Book!

What's Happening in Web Dev?

Bootstrap

Bootstrap 5.3.0-alpha3 - A third (and unexpected) alpha for v5.3.0 today with some fixes for some Node Sass compilation errors is released. In addition, we’ve added a handful of other updates. The company on target to ship our stable release soon!

Microsoft

Python in Visual Studio Code – April 2023 Release - The April 2023 release of the Python and Jupyter extensions for Visual Studio Code are now available! This release includes the following announcements: Data Wrangler available for Visual Studio Code Insiders, Move symbol refactoring, Create Environment button embedded in dependency files, Environments API for extension authors, and Kernel Picker Improvements for Python Environments. If you’re interested, you can check the full list of improvements in changelogs for the Python, Jupyter and Pylance extensions.
Java on Visual Studio Code Update – March 2023 - This blog brings you fundamental improvements such as smarter code completion for AWT packages, more smooth experience for running Java programs as well as better Spring Boot integration with Azure Spring Apps.
ASP.NET Core Route Tooling Enhancements in .NET 8 - ASP.NET Core is built on routing. Minimal APIs, Web APIs, Razor Pages, and Blazor all use routes to customize how HTTP requests map to your code..NET 8 now has a suite of new features to make routing easier to learn and use. These include Route syntax highlighting, Autocomplete of parameter and route names, Autocomplete of route constraints, Route analyzers and fixers, and Support for Minimal APIs, Web APIs, and Blazor. Grouped all together, these new features are called route tooling.

WebAssembly

New Functionality for Developer Brought to You by WebAssembly - WebAssembly enables developers to bring new performant functionality to the web from other languages. Over the past few years developers have really taken advantage of the possibilities. This post showcases just a few of the shiny new tools that you can benefit from, thanks in part to WebAssembly.

See you next week!