WebDevPro #7: 50 Chat GPT Prompts, LMQL, TypeScript Tricks and React Apps with refine.new
Hi,
Welcome to the _webdevpro! In today's edition we have curated web dev community discussions on 50 Chat GPT Prompts, LMQL, TypeScript Tricks and React Apps with refine.new. These are the most talked about topics in the Web Developer forums to help your 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
50 Chat GPT Prompts Every Software Developer Should Know - In this article, you will explore some awesome ChatGPT-4 prompts specifically tailored for software developers. These prompts can assist with tasks such as code generation, code completion, bug detection, code review, API documentation generation, and more. Check out the ChatGPT-4 prompts here.
LMQL - LMQL is a query language for large language models (LLMs). It facilitates LLM interaction by combining the benefits of natural language prompting with the expressiveness of Python. With only a few lines of LMQL code, users can express advanced, multi-part and tool-augmented LM queries, which then are optimized by the LMQL runtime to run efficiently as part of the LM decoding loop. Explore the GitHub repository for more.
7 Secret TypeScript Tricks Pros Use - TypeScript is an outstanding tool to make our lives easier & avoiding bugs, yet sometimes feels overwhelming to use. This article outlines 7 TypeScript tricks that will make your life easier which all pros use including Type Inference, Literal types, Type guards and more!
Use Notion as a database for your Next.JS Blog - Notion is an extremely powerful tool to manage your content by creating a database you can even add properties to pages: publication date, tags, etc. In this post, you will learn how to fetch pages from the Notion API and render their content to create a wonderful Next.JS Blog entirely managed with Notion. Learn how to use Notion with Next.JS here.
Build an event ticketing system with Next.js and Firebase - In this tutorial, I'll walk you through how I built an event ticketing system with Next.js and Firebase. Upon completion, you'll be able to create advanced web applications using Firebase's amazing features, like real-time database, authentication, and file storage. Learn what Firebase is, how to add Firebase to a Next.js app, and work with Firebase Auth, Storage, and Database here.
The Fastest Way to Create React Apps with refine.new - This article helps you discover how Discover how refine.new and the refine framework are transforming the way developers create front-end applications in the React. Refine is an open-source React-based framework designed to simplify and accelerate the development of web applications with SSR support with Next.js or Remix. It is specifically tailored for data-intensive applications like admin panels, dashboards, and internal tools, but can also power customer-facing applications like storefronts and any type of CRUD apps. Explore refine now.
Web Development Motivation
"Web development is not just about creating pretty websites; it's about crafting an immersive digital experience that connects people, empowers businesses, and shapes the future of our online world."
- Tim Berners-Lee, Inventor of the World Wide Web
Food for Thought...
Tim Berners-Lee, widely recognized as the inventor of the World Wide Web, emphasizes the profound impact of web development beyond mere aesthetics. His quote highlights the transformative nature of web development, emphasizing its ability to facilitate meaningful connections, drive business growth, and contribute to the ever-evolving landscape of the internet. As a visionary in the field, Berners-Lee underscores the importance of creating immersive digital experiences that enhance user engagement and ultimately shape the future of our online interactions.
WebDev Resources
Web development tools are software applications or programs that help web developers in analyzing and tracking, performance optimizing and monitoring their web applications. These 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:
Analytics & Tracking
https://www.crazyegg.com/
https://www.luckyorange.com/
https://matomo.org/
https://www.hotjar.com/
https://heap.io/
https://www.inspectlet.com/
https://mouseflow.com/
https://www.smartlook.com/
https://www.fullstory.com/
https://logrocket.com/
https://mixpanel.com/
https://heatmap.com/
https://www.ptengine.com/
https://segment.com/
https://clicky.com/
https://www.openwebanalytics.com
https://www.intercom.com/
https://www.optimizely.com/
Speed Checker and Performance Optimization
https://gtmetrix.com/
https://www.pingdom.com/
Webiste Monitoring / Uptime Checker
https://uptimerobot.com/
https://hetrixtools.com/
https://www.freshworks.com/
https://www.uptimedoctor.com/
React Web Development Tutorial
Adding a close button to Alert
We will add a close button to the alert component to allow the user to close it. We will make this configurable so that the alert consumer can choose whether the close button is rendered.
Carry out the following steps:
Start by opening Alert.js and add a closable prop:
export function Alert({
type = "information",
heading,
children,
closable
}) {
...
}The consumer of the alert component will use the closable prop to specify whether the close button appears.
Add a close button between the heading and content as follows:
export function Alert(...) {
...
return (
<div>
<div>
...
<span>{heading}</span>
</div>
<button aria-label="Close">
<span role="img" aria-label="Close">❌</span>
</button>
<div>{children}</div>
</div>
);
}Notice that the span element that contains the close icon is ...read more.
What's Happening in Web Dev?
jQuery
jQuery 3.7.0 is now available! - This release has it all: bug fixes, a new method, and a performance improvement! jQuery no longer depends on Sizzle as a separate project, but has instead dropped its code directly into jQuery core. This helps prepare for the major changes coming to selection in future jQuery versions.
Lavarel
Laravel 10.11 Released - Laravel 10.11has released this week with the ability to retrieve a timestamp Carbon instance from a UUID, making the Sleep class macroable, and a new Precognition-Success header for verifying a successful Precognition response, and more.
Spring
Spring Batch 5.0.2 available now! - Spring Batch 5.0.2 is now available from Maven Central. This release resolves 25 issues, including bug fixes, enhancements, documentation updates and dependency updates. For more details about the changes, please refer to the change log.
Spring Authorization Server 1.1.0 available now - The release of Spring Authorization Server 1.1.0. To get started using Spring Authorization Server, see the Getting Started chapter of the reference documentation and the samples to become familiar with setup and configuration.
See you next week!