Learn 11ty, Angular-cli and Clojurescript

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

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

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

angular-cli

Generating components with the Angular CLI allows for scaffolding applications quickly. Learn what will be generated for you and how to generate quickly with shortcuts in the desired directory.

Generate components with the Angular CLI

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Getting started with angular development can be difficult, with a lot of moving parts. Allow the Angular CLI to handle those complexities so you can focus on creating great applications.

In this lesson you will learn how to install the Angular CLI from npm, create a new application, serve the new application in the browser and edit it with live-reload.

Install the Angular CLI to Create and Serve an Angular Application

In this lesson we will our `UiModule`, that has a `LayoutComponent`, `HeaderComponent` and `FooterComponent`. 

We generate `UiModule` by running the following command:
```
ng generate module ui --module app
```

This generates the new module and imports it in our `AppModule`.

We'll create the `LayoutComponent` using:
```
ng generate component ui/containers/layout
ng generate component ui/containers/header
ng generate component ui/containers/footer
``` 

We update our `AppRoutingModule` and add this component to our first route to make it visible. 

The `HeaderComponent` and `FooterComponent` are referenced in the LayoutComponent and we implement the actual templates!

Create Application Layout with Components in an Angular CLI Project

In this lesson we will add the `ProductModule`, where our actual application code will live.

```
ng g m product --routing
``` 

We will add 2 routes to `AppRoutingModule`,  the first is a redirect route that redirects any unhandled paths to `products`. The second route is the actual `products` route, that 'lazy-loads' the `ProductModule`.

We use the `ng` command to create the `ProductListComponent` and `ProductDetailComponent`, which are so called 'containers components'.

Container components are responsible for fetching data, handling routes and passing data into the 'presentational components' 

We will add 2 routes to `ProductRoutingModule`,  one to each of our new Container Components.

Lastly we will use  `ActivatedRoute` in `ProductDetailComponent` to fetch the `:id` from the route.

Create Container Components for Retrieving Data in an Angular CLI Project

In this lesson we will create the presentational components for the product list and detail pages. These components define how the data is displayed and are being referenced from the Container components.

The new components are `ProductsComponent` and `ProductComponent`.

After using `ng generate` to generate these components, we will update the `ProductListComponent` to invoke `ProductsComponent` and pass in our local `products` array.

In `ProductsComponent` we loop over each of the items we get from the `@Input() products` and pass each one into our `ProductComponent`.

The `ProductComponent` has 2 `Inputs()`, one for the `Product` and a `boolean` that toggles showing the product details. This is useful because don't want to show product details in the list view.

After the `ProductComponent` is implemented the last step is to reference it from the `ProductDetails` container component. 

Create Presentational Components for Displaying Data in an Angular CLI Project

In this lesson we will create the `ProductsService` that is responsible for the interaction with our API. 

We will inject the `HttpClient` that we get from `@angular/common/http`. To make this working we need to import `HttpClientModule` in our `AppModule`.

We define a `getProducts` and `getProduct` method so we can get a list of products and an single product which we will use in respectively the `ProductList` and `ProductDetail` components. 

In both components we will use the `ngOnInit` lifecycle hook to invoke the methods on the service, and retrieve the data by subscribing to it. 

