WebDevPro #28: Front-end To-dos, Top JavaScript Repositories & Monitoring Tools, VS Code Shortcuts, Accessibility Course, Frontier Model Forum
Hi,
Welcome to the _webdevpro! You one stop for all things Web Dev!
We start today’s issue with community discussions on:
17 JavaScript Repositories to Become the Best Developer in the World
JavaScript Design Patterns: Singleton for Ultimate Code Efficiency
In our tutorial, we cover ESLint 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.
We Introduce a new section that captures internet jibber-jabber about topics in the web ecosystem:
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
Quick App Authentication and Authorization with Auth0 by Okta
With Auth0 Universal Login, allow secure access with your choice of authentication (e.g. Social, passwordless, or another IDP.) Once your users log in successfully, they’ll be redirected to your app with ease. Let us handle Identity, so your team can focus on innovation.
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.
Front-end To-do or Not-to-do? – This blogpost covers Frontend good practices for developers including Console logs, Console errors and warnings, Super Components and Functions, CSS, Linter, TypeScript and the most important communication! Dive into the front-end dev best practices here.
17 JavaScript Repositories to Become the Best Developer in the World – This article consists of a curated list of 17 GitHub repositories you should know as a JavaScript developer. These repositories span various parts of software and web development. Feel free to explore their GitHub repositories, contribute to your favorites, and support them by starring the repositories. Explore the list here.
Top 6 Monitoring Tools to Become a Better Developer - Monitoring can be complex, especially given the number of available tools and the dynamic nature of environments. This article compares the most popular monitoring tools to help you choose the right one for your specific needs. Checkout the tools!
JavaScript Design Patterns: Singleton for Ultimate Code Efficiency - In the world of JavaScript, design patterns are your secret weapon to crafting efficient, organized, and maintainable code. Among these patterns, the Singleton pattern stands out as a versatile powerhouse, enabling you to ensure a single instance of a class throughout your application. Let's see how it works!
10 Must-Know VS Code Shortcuts - Moving from keyboard to mouse to perform some action can sometimes be annoying. VS Code has some nice keyboard shortcuts to help keep me in flow when working with code. In this article, we'll explore 10must-know VS Code shortcuts that I use on a day-to-day basis. These shortcuts are not only timesaving but also make you feel like a coding wizard. So, dive in!
How to Collaborate on Pull Requests for Beginners - Whether it’s giving code reviews to another person’s pull request or adding your points in the comment section of an issue they raised, you'll find that collaboration is a key skill in open-source development. One of the most common ways you would do this is by working with others on pull requests. Now don’t fret. This blog post shares 5 tips on how to collaborate with others on a pull request.
WebDev Repos
We at WebDevPro highlight Web resources in a week-on-week series. This week we bring you resources to test your extensions:
sinon-chrome - Mocks the Chrome Extensions API for testing.
addons-linter - Validate an extension against Mozilla's guidelines.
webextensions-jsdom - Load popup, sidebar and background with JSDOM based on the manifest.json.
webextensions-api-fake - In-memory WebExtensions API Fake Implementation (includes TypeScript types).
webextensions-api-mock - WebExtensions API as sinon stubs (includes TypeScript types).
webextensions-schema - Programmatically consume the WebExtensions Schema JSON files.
Internet Web Dev Jibber-Jabber
Random curious musings and interesting words about Web Dev on the Internet.
Before Computers Were Logic Diagrams and Machines - While most engineers are familiar with the history of calculators and computers many are unfamiliar with the fact that there has historically been a great deal of fascination with logic in general. This fascination was initially expressed in the form of logic diagrams, and later in the construction of special-purpose machines for manipulating logical expressions and representations. This is an opinion piece on the book Logic Machines and Diagrams by Martin Gardner. Sit back and enjoy the evolution of logical machines!
It's 2023, Here Is Why Your Web Design Sucks - At some point, we told design they couldn't sit with us anymore, and surprise! It backfired! Now, not only has the field and profession of web design suffered, but also, we build shitty websites. Here is a rant from Heather Buchel on Web design in 2023.
Practical Accessibility Course - Accessibility can be straight-up difficult and intimidating. How do you get started? Where do you start? How do you know if what you’ve built is accessible? How do you fix accessibility issues when they come up? Practical Accessibility is a self-paced, get-right-down-to-it online video course for web designers and developers who want to start creating more accessible websites and applications today.
Frontier Model Forum updates - Today, Anthropic, Google, Microsoft, and OpenAI are announcing the selection of Chris Meserole as the first Executive Director of the Frontier Model Forum, and the creation of a new AI Safety Fund, a more than $10 million initiative to promote research in the field of AI safety.
Flawless.dev - Flawless is an execution engine for durable computation. It will run your code until completion even in the presence of hardware or software failure. Workflows in flawless are written in Rust, in fact they are just regular Rust functions. This means that they can contain arbitrary logic. But instead of native code, the functions are compiled to WebAssembly and executed in a completely deterministic environment.
WebDev DIY Tutorial
ESLint
Writing high-quality code is always our goal, but errors can still occur, and spending hours hunting down a bug caused by a simple typo can be incredibly frustrating. Thankfully, there are tools that can help us catch these errors as soon as we type them, allowing us to avoid simple syntactical mistakes.
If you’re coming from a statically typed language like C#, you may be used to getting warnings inside your IDE. In the JavaScript world, the popular tool for linting code is ESLint. ESLint is an open-source project released in 2013 that is highly configurable and extensible.
In the fast-paced JavaScript ecosystem, where libraries and techniques change frequently, it’s crucial to have a tool that can be easily extended with plugins and rules that can be enabled or disabled as needed. Additionally, with transpilers like Babel and experimental language features that aren’t yet part of the standard JavaScript version, we need to be able to tell our linter which rules we’re following in our source files. A linter not only helps us catch errors sooner, but it also enforces common coding style guides, which is particularly important in large teams where consistency is key.
In the following sections, we’ll take a closer look at ESLint and how it can help us write better, more consistent code.
Installation
First of all, we have to install ESLint and some plugins as follows:
npm install -g eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react
Once the executable is installed, we can run it with the following command:
eslint source.ts
The output will tell us if there are errors within the file.
When we install and run it for the first time, we do not see any errors because it is completely configurable, and it does not come with any default rules.
Configuration
Let’s start configuring ESLint. It can be configured using a .eslintrc file that lives in the root folder of the project. To add some rules, let’s create a .eslintrc file configured for TypeScript and add one basic rule:
{"parser": "@typescript-eslint/parser","plugins": ["@typescript-eslint", "prettier"],"extends": ["airbnb","eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended","plugin:prettier/recommended"],"settings": {"import/extensions": [".js", ".jsx", ".ts", ".tsx"],"import/parsers": {"@typescript-eslint/parser": [".ts", ".tsx"]},"import/resolver": {"node": {"extensions": [".js", ".jsx", ".ts", ".tsx"]}}},"rules": {"semi": [2, "never"]}}
This configuration file needs a bit of explanation: "semi" is the name of the rule and [2, "never"] is the value...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
Django 5.0 beta 1 released - Django 5.0 beta 1 is now available. It represents the second stage in the 5.0 release cycle and is an opportunity for you to try out the changes coming in Django 5.0.
Laravel
Laravel 10.29 Released - This week, the Laravel team released v10.29 with the ability to see all middleware in route:list, CLI dump output updates, and more. This week's release saw a lot of small fixes, added tests, and miscellaneous changes; see the changelog for a complete list of updates.
Ruby on Rails
Rails World talks online, fix of a 13 year old bug and more! – Here are a line of updates from Ruby on Rails! You can view the whole list of changes here.
Node.js
Nodev21.1.0 (Current) - Automatically detect and run ESM syntax. The new flag--experimental-detect-module can be used to automatically run ES modules when their syntax can be detected.
Spring
This Week in Spring - Spring Authorization Server 1.1.3, 1.0.4 and 0.4.4 available now; Spring Authorization Server 1.2.0-RC1 available now; Spring Boot 2.7.17 available now; and Spring Boot 3.2.0-RC1 available now.
See you next week!