Advertise with Us|Sign Up to the Newsletter

WebDevPro #76: React Projects, Git Command-Line Tips, HTML and CSS Tricks, Build Your First SaaS, payload, Android Virtualization Framework.

Hi ,

Welcome to the web app development world with the 76th edition of _webdevpro!

In this edition we cover web development community discussions on:

Don't miss our repository of manually curated collection of Tailwind CSS resources for web developers.

In our relatively new section captures internet jibber-jabber about the mobile ecosystem:

Today's news covers Laravel, Ruby on Rails, Spring and Svelte.

P.S.: If you have any suggestions or feedback, or would like us to feature your project on a particular subject, please write to us. Just respond to this email!

If you liked this installment, fill in our survey below and win a free Packt PDF.

Thanks,
Apurva Kadam
Editor-in-Chief, Packt

Fellow Dev Discussions on the Internet.

17 Must-know React Projects for Developers - The react ecosystem is huge, thanks to the developer community. Thousands of packages, libraries and frameworks make it so powerful. This blog explores 17 cool React projects that will be very useful for developers. I've also covered three awesome UI component libraries. Let's jump in.

20 Git Command-Line Tricks Every Developer Should Know - Git is an essential version control tool for developers. Although GUI tools can simplify some tasks, mastering the Git command line offers deeper control, flexibility, and speed. Here are20 Git command-line tricksthat every developer should know to streamline their workflow.

10 React One-Liners Every UI Developer Should Know - React JS has become a go-to library for building user interfaces, and for good reason. It's flexible, efficient, and lets us create some pretty awesome stuff. But sometimes, we find ourselves writing more code than necessary. That's where these one-liners come in handy. They're like the Swiss Army knives of the React world – small, but oh so powerful! So, grab your favorite beverage, get comfy, and let's explore 10 React one-liners that'll have you coding smarter, not harder. Ready? Let's jump right in!

5 Essential HTML and CSS Tricks to Ditch JavaScript - Let’s talk about when not to use JavaScript and why HTML and CSS can often be the better tools for the job. I’ve found that by using HTML and CSS for many tasks, I can actually make my code simpler, more maintainable, and often more performant. So let’s dive into some real-world examples, all of which are available in thisGitHub repository, where you might have typically used JavaScript but can achieve better results with just HTML and CSS. These examples demonstrate how you can simplify your code while maintaining functionality and performance.

8 Tools You Need to Build Your First SaaS - Building your first SaaS can feel like a massive challenge. But with the right tools, you can make the process a whole lot easier and focus on the features that make your product unique. This blog shares 8 Tools that are widely used by the Developer Community. It will help you build your first SaaS faster. Let’s Start!

Check this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:

🧩Tailwind Kit- Framework-agnostic, Vue.js, React and Angular components.

🧩WickedBlocks - Collection of more than 120 layout blocks and components

🧩Daisy UI- UI Components for Tailwind CSS.

🧩Kometa UI Kit- Free multi-purpose UI kit, built with Tailwind CSS.

🧩Mamba UI- Free Tailwind CSS components, sections and templates.

🧩Litepie Date picker- A date range picker component for Vue.js and Tailwind CSS.

🧩Tailwind Datepicker - Adds a datepicker component

Building LLM Powered Applications

Building AI Applications with OpenAI APIs

Mastering NLP from Foundations to LLMs

Random curious musings and interesting words about Web Dev on the Internet.

"It's Your Turn": A Novel Channel Contention Mechanism for Improving Wi-Fi's Reliability - The next generation of Wi-Fi, i.e., the IEEE 802.11bn (aka Wi-Fi 8), is not only expected to increase its performance and provide extended capabilities but also aims to offer a reliable service. Given that one of the main sources of unreliability in IEEE 802.11 stems from the current distributed channel access, which is based on Listen-Before-Talk (LBT), the development of novel contention schemes gains importance for Wi-Fi 8 and beyond. In this paper, we propose a new channel contention mechanism, "It's Your Turn" (IYT), that extends the existing Distributed Coordination Function (DCF) and aims at improving the reliability of distributed LBT by providing ordered device transmissions thanks to neighboring activity awareness.

payload - Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.

RepresentationAlignment for Generation: Training Diffusion Transformers Is Easier - Generative models based on denoising, such as diffusion models and flow-based models, have been a scalable approach in generating high-dimensional visual data. Recent works have started exploring diffusion models as representation learners; the idea is that the hidden states of these models can capture meaningful, discriminative features. We identify that the main challenge in training diffusion models stems from the need to learn a high-quality internal representation. We show the performance of generative diffusion models can be improved dramatically when they are supported by an external high-quality representation from another model, such as a self-supervised visual encoder. Specifically, we introduce REPresentation Alignment (REPA), a simple regularization technique built on recent diffusion transformer architectures.

1 bug, $50,000+ in bounties, how Zendesk intentionally left a backdoor in Fortune 500 companies - Zendesk is a billion-dollar company providing a customer service tool used by some of the world’s top companies. Since Zendesk is just seen as a basic ticketing tool, companies often set it up without much thought Why is that dangerous? Many companies use their @company.com domain for Single Sign-On (SSO), which lets employees quickly log in to internal tools. By connecting Zendesk to the same domain, companies unknowingly create a potential security gap. A serious vulnerability in Zendesk allowed attackers to read customer support tickets from any company using Zendesk. All they had to do was sent a crafted email to a Support email handled by Zendesk.