[Link to product api used in lessons](https://github.com/beeman/egghead-products-api)

Create an Angular Service to Retrieve Data from an API 

In our 'container components' we use the `ngOnInit` lifecycle hook to subscribe to our service. While this works, there is a downside: the components get loaded before the data is available, which results in that we show empty components. This is particularly visible on slow connections.

To fix this we create a `ProductsResolver`, and implement the `resolve` method that fetches the data from the service. In `ProductRoutingModule` we add the `resolve` property to our route, and add make the `ProductsResolver` resolve and store the data in the `products` property.

Inside our `ngOnInit` in `ProductListComponent` we can now subscribe to the route data, which makes the usage of the service in this component obsolete.

We do the same for the `ProductDetailComponent`. After this there are no longer empty components, the router will not navigate after the data is retrieved.

Create Angular Resolvers to retrieve the product data from the Service

In this lesson we will install the latest version of Angular CLI and use the `ng new` command to scaffold out the application.

Scaffold a New Angular App using Angular CLI

In this lesson we will add Bootstrap to our project. This allows us to focus on building our app without having to spend too much time writing custom CSS.

We will use grab the URL too the Bootstrap CSS from [bootstrapcdn.com](https://www.bootstrapcdn.com/)  and add it to our project by adding a `@import url('')` statement to `src/styles.scss`.

Add Bootstrap to an Angular CLI Project

The default Angular CLI configuration generates components that consist of 4 files. The component class, an HTML template, a stylesheet and a spec file that contains the unit test.

In order to keep our components concise we  update our `AppComponent` and move the template and style from an external file to inline. This allows us to delete the 2 external files. 

We can configure our project to generate the template and the style 'inline' by default.

To do this we run the commands:
```
ng config schematics.@schematics/angular.component.inlineStyle true
ng config schematics.@schematics/angular.component.inlineTemplate true
```

The changes are made to `angular.json` in the project root.


Configure Defaults for Generating Code with Angular CLI

A default Angular application ships with two default environment files that can store constants that are different for each environment, one for development and the other for production.

We will define the `apiUrl` constant in both development and production environments. 

The value for development is  `http://localhost:3000/api` and the value for production is `https://egghead-products-api.now.sh/api` .

In `angular.json` we can find a `configurations` object where our `production` build is defined. We can see that in a production build, the `environment.prod.ts` will replace `environment.ts`.

[Link to product api used in lessons](https://github.com/beeman/egghead-products-api)

Use the Angular CLI Environment to Define Constants

In this lesson we will add Server Side Rendering to our application using Angular Universal.  We'll build a simple Express application and see how Angular Universal builds and renders our app on the server. 

Since Angular CLI v6 we can simple run `ng generate universal --clientProject store`, where `store` is the name of our app.

In `angular.json` in the `architect.server` object we define a `configurations` object, to make sure the correct environment gets copied on a production build.

To make Angular Universal with lazy loaded modules we need to add the `ModuleMapLoaderModule` to `AppServerModule`, which we get after installing ` @nguniversal/module-map-ngfactory-loader` from npm. 

```
npm install --save @nguniversal/module-map-ngfactory-loader @nguniversal/express-engine
```

In the project root we implement a `server.ts` and define our simple express server.

When we run the new server we see that the app gets rendered before it hits the browser.

Server Side Render an Angular CLI Project with Angular Universal

In this lesson we will add support for deploying our application to [now.sh](https://zeit.co/now).

We will create a `now` object in package.json where we configure the name, the alias and the list of files we want to deploy.

We create an npm run-script called `now-build` and set the value to `true` to skip building the project on `now.sh`. The second run-script called `now` invokes `now deploy && now alias`. 

After this we sun `npm run build && npm run now` to build and deploy our app!

Deploy an Angular CLI Project to now.sh

In this lesson we will create a `UiService` and inside that service we create some application defaults, import the `Title` and `Meta` services from `@angular/platform-browser` and create a function called `setMetaData`.

This function will set the metadata of the application based on the `config` parameter.

We set some defaults and define a list with tags. We then loop over the tags and invoke the `updateTags` method from the `Meta` service.

Once our service is ready we update the `ProductListComponent` and `ProductDetailComponent` to dynamically set the meta data by using the `tap` operator in the `pipe` from our Subscription.  

After building and deploying the app we see that the meta data gets updated, and we can now share the app over Social Media and get rich social previews.

Add dynamic metadata to an Angular CLI Project

In this lesson we will add a Service Worker and convert our app into a Progressive Web Application (PWA). We can do this by running `ng add @angular/pwa`.

We will use Lighthouse to generate a score and gradually improve this score.

Using `ngsw-config.json` we define which `assetGroups` and `dataGroups` should be cached. 

In `index.html` we add a `noscript` tag so there won't be a blank page if the javascript is disabled, and lastly we add `robots.txt` to make sure our site can be indexed.

Make a Progressive Web Application from an Angular CLI project

ClojureScript is a compiler for Clojure that targets JavaScript. It emits JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

clojurescript

In this lesson I show you how to get and manipulate command-line arguments in Clojure/ClojureScript by writing a small program that greets you by name. I also show how comments are delimited, how to get a value out of a sequence, how to bind a symbol to a value, and how to define a function.

Handle command-line arguments in ClojureScript


Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

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.

Topics

Instructors

Content Type

Free or Pro