Waiter, There Is Some jQuery In My jLinq…

jLinq occasionally gets confused as a plug-in for jQuery. Unfortunately, jLinq doesn’t do much to help performing queries in jLinq. I’ve written some extension methods before to help link the two together but they were packaged with other projects (and not really ever released)

So this weekend I put together a few helpful extension methods and released them on GitHub.

Naturally, you’ll need the core jLinq library and the jLinq.jQuery library along with jQuery. Since a lot of jQuery uses chained methods you’ll need to use the special invoke syntax for jLinq queries (just an array).

Here are some of the commands you can use.

• jlinq.$([selector]) : Starts a new query from document.body with the starting selector (if any).
• $(selector).query([selector]) : Starts a new query from the current jQuery object. Allows an optional selector.
• .include(selector, [jQuery Object]) : Includes the matches of the provided selector into the current query. You can use a different jQuery object as the source (otherwise it defaults to the object that started the query).
• .get([selector]) : Converts the current matches in the query to a jQuery object. Allows an optional selector to further filter the results.

Just as a reminder, in order to invoke methods within a query you need to use an array where the first value is the name of the method and following values are the arguments. These arguments are all where the field name would normally be. Here are a few examples in case you need them.

//Example 1: Non-method query
jlinq.from(data).contains(
    "fieldName", //the field to pull the value from
    "check for this" //the argument for contains
    );

// Example 2 : No arguments
// function test() { ... }
jlinq.from(data).contains(
    ["test"], //no arguments, but still an invoke
    "check for this" //the argument for contains
    );

// Example 3 : With arguments
// function test(arg1, arg2) { ... }
jlinq.from(data).contains(
    ["test", 33, false], //the method with arguments
    "check for this" //the argument for contains
    );

So what do these new methods look like? Well here are a few examples to get you started!

//finds all .result elements containing red or green
//and is also case-insensitive
jlinq.$("div.results")
    .contains(["text"], "red")
    .or("green")
    .get()
    .appendTo(document.body);

//finds all links pointing to MP3 files then sorts and styles them
var mp3Links = jlinq.$("a")
    .endsWith(["attr","href"], ".mp3")
    .sort(["text"])
    .get()
    .css({
        color:"#f00",
        fontWeight:"bold"
    });

//highlights all of the matching markup with 'Joe Smith'
$("div.result").query()
    .contains(["html"], "Joe Smith")
    .each(function(rec) { 
        var markup = rec.html()
            .replace(/Joe Smith/g, 
                "<span class='highlight'>Joe Smith</span>");
        rec.html(markup); 
        });

Now you can enjoy the awesomeness of jQuery along with the semi-usefulness of jLinq! You have access to ‘or’-ing, case insensitivity, sorting — It is all there!

This code is all brand new so I don’t recommend using it anywhere important just yet, but it is fun to see how jLinq can make queries a little bit easier.

Getting Organized With Toggl

I’ve been really busy the past few weeks trying to get ready for my new job and wrapping up projects at my previous job — needless to say free time has been pretty limited.

Up until now I’ve managed my time and projects using ‘The Notepad System’… or basically I just write stuff down, get it done and then check it off… not really something that is going to cut it going forward. Having personal projects, work projects and contract work all being merged into a single list is going to quickly get out of control.

My solution? Toggl!

This, my friends, is a masterpiece of web design and functionality. The devs (and designers) at Toggl have done an incredible job at taking something difficult like time tracking and making it not only super simple… but also hosted on the web!

Toggl makes it simple to create multiple clients, projects and tasks and manage time for each of them. Even better, if you try to enter the name of a client or project that doesn’t exist, it will create it for you on the fly! Every action seems to have been streamlined so that it doesn’t interfere with you doing your actual work!

Tracking time spent on tasks can be handled using the menu on the right hand side by simply clicking the red button (you can even close the window and the timer keeps going). This starts the timer for that task so you know how much time is spent doing something. To take it a step further, if you start a timer for another task, Toggl automatically stops any running timers for you!

Toggl also allows you to open the timer management in a separate window called ‘Nano’ — Which works perfectly with Chrome Applications. (If you do this just make sure you point the url for your Chrome app to http://toggl.com/nano)

And to take it a step further, I wrote a script with jsshell to add some buttons to the view (of course, you can reach them in a menu but I wanted them along the top as well :)).

Toggl also works with a variety of the mobile platforms as well, which is really handy if you aren’t always sitting at a computer.

If you manage a lot of projects at the same time or just simply need to keep track of where your time is going, then I highly recommend Toggl. Signup takes almost no time at all and you get 30 days to try it for free (then it is only $5 a month after that).

I could ramble on about how awesome Toggl is but I’ve already spent 36 minutes and 26 seconds on this task – time to move on to something else!

Making A Change!

Cool news! I’m starting a new job on Monday 20th, 2010 at TrackAbout!

I’ll finally be working with incredible developers that will no doubt teach all sorts of awesome new things!

I have been with my current employer for more than 7 years now and I’m definitely sad to leave but there comes a point when you simply cannot improve anymore working by yourself. Fortunately, I’ll be working from home (or the nearest coffee shop), so I’ll be able to go catch up with them for lunch every once in awhile.

Anyways, just wanted to share some good news!

Interface Design For Developers – Glossy Buttons

In this series each topic will be split into two parts – First, creating the graphics using Photoshop and normally with a screencast. The second part will be a blog post on how to use the newly created graphics in a project — normally websites.

This screencast shows how to create a glossy, reusable button with Photoshop and then make changes to the colors, text and icons it displays. We also discuss adding a reflection to buttons by using a Smart Object. Additionally, we look at how to add text and change the color of the button.

Creating Glossy Buttons

[Watch the screencast]

Resources

Below are resources for the content created in this screencast. You can use the .PSD file to get the finished Photoshop file. You can use the .PNG file to create buttons with a different art program.

[Tutorial PSD file]
[Buttons.png]
[Buttons-No-Shadow.png]

Check back for the next blog post where we discuss how to use the buttons in a website.

Is there a topic you’d like to see covered in this series? Make sure to leave a comment with your ideas!

Interface Design For Developers – Introduction

Simple is better when it comes to design. Adding a bunch special effects doesn’t automatically make an interface element better. Good design is normally very subtle and involves very few special effects (if any at all)

See what I mean?

However, a hint of gloss or a slight reflection for an interface element can make a plain website much more attractive (no, not System.Reflection, stay with me here…).

Design Tutorials For Developers

If you’ve ever seen my personal websites then you can tell I’m interested both code and graphics. I’m more or less one of those jack of a couple trades, master of none sort of guys.

So, this series of posts we’re going to discuss both how to create attractive interface elements and how to use them in our code – a little bit of both worlds in the same post!

I’ll be using Photoshop for these tutorials but I’ll try and use concepts that apply to other art programs as well. If you don’t have Photoshop then you can download a trial version.

The Tutorials

Below are previews for the tutorials I’ll be releasing the next couple weeks. I’ll also come back and add to this list as more come out.

Shiny 'Web 2.0' style buttons with HTML and CSS

Create a simple 'Post-It' note and then write dynamic text to the image

Extend the 'Post-it' note by creating a photo frame and change the subject dynamically

These should be a good start to but if you have ideas that you’d like to see then leave a comment or send an e-mail my direction.