WebDevPro #27: React Ecosystem 2024, Neural network in vanilla JS, Open-Source Repositories and Projects.
Sponsored By:
Advertise with Us | Sign Up to the Newsletter
October 19, 2023
Hi,
Welcome to the _webdevpro! We start with community discussions on:
In our tutorial, we cover Differences with HTML from the book React 18 Design Patterns and Best Practices to help articulate your coding. Don't miss our repository of Apps that help you manage your web extensions.
Today's news includes news on:
If you liked this installment, fill in our survey below and win a free Packt PDF.
Thanks,
Apurva Kadam
Editor-in-Chief, Packt
Rapidly Create Custom Browser Mods
Stop creating yet another screen. PixieBrix is the first low-code platform to add automation, integrations, collaboration, and AI to the web apps your teams already use.
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.
Seven Open-Source Repositories That Will Make Your Web Dev Smarter - Some of the most innovative and impactful technologies come from smaller companies or startups. Here are seven such startups, each with unique offerings that could transform your project and, in the process, make you smarter. Checkout the Open-source repos here.
8 components to become a React master - This blog is a collection of curated React components you can use to build the ultimate website. Each one of them has a unique use case! Learn about them in detail now.
An AI / neural network...in vanilla JS! With no libraries! - Have you ever tried to actually build a neural network? Then today is great day to start! In this article we will cover how to build a neural network in vanilla JS and two demos of some very simple neural networks, written in vanilla JS. Explore the tutorial.
24 Open-Source Projects for Developers in 2023 - Open-source projects are playgrounds of innovation, collaboration, and creativity. In this article, you will find handpicked 24 open-source projects that cover a wide spectrum of interests and technologies. Explore direct links, descriptions, and visuals so that you can get an initial impression of each tool.
React Ecosystem in 2024 - As React celebrates its 11th anniversary in 2024, it’s worth looking ahead to the exciting developments in the React ecosystem. In this blog, we’ll explore various aspects of the ecosystem, building on what was happening in 2023 and what you can expect in the coming year. Read now!
How to monitor your requests between multiple applications - Imagine that you are sending an HTTP request from one app; this one sends it to another app that sends it to another app. What if something happens along the way? You need to mark all the requests to pinpoint where the problem occurred. In this tutorial, you'll learn how to use OpenTelemetry to monitor your applications within sights into performance, tracing, and metrics. Learn more.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you Apps that help you manage your extensions:
Chrome Webstore Upload - Upload the extension to the Chrome Web Store via cli (or on Travis, automatically).
mozilla/web-ext - Command line tool to help build, run, and test WebExtensions.
chromepet - Get notified when your new version has been published.
chrome-ext-downloader - Download any extension on Chrome Web Store to see how they do it.
chrome-store-api - Chrome Web Store API wrapper.
Chrome extension source viewer - WebExtension to view source code of extensions directly on the store.
@wext/shipit - Tool to automatically publish to Chrome Web Store, Mozilla Addons and Opera Addons.
wext-manifest-loader - Webpack loader that lets you specify manifest.json properties to appear only in specific browsers.
webextension-manifest-loader - Webpack loader that loads browser tailored manifest.json. It also imports all importable properties, allowing you to have 'manifest.json' as your only webpack entry point.
webpack-extension-reloader - A Webpack plugin to automatically reload browser extensions during development.
webpack-target-webextension - Adds code-splitting support to Web Extensions build with Webpack.
WebDev DIY Tutorial
So far, we have looked at the similarities between JSX and HTML. Let’s now look at the little differences between them and the reasons they exist.
Attributes
We must always keep in mind that JSX is not a standard language and that it gets transpiled into JavaScript. Because of this, some attributes cannot be used.
For example, instead of class, we have to use className, and instead of for, we have to use htmlFor, as follows:
<label className="awesome-label" htmlFor="name" />
The reason for this is that class and for are reserved words in JavaScript.
Style
A pretty significant difference is the way the style attribute works. We will look at how to use it in more detail in Chapter 6, Making Your Components Look Beautiful, but now we will focus on the way it works.
The style attribute does not accept a CSS string as the HTML parallel does, but it expects a JavaScript object where the style names are camelCased:
<div style={{ backgroundColor: 'red' }} />
As you can see, you can pass an object to the style prop, meaning you can even have your styles in a separate variable if you want:
const styles = {backgroundColor: 'red'} <div style={styles} />
This is the best way to have better control of your inline styles.
Root
One important difference with HTML worth mentioning is that since JSX elements get translated into JavaScript functions, and you cannot return two functions in JavaScript, whenever you have multiple elements at the same level, you are forced to wrap them in a parent. ..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!
Django
Announcing DjangoCon Europe 2024 in Vigo, Spain! - the much-anticipated return of DjangoCon Europe, set to take place in the vibrant city of Vigo, Spain, in2024! Mark your calendars for DjangoCon Europe 2024, which will be held from June 5th to 9th. The conference will host a balanced mix of insightful talks, hands-on workshops, and ample opportunities for networking and socializing with fellow Django enthusiasts.
Node.js
Node.js 21 is now available! - Node.js 21 is here! Highlights include updates of theV8 JavaScript engine to 11.8, stable fetch and WebStreams, a new experimental flag to flip module defaults (--experimental-default-type), a built-in WebSocket client, many updates to our test runner, and more!
Spring
Spring Boot 2.7.17 available now - Spring Boot 2.7.17 has been released and is now available from Maven Central. This release includes 32bug fixes, documentation improvements, and dependency upgrades.
See you next week!