Advertise with Us|Sign Up to the Newsletter

Thousands of startups use Notion as a connected workspace to create and share docs, take notes, manage projects, and organize knowledge—all in one place.

We’re offering 6 months of new Plus plans, including unlimited Notion AI so you can try it all for free!

Redemption Instructions

To redeem the Notion for Startups offer:

1. Submit an application using our custom link:https://ntn.so/packtand selectPackton the partner list.

2. Include our partner key,STARTUP4110P19151.

WebDevPro #75: Cookie Banner Hackathon, Open-source AI libraries, Web Visual Editor, The Copenhagen Book, FIDO Alliance to Make Passkeys Portable.

Hi ,

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

The Most Annoying Cookie Banner Ever Hackathon - We've all had enough of those annoying cookie consent banners that get in our way every day on the internet. So in the spirit of Halloween and Hacktoberfest, I'm proud to present to you THE MOST ANNOYING COOKIE BANNER EVER HACKATHON. In this contest, you'll connect with that evil developer inside of you and get revenge for all those annoying cookie banners you've had to deal with. HOW, you ask?! By creating the most annoying cookie banner you can think of. WHY, you ask!? Well, to have fun... and torture users a bit in the process.

21+ Best Free and Open-Source Icon Library for2024 - Whether you're a developer, designer, or business owner,high-quality iconsmake your work look polished, professional, and user-friendly. But with so manyfree icon librariesout there, how do you know which ones offer the most value? In this guide, we'll dive into 21 of thebest free and open-source icon librariesfor 2024. FromSVG iconsto framework-specific options, we'll cover key metrics such as the number oficons, supported formats, and integrations to help you choose the perfect library for your project.

9 essential open-source libraries to master as an AI developer - AI is everywhere. Everyone wants to do AI. But sometimes, it is hard to know which tools to master to implement AI features in your apps successfully. So, here is a curated a list of repositories where you can learn to master AI witchcraft.

8 Open-Source Tools to grow your app and reach new markets! - Expanding your app into new markets can feel daunting, but it doesn’t have to be! With the right tools at your fingertips, you can streamline processes, engage users, and gain valuable insights—all while keeping things affordable and accessible. Let’s explore eight fantastic open-source tools that can help you localize your app, connect with your audience, and ultimately grow your user base across the globe.

Chat with your PDF using Pinata,OpenAI and Streamlit - In this tutorial, we’ll build a simple chat interface that allows users to upload a PDF, retrieve its content usingOpenAI’s API, and display the responses in a chat-like interface usingStreamlit. We will also leverage@pinatato upload and store the PDF files.

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 Templates- Collection of templates and components.

🧩 Treact- React UI templates and components built using Tailwind CSS.

🧩 Jakarta LTE- Admin template using Tailwind CSS.

🧩 themes.dev- Handcrafted, free and premium Tailwind CSS themes and components.

🧩Sail UI- Collection of basic UI components built on Tailwind CSS.

🧩jQuery Toggler- Switches using jQuery and Tailwind 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.

Web Visual Editor – It has the unique ability to synchronize code selection with visual selection in the preview. Since Web Visual Editor has minimal functionality, the codebase is very small, making future expansions easy. It is designed to reflect changes made in the preview back to the code, so enhancing the editing capabilities within the preview may be beneficial in the future. For example, you can copy, cut, paste and delete elements within preview at this moment.

The Copenhagen Book - The Copenhagen Book provides a general guideline on implementing auth in web applications. It is free, open-source, and community-maintained. It may be opinionated or incomplete at times but we hope this fills a certain void in online resources. We recommend using this alongside theOWASP Cheat Sheet Series.

Large language models reduce public knowledge sharing on online Q&A platforms - Large language models (LLMs) are a potential substitute for human-generated data and knowledge resources. This substitution, however, can present a significant problem for the training data needed to develop future models if it leads to a reduction of human-generated content. In this work, we document a reduction in activity on Stack Overflow coinciding with the release of ChatGPT, a popular LLM.

Android 16 will include a Terminal and full Linux VM support with GPU acceleration - Google is looking to offer a native Terminal app for Android, possibly with Android 16. The Terminal app will allow installation of a Linux VM with full GUI and GPU acceleration along with other sysadmin features including disk resizing, port forwarding, and partition recovery. This is an extension of Google's earlier project of allowing Chrome OS to run on Android using the Android Virtualization Framework.

FIDO Alliance Working on Making Passkeys Portable Across Platforms - The FIDO Alliance is developing new specifications to enable secure transfer of passkeys between different password managers and platforms.Announced on Monday, the initiative is the result of collaboration among members of the FIDO Alliance's Credential Provider Special Interest Group, including Apple, Google, Microsoft, 1Password, Bitwarden, Dashlane, and others

Building the login form

Let’s start building theLoginpage for our ticket system. To keep pages clean and readable, let’s create a component in a new filenamedapp/Login.js.

Reminder

app/Login.jsis not a page but a component! In the Pages Router, every file within thepages/directory was a page. In the App Router, pages are always namedpage.js, and their routed path is defined by the directory they are in. This allows you to create non-page files (such as component files) co-located with the actualpage files.

In this component file, we will start by defining theLogincomponent skeleton,like so:

export const Login = () => {

return (

<form>

<article style={{ maxWidth: "420px", margin: "auto" }}>

<header>Login</header>

<strong>Hello Login!</strong>

</article>

</form>

);

};

The<article>tag in Pico, as per the documentation, is used for slightly highlighted containers with gracious padding, and that’s what we want here. We also give the card two inline styles to center it and give it a maximum width, such that it looks more like a well-knownlogin screen.

Note

Even though<article>might seem odd semantically, it is the best element for such a use case accordingtohttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/article.

Before adding more elements to the component, we want to make sure it will be shown when visiting the main page. So, open upapp/page.jsand change thePagecomponent so that it only will return theLogincomponentfor now:

import { Login } from "./Login";

export default function LoginPage() {

return <Login />;

}

Now, when you run the Next.js server, you should see a card with heading text that saysLoginand, below that,Hello Login!.

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

Laravel

The Inertia.js v2 Beta is Here - The first beta version of Inertia.js v2 wasreleasedthis week. The core library has been rewritten to support asynchronous requests; unlocking some impressive features, you can now get your hands on!

Ruby on Rails

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 we urge users on older versions of Ruby to upgrade to these new Rails versions at their earliest convenience. Additionally, we strongly recommend users upgrade to Ruby 3.2 or greater, to take advantage of the improved ReDoS mitigations in newer versions.

New Rails maintenance policy and end of maintenance announcements – Ruby on Rails announced updates to our maintenance policy for Ruby on Rails. These changes are designed to provide clarity on our support timelines and help you plan your Rails upgrades effectively. You can find the full details of our new policy inour site.

Rails World 2024 Recap: All talks now online! - Just over1,000 Rails devsfrom57 countriesgathered in Toronto for two days of technical talks, workshops, networking, evening parties, theRails 8 beta release…and one glorious neon sign. All the talks from Rails World 2024 are now available online!Revisit your favorite sessions or catch up on ones you missed on theRails World 2024 YouTube playlist.

Svelte

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)

Tzezar's Datagridis an easy to use and easy to customize datagrid component

SparklePostis a demo application that implements interface patterns commonly found in native iOS and Android apps, using modern and performant web development techniques

tipexis a customizable rich text editor for SvelteKit; based on TipTap

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!