Advertise with Us|Sign Up to the Newsletter

WebDevPro #77: Open-Source Projects, TypeScript Tricks, AI SaaS app tools, Swarm, DeskPad, Internet Archive under attack, Svelte 5 is alive.

Hi ,

Welcome to the web app development world with the 77th 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, 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.

9 Tools Everyone Should Try - In this rapidly evolving tech world, there are lots of dev tools getting launched every day. These tools have become increasingly popular for their flexibility, productivity, community support, and cost-effectiveness. In this article I will be sharing some amazing tools which can quickly help enhance productivity, efficiency, and the overall quality of your work.

20 JavaScript Tricks Every Developer Must Know - JavaScriptis a powerful, flexible language, and knowing a few cool tricks can make your code cleaner, faster, and more efficient. Below are 20 practical JavaScript tips and tricks that you can use in real-world applications to enhance your development process.

9 Interesting Open-Source Projects You Should Explore Right Now - Open-source software and tools are used almost everywhere today. A recent study found that around97% of audited codebases contain open-source software. For individual developers, contributing to open-source projects is a great way to learn and improve their skills. Whether you're exploring new technologies like AI, looking for useful tools, or collaborating with a global community, open-source projects offer countless opportunities. In this article, I’ve gathered 9 interesting open-source projects you should explore right now.

20 TypeScript Tricks Every Developer Should Know - TypeScriptis a powerhouse for modern JavaScript development, bringingtype safetyand advanced features to the table. While many developers know the basics, there are hidden gems and practical tricks that can make your code more efficient, clean, and maintainable. Let’s dive into20 TypeScript tricksthat every developer should know, with examples and practical approaches!

How I Built the World's Best NextJS, AI Scheduling App - By the end of this article, you'll learn how to: Integrate an AI copilot into your Next.js application by building a scheduling app with Cal.com and Develop and manage a custom scheduler that enhances user experience across your application. Plus, you'll have a cool project to showcase in your portfolio!

8 open-source tools to build your next AI SaaS app - All the big fishes in tech, from Google to Meta, are heavily investing in AI models. This is the best time to build an AI-powered app to capitalize on the growing demand, but finding the right tools for it can be challenging. I have compiled eight open-source tools to help you develop your AI-powered SaaS app easily.

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 Typeahead - Autocomplete component built with Vue.js and Tailwind CSS.

🧩Material Tailwind- Easy to use components library for Tailwind CSS and Material Design.

🧩Layouts for Tailwind- Layouts and UI Patterns for Tailwind CSS.

🧩HyperUI- Open source marketing and ecommerce Tailwind CSS components.

🧩Snippets- Open source collection of animation snippets made for Tailwind CSS.

🧩Fancy Tailwind- Large collection of Tailwind CSS UI components (700+).

🧩Myna UI - Open source UI Components and Marketing Elements.

🧩RippleUI- Clean, modern and beautiful Tailwind CSS components.

Featured: Responsive Web Design with HTML5 and CSS

If you’re tired of static websites that just don’t perform, it’s time to upgrade your skills with Responsive Web Design with HTML5 and CSS—a self-paced course designed to turn you into a responsive web design pro led by Ben Frain.

With over 20 years of experience, Ben Frain—UI-UX Technical Lead at bet365—guides you through key techniques to build fully responsive websites using HTML5 and CSS.

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.

Swarm- An educational framework exploring ergonomic, lightweight multi-agent orchestration managed by OpenAI Solution team. Swarm is currently an experimental sample framework intended to explore ergonomic interfaces for multi-agent systems. It is not intended to be used in production, and therefore has no official support. (This also means we will not be reviewing PRs or issues!) The primary goal of Swarm is to showcase the handoff & routines patterns explored in theOrchestrating Agents: Handoffs & Routinescookbook. It is not meant as a standalone library, and is primarily for educational purposes.

DeskPad – DeskPad is a virtual monitor for screen sharing. Certain workflows require sharing the entire screen (usually due to switching through multiple applications), but if the presenter has a much larger display than the audience it can be hard to see what is happening. DeskPad creates a virtual display that is mirrored within its application window so that you can create a dedicated, easily shareable workspace.

The Internet Archive is under attack, with a breach revealing info for 31 million accounts - A pop-up message said the online archive has suffered ‘a catastrophic security breach,’ as its operators say the site has been DDoS’d for days. HIBP refers toHave I Been Pwned, a website where people can look up whether their information has been published in data leaked from cyberattacks. HIBP operator Troy Huntconfirmed toBleepingComputerthat he received a file containing “email addresses, screen names, password change timestamps, Bcrypt-hashed passwords, and other internal data” for 31 million unique email addresses nine days ago and confirmed it was valid by matching data with a user’s account.

