Advertise with Us|Sign Up to the Newsletter

Developing for iOS? Setapp's 2024 report on the state of the iOS market in the EU is a must-see

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

WebDevPro #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:

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

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

Today's news covers 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.

Thanks,
Apurva Kadam
Editor-in-Chief, Packt

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

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

Random 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."

An excerpt from 'Django 5 by Example'By Antonio Melé

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

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

Angular

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

Django

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

Laravel

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

PostgreSQL

PostgreSQL 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 Rails

Add Solid Cache
Solid Cache will be the new default caching backend for production deployments out of the box in Rails 8.

Add Solid Queue
Configure Solid Queue as the default Active Job backend alongside Solid Cache. Both can be skipped with--skip-solid.

Allow registering test directories for code statistics
Make it easier for third party gems, to register test directories.

Silence healthcheck requests from the log
AddRails::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 signature
Previously the session id stored in the cookies was signed twice: withcookies.signedandsession.signed_id.

Update TimeWithZone inspect to match Ruby 1.9+ ISO 8601 format
This 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 Guide
Reviewed version can be read onEdge Guides.

Update Active Record Associations Guide
Reviewed version can be read onEdge Guides.

Svelte

What'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)

VueJS

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

Building LLM Powered Applications

CompTIA Security+ SY0-701 Certification Guide

Django 5 By Example

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!