Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

What Are Focus Indicators? Have you ever noticed the blue outlines that sometimes show up around buttons or form fields? What about when you click on a menu item? Have you ever tried to make those outlines disappear? Here’s a hint: by default, browsers use the :focus css pseudo class to give outlines to form… Continue reading Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

Key and Surface Tracking Comes to Chrome

[– For those that didn’t spot it: this post was an April Fools joke, no one can track you by the way you type! –] This week Google announced further details of its plan to remove cookies from ad tracking. The strategy, which the ad giant expects to be fully implemented by 2022, has come… Continue reading Key and Surface Tracking Comes to Chrome

6 Tools for Rapid Cross-Device Website Testing

When creating a website, it’s vital to remember that not only does it need to work and look great on the device you are creating it on, but on all the other devices, it might be used on too. Mobile and tablet optimization is important not only for the user journey but from an SEO… Continue reading 6 Tools for Rapid Cross-Device Website Testing

Exciting New Tools for Designers, November 2020

In the spirit of fall feasts, this month’s collection of tools and resources is a smorgasbord of sorts. You’ll find everything from web tools to icon libraries to animation tools to great free fonts. Let’s dig in. Here’s what new for designers this month. The Good Line-Height The Good Line-Height is the tool you won’t… Continue reading Exciting New Tools for Designers, November 2020

“Roxxe” Shopify Theme Review: Multipurpose, Easy to Set up

In this theme review we’ll take a look through a multipurpose Shopify theme called Roxxe. Shopify allows you to quickly create your own online store, and when armed with the right theme you can be up and running in no time. So let’s have a look at Roxxe, talk about its pros and cons, and… Continue reading “Roxxe” Shopify Theme Review: Multipurpose, Easy to Set up

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!

Exciting New Tools for Designers, June 2020

The best new tools for designers are ones that make your life easier and your workflows faster. You’ll find some of those in this list this month for sure. From tools to help you capture and manage color palettes to AI-powered design analytics to simple animations, there’s something for almost every designer or developer. Here’s… Continue reading Exciting New Tools for Designers, June 2020

Comparium: Automated Website Testing Tool

Are you running a business online? And worried about creating the best website for attracting a large number of people? Are you a website developer and need help in designing an error-free website? So you are on the right track as we provide you the complete knowledge of the best tool to test your website… Continue reading Comparium: Automated Website Testing Tool

Creating an Accessible Range Slider with CSS

April 29, 2020 I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills. Today we are going to talk about input[type=”range”]. These inputs where you select a value from a slider that has a thumb on it. You… Continue reading Creating an Accessible Range Slider with CSS

Build a Chrome Extension to Streamline Your Workflow — SitePoint

When I began as a JavaScript editor at SitePoint, our submission process was something of a mess — articles coming from every direction in a variety of formats. So we decided to standardize things and settled on submission via GitHub in Markdown. This was a step forward, but we still needed to convert the Markdown… Continue reading Build a Chrome Extension to Streamline Your Workflow — SitePoint

CSS Tips for Better Color and Contrast Accessibility

Color accessibility is an important part of visual accessibility. People with various types of visual impairments, such as color blindness and low vision, perceive colors in different ways. As a result, the meaning of colors becomes less significant or is completely lost for users with visual disabilities. Although most articles on color accessibility give design tips… Continue reading CSS Tips for Better Color and Contrast Accessibility

What’s New for Designers, July 2019

It’s hard to stay focused this time of year. With vacations coming up (or having recently passed) it’s easy to get distracted from work-related tasks. For that reason, this month’s roundup is full of design tools plus a few design diversions that you can have fun with. 404 Illustrations Have you ever wanted to create… Continue reading What’s New for Designers, July 2019

How To Fix ‘Failed To Load Resource’ Error In WordPress

The “Failed To Load Resource” error is one of the most frustrating issues many WordPress users have been encountering lately. This error is quite hard to fix since it can be caused by several different issues like plugin compatibility issues and HTTPS URL issues and more. In this post, we take a look at some… Continue reading How To Fix ‘Failed To Load Resource’ Error In WordPress

How to Make a Beating Heart Animation for St. Valentine’s Day With SVG

* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;} Let’s get into the spirit of St. Valentine’s day, getting all pink and smooshy in the process, and code ourselves a simple beating heart animation with SVG. Here’s what we’re going to create: This is a great exercise for familiarizing yourself with SVG syntax and authentic animation.… Continue reading How to Make a Beating Heart Animation for St. Valentine’s Day With SVG

How VeePN Makes the Internet Safer to Use

With everything going digital it is becoming increasingly important for us to protect ourselves. You become vulnerable to cyber attacks once you go online, hence some sort of protection is required in order to stay safe. That is what a VPN or Virtual Private Network is for. It creates a secure connection between your device… Continue reading How VeePN Makes the Internet Safer to Use

Keyboard Accessibility Tips Using HTML and CSS

Making your website accessible for keyboard-only users is an important part of the bigger accessibility picture. Here are some keyboard accessibility tips you can quickly implement using basic HTML and CSS. A11y From the Beginning These tips are part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and… Continue reading Keyboard Accessibility Tips Using HTML and CSS

Hands-on With ARIA: Accessibility for eCommerce

Looking to make your site more accessible? Or maybe you want to make it easier to traverse your site overall using browsers and other interfaces? Using ARIA, you can do both. Let’s take a look at what ARIA is and how it can benefit an eCommerce site. We’ll also go through some examples step by… Continue reading Hands-on With ARIA: Accessibility for eCommerce

Debugging Angular CLI Applications in Visual Studio Code ― Scotch

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code. Watch on YouTube Learn VS Code If you’re interested in learning more about VS Code, you definitely want to check out the upcoming Learn VS Code course. To be able to test an… Continue reading Debugging Angular CLI Applications in Visual Studio Code ― Scotch

Debugging Node Code in VS Code ― Scotch

Visual Studio Code has an amazing amount of functionality built in, including support for debugging applications. Although the functionality is there, it took me several tries to figure out how to get things configured to debug Node applications. It became even more tricky when using Nodemon, so I figured it was worth it to share… Continue reading Debugging Node Code in VS Code ― Scotch

Let’s Make Your Life Simpler Than Ever With These 6 Web Apps

There are many apps out there, but getting by free and good ones is not that easy. That is why we are sharing 6 simpler than ever web applications for our visitors. So, without any further ado let’s take a look at these and feel free to share this post with others. Read each entry… Continue reading Let’s Make Your Life Simpler Than Ever With These 6 Web Apps

Webster – Responsive Multi-Purpose HTML5 Template

Why settle on one theme and one layout when you can have over 220 HTML5 pages and more than 29 home pages? Yes, Webster is 100% responsive and comprehensive template with cool features like- parallax, smooth scrolling, retina-ready, responsive mega drop-down menu, MailChimp, Recaptcha, PHP contact form, and a bunch of free plugins (Revolutions slider,… Continue reading Webster – Responsive Multi-Purpose HTML5 Template

Sticky Sidebar – A Pure JavaScript Plugin For Smart Sticky Sidebars

Sticky Sidebar is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+.… Continue reading Sticky Sidebar – A Pure JavaScript Plugin For Smart Sticky Sidebars

Collection of Unique Placeholder Form Animations

This is a collection of placeholder form animations for your website. Placeholder text is descriptive text displayed inside an input field until the field is filled. It disappears when you start typing in the field. Placeholder text is commonly used in current user interfaces so you have probably seen it before. So if you want… Continue reading Collection of Unique Placeholder Form Animations