jQuery Russia 2013

Last week I attended jQuery Russia 2013 which was held at Digital October (my favorite venue) in Moscow. The conference was organized by a local HR company called ITmozg and they’ve done a fairly good job.

jQuery Russia 2013

Dave Methvin, President of the jQuery Foundation, gave the opening keynote and a session on javascript and jQuery performance, which was really good. He called out Facebook for a pretty bad infinite scroll pattern, one that causes a forced layout on every scroll event.

He also mentioned that people often refer to jQuery being slow, and most of the time it’s not even jQuery’s fault:

This is not jQuery being slow, it’s that bad jQuery plugin.

Which sounds very familiar in the world of WordPress, themes and plugins. Dave also did a quick javascript profiling 101 using IE11 (which looks pretty amazing) and Chrome’s developer tools.

The other noteworthy session was Eric Mann’s about web sockets, and a pretty interesting Menehune library for jQuery.

Overall, the event was okay. Not great! But okay. I guess I was expecting more out of a $400 conference, stuffed with sponsors (including the stage), or maybe I’m just used to WordCamps :) Anyway, I met a bunch of folks, a few old friends. I didn’t stay for the after-party, but I’m pretty sure it was good.

Will I attend next year? Probably not.

External Links with CSS3 or jQuery

Here’s how I marked external links using CSS throughout my blog with a few simple selectors one of which is a level 3 meaning this solution will probably fail in some version of IE and other browsers with limited CSS3 support.

a {
    background: url('http://kovshenin.com/core/wp-content/themes/publish/images/external-link.png') right center no-repeat;
    padding-right: 14px;
}

a[href^="http://kovshenin.com"], a[href^="/"], a[href^="#"] {
    background: none;
    padding-right: inherit;
}

The first one selects all the links on the page, gives them the external link icon and a padding on the right. The second selector fetches all links that begin with my domain name, relative links and empty links and then removes the background and padding set by the first selector.

This solution might need a few tweaks depending on your linking structure and perhaps a fallback stylesheet for browsers with no CSS3 support. Another option can be jQuery, somewhere in your head section after jQuery has been loaded:

jQuery(document).ready(function($) {
    $.expr[':'].external = function(obj) {
        return !obj.href.match(/^mailto:/) && (obj.hostname != location.hostname);
    };
    $('a:external').addClass('external');
});

Which would add an external class name to all links where hosts don’t match the current host, and then use the a.external selector to style your external links as shown in the example earlier. This solution will “blink” though because jQuery has to first load and initialize before it can read all the contents of your page. It’s a matter of milliseconds so most people won’t mind. Enjoy!

WordPress Experiments: Visual Styles Editor

In a previous blog post I demonstrated a video of the color wheel concept. Today I’d like to show you another WordPress themes experiment — visual styles editor.

As shown in the video, the styles editor pops out as a dialog box which you can move around the page. The dialog itself contains a select box where you get to pick a certain style (like headings, menu anchors, etc) and the actual properties below. An “element picker” might also be introduced, but has to be very well implemented in order to work.

So yeh, editing WordPress themes on the fly is possible, the parameters are saved when the save button is clicked via a short AJAX call and the next page will contain the modified CSS. Next up is column widths, probably the most dangerous thing to mess around with ;)

WordPress Experiments: Colors & The Color Wheel

I’ve been working on a free theme called Minimal Georgia lately and based on it, I’m now running a few experiments for theme customization, of course inspired by Squarespace.

One of my first experiments is the color wheel and there are plenty of jQuery plugins and code snippets that could do that. With a few more research about colors and their hex codes, I found a way to determine a color darker or lighter than the chosen once, enabling me to do the gradient fill, drop-down menu colors. The HSL values returned by the color wheel let me switch the font color, so that the text appears white on a dark background and black on a light one.

As you can see the color wheel not only affects the website header, but also the links on the page, giving them a darker color than the one chosen, giving a better contrast. Of course it is not perfect, but I’ll get there eventually ;)

Snippet: Using jQuery 1.5 in WordPress

Yes! jQuery 1.5 was released and I’m sure some of you can’t wait to start using it in their WordPress themes and plugins. So, with a few filters magic, we can get jQuery 1.5 up and running. Add the following code to your theme’s function.php file:

add_filter( 'script_loader_src', 'my_script_loader_src', 10, 2 );
function my_script_loader_src( $src, $handle ) {
    if ( $handle == "jquery" )
        return "http://code.jquery.com/jquery-1.5.min.js";
    return $src;
}

And that’s it! Now every call to wp_enqueue_script jquery will pass through this filter and load up 1.5 instead of the one shipped with your WordPress bundle. Feel free to change the URL of the jQuery script to different CDNs including Microsoft’s and Google’s.

I guess this post will be outdated upon the next WordPress release, but it still may be valuable, since the same trick is used to run jQuery and other libraries shipped with WordPress from different sources like Google or Amazon CloudFront.

qrTip: A jQuery Plugin to Display QR Codes for Links

Hey. I was doing some experimenting earlier this week with the new Google URL Shortener API and then found out that they can display QR codes for their shortened links using Google’s Chart API which is awesome. So today, I present to you qrTip — a jQuery plugin that can display QR tooltips for links on your page:

qrTip jQuery Plugin

Check out the qrTip Demo and hover over the links to feel the taste of what it’s like.

Why would you ever need this? Well mainly be cause it’s cool, and with this plugin you can provide a link to a mobile version of your website, so that people could hover, scan the QR code using their mobile and fire up the link on their device! Yeah, a little bit inspired by the Chrome to Phone extension which is quite awesome but not yet compatible with all browsers and devices out there.

Here’s a quote from the behind the scenes of this plugin section if you’re into development:

Well, I basically took the ColorTip jQuery plugin and wrote a little bit of extra code inside that injects images inside the tooltips. The actual images are coming from the Google Charts API! I also use the js-uri to get the relative links right.

You can download the sources in an archive or use git to grab it directly from my github account:

$ git clone http://github.com/kovshenin/qrtip.git

That’s all there is to it! Hope you like the plugin and find it useful in some way. You might want to tweet it too! I would also appreciate if you commented on bugs under Windows and Mac browsers. I didn’t test it on anything but Chromium on Ubuntu ;) Cheers!

Facebook-style Lightbox with jQuery and Facebox

I recently came across an awesome plugin for jQuery which is called Facebox. Facebox produces a clean lightbox that can be a container for popup images, text and basically any HTML layout as well as AJAX powered content.

The problem with Facebox is the lightbox placement. The dialog itself is placed in the center of the page horizontally with a preset margin from the top, which looks good, but what I did notice is that the box containing the loading icon is being placed somewhere to the left part of the page. Well at least on Firefox 3.5.7.

I couldn’t help but noticing that FamSpam and StaffTool are using a different set of functions and styles for the lightbox placement and copying them into my code solved the issue.

The two functions are called getPageScroll() and getPageHeight() and are marked as quirksmode.com inside the code. The #facebox style in the CSS lacked a width: 100% which seems to have solved the issue for now. There’s also a certain overlay in the original version which includes an interesting IE6 hack:

height: expression(document.body.scrollHeight > document.body.offsetHeight ?
	document.body.scrollHeight : document.body.offsetHeight + 'px');

The versions at Stafftool and FamSpam however don’t mention any overlays in there code. Pretty messy, huh? Well, other than that, the plugin is very lightweight and cross-browser, works well in IE and closes the popup when pressing Esc, which unfortunately has to be hand-coded in other versions of the Facebook-style dialog boxes.

Grab the code at GitHub and enjoy: Facebox for jQuery.