JavaScript Ternary Operators
Ternary operators allow us to really quickly write shorter **if** statements Here's a quick example: ...
Code. Eat. Sleep. Loop
welcome to scotch.io
fun and practical web development tutorials
NEW! 🔥
Debugging CSS Grid with Firefox Dev Tools
CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser. ...
Big thanks to this week's sponsor.
They help keep Scotch tutorials free!
Where should you start?
Dynamic Imports and F# Pipes Officially Land in Babel 7.5
A few days ago, the Babel team release two new feature proposals among all the awesome features we are looking forward to at the next major release. Over time, they have added a lot new things added into the JavaScript compiler, and this time, this proposals looks like something we can all jump o...
Revive: A Free Tool that Analyzes Your Traffic and Finds the Content You Should Update
I started Scotch as a web development tutorial blog. Over the years, I've learned far more than I expected. It was no longer just about web development and coding tutorials. I've learned much about: SEO (a huge amount) Building a ...
VS Code Screencast Mode
VS Code has many great tools hidden deep within its settings. One of those tools is screencast mode. Screencast mode will display keyboard presses. You can use screencast mode for: Creating VS Code Gifs Teaching keyboard shortcuts (li...
The Top Tech People to Follow on Twitter for Your Stack
Twitter like other social media bring people together, and lots of everyday activities go on here too, people get jobs, sell, connect, work and even get items for free. This brings in the question of CROWD CONTROL. For a platform that has over 260 million users (2019) and still r...
VS Code June Update: Status Bar Updates, Indent Guides, and more
It's amazing that VS Code can consistently come out with meaningful updates month after month. The commitment that team has to the needs of the community is impressive. The June 1.36 update is ou...
Building an Animal Adoption Site with Node and Vue - Part 1
Today we're going to build an application that showcases animals that are available for adoption! This will be a two part blog series, so in this portion we'll just learn how to setup our application and get some mock data flowing from the backend to the frontend. Let's get start...
The Future of Websites: Headless CMSs
Since their introduction, content management systems (CMS) have made life easier for website developers, site owners, and administrators alike. Platforms like WordPress, Joomla, and Drupal account for more than 60% of all web content platforms. The only problem i...
Exploring Sets and Maps in JavaScript
Let’s take~~ ~~a look into two new constructs that were introduced in the JavaScript ES6 specification: Set - The Set object allows you to store unique values of any type. Map - The Map object allows you to store key-value pairs and remembe...
Trying the New WSL 2. It's Fast! (Windows Subsystem for Linux)
Windows Subsystem for Linux is the tool that was released by Microsoft to get a full UNIX system inside of Windows. Microsoft has put in some good initiatives for developers after purchasing GitHub, making VS Code, open sourcing .NET Core, and more. ...
Top 10 Coding Fonts for Developers
Developers are extremely passionate about certain things: developer tools, tabs vs. spaces, CSS in JS (or not!), and FONTS! I started a Twitter thread asking for developer's favorite fonts for writing code, and here's what w...
Playing with the New Windows Terminal
The new Windows Terminal was just released in Preview capacity. You'll need the latest Windows May Update to download it. ...
Placing, Spanning and Density in CSS Grid
The most common things you learn in CSS Grid is usually related to the grid container and less about the grid items. A generic grid definition applied to the grid container is enough for a basic layout structure. However, when you need more control over the contents of the grid, the grid containe...
Windows Emoji Picker Now Supports Kaomoji (●'◡'●)
The Windows emoji picker helps us choose emojis quickly. I used to have to go to getemoji.com to copy and paste some emojis. (⌐■_■) Windows introduced an emoji picker a while back and now we can open the emoji picker using Windows + ....
ES6 Arrow Functions in JavaScript - Getting Started
With ES6 JavaScript came many updates to the language including the spread operator, object destructuring, new type of variables, and more. On top of all those amazing features came arrow functions, a new and concise way to write functions. In this article, we will walk through t...
