free

Browse by Tag

Increase TypeScript's type safety with noImplicitAny

Embed SVG Directly In Markup with the “Use” Tag

Build an SVG icon component in React

Style an SVG Icon with CSS

Load an External SVG Inside a “Use” Tag

Automate SVG Sprite Background Image Variations with a SCSS Mixin

Add an SVG as an Embedded Background Image

Add an SVG Sprite as a Background Image

Add an SVG as a Background Image

Combine Multiple SVGs into an SVG Sprite

Include an SVG with an Image Tag

Optimize SVGs for Better Performance using svgo

Create stateless React components using TypeScript

Make a request to an API with Axios in Vue

Bootstrap a TypeScript + React Project

Render lists of data in Vue with v-for

Animate Chart Axis Transitions in D3 v4

Load Data from URL Params in Vue.js and Nuxt.js

Handle Errors in Ramda Pipelines with tryCatch

Use the Exponentiation Operator in JavaScript

Check if an array contains an item using Array.prototype.includes

Convert a callback to a promise

Basic accessibility testing

Refactor to Point Free Functions with Ramda using compose and converge

Configure Named Routes in Vue.js and Nuxt.js

Use Google Sheets with Node and Express in Fun Side Projects

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Writing Platform-Specific Components for iOS and Android in React Native

Combine Window Functions to Answer Complex Questions

Compare the Outliers Using First Value and Last Value

Compare Related Rows Using Lag and Lead

Understand Frame Clauses

Create Running Totals Using Window Functions

Find Percentiles Using ntile

Define Windows Using Multiple Factors

Perform Weighted Ranking with Percent Rank

Rank Records with Rank and Dense Rank

Learn What A Window Function Can Do

Select Distinct Data in Postgres

Speed Up Postgres Queries with Indexes

Find Intersecting Data with Postgres’ Inner Join

Enforce Custom Logic with Check Constraints in Postgres

Create Foreign Keys Across Multiple Fields in Postgres

Use Foreign Keys to Ensure Data Integrity in Postgres

Sort Postgres Tables

Ensure Uniqueness in Postgres

Filter Data in a Postgres Table with Query Statements

Group and Aggregate Data in Postgres

Update Data in Postgres

Delete Postgres Records

typescript tutorial about Increase TypeScript's type safety with noImplicitAny

Increase TypeScript's type safety with noImplicitAny

2:24 typescript

TypeScript tries to infer as much about your code as it can.

But sometimes there really is not enough context for it to infer reliably. If it tried to do such inference it would potentially result in more nuisance than help. So instead it infers the type any. This type can catch people off guard as it provides very little type safety. Fortunately TypeScript has a flag to make it easier to catch such unsafe code at development time.

html5 tutorial about Embed SVG Directly In Markup with the “Use” Tag

Embed SVG Directly In Markup with the “Use” Tag

1:49 html5

In this lesson, we’ll learn how to embed an SVG sprite into markup and reference it throughout the page using the SVG “use” tag and fragment identifiers.

This has become the standard way of displaying SVG icons because of the ability to dynamically style individual parts (especially interaction states). Also, because the SVG is just markup embedded on the page, it creates no extra HTTP requests. However, the block of SVG needs repeating on every page where icons are used.

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

css tutorial about Style an SVG Icon with CSS

Style an SVG Icon with CSS

3:17 css

In this lesson, you’ll learn how to create interactive and multi-colored SVG icons using only CSS. You’ll also see how the same familiar rules of inheritance and specificity apply when working with SVG. We’ll style icons on hover, change their size and style individual parts of an icon.

When implementing SVG icons with the use tag, the browser renders the SVG inside something called the "shadow dom". Unfortunately, most browsers do not support accessing child elements of the shadow dom via CSS. In order to target elements inside a use tag, such as a path, you can target it at the global CSS level, like so:

path#rain {
/* styles */
}

Instead of:

