Web Accessibility Evaluation Tool Code Snippets

Below are some code snippets to help resolve accessibility errors found using the WAVE accessibility evaluation tool. Remove redundant title text

Empty links used for javascript behavior like dropdown menus

.sr-only CSS class to help bring meaning to visual elements like icons

 

Continue Reading

Category: Code Snippets

How to Change Favicon with JavaScript

This code comes in handy when you don’t have access to the head of the page and need to change the favicon.

 

Continue Reading

Category: Code Snippets

How to Add Retina Images to HubSpot Email and Page Templates

HubSpot CMS handles responsive images by default by creating different image sizes for different screen widths (using srcset). But with retina display images, you want to load higher resolution images and scale them down to 100%. Thankfully you can add ?noresize to the end of your image source to disable this dynamic resizing. In the… Read more »

Continue Reading

Category: Code Snippets

How to Fire a jQuery Function When the Page is Loaded and Resized

When building responsive websites you often want to run a script when the page loads. But when you resize the window the layout breaks. You can use the on method to run your code if the page loads or has been resized.

Source

Continue Reading

Category: Code Snippets

Web Font Weight and Style Mixin [Code Snippet]

If you are using Google Fonts or a custom web font, you probably are writing different font weights and styles. These mixins combine the two to make it really easy to update a global font style in your stylesheet.

 

Continue Reading

Category: Code Snippets

How to Visually See What Your jQuery Selection is Selecting

I was recently working on form validation and wanted to mark a.form-group as successful if it contained a particular icon inside the label. The icon was set using PHP depending if the data existed in the database. I was writing .prev() and .parent() to try and select the wrapping .form-group but it wasn’t working and… Read more »

Continue Reading

Category: Code Snippets / Tutorials

How to Get a List of WordPress PDF, Image, Post, or Page URLS

Below are two PHP scripts you can use to help get a list of URLs of content in your WordPress site. I use these when I am migrating posts or media library files to another sites without using a plugin. Follow the steps below to use these scripts Open a text editor and copy and… Read more »

Continue Reading

Category: Code Snippets

How to Prevent One Word Lines (widow orphan) In Website Paragraphs

I am often adding padding to the left and right of paragraphs to force copy down to prevent one word on a line. Or even worse, I add <br> to a word on the line above to prevent the word by itself. But this causes issues with responsive design because the <br> changes position breaking… Read more »

Continue Reading

Category: Code Snippets

Trigger HubSpot Popup Form on Page Load or CTA Click

HubSpot provides the ability to display a pop up form with various triggers (exit intent, after 7 seconds, etc.) But what if you want to show it immediately or when a button is clicked? Below is some javascript to help achieve this functionality.

 

Continue Reading

Category: Code Snippets

How to Redirect Known Pages and Wildcard for Everything Else with htaccess

I recently worked on a project which needed me to shut down a WordPress blog and migrate it’s content. I had about 20 posts and pages that were going to migrate but everything else was going to be deleted. Since htaccess runs their commands from the top to the bottom, place your known redirects above… Read more »

Continue Reading

Category: Code Snippets