Variable fonts extend the OpenType font specification with dynamic capabilities. They supply developers with typefaces that come with unlimited font variations. With variable fonts, you don't have to load a separate font file for each style variation such as italic or bold types. All font variations are included in one single file. You are not tied to pre-defined typographical styles, either. For example, most static fonts require you to use the font-weight: 800; rule for bold fonts. Variable...
Semantic HTML tags allow you to add meaning to your markup so that search engines, screen readers, and web browsers can make sense of it. By default, when a user agent reads your content it doesn't understand the context and meaning. Semantic HTML tags let you serve structured content to your users, which is especially important for on-page SEO and accessibility. Although semantic tags existed in earlier HTML versions, the HTML5 specifications added several new semantic elements to the syntax—both...
Arrow functions are a relatively new way of writing function expressions in JavaScript. They have been introduced by the ECMAScript 6 specifications and since then become the most popular ES6 feature. Arrow functions allow you to use the fat arrow syntax to quickly define JavaScript functions, with or without parameters. Its biggest advantage is that you can omit curly brackets and the function and return keywords when creating a new JavaScript function. The syntax might look strange at first,...
Shopify is a popular eCommerce platform built on Ruby on Rails. Currently, it powers more than 600,000 online stores all over the world, such as the New York Times Shop, Penguin Books, Red Bull, and Tesla Motors. Although there are many Shopify templates on the market, it's not that easy to find free ones. So, we have collected the best free Shopify themes for you, all of which come with premium-like features and beautiful, professional designs. 1. Star ... Star is a feature-rich Shopify theme offered...
CSS-in-JavaScript libraries have become increasingly popular in recent years. They allow you to write component-level CSS using JavaScript. CSS-in-JS libraries are ideal for larger-scale projects when you create single-page applications built of multiple components. Although CSS-in-JS libraries certainly have a learning curve, they also come with many benefits, such as: You don't have to maintain multiple CSS files, as styles are encapsulated within their own component. JavaScript enhances...
Running a WordPress site comes with multiple security risks you need to manage somehow. One of the biggest threats comes from untested themes and plugins created by third-party authors. To make sure you don't install a plugin or theme that breaks your WordPress site, the best thing you can do is to test it in a local environment before activating it on your production site. There are a couple of software you can use to create a local WordPress install—XAMPP is one of the best options. It consists of: X:...
Bootstrap 4 is currently the most popular front-end framework in the world. You can use it to build any kind of user interfaces, from admin templates to full-featured websites. In this step-by-step tutorial, we will have a look at how to build a responsive landing page with Bootstrap 4. You can even use it as a homepage or connect it to a specific marketing campaign. The landing page we will build will have five sections: a fixed navigation bar, a hero section, a three-column "Services" section, a full-width...
You don't necessarily need jQuery to add a countdown timer to your site. It takes just a few lines of JavaScript to create a customizable timer that counts down to a pre-defined date and time. You can embed the timer to several kinds of pages such as Coming Soon and Maintenance pages, eCommerce stores, daily deals websites, and event registration pages. In this tutorial, we will create the countdown timer step by step so that you can understand everything. You can find the entire JavaScript code at the...