HTML – Add a UTM Query String to a Link
UTM parameters are a set of tags added to the end of off-site, incoming URLs to see where the visitor came from when arriving at your site.
HTML – Add nofollow to a Link
The HTML nofollow attribute tells search engines to ignore the link, and not follow it or pass PageRank to the target site or page.
HTML – Create a Phone Number Link
A phone number listed on the page can be turned into a clickable link using the HTML a tag.
CSS – Create a Fixed Icon Bar
Some sites have a fixed icon bar sitting off to the side of the screen with their social channels always being displayed. This is how to create one.
CSS – Create a Loading Spinner
Using pure CSS animation you can create a loading spinner for your site.
CSS – Create a Polaroid-Type Image
Before we all had cameras in our phones, people could take a Polaroid photo which would print directly from the camera, and had a unique, framed look.
CSS – Create a Team Member Image Rollover
If your site has a team member page with images, names, phone, email, etc., you can create rollovers to show all the pertinent info for each team member.
CSS – Disable a Form Input
You may have a form field that auto populates information via JavaScript so you need to disable the input so that the user cannot change the value.
CSS – Disable a Text Link
There may come a time when you have an HTML text link that needs to be temporarily disable for some reason (perhaps it’s auto-created by a CMS, but the page is not yet finished).
CSS – Expand a Search Field When in Use
To give a site an interesting and modern feel, the transition property can be used to expand the length of the search field when the user clicks into it.
CSS – Fading in a Page or Element on Load
Fading in a page on load can give site items like a sidebar or icon boxes that load slowly the time to finalize their size/color without the user noticing.
CSS – Getting a Pre Tag to Wrap Long Lines
HTML pre tags are used to format text just as it is written, whitespace and all. However, you may want to allow long lines of text/code to wrap.
CSS – Hide Placeholders when the Field has Focus
Placeholders are text shown inside a form field that suggests to the user the type of input requested. They can be hidden with CSS when the field has focus.
CSS – Replace Text Using Position and Visibility
Replacing text is usually done on the server side or with JavaScript, but there may be times when replacing text using CSS is the only viable solution.
CSS – Transition the Fill Color for an SVG
When you have an SVG on your site and need to transition the fill color on hover, for instance, you need to set the fill in CSS as well as the SVG itself.
JavaScript – Count Down to a Specified Daily Time
The JavaScript Date object can be used to count down to a specified daily time. For instance, this can be used for a “daily deals” timer.
JavaScript – Count Down to a Specified Date and Time
The JavaScript Date object can be used to count down to a specified date and time. For instance, this can be used as a prompt for the user to take action.
JavaScript – Get the Current Screen Size of a Page
The window.innerWidth and window.innerHeight properties can be used to get the current screen size of a page, NOT including its toolbars and scrollbars.
JavaScript – Write the Current URL to the Page
JavaScript can be used to return the current page URL to write to the page.
JavaScript – Write Today’s Date to the Page
JavaScript can be used to write the current date to a page, or to write the year to the page, for instance, in the copyright section of your site.