.Icon--umbrella path#rain {
  /* styles */
}
html5 tutorial about Load an External SVG Inside a “Use” Tag

Load an External SVG Inside a “Use” Tag

1:38 html5

Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.

Note: The SVG must be hosted on the same domain as the requested page.

Some older/less feature complete browsers don’t support this functionality. If you only care about the latest browsers, you can get away with not using a JavaScript polyfill (but you should still provide some sort of fallback). However, the svgxuse polyfill can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

css tutorial about Automate SVG Sprite Background Image Variations with a SCSS Mixin

Automate SVG Sprite Background Image Variations with a SCSS Mixin

4:12 css

n this lesson, you’ll learn how to write a SCSS mixin to generate styles for variations of background-images. We’ll look at using SCSS lists to interpolate dynamic class names and property attributes and output icons at different sizes.

If you need the ability to add or edit icons on a regular basis, having a SCSS mixin do the heavy lifting of calculating background-position, background-size and creating selectors will save you lots of time and manual work.

Note: this lesson assumes you have an understanding of SCSS, mixins and already have a process to compile SCSS.

html5 tutorial about Add an SVG as an Embedded Background Image

Add an SVG as an Embedded Background Image

2:52 html5

Learn how to set an elements background image to embedded SVG. This method has an added benefit of not incurring any HTTP requests, as the SVG is simply embedded into the CSS. They can also be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon using this approach.

If you’re looking for the ability to display icons at different sizes and want to modify the SVG interaction styles (such as on :hover), this is could be a good option. One negative to adding the interaction styles is that it requires you to duplicate selectors and the SVG markup; the more icons you have, the larger your stylesheets will become.

html5 tutorial about Add an SVG Sprite as a Background Image

Add an SVG Sprite as a Background Image

4:11 html5

Learn how to use an SVG sprite to display your icons. Sprites are great because they add only a single HTTP request, are easy to add to markup and can be sized easily with the help of the background-size property.

This is a good option if you know the icons aren’t going to change much and you don’t mind manually editing the SVG sprite.

However, adding/editing icons once a sprite is created is cumbersome to do by hand, because you have to know the size and position of each icon and modify accordingly.

html5 tutorial about Add an SVG as a Background Image

Add an SVG as a Background Image

1:32 html5

Learn how to set an SVG as the background image of an element. Background images can be resized by changing the width and height of the element containing background image, so it’s easy to create multiple sizes of the same icon.

However, each background image creates an HTTP request, so be aware of your page load speed. With this approach, you are unable to change attributes on the SVG such as fill or stroke.

If you want the ability to display icons at different sizes and don’t need to change their appearance or their interaction styles (such as on :hover), this could be a good option for you.

otherjs tutorial about Combine Multiple SVGs into an SVG Sprite

Combine Multiple SVGs into an SVG Sprite

1:31 otherjs

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the svgo and svg-sprite-generator npm packages to automate the process of compressing the SVGs and creating the sprite.

Note: This lesson assumes you have npm installed.

html5 tutorial about Include an SVG with an Image Tag

Include an SVG with an Image Tag

1:06 html5

Since an SVG is really just an image, it can be included on a page just like any other image, using an img tag. This is simple to implement, easy to resize and has the benefit of being cacheable.

There are a couple downsides to this approach, however. You can’t modify the SVG attributes such as fill or stroke; once the icon is included, there isn’t much you can do to change its appearance. Also, each icon you include creates an HTTP request, potentially impacting page load speed.

If you’re looking for an easy way to implement just a couple of icons that don’t need to change, this is a viable option.

otherjs tutorial about Optimize SVGs for Better Performance using svgo

Optimize SVGs for Better Performance using svgo

2:03 otherjs

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using svgo in the command line.

For a full list of options and plugins available to use with svgo, check out their documentation.

Note: This lesson assumes you have npm installed.

typescript tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:13 typescript

