 Courses from Garth Braithwaite

Cascading style sheet (CSS) selectors are the glue that connects styling to HTML content. Understanding how they work enables a developer to write more semantic markup and keeps styling modular for better project maintenance. 

In this course, we will start with basic selectors and work our way through more complex classification of selectors, explaining common use cases along the way. Finally, we’ll look at how selectors can be combined and how selector specificity can create some common problems.

Cascading Style Sheets bring order and beauty to our applications.

CSS Selectors in Depth

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

[Jekyll](https://jekyllrb.com/) is a static site generator built in [Ruby](https://www.ruby-lang.org/en/) and available to generate and host websites on [GitHub Pages](https://pages.github.com/). In this course, you'll install the Jekyll gem, use the command line tool to generate a new project, inspect the scaffolded project, and finally, serve the starter website.

Install Jekyll and generate initial, scaffolded website

CSS uses a cascading hierarchy to override previously declared styles. To help resolve conflicts it uses a formula to calculate selector specificity and give priority to the more specific selectors. In this lesson we untangle these rules, show common pitfalls, and how to avoid them.

Understand CSS Selector Specificity

Using the adjacent `+` and general `~` sibling combinators we can alter the appearance of sibling DOM elements. In this lesson we use this strategy to style a navigation bar to to indicate which element is selected by leveraging the radio button functionality. This allows us to create a basic interactive interface without needing Javascript.

Advanced CSS Selector Chaining for Improved Interaction without Javascript

To be more specific when targeting DOM elements, we can combine selectors or chain them to style children or multiple groups.

Chain Simple CSS Selectors for Fine-grain DOM Element Targeting

Pseudo elements allow us to target elements that are not explicitly set in the DOM. Using `::before ::after` we can actually create and manipulate elements in the DOM that do not impact the content. While `::first-letter ::first-line ::selection ::placeholder` allow us to target elements that do not have a specific DOM element.

Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use `:nth-child` to target custom element patterns, like every other element (odd or even).

Target Custom HTML Element Patterns with DOM Hierarchy Pseudo Classes in CSS

Using just semantic CSS Pseudo-Classes you can help define important states for form elements that ensure the user provides the correct data without frustration.

Define Form Element States with CSS Form Pseudo Classes

The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what elements on the page are interactive and that they can use them to navigate the website.

Identify Interactive HTML Elements with CSS Link Pseudo Classes

The first step to styling a website or application is correctly defining CSS selectors. I will break down the anatomy of a basic CSS rule-set (selector and declaration block with properties and values) to lay the foundation for more complex selectors.

Understand Basic CSS Selectors

A solid naming convention makes it less likely to run into naming conflicts and helps establish a semantic pattern that is easier for a team to follow. In this lesson, I'm using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention. [OOCSS](https://github.com/stubbornella/oocss) and [SMACSS](https://smacss.com/) offer similar methodologies. I also use the class attribute selector to [target multiple modifier classes](https://www.viget.com/articles/bem-multiple-modifiers-and-experimenting-with-attribute-selectors). 

Reduce Ambiguity in Class Names using a Naming Convention

Although it is possible to use javascript and CSS to make a div or span act like any other element, there are a lot of advantages to starting with semantic markup. It helps keep code readable, making it easier to maintain, and it is a big part of making our project more accessible to devices like screen readers. In this video, I replace generic markup with something that is closer to the expected functionality to make it more semantic. I'm also using a [variation of the BEM](https://en.bem.info/methodology/naming-convention/#alternative-naming-schemes) (Block Element Model) naming convention for CSS class names.

Understand Semantic Markup in relation to CSS

Using pseudo-elements like `::before` and  `::after` we can draw some simple icons without having using image assets which can help reduce the number of requests and improve performance.

Draw Simple Icons with CSS

If you have an existing desktop-friendly application you can make it mobile-friendly as well using responsive design and media queries.

Use Media Queries to Make an Existing Application Responsive

Animations and transitions, when used appropriately, can help inform users how they are interacting with an application and how the user interface is responding. This video takes a simple example of adding a transition to this React/Redux application using React's CSSTransitionGroup.

Inform the User of Interactions with CSS Transitions

There are certain cues that users are looking for to be informed that elements are interactive, like hover states and cursor changes. In this video, I make a list of radio button labels easier to identify as interactive and style them to react to user behavior.

Use CSS to Inform Users of Interactivity

In this course, I'm showing the process of styling an app from start to finish. In this video, I'm changing the basic HTML to make it easier to style by using flat class names. I'm also starting the basic styling of the `html` and `body` elements that sets the foundation for the rest of the application styles.

Prep HTML for Styling with Flat Class Names

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

Although it is possible to target just about any DOM element with complex CSS selectors, it is important to reduce specificity to make CSS easy to override if needed. The best way to do this is with single classes for each stylable element. In this video, I add some basic classes to the fundamental React generated DOM elements.

Keep Styles Portable and Maintainable with Basic Classes

Forms and interactive DOM elements are the fundamental building blocks of an application, but that doesn't mean they need to look like every other form on the web. In this lesson, I'm styling a simple input form to drastically change the way it appears without making any unnecessary changes to the DOM itself.

Style a Form with Plain CSS

Looking at snippets of CSS is a great way to learn how to use it, but some details can fall through the cracks. This course demonstrates the process of styling an application from start to finish.

We will take a basic un-styled todo-list application written in React and use CSS to get the application to look like how we want. The first steps will be to apply static styles to the app based on a mock up, then we will incrementally add user interactivity as well as make the app responsive.

Style an Application from Start to Finish

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

Mock Service Worker is an API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments.



Mocking WebSocket APIs with Mock Service Worker


While using anonymous functions might seem convenient, they can create difficulties when trying to identify performance bottlenecks during profiling. This lesson will demonstrate how named functions make it easier to pinpoint and address performance issues, ultimately leading to more efficient and debuggable code. Learning this practice will greatly improve your ability to locate and fix performance issues in complex projects.

Always Name Functions in JavaScript


When attempting to load the same module twice in JavaScript you'll hit a cache and code won't re-run. In scenarios where you actually do want to have state in your modules, you'll have to use a cache-busting technique by passing a query parameter to a dynamic import. This lesson walks through how to add a query parameter, how to add the appropriate types for loading dynamic modules in TypeScript, and when these techniques are valuable.

Import the Same JavaScript Module Multiple Times with Cache Busting



The include keyword in GitHub Actions empowers you to add custom variables to your matrix strategy, providing flexibility beyond standard configurations. In this video, we'll explore how include allows you to define specific combinations of variables, enhancing control over your workflow runs. You'll see how this feature enables you to tailor jobs for unique environments or scenarios not covered by the default matrix options. By leveraging include, you can efficiently manage complex build processes with greater precision. This technique helps you streamline your CI/CD pipeline, making it more adaptable to your project's evolving needs.

Use GitHub Actions Matrix Include for Complex Job Configurations

While running `zod` schema validation agains domain-rich objects, the error message saying that _a string is not a number_ might not be really useful.

Especially, when you need to provide a meaningful feeback to the user, e.g. after they have submitted a form with lots of data.

`zod` allows to customize messages on a very granular level. We can also extract repeatable customization to `zod` error maps.

Finally, in order to process an error message further (e.g. display it to the user), we need to handle the `zod` validation errors effectively. Especially, when a big object validation has failed and we could receive a handful of errors.

That's what we learn in this lesson. 🔥

Customize zod Error Messages and Handle zod Errors Effectively

customize zod validation messages, customize zod schema property messages, reuse error maps across different schemas, navigate through zod error objects

You might want to run `zod` schema checks in different styles.

Sometimes you prefer to conditionally throw the error - that's what `parse` does. But another time you'd prefer to receive a `boolean` property that determines whether the validation was successful or not - and perform further actions accordingly.

Additionally, the error-throwing API of `parse` works extremely well with [TypeScript assertion functions](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#assertion-functions). Their combination is just... perfect! 👌

That's what we learn in this lesson.

Use parse and safeParse Runtime Type-checks with zod

use zod parse function to conditionally throw ZodError, use zod safeParse to get a boolean value and run typescript type guard over success property

In this lesson we learn that TypeScript cannot guarantee correct shapes of responses. That's due to TS performing checks in compile-time, while the response will be availbale in runtime - when TS doesn't exist anymore.

In some situations, such as HTTP requests, runtime type checks such as `zod` are essential for providing quick feedback around data-related errors.

Understand where are the possible mistakes to make while using TypeScript with HTTP calls. Use `fetch` and `axios` along with `zod` schema checks.

Also, note that similar mistakes or mistakes could happen while using web storage (e.g. `localStorage`)

Validate HTTP API Response with zod, fetch and axios

use zod as an HTTP response validation tool along with fetch and axios in order to make sure that the response has expected data structure

In this lesson we learn that the `zod` schemas become the single source of truth.

We shall not update TypeScript types manually, since they are generated automatically from the schema.

Same with validation functions.

Whenever the schema changes, all the rest will update accordingly. It's an important mind shift.

Treat zod Schemas as Single Source of Truth

Zod Schemas are the single source of truth for both typescript types, and interfaces - and runtime validation functions. Schemas should be updated first.

`zod` is powerful, but writing the schemas manually for existing JSON objects, especially big ones, can be time-consuming.

But that's what `quicktype` is for! You can get 80% work done instantly! 🥳

Depending on your need - whether you want to automate the process, or do it just one time, you can:
- use an online app
- use an IDE extension
- run a CLI script
- generate a script to be executed within CI/CD environment/tooling

And this is what we learn in this lesson! 🔥🔥🔥

Get started with zod quickly!

Generate zod Schemas Automatically using Quicktype App, Extensions and Scripts

Use quicktype app, extension or scripts to automatically generate zod schemas from existing json files. Save time and get started with zod quickly!

`zod` is a powerful library allowing to run runtime type-checks.

It's complementary to TypeScript, which does type checks in compile time.

In this lesson we create few schemas that represent primitive type values, along with `zod` utilities which make these more precise. We also create object schemas and nest one inside another.

All schemas are being validated against example values. We analyze how to interpret error messages in case of failures.

Perform Runtime Type-checks on Primitives and Objects with zod

Create zod schemas to validate primitive type and object type values in runtime. Analyze the errors to see how a value doesn't correspond to schema expectations

Garth Braithwaite

Search Results