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

2. [Sapper For...

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.

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

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

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

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

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 )

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

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

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

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

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