Learn Cloudflare, Firefox and Twit

Cloudflare Workers is a serverless application platform that enables you to create and deploy functions to Cloudflare's Edge Network.

Unlike other serverless providers that only have regional data centers, Cloudflare's Edge Network consists of hundreds of servers all over the world.

Cloudflare Workers is a powerful platform, and this course serves as a great introduction for what it can do.

Follow along with Kristian Freeman as you build a localization engine that renders data based on the Edge location nearest to the application's user.

After this course, you'll be ready to start experimenting with your own Cloudflare Workers projects. *Need an idea?* *[Check out the suggested Portfolio Project for this course.](https://egghead.io/projects/introduction-to-cloudflare-workers)*

Cloudflare secures and ensures the reliability of your external-facing resources such as websites, APIs, and applications. It protects your internal resources such as behind-the-firewall applications, teams, and devices. And it is your platform for developing globally-scalable applications.

cloudflare

Introduction to Cloudflare Workers

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

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

The axe browser extension (for Chrome and Firefox) is an immensely helpful tool for auditing web pages for accessibility defects.  This extension is powered by the same rules engine developed by Deque Labs in their axe-core open source library which also powers the react-axe development tool.  Each reported defect offers a ton of information about the defect, why it's a problem, severity level, groups impacted and ways to fix the defect.  This can be a great resource for learning more about how to write accessible code.

## Resources
* [Chrome browser extension](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)

Use the axe Browser Extension to Audit a Web Page for Accessibility Issues

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. 

aria

tota11y is a great tool to add to your accessibility auditing toolkit.  tota11y is a browser extension available for Chrome and Firefox that helps visualize accessibility violations (and successes), while educating on best practices.  It can make for a really helpful supplement to other accessibility auditing tools.

## Resources
* [About tota11y](https://khan.github.io/tota11y/)
* [Chrome browser extension](https://chrome.google.com/webstore/detail/tota11y-plugin-from-khan/oedofneiplgibimfkccchnimiadcmhpe?hl=en)
* [Firefox browser extension](https://addons.mozilla.org/en-US/firefox/addon/tota11y-accessibility-toolkit/)

Use tota11y to Visualize Accessibility Issues

Using our accessibility auditing toolkit we can find issues concerning landmark regions in our web application.  The react-axe library will report findings in the JavaScript console of the browser.  We could also run the axe browser extension to see the same results.  The tota11y browser extension will annotate any landmark regions on the page and therefore if none are annotated it may indicate that they aren't any (_NOTE: tota11y will only annotate landmark regions using aria roles and not those using HTML5 elements_).  Finally using the VoiceOver Rotor in Safari will show us whatever landmark regions have been defined in the Landmarks menu. 

Test for Landmark Region Accessibility Issues in React

Cascading Style Sheets bring order and beauty to our applications.

Firefox DevTools has an awesome feature that helps you determine Inactive CSS, to know why it's inactive, it gives you hints on how to fix it, and even links to documentation for additional help.

Understand why CSS has no effect with the Inactive CSS rules indicator in Firefox DevTools

Using NPM, you can install Cloudflare Workers' CLI (command-line interface), Wrangler, by typing `npm install -g @cloudflare/wrangler` into your command line. Wrangler allows you to generate and publish Cloudflare Workers projects. We'll also use the `wrangler login` command which will give you a link to authorize Wrangler. This will set up an API token specifically for your Wrangler installation that will allow you to publish and read all the Workers and Workers KV information that you need.

Install and Configure the Cloudflare Workers CLI Wrangler

To deploy a Cloudflare Workers serverless function, you'll need to sign up for a free Cloudflare Workers account at [workers.cloudflare.com](http://workers.cloudflare.com/), and select your unique workers.dev subdomain to deploy your functions to.

Create a Cloudflare Workers Account

Wranglers generate command, `wrangler generate`, allows you to create new Cloudflare Workers projects. Using the URL parameter, you can also generate new projects based on Cloudflare's starter templates, or open-source projects created by other developers, but for now, you will just use the default. To do this you'll only need to give it a name, for example, `wrangler generate my-worker`,  this will create a new project called my-worker. 

Generate New Cloudflare Workers Projects with Wrangler's generate Command

We'll take a look at the default code in `index.js` in a Workers project. We'll take a second to understand how it works before building the rest of our project. 

First will see what our Worker looks like in an actual browser by running `wrangler preview`. In a terminal, and we'll check out how Serverless functions in Cloudflare Workers listen for HTTPS requests via the "fetch" event and respond to them by creating and returning a new Response.

Write Your First Cloudflare Workers Serverless Function

Using `wrangler whoami` in a terminal we'll grab our account id so we can paste our id into the double quotes of `account_id = ""`  inside of `wrangler.toml` file. Using the `wrangler dev` command we can look at our Workers serverless function and test it before deploying it. Once we're ready to deploy, we can use the `wrangler publish` command to deploy it to our unique workers.dev subdomain.

Preview and Publish Your Cloudflare Workers Project

By updating the response body and setting a corresponding Content-Type header, we can render HTML pages from directly inside of our Cloudflare Workers function.

We will update our Cloudflare Worker to return a call to a template function that we define. That template function returns a string of HTML that we will render in the browser.

Render HTML Pages with Cloudflare Workers

Up until now, we've been rendering plain responses, not based on any information coming in with a request. The request.cf object sent with every incoming HTTP request to a Workers function has a ton of interesting information, including the regionality of the request, and which Cloudflare data center is responding to the request. Using this information, we'll render a dynamic HTML page based on where the user visiting our site is in the world.

Render Cloudflare Region Data for a Request Using request.cf

Deploying to your unique workers.dev subdomain is a great way to test your serverless functions before they're ready to go to production. Once you are ready to deploy to production, you can use Wrangler's environment feature to deploy to your zone, or Cloudflare-managed domain, by providing the "-e" (environment) flag when publishing.

You can check this worker out [here](https://hello-world-worker.signalnerve.com/).

Deploy to a Custom Domain with Cloudflare Wrangler Environments

CSS Media queries are heavily used across web pages for different reasons, such as make your web pages responsive, but what if we can use them to improve web accessibility as well?

In this video, I’m sharing How to use CSS Media Queries for web accessibility in your web app, combining the user preferences choice with `prefers-color-scheme` media query and enabling dark mode in your web app.

Create a Dark Mode Theme in Your Web App Using CSS Media Query

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

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the `React` browser tab, inspecting components in parallel with the `Elements` tab, using React components in the console, searching by component name, and debugging component state and props.

Debugging components with the React Developer Tools extension

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. 

Topics

Instructors

Content Type