Tag Archives: javascript

HTML5 Data Attributes

Nov 21, 2011 by Matt | Posted in Coding No Comments

Have you ever looked at the HTML snippet for Twitter’s Tweet button and wondered what those data-something="loremipsum" attributes were?

<a href="https://twitter.com/share" data-count="vertical" data-via="redwall_hp">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

I did too, and after a bit of Google searching, I found a post by John Resig (the creator of jQuery) that explains that they’re something called data attributes.

A new feature in HTML5, they provide a way to embed data in an element and access it from a script. (An accompanying JavaScript API makes it very easy to retrieve the data.)

HTML 5 data- Attributes [John Resig]

WordPress Admins Can Post JavaScript in Post Comments

Aug 31, 2011 by Matt | Posted in WordPress No Comments

Here’s an interesting fact about WordPress: users with Administrator or Editor privileges are allowed to post unsanitized JavaScript or markup in Post comments.

I discovered this by accident when I was leaving a Facebook API example for a commentator, and posted a code snippet that included the <script> tag referencing http://connect.facebook.net/en_US/all.js#xfbml=1. To my surprise, a Facebook Comments widget appeared within my comment!

I did some testing with a fresh WordPress installation and ensured that it wasn’t related to any of my own customizations or installed plugins, and that only high-ranking user accounts could do it.

This could potentially be a Cross-Site Scripting (XSS) vulnerability, as a user with Editor privileges could conceivably “go rogue” and post malicious JavaScript in comment threads. This could be used for any number of nefarious things, such as injecting a malware loader into the page or inserting spam links.

So I did some digging, wondering whether I should report the issue to the core developers, and found this:

Users with Administrator or Editor privileges are allowed to publish unfiltered HTML in post titles, post content, and comments. WordPress is, after all, a publishing tool, and people need to be able to include whatever markup they need to communicate. Users with lesser privileges are not allowed to post unfiltered content.

[…] Regardless, an Administrator has wide-ranging super powers among which unfiltered HTML is a lesser one.

In WordPress multisite, only super administrators can publish unfiltered HTML, as all other users are considered untrusted.

It makes sense that Administrators be able to do that, as they have unfettered control over everything else. (And there are probably some cool things you could do by inserting JavaScript into your comments, like placing polls without having to use a plugin.)

So, the lesson here is to be cautious with who you assign Editor privileges to. If you don’t trust them, don’t give them an Editor account. Besides, a rogue Editor could play havoc on posts and comments even without being able to paste-in malicious code. ;)

Microjs: Micro-Frameworks and Micro-Libraries

Aug 1, 2011 by Matt | Posted in Coding No Comments

Sometimes you don’t need a huge JavaScript library like jQuery or Prototype. Sometimes all you need is a small subset, like AJAX functions and templating. If a project doesn’t need all 31kb worth of jQuery, why don’t you try something a bit lighter?

Microjs.com is a directory of “micro-libraries,” single-purpose JavaScript libraries with a small footprint. You can load up one or two for only a fraction of the file size of a larger framework. Need to make AJAX requests? Try microajax. Templating? Use Tempo.

Sure, we all love our favorite monolithic frameworks, and sometimes we even use them fully. But how often do we reach for the ride-on John Deere tractor with air conditioning and six-speaker sound system, when a judiciously applied pocketknife would do the trick better, faster, slicker?

Minimus: The OS X JavaScript and CSS Minifier

Jul 18, 2011 by Matt | Posted in Featured, Software & Scripts 19 Comments

Users like fast websites. That’s one of the universal rules of web development. To attain faster speeds, it’s common to use a process known as “minification” to compress the file size of JavaScript and CSS. Yahoo developed one of the most commonly-used tools for this, a command line program called the YUI Compressor. This open source project has become integrated into many other tools, including numerous websites that will minify any JavaScript or CSS you paste into a form field.

That’s rather inconvenient, though. Wouldn’t it be easier if you had a nice OS X application that would let you minify your code right from your Mac? Enter Minimus, the app I just finished.

Minimus is a handy GUI frontend for the YUI Compressor. All you have to do is drag one or more files onto the dock icon, hit a button, and in seconds you will have minified copies.

It’s a free download, but if you like it, feel free to send me $5 or so with the in-app PayPal form. ;)

Adding and Tracking Social Buttons

Jul 15, 2011 by Matt | Posted in Social Media No Comments

It seems like every website has social media buttons on them now. The ones leading the pack of late seem to be Twitter, Google +1 and the Facebook Like widget. This introduces one problem: loading times. Your pages are calling JavaScript files hosted on remote servers, bogging them down a bit.

