If you have an information-rich website or application, you might want to visualize your data so that users can better make sense of it. Although tables can be quite useful in certain cases such as pricing and feature comparison tables, other kind of information is easier to process with the help of some kind of data visualization. JavaScript libraries such as Chart.js let you generate different types of HTML5 charts such as line, bar, pie, doughnut, and area charts. Chart.js is a versatile library...
Material design is a popular visual design system created by Google. It aims to enable designers and developers to create applications that have a unified look on all platforms. Apps that follow material design principles look beautiful and professional on all operating systems and devices. Google's official material design toolkit supplies you with many assets such as guidelines, components, color palettes, themes, and icons. However, that's just the beginning. As material design is an open-source...
The Windows Subsystem for Linux (WSL) is a compatibility layer that natively runs Linux binaries on the Windows 10 and Windows Server 2019 operating systems. It allows you to set up a Linux environment on Windows without having to install a virtual machine. With WSL, you can install any Linux distro you want on your Windows machine. In this tutorial, we will show you step by step how to install the Windows Subsystem for Linux. Then, we will install the Ubuntu 18.04 (LTS) on top of WSL. But, first, let's see...
Collapsing headers are an excellent solution to show important information to users, such as special offers and key notifications. Many developers rely on JavaScript when they create such effects, however, it's perfectly possible to create a simpler collapsing header effect with pure CSS, too. Collapsing headers work similar to parallax effects. The background of the collapsing header stays fixed so that the content below it can flow on top of it when the user scrolls down the page. In this tutorial,...
Enabling dark mode in CSS allows website visitors to switch to an eye-friendly and resource-saving design whenever they want. There are a couple of UX patterns you can use to add a dark theme to your site. In this tutorial, we will show you how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off. Our demo will be responsive as well, so it will look good on all device sizes, from smartphones to desktops to large screens. Here is how the light mode will finally look...
The IT industry is changing incredibly fast. Technologies and programming languages that are all the rage today become out-of-date tomorrow. Trends are coming and going and the job market is continuously fluctuating as well. So, how to choose which programming language to learn next? To find the right answer, you need to take many things into consideration, such as: industry trends, the job market, your current skill set, the requirements of your project, the availability of learning resources,...
The best WordPress table plugins let you add different kinds of tables and charts to your site. They also make it possible to export and import table data, customize the look and feel of your tables, sort table cells, and perform other actions. Although there are many WordPress table plugins on the market, many of them haven't been updated for a while. So, in this post, we have collected the best premium and free WordPress table plugins that are regularly taken care of. Note that the prices of the plugins...
Hero images can be used in versatile ways. Home pages and landing pages are the most frequent use cases but they also work well with single post, archive, contact, and other pages. Although hero sections vary by size, full page hero images have become very fashionable in recent years, used by many notable publishers such as Medium.com. However, creating a full page hero image is not an easy task, as you need to pay attention to many things such as: The hero image needs to cover the whole viewport size—not...