Learn Electron, Firefox and Yarn

Cascading Style Sheets bring order and beauty to our applications.

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

Fast, reliable, and secure dependency management.

yarn

Yarn 2 is workspace aware. When you need to upgrade a package in one workspace, yarn will ask you if you want to resolve the version of the package to a version you use in a different package.

In this lesson, we go over `yarn up -i` to upgrade a package with an old version.

Use yarn up to Update Dependencies In A Yarn Workspace

`yarn dlx` can be used to run packages without installing them. This is useful for packages like `create-react-app` and `gatsby` that scaffold out apps for you, so you don't have to keep updating your global versions.



Use Yarn dlx to Execute Packages without Installing Them

This lesson goes over how to install yarn 2 through npm.

To install yarn 2 globally, we use `npm install -g yarn@berry`. 

To install yarn 2 to a specific project, we use `yarn policies set-version berry`. This creates a `.yarnrc` file and a `.yarn/` directory. `.yarnrc` that sets the path to our yarn instance in the created `.yarn/` directory that holds our new yarn version.

Install Yarn 2

Yarn PnP is a new feature set on **by default** with yarn 2. PnP gets rid of your projects `node_modules` in favor of a `.pnp.js` file.

This `.pnp.js` file maps all of the packages installed in your project to where Yarn has placed them on your disk. This enables faster, more reliable installs because you don't have to write to disk as often.

WTF is Yarn Plug'n'Play (PnP)?

