How to Let Users Dynamically Change the Number of Posts per Page in WordPress

Consider the following scenario: you have a WordPress blog with hundreds of posts. On your blog archive page, six posts appear at a time. Of course, there’s pagination for moving between older and newer posts. But what if you want to give users the option to choose the number of posts they want to display… Continue reading How to Let Users Dynamically Change the Number of Posts per Page in WordPress

Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

In this new tutorial we’ll discuss a straightforward approach for reducing spam from form submissions. This technique will use PHP and JavaScript to block form submission until the user provides the correct answer to a simple math CAPTCHA. Here’s a quick video that demonstrates the expected functionality: It’s important to note that this is just… Continue reading Create a Simple Math CAPTCHA for Your Forms With PHP and JavaScript

Analyzing Code With Code Detection API

The world runs on code. Nearly every single aspect of our lives is in some way, shape, or form handled by code. It may be hidden and running behind the scenes, but it is ever-present in our daily activities. Waking in the morning thanks to our alarm clock or phone app, consuming news and media… Continue reading Analyzing Code With Code Detection API

Wordle is a masterclass in product design simplicity

Some of the most fun I’ve had this year is playing Wordle with my friends and family. But I’m a product designer and a programmer, so as I played, I couldn’t help but notice some strange things about how it was constructed. I was right in the middle of making my own product School Morning Routine,… Continue reading Wordle is a masterclass in product design simplicity

How to Create a Sticky Toolbar With CSS and a Bit of JavaScript

In this new tutorial we’ll learn how to create a sticky (or fixed) toolbar—also referred to as a vertical navigation menu—with animated tooltips that you can use on your sites for all sorts of things. For example, if you are a store owner, you can use it to include a quick links feature for promoting… Continue reading How to Create a Sticky Toolbar With CSS and a Bit of JavaScript

How Long Does it Take to Learn JavaScript

According to “The State of the Octoverse” by GitHub, the statistics show that JavaScript is the most popular language globally. It is good investment to learn JavaScript for front-end or back-end programming. How Long Will it Take? In the book Outliers by Malcolm Gladwell, there is the 10,000 hours rule. This rule states that there… Continue reading How Long Does it Take to Learn JavaScript

How to Crop or Resize an Image With JavaScript

It’s very easy to show a resized or cropped version of an image on a website using CSS. However, this doesn’t change the original image data. What if you want to create an actual cropped or resized version of an image for your visitors or clients? We’ve already published a couple of tutorials on how… Continue reading How to Crop or Resize an Image With JavaScript

10 Best Cross-Browser Testing Tools for Testing Websites in 2022

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} If you’ve recently designed or redesigned your website, you’re probably planning for a big launch. But before you launch or relaunch your website, it’s important to test your website across various browsers.  Now, this may sound intimidating, given how many browsers there are on the market. The… Continue reading 10 Best Cross-Browser Testing Tools for Testing Websites in 2022

How to Build a Responsive Slider With Swiper.js

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever built an advanced slider for a project? If so, you might have taken advantage of any one of a number of JavaScript carousels. In the past, I’ve covered two of them: slick and Owl. Today, I’ll introduce another well-known one: Swiper. Ready to learn… Continue reading How to Build a Responsive Slider With Swiper.js

What is HTML Email?

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} In this quick explainer, I’ll clear up any doubts or questions you have about HTML emails, how to create them, and how to send them. What is HTML Email? Your email program or service can send and receive emails in two formats; plain text and HTML. Plain… Continue reading What is HTML Email?

How to Build a UIkit Lightbox With Dot Navigation

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Have you ever worked with the UIkit front-end framework? Its current version at the time of writing is 3.9.4, and in the next few months, YOOtheme (the team behind it) plan to release v4. This isn’t the first time I’ve written about UIkit; some years ago, while still… Continue reading How to Build a UIkit Lightbox With Dot Navigation

Easy Steps to Convert Photoshop Designs Into a Website

Here’s a simple guide to solving the troublesome task of turning Photoshop designs into a website. Or, in more technical terms, convert PSD files into responsive HTML. Modern business cannot operate without the Internet today. Therefore, it is very important to have a high-quality presence in it, for example, in the form of websites that… Continue reading Easy Steps to Convert Photoshop Designs Into a Website

