Advertise with Us|Sign Up to the Newsletter

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:

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

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

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

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.

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.

Check this space for new repos, projects and tools each week! This week we bring you a collection of Tailwind UI Libraries, Components & Templates:

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

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

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

Creating forms with Django

Let’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 forms

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

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

Laravel

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

Spring

Spring 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@Queryannotations

Svelte

Libraries, Tools & Components

This gooey tooltipis fluid and satisfying

select-kitis a one-stop solution for all your select/combobox/autocomplete needs

ssgoiis 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-side

svelte-standaloneis a series of configurations that aims to process any svelte widget to a single standalone javascript file

svelte-cartesianis a single component that helps with rendering all prop combinations of a provided component for visual regression testing

50 Algorithms Every Programmer Should Know

Modern Generative AI with ChatGPT and OpenAI Models

Learn React with TypeScript

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!