Learn 11ty, D3 and Wordpress

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

In this lesson, we'll clean up some of our placeholder elements. We'll then look at D3's ordinal scale to create a color scale that maps our regions to colors. We'll apply the colors based on region to our data points via the SVG `g`(group) element to apply the color to both our bars and their corresponding inline labels.

Create a Color Scale with D3's scaleOrdinal

Looking at our bars against each other with the x-axis as a guide gives us some relative information, but doesn't deliver the most precise values. In this lesson, we'll add additional labels to show the exact values of each data point in the context of the individual bars.

Clarify Data in D3 with Additional Labels and Rounded Domain Values

In this lesson, we'll see how we can add labels down the y-axis using our band scale. We'll see how to render the labels in React and how we can precisely position the labels based on values calculated by D3 and our scales.

Render a Y Axis for a Bar Chart with D3 and React

In this lesson, we'll take advantage of our `xScale` and the bottom margin to create an axis to start giving our data meaning. We'll access `ticks` from the scale and then use React to render and position the SVG `rect` and `text` elements to create the x-axis for our chart.

Render an X Axis for a Bar Chart with D3 and React

When applying scales to data elements in D3, it's common to combine the scale with an accessor function in order to apply the scale to the appropriate key on a data object. In this lesson, we'll create scaled accessors to refactor and tighten up some existing code.

Create Scaled Accessor Functions from D3 Scales

A band scale allows us to map a discrete set of values to a continuous range. In this lesson, we'll use a band scale in D3 to take the distinct "region" keys in our sample data and map those to evenly spaced and sized elements on our y-axis. We'll use this band scale to show a bar in the bar chart for each region, setting their size and position based on this scale.

Layout SVG Elements on a Y Axis with a D3 Band Scale in React

Drawing data accurately requires a consistent and precise mechanism for mapping data values to pixels on the screen. We can accomplish this mapping in D3 using scales. There are various scales available in D3, depending on your needs. In this lesson we'll using a linear scale to map a data domain of continuous values to continuous range of pixel values. We'll render a new SVG element, setting its width from our scale.

Set an SVG Element's Width Based on a D3 Linear Scale in React

When you want to add data visualizations to your web app, D3 is pretty much the accepted standard.

In this course, we'll start from scratch and build out a bar chart for some sample data using D3's utilities to wrangle the data and then we'll handle the rendering with React.

We'll start by laying out the SVG element that will hold everything, then we'll move on to creating scales that will give us the information we need to render our data as well as axes to give our data some meaning.

Along the way, we'll cover accessor functions, linear scales, band scales and finally, we'll use an ordinal scale to map data objects to colors.

This course certainly won't cover all of D3, but we'll cover enough of the fundamentals to give you a solid jumping off point for future D3 and React data visualization work.

Introduction to Create a Bar Chart with React and D3

Eleventy was created to be a JavaScript alternative to Jekyll. It’s zero-config by default but has flexible configuration options. Eleventy works with your project’s existing directory structure.

Eleventy uses independent template engines. We don’t want to hold your content hostage. If you decide to use something else later, having your content decoupled in this way will make migration easier.

11ty

Our Twitch Scenes will use the static site generator Eleventy (11ty) to leverage templating features for creating the scenes. This lesson covers the base project which is available in the project repo under `/lessons/00-base`.

