Dec 7, 2019 1 min readApple, Mac, Quick TipsViews:
Learn how to batch rename files (rename multiple files at once) on Mac. Since Mac OS X Yosemite it has been possible to rename a group of files at the same time without using any 3rd party software or…
Dec 6, 2019 1 min readApple, Mac, Quick TipsViews:
Since Mac OS X El Capitan it’s been possible to show and hide (toggle) your Mac’s Menu bar when you move your mouse to the top of your desktop screen area. By default your Mac Menu is fixed, so to…
Dec 5, 2019 1 min readApple, Mac, Quick TipsViews:
Learn how to take 3 different types of screenshots on your Mac computer.1. Take full-screen screenshotTo snap a screenshot of your entire screen, simply hold down CMD + Shift + 3 on your keyboard. By…
There are many ways to handle media in GatsbyJS, from simple to advanced. This is the simplest way I’ve found to import a local video file (here an mp4) and use it as a source for the video (
Sometimes an app crashes and you have to restart it to make it work again. But sometimes a crashing app causes your computer to be unusable until the sinning app is shut down. In that case, you have…
To close a single-window on Mac, whether it’s a browser tab or a Finder window, while inside the window you want to close, hold down CMD and hit W on your keyboard once.To close all open windows or…
I had my MacBook for years before I decided to finally find out what the difference between the New Finder Window and New Smart Folder is. On the surface, they look like the same thing, but they’re…
Do you want to save a ton of battery life on your iPhone? The following tip requires a quick and simple settings adjustment that will not only make your iPhone battery last much longer on each full…
Nov 29, 2019 2 min readiPhone, Privacy, SecurityViews:
In times where privacy and security are hot topics, you want to make sure that your phone is not working against your own wishes. Unfortunately, most iPhone users are not aware that their iPhone is…
There are two different areas of SEO that you’ll often hear described as Content SEO and Technical SEO. So, what’s the difference?Content SEOContent SEO refers to the strategy behind your content…
A type scale is a collection of carefully picked font sizes that we use to represent different text elements in order to establish a balanced and harmonious composition in our products. By…
One of the first things a web developer or designer learns about is the six-levels of HTML5’s heading elements, from H1 to H6. As a beginner, you’re told that H1 is the most important element and that…
If you’re new to SEO you might be confused about the difference between follow and no follow links, and whether or not it’s important to specify what type of links you’re using on your website.In…
Learn how to quickly bypass AdBlocker detection on blasphemous websites that tell you to disable your AdBlocker to continue using their website.The way websites detect that you’re using an Ad Bloker…
To make an image into a clickable link that works just like a regular link, you need to wrap it inside an HTML anchor element.The structure of your anchor element is the same as if you add a regular…
The difference between a link and a URL doesn’t matter if you’re just having a casual conversation about getting a direct path to some content on a web page. Like if you’re sharing a great article…
If for whatever reason your client insists on using extremely light font-weights, this is where you step in and explain the difference between readability & legibility, and how you can still get away…
Nov 20, 2019 5 min readSoftware Design, Software Principles, FrameworksViews:
In software design, there’s a powerful paradigm called “Convention over Configuration”. The concept is about taking unnecessary, time-consuming decisions out of your developer-hands, by more or less…
I recently tried to install Mojave on my Macbook Pro mid-2014. My first task was to try finding Mojave in the App Store, which turned out to be a problem. Searching for Mojave inside the App Store…
Are you sometimes having problems updating your Mac apps via the App Store? Well, you’re not alone. I see more and more users complaining about this. Fortunately, there’s a faster and more consistent…
Alexa rank is a global ranking system for websites. Alexa uses website traffic data to measure a website’s popularity relative to other websites. Alexa is just one of many SEO measuring tools in the…
Nov 16, 2019 3 min readVPN, Security, PrivacyViews:
In short, a VPN is a type of online service that provides software/apps that you can install on your devices to make your internet connection more secure than it is by default. A VPN gives you online…
You’d think that Xcode, the application itself, would let you know when there’s a new version out. Wrong. For some reason, to update Xcode you have to go to the App Store first. So go there. Remember…
In typography the there are many emphasis techniques, with italics and bold being the most common ones. Italic and bold are different font variations of the original typeface design. Let’s find out…
Drop cap is the first letter in a text block. Drop caps are usually used in the lead paragraph of a document, like this paragraph you’re reading right now. Drop caps are styled differently than the…
In typography, the two most common typeface classifications (font types) are serif and sans-serif. Let’s find out what makes them different. The word “Serif” refers to a finishing letter stroke in…
If you’ve been working as a web designer or developer for a few months, you’ve probably heard this advice: And here it is:Comic Sans has a round, unelegant, and somewhat flamboyant style, which makes…
In typography, there are 4 common techniques to to align your text. The following typography guidelines apply to print work as well as web typography.To align text with CSS (for the web) we use the…
Nov 9, 2019 1 min readTypography, Chrome ExtensionsViews:
There are a couple of ways to find out which fonts a website is using. I’ll show you the fastest way first.The fastest way to find a website’s fonts is to install a browser extension. There are a few…
There are two main tools you can use to develop React Native apps. Either you can use the official React Native CLI by Facebook or the React Native Expo CLI. CLI stands for Command Line Interface. A…
Learn the difference between React, ReactDom and React Native. React, often called ReactJS, is a platform-agnostic JavaScript library used to build user interfaces (UI). Agnostic means that React, the…
Learn how to prevent CSS’s Flexbox from stretching your image horizontally.Flexbox has an odd default behavior where images get stretched horizontally to the full width of its parent container. So if…
How to quickly download images from a website with a Chrome Extension.There used to be a great Chrome Extension that allowed you to quickly download all images on a website, called Image Downloader…
How to use comments in CSS. You write comments inside CSS stylesheets to briefly document (explain) the code, either for yourself or for members of your team.To write comments in CSS we use the…
In HTML documents you can write comments that are not interpreted by the web browser. The purpose of using comments inside your HTML files is to briefly document (explain) the code, either for…
From NPM5 moving forward, there’s no difference between npm install and npm install --save — so save yourself some unnecessary typing.Before NPM5, the difference was that npm install --save would save…
Learn how to embed Pen’s (from CodePen) in GatsbyJS markdown files.In GatsbyJS, markdown is the default language that most Gatsby site owners use to write their content (blog posts, tutorials).
If…
Web typography: learn how to get rid of widows or orphans in your text on your websites, with a simple string. What are widows?Widows, sometimes called orphans or runts, occur when a word is left…
Oct 30, 2019 3 min readTypography, HTML, CSSViews:
Learn how to quickly add Google Fonts to your website with the HTML element and a few lines of CSS.This quick typography and CSS tutorial will show you the fastest way I know to add Google…
Learn how to empty an array with JavaScript. Emptying an array with JavaScript could not be more simple. Let’s say you have an array with a list of exercises:Use console.log(exerciseList) to print out…
Centering elements with CSS appears much harder than it should be, especially if you need to both center horizontally and vertically. Today I’ll show you how to do it, both with modern CSS and a bit…
There are a couple of ways we can call or run a function after a specific time period with JavaScript. I’ll show you two JavaScript time event methods, setTimeout() and setInterval(). The difference…
Oct 26, 2019 1 min readTerminal, Command LineViews:
Learn how to find your public IP address using different methods. The quickest way to find your public IP address is to simply go on Google, or your preferred search engine, and type: Depending on…
Let’s talk about why semantic markup (HTML) is important for your websites SEO, and how simple it is to get this crucial SEO element right, even as non-techie. Most people have heard about SEO (Search…
Oct 24, 2019 1 min readChrome, Web Developer ToolsViews:
Learn how to save any web page as a PDF document — fast. Saving a web page as a PDF file via your browser is one of those awesome gems that has sneaked into modern web browsers without most noticing…
In this quick tutorial, you’ll learn how to exclude drafts from your Gatsby website in production mode. Start by opening your gatsby-config.js file. Then go to gatsby-source-filesystem. Now inside the…
Let’s learn how to get the last element of an array with plain JavaScript, using 3 different methods. First, let’s set up an array of items, so we have something to work with. In this case, we’ll use…
In this quick tutorial, you’ll learn how to continuously rotate images using the CSS animation property. First, we need some HTML markup with an image and some attributes: Your image should show up…
Oct 20, 2019 1 min readPerformance, Web Developer Tools, NPMViews:
When you install NPM packages to your project, you often don’t know how much size it adds to your project’s total bundle size. This is important, because as you start adding packages over time your…
If you’re a YouTuber and new to SEO it can be valuable to take a look at how your colleagues and competitors are SEO tagging their YouTube videos with keywords. Tagging your videos, greatly improves…
If you want to remove a Git Init file, e.g. from a cloned GitHub respository, first make sure that you are in the correct directory, you can run the following command inside your terminal: Now when…
Adding multiple styles to an element with raw vanilla JavaScript can feel a bit clunky. The most common approach I’ve seen to style elements with plain JavaScript is to grab your target element, and…
Bash is a command line tool. Every terminal has a command line that you use to communicate with your computer’s OS (Operating System).Every time you open your computer’s Terminal, you open a so-called…
NPM is a JavaScript package manager. NPM, the organization, is the worlds biggest software registry. NPM is used by the Open Source community to share software in the shape of packages. Packages can…
The Terminal is an interface/application that gives you access to the underlying Operating System (OS) of your machine. The Terminal allows you to speak to the brain of your computer — so to speak…
One of the most common CSS questions I get is what’s the difference between background and background-color in CSS? The reason it’s confusing is that you often see developers using background-color…
Although GatsbyJS is a React framework, it can be useful to know how to add custom JavaScript to your Gatsby project. Perhaps you just moved your old website to Gatsby, and have a bunch of custom…
Does your Netlify hosted website show up as insecure when visiting your domain with the www prefix, but it shows up fine without www? Go to Domain Settings > HTTPS. If you only see yourdomain.com…
A lot of websites load the entire Font Awesome library on their website, but they only use a small handful of icons — that’s a waste of bandwidth. You can save a lot of resources by downloading the…
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum eius nesciunt vero! Quod est velit ratione quam voluptate quis cum qui facilis suscipit culpa maxime alias, corrupti excepturi ad…