Drawing Graphics on Apple Vision with the Metal Rendering API - When it comes to rendering, most opt for established game engines like Unity or Apple's high-level APIs like RealityKit. However, there's another option that's been available since the beginning: building your own rendering engine using the Metal API. Though challenging, this approach offers full control over the rendering pipeline, down to each byte and command submitted to the GPU on each frame. This blog covers helps you do just that!

Web Browser Engineering - Web browsers are ubiquitous, but how do they work? This book explains, building a basic but complete web browser, from networking to JavaScript, in a couple thousand lines of Python.

Svelte 5 is alive - After almost 18 months of development, comprising thousands of commits from dozens of contributors, Svelte 5 is finally stable. It’s the most significant release in the project’s history. Svelte 5 is a ground-up rewrite: your apps will be faster, smaller and more reliable. You’ll be able to write more consistent and idiomatic code. For newcomers to the framework, there’s less stuff to learn.

Implementing the login functionality in our app

Let’s enable theapp/Login.jscomponent to log us in with our freshly created user. To do so, open the component and go to your form tag where we have the followingonSubmitlistener and code waiting for us to bring itto life:

onSubmit={(event) => {

event.preventDefault();

if (isPasswordLogin) {

alert("User wants to login with password");

} else {

alert("User wants to login with magic link");

}

}}

As seen in the code logic, in our existing UI, we have prepared two login options:Sign in with Passwordand aSign in with Magic Link. Here, we will look at the password-based login first, and in theAuthenticating with magic linkssection, we will look at the magiclink variant.

First, make sure that you initialize a Supabase client in theLogincomponent. Just add one right below yourinput references:

...

const passwordInputRef = useRef(null);

const supabase = getSupabaseBrowserClient();

...

As you’ve seen in the first chapter, the Supabase services are neatly separated by concern but seamlessly connected; this is the same way the Supabase client exposes functionality to those services. If you want to do anything related to authentication, you’ll find it withinsupabase.auth. Within that, we get access to a method namedsignInWithPassword(..), which takes an email and password to authenticate with. That’s what we willuse now.

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

Laravel

Integrate Unsplash in Your Laravel Application - The Laravel Unsplash package provides an easy way to integrate your Laravel project with the Unsplash API. Use the API to fetch photos, collections, and user data from Unsplash.

Blasp is a Profanity Filter Package for Laravel - Blasp is a Laravel profanity filter package that helps detect and mask profane words. It provides profanity detection, substitution options, obfuscation, and more.

Laravel Herd Adds Native MongoDB Support - Laravel Herd has added nativeMongoDB support, making it super easy to integrate MongoDB into your Laravel applications. Check out theHerd Documentationon this feature that allows you to quickly spin up a local MongoDB instance and install the MongoDB PHP extension directly within Herd. With minimal configuration, you can build applications leveraging MongoDB's powerful document-based database system.

Creating a CLI Application With Laravel and Docker - Laravel provides a robust CLI framework built on top of the popular Symfony Console component, which brings the best features of Laravel to the command line. While Laravel is traditionally used to create web applications, some applications need robust CLI commands that you can run via Docker in production environments. If you are building a CLI-only project, you could also consider using the community project Laravel Zero. Everything we discuss in this article will work with Laravel or Laravel Zero.

Ruby on Rails

Deprecate setting the behavior of deferring job queueing until after commit
Theactive_job.enqueue_after_transaction_commitsetting has been deprecated. This behavior is not intended to be changed globally, but on a per-job basis.

Add support for using Kamal inside of the generated devcontainer
Just like the title implies, you can now use Kamal when running Rails in thedevcontainer.

Fix enum labels to accept keyword arguments
Now you can define enums without the extra brackets using keyword arguments.

Allow renaming enums to accept two from/to positional arguments similar to renaming tables
This change makes the API forrename_enumto be more consistent withrename_table.

Add prefix address when IPAddr of CIDR encoded with JSON
If you’re using IPaddr with CIDR notation, the prefix will now be included when encoding with ActiveSupport::JSON.

SvelteKit

Introducing the new Svelte CLI - We’ve just releasedsv, a new Command Line Interface (CLI) for creating, enhancing, and upgrading Svelte projects. One of the most common question we hear is “how do I set up Tailwind on my new project?”. Tailwind hasSvelteKit documentation, but it lists eight steps. While the community-ledsvelte-addproject could automate the process, few knew about it. Now, we’re offering that functionality via our own CLI, directly within the project creation screen. And not just for Tailwind — we have built-in add-ons for formatting, linting, testing, setting up databases and auth and i18n and more.

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!