Learn Firefox, Reason and Xstream

This course foremost will teach you about the syntax and semantics of the programming language Reason or also referred to as ReasonML. In addition, the course touches on best practices recommended by the official documentation. Each lesson is focusing on a specific feature, concept or best practice and can be watched independently. Still, the whole course is carefully crafted, and each lesson builds up on the previous ones.

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems.

reason

Get Started with Reason

Node.js is a well established server runtime that many companies are using worldwide. Express.js is a server framework for Node.js used by over 5 million projects. ReasonML is a type-safe functional language that compiles to Javascript.

This playlist collects the basic pieces of information a programmer needs to get started building servers in ReasonML on Node.js and Express.js. Follow along to learn how to get the speed of Node, combined with the added type-safety of Reason.

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

Making an HTTP server in ReasonML on top of Node.js

Ongoing playlist.

Don't be afraid to watch videos at 1.25x if the pace is too slow!

ReasonML Applications for the React Developer

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

Throughout the last year, the use of React hooks has taken the world of web development. Hooks provide users with an easy way to handle interactivity within ReactJS applications, so it's no surprise that the latest release of the ReasonReact library makes great use of them. 

In this lesson, we'll get started using ReasonReact `0.7.x` by scaffolding out an application using the [BuckleScript](https://bucklescript.github.io/) command-line tool. Once scaffolded, we'll go through the steps needed in order to properly run our application within a development environment that is ripe for productivity!

### Resources
* [ReasonML Docs](https://reasonml.github.io/docs/)
* [ReasoNReact Docs](https://reasonml.github.io/reason-react/en/)
* [BuckleScript Docs](https://bucklescript.github.io/)

Up and Running with React Hooks inside of a ReasonML 

Any React developer will agree that 2019 was the year of that hooks took the library by storm. Luckily for us, the ReasonRect library makes it possible to hooks within the context of a ReasonML application.

In this lesson we will take a test drive of the `useReducer` hook within a ReasonML application. By the end, we'll have learned how to define our actions using variants, use records to shape our state, and more!

### Resources
* [ReasonReact Docs] (https://reasonml.github.io/reason-react/en/)
* [ReasonReact Blog - Support for hooks in 0.7.0 Release](https://reasonml.github.io/reason-react/blog/2019/04/10/react-hooks)



Use ReasonMLs Variant & Record types with ReasonReact's useReducer hook to Manage State

When working with traditional React, we often pass functional stateless components the `props` object as an argument. Although there are a few minor differences when working in the context of Reason, the act of passing `props` to a component is done in an extremely similar manner.

In this lesson, we will get a first-hand look at just how similar these processes are by walking through the steps of creating a React Component in ReasonReact. By the end, you'll have developed an understanding of ReasonReact's "named args" syntax which it uses for creating components and you'll have created a re-usable Layout component that can be used to share layout throughout an application.

### Documentation
* [ReasonReact Homepage](https://reasonml.github.io/reason-react/)
* [ReasonReact Docs - Components](https://reasonml.github.io/reason-react/docs/en/components)


Create a Layout Component for Displaying Child Components Inside of a ReasonReact App

One of the key benefits of BuckleScript is the ease in which it makes the process of porting JavaScript libraries so they can be used within the context of a ReasonML application. The Reason Package Index, or [redex](https://redex.github.io/), provides a central place for browsing all available packages. Additionally, creating your own BuckleScript bindings is a straight forward process that also provides value in the form of knowledge surrounding the inner-workings of the library at hand.

In this lesson, we learn how to integrate the emotion css-in-js libray into our project by installing the `bs-css` package. Once installed, we'll create a `.re` file for our style rules and see how we can add global css, as well as styles for specific css classes which we'll target using React's `className` prop.

### Link
* [ReasonReact Docs](https://reasonml.github.io/reason-react/docs)
* [`bs-css` - GitHub](https://github.com/SentiaAnalytics/bs-css)
* [`bs-css` - Redex](https://redex.github.io/package/bs-css)


Implement a Sticky Footer within a ReasonReact App Using the bs-css BuckleScript Package

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

ReasonML is a fantastic way to write Javascript! But it doesn't yet have a built-in async / await syntax. Furthermore the built-in libraries for working with Javascript promises are awkward to work with, and produce code that's hard to read. This lesson will teach the viewer how to use the "bs-let" language extension (called a PPX) to achieve readable, easy to write promise-based code.

Async / Await in ReasonML

Although ReasonML has built-in libraries for working with JSON, they are low-level and difficult to use by hand. The Decco library offers automatically generated JSON decoders, and produce a result that keeps the programmer safe at runtime by telling them whether the data they got matched the shape of the data they expected. 

Automatically decode JSON into records in ReasonML using Decco

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

This lesson shows how the Serbet server library for ReasonML and Node.js makes handling JSON request bodies, and responding with JSON request bodies a simple task.

Handle JSON request bodies and send JSON responses from a Node.js server using ReasonML

Decco is a great library for automatically generating JSON encoders and decoders, but most real-world projects will quickly run into the need to add custom data types that Decco doesn't ship with support for. This lesson shows how to simply add a custom data type by implementing a codec that reads and writes Javascript dates as floats.

Write a simple custom JSON decoder for Decco in ReasonML

Decco is a language extension that automatically generates JSON encoders and decoders from type signatures. When adding adding custom Decoders, the error messages that the compiler produces can be quite confusing. This lesson shows the viewer how to use explicit type signatures to narrow down where an error might be coming from in custom codec code. This same pattern can be applied whenever confusing error messages come from code that is written without explicit type signatures.

Working with cryptic error messages from ReasonML when writing custom Decco decoders.

This lesson shows how to use the `serbet` npm package to write a simple Node.js http server in ReasonML by implementing a simple "hello world" endpoint. Serbet is a convenient wrapper around Express.js. It's a young library, but its patterns are already used in production code.

Make a basic server with ReasonML and Node.js

The BuckleScript compiler recently reached a new milestone with version 7. In this lesson, we walk through the process of upgrading an existing application to the latest version using `yarn` (or `npm`).


### Resources

[BuckleScript Blog - What's new in v7](https://bucklescript.github.io/blog/2019/11/18/whats-new-in-7)

[BuckleScript Blog - Holiday Release Post](https://bucklescript.github.io/blog/2019/12/20/release-7-02)

!![BuckleScript Docs](https://bucklescript.github.io/docs/)

Migrate an Existing BuckleScript Project to bs-platform v7

Tailwind is a utility-first CSS framework for rapidly building custom user interfaces.

tailwind

This lessons shows how to dynamically add a red border to an input when a validation error pops occurs using ReasonReact, Tailwind, and re-classnames.

Dynamically style an input border with Tailwind and ReasonReact

A live stream where Sean shows John what it takes to port Reason to JavaScript

Convert an App Built with Reason & ReasonReact into JavaScript & React.

Cascading Style Sheets bring order and beauty to our applications.

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

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.

Topics

Instructors

Content Type