You can create a stateless React component in TypeScript by just creating a function.

But if you want to create high quality idiomatic React + TypeScript components you should use the React.StatelessComponent interface. This is demonstrated in the video.

vue tutorial about Make a request to an API with Axios in Vue

Make a request to an API with Axios in Vue

2:05 vue

Let's see how to use the vue-axios NPM package to make a request to an API, and make use of the data returned.

typescript tutorial about Bootstrap a TypeScript + React Project

Bootstrap a TypeScript + React Project

5:54 typescript

Setup a TypeScript + React project from scratch using webpack. Learn the reason behind every line that you need to type and become an expert.

vue tutorial about Render lists of data in Vue with v-for

Render lists of data in Vue with v-for

1:40 vue

Let's write some example data and render it to our page with v-for, and then see how we can use the same directive to render the same component multiple times.

d3 tutorial about Animate Chart Axis Transitions in D3 v4

Animate Chart Axis Transitions in D3 v4

4:08 d3

When the data being rendered by a chart changes, sometimes it necessitates a change to the scales and axes of the chart as well. This lesson demonstrates how to animate and synchronize axis transitions on a column chart.

vue tutorial about Load Data from URL Params in Vue.js and Nuxt.js

Load Data from URL Params in Vue.js and Nuxt.js

3:18 vue

URLs often reflect some bit of data that the page should load. This lesson walks you through adding a custom URL Param to the router then forwarding that Param to load data onto the page.

js tutorial about Handle Errors in Ramda Pipelines with tryCatch

Handle Errors in Ramda Pipelines with tryCatch

2:32 js

Handling your logic with composable functions makes your code declarative, leading to code that's easy to read and easy to test. Breaking that up to wrap some risky function in a try/catch block introduces imperative code and makes it harder to maintain that declarative approach. With Ramda's tryCatch function, you can handle errors right in the middle of a composition and leave your code clean and functional. We'll also see how you can use propOr to avoid common "cannot find X of undefined" errors.

js tutorial about Use the Exponentiation Operator in JavaScript

Use the Exponentiation Operator in JavaScript

3:30 js

ES2016 introduced the exponentiation operator ** to JavaScript. This lesson shows how it works and how you can use it as a replacement for the Math.pow function.

js tutorial about Check if an array contains an item using Array.prototype.includes

Check if an array contains an item using Array.prototype.includes

1:35 js

We often want to check if an array includes a specific item. It's been common to do this with the Array.prototype.indexOf method, but now we have a simpler way: We can use the Array.prototype.includes method, which is available starting with ES2016.

js tutorial about Convert a callback to a promise

Convert a callback to a promise

4:45 js

Promises are rapidly overtaking callbacks in popularity. In this lesson, I show you how to rewrite a callback using ES6 Promises. After getting a handle on the basics, we'll convert an error-first style callback to use the Resolve and Reject handlers built into Promises. If you aren't familiar with Promises, this lesson can be a great starting point by learning how to duplicate the behavior of a callback with ES6 Promises.

otherjs tutorial about Basic accessibility testing

Basic accessibility testing

5:44 otherjs

Learn the basics of web accessibility testing using the keyboard, Web Developer Toolbar, aXe Firefox extension, and Lea Verou's Contrast Ratio tool. We'll look at how to get an overview of a webpage's accessibility, with special attention paid to solving color contrast issues.

For more on accessibility auditing, check out this article: https://marcysutton.com/how-i-audit-a-website-for-accessibility/

js tutorial about Refactor to Point Free Functions with Ramda using compose and converge

Refactor to Point Free Functions with Ramda using compose and converge

3:33 js

In this lesson we'll take some existing code and refactor it using some functions from the Ramda library, most notably, compose and converge. When we're done, we'll have taken a function with a couple of local variables and parameter references and converted it into more streamlined "point-free" or "tacit" functions.

vue tutorial about Configure Named Routes in Vue.js and Nuxt.js