Electronic Arts streamlines game patching with AWS - Electronic Arts (EA) engages players around the globe in immersive games across PC, console, and mobile. Known for popular game franchises including EA Sports FC, Madden NFL, Battlefield, and Apex Legends, EA regularly releases new game versions to mitigate issues, make improvements, and add new in-game content. Quickly deploying these patches to player devices is crucial for providing a positive player experience. This blog post discusses how EA has streamlined its game patching process for players using AWS services. By leveragingAmazon Elastic Kubernetes Service (Amazon EKS)andAmazon Elastic File System (Amazon EFS), EA delivers light and fast game patches, reducing patch installation times for their players.

Understanding the Android Virtualization Framework (AVF) - As the complexity of mobile applications and the sensitivity of the data they handle increase, so does the need for robust security solutions. Enter theAndroid Virtualization Framework (AVF), a groundbreaking innovation designed to enhance security, efficiency, and flexibility in Android devices. In this blog post, we’ll explore AVF and how its key components work together to create a more secure mobile ecosystem.

Implementing a page to create a new ticket

We’ll now create a page that is shown when theCreate New Ticketnavigation buttonis clicked.

Since, per our navigation component code, we wanted the ticket creation to be at/tickets/new, you now have to create theapp/tickets/new/page.jsfile.

Then, we want to show a form that allows us to set the title and a description for a new ticket – that’s sufficient at the moment, but you can extend the form to allow more input later (such asUrgency,Reference Link, or whatever comes to your mind with regards toticket management).

We also want frontend functionality, such asonSubmit, in the ticket creation form, so we’ll certainly need a client component ('use client';). This time, we will simply make the page itself theclient component.

To do this, go toapp/tickets/new/page.jsand add thefollowing code:

"use client";

import { useRef } from "react";

export default function CreateTicket() {

const ticketTitleRef = useRef(null);

const ticketDescriptionRef = useRef(null);

return (

<article>

<h3>Create a new ticket</h3>

<form

onSubmit={(event) => {

event.preventDefault();

alert("TODO: Add a new ticket");

}}

>

<input ref={ticketTitleRef} placeholder="Add a title" />

<textarea

ref={ticketDescriptionRef}

placeholder="Add a comment" />

<button type="submit">Create ticket now</button>

</form>

</article> ); }

Other than the fact that it’s a component to add a new ticket, there’s nothing in here you haven’t seen already. We will use the Pico.css Card (<article>) within a form, and then store references of the input fields so that we can easily accessthe value.

Your dose of the latest releases, news and happenings in the Web Development industry!

Laravel

Check Env Variables Across All .env Files - The LaravelEnv Keys Checker packagechecks if all keys are available across all environment (.env) files. This is useful if you have multiple.envfiles and want to ensure that all .envs have all the values expected.

Cancel a Specific Batch of Queued Jobs With This Laravel Package - The LaravelQueue Cancel Batch packageprovides a command to cancel a specific batch of queued jobs. If you run the command without any arguments, it will list current batches that have more than one pending job, are not finished, and have not been canceled. You can select multiple batches from this list, or if you know the UUIDs of the batches you want to cancel, you can pass those to the command.

Laravel performance monitoring in Honeybadger - You can now monitor the performance of your Laravel apps with Honeybadger. Laravel launched Honeybadger Insights, a newlogging and performance monitoring toolbundled with Honeybadger. Insights allows you to query your logs and events to diagnose performance issues, perform root-cause analyses, and create charts and dashboards to see what's happening in real time.

Ruby on Rails

Rails World talks are out!
Check out the recap of these talks in thisblog post, or head overto Rails’ YouTubefor the full playlist.

New Rails maintenance policy and end of maintenance announcements
These changes are designed to provide clarity on support timelines and help to plan Rails upgrades effectively. Full details of the new policy can be found on theRails website.

Rails Versions 6.1.7.9, 7.0.8.5, 7.1.4.1, and 7.2.1.1 have been released!
These are security patches addressing 4 possible ReDoS (Regular expression Denial of Service) attacks. All of these only affect Ruby versions below 3.2, so if you are using any of these old Rubies, its time to update Rails versions at your earliest convenience.

Fix db:migrate:reset task
Before this fixdb:migrate:resetwas broken, because we started to load the schema before migrating. This prevented migrations from running. This patch empties the schema before migrating, ensuring that migrations run as expected.

React

React Compiler Beta Release - At React Conf 2024, we announced the experimental release of React Compiler, a build-time tool that optimizes your React app through automatic memoization. You can find an introduction to React Compiler here. Since the first release, we’ve fixed numerous bugs reported by the React community, received several high quality bug fixes and contributions1 to the compiler, made the compiler more resilient to the broad diversity of JavaScript patterns, and have continued to roll out the compiler more widely at Meta. In this post, we want to share what’s next for React Compiler.

Spring

Spring Security 6.4.0-RC1 is available now - he first release candidate of Spring Security 6.4 is available. This release brings several compelling features including: Support for Passkeys, Access token requests withRestClient and WebClient, and ClientRegistrationfrom provided configuration

Spring Security 6.3.4, 6.2.7 and 5.8.15 are available now - Spring Security 6.3.4, 6.2.7, and 5.8.15 are available now. In all cases, the releases are mostly composed of bug fixes, dependency upgrades, and documentation improvements.

Spring REST Docs 3.0.2 - Spring REST Docs3.0.2has been released and is now available from Maven Central. This release includes7 bug fixes and documentation improvements. Thanks to all those who have contributed with issue reports and pull requests.

SvelteKit

SvelteKit now suports typed arrays inloadfunctions. It's "not something to over-use, since it uses base64 encoding which is 33% larger than the raw data, but useful when you need it"(2.6.0,#12716)

Components typed through Svelte 5'sComponentinterface get proper intellisense (extensions-109.0.1)

And that’s a wrap.

P.S.: If you have any suggestions or feedback, or would like us to feature your project on a particular subject, please write to us. Just respond to this email!