Posts
FAQ: Syntax x Sentry News
Jun 21, 2023
and how it impacts LUT!!
I just got here, what’s going on?
Level Up Tutorials and Syntax are joining Sentry.io The project’s focus is on building a long lasting brand that you can trust, and one that stays true to the community. We want to create excellent content, resources, and experiences for the community. While Sentry is the benefactor, Syntax is staying Syntax, and Level Up Tutorials going to become free.
What’s the goal of this project?
The goal is to create a highly reputable mixed-media (video, written content, in-person events, etc) developer community.
Does this impact Level Up Tutorials?
Sentry has also acquired Level Up Tutorials and its assets, as a means to bring our tutorials to Syntax. All Level Up Tutorials content will become free.
How do I get my Sentry credit?
Check out this article to learn more about receiving credits to Sentry. Note: make sure you're signed into your account to access this page. levelup.video/my-account/my-subscription
What’s Syntax?
Syntax is a fun — and sometimes funny — podcast for web developers hosted by Wes Bos and Scott Tolinkski, two independent full stack developers who create online training courses. In each episode, Scott and Wes break down topics to provide "Tasty Treats" to the audience — applicable tips and nuggets of information to help web developers in their careers.
You can learn more at syntax.fm.
Why is Level Up joining forces with Syntax and Sentry?
We’re really excited to allow more people to gain the benefits and learn from the content we’ve worked hard to create over the past 11 years. Level Up was created because Scott noticed that there was a huge lack of accessible education resources for developers and he wanted to help. This collaboration has allowed us the flexibility to offer everything for free, truly making these courses and resources the most accessible.
Why Sentry?
Syntax and Sentry have been longtime fans of each other. If you’ve listened to a Syntax episode I’m sure you’ve heard the Sentry call outs. Sentry and Syntax share a strong sense of community, authenticity, curiosity, drive, and hustle and believe that this collaboration will make both projects even stronger.
Not to mention how incredible Sentry’s products are. If you’ve tried them out, they speak for themselves. Learn more about Sentry at sentry.io.
What happens if I have an active subscription with Level Up Tuts?
Annual members: You will be gifted Sentry credits. Expect to receive an email with more details in the coming week or so.
Monthly members: April is the last month you’ll be asked to pay for the content.
For all members: In the near future, all content will not be paywalled on levelup.video. Exact date TBD.
Reach out to [email protected] if you have specific questions about your membership.
Will levelup.video still exist?
A major part of this project is creating a new syntax.fm website, which will be a lot more than just a place to listen to the podcast. It will enable many future building blocks, allowing Syntax to offer more mixed-media content. We’ve got big dreams for that, you might just have to follow along to see how it all pans out.
This, however, is where you’ll find all the existing LUT content in the future.
What’s happening to the community?
Discord: The LUT Discord will be converted into the Syntax discord community. We’re going to work really hard to make sure that our community members are happy and that things don’t feel too different.
Twitter: TBD
Instagram: TBD
What do I do if I have questions comments and/or concerns?
We’re still here and we’re not going anywhere :) You can reach out at:
Thank you for being here and supporting LUT throughout our journey! We're really excited about the future and hope you'll join us for the ride.
Cheers, Your LUT Family
Author
KAITLIN BLOOM
Happy Black History Month
Feb 01, 2023
Happy Black History Month from Level Up Tutorials!
This month brings the celebration and reflection of African Americans’ integral role in U.S. history. This is a time that brings the oftentimes overlooked achievements and sacrifices of Black Americans to the forefront, while also celebrating their rich culture and heritage. Here at Level Up Tutorials, we additionally take some time this month to reflect and further educate ourselves on the continued challenges, adversity and mistreatment Black people face in our communities.
LUT was created with the purpose to break down walls and increase access to quality, affordable education resources for web development. Not everyone has the means to gain a “traditional” computer science education. Our goal is to meet people wherever they’re at and provide the resources for them to learn the skills and tools to achieve their professional goals, without unnecessary challenges.
As a small business, we’re intensely selective with what organizations and causes we support. We’ve donated monthly to Black Girls Code and Allstar Code since 2019 because we believe young people, especially young people of color, should feel inspired and supported to pursue their dreams in STEM.
We hope that the work that we’re doing here at Level Up Tutorials continues to allow individuals to dream big and achieve their goals.
Learn a little more about these organizations:
Their Vision: To increase the number of women of color in the digital space by empowering girls of color ages 7 to 17 to become innovators in STEM fields, leaders in their communities, and builders of their own futures through exposure to computer science and technology.
To build pathways for young women of color to embrace the current tech marketplace as builders and creators by introducing them to skills in computer programming and technology.
Their Mission: All Star Code creates economic opportunity by developing a new generation of boys and young men of color with an entrepreneurial mindset who have the tools they need to succeed in a technological world.
Their Vision: All Star Code envisions a country where all young men of color have access to the tools of success, where the ability to thrive is available to all who are willing to dare greatly.
Author
KAITLIN BLOOM
Level Up Links #2.1
Jan 23, 2023
1. [BLOG] Rendering emails with Svelte
Folks over at Escape recently rebuilt their email stack from scratch leveraging a SvelteKit-powered dev server to improve the developer experience. See how they did it.
2. [CODE] zod-form-data
The main goal of this library is to deal with the pain point that everything in FormData is a string.
3. [TOOL] Neodrag
One draggable to rule them all.
4. [TOOL] OG-Image
Open Graph Image as a Service - generate cards for Twitter, Facebook, Slack, etc.
5. [BLOG] Conditional CSS
A blog covering a few CSS features that we use every day and how conditional they really are and comparing a few examples where CSS is more powerful than design tools.
Be the first to see these dope links every week by signing up for our email newsletter: https://bit.ly/LUT_newsletter
Author
KAITLIN BLOOM
Who You Support When You Buy from Level Up Tutorials
Nov 29, 2022
When you support LUT, you’re supporting a community-focused small business, rooted in helping others.
As consumers, we care about where our money goes, who and what it supports when we're buying from companies. We feel better when we know our dollars are spent on things that support our beliefs and minimize negative impacts. So who and what are you really supporting when you buy from Level Up Tutorials?
You’re supporting someone’s dream.
Level Up Tutorials was created by Scott Tolinski and his boss with the vision to help people achieve their goals through accessible, modern, easy-to-follow tutorials and courses for all levels.
The idea stemmed from a deep desire to contribute to the community, to facilitate learnings for others to help achieve their goals. Ten years later and we’re still driven by the passion to help people learn to code independently without having to sacrifice too much.
You’re supporting a small business .
And by small, we mean 2 full-time employees and 2 additional friends (contractors) who help out when they can!
You're supporting a company that cares about lifting others up.
This years we focused heavily on bringing on a diverse pool of guest content creators. Not only did these individuals provided invaluable content to enrich our library, but we hope they felt the favor was returned.
These people came from a variety of backgrounds. Including those who mentioned that they got their start in coding by learning from Scott’s YouTube videos years ago, to now creating an entire course for this company. Getting to witness these ‘full circle’ moments were quite fulfilling.
Others were inspired by the chance to use LUT as an opportunity for growth, a first step into the education realm, a tool for career advancement, or even a new income route. Whatever their goals, we were honored to be a part even a tiny part of their successes.
We feel the same about our community. When we see an opportunity to help out a friend, we will do our best.
You're supporting a company that care about you and listens to you.
Tech changes quickly and we change with it. Being a lean and agile company, we’re ready to pivot, stay relevant and give customers what they’re asking for at the drop of a hat.
You're supporting these charities.
Black Girls Code Their Vision: To increase the number of women of color in the digital space by empowering girls of color ages 7 to 17 to become innovators in STEM fields, leaders in their communities, and builders of their own futures through exposure to computer science and technology. To provide African-American youth with the skills to occupy some of the 1.4 million computing job openings expected to be available in the U.S. by 2020, and to train 1 million girls by 2040.
All Star Code Their Mission: All Star Code creates economic opportunity by developing a new generation of boys and young men of color with an entrepreneurial mindset who have the tools they need to succeed in a technological world.
Their Vision: All Star Code envisions a country where all young men of color have access to the tools of success, where the ability to thrive is available to all who are willing to dare greatly.
Vets Who Code Their Vision: #VetsWhoCode is a veteran-led and operated 501(c)(3) charitable non-profit that focuses on training veterans in web development and software engineering principles free of charge with the focus of starting careers as JavaScript developers.
Author
KAITLIN BLOOM
NEW COURSE: Modern Wordpress 102, A PHP & WordPress PHP Crash Course
Sep 30, 2022
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 evaluate & install themes & plugins, manage settings and more. You can check that out here.
In This Course You'll Learn:
- PHP features and syntax
- WordPress PHP features and helper functions
- Set up coding standards, talk about package management, check out debugging
Benefits of taking this course;
- WordPress is a CMS that powers over 40% of the internet and has been around for nearly 25 years
- You'll walk away with a thorough understanding of the capabilities of WordPress and what it can achieve for you and your clients
- GROWTH - WordPress is growing; JavaScript and React are shifting to WordPress
- EXPANSION - The opportunities for using WordPress for other integrations and purposes are expanding rapidly
Who is Nate Finch?
A Senior WordPress Engineer at Strattic.com, he helps build serverless integrations for WordPress. Nate has been working on the web since 2011. He loves web development because it is the perfect mix of problem solving, helping people, and lifelong learning.
Nate collects masters degrees, has traveled to six continents, lived on four, speaks Spanish, and outside of work, family, friends, food, coffee, and cooking are his favorite activities. and He lives in Wisconsin with his wonderful wife and two daughters.
Author
KAITLIN BLOOM
Why We Love Online Coding Tutorials
Sep 23, 2022
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 pros of learning to code via online tutorials and courses because there are so many.
-
Saves you money
The internet tells me that the average price of a college course is $2,355 and the price of formal coding classes, such as Bootcamps, can cost upwards of $40,000 for a few month.
You can learn a whole new technology with us for $50 or less.
Or we can look at opportunity cost. Imagine the amount of time you might waste trying to stumble through teaching yourself a new skill without any direction. Idk you choose.
-
Saves you precious time
Most online coding courses are no bs and straight to the point, saving your hours, maybe even weeks, of effort.
Here at Level Up, our authors do the heavy lifting for you. They learn the skills through any means necessary. Including tireless research, reading super interesting documentation, trial and error, stumbling through blindly or possibly they’ve learned the skills through years of committed professional application and usage of the technology.
No matter the means, they spent the time, energy and money (add: blood, sweat and tears) to learn everything, so they’re able to put it in a tidy little package for you and called a course. All this energy just so you can eat it up in a handful of hours, equipping you with everything you need to properly master the new skill.
On average, our courses are x hours and take our students x hours on to complete. :)
-
They give you the freedom to learn when & where you want
A major perk of doing online coding classes is that you’re not tethered to a timeline or a place.
Binge the course in one afternoon or a month or over the span of a year.
Take the course from your couch or the beach or the toilet.
Fit in a little studying at 6 am, on your lunch break or the middle of the night.
Do it how you want, we don’t care.
-
You get the latest, greatest and hottest tech
It can take colleges years adjust their curriculum due navigating the university bureaucracy (see: colleges still teaching outdated applications and versions of COBOL, Java, PHP, etc.). The rapidly changing world of technology needs an education option to match.
Say a new tool/tech/language/method/best practice is released... We can have a full blown course out on it within a couple weeks. You choose what sounds better.
-
The unmatched value of learn from real world professionals
Often times, the authors of online tutorials use the tech themselves. They’ve spent many hours working with these technologies, allowing them to create well-organized explanations, giving order and context.
IDK 'bout you, but I'd rather learn from someone who uses the skills often, who can fill me in on the important stuff, tips and tricks, and need-to-knows, while leaving out the fluff.
**6) ### You get to choose what you want to learn ###
Coding tutorials are typically shorter and more focused, therefore you get to choose the exact topics you want to learn. This makes them an amazing tool to supplement your learnings, stay fresh and on top of the latest and greatest in tech.
The list goes on, but we'll stop here for now. :)
And finally ... Level Up Tutorials is all about keeping you well-rounded and competitive in your career, without making you work too hard.
Author
KAITLIN BLOOM
Is Figma Dead? - Penpot, the Open Source Figma Alternative
Sep 15, 2022
Check out PenPot instead! PenPot is the first Open Source design and prototyping platform meant for cross-domain teams.
Author
KAITLIN BLOOM
VIDEO: Dev Tools Style Number Incrementing in VSCode
Sep 14, 2022
A VSCode Pro Tip
Dev Tools Style Number Incrementing in VSCode
Author
KAITLIN BLOOM
Q&A With Scott Tolinski on new course- Monorepos with pnpm
Sep 12, 2022
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 features
- pnpm saves disk space
- pnpm makes monorepos EASY
Q: Why did you create this course?
A: [I thought] here’s the thing that people aren’t talking about enough and aren’t using enough, and that people might not know exists. Here’s a technique that I, myself, have used in production in a large environment.
Q: What’s your experience with monorepos and pnpm?
A: I’ve been using this monorepo set up for a little while and I’m just shocked a lot of people aren’t using it because it’s so nice and easy. I wanted to bring awareness that this stuff is really accessible. It's a tool that I utilize every single day in my code base and have nothing but great things to say about it.
Q: What approach did you take to building this course out?
A: Together we’ll take it one step at a time, understand why we need the tools, what they are, and then understand how to create the base project so we’re able to orchestrate things in our day to day.
Q: What will folks be learning and building in this course?
A: We'll cover foundational knowledge of how monorepos function, and why. Organization and orchestration of getting a monorepo up and running using pnpm.
Upon completing this course, you’ll feel that you have the ability/control to do everything you already do in npm daily in pnpm with confidence and ease. In addition to general benefits of knowing these tools and gaining real world experience in a monorepo.
Q: What makes monorepos and pnpm extra special?
A: When you get into managing all this stuff, man it’s not easy. So when you have a tool like this that gets it out of the way and makes it that easy with just a little config. It’s amazing!
Take the course: https://leveluptutorials.com/tutorials/monorepos-with-pnpm
Author
KAITLIN BLOOM
We Love Svelte
Aug 15, 2022
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 :)
- 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.
- Sapper For Beginners: So, what is Sapper? Sapper is a framework used with Svelte to make highly performant web apps. This course will cover the many reasons this is a great platform and teach you how to use it!
- Animating Svelte: Dive into the amazing world of animating with Svelte! We'll cover custom animations, drag and drop, staggering, transitions, keyframes, slideshows, crossfade and so much more!
- Building Svelte Components: By the end of this course, you'll have the ability to utilize a full library of your components, but also have a better idea of how to create everyday usable components in Svelte. This one will definitely level up your general Svelte skills in the process.
- SvelteKit: SvelteKit is a next gen FE framework for building web applications of all sizes. SvelteKit has a beautiful development experience and flexible filesystem-based routing. This course will get you comfortable working with Svelte and Svelte Kit.
- Svelte Cubed: Learn how to bring your Svelte skills to the next level and build beautiful 3D graphics. In this course Scott mentors you through using a Three.js wrapper for Svelte that greatly simplifies making 3D canvases in the browser using WebGL
Author
KAITLIN BLOOM
Beginner Ruby On Rails by Luan Vieira
Aug 02, 2022
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
- How to model your objects and database tables in order to build efficient features
- How to build responsive views using Hotwire
Why should you take this course
- Programming in Ruby on Rails makes me happy and I’d love for others to find the same joy in it
- Ruby on Rails is easy to get started but it also allows you to scale your app to the size of a GitHub or Shopify
- There are plenty of jobs for Rails developers https://www.rubyjobboard.com/newest-ruby-on-rails-jobs
- As a JavaScript developer who’s used to importing different dependencies to build a web app, this Ruby on Rails course is an interesting look at a framework that does everything for you, without the need for extra dependencies
- Ruby on Rails is here to stay
Who is Luan Vieira?
Luan is a Software Engineer at GitHub. He’s been a Ruby on Rails developer for 4 years and loves it. He recently started making contributions to the framework and joined the issues triage team. When not writing code, Luan loves to play with his kid, woodworking and surfing.
Things Luan Vieira is proud of
- Like many people in the industry today, I learned software development from online tutorials like Level Up Tutorials, Wes Bos and Codecademy.
- I love working at GitHub. It’s a product I love using and a team I’m really proud of being a part of!
- I’m stoked to be a contributor to the Ruby on Rails framework. It feels great to work on a framework that’s used by tens of thousands of people.
- Proud to be a Brazilian working in tech! I was born and raised in Brazil and moved to the US after college.
- This course!!! 🚀
Author
KAITLIN BLOOM
What Is CI / CD?
Feb 02, 2022
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.
Author
Scott Tolinski
Setting 2022 Goals at Any Coding Level
Jan 21, 2022
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 HTML
WB: Data in JavaScript: be able to take data and make it look how you want it to in JavaScript
Maps - Beginner JavaScript - Wes Bos
Looping and Iterating - Reduce - Beginner JavaScript - Wes Bos
Bonus: Ask questions! Ask for feedback!
Soft Skill Goals
ST: Get practice working with issues and technical work flow: be able to find and report issues efficiently and effectively. reduce the noise, don’t add to it.
WB: Get good at emailing people:
- be concise
- ask for what you want, don’t waste their time
- if you’re asking for things, number them
- if you’re telling people things, bullet them
- bold what’s important
- make it skimmable
Random Fun Mix Bag Anything Goes Skill Goals
ST: Dive into interface animations.
WB: Make a full stack contact form in a framework.
INTERMEDIATE CODER
Code Skill Goals
ST: CSS variables: theme-able complex UIs with CSS variables is going to be more in demand.
Getting Started | Modern CSS Design Systems (leveluptutorials.com)
WB: Server-side coding fundamentals: A lot of our apps are beginning to blur the lines between front end and server side, get comfortable with both.
Soft Skill Goals
ST: Get good at meetings:
- don't be a jerk
- learn how to talk to people
- focus on the results
- don’t talk down to nontechnical people
- prepare and present yourself well, doesn’t take a lot to look put together
WB: Learn how to organize a repo.
Random Fun Mix Bag Anything Goes Skill Goals
ST: Make something animated with JavaScript. Getting Started | Animating Svelte (leveluptutorials.com)
WB: Write a bot.
ADVANCED CODER
Code Skill Goals
ST: Write continuous integration/deployment actions and tools:
- take away the busy work
- reviews
- reformatting
- finding bugs
WB: Advanced typescript:
- learn dynamic types
- third party modules
- extend existing types
Soft Skill Goals
ST: Challenge yourself by teaching at your company:
- doesn’t have to be a big deal, small informal i.e. lunch and learns
- “hey want to take 20 mins today and I’ll teach you something”
WB: Speak at a conferences or meetups.
Random Fun Mix Bag Anything Goes Skill Goals
ST: Make something 3D. Intro To React 3D | React 3D (leveluptutorials.com)
WB: Scrape and write something to collect data and display it.
Listen to Scott & Wes chat about this topic here.
Author
KAITLIN BLOOM
Sending Events Up the Svelte Component Tree With createEventDispatcher
Jan 14, 2022
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
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
This, then produces a Svelte style event on the usage of the component via the standard 'on' syntax. ie on:eventName. In this exampled pulled from the official Svelte tutorial, we're dispatching an event named 'message', so therefore the even will be on:message.
Parent
<Inner on:message={anyFunctionYouWant}/>
See the official Svelte Tutorial for a great interactive example on how to use. https://svelte.dev/tutorial/component-events
Author
Scott Tolinski
Level Up Links - Shoelace x Gilbert Adair x Awesome Standalones x What is Astro x Wasp
Nov 10, 2021
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] Shoelace
A forward-thinking library of web components.
2. [VIDEO] Dark Transcreation and graphic design in the afterlife
This video oversimplifies and conflates ideas from Gilbert Adair’s ’The Death of the Author’ and contemporary marketing practices, and applies them to a reductive reading of European graphic design history.
3. [CODE] Awesome Standalones
A curated list of awesome framework-agnostic standalone web components
4. [VIDEO] What is Astro
Astro is an amazing platform that will allow you to build the fastest, smallest sites that ship the least amount of JavaScript. Learn all about it.
5. [CODE] Wasp
Wasm programming language
Author
Scott Tolinski
Get Current Date with JavaScript Temporal API
Nov 09, 2021
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 time zone and ISO-8601 calendar
https://tc39.es/proposal-temporal/docs/#Temporal-Now
So, what other properties exist on a Temporal plain date?
This was a quick one with a few key snippets, stay tuned for more Temporal content.
Author
Scott Tolinski
How To Convert an HTMLCollection to an Array
May 31, 2021
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 )
Author
Scott Tolinski
How to Get Unique Values From an Array or Collection
Apr 23, 2021
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: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
"The Set object lets you store unique values of any type, whether primitive values or object references."
That's really it. By definition a JavaScript set is a collection of values that may only exist once. As of ES2015, this comparison is done by the same algorithm as "===".
Why Spread?
[...set]
This creates a new array out of the values created in the set. This is essentially just converting the set back to an array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#iterating_sets
Put it all together and you have
const unique = [...new Set(["one", "two", "one"])]
What about a collection
A collection is just an array of objects. In the initial example shown, we're just doing a map over that collection to pull out the specific values from the collection and put them into an array, which is then converted to a Set and back to an array. That conversion is what gives us our unique values.
Author
Scott Tolinski
How to use __dirname with ESM
Feb 12, 2021
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: https://nodejs.org/api/esm.html#esm_no_filename_or_dirname
The fix
The good news is that using path and url, two built in Node packages, we have the ability to replicate this functionality fairly easily.
Step 1. Import Node modules. These are baked in, so we don't need to install them first.
import path from "path"
import { fileURLToPath } from "url"
Step 2. Create the variables. This uses the new import.meta property, which includes meta information about your current file. Read more on that here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
TADA
That's it. It's a bummer that these aren't available, but it's no sweat to us to use this new technique to get them back. Just keep in mind that import.meta.url is for the current file you are in, so putting this in a utilities file or something might not yield the results you're after.
Author
Scott Tolinski
How To Copy To Clipboard Using JavaScript
Dec 26, 2020
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 like this.
async function copyToClipboard(textToCopy) {
try {
await navigator.clipboard.writeText(textToCopy)
} catch (e) {
console.error(e)
}
}
Please do pay attention to compatibility listed on the MDN Docs, users needing to support IE11 are out of luck.
Author
Scott Tolinski
CSS Variables Root vs Body Scoping
Dec 04, 2020
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 variables.
For a long time we scoped our entire design system to root like this.
Old Code ☹️
:root {
--primary: red;
--bg: var(--primary);
}
We would then override the root styles with:
.dark {
--primary: green;
}
/* --bg === red still ☹️ */
However, this becomes a cascading issue quickly because the end result is --bg still resolving to the :root scope and being set to the value of 'red' rather the intended 'green'. To fix this, we moved our :root scope variables directly onto the body class. This allows for the theme variables to correctly cascade in our overrides. Check out the new code:
New Code ✅
body {
--primary: red;
--bg: var(--primary);
}
.dark {
--primary: green;
}
/* --bg === green ✅ */
Author
Scott Tolinski
How to Supercharge Your Productivity with GraphQL Tooling
Nov 20, 2020
Author
Scott Tolinski
How To Read and Write Files In Deno
Nov 18, 2020
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.
const filename = "./text.txt";
const file = await Deno.readTextFile(filename)
Now when we run our our file, we need to make sure we use deno --allowRead yourFile.ts
Writing Files in Deno
Writing text files in Deno is also a one liner.
const stringToBeWritten = "Hello from fileName.txt"
const file = await Deno.writeTextFile("fileName.txt", stringToBeWritten)
This time we need to make sure you're using deno --allowWrite yourFile.ts
Author
Scott Tolinski
Announcing How To Build a GraphQL API
Mar 04, 2020
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 can pick a topic of your own.
In the tutorial, you’ll learn how server-side GraphQL processes and returns data, then you’ll work your way up to more advanced topics like mutations, subscriptions, and resolvers. In the end, you’ll have a functional API where you can query, add, and subscribe to items.
The rest of this post provides a basic overview of GraphQL and what we’ll be covering in the course. But if you’re ready to get started now, skip the rest and head on over to the tutorial!
What is GraphQL?
GraphQL is an API query language and a runtime that fulfills those queries with your data. To unpack what all of that means, let’s break down a few key terms:
- An Application Programming Interface (API) allows you to access and request data from a certain established source. For example, you could use Twitter’s API to analyze data about how often you tweet.
- A query is the process of asking the server for that data, and a query language defines the syntax of how you ask for it. Query languages standardize the query process, making it so that you and your clients can consistently get the same information when you need it.
By providing both a query language and a runtime, GraphQL allows you to build APIs and put them to work.
Why not just use REST or another API format?
There’s a lot of things that make GraphQL different from its competitors, but the main thing is that it’s super efficient. With GraphQL, you only ask for the data you absolutely need, and you can make more complex requests at one time. The best part is that it always checks the cache for information first before making a request to the source, which means less time and energy spent looking for what you need.
Client vs server: What can I do with GraphQL?
Although this tutorial covers only the server side, it’s still important to realize that GraphQL is a double-edged sword that can be implemented on the client side and the server side.
On the front end, we have our query language. We can ask the client to fetch us different data, which we can then display, change, or organize. It’s all about getting the data and making sure that all of your changes are properly cached.
On the back end, the server is in charge of executing your requests and getting the data from a variety of sources in the most efficient way possible. When you want to do a mutation, for example, the server is what watches for your requests and makes the changes happen.
Getting connected: GraphQL’s powerful partners
GraphQL itself is quite handy, but in this tutorial, we incorporate other technologies and frameworks to maximize what our project can accomplish. The three main tools that we use are:
- Apollo Server as our library. It’s one of the most popular GraphQL clients, and it’s super simple to get up and running.
- MongoDB with mongoose to store and manage our data. MongoDB will help us create a database from which to pull our data, and mongoose is a library that manages relationships between that data.
- NodeJS as our JavaScript runtime.
Get started on the course!
Everything you’ve just read is only the tip of the iceberg when it comes to what GraphQL can do. If you want to learn more about what it is and how to use it, “How to Make a GraphQL API” is the course for you. Check it out now!
Author
Scott Tolinski
How Level Up Animates Transitions with React Spring
Sep 04, 2018
How Level Up Animates Transitions with React Spring
Author