Margin Offset for Anchor Targets with CSS or JavaScript
For sites using a fixed-position “sticky” header or similar, it’s necessary to add an offset margin to any on-page anchor targets. For example this recent article provides a Table of Contents menu with links to each section on the page. Click a link and the page scrolls down to the target element, which is an <h2></h2> heading tag. Thanks to one of the CSS solutions provided in this tutorial, the scrolling takes into account the page’s 50-pixel sticky header, so […] Continue reading »
How to Fix _blank Target Vulnerability
In this article, I am reposting part of my recent tutorial, WordPress and the Blank Target Vulnerability. That post is aimed at WordPress specifically, however most of the article applies to HTML in general. So the tutorial below explains how to fix all “blank target” links, regardless of whether or not WordPress is involved. Continue reading »
CSS Background Hover Slide Effect
While working on the site’s 24th redesign, I played around with a number of styles to customize the appearance of links. As you can see by hovering over any link, I decided to keep the styles as minimal as possible while still letting the user know that, “hey, this is a link”. This quick post shares one of the link styles I was considering, it’s sort of a “slide-up” background-color effect that happens when the user hovers over the hyperlink. Continue reading »
WordPress and the Blank Target Vulnerability
For those who haven’t yet noticed, WordPress now adds rel="noopener" attributes for any external links added via the link Quicktag in the Visual/RTE. So if you enable the option, “Open link in a new tab”, WordPress automatically will add the rel noopener attribute to the link. This is to protect against CORS and other exploits that take advantage of blank-target links. It’s a smart move that may escape many in the WordPress community. So in an effort to help foster […] Continue reading »
Dynamic Link Insertion via Unobtrusive External JavaScript
In my recent guest post at The Nexus, I discuss Google’s new nofollow policy and suggest several ways to deal with it. In that article, I explain how Google allegedly has changed the way it deals with nofollow links. Instead of transferring leftover nofollow juice to remaining dofollow links as they always have, Google now pours all that wonderful nofollow juice right down the drain. This shift in policy comes as a terrible surprise to many webmasters and SEO gurus, […] Continue reading »
WordPress Tip: Valid, SEO-Friendly Email Permalink Buttons
In addition to your choice collection of “Share This” links, you may also want to provide visitors with a link that enables them to quickly and easily send the URL permalink of any post to their friends via email. This is a great way to increase your readership and further your influence. Just copy & paste the following code into the desired location in your page template: <a href="mailto:?subject=Fresh%20Linkage%20@%20Perishable%20Press&body=Check%20out%20<?php the_permalink(); ?>%20from%20Perishable%20Press" title="Send a link to this post via email" rel="nofollow">Share […] Continue reading »
Remove the WWW Prefix for all URLs via PHP
Canonical URLs are important for maintaining consistent linkage, reducing duplicate content issues, and increasing the overall integrity of your site. In addition to cleaning up trailing slashes and removing extraneous index.php and index.html strings, removing the www subdirectory prefix is an excellent way to shorten links and deliver consistent, canonical URLs. Of course, an optimal way of removing (or adding) the www prefix is accomplished via HTAccess canonicalization: Continue reading »
Unobtrusive JavaScript for ‘Print-This’ Links
One of the oldest JavaScript tricks in the book involves providing a “print this!” link for visitors that enables them to summon their operating system’s default print dialogue box to facilitate quick and easy printing of whatever page they happen to be viewing. With the old way of pulling this little stunt, we write this in the markup comprising the target “print this!” link in question: Continue reading »
Targeting External Links Intelligently
In the beginning… In the time of the dinosaurs, HTML authors controlled the way anchors opened by adding target="_blank" as an attribute on an anchor tag. Then the molten mass of Internet began to cool into the thin crust of Web 2.0, the continents began to separate and there came a great migration of pages from HTML to the shinier, new XHTML. Most authors didn’t know what that meant, but it had an “X” in it, so it must be […] Continue reading »
Redirect All (Broken) Links from any Domain via HTAccess
Here’s the scene: you have been noticing a large number of 404 requests coming from a particular domain. You check it out and realize that the domain in question has a number of misdirected links to your site. The links may resemble legitimate URLs, but because of typographical errors, markup errors, or outdated references, they are broken, leading to nowhere on your site and producing a nice 404 error for every request. Ugh. Or, another painful scenario would be a […] Continue reading »
Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines
I recently wrote about how to remove unwanted link outlines using a pure-CSS method that works on every modern browser except (wait for it) ..Internet Explorer 6! Yes, that’s right, another reason why (almost) everyone is pushing hard to eliminate Internet Explorer from existence. Nonetheless, removing those pesky unwanted link outlines in IE6 is not possible with CSS, but it’s a snap with a little JavaScript. Here are four unobtrusive JavaScript techniques (plus one CSS-only method thrown in for good […] Continue reading »
Speed Linkin’ :: December 2008
Kicking things off for this month’s official Speed Linkin’ post is a site designed to help with all of your graphical background needs. Then, we move on to a lightweight forum plugin for WordPress. Ever feel lost when it comes to choosing the best lightbox script? Well it’s Ozh to the rescue with the excellent Lightbox Clones Matrix. Also handy is this incredible list of social media sites. As a big fan of ASCII art, I can spend hours playing […] Continue reading »
Backwards-Compatible Spam and Delete Buttons for WordPress
Recently, Joost de Valk shared an excellent technique for adding spam and delete buttons to comments on your WordPress-powered blog. The idea is to save administration time by providing links to either “spam” or “delete” individual comments without having to navigate through the WordPress Admin Area. Joost provides the following plug-n-play solution: Continue reading »
How to Write Valid URL Query String Parameters
When building web pages, it is often necessary to add links that require parameterized query strings. For example, when adding links to the various validation services, you may find yourself linking to an accessibility checker, such as the freely available Cynthia service: Continue reading »
Fully Valid, SEO-Friendly Social Media Links for WordPress
With the explosion of social media, networking, and bookmarking services, there are a zillion ways to add “Share This Post” functionality to your WordPress-powered sites. In addition to the myriad services and plugins, we can also add these links directly, using nothing more than a little markup and a few choice PHP snippets. Such individual links provide full control over the selection, layout, and styling of each link without requiring the installation of yet another WordPress plugin. This article shares […] Continue reading »
Pure CSS: Remove Link Properties for Linked Images with Borders
CSS is very powerful. In this tutorial, we look at how to clean up styles on hyperlinks containing images (e.g., JPG, PNG, GIF) using pure CSS techniques. As well as some related tips and tricks to help you get linked images displaying exactly as intended. Continue reading »
