Learn 11ty, Jspm and Twit

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

In this course we’ll learn how to create Twitter bots. We’ll first learn how to interface with the Twitter API using Twit.js, which allows us to post statuses, search tweets, and interact with followers. We’ll create several example bots that show the diversity of possibilities, using powerful tools such as RiTa.js, Google’s Cloud Vision API, and Tracery. We’ll learn how to tweet data from Google Spreadsheets, and to compose and tweet a song for an audio bot. We’ll also learn how to host our bot logic on Heroku and Docker. 

Twitter API Client for node

Supports both the REST and Streaming API.

twit

Create your own twitter bots

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

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

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

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

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

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

We’ll get a real-time stream of tweets, and learn how to filter a stream by keyword, location, and user.

Use the Twitter Stream API with Twit.js

In this lesson, our bot will tweet hello to the Twitter world! We'll do this by using Twit's POST method to post our status to the statuses/update endpoint.

Post Statuses with Twit.js

In this lesson, we’ll create multiple functions to request, download, and save photos and data from NASA's API, and then have our bot upload these photos to Twitter and post them along with their descriptions. We'll also learn how to tweet videos using a video from NASA’s space archives.

Tweet Media Files with Twit.js

We’ll learn how your bot can get its list of followers, follow people, and look up friendships. We'll use Twit's GET method to get our followers at the followers/list endpoint, to get the users we follow at the friends/ids and friends/list endpoints, and to look up our friendships with the friendships/lookup endpoint. We'll also use Twit's POST method to follow someone at the friendships/create endpoint, and to send messages by posting to the direct_messages/new endpoint. 

Work with Users in Twit.js

We’ll learn the basics of interacting with tweets, including retweeting, deleting, favoriting, and replying to tweets. We'll get our home timeline by using Twit's GET method to access the `statuses/home_timeline` endpoint, including the count parameter, which lets us get back a certain number of tweets. We'll also pass it a callback. We'll learn how to cycle through the data (the tweets) we get back and see what information is included. We'll learn how to retweet statuses by posting to `statuses/retweet` and including the tweet id. We can unretweet by posting to `statuses/unretweet` with the same tweet id. We'll also learn how to like a tweet by posting to `favorites/create` with a tweet id, and unlike a tweet by posting to `favorites/destroy` with a tweet id. We'll also learn how to reply to a tweet by posting to `statuses/update`, with a status that includes the handle of the user we're replying to and `in_reply_to_status_id` parameter, which is the id of the tweet we're replying to. We'll learn how to delete a tweet by posting to `statuses/destroy` with the tweet's id. 

Interact with Tweets with Twit.js 

We’ll learn how to search tweets with the Twitter Search API, using Twit's GET method to get the search/tweets endpoint. We'll use the query and count parameters to get the search term(s) and number of tweets that we want. We'll learn how to get exact phrases, multiple words, one of several words, emoticons, hashtags, photos/videos, urls, and how to remove words from our results. We'll learn how to implement the safe filter and how to filter by media, website, or date. We'll learn how to get recent results, popular results, results by location, and results by language. 

The search API returns for relevance, and not completeness. If you want all the tweets from a search term, you should use the stream API (which we'll go over in the next lesson). 

Use the Twitter Search API with Twit.js

We’ll go over the basic Twitter bot setup, including how to start a project from scratch, install necessary packages, and store our private keys in environment variables. 

Set Up a Basic Twitter Bot with Twit.js

jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader.

jspm

JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.

Topics

Instructors

Content Type