GatsbyJS is a React-based static site generator powered by GraphQL. It makes it possible for you to code and develop your site, while Gatsby transforms it into a directory with a single HTML file with all your static assets. On it’s own Gatsby is fast and comes already preconfi...
Big thanks to this week's sponsor.
They help keep Scotch tutorials free!
Ionic allows you to develop Progressive Web Applications (PWAs) and hybrid mobile apps. PWAs are web applications that run in a browser and allow for offline capabilities via service workers. They can be installed on desktops and mobile devices, just like you install apps on your smartphone. Hybr...
Tailwind has finally released a major version of the utility based styling library. Tailwind is a utility-based CSS framework that just hit a big milestone: v1!!!...
CSS Scan is a super cool tool I've just learned about from Chris Nwamba. It allows you to inspect and copy CSS. It's definitely the fastest way I've seen to copy CSS from a website. ...
font-display is a CSS feature that allows us to control how we load fonts. Google Fonts are used by many websites (including Scotch.io) and up until now, we didn't have the ability to c...
If you’re familiar with popular JavaScript frontend frameworks like React, Angular, etc, then the concept of ECMAScript won’t be entirely new to you. ES Modules have the import and export syntax we see often in frontend frameworks. Node uses CommonJS which re...
Side projects are not only fun but they bring a whole lot of learning experience for you. While hunting for a pre-built page loader for a website I ended up coding one for myself. Initially, I had a view that implementing CSS3 animations are quite a cumbersome task so, I looked for an onli...
Microsoft Build is packed with gazillion announcements, fun activities, people and it's so much to fit into one article. I won't be doing justice to the event by trying to fit everything that happened today in one article but I am just going to try and highlight some exciting news for those who a...
I am a big fan of Windows (shame shame shame). I’m usually the only Surface in a sea of MacBooks. I love both platforms and work on both. My kitchen laptop is a 2015 MacBook and I’d gladly get another if they ever fix the keyboard so that it has more than 1mm of travel. ...
Slack is not only the fastest growing startup in history, but it's also an app by the same name and one of the most popular communication tools in use today. We use it...
When building Single Page Applications a feature I frequently find myself adding is a simple search filter. Nothing too in depth, I'll just want a text field to be able to quickly filter over items to find specific ones. I'm going to share what I do, because it's quick to implement, perfor...
When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as it creates most of the boilerplate code needed to get you up and running. The React team recently un...
A handful of products rely on reviews and star-ratings for product feedback. When customers are impressed or dissatisfied about our product, they come back to where it was purchased looking for a way to leave feedback. Apps and e-commerce products are examples of the scenarios where we would love...
What is Storybook? Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and a host of other frameworks. It makes building stunning ...
There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML files. VuePress also turns your content into a single-page application (SPA), so transitions between p...
GitHub is an amazing tool that many of us developers use on a daily basis. While GitHub has many great features, one thing that I've always found it to lack is browsing speed. They've got keyboard shortcuts to get to the search bar (/) but it still isn't the easiest. If you wa...
