WebDevPro #34: GitHub Repositories, RFCs, AI Libraries, Google’s Code Reviewer, Rust Misconceptions, JavaScript frameworks, HTML UX attributes.
Advertise with Us | Sign Up to the Newsletter
December 7, 2023
Hi <<First Name>>,
Welcome to the _webdevpro! Your one stop for all things Web Dev!
We start today’s issue with community discussions on:
In our tutorial, we cover Implementing styled-components 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:
Asking ChatGPT to Repeat Words ‘Forever’ Is Now a Terms of Service Violation
Let’s learn how modern JavaScript frameworks work by building one
5 HTML attributes for improved accessibility and user experience
Today's news covers Angular, Django, Laravel, NodeJS 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.
19 GitHub Repositories Every Developer Should Bookmark - GitHub offers a treasure trove of valuable repositories that can significantly enhance your development skills and expertise. I've compiled a list of 19 GitHub repositories that every developer should be aware of, providing a rich source for learning, practicing, and inspiration. Each repository is divided into subcategories for easier navigation. I've also included direct links and descriptions to get the impression right away.
Shortcut to Find Open-Source Projects 100x faster - In a world where we are more connected than ever, being a part of an open-source community can be the key to unlocking new opportunities and achieving personal growth. It's an opportunity to make a difference without needing a job, leaving an impact on millions of users. Most people struggle with how to find good open-source projects. This article provides numerous options tailored to be a perfect fit for you.
The art of writing RFCs - RFC stands for Request for Comments, and simply means “a document proposing a codebase change to solve a specific problem.”. Its main purpose is to find the best way to solve a problem before the implementation starts. RFCs help clearly express your thoughts, formulate the problem, and objectively analyse the possible solutions, with feedback from the team, is what will help you develop the right thing, which is the ultimate productivity hack. This is how you become a truly 10x engineer.
7 AI Libraries Every Dev Needs to Know - These days, any dev can build powerful things with AI. No need to be a ML expert. Here are the 7 best libraries you can use to supercharge your development and to impress users with state-of-the-art AI features. These can give your project magical powers.
5 Pro Tips for an Unbeatable GitHub README! - The README is the first touch point with anyone new to your repo. A well-developed README can inform, engage, and invite participation. This is particularly useful when you’re launching a new projector at times where it is critical that developers engage with your repo.
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:
Buttons: The term button refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.
Code: Code viewers and editors designed for embedding inside a website.
Forms: A HTML form on a web page allows a user to enter data that is sent to a server for processing. Web users fill out the forms using checkboxes, radio buttons, or text fields.
Galeries & Image Sliders: A sophisticated way to present a collection of images on your website.
Grid: CSS Grid Layout Systems.
Rich Text Editors: A rich text editor is the interface for editing rich text within web browsers. The aim is to reduce the effort for users trying to express their formatting directly as valid HTML markup.
Table Of Contents: Components for automatic table of contents generation.
UI Kits: Collections of ready to use components.
Video & Audio: Components for playing audio and video files on a website.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
How Google Takes the Pain Out of Code Reviews - 97% of Google software engineers are satisfied with Critique – the company’s internal code review tool. But what is Critique exactly and what makes it so good? How does this pair with Google’s actual process of code review? This article dives into Google’s guidelines for efficient code review, Critique - their code review tooling, and AI-powered improvements, Internal statistics on Google code reviews, and Why Critique seems to be so loved by Googlers.
Asking ChatGPT to Repeat Words ‘Forever’ Is Now a Terms of Service Violation - Google DeepMind researchers used the tactic to get ChatGPT to repeat portions of its training data, revealing sensitive privately identifiable information (PII) of normal people and highlighting that ChatGPT is trained on randomly scraped content from all over the internet.
Common Rust Lifetime Misconceptions - You must have held all of these misconceptions at some point and many beginners struggle with these misconceptions today. Some of the terminology might be non-standard, so here's a table of shorthand phrases and their meaning.
MakeMake - MakeMake is a tool for generating and running make files from C code. It does so by parsing the .c and .h files in the same directory as a starting file (usually the C file containing main) and determines recursively what files are required to build the project. makemake does this by looking for any function declaration using extern, and the searches for the corresponding function definition.
Let’s learn how modern JavaScript frameworks work by building one - One of the best ways to learn how something works, though, is to build it yourself. And plus, we gotta keep those “days since last JavaScript framework” memes going. So let’s write our own modern JavaScript framework!
5 HTML attributes for improved accessibility and user experience - This blogpost guides you through five HTML attributes that not only improve accessibility but also enhance the overall user experience. Whether you are an experienced developer or just starting, let's explore the potential of these elements to create a more inclusive web experience.
WebDev DIY Tutorial
Implementing styled-components
There is a library that is very promising because it takes into account all the problems other libraries have encountered in styling components. Different paths have been followed for writing CSS in JavaScript, and many solutions have been tried, so now the time is ripe for a library that takes all the learning and then builds something on top of it.
The library is conceived and maintained by two popular developers in the JavaScript community: Glenn Maddern and Max Stoiber. It represents a very modern approach to the problem, and it uses the edge features of ES2015 and some advanced techniques that have been applied to React to provide a complete solution for styling.
Let’s look at how it is possible to create the same button we saw in the previous sections and check whether all the CSS features we are interested in (for example, pseudo-classes and media queries) work with styled-components.
First, we have to install the library by running the following command:
npm install styled-components
Once the library is installed, we have to import it inside our component’s file:
import styled from 'styled-components'
At that point, we can use the styled function to create any element by using styled.elementName, where elementName can be a div, a button, or any other valid DOM element.
The second thing to do is to define the style of the element we are creating and, to do so, we use an ES6 feature called tagged template literals, which is a way of passing template strings to a function without them being interpolated beforehand.
This means that the function receives the actual template with all the JavaScript expressions, and this makes the library able to use the full power of JavaScript to apply the styles to the elements.
Let’s start by creating a simple button with a basic styling:
const Button = styled.button
backgroundColor: #ff0000;
width: 320px;
padding: 20px;
borderRadius: 5px;
border: none;
outline: none;
`;
This kind-of-weird syntax returns a proper React component called Button, which renders a button element and applies...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
Use Angular’s New Deferrable Views Now - The Angular community has asked for an intuitive, built-in method to lazy load components, directives, and pipes. In Angular v17, we’ve created Deferrable Views, a new feature that will make the process of defer loading dependencies significantly more intuitive.
Django
Django 5.0 released – The release of Django 5.0 was announced. The release notes cover a deluge of exciting new features in detail, but a few highlights are database-computed default values, generated model field and simplify form field rendering.
Django bugfix release: 4.2.8 - Today we've issued the 4.2.8 bugfix release. The release package and check sums are available from our downloads page, as well as from the Python Package Index.
Laravel
Use Ollama LLM Models Locally with Laravel - The Ollama Laravel package provides seamless integration with the Ollama API. Access the powerful Meta LLaMA:A foundational, 65-billion-parameter language model locally and interface with it using Laravel. You can access various models such as llama2, openchat, starcoder (code generation model trained on 80+ languages), sqlcoder, and other models trained in medical, psychology, and more.
NodeJS
Node v21.4.0 (Current) – This latest release from NodeJS fixes a regression introduced in v21.3.0 that caused the fs.write FileSync method to throw when called with 'utf8' encoding, no flag option, and if the target file didn't exist yet.
Svelte
What's new in Svelte (5.0 Preview!) - Svelte 5 preview is now available at svelte@next while Svelte 4's current version (@latest) is 4.2.7. Read about all the changes here!
See you next week!
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