WooCommerce Shortcodes Cheatsheet

WordPress added support for shortcodes around 15 years ago. You can use shortcodes to easily add complicated functionality to your website which otherwise would have required you to write a lot of code yourself. Basically, shortcodes are short text snippets whose behavior depends on some more complicated code written in the back end. While WordPress… Continue reading WooCommerce Shortcodes Cheatsheet

Fixing Problems With Borders in Dark Mode (Email Design)

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Borders aren’t always treated the same as other elements when it comes to emails in Dark Mode. In this article I’ll take you through what is happening to your borders, as well as how fix any problems you’re having with them. Top Email Templates on Envato Elements… Continue reading Fixing Problems With Borders in Dark Mode (Email Design)

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

20 Best WooCommerce Product Add-Ons

Do you want to create an easy shopping experience on your WooCommerce products pages? Here are 20 of the best WooCommerce product add-ons to make it possible! They make your product pages more user-friendly and user-focused by adding intuitive functionalities like: adding easy navigation using filters  allowing customers to personalize their orders offering extra choices  and… Continue reading 20 Best WooCommerce Product Add-Ons

How to Customize an HTML Template

So you’ve just purchased an HTML template and now you have to customize it before it goes online. But you’re not experienced with code so you’re not sure how to go about it. Well, rest easy, because in this tutorial we’re going to step you through how to edit a HTML template. We’re going to… Continue reading How to Customize an HTML Template

SVG Viewport and viewBox (For Complete Beginners)

In this quick SVG viewport and viewBox tutorial, we’re going to break down exactly what viewport and viewBox are in SVG for the web. You’ll learn: The difference between the viewport and viewBox The aspects of your SVGs you can control with each How they are each applied Let’s begin! SVG Viewport  If you literally… Continue reading SVG Viewport and viewBox (For Complete Beginners)

How to Work With Regular Expressions in PHP

In this article, we’ll go through the PHP functions that allow you to use regular expressions to perform search and replace operations on strings. What Is a Regular Expression? Regular expressions—also called “regex”—are search patterns for text. These patterns can be processed by a regex engine to find substrings, validate that a string matches a… Continue reading How to Work With Regular Expressions in PHP

Android Essentials: Creating Simple User Forms

Android applications often rely upon data supplied by users. This tutorial walks you through the creation and use of a number of the most common controls used to collect data from the user. Getting Started For this tutorial, you will design and implement a membership registration form. Whether you’re in charge of recruiting members for… Continue reading Android Essentials: Creating Simple User Forms

PHP Superglobals Explained—With Cheatsheet

In this post, I’ll give you a cheatsheet quick reference to all the PHP superglobal variables available in PHP. What Is a Superglobal Variable? Let’s have a look at the definition of superglobal variables. Superglobals are built-in variables that are always available in all scopes. Whether you are a seasoned PHP developer or a novice… Continue reading PHP Superglobals Explained—With Cheatsheet

Form Input Validation Using Only HTML5 and Regex

Validation of form input is something that should be taken seriously. With luck, nothing worse than garbage data will be submitted to a site which uses data from forms without proper validation. However, there also a chance that hackers will be able to compromise the private data of users who trusted you with their information.… Continue reading Form Input Validation Using Only HTML5 and Regex

How to Work With Cookies in PHP

You might have heard about cookies, but what exactly are they and what can we actually do with them? In this tutorial, we will focus on the basics of cookies, and learn about their functionality in various web applications and site environments. We will also learn how to work with cookies in PHP. Cookies vs… Continue reading How to Work With Cookies in PHP

Top 9 Tips For Optimizing Images in 2021

The ‘need for speed’ is an essential item on every website’s bucket list these days. And why not? Enhanced speed is directly responsible for converting traffic into paying clients. Anyone in any industry wishes to boost their website’s loading speed, providing an improved user experience. Plus, don’t forget that escalated site speeds also escalates the… Continue reading Top 9 Tips For Optimizing Images in 2021

How to Create a Simple Web-Based Chat Application

