Limited Time Sale

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

or Learn More

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

0 days 0 hrs 0 min 0 sec

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

`