Advertise with Us|Sign Up to the Newsletter

Cut your QA cycles down from hours to minutes with QA Wolf

If 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.

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:

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 webdev ecosystem:

Today'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.

Thanks,
Apurva Kadam
Editor-in-Chief, Packt

Fellow 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.

Check 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.

Featured: Responsive Web Design with HTML5 and CSS

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

Building LLM Powered Applications

Building AI Applications with OpenAI APIs

Mastering NLP from Foundations to LLMs

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

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

Using a class-based view to list posts

To 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.

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

Angular

Meet 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.

Laravel

Asymmetric 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.

PostgreSQL

PostgreSQL 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 module
This 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” event
Therecently 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 value
In#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 records
There 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 count
When 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 statements
If 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.

SvelteKit

Snippets 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!