WebDevPro #31: React Design Patterns, Linux Shell Scripting, AI-product integrations, Ruby on Rails Documentary, Hacking Google Bard, JQ Guide
Hi,
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 Animations 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:
Today's news includes:
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.
React Design Patterns - React developers can save time and effort by using design patterns, which provide a quick approach to addressing problems using tested-and-trusted solutions. They enable cohesive modules with lower coupling, which in turn helps React developers create maintainable, scalable, and efficient applications. In this article, we will explore React design patterns and examine how they might improve the development of React applications.
The Fastest Way to Deploy your JavaScript App to Kubernetes - In this tutorial, you'll learn how to deploy your first JavaScript application on Kubernetes - a container orchestration platform. We will deploy a simple express server that returns a sample JSON object on Kubernetes locally using Minikube. Start the tutorial here!
Automating your API tests using Python and Pytest - Did you ever thought how you can tests your APIs using python? In the article we will learn how we can test our APIs using Python and the pytest framework. For this tutorial you need to have the python installed, you can download it here. Explore the full tutorial here.
10 Useful Chrome Extensions for Web Developers - There are numerous techniques on the internet that we can follow to increase our productivity. Chrome extensions are one such technique that allows us to boost the outcome of the hard work that we dedicate to our craft. In this article, we will discover 10 useful Chrome extensions that can improve our productivity as web developers.
Linux Shell Scripting for DevOps: A Beginner's Guide - It's time to delve into amore exciting part of your DevOps journey: Linux shell scripting. Shell scripting is a powerful tool for automating tasks and managing systems, making it an essential skill for DevOps engineers. This guide provides a basic introduction to Linux shell scripting, with a focus on its applications in the DevOps field. Learn about the essential topics to help you get started.
7 easy AI-product integrations - A list of the best easy-to-build AI product integrations. These can give your project magical powers, so don't forget to show them support. Now let's head down AI-road.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you manually curated collection of compatibility resources for frontend web developers:
Cross Browser: Cross-browser refers to the ability of a website, web application, HTML construct or client-side script to function in environments that provide its required features and to bow out or degrade gracefully when features are absent or lacking.
E-Mail: Preparing HTML based electronic mail.
Keyboard: Working with keyboard input in a web browser.
Mobile: Development of websites optimized for viewing on smartphone and tablet devices.
Printers: Manipulation of printer output through CSS.
Responsive Web Design (RWD): RWD responds to the needs of the users and the devices they’re using. The layout changes based on the size and capabilities of the device.
Web Accessibility: Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
Stop Deploying Web Application Firewalls - You don't hear enough real people discouraging the use of Web Application Firewalls(WAFs). Probably because the search results for "Web Application Firewall" are all written by WAF vendors. Anyone reading just that could conclude that WAFs are a good idea. This article offers another perspective, from Mac after having suffered through using a WAF for two years.
My favorite coding question to give candidates (and why) - There’s so many blogs and videos online showing you answers to LeetCode questions. But the viewpoint is mostly as an interviewee, not as an interviewer. This post covers a coding interview question, from the viewpoint of an Google/Amazon/Microsoftinterviewer.
Ruby on Rails: The Documentary - Ruby on Rails has one of the most faithful communities online, it also has one of the most controversial, rabble-rousing creators out there, Danish programmer, David Heinemeier Hansson. Widely known as DHH, David tells us how Rails went from a crazy idea to one of the most talked-about full-stack frameworks over the course of 20 years.
Hacking Google Bard - From Prompt Injection to Data Exfiltration - Recently GoogleBard got some powerful updates, including Extensions. Extensions allow Bard to access YouTube, search for flights and hotels, and also to access a user’s personal documents and emails. So, Bard can now access and analyze your Drive, Docs and Gmail! This means that it analyzes untrusted data and will be susceptible to Indirect Prompt Injection.
Go, Containers, and the Linux Scheduler - When running in container orchestrators it’s important to set CPU limits to ensure that the container doesn’t consume all the CPU on the host. However, the Go runtime is not aware of the CPU limits set on the container and will happily use all the CPU available leading to high latency. This blog explains what is going on and how to fix it.
Effect Handlers for WebAssembly- The WasmFX project extends WebAssembly (abbreviated Wasm) with effect handlers as a unifying mechanism to enable efficient compilation of control idioms, such as async/await, generators/iterators, first-class continuations, etc.
The Ultimate Interactive JQ Guide - You’ve just received a massive JSON file that looks like it was designed to confuse you. Or maybe you entered a command, and you got so much JSON that it looks incomprehensible. The data you need is buried inside, and you’re dreading the hours it’ll take to extract and clean it up. Learn how to search, query, and modify JSON data with 25 interactive jq examples and explanations.
WebDev DIY Tutorial
Implementing Animations
When we think about UIs and the browser, we must surely think about animations as well. Animated UIs are more pleasant for users, and they are a very important tool to show users that something has happened or is about to occur.
This section does not aim to be an exhaustive guide to creating animations and beautiful UIs; the goal here is to provide you with some basic information about the common solutions we can put in place to animate our React components.
For a UI library such as React, it is crucial to provide an easy way for developers to create and manage animations. React comes with an add-on, called react-transition-group, which is a component that helps us build animations in a declarative way. Again, being able to perform operations declaratively is incredibly powerful, and it makes the code much easier to reason about and share with the team.
The first thing we need to do to start building an animated component is to install the add-on:
npm install --save react-transition-group @types/react-transition-group
Once we have done that, we can import the component:
import { TransitionGroup} from 'react-transition-group'
Then, we just wrap the component to which we want to apply the animation:
const Transition = (
) => (<TransitionGroup
transitionName="fade"
transitionAppear
transitionAppearTimeout={500}
>
<h1>Hello React</h1>
</TransitionGroup>
)
As you can see, there are some props that need explaining. First, we are declaring the transitionName prop. ReactTransitionGroup applies a class with the name of that property to the child element so that we can then use CSS transitions to create our animations.
With a single class, we cannot easily create a proper animation, and that is why the transition group applies multiple classes according to the state of the animation. In this case, with the transitionAppear prop, we are telling the component that we want to animate the children when they appear on the screen.
So, what the library does is apply the fade-appear class (where fade is the value of the transitionName prop) to the component as soon as it gets rendered. On the next tick, the fade-appear-active class is applied so that we can fire our animation from the initial state to the new one, using CSS.
We also have to set the transitionAppearTimeout property to tell React the length of the animation so that it doesn’t remove elements from the DOM before animations are completed.
The CSS to make an element fade-in is as follows.
First, we define the opacity of the element in the initial state:
.fade-appear
{opacity: 0.01;
}
Then, we define our transition using the second class, which starts as soon as it gets applied to the element:
.fade-appear.fade-appear-active {
opacity: 1;
transition: opacity .5s ease-in;
}
We are transitioning the opacity from 0.01 to 1 in 500ms using the ease-in function. This is pretty easy, but we can create more complex animations, and we can also animate different states of the component. For example, the *-enter and *-enter-active classes are applied when a new element is added as a child of the transition group...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
Introducing Angular v17 - Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. Today marks the release of version 17, setting new standards for performance and developer experience.
Laravel
Laravel 10.32 Released - This week, the Laravel team released v10.32, with new conditional push Blade directives, conditional "present" validation rules, and more. Laravel 10 saw 15 individual contributions, including updates, fixes, and improvements.
Laravel Pail - The easiest way to tail your log files - Laravel Pail is a package that allows you to easily dive in and tail your application's log files. Pail is designed to work with any log driver, be super easy to remember, and provide a set of useful filters to help you quickly find what you're looking for.
Spring
Spring Shell 2.1.14, 3.0.9, 3.1.5 and 3.2.0-M3 are now available – Spring Shell 2.1.14, 3.0.9, 3.1.5 and 3.2.0-M3 has been released and are now available from Maven Central and Spring Repos respectively. Please see the release notes 2.1.14, release notes 3.0.9, release notes 3.1.5 and release notes 3.2.0-M3 for more details.
PostgreSQL
PostgreSQL 16.1, 15.5, 14.10, 13.13, 12.17, and 11.22 Released! - The PostgreSQL Global Development Group has released an update to all supported versions of PostgreSQL, including 16.1, 15.5, 14.10, 13.13, 12.17, and 11.22 This release fixes three security vulnerabilities and over 55 bugs reported over the last several months. This release includes fixes for indexes where in certain cases, we advise reindexing. Please see the "Updating" section for more details.
Ruby
Rails 7.1.2 has been released! - I am happy to announce that Rails 7.1.2 has been released. To see a summary of changes, please read the release on GitHub: 7.1.2 CHANGELOG
See you next week!