WebDevPro

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Software delivery to dedicated edge devices is one of the most complex challenges faced by IT professionals today. While edge deployments come with inherent complications, it’s possible to avoid the pitfalls. With this guide in hand, a little planning, and the right tools and strategies in place, you can be confident you’ll never push a faulty update at scale.Read the GuideWebDevPro #81: Web Storage and Cookies, Frontend Resources, Top React Frameworks, Continue And Persist, QwQ, The Intercept’s lawsuit against OpenAI.Hi ,Welcome to the web app development world with the 81st edition of _webdevpro! This will be the last issue of 2024 before the holidays. We will see you again next year - after much rest and rejuvenation!In this edition we cover web development community discussions on:Understanding Web Storage: LocalStorage, SessionStorage, and CookiesFrontend Resources V29 open-source gems to become the ultimate developerComparing The Top React FrameworksGet Window Size in Pure CSSDon'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:Continue And PersistIntroducing some changes to our Web APIQwQ: Reflect Deeply on the Boundaries of the UnknownCore copyright violation claim moves ahead in The Intercept’s lawsuit against OpenAISteelToday's news covers 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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Dev Community SpeakWhat are Web developers discussing? What are the latest tips and tricks? Shortcuts and experiments? Cool tutorials? Releases and updates? Find it all out here.Understanding Web Storage: LocalStorage, SessionStorage, and Cookies - In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, and cookies to store data in the user’s browser. While these three mechanisms serve similar purposes, they have distinct differences in terms of capacity, persistence, and use cases. In this blog, we'll explore these differences, with examples, to help you better understand when and how to use each one.Frontend Resources V2 - This collection is packed with a wide range of tools that cover everything from building stunning user interfaces to fine-tuning performance and much more. These resources have been invaluable. Hoping they’ll be just as useful for you.9 open-source gems to become the ultimate developer - For me, AI is everywhere.But sometimes, it's hard to understand what a fun project is and what project you can use for your website. I have curated a list of 9 open-source repositories you can implement into your repository tomorrow!Comparing The Top React Frameworks - When learning React, we all start with the CRA (create-react-app) library. It is a good place to begin the journey of React but using it for building a project today is not a good idea. There are many reasons to switch from traditional CRA to the modern framework of React, which can offer many more features. There are various alternatives based on your requirements such as SSR, performance, etc. In this blog, we are going to investigate some of the top alternatives that you can use instead of CRA.Get Window Size in Pure CSS - We all know that CSS used to be the most challenging part of web development. However, it has become even harder nowadays. You wouldn't believe it, but now CSS can define properties, do the math, and even directly get the window size! This article will show you how to do it.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind CSS tools:Tailwind Grid Generator- Drag and drop Tailwind CSS grid generator.Tailwind Box Shadows Generator- Box Shadows generator.Windframe- Tailwind CSS drag and drop builder to rapidly build and prototype websites.Static Tailwind- The most used Tailwind classes, precompiled, with no build step.Design GUI- AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.This is our final edition for 2024, but don’t worry—we’ll be back with more insights and updates in January 2025. In the meantime, we’ve got a little holiday treat for you!Packt has some exciting offers lined up to help you boost your tech skills and get ready for an amazing new year! It’s the perfect opportunity to relax, learn something new, and stay ahead in your field. Keep an eye out for these special holiday deals!From all of us at the Packt Newsletters team, we wish you a joyful holiday season and a fantastic start to 2025. See you next year! 🎄✨Internet Jibber-JabberRandom curious musings and interesting words about Mobile Dev on the Internet.Continue And Persist - Send someone you appreciate an official ‘Continue and Persist’ Letter. Every day, thousands of Cease and Desist letters are issued, telling people to stop what they’re doing (Looking at you, David Chang). What a bummer! That’s why we created:TheContinue and Persist Letter. A official-lookinglegalletter that encourages and uplifts people, one that tells people to keep doing what they’re doing! Surprise someone you appreciate by sending them a Continue and Persist Letter.Introducing some changes to our Web API - Web API endpoint integration. Effective today,newWeb API use cases will no longer be able to access or use the following endpoints and functionality in their third-party applications. Applications with existing extended mode Web API access that were relying on these endpoints remain unaffected by this change.QwQ: Reflect Deeply on the Boundaries of the Unknown - What does it mean to think, to question, to understand? These are the deep waters that QwQ (Qwen with Questions) wades into. Like an eternal student of wisdom, it approaches every problem - be it mathematics, code, or knowledge of our world - with genuine wonder and doubt. QwQ embodies that ancient philosophical spirit: it knows that it knows nothing, and that’s precisely what drives its curiosity. Before settling on any answer, it turns inward, questioning its own assumptions, exploring different paths of thought, always seeking deeper truth. We invite you to explore alongside QwQ, embracing both its insights and its imperfections as part of the endless quest for understanding.Core copyright violation claim moves ahead in The Intercept’s lawsuit against OpenAI - Last week, aNew York federal judge ruleda key copyright violation claim by The Intercept against OpenAI would move ahead in court. The ruling is the latest in a series of major legal decisions involving the AI developer this month, after OpenAI sought to dismiss lawsuits from several digital news publishers.Steel - Steel.dev is an open-source browser API that makes it easy to build AI apps and agents that interact with the web. Instead of building automation infrastructure from scratch, you can focus on your AI application while Steel handles the complexity. This repo is the core building block behind Steel - a production-ready, containerized browser sandbox that you can deploy anywhere. It includes built-in stealth capabilities, text-to-markdown session management, UI to view/debug sessions, and full browser control through standard automation frameworks like Puppeteer, Playwright, and Selenium. Web Development TutorialAn excerpt from 'Django 5 by Example'By Antonio MeléUsing a class-based view to list postsTo understand how to write class-based views, we will create a new class-based view that is equivalent to thepost_listview. We will create a class that will inherit from the genericListViewview offered by Django.ListViewallows you to list any type of object.Edit theviews.pyfile of theblogapplication and add the following code to it:from django.views.generic import ListView class PostListView(ListView): """ Alternative post list view """ queryset = Post.published.all() context_object_name = 'posts' paginate_by = 3 template_name = 'blog/post/list.html'ThePostListViewview is analogous to thepost_listview we built previously. We have implemented a class-based view that inherits from theListViewclass. We have defined a view with the following attributes:We usequerysetto use a custom QuerySet instead of retrieving all objects. Instead of defining aquerysetattribute, we could have specifiedmodel = Postand Django would have built the genericPost.objects.all()QuerySet for us.We use the context variablepostsfor the query results. The default variable isobject_listif you don’t specify anycontext_object_name.We define the pagination of results withpaginate_by, returning three objects per page.We use a custom template to render the page withtemplate_name. If you don’t set a default template,ListViewwill useblog/post_list.htmlby default.Now, edit theurls.pyfile of theblogapplication, comment the precedingpost_listURL pattern, and add a new URL pattern using thePostListView class.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!Ruby on RailsSilence deprecate message during “app:update” commandWhen running theapp:updatecommand you previously may see warnings due to not adopting thenew_framework_defaults. This PR silences those messages to avoid confusion.Reword error message for NoDatabaseErrorThis patch adds some suggestions on what to do when you run into this error.Redesign ActionView::Template::Handlers::ERB.find_offset to handle edge casesSome excellent work was put into improving the ERB template error highlighting in this PR, as well as fixing a bug withmultibyte character tokenization.Make column_definitions queries retryablePreviously when an application wasn’t using a schema cache in production apingquery would be executed for each table when it was loaded the first time.Make Action Dispatch Session#store method conform to Rack specTheRack specificationstates that a hash-like object stored in environment withrack.sessionkey must implementstore/2method with[]=semantics.Preserve timezone and locale in ActiveJob exception handlersThis PR fixes a bug where the job locale and timezone were wrong inside therescue_fromblock.SvelteKit, Svelte CLI and Language Toolsadapter-autonow supports the Bun package manager (3.3.1,#12854)TheSvelte CLInow supports a number of add-ons for new and existing projects. You can find the entire list of add ons inthe CLI Repositoryor by runningnpx sv createfrom your command line.The Svelte extension now provides a Svelte 5 component migration command (extensions-109.1.0)Trending TitlesBuilding LLM Powered Applications$39.99$27.98CompTIA Security+ SY0-701 Certification GuidePrint $44.99Django 5 By Example$39.99 $27.98And 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Cut your QA cycles down from hours to minutes with QA WolfIf slow QA processes bottleneck you or your software engineering team and you’re releasing slower because of it — you must check out QA Wolf. Their AI-native approach gets your team to 80% automated end-to-end test coverage and helps them ship 5x faster by reducing QA cycles from hours to minutes.Schedule a Demo today!WebDevPro #79:Web Storage, Frontend Resources, Comparing Top React Frameworks, Window Size in Pure CSS, Typeset, NewPipe, You-Get.Hi ,Welcome to the web app development world with the 79th edition of _webdevpro!In this edition we cover web development community discussions on:Understanding Web Storage: LocalStorage, SessionStorage, and CookiesFrontend Resources V2Comparing The Top React FrameworksGet Window Size in Pure CSSDon'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 webdev ecosystem:Typeset .Declare Your Digital IndependenceNotebookLlama: An Open Source version of NotebookLMNewPipeYou-GetToday's news covers Angular, 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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow Dev Discussions on the Internet.Understanding Web Storage: LocalStorage, SessionStorage, and Cookies - In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, and cookies to store data in the user’s browser. While these three mechanisms serve similar purposes, they have distinct differences in terms of capacity, persistence, and use cases. In this blog, we'll explore these differences, with examples, to help you better understand when and how to use each one.Frontend Resources V2 - This collection is packed with a wide range of tools that cover everything from building stunning user interfaces to fine-tuning performance and much more. These resources have been invaluable. Hoping they’ll be just as useful for you.9 open-source gems to become the ultimate developer - For me, AI is everywhere.But sometimes, it's hard to understand what a fun project is and what project you can use for your website. I have curated a list of 9 open-source repositories you can implement into your repository tomorrow!Comparing The Top React Frameworks - When learning React, we all start with the CRA (create-react-app) library. It is a good place to begin the journey of React but using it for building a project today is not a good idea. There are many reasons to switch from traditional CRA to the modern framework of React, which can offer many more features. There are various alternatives based on your requirements such as SSR, performance, etc. In this blog, we are going to investigate some of the top alternatives that you can use instead of CRA.Get Window Size in Pure CSS - We all know that CSS used to be the most challenging part of web development. However, it has become even harder nowadays. You wouldn't believe it, but now CSS can define properties, do the math, and even directly get the window size! This article will show you how to do it.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:📁Vue Notus- Open-source Tailwind CSS and Vue.js UI kit.📁EasyTailwind- Freemium, easily customizable templates made with Tailwind CSS.📁Windmill Dashboard- Multi theme, completely accessible dashboard template.📁Tailwind Admin- Administration panel template with Tailwind CSS.📁Landing Gradients- Landing page template using gradients (1.7+).📁Resume- Simple resume with Tailwind CSS.📁Simple Light- Free landing page template built with React & Tailwind CSS.📁V-Dashboard- Dashboard starter template built with Vue 3 and Tailwind CSS.Trending TitlesFeatured: Responsive Web Design with HTML5 and CSSIf 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, the author of the best-selling book Responsive Web Design with HTML5 and CSS, 4th Edition!With over 20 years of experience in web development, Ben Frain—currently the UI-UX Technical Lead at bet365—guides you through key techniques to help you build fully responsive websites using HTML5 and CSS.Watch the ' Responsive Web Design with HTML5 and CSS' Video Now!Building LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom curious musings and interesting words about Web Dev on the Internet.Typeset - AnHTMLpre-proces­sor for web ty­pog­ra­phy. Typeset pro­vides ty­po­graphic fea­tures used tra­di­tion­ally in fine print­ing which re­main un­avail­able to browser lay­out en­gines. Typeset’s pro­cess­ing brings the fol­low­ing to your web­pages: Real hang­ing punc­tu­a­tion, Optical mar­gin align­ment, Small caps de­tec­tion, Soft hy­phen in­ser­tion and Punctuation sub­sti­tu­tion.Declare Your Digital Independence - The centralization of the internet poses a fundamental threat to individual freedom. In 2024, a few corporations control most of our online services and infrastructure, wielding immense power with little accountability. They can censor content, exploit data, and exclude users from essential services, undermining democracy. We need a solution urgently. Introducing Freenet—a decentralized replacement for the World Wide Web. Acting as a global, shared computing platform, Freenet can be accessed via a standard web browser or embedded into software via an API. Freenet enables new solutions to old problems like spam,DDoS, keeping private data private, and much more.NotebookLlama: An Open Source version of NotebookLM - This is a guided series of tutorials/notebooks that can be taken as a reference or course to build a PDF to Podcast workflow. You will also learn from the experiments of using Text to Speech Models. It assumes zero knowledge of LLMs, prompting and audio models, everything is covered in their respective notebooks.NewPipe - NewPipe is a privacy-preserving YouTube frontend. NewPipe does not use any Google framework libraries, or the YouTube API. It only parses the website in order to gain the information it needs. Therefore this app can be used on devices without Google Services installed. Also, you don't need a YouTube account to use NewPipe, and it's FLOSS.You-Get - You-Getis a tiny command-line utility to download media contents (videos, audios, images) from the Web, in case there is no other handy way to do it. Here's how you useyou-getto download a video fromYouTube Web Development TutorialUsing a class-based view to list postsTo understand how to write class-based views, we will create a new class-based view that is equivalent to thepost_listview. We will create a class that will inherit from the genericListViewview offered by Django.ListViewallows you to list any type of object.Edit theviews.pyfile of theblog application and add the following code to it:from django.views.generic import ListView class PostListView(ListView): """ Alternative post list view """ queryset = Post.published.all() context_object_name = 'posts' paginate_by = 3 template_name = 'blog/post/list.html'ThePostListViewview is analogous to thepost_list view we built previously. We have implemented a class-based view that inherits from theListViewclass. We have defined a view with the following attributes:We usequerysetto use a custom QuerySet instead of retrieving all objects. Instead of defining aquerysetattribute, we could have specifiedmodel = Post and Django would have built the genericPost.objects.all()QuerySet for us.We use the context variablepostsfor the query results. The default variable isobject_listif you don’t specify anycontext_object_name.We define the pagination of results withpaginate_by , returning three objects per page.We use a custom template to render the page withtemplate_name. If you don’t set a default template,ListViewwill useblog/post_list.htmlby default.Now, edit theurls.pyfile of theblogapplication, comment the precedingpost_list URL pattern, and add a new URL pattern using thePostListView class.Read 'Django 5 by Example' now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!AngularMeet Angular v19 - In the past two years we doubled down on our investment in developer experience and performance — in every single release we’ve been consistently shipping improvements that multiply their impact when combined together. Seeing the positive community response and increased engagement in our developer events is validating that we’ve been moving in the right direction. Today’s release is bringing a series of improvements that will make it even easier for you to deliver fast web apps with confidence.LaravelAsymmetric Property Visibility in PHP 8.4 - PHP 8.4 is scheduled to be released tomorrow, and one exciting feature we haven't covered yet isAsymmetric Property Visibility. Starting in PHP 8.4, properties may also have their visibility set asymmetrically with a different scope for reading and writing.PHP 8.4 is released with Property Hooks, Class Instantiation without extra parenthesis, and more - The PHP team has released PHP 8.4 with new array find functions, property hooks, class instantiation without extra parenthesis, and more: New Array Find Functions in PHP 8.4 (RFC), Property Hooks in PHP 8.4 (RFC), Class instantiation without extra parenthesis in PHP 8.4 (RFC), New mb_trim functions (RFC), New mb_ucfirst() and mb_lcfirst() functions (RFC), Asymmetric Property Visibility in PHP 8.4 (RFC) and more.Transform Data into Type-safe DTOs with this PHP Package - This PHPData Modelpackage provides a lightweight, non-invasive way to hydrate type-safe PHP objects recursively. It uses reflection and PHP attributes to hydrate objects and instantiate them based on type hints.Access Laravel Pulse Data as a JSON API - The Pulse API package byRoberto Galleagives you all the data available in Laravel Pulse as a JSON API. This package defines two API endpoints for getting Pulse data. These API endpoints are protected using a configurable Pulse middleware for authorization.PostgreSQLPostgreSQL 17.2, 16.6, 15.10, 14.15, 13.18, and 12.22 Released! - The PostgreSQL Global Development Group has released an update to all supported versions of PostgreSQL, including 17.2, 16.6, 15.10, 14.15, and 13.18. Additionally, due to the nature of one of the issues in theprevious update release, the PostgreSQL Global Development Group is also releasing a 12.22 release for PostgreSQL 12. PostgreSQL 12 is now EOL and will not receive more fixes. For the full list of changes, please review therelease notes.Ruby on Rails Add Active Support Notifications test helper moduleThis PR has been created because it’s currently cumbersome to test that a certain code block/action triggers anActiveSupport::Notifications::Eventto be emitted. It would be ideal to have some helpers toassertagainst such event emission. Have heard such helpers could be helpful internal to Rails as well.Add “affected_rows” to “sql.active_record” eventTherecently addedrow_countvalue is very useful for identifying cases where a query would return a large result set as large results can end up using a lot of memory or even be blocked by databases like Vitess.However, somewhere thatrow_countfalls short is for queries that do not necessarily return their results back to the client. These queries that affect too many rows can lead to their own set of problems, such as overwhelming replication and causing replication lag.Allow “hidden_field” tag to accept a custom autocomplete valueIn#43280autocomplete="off"was enforced for all hidden inputs generated by Rails to fix afirefox bug. Unfortunately it’s also a legitimate use-case to specify anautocompletewith a value such asusernameand a value on a hidden input. This hints to the browser that (in this example) the username of a password reset form is what we’ve provided as the value and the password manager can store it as such.Allow to reset cache counters for multiple recordsThere is often a need to reset counter caches for multiple records. Achieving this before will generate many extra queries.Parallel tests with :number_of_processors uses cgroups-aware usable processor countWhen using parallel tests the default will now try to allocate a worker pool based of the total number of processors available to the system.Fix Mysql2Adapter support for prepared statementsIf you’re using the Mysql2 adapter and rely on prepared statements, you may want to wait for the next bug-fix release before upgrading to Rails 8.0.SvelteKitSnippets can now be used to fill slots (5.0.0-next.262,#13427)hidden until-foundandbeforematchare now available on DOM elements (5.0.0-next.266,MDN Docs,#13612)Breaking:State mutations are not allowed in logic block expressions (5.0.0-next.269,#13625)getContext()is now allowed within$derivedrunes (5.1.0,Docs,#13830)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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }200+ hours of research on AI tools & hacks packed in 3 hoursThis free 3-hour Training on AI & ChatGPT (worth $399) will help you become a master of 20+ AI tools & prompting techniques and save 16 hours/week.Get it now for absolutely free! (for first 100 users only) 🎁You will learn how to:➣ Build business that make $10,000 by just using AI tools➣ Make quick & smarter decisions using AI-led data insights➣ Write emails, content & more in seconds using AI➣ Solve complex problems, research 10x faster & save 16 hours every weekRegister & Save Your Seat Now (Only 100 free seats!)SponsoredWebDevPro #78: Prisma + Postgres, JavaScript Patterns, Node.js Frameworks Roundup, 418 I'm a teapot, ZombAIs, fediverse’s TikTok competitor Loops.Hi ,Welcome to the web app development world with the 78th edition of _webdevpro!In this edition we cover web development community discussions on:Prisma + PostgresTop 10 Modern JavaScript Patterns for 2025Node.js Frameworks Roundup 2024 — Elysia / Hono / Nest / EncoreChartDB: From Zero to 1.5K GitHub Stars in 3 DaysMaxun: Open-Source No-Code Web Data Extraction PlatformDon'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:418 I'm a teapotZombAIs: From Prompt Injection to C2 with Claude Computer UseHow to configure an Ethernet connection between iPad and RaspberryPi through USB-C10 years of 20248Notes on the new Claude analysis JavaScript code execution toolThe fediverse is getting its own TikTok competitor called LoopsToday'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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow Dev Discussions on the Internet.Prisma + Postgres - In this tutorial, we'll explore how to set up Prisma + Postgres. We'll use real-world examples involving books and authors. This setup allows you to interact with your Postgres database seamlessly using Prisma. By following this guide, you can the first steps toward building robust applications with Prisma and Postgres.Top 10 Modern JavaScript Patterns for 2025 - JavaScript isn’t just a language; it’s a living, breathing ecosystem that’s constantly evolving. And as we move into 2025, staying ahead of the curve means understanding which coding patterns will shape our development practices. So, here’s a breakdown of the top 10 modern JavaScript patterns that are redefining efficiency and innovation.Node.js Frameworks Roundup 2024 — Elysia / Hono / Nest / Encore — Which should you pick? - Node.js web frameworks — where do we even begin? With so many options out there, choosing the right one for your project can feel overwhelming. In this post, I’ll walk you through thehottestframeworks in the Node.js ecosystem, breaking down the strengths, weaknesses, and best use cases for each one. Whether you’re looking for speed, scalability, or simplicity, hopefully we will cover it all—so by the end, you’ll know exactly which framework is right for you. The frameworks we will be looking at are:Nest,Elysia,Encore.tsandHono.ChartDB: From Zero to 1.5K GitHub Stars in 3 Days - The world is truly changing-and fast. ChartDBis not just another tool-it's a revolution in database design. When my co-founder, Guy Ben-Aharon , and I launched ChartDB a month ago, we aimed to simplify database visualization. The response has been beyond what we could have imagined. ChartDB skyrocketed on GitHub, gainingover 1,500 stars in just three days!Maxun: Open-Source No-Code Web Data Extraction Platform - It’s surprising that in 2024, scraping data is still more complicated than actually using it. The last time I tried existing providers, I realized they mostly cater to technical users or big corporations with too much $ in the bank. Maxun is an open-source no-code web data extraction platform. It lets you build custom robots for data scraping in just a few clicks.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:🧩Wind UI- Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app.🧩Pines UI- Alpine and Tailwind CSS UI library.🧩NativeWind- NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.🧩Windstatic- Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.🧩TailwindFlex- Free library of Tailwind CSS examples.🧩Shadcn UI- Re-usable components built using Radix UI and Tailwind CSS.🧩Indie UI- Rich styled UI components.🧩Penguin UI- Plug-n-play UI component library for Tailwind CSS & Alpine JS.🧩Motion Primitives- React motion components built with Tailwind CSS and Framer Motion.Trending TitlesFeatured: Responsive Web Design with HTML5 and CSSIf 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, the author of the best-selling book Responsive Web Design with HTML5 and CSS, 4th Edition!With over 20 years of experience in web development, Ben Frain—currently the UI-UX Technical Lead at bet365—guides you through key techniques to help you build fully responsive websites using HTML5 and CSS.Watch the ' Responsive Web Design with HTML5 and CSS' Video Now!Building LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom curious musings and interesting words about Web Dev on the Internet.418 I'm a teapot - The HTTP418 I'm a teapotstatus response code indicates that the server refuses to brew coffee because it is, permanently, a teapot. A combined coffee/tea pot that is temporarily out of coffee should instead return503. This error is a reference to Hyper Text Coffee Pot Control Protocol defined in April Fools' jokes in 1998 and 2014. Some websites use this response for requests they do not wish to handle, such as automated queries.ZombAIs: From Prompt Injection to C2 with Claude Computer Use - A few days ago, Anthropic releasedClaude Computer Use, which is a model + code that allows Claude to control a computer. It takes screenshots to make decisions, can run bash commands and so forth. It’s cool, but obviously very dangerous because of prompt injection.Claude Computer Useenables AI to run commands on machines autonomously, posing severe risks if exploited via prompt injection. So, as usual, because of prompt injection, the motto remains:Trust No AI. s possible to haveClaude Computer Usedownload malware, execute it and join Command and Control (C2) infrastructure.All via a prompt injection attack!How to configure an Ethernet connection between iPad and RaspberryPi through USB-C - This tutorial explains how to configure an Ethernet connection between an iPad and a RaspberryPi using the USB-C port. You can not onlyyou can power a RaspberryPi device through the USB-Cof an iPad but that you can alsoget an ethernet connectionthrough it.10 years of 20248 - 2048is a simple yet addictive puzzle game where you slide numbered tiles on a board to merge them. The goal is to create a tile with the number 2048. If you run out of moves, the game ends. You can play 2048 in your browser, on your phone, or on your tablet. It’s easy to pick up but challenging to master. How far can you get? play2048.co(formerlygabrielecirulli.github.io/2048) is where 2048 first launched on March9,2014, featuring the original version of the game. It now hosts a completely new version of 2048, built by the original creator, Gabriele Cirulli.Notes on the new Claude analysis JavaScript code execution tool - Notes on the new Claude analysis JavaScript code execution tool Anthropicreleased a new featurefor theirClaude.aiconsumer-facing chat bot interface today which they’re calling “the analysis tool”. It’s their answer to OpenAI’sChatGPT Code Interpretermode: Claude can now chose to solve models by writing some code, executing that code and then continuing the conversation using the results from that execution. You can enable the new feature on theClaude feature flags page.The fediverse is getting its own TikTok competitor called Loops - Similar to howMastodonoffers an open source, distributed version of X, the fediverse is getting its own TikTok competitor. This week, an app calledLoopsbegan accepting signups on its new platform for sharing short, looping videos. Still in the early stages, Loops is not yet open sourced, nor has it completed its integration with ActivityPub, the protocol that powers Mastodon, Pixelfed, PeerTube, and other federated apps. Web Development TutorialProtecting access to the Ticket Management systemLet’s make sure that a user who is properly logged in will not see the login form again, but instead is redirected to the Ticket Management UI at/ticketswhen hitting the login route. Then, vice versa, we want to show unauthenticated people the way to the login form at/if they hit the route of the TicketManagement UI.As part of this chapter, you have already created anapp/middleware.jsfile that contains the Supabase client executingsupabase.auth.getSession(). ThisgetSessionfunction returns a session if one exists – and one should exist if you are logged in. A session will also contain the user datawithinreturnedSession.data.Since themiddleware.jsfile is executed before anything else, we can also use it as a guardian to check whether someone is authenticated and what resource is accessed. If there is an active session, we want to allow access to all routes starting with/tickets. You can easily achieve this with thefollowing code:export async function middleware(req) { const res = NextResponse.next(); const { supabase, response }= getSupabaseReqResClient({ request: req }); const session = await supabase.auth.getSession(); const requestedPath = req.nextUrl.pathname; const sessionUser = session.data?.session?.user; if (requestedPath.startsWith("/tickets")) { if (!sessionUser) { return NextResponse.redirect(new URL("/", req.url)); } } return response.value;}In this adaptedmiddleware.jscode, we first get the path of the URL. If it starts with/tickets, then we check whether the user data isnotavailable; if that’s the case, then it’s someone trying to access a protected area who isnotauthenticated. In that case, we would redirect back to the page where the login sits (atyour.domain/); we do so by using theNextResponse.redirect()function and passing it a newlyconstructed URL.Why don’t we simply useNextResponse.redirect("/")though? The reason is that Next.js expects an absolute URL (https://nextjs.org/docs/messages/middleware-relative-urls) – this can be constructed withnew URL()using the given URL (req.url) and changing itspath (https://developer.mozilla.org/en-US/docs/Web/API/URL/URL).Read 'Building Production-Grade Web Applications with Supabase' now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelLaravel 11.30 Released - The Laravel team released v11.30, which includes defer testing helpers, the ability to define custom unique string IDs for Eloquent models, the use of backed Enums withAuthorizesRequests, and more.Laravel NewNow, you can install PHP and the Laravel installer with a single command.Laravel MongoDB releases version 5.0Version 5.0 of the official Laravel MongoDB integration is now available andLaravel Herd added native supportWireSpy for Laravel LivewireWireSpy lets you instantly debug and interact with your Laravel Livewire components. You can inspect the state of your components, modify that state, and time travel through state changes to debug issues.Inertia v2 BetaThe beta version of Inertia.js v2 was recently released. The core library has been rewritten to support asynchronous requests; unlocking some impressive features, you can now get your hands on!PanNuno Maduro released a new PHP package called Pan, a lightweight and privacy-focused PHP product analytics library.API Platform for LaravelAPI Platform is a set of tools for building modern web projects. Like other modern frameworks such as Laravel and Symfony, it’s a full-stack, all-in-one framework and a set of independent PHP components and bundles that can be used separately.Ruby on Rails Castquery_cachevalue when using URL configuration for Active RecordWhen configuring the Active Record connection withDATABASE_URL, due to not casting the value to an integer, the query cache was not set to the given value. This pull request fixes this issue.DefaultRegexp.timeoutto 1sThis pull requests setsRegexp.timeoutto 1 second by default to improve security over Regexp Denial-of-Service attacks. If a timeout was already configured in the application, Rails won’t override it.Authenticate the Action Cable connection tooThe new authentication generator will add authentication to Action Cable too now.Expand documentation of.attributes_for_inspectThis pull request adds more documentation to the.attributes_for_inspectmethod of Active Record.Fix bundle install for vendored gemsThis change fixes an issue with the generated Dockerfile to copy thevendorfolder to the image, otherwise vendored gems threw an error due to not being on the filesystem.Improve accessibility of Rails GuidesThe accessibility of the Rails Guides is improved further. There are quite a bit of changes, read the description for all the details.SvelteKitSnippets can now be used to fill slots (5.0.0-next.262,#13427)hidden until-foundandbeforematchare now available on DOM elements (5.0.0-next.266,MDN Docs,#13612)Breaking:State mutations are not allowed in logic block expressions (5.0.0-next.269,#13625)getContext()is now allowed within$derivedrunes (5.1.0,Docs,#13830)adapter-autonow supports the Bun package manager (3.3.1,#12854)TheSvelte CLInow supports a number of add-ons for new and existing projects. You can find the entire list of add ons inthe CLI Repositoryor by runningnpx sv createfrom your command line.The Svelte extension now provides a Svelte 5 component migration command (extensions-109.1.0)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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }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:9 Tools Everyone Should Try20 JavaScript Tricks Every Developer Must Know9 Interesting Open-Source Projects You Should Explore Right Now20 TypeScript Tricks Every Developer Should KnowHow I Built the World's Best NextJS, AI Scheduling App8 open-source tools to build your next AI SaaS appDon'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:SwarmDeskPadThe Internet Archive is under attack, with a breach revealing info for 31 million accountsDrawing Graphics on Apple Vision with the Metal Rendering APIWeb Browser EngineeringSvelte 5 is aliveToday'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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow 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.Web Dev ReposCheck 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.Trending TitlesFeatured: Responsive Web Design with HTML5 and CSSIf 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.Watch the ' Responsive Web Design with HTML5 and CSS' Video Now!Building LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom 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. Web Development TutorialImplementing the login functionality in our appLet’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.Read 'Building Production-Grade Web Applications with Supabase' now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelIntegrate 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 commitTheactive_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 devcontainerJust like the title implies, you can now use Kamal when running Rails in thedevcontainer.Fix enum labels to accept keyword argumentsNow you can define enums without the extra brackets using keyword arguments.Allow renaming enums to accept two from/to positional arguments similar to renaming tablesThis change makes the API forrename_enumto be more consistent withrename_table.Add prefix address when IPAddr of CIDR encoded with JSONIf you’re using IPaddr with CIDR notation, the prefix will now be included when encoding with ActiveSupport::JSON.SvelteKitIntroducing 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{font-size:75%;line-height:0}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }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:17 Must-know React Projects for Developers20 Git Command-Line Tricks Every Developer Should Know10 React One-Liners Every UI Developer Should Know5 Essential HTML and CSS Tricks to Ditch JavaScript8 Tools You Need to Build Your First SaaSDon'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:"It's Your Turn": A Novel Channel Contention Mechanism for Improving Wi-Fi's ReliabilitypayloadRepresentationAlignment for Generation: Training Diffusion Transformers Is Easier1 bug, $50,000+ in bounties, how Zendesk left a backdoor in Fortune 500 companiesElectronic Arts streamlines game patching with AWSUnderstanding the Android Virtualization Framework (AVF)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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow 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!Web Dev ReposCheck 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 componentTrending TitlesBuilding LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom 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. Web Development TutorialImplementing a page to create a new ticketWe’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.Read 'Building Production-Grade Web Applications with Supabase' now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelCheck 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 announcementsThese 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 taskBefore 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.ReactReact 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.SpringSpring 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 configurationSpring 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.SvelteKitSvelteKit 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Notion for StartupsThousands 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 InstructionsTo 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.Free 6-month Access to Notion Plus! Use our Packt Partner Key!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:The Most Annoying Cookie Banner Ever Hackathon21+ Best Free and Open-Source Icon Library for20249 essential open-source libraries to master as an AI developer8 Open-Source Tools to grow your app and reach new markets!Chat with your PDF using Pinata,OpenAI and StreamlitDon'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:Web Visual EditorThe Copenhagen BookLarge language models reduce public knowledge sharing on online Q&A platformsAndroid 16 will include a Terminal and full Linux VM support with GPU accelerationFIDO Alliance Working on Making Passkeys Portable Across PlatformsToday'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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow 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.Web Dev ReposCheck 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.Trending TitlesBuilding LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom 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 Web Development TutorialBuilding the login formLet’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.Reminderapp/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.NoteEven 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!.Read 'Building Production-Grade Web Applications with Supabasebook' now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelThe 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.SvelteSvelteKit 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 componentSparklePostis a demo application that implements interface patterns commonly found in native iOS and Android apps, using modern and performant web development techniquestipexis a customizable rich text editor for SvelteKit; based on TipTapAnd 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }WebDevPro #74:JS concepts for Node developer, npm Vs npx, Icon LibrariesChrome Canary just killed uBlock Origin, Fuzzing-101, Wi-Fi Goes Long Range.Hi ,Welcome to the web app development world with the 74th edition of _webdevpro!In this edition we cover web development community discussions on:10 JavaScript concepts every Node developer must masternpm Vs npx15+ Best Icon Libraries of20249 must-know open-source tools that will make you better than 99% of developersWhy Do Many People Not Recommend Using JWT?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:Chrome Canary just killed uBlock Origin and other Manifest V2 extensionsFuzzing-101TikTok’s parent launched a web scraper that’s gobbling up the world’s online data 25-times faster than OpenAIWi-Fi Goes Long Range on New WiLo ApproachWhat’s New In Python 3.13What's New in Ruby on Rails 8Today's news covers Angular,, Django, 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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Development Community InsightsFellow Dev Discussions on the Internet.10 JavaScript concepts every Node developer must master - JavaScript's multiparadigm nature allows for various programming styles, but it also poses risks like scope and object mutation. The lack of tail-call optimization makes large recursive iterations dangerous, and Node’s single-threaded architecture requires asynchronous code for efficiency. Despite its challenges, following key concepts and best practices in JavaScript can help Node.js developers write scalable and efficient code.npm Vs npx - While they sound similar and are both integral parts of the Node.js ecosystem, they serve different purposes. This post will explore the differences betweennpmandnpx, helping you understand when and why to use each.15+ Best Icon Libraries of2024 - Let's explore some of thebest icon libraries of 2024for designers and developers, which not only offer extensive collections but also make integration and customization easier for bothdevelopers and designers. Many of these icon libraries areeither free or open-source, making them accessible for developers and designers at any level.9 must-know open-source tools that will make you better than 99% of developers - The software development landscape is evolving faster than ever. To stay ahead of the curve, you must arm yourself with tools and technologies built for the future. This article is a curated, must-know list of open-source tools to help you build applications designed to stand the test of time.Why Do Many People Not Recommend Using JWT? - JSON Web Tokens (JWT) have been widely adopted for authentication in web applications, thanks to their simplicity and stateless nature. They allow the transmission of verified information between two parties, often used in login systems. However, despite their popularity, many security experts advise caution when using JWTs, particularly for session management. In this article, we'll dive into the reasons why JWTs have raised concerns, and why many developers recommend alternative approaches.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:🧩 Flyon UI- Open-source components library for Tailwind CSS.🧩TailBlocks- 60+ different ready to use Tailwind CSS blocks.🧩Tailwind Components- Community-driven Tailwind CSS component repository.🧩Tailwind Toolbox- Templates, components and resources.🧩Meraki UI Components- Beautiful Tailwind CSS components that support RTL languages.🧩Tailwind Cards- Growing collection of text/image cards.Trending TitlesBuilding LLM Powered ApplicationsBuy now at $39.99$19.99Building AI Applications with OpenAI APIsBuy now at $31.99 $21.99Mastering NLP from Foundations to LLMsBuy now $42.99$29.99Internet Jibber-JabberRandom curious musings and interesting words about Web Dev on the Internet.Chrome Canary just killed uBlock Origin and other Manifest V2 extensions - Pour one out for the ad-free Chrome browsing experience tonight. Chrome Canary, the pre-beta release version with the most far-out feature set, just reminded us that top extensions like the beloved uBlock Origin are not long for this Earth. The removal of a custom settings flag previously used to enabledeprecated Manifest V2 extensions(like most popular ad blockers) has begun turning out the lights on the user-friendly Chrome party.Fuzzing-101 - Fuzz testing (or fuzzing)is an automated software testing technique that is based on feeding the program with random/mutated input values and monitoring it for exceptions/crashes. Do you want to learn how to fuzz like a real expert, but don't know how to start? If so, this is the course for you! 10 real targets, 10 exercises.Are you able to solve all 10?TikTok’s parent launched a web scraper that’s gobbling up the world’s online data 25-times faster than OpenAI - ByteDance looks like it’s eager to make up for lost time when it comes to scraping the web for data needed to train its generative AI models. The China-based parent company of video app TikTok released its own web crawler or scraper bot, dubbed Bytespider. ByteDance’s bot has quickly become one of the most, if not the single most, aggressive scrapers on the internet, the research shows. It’s scraping data at a rate that’s many multiples of other major companies, such as (Google, Meta,Amazon, OpenAI, and Anthropic, which usetheir own scraper botsto help create and improve their large language or multimodal models, known as LLMs or LMMs.Wi-Fi Goes Long Range on New WiLo Approach - Researchers have developed a hybrid technology that would combine Wi-Fi with theLong Range (LoRa) networking protocol, yielding a new long-distance wireless concept called WiLo. The research team has designed their proposed WiLo tech to be used on existing Wi-Fi and LoRa hardware. The advance may find applications inInternet of Things(IoT) technologies–such as networks of long-range sensors used in agriculture or smart cities.What’s New In Python 3.13 - Python 3.13 is the latest stable release of the Python programming language, with a mix of changes to the language, the implementation and the standard library. The biggest changes include a newinteractive interpreter, experimental support for running in afree-threaded mode(PEP 703), and aJust-In-Time compiler(PEP 744). This article explains the new features in Python 3.13, compared to 3.12. Python 3.13 was released on October 7, 2024. For full details, see thechangelog.What's New in Ruby on Rails 8 - The firstRails 8 betahas officially been released, bringing an exciting set of features, bug fixes, and improvements. Key highlights include an integration with Kamal 2 for hassle-free deployments, the introduction of Propshaft as the new default asset pipeline, and extensive ActiveRecord enhancements. Rails 8 also brings several SQLite integration upgrades that make it a viable option for production use. This blogpost dive into everything that Rails 8 has to offer! Web Development TutorialAccess logic within a routeFirst, we want to have a look at when access logic is implemented as part of a specific route ofyour app.Imagine that you have a text editor app calledtext.myapp, wherein users can write documents and share those documents to be edited by others. Now, imagine a user who wants to save a document with the456ID. This is done with a request totext.myapp/document/456/save. As an example, the following backend code logic shows how the app could make sure that only the owner or people with shared access can savethe document:// route = /document/[id]/saveif (isLoggedIn()) { canSave = false; userId = getUserIdFromLoginSession(); db = getDbConnection(); document = db .select('author').from('documents') .where({id: documentId}); canSave = isEqual(document.author, userId); if (!canSave) { // check if shared, then also eligible to save canSave = db.exists('shared_docs') .whereEquals({ documentId, userId}) } if (canSave) db.update(content).whereEquals({ documentId }); }So, when data (contentin the code sample) is sent to the route for saving a specific document with a specific ID, the first check works out whether the user is logged in, while the second and third checks work out whether the user is either the owner of the document or if someone has shared this document with that user. In both cases, that user is allowed to update the document inthe database.These logic snippets can make the code unreadable pretty quickly. That’s why abstraction into functions such ascanEditDocument(documentId)is a must so that you only have something like this inthe end:// route = /document/[id]/saveif (isLoggedIn()) { canSave = canEditDocument(documentId); if (canSave) db.update(content).whereEquals({ documentId });}With this, all of the checks would be inside the logic ofcanEditDocument. This makes it cleaner but definitely notless work.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!AngularLatest updates to effect() in Angular - Angular’s developer preview process enables us to give developers a chance to try out APIs and features before they are promoted to production, and allows us the flexibility to adjust those APIs in response to real-world usage and feedback. Through this feedback on theeffect() API during its developer preview, we’ve identified several improvements to the design that will address real issues with both functionality and developer experience. Read about changes to the API here.DjangoDjango bugfix release issued: 5.1.2 - The5.1.2bugfix release is here. The release package and checksums are available fromour downloads page, as well as from the Python Package Index.LaravelLaravel 11.27 Released - This week, the Laravel team released v11.27, with a configurable default currency in the Number helper, a Str::doesnt Contain() method, Schema::hasTable() performance improvements, and more.Prism is an AI Package for Laravel - Prism is a powerful Laravel package for integrating Large Language Models (LLMs) into your applications. Using Prism, you can easily use different AI providers using the package's driver pattern, which gives you a unified interface to work with popular AI providers out of the box. Prism has three built-in providers available at the time of writing—Anthropic, Open AI, and Ollama—with the ability to create custom driversPostgreSQLPostgreSQL 17 Released! - ThePostgreSQL Global Development Grouptoday announced the release ofPostgreSQL 17, the latest version of the world's most advanced open source database. This release of PostgreSQLadds significant overall performance gains, including an overhauled memory management implementation for vacuum, optimizations to storage access and improvements for high concurrency workloads, speedups in bulk loading and exports, and query execution improvements for indexes.Ruby on RailsThe first beta of Rails 8 is out! While the release notes are getting ready, have a look at the changes and give it a go.DHH keynote from Rails WorldThe first talk recording from Rails World is up, and David goes over everything that went into Rails 8 and beyond.Drop support to Ruby 3.1Rails 8 will require Ruby 3.2.0 or newer.Add TaggedLogging#logger constructor for more pleasant logging interfaceThis updates the default logger in production to useActiveSupport::TaggedLogging.logger(STDOUT).Make Active Model Serialization “read_attribute_for_serialization” publicSince this method was already mentioned in the public documentation, the team decided it’s worth making it public and document the behavior.Update generated application.css with PropshaftNow that Propshaft is the only asset pipeline, we no longer need these= requiredirectives in the generated application.css file.Revert inferring inverse_of for Delegated typesAutomatically inferring:inverse_ofis incompatible with records that do not declare inverse associations. The team decided to revert this change to unblock the release of Rails 8.SvelteLegacy components can now be manually instantiated asynchronously with thesyncoption (5.0.0-next.237,#12970)Theeachblock is now much better in SSR mode - removing an unnecessary declaration and caching the length of the array before iterating over it (5.0.0-next.242,#13060)A callstack will now appear if an infinite loop is detected - with the last ten effects printed out - in development mode (5.0.0-next.246,#13231)Projects that use@sveltejs/enhanced-imgshould see a much smaller bundle thanks to module variables being inlined into the template (5.0.0-next.246,#13075)There are now a11y warnings for<button>/<a>elements that are missing an aria-label and content (5.0.0-next.250,#13130)Animations now take into accountzoomwhen calculating transforms (5.0.0-next.254,#13317)<svelte:self>is now deprecated in runes mode. It's not necessary since components can now import themselves (5.0.0-next.256,#13333)svelte-check, the CLI is used by almost every Svelte project, is now much smaller (repo,post)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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Experience the easiest File API on the Internet!Add file uploads and retrieval in minutes so you can focus on building your app — because you’ve got better things to code than infrastructure.Try now!WebDevPro #73:Open-source AI repositories, Important React Hooks, Chrome Extensions, New Features in CSS, FlowTracker, Learn Git Branching.Hi ,Welcome to the web app development world with the 73rd edition of _webdevpro!In this edition we cover web development community discussions on:14 Case Studies: Master System Design in a Month8 must-know open-source repositories to build cool AI appsMastering React: A Guide to the Most Important React Hooks21 Chrome Extensions to Boost Your Productivity11 New Features and Functions Arriving in CSSDon'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:Warning: macOS Sequoia 15 may bypass DNS encryptionFlowTrackerLearn Git BranchingAdze: Universal Logging for Modern JavaScriptBan warnings fly as users dare to probe the “thoughts” of OpenAI’s latest modelToday's news covers Laravel, Ruby on Rails, Soring.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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktGrow, Make a Difference, and Win! Participate in the Latest Developer Nation Survey!What changed in the way you code for 2024? What has happened in the tech world in the last months? Take this shorter version of the Developer Nation survey, learn about new tools, influence the future of development and share your insights with the world!Take the Survey!Web Development Community InsightsFellow Dev Discussions on the Internet.14 Case Studies: Master System Design in a Month - Are you looking tomaster system designin record time? The fastest way to accelerate your learning is by studying real-world architectures of companies that handle massive scale and complexity. We've curated 14 essential case studies that reveal the secrets behind some of the world's most efficient and scalable systems. Dive in, and in just one month—or even less—you'll significantly elevate your system design prowess.8 must-know open-source repositories to build cool AI apps - As someone building AI apps, I see a massive spike in user interest, and this is undoubtedly the best time to master building AI apps. So, I have compiled a list of 8 open-source repositories you can use now to build robust AI systems.Mastering React: A Guide to the Most Important React Hooks - React Hooks were added to React in version 16.8, and they’ve completely changed the way we write React apps. Before hooks, we had to use class components to manage state and lifecycle methods, which could make our code complicated, especially in larger apps. Hooks allow us to use functional components to handle things like state, side effects, and performance optimization more easily.21 Chrome Extensions to Boost Your Productivity - As software developers, we always seek ways to make our jobs easier and improve productivity. Chrome extensions are very useful tools when it comes to increasing efficiency and boosting the productivity. In this blog post, I will share some of the best developer Chrome extensions.11 New Features and Functions Arriving in CSS - On September 13, 2024, the CSS Working Group released thefirst Public Working Draft for the CSS Values and Units Module Level 5. It is an extension of theprevious levelthat includes some interesting additions. Things that were unimaginable not so long ago are making their way into the specs: random values, using attributes as values in any property, being able to use the order in calculations... It looks promising. Many of these features have a common denominator: they simplify the CSS code. This blog lists all the new changes.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:📚 Tailkits- Curated Tailwind CSS components, templates, UI kits, resources, tools & more.📚STDF- Mobile web component library based on Svelte and Tailwind CSS.📚TWC - Lightweight library to create reusable React + Tailwind CSS components.📚Tremor- React library to build charts and dashboards with Tailwind CSS.📚Preline UI- Open-source Tailwind CSS components library for any needs.🧩TailBlocks- 60+ different ready to use Tailwind CSS blocks.🧩Tailwind Components- Community-driven Tailwind CSS component repository.Trending TitlesMastering PyTorchBuy now at $41.99$28.99Building Production-Grade Web Applications with SupabaseBuy now at $39.99 $27.99Mastering Python Design PatternsBuy now $31.99$21.99Internet Jibber-JabberRandom curious musings and interesting words about Web Dev on the Internet.Warning: macOS Sequoia 15 may bypass DNS encryption - While investigating a DNS-related issue on macOS 15 Sequoia, we discovered that some DNS requests—particularly those made via certain low-level legacy APIs—were not being received by our proxy! There appears to be a bug in macOS Sequoia causingsomerequests to bypass the installed DNS proxy and be sent unencrypted to the system’s default name server instead.FlowTracker - Track data flowing through Java programs, gain new understanding at a glimpse. FlowTracker is a Java agent that tracks how a program reads, manipulates, and writes data. By watching a program run, it can show what file and network I/O happened, but more importantly connecting its inputs and outputs to show where its output came from. This helps you understand what any Java program's output means and why it wrote it.Learn Git Branching - Interested in learning Git? Well, you've come to the right place! "Learn Git Branching" is the most visual and interactive way to learn Git on the web; you'll be challenged with exciting levels, given step-by-step demonstrations of powerful features, and maybe even have a bit of fun along the way.Adze: Universal Logging for Modern JavaScript - Modern JavaScript frameworks likeNextJS,NuxtJS, andSvelteKitcombine your "back-end" and "front-end" code in the same location.Adze is universalwhich means it can be executed on theserver side or the browser sidewithout any extra considerations. Use it anywhere!Ban warnings fly as users dare to probe the “thoughts” of OpenAI’s latest model - OpenAI truly does not want you to know what its latest AI model is "thinking." Since the companylaunchedits "Strawberry" AI model family last week, touting so-called reasoning abilities with o1-preview and o1-mini, OpenAI has been sending out warning emails and threats of bans to any user who tries to probe how the model works. Web Development TutorialAn excerpt from 'Django 5 by Example'By Antonio MeléCreating templates for the comment formWe will create a template for the comment form that we will use in two places:In the post detail template associated with thepost_detailview to let users publish comments.In the post comment template associated with thepost_commentview to display the form again if there are any form errors.We will create the form template and use the{% include %}template tag to include it in the two other templates.In thetemplates/blog/post/directory, create a newincludes/directory. Add a new file inside this directory and name itcomment_form.html.The file structure should look as follows:templates/blog/post/includes/comment_form.htmldetail.htmllist.htmlshare.htmlEdit the newblog/post/includes/comment_form.htmltemplate and add the following code:<h2>Add a new comment</h2><form action="{% url "blog:post_comment" post.id %}" method="post">{{ form.as_p }}{% csrf_token %}<p><input type="submit" value="Add comment"></p></form>In this template, we build theactionURL of the HTML<form>element dynamically using the{% url %}template tag. We build the URL of thepost_commentview that will process the form. We display the form rendered in paragraphs and we include{% csrf_token %}for CSRF protection because this form will be submitted with thePOSTmethod.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelFetch PHP is a Lightweight HTTP Library Inspired by JavaScript's fetch()nk - Fetch PHPis a lightweight HTTP library inspired by JavaScript's fetch, bringing simplicity and flexibility to PHP HTTP requests. It uses the Guzzle client behind the scenes, offering synchronous and asynchronous requests with an easy-to-use API.Validate Console Command Input With the Command Validator Package - The Command Validator package byAndrea Marco Sartorimakes validating the input of console commands a cinch using Laravel's beloved Validator. All the Laravel Validator rules you know and love work with this package, along with any custom validation rules. This package integrates with your application's console commands using the providedValidatesInputtrait, which includes an abstractrules()method.Laravel 11.24 Released - The Laravel team released v11.24 this week, with new shorthands for Process fakes, anullOnUpdate()method for foreign key definitions, support for retrying multiple batch IDs when retrying jobs, and more. A quick note that as of the time of writing, auto-discovery of console commands in theapp/Console/Commandspath was broken in v11.24.0. This issue was quickly patched inv11.24.1.Ruby on RailsRails World 2024 is next weekSafe travels to everyone heading to Toronto! All sessions will be recorded and published on theRails YouTube channel, so subscribe to get notified.[RF Guides] Active Record ValidationsThe Foundation is still hard at work on updating the guides, this time they have made a pass through the Active Record Validations guide. Give it a look and help them spot any issues!Add ability to use multiple rate limits per controllerWith this PR, you can now add multiplerate_limitdefinitions in your controller.Remove Sucker Punch Active Job adapterSucker Punch existed before ActiveJob, but ultimately uses similar code to the async adapter under the covers. This adapter will be removed in a future release of Rails.Do not include redis by default in dev containerIn Rails 8, newly generated apps will use the Solid gems by default, which do not depend on Redis.Add if_not_exists option to add_enum_valueThis PR adds support to use the PostgreSQL optionIF NOT EXISTSwhen adding enum values viaadd_enum_value.Include options when instrumenting ActiveSupport::Cache::Store deleteNowcache_delete.active_supportandcache_delete_multi.active_supportevents will include the options passed to the delete method.Spring Spring Shell 3.2.8, 3.3.3 and 3.4.0-M2 are now available - Spring Shell3.2.8,3.3.3and3.4.0-M2has been released and are now available from Maven Central andMilestone Reporespectively.Spring Modulith 1.3 M3, 1.2.4, and 1.1.9 released - Spring Modulith 1.3 M3, 1.2.4, and 1.1.9 is here. While the latter two ship the usual bugfixes and service release bugfix upgrades, I am particularly delighted about the milestone releases as it contains two major community contributions.Spring Boot 3.4.0-M3 available now - Spring Boot3.4.0-M3has been released and is now available fromhttps://repo.spring.io/milestone. This release includes111 enhancements, documentation improvements, dependency upgrades, and bug fixes.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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Join Roman Lavrik from Deloitte Snyk hosted DevSecCon 2024Snyk is thrilled to announce DevSecCon 2024, Developing AI Trust Oct 8-9, a FREE virtual summit designed for DevOps, developer and security pros of all levels. Join Roman Lavrik from Deloitte, among many others, and learn some presciptive DevSecOps methods for AI-powered development.Save your Post!WebDevPro #72: Open-Source Python Projects, VS Code Extensions, React Mindset, macOS Sequoia is available, Notes on OpenAI’s new o1 chain-of-thought models.Hi ,Welcome to the web app development world with the 72nd edition of _webdevpro!In this edition we cover web development community discussions on:11 Open-Source Python Projects You Should Know in 202450 Must-Know VS Code Extensions for Faster DevelopmentWhy React Won the Front-End Race13 top open-source tools to ship your apps fasterReact Mindset: How New React Developers Should ThinkDon'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:Scramble: Open-Source Grammarly AlternativeApple Mobile Processors Are Now Made in America. By TSMCCombining the Power of Python and the Flexibility of ExcelmacOS Sequoia is available, bringing iPhone Mirroring, Apple Intelligence to MacNotes on OpenAI’s new o1 chain-of-thought modelsToday's news covers Laravel, Ruby on Rails, Swift and Vue.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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Dev Community SpeakWhat are Web developers discussing? What are the latest tips and tricks? Shortcuts and experiments? Cool tutorials? Releases and updates? Find it all out here.11 Open-Source Python Projects You Should Know in 2024 - Python is one of the easiest programming languages, and it can be used in almost every technical field — whether it's data science, automation, IoT, AI, machine learning, or web development. And the most interesting part of Python is that it’s100% open-source, which makes it even more powerful and dynamic. Yet, most developers overlook Python when building their web applications which limits its potential. In this article, I've covered 11 open-source Python projects that every web developer should keep an eye on.50 Must-Know VS Code Extensions for Faster Development - Are you spending more time tweaking your code than writing it? Do you feel like your VS Code setup could use some superhero-level upgrades? Well, buckle up, because we’re about to zoom through the50 must-know VS Code extensionsthat will skyrocket your productivity and help you code like a pro! Whether you're coding for fun or trying to meet that impossible deadline these extensions are here to make your life easier.Why React Won the Front-End Race - React, the king of front-end frameworks—or should I say "libraries," since React purists will remind you every 10 minutes that it’snota framework. But let's not get caught up in the technicalities. If you're doing any serious front-end development in 2024 and you're not using React, then congratulations, you're a hipster. But for the rest of us mere mortals, React has emerged as the undeniable winner of the front-end race, and here’s why you should love it.13 top open-source tools to ship your apps faster - I have worked with many successful developers from different pre-seed and seed-stage companies. And they all had three reasons for their product's success: Ship fast, get customer feedback, and iterate faster. With that in mind, here is a curated a list of open-source tools you can use to build your products faster.React Mindset: How New React Developers Should Think - React, a popular JavaScript library for building user interfaces, has revolutionized front-end development by enabling developers to create reusable components and manage complex UIs efficiently. However, adopting the right mindset is crucial for new developers to navigate React's unique paradigms. Let’s explore the essential principles and strategies that shape the "React mindset."Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:Svelte Headless UI- Unofficial Svelte port of Headless UI.Xtend UI- Tailwind CSS components with advanced interactions and animations.Headless UI Float- Floating UI integration for Headless UI.Vanilla Components- Set of fully customizable Vue components.Sailboat UI- Modern UI framework for Tailwind CSS.Built At Lightspeed- Massive directory of 500+ Tailwind templates, starters and UI kits.Statichunt- Open source directory of hand-picked free and premium Tailwind templates & Starters.Trending TitlesMastering PyTorchBuy now at $41.99$28.99Building Production-Grade Web Applications with SupabaseBuy now at $39.99 $27.99Mastering Python Design PatternsBuy now $31.99$21.99Internet Jibber-JabberRandom curious musings and interesting words about Mobile Dev on the Internet.Scramble: Open-Source Grammarly Alternative - Scramble is an open-source Chrome extension that leverages AI to enhance your writing directly in your browser. It's designed to be a more customizable and privacy-respecting alternative to Grammarly.Apple Mobile Processors Are Now Made in America. By TSMC - TSMC’s first Arizona chips are now in production, and Apple is ready to be the first cab off the rank with mobile processors made using the foundry’s 5nm process. Apple’s A16 SoC, which first debuted two years ago in theiPhone 14 Pro, is currently being manufactured at Phase 1 of TSMC’s Fab 21 in Arizona in small, but significant, numbers, my sources tell me. Volume will ramp up considerably when the second stage of the Phase 1 fab is completed and production is underway, putting the Arizona project on track to hit itstarget for production in the first-half of 2025.Combining the Power of Python and the Flexibility of Excel - Python in Excel is now generally availablefor Windows users of Microsoft 365 Business and Enterprise. Last August, in partnership with Anaconda,we introducedan exciting new addition to Excel by integrating Python, making it possible to seamlessly combine Python and Excel analytics within the same workbook, no setup required. Since then, we’ve brought the power of popular Python analytics libraries such as pandas, Matplotlib, and NLTK to countless Excel users.macOS Sequoia is available, bringing iPhone Mirroring, Apple Intelligence, and more to Mac - macOS Sequoia, the latest version of the world’s most advanced desktop operating system, is available today as a free software update for Mac. macOS Sequoia brings exciting new features, including iPhone Mirroring, which expands Continuity by enabling access to and control of iPhone directly from macOS; big updates to Safari; a new Passwords app; and more. Starting next month, macOS Sequoia will introduce Apple Intelligence,1the personal intelligence system that combines the power of generative models with personal context to deliver intelligence that is incredibly useful and relevant while protecting users’ privacy and security.Notes on OpenAI’s new o1 chain-of-thought models - OpenAIreleased two major new preview modelstoday:o1-previewando1-mini(that mini one isnot a preview)—previously rumored as having the codename “strawberry”. There’s a lot to understand about these models—they’re not as simple as the next step up from GPT-4o, instead introducing some major trade-offs in terms of cost and performance in exchange for improved “reasoning” capabilities. Web Development TutorialAn excerpt from 'Django 5 by Example'By Antonio MeléCreating forms from modelsWe need to build a form to let users comment on blog posts. Remember that Django has two base classes that can be used to create forms:FormandModelForm. We used theFormclass to allow users to share posts by email. Now, we will useModelFormto take advantage of the existingCommentmodel and build a form dynamically for it.Edit theforms.pyfile of yourblogapplication and add the following lines:from .models import Commentclass CommentForm(forms.ModelForm):class Meta:model = Commentfields = ['name', 'email', 'body']To create a form from a model, we just indicate which model to build the form for in theMetaclass of the form. Django will introspect the model and build the corresponding form dynamically.Each model field type has a corresponding default form field type. The attributes of model fields are taken into account for form validation. By default, Django creates a form field for each field contained in the model. However, we can explicitly tell Django which fields to include in the form using thefieldsattribute or define which fields to exclude using theexcludeattribute. In theCommentFormform, we have explicitly included thename,email, andbodyfields. These are the only fields that will be included in the form.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelTemPHPest PHP Extension for VSCode - TemPHPest is an extension for Visual Studio Code to improve writing PHP in VS Code. Created by Liam Hammett, this package adds rich PHP features that will enhance the experience tremendously while writing PHP.Chaperone, Defer, Cache::flexible, and more are now available in Laravel 11.23 - The Laravel team released v11.23 this week, with the Laracon US 2024 open-source updates likedefer(), concurrency, contextual container attritubes, and more.Ruby on RailsAdd Solid CableThis change starts to useSolid Cableas the default Action Cable adapter in production, configured as a separate queue database inconfig/database.yml. It keeps messages in a table and continuously polls for updates.Deprecate Benchmark.ms and add benchmark to the gemspecRuby plans to makebenchmarka bundled gem. This change sets up deprecation of Rails core extension in favour of the bundled gem for future.Deprecate unsigned_float and unsigned_decimal short-hand column methodsThis change deprecatesunsigned_floatandunsigned_decimalshort-hand column methods.As of MySQL 8.0.17, theUNSIGNEDattribute is deprecated for columns of typeFLOAT,DOUBLE, andDECIMAL. Consider using a simple CHECK constraint instead for such columns. More details can be foundhere.Allow BroadcastLogger to pass through kwargsSome Logger implementations may want extend the logging interface to provide optional information via keyword argument. This change enhancesBroadcastLoggerto allow the same.Fix travel_to to set usec 0 when with_usec is false and the given argument is String or DateTimeBefore this changetravel_todid not setusecto0depending on the argument (StringorDateTime). This PR fixes this behavior to make it uniform.Fix .left_outer_joins when multiple associations have the same childThis change fixes an issue where.left_outer_joinsused with multiple associations that have the same child association but different parents does not join all parents. Previously, using.left_outer_joinswith the same child association would only join one of the parents. After this fix it now correctly joins both parents.SwiftAnnouncing Swift 6 – Swift announced the general availability of Swift 6. This is a major new release that expands Swift to more platforms and domains. Many people know of Swift as a language for app development, with a million apps on the App Store. But Swift is great for more than just apps. Swift’s safety, speed, and approachability make it a great choice for many other use cases including libraries, internet-scale services, and the most performance-critical and secure code. Swift 6 scales even further through new low-level programming features, an embedded Swift language subset, expanded Linux and Windows support, new cross-platform APIs including the new Swift Testing library, and more.VueAnnouncing Vue 3.5 - The release of Vue 3.5 "Tengen Toppa Gurren Lagann" is here! This minor release contains no breaking changes and includes both internal improvements and useful new features. We will cover some highlights in this blog post - for a full list of changes and new features, please consultthe full changelog on GitHub.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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Get your Ticket Now!WebDevPro #71: Frontend Dev + Data Structures & Algorithms, GitHub Repos, Frontend Apps 10x Faster, Chrome extensions, EarthKart, Google Workspace mandates OAuth.Hi ,Welcome to the web app development world with the 71st edition of _webdevpro!In this edition we cover web development community discussions on:Frontend Dev + Data Structures & AlgorithmsGitHub Repos Essential for Every React DeveloperHow to Build Frontend Apps 10x Faster10 Chrome extension to make you 10x web developerProvide context to GitHub Copilot ChatDon'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:A memory layer for personalised AIIsmyblueyourblue?DawarichEarthKart: Google Maps Driving SimulatorDeadline looms: Google Workspace mandates OAuth by September 30Today's news covers Laravel, 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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Dev Community SpeakWhat are Web developers discussing? What are the latest tips and tricks? Shortcuts and experiments? Cool tutorials? Releases and updates? Find it all out here.Frontend Dev + Data Structures & Algorithms - How DSA Can Power Your React App - Frontend focused interviews often don’t care about DSA at all. And for those of us that remember studying DSA at school/college, all the examples felt purely algorithmic (for good reason), but there were hardly any examples or guidance on how the products we use every day leverage this concept. Here are a few data structures that you can leverage in your React app today!GitHub Repos Essential for Every React Developer - React is one of the most used frameworks for building frontend today. With many frameworks of React, more options are taking React to the next level. So, learning React is a must when learning web development especially when you are involved in frontend development. Last year’sStackOverflowsurvey shows that React is the most used web framework for building frontend. This blog looks into some of the essential React-based GitHub repositories that you can look into to learn and improve in React.How to Build Frontend Apps 10x Faster - We have all been there when the backend isn't ready with APIs so the frontend developers manually hardcode the response. It's time consuming and comes with a lot of indirect problems. This article explores how Requestly can help you build frontend applications at least 10x faster by reducing dependency on backend developers.10 Chrome extension to make you 10x web developer - In webdevelopment, having the right tools at your disposal can make a significant difference in your workflow.Chrome extensions have become essential for developers and designers, as they offer everything from debugging aids to design inspiration directly in your browser.Here's a selection of top Chrome extensions that every web developer and designer should consider adding to their toolkit.Provide context to GitHub Copilot Chat - Context is key. This is true across all forms of communication, including with generative AI assistants like GitHub Copilot. When you're interacting with GitHub Copilot Chat, there's numerous features available to you to help point Copilot in the right direction, to help it understand what you're looking for. In turn, the suggestions you'll receive will improve! Let's walk through some of the most powerful techniques to help you get the most out of the tool.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:Tailwind UI- Component library made with Tailwind CSS.Headless UI- Completely unstyled, fully accessible UI components.Catalyst- Beautiful, accessible application UI kit for React.VueTailwind- Vue.js UI library using Tailwind CSS.Flowbite- Open-source component library built with Tailwind CSS.a17t- Atomic design toolkit built to extend Tailwind CSS.tails-ui- React UI library using Tailwind CSS.tails- Hand-crafted templates and components using Tailwind CSS.Internet Jibber-JabberRandom curious musings and interesting words about Mobile Dev on the Internet.A memory layer for personalised AI -Mem0(pronounced as "mem-zero") enhances AI assistants and agents with an intelligent memory layer, enabling personalized AI interactions. Mem0 remembers user preferences, adapts to individual needs, and continuously improves over time, making it ideal for customer support chatbots, AI assistants, and autonomous systems.Ismyblueyourblue? - People have different names for the colors they see.Language can affect how we memorize and name colors. This is a color naming test designed to measure your personal blue-green boundary. Color perception is tricky to measure–vision scientists use specialized calibrated equipment to color perception. Graphic designers use physical color cards, such as thosemade by Pantone, so that they can communicate colors unambiguously. Here we use your monitor or phone to test how you categorize colors, which is far from perfect, since your calibration may differ from mine.Dawarich - Dawarich is a self-hosted web application to replace Google Timeline (aka Google Location History). It allows you to import your location history from Google Maps Timeline and Owntracks, view it on a map and see some statistics, such as the number of countries and cities visited, and distance traveled.EarthKart: Google Maps Driving Simulator - You can Drive on Google Maps! Discover the thrill of racing through the world's most iconic locations right from your device! EarthKart is a real-world driving simulator that combines the speed and excitement of kart racing with the revolutionary integration of Google Maps. Experience the ultimate Google Earth driving simulator as you traverse through the urban jungles of New York, glide along the Great Wall of China, or speed through the winding alleys of Marrakech. The entire Earth is your racetrack in this drive on Google Maps Driving Game!Deadline looms: Google Workspace mandates OAuth by September 30 - Google Workspace administrators, consider yourselves on notice: In less than a month, many third-party apps (mail, calendar, etc.) will stop connecting to Workspace accounts. The change, effective September 30, will see Google disable access to "less secure apps," or LSAs, for all Google Workspace accounts. Those who haven't checked their Workspace Admin consoles recently will notice that LSA settings have already been removed, so there's no avoiding this change. Web Development TutorialAn excerpt from 'Django 5 by Example'By Antonio MeléCreating forms with DjangoLet’s start by building the form to share posts. Django has a built-in forms framework that allows you to create forms easily. The forms framework makes it simple to define the fields of the form, specify how they have to be displayed, and indicate how they have to validate input data. The Django forms framework offers a flexible way to render forms in HTML and handle data.Django comes with two base classes to build forms:1. Form: This allows you to build standard forms by defining fields and validations.2. ModelForm: This allows you to build forms tied to model instances. It provides all the functionalities of the baseFormclass, but form fields can be explicitly declared, or automatically generated, from model fields. The form can be used to create or edit model instances.First, create aforms.pyfile inside the directory of yourblogapplication and add the following code to it:from django import formsclass EmailPostForm(forms.Form):name = forms.CharField(max_length=25)email = forms.EmailField()to = forms.EmailField()comments = forms.CharField(required=False,widget=forms.Textarea)We have defined our first Django form. TheEmailPostFormform inherits from the baseForm class. We use different field types to validate data accordingly...read more.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!LaravelUnoPim is a Product Information Management System Built With Laravel - UnoPim is an open-source Product Information Management (PIM) system built on the Laravel framework. You can use it to organize, manage, and enrich product information in one central place.SpringSpring Tools 4.25.0 released - The 4.25.0 release of the Spring Tools 4 for Visual Studio Code, Eclipse and Theia. Important highlights include:(Spring Boot)Code lenses added to explain SPEL expressions and AOP annotations with Copilot (VSCode only)(Spring Boot)Symbols, content-assist, and navigation support added for@Named,@Resource,@Inject, and@ConditionalOnResource(Spring Boot)Syntax highlighting and validation for CRON expressions inside@Scheduledannotation (VSCode only)(Spring Boot)Navigating to definition for some elements of Data Queries embedded into@QueryannotationsSvelteLibraries, Tools & ComponentsThis gooey tooltipis fluid and satisfyingselect-kitis a one-stop solution for all your select/combobox/autocomplete needsssgoiis a page transition library thats support animated page transition with every browser - including Safari@svelte-put/preactionis a proof-of-concept Svelte preprocessor that allows usage of "preaction" - an extension to Svelte action with the ability to add static attributes on server-sidesvelte-standaloneis a series of configurations that aims to process any svelte widget to a single standalone javascript filesvelte-cartesianis a single component that helps with rendering all prop combinations of a provided component for visual regression testingTrending Titles50 Algorithms Every Programmer Should KnowBuy now at $39.99$27.98Modern Generative AI with ChatGPT and OpenAI ModelsBuy now at $39.99 $27.98Learn React with TypeScriptBuy now $35.99$24.99And 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }

