Skeleton, a bare bones WordPress theme
Several months back I wrote a custom bare bones theme. I had tried a few starter themes in the past, but none of them really pleased me. I wanted something as bare bones as possible, so I decided to create my own. It’s worked out well for me and now it’s time to share it. There is nothing but the basics here, this is intended for theme developers who want to bypass the boring part of setting up a starter them.
Open external links in a new window in one line of jQuery
I have been against opening new browser windows because a user can choose to do this on their own. There are several ways they can do this like middle middle clicking or right clicking for a contextual menu. I also wrote about it a few years ago as part of my 12 bad website practices. I’m a little more open to this practice now; I believe the choice to open external links in a new window also depends on your website and your taget audience. I constantly middle click myself, because often when you visit a link embedded in article you fully intend on coming back to the source article after taking a peek. Regardless of whether it’s right or wrong, here is a super easy way to make all external links open in a new window using jQuery.
Keep Reading
jQuery: How to get links to work in toggled or dynamic content
jQuery still never ceases to amaze me. The developers of this fantastic library seem to have thought of everything, and the only real challenge for us end users is hunting through the API. Recently I was tasked with creating slide out toggle boxes that had links embedded within them. The problem was that the animation would be triggered before the links, thus rending them useless. Luckily like many things with jQuery the fix is simple and I will demonstrate with two examples.
jQuery and Fancybox: How to automatically set the height of an iframe lightbox
Fancybox is a pretty cool lightbox plugin for jQuery that I have been using for awhile now. It’s got a great feature set, looks good, and for the most part it just works out of the box. There is however one thing that was mind numbingly hard to figure out, and that was how to automatically set the height of an iframe lightbox. Fancybox has this functionality built in for inline content via the autoDimensions key, which is set to true by default. Unfortunately this is not the case for iframes. After some hair pulling I managed to piece together an auto height solution for Fancybox iframes, but this technique could also be used without Fancybox to find the height of any iframe.
Clearing the jQuery animation queue
Ever see sites where a jQuery animation happens over and over when you rollover or click it multiple times. It’s almost as if the animations are stacking on top of one another in a queue and executing one by one, and guess what? That’s exactly what’s happening. Not to worry though, there is a simple and easy way to fix this.
Using custom CSS and Javascript in WordPress posts
Today while writing The secrets to using custom web fonts I ran into a bit of a snag. I wanted to show several CSS driven examples within the post, but the WordPress editor would remove anything I added. I have dealt with this issue in the past, usually in a clunky manner or even hosted separate example pages. This time though I really wanted the font examples to show up within the actual page content and I didn’t want to add more styles to my WordPress theme. The method I used is remarkably easy and can be implemented in about two or three minutes.
Doing JavaScript pop-up windows the right way
Some would argue there is no right way to do a JavaScript pop-up since it disrupts the natural flow and usability of the web. I would tend to agree, but like all things web, there are exceptions to this rule and it may not be your choice anyway. That said there definitely is a very wrong way to do a JavaScript pop-up, and unfortunately there are literally hundreds of tutorials showing you how to do it the wrong way and even more websites implementing it wrong.
How to write super clean CSS
Everyone who works with (X)HTML probably knows how to use CSS to some degree, but not as many know how to write clean CSS. Cascading Style Sheets are probably one of the most powerful tools a web designer/developer can master. It’s hard to find a site today that doesn’t benefit from the capabilities of CSS, and with the slow arrival of CSS3 that is unlikely to change. That said I still constantly come across style sheets that could be cleaner, more optimized, and more elegant.
Zen Coding – a new way to write HTML lightning fast
The other day I purchased a new editor called Coda. I might review this fantastic little piece of software at a later date, but one of the reasons I purchased it was to use some of the many plugins the community has created for it. One of these plugins has been produced for several editors and could change how you code. It’s called Zen Coding, and it will make you write large chunks of HTML a lighting speeds.
What is Zen Coding?
Zen Coding is hard to explain, but if you have been working with HTML and CSS for awhile now you should be able to pick it up very quickly. It’s easy to learn and best shown by example, so lets start with an example.
Outlook 2007 losing font-family declaration
Email clients are one of the pinnacle frustrations for web designers. The limitations are far greater than those of web browsers and you can always count on Microsoft’s Outlook 2007 being at the forefront of compatibility problems and bug issues. If you create emails that have to support Outlook 2007’s wonky Word rendering you may have noticed on occasion that your specified font-family disappears. There’s a few ways to fix this, but some are better than others.
