Learn Mdx, Mocha and Ruby

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern.

rails

Expanding on [Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1), this lesson will look at how to bootstrap AngularJS in a rails application as part of the asset pipeline. With Angular available, you'll see how to communicate with the Rails API using $resource.

Rails Todo API Part 2

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Rails makes an excellent choice for delivering data to AngularJS via REST apis. In this first lesson of a two part series, you'll see how to create a simple API for CRUD operations on TODOs using Rails. This isn't an introduction to Rails, and assumes you know the basics. 

Rails Todo API Part 1

Chai is a BDD / TDD assertion library for node and the browser that can be delightfully paired with any javascript testing framework.

chai

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

Setting up Unit Testing with Mocha and Chai

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use `describe` and `it` to outline your tests and make sure you don't break your library in the future.

Unit Testing with Mocha and Chai

In this lesson, we will use Chai's request method to test our Node application's API responses.
By the end of this lesson, you will know how to:
- install the prerequisites to use mocha and chai in your application
- test for HTTP status response codes
- test for a string of text on a page
- test for a json response and validate the properties of the object
- write tests that not only verify the response of your application, but the behavior as well


Test Node RESTful API with Mocha and Chai

Mocha is a feature-rich JavaScript test framework running on Node.js and in the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

mocha

Writing great ES6 style Promises for Node.js is only half the battle. Your great modules must include tests as well to ensure future iterations don't break them. In this lesson, I show you a simple ES6 Promise in Node.js, then walk you through creating tests in Mocha using chai and chai-as-promised to test both resolve and reject methods.

Testing ES6 Promises in Node.js using Mocha and Chai

In this lesson, you will learn how to verify your API server is returning HTTP 400 responses when clients submit incorrect data. Returning HTTP 400 ensures that your clients are notified of the incorrect usage. Testing for them ensures your API returns errors instead of incorrect responses when supplied with incorrect data.

Test for HTTP 400 responses with Mocha and Chai

Create a search directive with AngularJS and Rails. You'll want to take a look at the related [Rails TODO API Part 1](https://egghead.io/lessons/angularjs-rails-todo-api-part-1) and [Rails TODO API Part 2](https://egghead.io/lessons/angularjs-rails-todo-api-part-2). This is **not** a Rails how-to, so some knowledge there is expected to get up and running.

Search Directive with Rails

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

If you make a mistake when naming your database column, and have data that you want to keep unchanged. You can use the change method with the rename_column definition in your migrations files to update a single column name in your database.

Rename A Database Column with Ruby on Rails Active Record Migrations

Monica Powell, creator of React Ladies, talks through why someone would migrate from Remark to MDX before going into how to do that and what problems you might run into.

Migrating to MDX

Cole Bemis explains how MDX works by taking us though his own journey digging into what MDX does under the hood.

Demystifying MDX

Laurie Barth walks us through MDX v2's syntax by trying to break it. She starts at markdown syntax and takes us through increasingly complex applications of MDX, including passing dynamic props to .mdx files imported into other .mdx files.

MDX v2 Syntax

Jonathan Bakebwa introduces MDX support for VueJS and NuxtJS while also using Chakra UI Vue for MDX components

MDX and VueJS/NuxtJS

Prince Wilson, MDX contributor, takes us through one aspect of his personal site playground and dives deep into interactive code blocks.

Personal Site Playgrounds with MDX

Rodrigo Pombo introduces [Code Hike](https://codehike.org/) and talks through how Code Hike and MDX empower advanced scrolly telling techniques.

The X in MDX

Kathleen McMahon walks us through a real-world MDX digital garden implementation

Digital Gardening with MDX Magic

By leveraging the [dependency graph](https://nx.dev/l/r/structure/dependency-graph), [Nx](https://nx.dev) is able to understand which parts in the monorepo changed and thus trigger actions on those nodes, such as building an app, running tests or linting. This already works out of the box. However, with our portfolio application, all of our markdown articles reside in the root-level `_articles` folder. Those are not captured by the Nx dependency graph and thus Nx would not correctly detect a change to our Next.js site application whenever we change or add a new markdown article.
In this lesson, we learn how to register our `_articles` folder s.t. it appears as a dedicated node in the Nx dependency graph.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/publishing-a-next-js-app-to-vercel-with-nx-df81916548f5).

Register our Markdown Articles with the Nx Dependency Graph

**NOTE:** `workspace.json` is deprecated, you can update to `project.json` [here](https://nx.dev/deprecated/workspace-json).

One cool aspect of Next.js is its [fast refresh](https://nextjs.org/docs/basic-features/fast-refresh) support. Whenever you change some Next.js component it automatically refreshes the page without hard reloading everything. However, you might notice that whenever we change something within our MDX markdown files, fast refresh is not capturing that, hence we need to manually refresh the browser window.

In this lesson, we learn how to leverage a feature of Nx to create a "[custom Next.js development server](https://nx.dev/l/r/next/server#customserverpath)". We are going to use [chokidar](https://www.npmjs.com/package/chokidar) to watch our articles folder and then invoke a private API on the Next.js server instance to trigger a reload command.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/hot-reload-mdx-changes-in-next-js-and-nx-c05252cf450a).

Add Fast Refresh Support to our MDX Files with Nx Support for Custom Next.js Servers

Next.js is a minimalistic framework for server-rendered React applications.

Next.js is all about creating performant web applications. However, the more React components we pull into our MDX via `next-mdx-remote`, the heavier our JavaScript becomes which drains our site's performance. Also, while we might have quite a few React components to be included in our Markdown rendered content, we might not always use all of them in our articles.

In this lesson, we learn how to leverage Next.js dynamic imports to just pull the minimum necessary components into our final JavaScript bundle. Also, we look into why we might want to do deep imports into our Nx library setup to decrease the size of the bundle even more.

Prefer to read along as well? Here's the [accompanying article](https://blog.nrwl.io/component-hydration-with-mdx-in-next-js-and-nx-90f46ea0431c).

Search

Search Results