WebDevPro #33: Teach Git, CSS trick, Train ChatGPT, Ex-Googler's guide to dev tools, Adobe's buy of Figma is 'likely' bad for developers.
Advertise with Us | Sign Up to the Newsletter
November 30, 2023
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 Understanding and implementing inline styles 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:
MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers
Introducing SDXL Turbo: A Real-Time Text-to-Image Generation Model
Adobe's buy of Figma is 'likely' bad for developers, rules UK regulator
Today's news covers Django, Laravel, Spring and PostgreSQL.
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.
How I teach Git– This post is for others who will teach to possibly take inspiration. So if you're learning Git, this post was not written with you in mind (sorry), and as such might not be self-sufficient, but hopefully the links to other learning resources will be enough to fill the blanks are make it a helpful learning resource as well. If you're a visual learner, those external learning resources are illustrated, or even oriented towards visual learning. Learn more.
CSS trick: transition from height 0 to auto! - If you messed around with CSS for long enough, chances are you've tried at least once to make a transition from height: 0 to auto... only to find out that it doesn't work! Luckily, today there is actually a solution to this problem: it uses CSS Grid under the hood, and it is just so easy and it works flawlessly! Get started with a practical example.
Train ChatGPT on your Documentation - What if you want it to give you information specifically about your website? Most likely, it’s not possible, but not anymore! OpenAI introduced their new feature - assistants. You can now easily index your website and then ask ChatGPT questions about it. In this tutorial, we will build a system that indexes your website and lets you query it. Read the full tutorial.
How to code faster: VS Code edition - Pair programming can be very productive. But there's nothing so annoying as seeing your fellow programmer struggle with his coding. And with struggle, I don't necessarily mean that he lacks experience, but rather that he's coding so slowly. Here are some tips and tricks for coding in Visual Studio Code (VS Code). Learn now!
New open-source VS. old open-source - In this article, provides alternatives to mainstream Python libraries. These alternatives add some value to the Python landscape even though mainstream libraries are supported by stronger active communities. Choosing your libraries comes down to your use case and personal preference. Read more.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you manually curated collection of Languages, Protocols, Browser APIs for frontend web developers:
Service Workers: A method that enables applications to take advantage of persistent background processing, including hooks to enable bootstrapping of web applications while offline.
Templating Languages and Engines: Template engines are tools to separate program-logic and presentation into two independent parts. This makes the development of both logic and presentation easier, improves flexibility and eases modification and maintenance.
Transpiled Languages: Abstract languages converted to native, browser supported standards like JavaScript or CSS.
Uniform Resource Identifier (URI): URI is a string of characters used to identify a resource. The most common form of URI is the Uniform Resource Locator (URL).
Web Animations API: Web Animations is a new JavaScript API for driving animated content on the web. By unifying the animation features of SVG and CSS, Web Animations unlocks features previously only usable declaratively, and exposes powerful, high-performance animation capabilities to developers.
WebAssembly: WebAssembly is meant to fill a place that JavaScript has been forced to occupy up to now: a low-level code representation that can serve as a compiler target.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
Anger as some Google cloud customers locked out of files - Google Drive users have reacted angrily to a glitch leaving some unable to access files from the last six months. Google said it was investigating the issue which is affecting some users of its hugely popular cloud storage service. The problem was first reported on 22 November by a user who said their Drive had reset to a May 2023 version. It is not known how many customers are affected, but people in multiple countries have reported problems.
Rust without crates.io - Rust is a lovely programming language but I’ve never quite come to terms with crates.io, or any other of these language-specific repositories where everyone uploads and downloads code willy-nilly. This blog covers alternatives to this combination.
An ex-Googler's guide to dev tools – This a guide to dev tools outside of Google for the ex-Googler, written with an eye toward pragmatism and practicality. No doubt many ex-Googlers wish they could simply clone the Google internal environment to their new company, but you can't boil the ocean. Here is a take on where you should start and a general path I think ex-Googlers can take to find the tools that will make them—and their new teams—as productive as possible.
MeshGPT: Generating Triangle Meshes with Decoder-Only Transformers - MeshGPT creates triangle meshes by autoregressively sampling from a transformer model that has been trained to produce tokens from a learned geometric vocabulary. These tokens can then be decoded into the faces of a triangle mesh. Our method generates clean, coherent, and compact meshes, characterized by sharp edges and high fidelity.
Introducing SDXL Turbo: A Real-Time Text-to-Image Generation Model - SDXL Turbo achieves state-of-the-art performance with a new distillation technology, enabling single-step image generation with unprecedented quality, reducing the required step count from 50 to just one. Download the model weights and code on Hugging Face, currently being released under a non-commercial research license that permits personal, non-commercial use.
Adobe's buy of Figma is 'likely' bad for developers, rules UK regulator - Adobe’s $20 billion buy of web-first design collaboration start-up Figma will harm software developers if it goes ahead as proposed, according to a provisional ruling on the merger by Britain’s competition regulator. Competition Markets Authority claims merger will reduce innovation for designers and other creative types.
WebDev DIY Tutorial
Understanding and implementing inline styles
The official React documentation suggests developers use inline styles to style their React components. This seems odd because we all learned in past years that separating the concerns is important and we should not mix markup and CSS.
React tries to change the concept of separation of concerns by moving it from the separation of technologies to the separation of components. Separating markup, styling, and logic into different files when they are tightly coupled and where one cannot work without the other is just an illusion. Even if it helps keep the project structure cleaner, it does not give any real benefit.
In React, we compose components to create applications where components are a fundamental unit of our structure. We should be able to move components across the application, and they should provide the same result regarding both logic and UI, no matter where they get rendered.
This is one of the reasons why collocating the styles within our components and applying them using inline styles on the elements could make sense in React.
First, let’s look at an example of what it means to use the style attribute of the nodes to apply the styling to our components in React. We are going to create a button with the text Click me! and we are going to apply a color and background color to it:
const style = {
color: 'palevioletred',
backgroundColor: 'papayawhip'
}
const Button = () => <button style={style}>Click me!</button>
As you can see, it is pretty easy to style elements with inline styles in React. We just have to create an object where the attributes are the CSS rules, and the values are the values we would use in a regular CSS file.
The only differences are that the hyphenated CSS rules must be camel Cased to be JavaScript-compliant, and the values are strings, so they have to be wrapped in quote marks.
There are some exceptions regarding the vendor prefixes. For example, if we want to define a transition on webkit, we should use the Webkit Transition attribute, where the webkit prefix begins with a capital letter. This rule applies to all the vendor prefixes, except for ms, which is lowercase.
Other use cases are numbers – they can be written without quotes or units of measurement, and by default, they are treated as pixels.
The following rule applies a height of 100 pixels:
const style = {
height: 100
}
By using inline styles, we can also do things that are hard to implement with regular CSS. For example, we can recalculate some CSS values on the client at runtime, which is a very powerful concept, as you will see in the following example....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!
Laravel
Laravel 10.34 Released - This week, the Laravel team released v10.34, adding a missing() method that applies to route groups, an alias for the new Number class, an extensions validation rule, and more. Here is a bit more info about the new features introduced this week.
Laravel Tailwind Merge - Laravel Tailwind Merge is a package that automatically resolves Tailwind CSS class conflicts in Laravel. This allows you to merge multiple Tailwind classes and resolves conflicts.
Spring
Spring Shell 2.1.15, 3.0.10, 3.1.6 and 3.2.0-RC1 are now available - Spring Shell 2.1.15, 3.0.10, 3.1.6 and 3.2.0-RC1 has been released and are now available from Maven Central and Spring Repos respectively. Please see the release notes 2.1.15 for more details.
Spring Framework and Spring Boot vulnerabilities - The Spring Framework 6.0.14release shipped on November 16th includes a fix for CVE-2023-34053. The Spring Boot 2.7.18 release shipped on November 23th includes fixes for CVE-2023-34055. Users are encouraged to update as soon as possible.
PostgreSQL
Data Generator version 4.0 released - The new major version of Data Generator for PostgreSQL - an impressive tool for generating test data to database tables with the possibility to save and edit scripts. The utility can help you to simulate the database production environment and allows you to populate several database tables with test data simultaneously, define tables and much more.
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