Configure Named Routes in Vue.js and Nuxt.js

1:02 vue

As you create more and more routes, the paths become difficult to manage and concatenate the parts together as just a giant string. Using named routes allows you to reference the route by a simple string then pass in the params as an object. This lesson covers configuring named routes in Nuxt.js in the nuxt.config.js and the passing the named route to a router-link.

node tutorial about Use Google Sheets with Node and Express in Fun Side Projects

Use Google Sheets with Node and Express in Fun Side Projects

9:59 node

First and foremost, DO NOT use Google Sheets for any production app. It's fine for fun side projects for your family or friends, but not much more. With those disclaimers in mind, Google sheets can be complicated to set up if you don't follow precise configuration steps. This lesson walks you through setting up Google sheets credentials, authentication, getting/appending values, then finally wrapping the sheets api with Node.js and Express to use in a simple project.

vue tutorial about Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

Add Custom Routes for Hidden Pages with Vue.js and Nuxt.js

1:08 vue

Sometimes the pages/ directory structure doesn't meet your needs, so you'll need to customize your routes manually. Using the nuxt config and "hidden pages" you can map routes to view components without getting in the way of the default pages routing.

react tutorial about Writing Platform-Specific Components for iOS and Android in React Native

Writing Platform-Specific Components for iOS and Android in React Native

5:28 react

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

postgres tutorial about Combine Window Functions to Answer Complex Questions

Combine Window Functions to Answer Complex Questions

3:38 postgres

Individual window functions are useful, but sometimes you’ll need to combine them to answer complex questions. For instance, which 10 star movies were released in the year that had the most 10 star movies released?

postgres tutorial about Compare the Outliers Using First Value and Last Value

Compare the Outliers Using First Value and Last Value

1:55 postgres

How does each runner compare with the first and last place finisher? What about the nth place finisher? Firstvalue, lastvalue, and nth_value can make these decisions.

postgres tutorial about Compare Related Rows Using Lag and Lead

Compare Related Rows Using Lag and Lead

2:16 postgres

If you have a list of competitors and their finishing times, how do you determine how much time separated each competitor? Lag and lead allow you to compare rows in order -- for instance, comparing the 1st and 2nd place finishers and the 2nd and 3rd place finishers.

postgres tutorial about Understand Frame Clauses

Understand Frame Clauses

2:00 postgres

What if you want aggregations that aren’t running totals? What if you want the sum total for the whole frame? Or the minimum value across the frame? Unbounded preceding, unbounded following, and current row help you define your frame of reference.

postgres tutorial about Create Running Totals Using Window Functions

Create Running Totals Using Window Functions

1:06 postgres

How could your Kickstarter-type site list the running total for each contribution next to it? Using window functions of course! The default behavior for aggregations under window functions is to create running totals.

postgres tutorial about Find Percentiles Using ntile

Find Percentiles Using ntile

1:44 postgres

What scores do the 90th percentile of students receive? How long does the 99th percentile web request take? Percentiles and arbitrary ntiles provider a richer understanding of underlying data and outliers.

postgres tutorial about Define Windows Using Multiple Factors

Define Windows Using Multiple Factors

1:55 postgres

Weighted ranking on a single factor can hide lots of information. For instance, students without access to internet perform 1-3 full letter grades worse than their peers with internet access. A teacher that wanted to consider student privilege could take many factors into account when assigning student grades to get a better sense for how strong individual students were.

postgres tutorial about Perform Weighted Ranking with Percent Rank

Perform Weighted Ranking with Percent Rank

1:55 postgres

What if you had a list of student grades and wanted to give them a weighted grade for the school year? Percent rank is used to answer frequency distribution questions.

postgres tutorial about Rank Records with Rank and Dense Rank

Rank Records with Rank and Dense Rank

1:35 postgres