In this tutorial we will be creating a simple web-based chat application with PHP and jQuery. This sort of utility would be perfect for a live support system for your website. Otherwise, learn how to build one yourself in this tutorial. This tutorial was updated recently to make improvements in the chat app.  Introduction The… Continue reading How to Create a Simple Web-Based Chat Application

How to Paginate Data With PHP

I can remember years ago, when I first began coding in PHP and MySQL, how excited I was the first time I got information from a database to show up in a web browser. For someone who had little database and programming knowledge, seeing those table rows show up onscreen based on the code I… Continue reading How to Paginate Data With PHP

Creating a Future-Proof Responsive Email Without Media Queries

What You’ll Be Creating Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the <head>, so that even in the worst case scenario of email rendering, your layout will remain intact. Is Developing HTML Email Still Hard? HTML email has… Continue reading Creating a Future-Proof Responsive Email Without Media Queries

How to Use ARIA Roles, Properties, and States in HTML

In this beginner’s accessibility tutorial we’re going to learn what ARIA is, why it is necessary to write our HTML with ARIA in mind, what ARIA roles, properties, and states are, and (very importantly) the 5 rules of ARIA use. What is ARIA? ARIA stands for Accessible Rich Internet Applications and it was created by the World… Continue reading How to Use ARIA Roles, Properties, and States in HTML

Understanding the Image Component in React Native

Images are an essential aspect of any mobile app. This tutorial will introduce you to the image component and show you how to use images in your React Native app. You will also learn how to create your own photo gallery! Prerequisites to Create a React Native App We will use the Expo CLI for… Continue reading Understanding the Image Component in React Native

Performance Tip: Use the Media Attribute for Faster Page Load Times

Sometimes web performance optimization takes a lot of work, and sometimes performance can be improved in just a moment. Adding the media attribute to conditional CSS files is an easy and quick way to speed up web page load times. TL;DR In short, if you add the media attribute to the <link> tag that calls… Continue reading Performance Tip: Use the Media Attribute for Faster Page Load Times

Axe-core 4.0 is Here!

Over the past few years, browsers like Firefox and Chrome have provided tools to better protect their users with advanced security features. The latest release of axe-core, axe-core 4.0 enables us to test accessibility even in the most security-aware environments. Improvements in axe-core 4.0 include support of Content Security Policy and has additional options for… Continue reading Axe-core 4.0 is Here!

6 Best Practices for Building Responsive Dropdown Menus

Creating a responsive dropdown menu is a tricky task. There are many decisions you have to make, in both the design and development phases. Recommended solutions usually depend on the characteristics of the website or application you’re building. However, there are also some general best practices that are recommended for all types of responsive dropdown… Continue reading 6 Best Practices for Building Responsive Dropdown Menus

A Guide to Accessible Interactive Components using React Libraries

May 29, 2020 Content Warning: This blog post contains gifs. I’ve wanted to write this blog post ever since I wrote a11y and JS – A Seemingly Unconventional Romance. I love JavaScript, and my job is to code in React. I often observe folks (rightly) critique that React Apps are inaccessible. According to the WebAIM… Continue reading A Guide to Accessible Interactive Components using React Libraries

How Accessibility Taught me to be Better at JavaScript – Part Two

January 14, 2020 Content Warning: There are gifs in this post. Hey friends! Today’s writing is going to be a follow up to How Accessibility Taught Me to be Better At JavaScript. If you have read my content, one of my favorite topics is about JavaScript and Accessibility. I speak about how JavaScript is actually… Continue reading How Accessibility Taught me to be Better at JavaScript – Part Two

How to Build an Animated Bootstrap Landing Page With Material Kit

In a previous tutorial, we discussed how to build a responsive landing page with Bootstrap 4. Today, we’ll learn how to create an animated landing page with Material Kit, a free Bootstrap 4 UI Kit based on Google’s Material Design.  To implement it, we’ll use a combination of Bootstrap 4’s helper classes, Material Kit’s additional… Continue reading How to Build an Animated Bootstrap Landing Page With Material Kit