Learn Elm, Puppeteer and Screen-reader

`elm-ui` is a language for layout and interface design. This is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way.

The novel part is that it does not require you to know CSS to be used. The API is very simple and can be learned quickly!

The approach taken by `elm-ui` is based on two big ideas: 
Getting the compiler to verify as much of the layout and styling as possible by defining them in Elm code
Enabling refactoring capabilities of Elm for UI code


Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

OpenGraph images are the images you see when you paste a link into a social platform and it "unfurls" into an image, title, and description. This happens on Twitter, Discord, Slack, and many other platforms. This collection goes over everything from designing OpenGraph images in Figma, to implementing them in CodeSandbox, to returning headless browser screenshots from Netlify Functions, and finally using Cloudinary as a write-through cache. 

You will come away from this collection with the ability to ship an API that you can use on any of your sites, and also on-demand, that can generate images for not only OpenGraph unfurls, but also for Instagram, GitHub, and more. Using headless browsers with playwright to generate our images means we get full access to all the responsive power of CSS and all the logical power of JS to handle layout, importing assets like pngs, choosing different fonts, and more.

The image below is generated via the project you'll build and deploy in this course

![An example opengraph image](https://relaxed-payne-d1bfbe.netlify.com/opengraph?title=Building%20an%20OpenGraph%20image%20generation%20API%20with%20Cloudinary%20Netlify%20Functions%20and%20React&tags=figma,netlify%20functions,playwright&author=chrisbiscardi)

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

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

A large number of people are unable to use the web effectively due to an impairment or disability.

As developers there are several tools and techniques we can use to make our web applications accessible, ensuring a great user experience that includes everyone.

We all agree that Accessibility is important. However, it’s a broad landscape and can be overwhelming figuring out where to start!

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

After this course, you'll have a jump start on auditing and fixing accessibility issues in your applications and gain a better understanding of your target users and how to approach your web app design from their perspectives.


Develop Accessible Web Apps with React

Functions are an important building block in Elm. In this lesson we will review stateless functions, function composition, anonymous functions, Currying, and more.

Functions in Elm

Elm includes a data type called `Maybe` which is useful for working with values that may, or may not exist. This lesson shows a simple case where maybe types are encountered, and how to make them useful.

Using "Maybe" in Elm for values that may or may not exist

screen-reader

There are many techniques for hiding content in user interfaces, and not all are created equal! Learn how different hiding techniques in HTML, CSS and ARIA impact keyboard and screen reader users in addition to visual display. As a bonus, we'll also take a look using a screen reader on a mobile device.

How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Understand the three basic parts of making HTTP requests in Elm: 1) Building the request, 2) Writing a JSON decoder, 3) Sending the request using the Elm runtime, and reacting to the results with messages.

HTTP requests are just pieces of data in Elm. When we want to send them, we hand them off to Elm's runtime, and it notifies us when the request is done. An important part of working with HTTP requests that fetch JSON is JSON decoding, the process by which we can turn untyped JSON data into Elm types that are safe to work with.

Specs:

- Editor: Atom
- Theme: [Nebula (with Nebula syntax theme)](https://atom.io/themes/nebula-ui)
- Font: [Iosevka with ligatures enabled](https://github.com/be5invis/Iosevka)
- Plugin used for imports: [Elmjutsu](https://atom.io/packages/elmjutsu)
- Plugin used for formatting: [Elm-format](https://atom.io/packages/elm-format)
- Plugin used for linting: [linter-elm-make](https://atom.io/packages/linter-elm-make)


Make an HTTP Request in Elm

Before writing any Elm we need to first install the runtime locally. In this lesson we install the Elm runtime locally and set up a simple application to verify everything is working properly.

Installing and setting up Elm

We are going to take a high-level look at what an Elm application looks like? We show how to structure apps, as well as, Elm’s elegant syntax by building a small app.

Elm in 7 minutes

Decoding JSON strings in Elm is a 2-step process:

1. Create a "recipe" for the decoding
2. Perform the decoding

This lesson gives a couple basic examples of the two steps in action.

Decode a List of Numbers From a JSON String in Elm

List are an important collection in Elm. In this lesson we learn to create list as well as apply functions to filter, add, and transform them.

List in Elm

**Notice**:  This lesson uses Elm 0.17!

[Here's a document about the important differences between 0.16 and 0.17](https://github.com/elm-lang/elm-platform/blob/master/upgrade-docs/0.17.md).

This lesson gives a rapid-paced introduction to what's known as the Elm Application Architecture. You can read about it in greater detail here:

[guide.elm-lang.org](http://guide.elm-lang.org/architecture/index.html).

We'll build a counter that utilizes the standard Elm combination of a model, a view, and update function.

See the linked code for a good starting place.

Build a Tiny App Using the Standard Elm Architecture

This lesson will take you from nothing to a small Elm app that prints text to the browser.

Create your first web page with Elm

Records are important data structures in Elm. In this lesson we learn to create a record as well as describe the record by creating a type. We will also see how these new types can be used to clean up our annotations.

Records in Elm

In this lesson we will take a basic application, bootstrapped with [create-elm-app](https://github.com/halfzebra/create-elm-app), and begin converting the `div`s and `h1`s into `style-element`s.

Style elements separate our styles from the layout and positioning of elements. The `Element` module gives us everything we need for our view while the `Style` module will be the base for creating our stylesheet.

Render a Basic Element with style-elements in Elm

Turning JSON strings into types, also known as JSON Decoding is an important part of using Elm. It allows the programmer to use json-encoded data while staying completely aware of when the JSON might not match the programmer's expectations, all without throwing a run-time error! This lesson will show the viewer how to turn a simple JSON object into an analogous Elm record and use it to render some content to the screen.

Turn a JSON string Into Typed Data in Elm

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

puppeteer

In this lesson we are going to send commands to the chromium browser with Puppeteer. These commands will enable us to calculate both the total number of CSS stylesheets used on the page and the ruleUsage for each of those stylesheets. With these metrics we will be able to calculate the percentage of unused CSS on the page. 

Get the Percentage of Unused CSS on a Page with Google's Puppeteer

In this lesson we are going to use the firstPaintTime metric from chrome's load times, as well as the navigation start from the W3C window metrics, to calculate how long it takes a page to paint. We will set up a quick function and test it out on google.com

Calculate a Page's First Paint Time with Puppeteer

In this lesson we are going to use Google's Puppeteer to gather metrics about a page's load time. We'll use a high level date subtraction method as well as gather data from the window performance timing. Then see how throttling the network to 3G affects the page's load time. 

Get a Page's Load Time with Puppeteer

It can be helpful when automating tests, metrics, and integration tools to know not only how much JavaScript there is on a page but to calculate how much is not being used. We are able to calculate the percentage of JS used by getting metrics from the window object. 

Get the Percentage of Unused JS on a page with Puppeteer

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

chrome-devtools

What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1: 
- https://www.w3.org/TR/wai-aria-1.1/#namecalculation
- https://www.w3.org/TR/accname-1.1/

Search

Search Results