If you have a list of competitors in a race, and a list of their finishing times, how do you create a list of what place they came in? Rank and dense rank can help you out; they differ in how they handle ties.

postgres tutorial about Learn What A Window Function Can Do

Learn What A Window Function Can Do

1:47 postgres

In this lesson we’ll see how we can partition movies into the years they were released, and find the top 5 rated titles each year. The power of the window function is to partition data into groups and answer questions about those groups.

postgres tutorial about Select Distinct Data in Postgres

Select Distinct Data in Postgres

0:52 postgres

How many users visited our site yesterday? We can find out by looking at each visit, and limiting this list to a distinct list of users (who may have visited many times). In this lesson we’ll learn how to answer questions like these with the distinct keyword.

postgres tutorial about Speed Up Postgres Queries with Indexes

Speed Up Postgres Queries with Indexes

2:33 postgres

The more data you add, the longer it will take to answer new questions you pose to your database. That’s because so far, Postgres has been scanning through the table looking at every row to see if it meets the constraint. We can speed this process up substantially by adding indexes.

postgres tutorial about Find Intersecting Data with Postgres’ Inner Join

Find Intersecting Data with Postgres’ Inner Join

4:26 postgres

You have a table of movies and a table of directors; how can you see which director created each movie? An inner join will link related records so that you can answer questions like these. Inner joins are the most commonly used SQL join, because they only return data that is common in both tables.

postgres tutorial about Enforce Custom Logic with Check Constraints in Postgres

Enforce Custom Logic with Check Constraints in Postgres

2:07 postgres

What if your tables need custom constraints? A movie should only receive 1-5 stars, never 0 or 6. Price after tax should always equal the sum of the price plus tax. Check constraints help you enforce your own custom logic.

postgres tutorial about Create Foreign Keys Across Multiple Fields in Postgres

Create Foreign Keys Across Multiple Fields in Postgres

3:08 postgres

What if your foreign keys are more complex than a single field? Postgres lets you enforce foreign key constraints across multiple fields with a similar syntax to defining complex primary keys.

postgres tutorial about Use Foreign Keys to Ensure Data Integrity in Postgres

Use Foreign Keys to Ensure Data Integrity in Postgres

2:18 postgres

Every movie needs a director and every rented movie needs to exist in the store. How do we make sure something in another table exists before inserting new data? This lesson will teach us about foreign keys and references.

postgres tutorial about Sort Postgres Tables

Sort Postgres Tables

1:20 postgres

How do I see a list of my Facebook friends sorted by the number of friends they have, and then sorted alphabetically to break ties? Sorting data helps us to answer important business questions. In this lesson, we’ll learn how to do it in Postgres.

postgres tutorial about Ensure Uniqueness in Postgres

Ensure Uniqueness in Postgres

3:53 postgres

Let’s say we have a bank. Our bank wants to give each account for each user a unique name, for instance, “Personal” or “Checking.” How can we make sure each account has a unique name for each user?

postgres tutorial about Filter Data in a Postgres Table with Query Statements

Filter Data in a Postgres Table with Query Statements

3:35 postgres

We have all this data, but how do we answer questions about it? In this lesson we’ll learn how to filter down to just the information we’re looking for.

postgres tutorial about Group and Aggregate Data in Postgres

Group and Aggregate Data in Postgres

6:45 postgres

How can we see a histogram of movies on IMDB with a particular rating? Or how much movies grossed at the box office each month? Or how many movies there are of each genre? These are examples of data aggregation questions, and this lesson will teach us how to answer them.

postgres tutorial about Update Data in Postgres

Update Data in Postgres

1:55 postgres

Data changes. In some applications, it changes all the time! In this lesson we’ll learn how to update a single record or many at once.

postgres tutorial about Delete Postgres Records

Delete Postgres Records

2:43 postgres

What if you no longer need some information? Perhaps your tables are very large and you need to clean up your table to speed it up. This lesson will teach us how to delete data from our database.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?