Web development blogs, tutorials and resources inside!Advertise with Us|Sign Up to the Newsletter @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }Developing for iOS? Setapp's 2024 report on the state of the iOS market in the EU is a must-seeHow do users in the EU find apps? What's the main source of information about new apps? Would users install your app from a third-party app marketplace?Set yourself up for success with these and more valuable marketing insights in Setapp Mobile's report iOS Market Insights for EU.Get Insights FreeWebDevPro #70: Web Storage,Frontend Resources V2, React FrameworksComparison, Window Size in Pure CSS, Claude for Enterprise, TinyGPT.Hi ,Welcome to the web app development world with the 70th edition of _webdevpro!In this edition we cover web development community discussions on:Understanding Web Storage: LocalStorage, SessionStorage, and CookiesFrontend Resources V29 open-source gems to become the ultimate developerComparing The Top React FrameworksGet Window Size in Pure CSSDon'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:CSS @property and the New StyleAnnouncing The Kagi AssistantClaude for EnterpriseBuilding LLMs from the Ground Up: A 3-hour Coding WorkshopTinyGPTThe web's clipboard, and how it stores data of different typesMajor book publishers defeat Internet Archive appeal over digital scanningToday's news covers Angular, Django, 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.Take the Survey Now!Thanks,Apurva KadamEditor-in-Chief, PacktWeb Dev Community SpeakWhat are Web developers discussing? What are the latest tips and tricks? Shortcuts and experiments? Cool tutorials? Releases and updates? Find it all out here.Understanding Web Storage: LocalStorage, SessionStorage, and Cookies - In modern web development, managing data on the client side has become an essential skill. Developers often rely on localStorage, sessionStorage, and cookies to store data in the user’s browser. While these three mechanisms serve similar purposes, they have distinct differences in terms of capacity, persistence, and use cases. In this blog, we'll explore these differences, with examples, to help you better understand when and how to use each one.Frontend Resources V2 - This collection is packed with a wide range of tools that cover everything from building stunning user interfaces to fine-tuning performance and much more. These resources have been invaluable. Hoping they’ll be just as useful for you.9 open-source gems to become the ultimate developer - For me, AI is everywhere.But sometimes, it's hard to understand what a fun project is and what project you can use for your website. I have curated a list of 9 open-source repositories you can implement into your repository tomorrow!Comparing The Top React Frameworks - When learning React, we all start with the CRA (create-react-app) library. It is a good place to begin the journey of React but using it for building a project today is not a good idea. There are many reasons to switch from traditional CRA to the modern framework of React, which can offer many more features. There are various alternatives based on your requirements such as SSR, performance, etc. In this blog, we are going to investigate some of the top alternatives that you can use instead of CRA.Get Window Size in Pure CSS - We all know that CSS used to be the most challenging part of web development. However, it has become even harder nowadays. You wouldn't believe it, but now CSS can define properties, do the math, and even directly get the window size! This article will show you how to do it.Web Dev ReposCheck this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind CSS tools:Tailwind Grid Generator- Drag and drop Tailwind CSS grid generator.Tailwind Box Shadows Generator- Box Shadows generator.Windframe- Tailwind CSS drag and drop builder to rapidly build and prototype websites.Static Tailwind- The most used Tailwind classes, precompiled, with no build step.Design GUI- AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.Internet Jibber-JabberRandom curious musings and interesting words about Mobile Dev on the Internet.CSS @property and the New Style - The@propertyat-rule recently gained support across all modern browsers, unlocking the ability to explicitly define a syntax, initial value, and inheritance for CSS custom properties. It seems like forever ago that CSS Houdini and itsCSS Properties and Values APIwere initially introduced. The ensuing demo explores what's possible in the next generation of CSS.Announcing The Kagi Assistant - Kagihas been thoughtfully integrating AI into our search experience, creating a smarter, faster, and more intuitive search. This includesQuick Answerwhich delivers knowledge instantly for many searches (can be activated by appending ? to the end of your searches),Summarize Pagefor the quick highlights of a web page, and even the ability toask questions about a web pagein your search results. And all of these features are on-demand and ready when you need them. Today we’re excited to unveil the Assistant by Kagi. A user-friendly Assistant that has everything you want and none of the things you don’t (such as user data harvesting, ads & tracking). Major features included in this blog.Claude for Enterprise - TheClaude Enterprise planto help organizations securely collaborate with Claude using internal knowledge is here. Teams with more context do better work. The Claude Enterprise plan offers an expanded 500K context window, more usage capacity, and a native GitHub integration so you can work on entire codebases with Claude. It also includes enterprise-grade security features—like SSO, role-based permissions, and admin tooling—that help protect your data and team.Building LLMs from the Ground Up: A 3-hour Coding Workshop - If you’d like to spend a few hours this weekend to dive into Large Language Models (LLMs) and understand how they work, I've prepared a 3-hour coding workshop presentation on implementing, training, and using LLMs.TinyGPT - TinyGPT is a minimalistic library for implementing, training, and performing inference on GPT models from scratch in Python, with no external dependencies. Inspired byNanoGPT,Tinygrad,Pytorch, andMLX, TinyGPT aims to be as educational as possible, avoiding complex optimizations that might obscure the underlying concepts.The web's clipboard, and how it stores data of different types - If you've been using computers for a while, you probably know that the clipboard can store multiple types of data (images, rich text content, files, and so on). As a software developer, it started frustrating me that I didn't have a good understanding of how the clipboard stores and organizes data of different types. I recently decided to unveil the mystery that is the clipboard and wrote this post using my learnings. We'll focus on the web clipboard and its APIs, though we'll also touch on how it interacts with operating system clipboards.Major book publishers defeat Internet Archive appeal over digital scanning - A U.S. appeals court sided with four major book publishers that accused the nonprofit Internet Archive of illegally scanning copyrighted works and lending them to the public online for free and without permission. The 2nd U.S. Circuit Court of Appeals in Manhattan agreed with Hachette Book Group, HarperCollins Publishers, John Wiley & Sons and Penguin Random House that the archive's "large scale" copying and distribution of entire books did not amount to "fair use." Web Development TutorialAn excerpt from 'Django 5 by Example'By Antonio MeléUsing a class-based view to list postsTo understand how to write class-based views, we will create a new class-based view that is equivalent to thepost_listview. We will create a class that will inherit from the genericListViewview offered by Django.ListViewallows you to list any type of object.Edit theviews.pyfile of theblogapplication and add the following code to it:from django.views.generic import ListView class PostListView(ListView): """ Alternative post list view """ queryset = Post.published.all() context_object_name = 'posts' paginate_by = 3 template_name = 'blog/post/list.html'ThePostListViewview is analogous to thepost_listview we built previously. We have implemented a class-based view that inherits from theListViewclass. We have defined a view with the following attributes:We usequerysetto use a custom QuerySet instead of retrieving all objects. Instead of defining aquerysetattribute, we could have specifiedmodel = Postand Django would have built the genericPost.objects.all()QuerySet for us.We use the context variablepostsfor the query results. The default variable isobject_listif you don’t specify anycontext_object_name.We define the pagination of results withpaginate_by, returning three objects per page.We use a custom template to render the page withtemplate_name. If you don’t set a default template,ListViewwill useblog/post_list.htmlby default.Now, edit theurls.pyfile of theblogapplication, comment the precedingpost_listURL pattern, and add a new URL pattern using thePostListView class.Read the 'Django 5 by Example' book now!What's Happening in Web Development?Your dose of the latest releases, news and happenings in the Web Development industry!AngularThe future is standalone! - Angular v19 will makestandalone: truethe default for components, directives, and pipes. In v14 we introduced a developer preview“standalone” feature, which made it possible for the first time to build an application that didn’t rely on NgModules. Since then, standalone has been stabilized, and has become the recommended way to write Angular code by the Angular team. The CLI generates components withstandalone: trueby default, and the Angular docs teach standalone first to all new Angular developers.DjangoDjango security releases issued: 5.1.1, 5.0.9, and 4.2.16 - In accordance withour security release policy, the Django team is issuing releases forDjango 5.1.1,Django 5.0.9, andDjango 4.2.16. CVE-2024-45230: Potential denial-of-service vulnerability indjango.utils.html.urlize(). urlizeandurlizetruncwere subject to a potential denial-of-service attack via very large inputs with a specific sequence of characters.LaravelChaperone Eloquent Models in Laravel 11.22 - The Laravel team released v11.22 this week, with thechaperone()Eloquent method for inverse relations, support for passing backed Enums to Queuable methods, the ability to pass backed Enums to route->name()and->domain()methods, and more.PostgreSQLPostgreSQL 17 RC1 Released! - The PostgreSQL Global Development Group announces that the first release candidate of PostgreSQL 17 is now available for download. As a release candidate, PostgreSQL 17 RC 1 will be mostly identical to the initial release of PostgreSQL 17, though some more fixes may be applied prior to the general availability of PostgreSQL 17.Ruby on RailsAdd Solid CacheSolid Cache will be the new default caching backend for production deployments out of the box in Rails 8.Add Solid QueueConfigure Solid Queue as the default Active Job backend alongside Solid Cache. Both can be skipped with--skip-solid.Allow registering test directories for code statisticsMake it easier for third party gems, to register test directories.Silence healthcheck requests from the logAddRails::Rack::SilenceRequestmiddleware and use it viaconfig.silence_healthcheck_path = pathto silence requests to “/up”. This prevents the Kamal-required healthchecks from clogging up the production logs.Fix authentication generator double signaturePreviously the session id stored in the cookies was signed twice: withcookies.signedandsession.signed_id.Update TimeWithZone inspect to match Ruby 1.9+ ISO 8601 formatThis updatesTimeWithZone#inspectto match the ISO 8601 style time which Ruby has used forTime#inspectsince 1.9+. This makes TimeWithZone match Time’s formatting except for the precision in the timestamp and including the zone’s name. This only impacts#inspectmethod, as#to_shad already been updated to use the new ISO 8601 style formatting.Update Rails Routing GuideReviewed version can be read onEdge Guides.Update Active Record Associations GuideReviewed version can be read onEdge Guides.SvelteWhat's new in Svelte and Language Tools$state.frozenhas been replaced with$state.raw(5.0.0-next.218,Docs,#12808)$state.ishas been removed. RIP, little guy (#12916)svelte:optionsnow lets you set thecss: "inject"compiler option on a per-component basis (5.0.0-next.209,#12660)<svelte:component>is now unnecessary in runes mode and therefore is deprecated (5.0.0-next.203/217,#12646and#12694):globalis now allowed in more places - making it easier to use in<style>tags and fixing issues with Tailwind's@apply(5.0.0-next.199,Docs,#12560)Svelte's typescript definition generator that comes with@sveltejs/packagewill now warn when its diagnostics detect that ad.tsfile was not generated (svelte2tsx@0.7.14,#2428)You can now specify a tsconfig inemitDts- helpful when working in a monorepo (svelte2tsx@0.7.16,#2454)VueJSAnnouncing Vue 3.5 - Today we are excited to announce the release of Vue 3.5 "Tengen Toppa Gurren Lagann"! This minor release contains no breaking changes and includes both internal improvements and useful new features. We will cover some highlights in this blog post - for a full list of changes and new features, please consultthe full changelog on GitHub.Trending TitlesBuilding LLM Powered Applications$39.99$27.98CompTIA Security+ SY0-701 Certification GuidePrint $44.99Django 5 By Example$39.99 $27.98And 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! *{box-sizing:border-box}body{margin:0;padding:0}a[x-apple-data-detectors]{color:inherit!important;text-decoration:inherit!important}#MessageViewBody a{color:inherit;text-decoration:none}p{line-height:inherit}.desktop_hide,.desktop_hide table{mso-hide:all;display:none;max-height:0;overflow:hidden}.image_block img+div{display:none}sub,sup{line-height:0;font-size:75%}#converted-body .list_block ol,#converted-body .list_block ul,.body [class~=x_list_block] ol,.body [class~=x_list_block] ul,u+.body .list_block ol,u+.body .list_block ul{padding-left:20px} @media (max-width: 100%;display:block}.mobile_hide{min-height:0;max-height:0;max-width: 100%;overflow:hidden;font-size:0}.desktop_hide,.desktop_hide table{display:table!important;max-height:none!important}} @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} } @media only screen and (max-width: 100%;} #pad-desktop {display: none !important;} }