Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Beginner Ruby On Rails by Luan Vieira

Aug 02, 2022

User avatar
Author
KAITLIN BLOOM

In this freshly made course Luan Vieira will mentor us through learning the fundamentals of the framework that both GitHub AND Shopify are built on. Ruby On Rails is performant, scalable and a solution that withstands the test of time.

Do the first 5 tutorials of the course for free!

What will you learn in this course?

  • How to build a Ruby on Rails app
  • What is the Model View Controller pattern in web development -...

We <3 Svelte

Jul 29, 2022

User avatar
Author
KAITLIN BLOOM

We love Svelte here at Level Up Tutorials, so much that we've created 6 courses on it.

Here they are! Click the course title to take the first 5 tutorials for free :)

  1. Svelte For Beginners: In this course, you'll learn all about the basics of Svelte. Get ready to make a Quiz app as we learn tons of great features the framework has to offer.

  1. [Sapper For...

You Don't Need A Dependency - Clipboard API

Feb 07, 2022

User avatar
Author
Scott Tolinski

What Is CI / CD?

Feb 02, 2022

User avatar
Author
Scott Tolinski

CI / CD also known aka Continuous Integration and Continuous Deployment is a technique for delivering and merging your code. This can include things like typechecking, linting, formatting, testing and more.

Setting 2022 Goals at Any Coding Level

Jan 21, 2022

User avatar
Author
KAITLIN BLOOM

Having a hard time setting some goals for yourself in 2022? We can help with that. Here you’ll find Scott Tolinski (ST) and Wes Bos’ (WB) recommendations for what you could focus on this year depending on where you are in your coding journey. Take what resonates with you, leave the rest. Hope this helps.

BEGINNER CODER

Code Skill Goals

ST: Knowing and understanding semantic HTML elements: how and when to use them. [Semantics in...

Sending Events Up the Svelte Component Tree With createEventDispatcher

Jan 14, 2022

User avatar
Author
Scott Tolinski

Sometimes you're writing a component in Svelte and you would really like for an event to take place inside of the component but consume the results of the event in a parent. This is where Svelte's createEventDispatcher comes into play.

createEventDispatcher is part of Svelte core and is used like this.

Child

```javascript import { createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function sayHello() {
    dispatch('message', {
        text:...

Level Up Links - Shoelace x Gilbert Adair x Awesome Standalones x What is Astro x Wasp

Nov 10, 2021

User avatar
Author
Scott Tolinski

I come across a lot of cool things in my day to day through talking to interesting people, reading intriguing articles, skimming Reddit and scrolling through Twitter. Each week I share some of the best things I found that I think you would also find interesting. Sign up for our newsletter to get these delivered right to your inbox every Friday.

1. [CODE]...

Get Current Date with JavaScript Temporal API

Nov 09, 2021

User avatar
Author
Scott Tolinski

In this post, we'll show you how to access the current day with the Temporal API.

Tldr;

Current Day

Temporal.Now.plainDateISO().day

Current Month

Temporal.Now.plainDateISO().month

Current Current Year

Temporal.Now.plainDateISO().year

You get the point. It's really explicit and easy once you know where to look. You are getting a Temporal date and then accessing date properties like day, month, year.

``` Temporal.Now.plainDateISO() - get the current date in the system...

How To Convert an HTMLCollection to an Array

May 31, 2021

User avatar
Author
Scott Tolinski

Here are three easy strategies to convert an HTMLCollection into an array.

Most concise (ES2015)

const newArray = [...htmlCollection];

Most clear (ES2015)

const newArray = Array.from(htmlCollection);

Classic

const newArray = Array.prototype.slice.call( htmlCollection )

How to Get Unique Values From an Array or Collection

Apr 23, 2021

User avatar
Author
Scott Tolinski

tldr; Use Sets and spread results

From an array

const unique = [...new Set(["one", "two", "one"])]
// ["one", "two"]

From a collection

const unique = [...new Set([{
  value: "one",
},{
  value: "two",
},{
  value: "one",
}].map((obj) => obj.value))]
// ["one", "two"]

Why does this work?

Let's break down what we're doing here.

What is a Set?

Reference:...

How to use __dirname with ESM

Feb 12, 2021

User avatar
Author
Scott Tolinski

tldr;

import path from "path"
import { fileURLToPath } from "url"

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

The problem

With the arrival of ESM, we've gained many new abilities. With those new abilities came new syntax and new pitfalls. One-such pitfall is the lack of __filename and __dirname, two commonly used global variables available to us in common.js Node files. Read more about the differences here:...

How To Copy To Clipboard Using JavaScript

Dec 26, 2020

User avatar
Author
Scott Tolinski

This is going to be a quick one. At its most concise, copying from a text string to the user's clipboard is a one liner using a browser API "navigator.clipboard" You can learn much more about the ins and outs of the Clipboard here: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/clipboard

Without further adieu, here is the snippet.

navigator.clipboard.writeText("some string to be copied!")

This method returns a promise, so a practical use case might look something...

CSS Variables Root vs Body Scoping

Dec 04, 2020

User avatar
Author
Scott Tolinski

CSS Variables have had a huge impact in the way we write our css on Level Up Tutorials. They allow you to make cascading hierarchies of values to theme an entire site by opening up the ability to make large sweeping changes with just a couple of values. In the Level Up Tutorials course Modern CSS Design Systems we explored the idea of creating a dark mode along with other themes by adding a class to the body updating CSS...

How to Supercharge Your Productivity with GraphQL Tooling

Nov 20, 2020

User avatar
Author
Scott Tolinski

How To Read and Write Files In Deno

Nov 18, 2020

User avatar
Author
Scott Tolinski

This post will show you how to read a file in Deno as well as how to write a file in Deno.

Reading Files In Deno

Reading files in Deno can be very easy, especially if all you need to do is access the contents as a string. Because we have "top level await" or the ability to await in the root of a file, we just need to await a Deno.readTextFile. Check it out. Where "filename" is a string path to a file.

```js const filename = "./text.txt"; const file = await...

Announcing How To Build a GraphQL API

Mar 04, 2020

User avatar
Author
Scott Tolinski

Level Up is excited to announce “How to Make a GraphQL API,” January’s Pro course that teaches you everything you need to know about GraphQL and the tech that links to it.

With 23 videos, it’s a project-oriented course that covers all of the foundational skills necessary for GraphQL proficiency. You can follow along with Scott as he builds the world’s best kung-fu movie API, or you...

React Spring to Framer Motion Conversion

Feb 13, 2020

User avatar
Author
Scott Tolinski

DataURIs & Animation Jank

Feb 13, 2020

User avatar
Author
Scott Tolinski

How Level Up Animates Transitions with React Spring

Sep 04, 2018

User avatar
Author
Scott Tolinski

How Level Up Animates Transitions with React Spring