JavaScript map vs. forEach: When to Use Each One

In this article, we’ll discuss the map and forEach methods in JavaScript, and we’ll also go through the differences between them to understand when to use each one. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for… Continue reading JavaScript map vs. forEach: When to Use Each One

A Look at Its Impact on the Web

In the web design industry, it’s rare that a tool stays relevant for a decade or more. Things tend to change so quickly that the useful life of an app or framework usually isn’t very long. However, Twitter’s Bootstrap has defied those odds. Now in existence for over 10 years, the self-described “front-end open source… Continue reading A Look at Its Impact on the Web

What is React Native?

React Native is a cross-platform mobile application development framework that Facebook created in 2015.  React Natives uses JavaScript as the underlying programming language, and it aims to help developers can build native mobile apps for both Android and IOS devices with a single codebase. In this post, I’ll introduce some of the key concepts and… Continue reading What is React Native?

Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript

However much information you process when studying anything, there will be no results unless you start applying it in real life. To master a language, people usually practice writing, speaking, and listening to strengthen their knowledge after learning theory. With a programming language, it’s not quite the same. You can read the code and write… Continue reading Practice Makes Perfect: 4 Reasons You Struggle Learning JavaScript

How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla

In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript and later on we’ll see how to do it with jQuery. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern… Continue reading How to Enable or Disable a Button With JavaScript: jQuery vs Vanilla

Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

Have you ever wanted to build a unique single-page scrolling website yet didn’t know where to start? If so, don’t worry! Today we’re going to create together such a website. To achieve this, we’ll take advantage of Locomotive Scroll, a small and easy-to-use JavaScript library for cool scrolling effects. Plus, to speed up the development… Continue reading Create a Unique Scrolling Website With Locomotive Scroll & Tailwind CSS

How to Change the URL in JavaScript: Redirecting

In this quick article, we’ll discuss how to change the URL in JavaScript by redirecting. We’ll go through a couple of different ways that you can use to perform JavaScript redirects. JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without… Continue reading How to Change the URL in JavaScript: Redirecting

5 Web Design Tips To Improve Your SEO

Many factors affect your SEO ranking, and getting the best results from it depends on the same factors that affect your SEO. When people hear the words ‘search engine optimization’ or SEO, they automatically think about optimizing their content through keywords in order to improve their ranking on search engine results pages (SERPs). However, many… Continue reading 5 Web Design Tips To Improve Your SEO

Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine

WordPress powers nearly 40% of all websites, thanks to its commitment to making publication possible for everyone, for free. Combined with premium plugins and themes, it’s possibly the ultimate tool for building attractive, unique, and feature-rich websites without any coding or design experience. However, you do pay the price for this experience, with WordPress and… Continue reading Create Beautiful WordPress Pages with Optimized Images Using Elementor and ImageEngine

How to Preserve the Menu State on Page Load (Using Local Storage)

What You’ll Be Creating In this tutorial, we’ll create a simple static site with Tailwind CSS and then learn how to preserve its menu state on page load. The first time we visit the site, the menu will be hidden. However, as soon as we open it and close the browser, we’ll use local storage… Continue reading How to Preserve the Menu State on Page Load (Using Local Storage)

Four Free Flutter Widgets You Should Know About

Flutter development has experienced unprecedented growth in the last year. Not only has it expanded as a channel for developers to expand their skillset in Dart, but it has also allowed them to enjoy the perks of a single codebase. Whether you are making a widget on Flutter or looking for a Flutter widget that could make a… Continue reading Four Free Flutter Widgets You Should Know About

3 Effective Ways To Improve Your Site’s Carbon Footprint

At the dawn of the web-era, there was much focus on how environmentally friendly websites were: we’d chop down fewer trees, ship fewer products, and travel less for business. And because the web was small, any negative impact it had was relatively small. But the Internet’s no longer small, and neither is the impact it… Continue reading 3 Effective Ways To Improve Your Site’s Carbon Footprint