What Is CI / CD?
Feb 02, 2022
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
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
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
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
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
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
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
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
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
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 Read and Write Files In Deno
Nov 18, 2020
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
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...
How Level Up Animates Transitions with React Spring
Sep 04, 2018
Author
Scott Tolinski
How Level Up Animates Transitions with React Spring