Learn Cloudflare, Scss and Tweenmax

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

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Convert SCSS (Sass) to CSS-in-JS

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax. SCSS borrows features from other languages to write smarter, reusable and more readable styles. This course will focus on how to use SCSS’s more useful features, compare them against each other and assess when their usage is appropriate.

Learn the Best and Most Useful SCSS

Cascading Style Sheets bring order and beauty to our applications.

In this lesson we'll learn how to convert our Sass code to CSS code. We'll take a look at the sass watch command and use it to listen for changes within our Sass code.

The `sass` executable can be downloaded globally through npm by running `npm i -g sass`.

Converting Sass To CSS

Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

Access Theme Color Values With Sass

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

Apply grid layout and see when it's necessary to break out a media query to overcome grid's lack of wrapping behavior. We'll also learn about a property that grid and flexbox share: `align-items`.

Use CSS Grid to Create Layout Columns

Grid offers us the easiest method to responsively center content. We'll use the grid property `place-content` to center the contents of `figure` to showcase our fictional product in use. Additionally, we'll learn about `object-fit` which is a modern technique that allows inline images to scale responsively within defined dimensions without distortion.

Responsively Center an Image and Caption with CSS Grid

View a preview of the form fields we'll be creating in this course, inclusive of custom CSS styles for text inputs, textareas, selects, multiselects, radio buttons, and checkboxes. Then get an overview of the base project and key parts of the Eleventy build process in regards to compiling with Dart Sass and use of Nunjucks for project template scaffolding. 

Prior experience with Eleventy or Nunjucks is not required, but you may also enjoy learning how to [create an Eleventy site from scratch](https://egghead.io/playlists/build-an-eleventy-11ty-site-from-scratch-bfd3?af=2s65ms) in less than 20 mins in my other egghead collection.

Course Introduction: Accessible Cross-Browser Form Field CSS Styles

We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system. 

We will set up Sass variables for the initial them and learn how to use the !default flag to allow our system to be easily overridden from project to project, making our form styles ultra transferable and reusable. You'll also learn how to leverage Sass color functions for ease of theming. We'll map the Sass variables to CSS variables so that as we build up our system we can use CSS variables for the most flexibility in our theming.

Initialize the Form Design System Setup with Sass and CSS Variables

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

We'll make a starting point for our form layout styles by creating `.form-group` which will add a bit of `margin` between fields. This will be our first design system component, and we'll also include styles for the `label` contained in this class.

Create the `form-group` Component Styles

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

Learn how to begin addressing browser inconsistencies by resetting base styles across text inputs, textareas, and selects. We'll also review a few quirks related to mobile browsers and responsive design when dealing with form fields. And we'll uncover how to normalize `<select>` which was formerly one of the trickiest fields but is vastly easier now thanks to modern CSS through the `appearance` property.

Topics

Instructors

Content Type