Joost de Valk has put together a good tutorial on how to fix that issue. It features code snippets that will load the widget JavaScript asynchronously, keeping the buttons from holding up the page loading. Also, it even adds Google Analytics and Clicky tracking so you can tell if people are actually using your buttons.

When Google released +1, I quickly identified how to track interaction with that button. The obvious “follow up” was questions from people on how to track interaction with other buttons. Not for each of these social buttons tracking of interaction is actually possible. It depends on how the button was designed whether this will work or not. I got it working for Twitter and Facebook, so I’ll share the code for tracking interaction with their respective social buttons below.

Social Buttons: Adding them to your site & Tracking them [Yoast]

MacRabbit isn’t Dead!

Jul 1, 2011 by Matt | Posted in Software & Scripts One Comment

Users of Espresso and CSSEdit have been complaining for some time about the lack of updates to the software. In a surprise announcement, MacRabbit (the developer) announced that Espresso 2 is on the way and that CSSEdit’s functionality is being rolled into it.

The long wait has grated both on our own nerves and those of our awesome users. But while we have kept quiet publicly about what we are working on, it is because privately we have been striving to transform our products into something new and even more awesome: Espresso 2. We are extremely excited to finally be able to show you what we have been working on, as this release will be of interest to both CSSEdit and Espresso users.

An early preview, the “kaboom” release, is already available for testing and upgrade path information has been posted.

Get Twitter and Facebook Link Statistics with JSON and jQuery

Jun 24, 2011 by Matt | Posted in Coding, Featured 26 Comments

Both Twitter and Facebook have little JavaScript widgets that allow you to share a page using the respective service, displaying a running total of users who have done so. While that’s fine for most purposes, what if you just need the count, for some atypical application?

It’s not well-documented, but the two social media sites have JSON APIs for that purpose.

With a little bit of jQuery magic, you can collect the values on page load and update the DOM with the number. Here’s something I threw together for a project I was working on:

(function() {

var url = 'http://xkcd.com/792/';

jQuery.getJSON("http://urls.api.twitter.com/1/urls/count.json?url="+url+"&callback=?", function(data) {
jQuery('#socialstuff span.twcount').html(data.count);
});

jQuery.getJSON("https://graph.facebook.com/"+url+"&callback=?", function(data) {
jQuery('#socialstuff span.fbcount').html(data.shares);
});

}());

As long as you remember to include jQuery, and have the right HTML elements for the JavaScript to populate, it’s pretty much plug-and-play.

You can see it in action here.

Pure JavaScript QR Code Generator with jQuery

Jun 20, 2011 by Matt | Posted in Software & Scripts One Comment

Need a fast and lightweight way to generate QR codes in-browser, without relying on a third-party service? There’s a new jQuery plugin that’s exactly what you’re looking for. Weighing in at only 4kb, it generates QR codes using only JavaScript—no image resources, no calls to remote servers.

After including it in your page, and jQuery of course, you create an empty DOM element to hold the QR code (a DIV, for example) and then you just do something like this:

jquery('#somediv').qrcode("http://www.webmaster-source.com");

The plugin is available on GitHub, and is released by the author under an MIT license.

An alternative, for those of you who don’t mind using a third-party service—and prefer simply including an image rather than extra JavaScript—can use the wonderful Google Chart API.

Tempo: A Tiny JSON Templating Engine

Apr 25, 2011 by Matt | Posted in Coding No Comments

Tempo is a 4kb JavaScript library that renders JSON into an HTML template. Your script can take something like this…

<ol id="tweets">
 <li data-template>
  <img src="{{profile_image_url}}" />
  <h3>{{from_user}}</h3>
  <p>{{text}}</p>
 </li>
</ol>

…and populate it with JSON data from the Twitter API, which you could load with a couple lines of jQuery. It works with browser as far back as IE6 and doesn’t require any dependencies.

It seems like a friendlier way to deal with JSON data, and it offers the advantage of any templating system: you can separate the logic and data from the presentation.

Syncing Content With HTML5 Video or Audio

Apr 11, 2011 by Matt | Posted in Coding No Comments

This is one of the coolest Smashing Magazine articles I have seen in awhile: Syncing Content With HTML5 Video.

Using the generic HTLM5 video and audio elements and a bit of JavaScript, the timeupdate event in particular, you can synchronize script events to the media playback. The timeupdate event returns the media’s timecode, which you can then use to fire off DOM changes.

<script>
(function(){
    var v = document.getElementsByTagName('video')[0]
    var t = document.getElementById('time');
    v.addEventListener('timeupdate',function(event){
      t.innerHTML = v.currentTime;
    },false);
  })();
</script>

There are so many applications where this could be useful. You could supply show notes synchronized to a podcast, for instance, or additional information to supplement a video tutorial.

Syncing Content With HTML5 Video [Smashing Magazine]