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!

CSMongo – An Introduction

Last night I did a short screencast explaining the basics of using Documents in CSMongo. The screencast goes over adding, changing and removing values along with getting access to the values you assign.

Double Whammy – jLinq Release And Screencast!

Now that you’re all excited time for some disappointment – it is just a minor update to fix a few bugs and to add one new feature.

But instead of just blogging about it I’ve also done a new screencast to talk about the updates and new feature in this release.

• Dynamic Queries (using OR) – Before, if you used “OR” at the start of a query then you’d get an exception. jLinq would try and tag “||” at the start of your query which would cause the whole thing to collapse. Now, jLinq correctly handles this and prevents the error. In turn, writing dynamic queries just got a whole lot easier!.
• Range Comparisons With Dates – Version 2.2.0 introduced smarter comparisons by evaluating the types of values being passed in instead of expecting only one type. However, in the change, the range comparisons like greater, less, between, etc, would all incorrectly evaluate Dates as strings… bummer.
• Bitwise Flag Comparisons – jLinq 2.2.1 introduces a new query method called has which performs bitwise flag comparisons on records. It even works with regular ol’ numbers by converting them before performing the comparisons.

Anyways, go check out he new screen cast now and tell me what you think!

Bonus: CamStudio Icon

Last night while I was setting up CamStudio for this screencast I was looking at their UGLY icon they use for their program — I just couldn’t stand it being in my beautiful RocketDock – so I designed a new one for them. If you’re looking for an improved logo then you can download the PNG for the CamStudio icon.

jLinq Screencast #3 – Modifying Records During A Query

Sometimes when you get your records they aren’t exactly what you we’re needing, or sometimes some of the fields need to be formatted before they can be queried against. Fortunately, jLinq comes with that functionality built into it.

This screencast goes over several of the methods you have available to you that allow records to be formatted before they are selected.

• each(delegate(record)): Performs a loop through each of the values in the array. This code can be used to modify records, create new properties or anything you need it to do.
• attach(alias, delegate(record)): Performs the method passed in on each of the records in the array and attaches the result to the record using the alias provided.
• join(records, alias, foreignKey, primaryKey): Joins two arrays together using the alias and the keys to match the values. Joins tend to be slow when using large arrays, so use caution.

If you have any recommendations or requests for the next screencast, please let me know and I’ll see what I can do.

Side note: Never improvise on a screen cast – nothing like having to redo a screen cast twice because you say something that isn’t true and then realize it while recording. 🙂

Nothing Gets Done When You’re Out Of Town — Ever

I was out of town this weekend, formatting my computer and chillin’ with my daughters, so the time to work on a technical blog post was pretty much non-existent. I did run into a very disappointing problem with the Vista install that shocked me that I would need to fix (manually loading drivers at the start of the installation – certainly not ‘grandma user-friendly)

Despite that fact I had no time for a technical post, I did get some time to test and verify my screencast software was working like it was before.

This screencast I have a special guest with me, my three-year old daughter Cassandra, showing us some of her favorite technologies on Vista.

This isn’t programming related, just something fun I did this weekend with my kid talking about her favorite games — and she’s talking at the start so have your speakers down

.

jLinq (LINQ for JSON) Screencast #2 – Creating Your Own Extension Methods

jLinq is a Javascript library that allows you to do LINQ style queries with JSON data.

Did you know that jLinq let’s you extend the base library with your own methods? Did you realize that any method you create plugs right in and works with the built in jLinq features?

This screencast goes over some of the basics to creating your first extension method for jLinq.

Creating A Query Method

A Query method is what determines what records stay and which records are removed from a jLinq query. Here is a sample of what a extension method looks like.

jLinq.extend({
    name:"evenValues", //the name of this method
    type:"query", //the kind of method this is
    count:0, //how many parameters we expect
    method:function(query) {	

        //determine how to evaluate the value being compared
        var compare = query.when({
            "string":function() {
                return query.value.length;
            },
            "array":function() {
                return query.value.length;
            },
            "other":function() {
                return query.helper.getNumericValue(query.value);
            }
        });		
        
        //the actual comparison
        return compare % 2 == 0;		
    }
});

You’ll notice we provide the name of this new method, the kind of method (in this instance, a query method), the expected number of parameters (not counting the field name) and then the actual method we use to determine if we keep the record.

If you don’t understand how this works exactly then you might want to watch the screencast at the end of this post to see how this works step by step.

Operator Naming

This screencast also explains operator naming. When you extend a query method, several additional operator prefixed name methods are added to jLinq as well. Each of these perform the correct switches when they are used. For example…

//this method is one way to do it
jLinq.from(data.users)
    .less("age", 30)
    .or()
    .evenValues()
    .select();

//this method was generated automatically - saves us a step!
jLinq.from(data.users)
    .less("age", 30)
    .orEvenValues()
    .select();

Of course, if you name your method something like orHasSomeValue() you’re going to end up with some strangely named operator methods (for example orOrHasSomeValue()).

It’s Simple–ish

Extension methods are a little confusing at first but after you create your first one you should be on your way. This screencast will get you started in that direction.

Watch Screencast #2 – Extending A Method In jLinq

.