Learn 11ty, Asp-net and Edge

Eleventy, or 11ty,  is a simple yet very powerful static site generator. It does not require any config to get started.

This what it will take you to get an 11ty project running.

```
npm install -g @11ty/eleventy
echo '# Page header' > README.md
eleventy
```

After watching this collection you will be able to:

* Bootstrap a simple 11ty website
* Use 11ty layouts
* Chaining multiple 11ty layouts
* Use 11ty Collections
* Create pages from data

...and much more

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

Getting Started with Eleventy

Learn how to make flexible customized Twitch Scenes using the static site generator Eleventy (11ty), CSS, and ComfyJS.

Throughout this course, you'll create scenes for preshow, host, and main desktop display streaming purposes. Using ComfyJS, we'll add embedded chat and be able to create responses to chat commands. Finally, we'll see how to actually setup the scenes in OBS to prepare to use them for your stream.

Bonus: you'll learn a bit more about CSS grid layout, and also the "cicada principle" to be able to show the commands randomly across the scene!

Develop Custom Twitch Scenes and Setup in OBS

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes.

These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator.

By the last lesson, you'll have learned how to:
- define custom `input` and `output` directories
- create a layout that accesses front matter variables
- watch for Sass changes and include CSS in the build proces
- create an 11ty collection using `tags`
- define front matter for an entire collection
- make and apply a filter to a collection
- generate pages from an external data source, such as a CMS or API

Build An Eleventy (11ty) Site From Scratch

edge

Coding for accessibility? You should get familiar with the accessibility tree, a structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers. There are multiple tools for visualizing this tree; in this lesson we'll look at Chrome and Microsoft Edge. For more on Accessibility APIs, refer to this [amazing article by Leonie Watson](https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/). For a how-to on setting up the Chrome Accessibility Inspector, visit [bit.ly/chrome-a11y](http://bit.ly/chrome-a11y).

What is the Accessibility Tree?

ASP.NET is an open source web framework for building modern web apps and services with .NET. ASP.NET creates websites based on HTML5, CSS, and JavaScript that are simple, fast, and can scale to millions of users.

asp-net

If you want to improve a REST API beyond GET/POST&PUT and DELETE the next step would be adding the push functionality to send new data into your web applications. With ASP.NET Core and SignalR you can add this functionality with ease and keep your application up to date without letting the clients reloading their page manually.

[signalr npm](https://www.npmjs.com/package/@aspnet/signalr), [signalr Core](https://www.nuget.org/packages/Microsoft.AspNetCore.SignalR.Core/)

[archived] Expose Values for Real-time Consumption with SignalR in ASP.NET Core

ASP.NET Core SignalR can push events from the server into your Client Application. In this video we will build a client side Todo app with Angular which consumes events from a ASP.NET Core SignalR backend to see how we can consume and synchronize data between our client side Angular Applications.

Consume ASP.NET Core SignalR values in an Angular Application

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

Providing real time information to your Javascript apps with [ASP.NET Core SignalR](https://www.npmjs.com/package/@microsoft/signalr). With ASP.NET Core and SignalR you can add real time functionality with ease and keep your application up to date without letting the clients reloading their page manually.

Expose Values for Real-time Consumption with SignalR in ASP.NET Core

In this video, you will learn how to use layout chaining with eleventy.
Layouts in eleventy can use other layouts. You can also use a different template engine across layouts. This is very handy if we want to wrap some pages with extra markup but not all the pages.


for more information check out the eleventy [docs](https://www.11ty.dev/docs/layout-chaining/)

Use Layout Chaining in eleventy

In this video, you will learn how to use the collection feature in eleventy.
Collections will allow to group content under one tag and loop through it in your template files

for more information check out the eleventy [docs](https://www.11ty.dev/docs/collections/)

Use Collections in eleventy

In this video, you will learn how to create pages from data in eleventy. a data source can be a JSON file or a js file.

for more information check out the eleventy [docs](https://www.11ty.dev/docs/pages-from-data/)

Create pages from data in eleventy

In this video, you will learn to bootstrap an eleventy project.

we'll start from an empty directory, initialize it as an npm package, install `@11ty/eleventy` package and create the website entry point.

Eleventy can compile multiple file formats, HTML, markdown, liquid, and njk.

Check out the eleventy [docs](https://www.11ty.dev/docs/) for more information.

Bootstrap an eleventy project

In this video, you will learn how to use the eleventy layouts feature.
Eleventy Layouts are special templates that can be used to wrap other content.


for more information check the layouts [docs](https://www.11ty.dev/docs/layouts/)

Use eleventy layouts

Begining from a brand new project, learn how to install Eleventy (11ty), and add `develop` and `build` scripts. Next, define a custom configuration to set preferred input and output directories. Then create a home page file and your first layout while learning how 11ty handles mixing templating languages.

Create an Eleventy (11ty) Site From Scratch

Eleventy (11ty) is able to run any JavaScript or Node functions at build time. This makes it possible to source external data such as from a headless CMS or other API. Learn how to generate pages from data pulled from a mock CMS using the 11ty `pagination` method and designate the data as an 11ty collection. You'll also learn how to define variables for the page using `eleventyComputed`, and then write a `for` loop to output a link to each page.

Generate Eleventy (11ty) Pages From External Data

Learn how to add Sass to an Eleventy (11ty) project including directing 11ty to re-compile when Sass changes are made. This step involves adding two new functions to the `.eleventy.js` configuration: `addWatchTarget()` and `addPassthroughCopy()`. Then, define the link to the compiled CSS file within an 11ty layout.

Add Sass Compiling and Watch for Changes in Eleventy (11ty)

Create a blog directory with posts for your Eleventy (11ty) project, and learn how to define the posts as an 11ty collection using `tags`. Then make a blog index page and write a `for` loop with Nunjucks to output a list of each post linked to the post page.

Define an Eleventy (11ty) Collection to Create a Blog

Filters in Eleventy (11ty) are a way to mutate data including string variables or arrays such as collections. Learn to create a filter for use on a collection which will select a random item from the collection.

Apply a Filter to an Eleventy (11ty) Collection

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).