NEW COURSE: Modern Wordpress 102, A PHP & WordPress PHP Crash Course

Sep 30, 2022

User avatar
KAITLIN BLOOM

This is one of those courses that people wish they had before they started in the WordPress and PHP world. It'll equip you with the knowledge to build an API in PHP, dig into other applications such as Laravel or Symfony, start a greenfield site, get comfortable working with legacy sites and more.

This is the the second course in the WordPress series by Nate Finch. This follows Modern WordPress for Beginners, which introduced us to the admin/dashboard, taught us posts & pages, how to...

Read More

Why We Love Online Coding Tutorials

Sep 23, 2022

User avatar
KAITLIN BLOOM

6 reasons why we love online coding tutorials and think you will too

There are pros and cons to all educational options for web development. College is expensive and takes a ton of time, but you gain well rounded experience and access to many resources. Bootcamps are also pretty expensive and surface level, but they’re modern and quick. Online coding classes lack guidance and support, but are inexpensive, quick, up to date and specialized.

**Actually let’s dig deeper into all the...

Read More

Is Figma Dead? - Penpot, the Open Source Figma Alternative

Sep 15, 2022

User avatar
KAITLIN BLOOM

Check out PenPot instead! PenPot is the first Open Source design and prototyping platform meant for cross-domain teams.

Read More

VIDEO: Dev Tools Style Number Incrementing in VSCode

Sep 14, 2022

User avatar
KAITLIN BLOOM

A VSCode Pro Tip

Dev Tools Style Number Incrementing in VSCode

Read More

Q&A With Scott Tolinski on new course- Monorepos with pnpm

Sep 12, 2022

User avatar
KAITLIN BLOOM

This month we released a fresh course covering Monorepos with pnpm made by Scott Tolinski!

In this course he'll mentor us through building confidence with monorepo workflows and new tools, and build faster and more efficient workflows.

We did a little Q&A with Scott, the author. Dig in!

Q: What is pnpm?

A: pnpm (performant npm) is an alternative to npm for managing JavaScript packages.

Q: Why use pnpm instead of npm?

A:

  • It’s faster
  • It has more...
Read More

We Love Svelte

Aug 15, 2022

User avatar
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...
Read More

Beginner Ruby On Rails by Luan Vieira

Aug 02, 2022

User avatar
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 -...
Read More

You Don't Need A Dependency - Clipboard API

Feb 07, 2022

User avatar
Scott Tolinski
Read More

What Is CI / CD?

Feb 02, 2022

User avatar
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.

Read More

Setting 2022 Goals at Any Coding Level

Jan 21, 2022

User avatar
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...

Read More

Sending Events Up the Svelte Component Tree With createEventDispatcher

Jan 14, 2022

User avatar
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:...
Read More

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

Nov 10, 2021

User avatar
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]...

Read More

Get Current Date with JavaScript Temporal API

Nov 09, 2021

User avatar
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...

Read More

How To Convert an HTMLCollection to an Array

May 31, 2021

User avatar
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 )
Read More

How to Get Unique Values From an Array or Collection

Apr 23, 2021

User avatar
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:...

Read More

How to use __dirname with ESM

Feb 12, 2021

User avatar
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:...

Read More

How To Copy To Clipboard Using JavaScript

Dec 26, 2020

User avatar
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...

Read More

CSS Variables Root vs Body Scoping

Dec 04, 2020

User avatar
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...

Read More

How to Supercharge Your Productivity with GraphQL Tooling

Nov 20, 2020

User avatar
Scott Tolinski
Read More

How To Read and Write Files In Deno

Nov 18, 2020

User avatar
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...

Read More

Announcing How To Build a GraphQL API

Mar 04, 2020

User avatar
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...

Read More

React Spring to Framer Motion Conversion

Feb 13, 2020

User avatar
Scott Tolinski
Read More

DataURIs & Animation Jank

Feb 13, 2020

User avatar
Scott Tolinski
Read More

How Level Up Animates Transitions with React Spring

Sep 04, 2018

User avatar
Scott Tolinski

How Level Up Animates Transitions with React Spring

Read More
🧰

checkout

cart:

loading

loginWindow

search

🎒

course

course:
steps:
series:
series:
series:
series:
series:

courses

tags

activeAuthors

posts

post

seriesList

browseSeries

activePlaylist

activeTutorial

playlistTutorials

user