 Resources from Will Mendes in 2024

Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads.

CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page. 

Follow the steps in this course and you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations, focusing on Web Accessibility and Web Semantic.

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

Creating Accessible Skeleton Loader Animation from Scratch with HTML and CSS

Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

node

Tests are really important in the software development cycle. But how we can test if our API - or even a page - will support the web traffic and requests our users will create by accessing them?

In this video, you will learn how to create HTTP load and benchmarking tests in Node.js using the autocannon package. With that, we can make sure our API is not consuming too much memory, CPU, or any other resource that can cause slow responses.

Create Load Tests in Node.js Using Autocannon

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

Accessible Rich Internet Applications Suite — WAI-ARIA — defines a way to make Web accessible to people with any type of disabilities and it’s also a good practice for skeleton loaders.

Attributes such as `tabindex`, `role`, and `aria-*` are essential for assistive technologies such as screen readers. So that, users with any type of visual disabilities can understand that the specific state of the fragment of your page is currently loading, having that validated by using different tools, such as Lighthouse integration via Chrome Devtools, as an example.

Use WAI-ARIA Attributes to improve Web Accessibility of your Skeleton Loader

Skeleton screens show users that content is loading, offering a vague preview of how content will look once it fully loads. Also, CSS Animations are crucial for the perceived performance purposes since it shows for the user the content is loading by using animations as feedback for whoever is accessing the page. In the end, you will learn how to create a beautiful and pleasant Skeleton Loader for your web app using CSS animations.


Create Skeleton Loader using CSS Animations

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 case, you can use `prefers-reduced-motion` CSS media query to improve web accessibility in your web app by adding this support, respecting the user’s OS option Reduce Motion for people with disabilities.

Use prefers-reduced-motion CSS Media Query to Improve Web Accessibility in your App

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

There are some really known patterns to migrate packages in large applications. You might find some code referencing to a different package (such as `@my-namespace/my-package/next`) or specific branches (like `@my-namespace/my-package#next`). 

Anything that helps during package migrations or bumps having several majors of differences.

The good news is that you can have it done directly via NPM! What can be done in this case is an idea called "package alias". So you can have multiple versions of the same package running in your app and you can work on the upgrades mitigating possible issues.

Topics

Instructors

Content Type

Will Mendes