WebDevPro #9: PrivateGPT for Local Documents, Top 5 Tailwind Component Libraries, and What's New in ES2023?

Hi,

Welcome to the _webdevpro! Today's edition covers web development community discussions on PrivateGPT for local documents, Top 5 Tailwind Component Libraries and What's new in ES2023. 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

• Run "ChatGPT" Offline on Local Documents with PrivateGPT - PrivateGPT is a python script to interrogate local files using GPT4ALL, an open-source large language model. It is pretty straight forward with basics steps including cloning the repo and downloading the LLM. With this script you can and it gave me a synopsis and where in the document the information is from. Checkout the PrivateGPT python script now.
   

• Top 5 Tailwind Component Libraries - Why might you want to use a tailwind based component library instead of a something like MUI, Chakra UI, and Mantine? If you are using tailwind, it is best to use a tailwind-based component library where you can customize the components with tailwind directly. Explore the component libraries here.
   

• Introducing the Bose Framework for Bot Developers - Bot Detectors are always ready to defend websites from our Bots. Configuring Selenium with ChromeOptions to specify the driver path, profile, user agent, and window size is Cumbersome and a nightmare in windows. Debugging Bot Crashes via logs is hard. How do you solve these pain points without sacrificing speed and handy development? Bose is the first bot development framework that is specifically designed to provide the best developer experience for Bot developers. Learn about the Bose framework here.
   

• What's new in ES2023? - The ECMAScript 2023 specification has been recently finalised. It includes some new methods on the Array object that will help make our JavaScript programs more predictable and maintainable. Some of the features focus on finding array from the last, hashbang grammer, symbols as weakmap keys, and changing array by copy. Check out the new features coming in as part of ES2023.
   

• A Comprehensive Guide of React Unit Testing - So many unit testing tools have sprung up in recent years making unit testing in the React framework very easy. In addition, almost all programming has testing frameworks or tools built for them. The popular ones are JUnit, PHUnit, Jasmine, Mocha, etc. In this article, we will learn all about unit testing in the React.js framework. We will learn how to unit test our component down to hooks and Context. Read more.
   

• Building a message board with Next.js and AppWrite - In this article, we will look at how to build a simple message board web app with Next.js and AppWrite. By the end of this tutorial, you will have a working web app where users can authenticate, post their messages and read the messages of others. This is a good context for learning how to better use these tools and to build something useful along the way. Read the step-by-step guide here.

Web Development Motivation

"JavaScript is the world's most misunderstood programming language." 

- Douglas Crockford, Creator, Java

Food for Thought...

Jeffrey Zeldman reminds us that in web development, content is key. Good design should amplify the character and quality of the content, ensuring it takes center stage. By prioritizing content-driven design, we create meaningful and impactful web experiences that resonate with users. Let Zeldman's insight guide you in delivering valuable messages through your designs.

WebDev Resources

Web development tools are designed to make the development process more efficient, effective, and less time-consuming. Here is a list of Web Dev tools to supercharge your development:

Unicode Converter

• https://www.branah.com/unicode-converter

Url Decoder/Encoder

• https://meyerweb.com/eric/tools/dencoder/

Converter Toolbox

• https://conversiontools.io/conversion

Hash Text and File

• https://emn178.github.io/online-tools/

Web Developer Toolbox

• https://gchq.github.io/CyberChef/

• https://www.browserling.com/tools/

SSL/TLS Checker

• https://www.ssllabs.com/ssltest/

• https://www.jitbit.com/sslcheck/

• https://www.sslshopper.com/ssl-checker.html

Security Checker

https://securityheaders.com/

https://observatory.mozilla.org/

https://sitecheck.sucuri.net/

https://webscan.upguard.com/

• https://www.immuniweb.com/websec/

React Web Development Tutorial

Implementing a close button click handler in the alert

At the moment, our alert component contains a close button, but nothing happens when it is clicked. The alert also contains a visible state that dictates whether the alert is shown. So, to finish the close button implementation, we need to add an event handler when it is clicked that sets the visible state to false. Carry out the following steps to do this:

1. Open Alert.js and register a click handler on the close button as follows:

<button aria-label="Close" onClick={handleCloseClick}>

We have registered a click handler called handleCloseClick on the close button.

1. We then need to implement the handleCloseClick function in the component. Create an empty function to start with, just above the return statement:

export function Alert(...) {
  const [visible, setVisible] = useState(true);
  if (!visible) {
    return null;
  }
  function handleCloseClick() {}
  return (
    ...
  );
}

This may seem a little strange because we have put the handleCloseClick function inside another function, Alert. The handler needs to be inside the Alert function; otherwise, the alert component won’t have access to it.

Arrow function syntax can be used for event handlers if preferred. An arrow function version of the handler is as follows:

export function Alert(...) {
  const [visible, setVisible] = useState(true);
  if (!visible) {
    return null;
  }
  const handleCloseClick = () => {}
  return (
    ...
  );
}

Event handlers can also be added directly to the element in JSX as follows:

<button aria-label="Close" onClick={() => {}}>

In the alert component, we will stick to the named handleCloseClick event handler function. ...read more.

Read the Book!

What's Happening in Web Dev?

Bootstrap

• Bootstrap 5.3.0 - It’s official, the final stable release of v5.3.0 has landed! It’s been a monumental effort to revamp the codebase for CSS variables and color modes, one that will see continued changes leading up to an eventual Bootstrap 6.

Lavarel

• Laravel 10.13 Released - This week, the Laravel team released v10.13 with database escaping functionality in Grammar, Sleep test hooks, response preparation events, and more.

Microsoft

• Java on Visual Studio Code – May 2023 - For the month of May we have tons of new features covering performance improvement, user experience as well as Spring Boot integration. This blog will help you get started.

Vue.js

• Announcing Vue 3.3 - The release of Vue 3.3 "Rurouni Kenshin" was announced. This release is focused on developer experience improvements - in particular, SFC <script setup> usage with TypeScript. Together with the 1.6 release of Vue Language Tools (previously known as Volar), resolves many long-standing pain points when using Vue with TypeScript.

See you next week!