Yarn 2 (Berry) has finally [released a stable version](https://dev.to/arcanis/introducing-yarn-2-4eh1)! 

The yarn team has been working on this release for over 2 years. 

This collection goes over: 

- What yarn pnp is and how it tries to solve the `node_modules` problem
- How to install yarn globally and locally inside of a single project
- How to use `yarn dlx`
- How to use `yarn up` to manage yarn workspace dependencies



Yarn 2 AKA Berry

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

The fastest way to create a robust, cross-platform compatible Node.js CLI (optionally typed with TypeScript) is by running `npx oclif single mycli`. Here we explain what this means and how and why to integrate this with Yarn Workspaces for an ideal developer experience.

Create a Single-Command Node.js CLI with Oclif, TypeScript and Yarn Workspaces

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Animations can make people sick, or worse! By adding animation toggles and listening in to the user's system preference for reducing motion on OSX and iOS, we can give them more control over our interfaces. Animation can be a safety issue; let's do something about it!

Warning: there is a flashing animation in the video.

In this lesson:
- [prefers-reduced-motion](https://webkit.org/blog/7551/responsive-design-for-motion/)

WCAG 2.1, Guideline 2.3: Seizure risks
- https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-seizure-does-not-violate

Your Interactive Makes Me Sick
- https://source.opennews.org/articles/motion-sick/

Accessible animations with reduced motion

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In this lesson we'll use yarn and yarn workspaces to create a monorepo that includes a web creat-react-app, a react-native app, and shared code. We'll use `react-app-rewired` and `react-app-rewire-babel-loader` to rewire the create-react-app configuration to allow babel to process the shared code from workspace. We'll also use `crna-make-symlinks-for-yarn-workspaces` and `metro-bundler-config-yarn-workspaces` to configure the react-native app to be able to find the shared code in the workspaces.

Use Yarn Workspaces to Share Code with CRA and create-react-native-app in a Monorepo

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the `yarn create` command.

Bootstrap a React Application with Yarn & Create React App

Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs.

Yarn: A JavaScript Package Manager

In this less we create a custom Zod schema using `z.custom`.

The example case covers room numbers validation: it must start with an uppercase letter followed by three digits. `z.custom` allows the creation of a brand new custom schema with a callback function that returns a boolean indicating validity.

We highlight a challenge with type inference in Zod's custom schemas: callback parameter types don't get aligned automatically - type-safety must be explicitly defined using type parameters.

We run tests against various room numbers and demonstrate how to effectively validate inputs and manage error messages.


Tomasz Ducin

Create Custom Zod Schemas and Validate project-specific data

Create custom validation logic in Zod using z.custom, for primitive values, ensuring type safety and proper error messages for room numbers.


Excessive properties refer to any additional attributes that are not explicitly listed in an object schema. When creating an object based on a schema, it is important to ensure that only the defined properties are included.

In TypeScript, if an object is created with an extra property that isn't defined in the schema, TypeScript will not raise an error unless the type is explicitly annotated. When the type is annotated, TypeScript will issue an error indicating that the extra property is not allowed.

Zod provides a strict utility to enforce similar checks. This feature ensures that only specified properties are allowed in an object schema. When unnecessary properties are added at both the top level and within nested schemas, Zod will throw errors indicating unrecognized keys.

Adding an unrecognized property to a Zod schema results in an error message that specifies which keys are not recognized. Applying strict checks on nested schemas ensures that all levels of the data structure are validated correctly.


Make Excessive Object Properties Fail on Zod Validation

Prevent excessive properties in TypeScript and Zod schemas using strict checks for better data validation

In this lesson we discuss how Zod works with TypeScript to handle special types like `undefined`, `null`, `any`, `unknown`, `never` and `void`.

We modify our room booking schema to demonstrate the use of `optional` and `nullable` Zod utilities.

By using `.optional`, we allow a property to be either its _original type_ or `undefined`. With `.nullable`, we allow it to be either its _original type_ or `null`. Finally, `.nullish` allows a value to be either its _original type_, `null`, or `undefined`.

For all cases, we run tests to show how these schemas work in practice, as well as how TypeScript infers types.


Declare Lack of Value in zod (optional, nullable and nullish)

use Zod for TypeScript schemas, including handling undefined, null, and special types like optional and nullable values, as well as any, unknown never and void

In this lesson we make use of partial validation of large and nested schemas in Zod.

Instead of creating many small schemas, which can complicate maintenance, Zod allows for the extraction of specific parts of a schema using the concept of ".shape". It "unwraps" the object schema, enabling access to sub-schemas within specific properties.

Additionally, we can use the `.unwrap` to get into element schemas of altered schemas such as `.optional` or `.array`.

Simplify working with complex schemas without the need to break them into hundreds of small schemas.

Use Zod Schemas partially using shape and unwrap

Manage large and nested Zod Schemas by extracting partial validations using shape and unwrap utilities

In this lesson we cover implementing sets and maps in Zod.

Using `z.set`, a schema for string-based amenities is created. We demonstrate how validation works by intentionally introducing errors and customizing error messages for better clarity.

Next, a map is created for existing guestDetails schema using `z.map`, with string keys and an existing `z.object`-based schema. The validation process is shown again by deliberately breaking the schema, such as omitting the age property, which triggers appropriate error messages.


Validate maps and sets using Zod schemas

Use sets and maps in Zod for schema validation, ensuring type safety for both keys and values.

In this lesson we'll use a few predefined schemas which will serve as constituents to create union and intersection schemas.

Three room booking schemas are defined: _single_, _double_, and _suite_. Each schema has slight differences in the structure.

The `z.union` utility is used to create a union of these schemas, allowing for validation against any of them. Type inference (using `z.infer`) for the room booking schema produces a union of object literals, exactly like in TypeScript.

We also create an intersection using `z.intersection`, combining room booking details with discount information.

These techniques enhance data validation and allow to make `zod` aligned even more with `TypeScript`.


Define Unions and Intersections with Zod

implement unions and intersections in Zod schemas for example domain related objects, enhancing TypeScript validation with clear examples

This lesson demonstrates how to provide runtime type-safety for arrays in TypeScript applications.

First we need to understand the challenges behind ensuring array type-safety in TypeScript. We explain how TypeScript infers arrays with an undefined length, making it difficult to guarantee that array accesses are safe.

Zod schemas provide the `z.array` to define arrays of various element types. 

We compare how utilities such as `.min`, `.max` and `.nonempty` get reflected in inferred TypeScript types, and how zod processes the validation.


Declare Precise Array Types within Zod Schemas

Provide array type safety in TypeScript using Zod schemas, including handling non-empty arrays for better validation

In this lesson we make string-based schemas more specific using Zod in TypeScript. We focus on defining allowed values for a room type, showing how to use literals and enums effectively.

Zod's `z.literal` method allows us to specify a single allowed value for a string schema. For example, if we want to define a room type as `"premium"` and make it backward-type-safe in TypeScript, we can use `z.literal("premium")` to ensure that only this value is valid.

`z.enum` lets us define a set of allowed string values. This is useful when we have multiple options for room types, like `"standard",` `"premium"` or `"childrenFriendly"`. 

`z.enum` creates a union of TypeScript-compatible string literals, making it easy to validate against multiple values. Zod enums can be used to extract or exclude specific values from the enum.

Finally, zod's `z.nativeEnum` a native enum creates an equivalent of TypeScript's native `enum` ("real enums", we could say).

We can validate against all these values just like we do with literals and enums.


Work with Zod Literals and Enums Effectively

Use Zod for string schemas in TypeScript, including literals, enums, and native enums for room type validation

In this lesson, we dive into the Zod's `refine` utility, allowing defining more complex schema validation **on top of existing schemas and utilities**.

Sometimes, we need special validation rules for our applications to work correctly. The `refine` utility lets developers create their own validation rules. This method's uses a callback to check if the input is valid. We also create meaningful messages when something doesn’t meet the validation rules.

We use a practical example involving a room booking schemawith `dueDate` and `price` property refinement.


Apply Schema Custom Refinement with Zod

Enhance your TypeScript validation skills with Zod's refine utility for custom room booking schemas, focusing on date and price validation.


In this episode of What's Good, Joel Hooks sits down with Dev Agrawal, a member of the SolidJS core team, to discuss the evolving landscape of web development, AI-assisted coding, and modern framework architecture.

## Episode Highlights

### SolidJS and Modern Framework Architecture
- Detailed comparison between SolidJS and React, highlighting key advantages
- Deep dive into Suspense implementation and reactive state management
- Overview of Dev's work on cross-boundary reactivity in SolidJS
- Discussion of his $7,000 Solid Hack competition winning project
- Exploration of stateful server components with WebSocket updates

### AI-Assisted Development
- Discussion of AI agents managing tasks and grooming backlogs during meetings
- Exploration of using AI tools like Cursor for development
- Joel shares his experience building [JoelFit](https://joelfit.app), a full-stack application developed primarily through AI prompting
- Analysis of AI's current limitations and the importance of human guidance in development

### Emerging Technologies and Trends
- Analysis of React Server Components and their impact on the ecosystem
- Discussion of Cloudflare Durable Objects as individual compute units
- Introduction to Zero Sync and its implications for local-first applications
- Exploration of incremental view maintenance and its performance benefits
- Overview of Vite 6's improvements for server components and meta frameworks

### Featured Projects and Resources
- [JoelFit (code)](https://github.com/joelhooks/joelfit) - Joel's AI-assisted development project on github
- [Solid Suspense Demo v2](https://github.com/devagrawal09/solid-suspense-demo-v2) - Dev's demo showcasing Solid's advantages
- [Building Asynchronous UIs Without the Hassle](https://youtube.com/watch?v=pX5r_jTLbvw) - Dev's conference talk

## Key Takeaways
- SolidJS offers built-in support for async operations without React's bailout issues
- The entire Solid ecosystem was built with suspense support from v1
- Durable Objects are often misunderstood - they're individual compute units rather than just shared state
- Zero Sync's incremental view maintenance pairs particularly well with Solid's architecture
- React has moved away from traditional SPA towards full-stack architecture
- Framework choices continue to evolve with different approaches to reactivity and state management

## Connect with Dev
- Watch Dev's talk on [Building Asynchronous UIs Without the Hassle](https://youtube.com/watch?v=pX5r_jTLbvw)
- Check out his [Solid Suspense Demo](https://github.com/devagrawal09/solid-suspense-demo-v2)

---

*Note: This episode was recorded in January 2024 and discusses emerging technologies and trends in web development.*

Joel Hooks

Full-Stack Signals in Solid, AI Development, and the Future of Web Frameworks

A deep dive into AI-assisted development, modern web framework architecture, and emerging technologies like full-stack Solid signals and local-first databases.

Search

Search Results