WebDevPro #35: Web Projects 2024, Python GitHub Repos, Epic wins against Google, Apple’s spatial video, ChatGPT “winter break hypothesis”.
Advertise with Us | Sign Up to the Newsletter
December 14, 2023
Hi <<First Name>>,
Welcome to the _webdevpro! Your one stop for all things Web Dev! Winter break is almost here! Web Dev wishes all our readers a delightful holiday season!
We start today’s issue with community discussions on:
In our tutorial, we cover Initializing the state using properties from the book React 18 Design Patterns and Best Practices to help articulate your coding. Don't miss repository of manually curated collection of resources for frontend web developers.
Our relatively new section captures internet jibber-jabber about topics in the web ecosystem:
Epic win: Jury decides Google has illegal monopoly in app store fight
As ChatGPT gets “lazy,” people test “winter break hypothesis” as the cause
Today's news covers Angular, Laravel and Svelte.
If you liked this installment, fill in our survey below and win a free Packt PDF.
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
WebDev Community Speak
What is the WebDev industry talking about? Latest Developments? Cool tricks? Tutorials? Cheatsheets? How are Web Developers upskilling? Read about it all here.
23 Open-Source libraries to launch your portfolio - Contributing to a great open-source library is a great way to establish a portfolio. Here is a compilation of 23 great open-source libraries and some good first issues to get started with. Check them all out now!
Top 12 libraries for your NextJS project – If your aim as a Web Developer is to make your tools be more productive, have fewer bugs and write less code then you have come to right place! This article curates a list of libraries to help you develop great NextJS stuff that I am using daily with an explanation of what you can do with them. Let's dig in.
25 Web Development Projects You Must Work On 2024 - One of the most effective ways to master web development is through hands-on practice. While studying theoretical concepts is essential, applying your knowledge to real-world projects is what truly solidifies your skills. Whether you're a beginner looking to build a strong foundation or an experienced developer seeking new challenges, here are 25 web development projects to sharpen your abilities.
Top 5 Killer Websites for Developers - This blog covers top 5 amazing websites that are helpful in your project development and save your valuable time. Full list here!
10 GitHub Repos to Improve as a Backend Engineer - This blog contains a curated list of resources, tools, and frameworks for backend development. It covers a wide range of topics, including databases, APIs, serverless architecture, and more. This post will cover 10 GitHub Repositories that will help you to become a better Backend developer.
The Pipeline Repos Showdown: Python Edition - In the data engineering and automation ever-evolving landscape, Python has seen several workflow orchestrators emerge. This article covers 6 Python libraries and some of their main features. Read them here!
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you manually curated collection of drop-in UI components for web sites and applications for frontend web developers:
Automated Testing: Automated software testing is a process in which software tools execute pre-scripted tests on a software application before it is released into production.
Build Tools: Toolkits and their ecosystems, that help you automate painful and repeated tasks.
CSS Tools: Tools for analysis, pre and post processing of CSS files.
Code Editors: Text editor programs designed specifically for editing source code of a website.
Documentation: Writing, generating, publishing and consuming documentation for web deliverables.
Fonts for Programmers: Programmers need special fonts, which help align the code and distinguish between characters, that look alike.
Getting Started: Step by step guides for setting up a frontend development workflow.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
Epic win: Jury decides Google has illegal monopoly in app store fight - Three years after Fortnite-maker Epic Games sued Apple and Google for allegedly running illegal app store monopolies, Epic has a win. The jury in Epic v. Google has just delivered its verdict — and it found that Google turned its Google Play app store and Google Play Billing service into an illegal monopoly.
Apple introduces spatial video capture on iPhone 15 Pro - With iOS 17.2, iPhone15 Pro and iPhone 15 Pro Max users can now record spatial videos — a groundbreaking new capability that helps users capture life’s precious moments— and relive those memories on Apple Vision Pro, starting early next year.
QR codes are for losers - QR codes are the Russian roulette of getting where you need to go online, and scanning one is the equivalent of plunging your hand into a lucky dip jar and hoping it doesn't come out with a venomous snake attached. If that isn’t enough reason to detest them then this article will give you many more!
Web Components Aren't Framework Components - Web components are awesome. In fact, I wouldn’t hesitate to call them one of the coolest, most interesting features added to the web standards in a very long time. And yet, they’re generally overlooked, underused, and ignored by most web developers. So, what makes them so great in the first place, and why don’t they get the attention they deserve? Find out!
As ChatGPT gets “lazy,” people test “winter break hypothesis” as the cause - In late November, some ChatGPT users began to notice that ChatGPT-4 was becoming more "lazy," reportedly refusing to do some tasks or returning simplified results. Since then, OpenAI has admitted that it's an issue, but the company isn't sure why. The answer may be what some are calling "winter break hypothesis." While unproven, the fact that AI researchers are taking it seriously shows how weird the world of AI language models has become.
WebDev DIY Tutorial
Initializing the state using properties
In this section, we will see how initializing the state using properties received from the parent is usually an anti-pattern. I have used the word usually because, as we will see, once we have it clear in our mind what the problems with this approach are, we might still decide to use it.
One of the best ways to learn something is by looking at the code, so we will start by creating a simple component with a + button to increment a counter.
Let’s create a functional component named Counter, as shown in the following code snippet:
import { FC, useState } from 'react'
type Props = {
count: number
}
const Counter: FC<Props> = (props) => {}
export default Counter
Now, let’s set our count state:
const [state, setState] = useState<number>(props.count)
The implementation of the click handler is straightforward – we just add 1 to the current count value and store the resulting value back in the state:
const handleClick = () => {
setState({ count: state.count + 1 })
}
Finally, we render and describe the output, which is composed of the current value of the count state and the button to increment it:
return (
<div>
{state.count}
<button onClick={handleClick}>+</button>
</div>
)
Now, let’s render this component, passing 1 as the count property:
<Counter count={1} />
It works as expected – each click on the + button increments the current value. So, what’s the problem?
There are two main errors, which are outlined as follows..read more.
Read the free chapter from 'React 18 Design Patterns and Best Practices' now!
What's Happening in Web Dev?
Your dose of the latest releases, news and happenings in the Web Development industry!
Angular
Checkout Angular’s support for the View Transitions API - When a user navigates from one route to another, the Angular Router maps the URL path to the relevant component and displays its view. Animating this route transition can greatly enhance the user experience. In version 17, the Router now has support for the View Transitions API when navigating between routes inChrome/Chromium browsers.
Laravel
Laravel 10.37 Released - This week, the Laravel team released v10.37 with the ability to store batch meta data in DynamoDB, assert multiple errors on a field, and more. Here is a bit more info about the new features introduced this week:
Manage Virtual Wallets in Laravel with Pay Pocket - The Pay Pocket package for Laravel offers payment capabilities and logging. It does not handle payments from payment platforms, but instead offers the concept of virtual money.
PostgreSQL
Updates on trademark actions against the PostgreSQL community - On November 17, 2023, the PostgreSQL Community Association, PostgreSQL Europe, and Fundación PostgreSQL reached a settlement on all outstanding trademark issues. Fundación PostgreSQL has surrendered all trademarks and entered into a trademark license with the PostgreSQL Community Association.
Svelte
What’s New in SvelteKit - Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta, Prettier 3 and prettier-plugin-svelte 3are now the default versions when creating new SvelteKit projects, and nodejs20.xis now supported via the Vercel adapter. For a complete list of bug fixes and performance updates, check out the SvelteKitCHANGELOG.
See you next week!
The _webdevpro team will be on winter break for the rest of December. We will come back with the next issue in the first week of the New Year! Happy Holidays!
Copyright (C) 2023 Packt Publishing. All rights reserved.
As a GDPR-compliant company, we want you to know why you’re getting this email. The _webdevpro team, as a part of Packt Publishing, believes that you have a legitimate interest in our newsletter and the products associated with it. Our research shows that you, <<Email Address>> , opted-in for communication with Packt Publishing in the past and we think that your previous interest warrants our appropriate communication. If you do not feel that you should have received this or are no longer interested in _webdevpro, you can opt out of our emails by unsubscribing here.
Our mailing address is:
Want to change how you receive these emails?
You can update your preferences or unsubscribe