This lesson includes templating for the stream details and initial styling of the details section within the scene layout. The primary templating language in use is [Nunjucks](https://mozilla.github.io/nunjucks/templating.html).

Setup Eleventy Project for Creating Twitch Scenes

WordPress is a free and open-source content management system written in PHP and paired with a MySQL or MariaDB database. Features include a plugin architecture and a template system, referred to within WordPress as Themes.

wordpress

We'll look at the minimum requirements to create your own theme. With two files, style.css and index.php, you have all you need to get started. We'll look at how to pass information about the theme to WordPress and how to set-up a direct link to the admin panel.

Create a Stand-Alone Theme in WordPress

WordPress has been around for a long time and powers a huge number of sites.

Just because WordPress isn't brand new doesn't mean it can't get the job done!

Running WordPress as a Headless CMS gives you the benefit of a great content creation experience on the back end with the powerful Gutenberg editor while allowing you to use a modern JavaScript framework on the front-end.

In this course, Kevin Cunningham will guide you through setting up WordPress as a headless CMS from scratch, as well as migrating from an existing WP site. You'll get practice with different WordPress content types, implement a GraphQL endpoint for querying data, and backup & deploy your site. All the while, you'll deepen your understanding of how headless WordPress approaches the relationship between content & rendering.

Using WordPress as a headless CMS turns it into a datasource ready to work with Gatsby, Next.js, or whatever else you want to build with. Your and your clients will be able to take advantage of WordPress's content editing experience, without having to settle for a cookie-cutter theme on the frontend.

With WordPress being decoupled from the rendered site, the database isn't hit for every request. This means faster performance and more security against WordPress exploits. You don't even have to host the editor at the same domain as the published site.

### While watching, consider...

- What are the tradeoffs of using a CMS for a site?
- Would headless WordPress work for me or my clients in this scenario?

WordPress as a Headless Content Management System (CMS) and GraphQL API

There are two approaches to dealing with an extensive media library when using a Headless WordPress solution. The first is that during the build step, the assets are queried and downloaded to a static folder that's served using a CDN. The second approach is that you use a third-party solution like Cloudinary to host your images.

In this lesson, we will use the [Cloudinary WordPress plugin](https://wordpress.org/plugins/cloudinary-image-management-and-manipulation-in-the-cloud-cdn/) to migrate all images from our existing posts to Cloudinary. This approach provides the benefit of managing the assets directly on the WordPress interface and using Cloudinary to serve them.

## Next steps for you to try:

- Add additional data via WordPress Plugins
- Build a frontend for your data with Gatsby or Next.js

Manage Media Assets in a Headless WordPress Site using the Cloudinary WordPress Plugin 

One of the strengths of WordPress is the commenting system. In previous lessons, we have seen how to get the comments alongside the posts.

In this lesson, will use Application Passwords, a WordPress plugin that allows authentication via non-interactive systems (in our case, using REST API) to provide authentication when posting a comment.

Using the auth functionality provided by our API client, we'll `POST` to Posts comments, resulting in a comment associated directly to the HTML of the post.

There are different strategies for publishing comments. The first one is approving and triggering a build using WebHooks. The alternative is using a third-party system, something like DISQUS. But the benefit of keeping the comment directly associated with the HTML is that it becomes indexable and searchable.

Add Comments to a Headless WordPress Post using Application Passwords

It is critical for development that your local environment accurately reflects your remote site. In this lesson, you will learn how to import plugins, configuration, and content from a remote to a local WordPress instance.

There are a few steps to do this:

- Create a fresh install of a WordPress Instance
- Copy the `wp-content` folder over to your local site
- Activate all the necessary plugins that allow the instance to function properly
- Export and import custom post types
- Upload the generate content XML file to the local site

Replicate a Remote WordPress Site Locally by Importing Content and Logic

Not all the data in a WordPress instance needs to be backed up since it is part of the core install and can be re-downloaded at any time. 

The two types of data that you should be concerned with backing up are the actual content of the site as well as the custom logic that you add to WordPress. All the custom logic lives in the `wp-content` folder, the only part of the file system that needs backing up.

Backup Your Content and Custom App Logic in a WordPress Instance

One of the benefits of Headless CMS is that you can build the frontend (almost) however you would like. For instance, you don't have to create a WordPress site. You can use any new cutting edge technology like React or Vue.

In this lesson, we'll add fake data to our WordPress instance with the Faker Press Plugin. We can easily add new users, posts, custom posts, and comments.

Having fake data provides additional information about how to structure our data in a Headless solution.

Add Fake Data to a WordPress Instance with the Faker Press Plugin

The benefit of GraphQL is to have all the data you need in one request, with nothing more or less.

If you had a REST API, you would typically receive the entire object back in your response. This leads to over fetching and can result in performance issues. With GraphQL, you only receive the data you explicitly request.

In this lesson, we will build a GraphQL query that queries only the essential data needed on the front end to display a post.

Build a GraphQL Query with Exactly the Data you need for a Posts Page

The same problem occurs as the [previous lesson](https://egghead.io/lessons/egghead-adding-custom-post-type-to-graphql?pl=headless-wordpress-4a14) with the blocks that Gutenberg exposes in our API with the GraphQL endpoint. 

In this lesson, we will show how to expose the Gutenberg Block data to the GraphQL layer by adding the `wp-graphql-gutenberg` plugin. There are a couple of things to note about the plugin. Whenever you use a new block type in your editor, you will have to update the blocks registry in the plugin so that it properly exposes the data in GraphQL. Also, when you query for block data you will need to be explicit in the attributes that you request. This behavior is different from REST where REST will serve you all the data available.

Expose Gutenberg Blocks to the Headless WordPress GraphQL Endpoint

The data that is added to the REST API through Advanced Custom Fields (ACF) is also not present automatically in our GraphQL endpoint.

You'll be used to the problem and workflow to fix the issue now.  

In this lesson, we will add the `wp-graphql-acf` plugin which allows us to expose ACF data to our GraphQL endpoint. There's even a UI to flip the switch here.

Expose WordPress Advanced Custom Field (ACF) Plugin Data to the GraphQL Endpoint

In this lesson, we will expose a Custom Post Type to the graphQL layer. This would normally be done in the Custom Post Type Plugin UI but if you browse the options you'll notice that there is no setting for GraphQL. This means we will need to write a custom function that exposes our user-created post type.

We will use `add_filter` in our `headless.php` file to expose the chairs post type. The filter we'll use is `register_post_type_args`. There are three fields that need to explicitly declared: `show_in_graphql`, `graphql_single_name`, `graphql_plural_name`.

Add a Custom Post Type to the GraphQL Headless WordPress API Endpoint

GraphQL is a popular solution for many web applications because of the flexibility it offers the client by giving you exactly the data you need.

And there's a WordPress Plugin for it! We'll find and install the plugin in the Plugin Directory.

You'll notice that the custom post types and the fields from ACF aren't exposed by GraphQL. These will need to be added manually.

Create and Test a GraphQL Endpoint for WordPress with wp-graphql

I've been using Cursor for a very long time and their "Agent" feature in Composer is fairly new, so I'm still getting used to it. But since Windsurf recently got onto the stage with their Cascade agent, they've slowly been gaining the mind share on the UX for coding agents. I decided to put them to the test by putting Windsurf and Cursor on the exact same screen side by side trying to accomplish the same task and to see which workflow I would prefer. I've been a diehard Cursor user for over a year now, so it's going to take a lot for me to switch to a different IDE. But I just have to say, even from this simple demo, Windsurf is looking pretty nice.

This lesson is just going to walk through creating a CLI using both tools to print out inspirational quotes and to explore how they approach the step-by-step of installing packages and running commands and setting up all the files we need to get this running.

Windsurf Cascade vs. Cursor Composer Agent Side-by-Side Comparison

I've been using Cursor as my primary editor for over a year now, but recently I've heard wonderful things about Windsurf AI Agent features. I decided to record myself building out something I've always wanted to make, but never made the time for.

In this lesson, I demonstrate how to leverage Windsurf's powerful agent process to create a fun word-guessing game inspired by Heads Up. Watch as I build an interactive application featuring category selection and word navigation, complete with data hosting on GitHub Gists and deployment to GitHub Pages - all in under 30 minutes (before editing the lesson down to 12 minutes)!

What makes this project particularly exciting is how Windsurf eliminates the typical friction points of development. While this game was always on my project wishlist, the overhead of setup, configuration, and deployment made it hard to justify the time investment. Windsurf's agent process handles all these pain points seamlessly, from managing URLs to orchestrating deployment.

This lesson perfectly showcases how AI agents can help developers bring their backlog of project ideas to life, transforming what would typically be time-consuming tasks into efficient, enjoyable development experiences.

Build a Word Game with Windsurf's Cascade AI Agent



Discover how to harness the power of Cursor IDE's Composer Agent feature to optimize your code. In this lesson, you'll witness an AI agent doing all the work to generate test suites, implement performance benchmarks, and create optimized function variations - all without writing a single line of code. You'll learn how to validate performance improvements through data-driven benchmarking, ensuring that optimizations are backed by concrete metrics rather than speculation. This hands-on demonstration showcases a groundbreaking approach to automated function development that combines the precision of test-driven development with the efficiency of AI-powered optimization.


Agent-Driven Development in Cursor: Testing, Benchmarking, and Optimizing Functions

This course is aimed for using `zod` effectively in projects based on TypeScript (both browser and node.js). The benefits you gain with this course is not just simply coding, but also understanding when/why/how should you perform runtime validation.

`zod` is the missing piece to TypeScript's capabilities, which can guarantee type-safety only in compile-time.

`zod` can be used whenever the compiler cannot guarantee what happens in runtime. And... it's a very frequent usecase, such as HTTP calls, websockets, etc.

In this course you get quickly up and running by:
1. using `zod` with primitives and objects
2. adapting `zod` quickly to existing projects thanks to automatic generators
3. changing the strategy frm type-first to schema-first
4. using error-throwing `parse` or non-error-throwing `safeParse` basing on your needs
5. applying `zod` to the most common usecase - validating API responses
6. handling errors the most convenient way (out of many!)

Take advantage of runtime validation with `zod`. Take advantage of the detailed lessons in this course 🔥

Effective Runtime Type Checks with Zod


Cursor can now automatically run commands in the terminal and walk step-by-step towards building out your entire project. You give it a goal, then it will suggest the commands you need to run and the files that you need to create and you can work with it to achieve what you're building. This lesson does a quick walkthough of using a Cursor Agent to build a project from scratch and guide it along the way. Cursor Agents definitely feel like a sneak peek at the future of programming!

Cursor Agents Initial Impressions - Allow an AI to Build Your Entire Project

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

Search

Search Results