laboratory
jQuery, CSS3
w/Blueprint
Duplicating the iTunes Smart Playlist Form with jQuery & CSS3
Okay, so this might rank up there as one of the strangest things I’ve wanted to want to experiment with, but I thought I’d take a crack at duplicating the Smart Playlist in iTunes using jQuery, CSS3, and Blueprint. But I’m doing it and so far, so good.
Smart Playlist in iTunes
Smart Playlist with CSS3 and jQuery
Didn’t take very long to get the basic’s down, though there’s more to go to make things really polished. Plus/Minus buttons are working; Expand (if that’s what it’s called) does nothing for now. Hopefully I’ll have more updates soon. Feel free to chime in.
Here’s the JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /* ----------------------------------------------- iTunes Smart Playlist (functions) an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ $(function() { var counter = 0; checkChildCount() $('.rule').live( 'click', function(e){ switch($(e.target).attr("class")){ case 'plus': counter++; var newItem = $(this).clone(); newItem.insertAfter(this).attr('id', 'rule' + counter); $(':input','#rule' + counter) .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); break; case 'minus': $(this).remove(); break; case 'minus disabled': break; case 'expand': break; } checkChildCount(); } ); function checkChildCount(){ if($("#rule-group").children().size() >= 2){ $("#rule-group .rule .minus").removeClass("disabled"); } else { $("#rule-group .rule .minus").addClass("disabled"); } } }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /* ----------------------------------------------- iTunes Smart Playlist an experiment by Weszt @ Hanami Design weszt@hanamidesign.com -----------------------------------------------*/ /* wrapper */ #smart-playlist {-moz-border-radius:4px 4px 0 0;-moz-box-shadow:0px 4px 10px #999;-webkit-border-radius:4px 4px 0 0;-webkit-box-shadow:0px 4px 10px #999;background:#ededed;border:1px solid #98999c;border-radius:4px 4px 0 0;box-shadow:0px 4px 10px #999;font-family: "HelveticaNeue", Helvetica, Arial, Sans-serif;font-size:110%;margin-bottom:1em;} #rule-header {background: #a8a8a8;background: -moz-linear-gradient(top, #a8a8a8 0%, #d8d8d8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(100%,#d8d8d8));background: -webkit-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -o-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -ms-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#d8d8d8',GradientType=0 );background: linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);border-bottom:1px solid #515151;font-weight:500;padding:.2em;text-align:center;text-shadow:1px 1px 1px #ddd;} #rule-group {-moz-box-shadow:inset 0px 0px 4px #999;-webkit-box-shadow:inset 0px 0px 4px #999;background:#e5e5e5;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0px 0px 4px #999;margin:1em;} #rule-group input, #rule-group select {width:13em;} #rule-group .plus, #rule-group .minus, #rule-group .expand {background:url(../../../images/iTunes-buttons.png) 0 0 no-repeat;display:inline-block;font-size:0;height:23px;margin:-4px 2px 0;width:22px;vertical-align:middle;text-indent:-9999px;} /* #rule-group .plus {background-position:-34px -3px;} #rule-group .minus {background-position:-34px -3px;} #rule-group .expand {background-position:-34px -3px;} */ #rule-group .plus {background-position:-34px -37px;} #rule-group .minus {background-position:-4px -37px;} #rule-group .minus.disabled {background-position:-4px -3px;} #rule-group .expand {background-position:-63px -37px;} .minus.disabled {color:#999;cursor:default;} .rule {padding:.75em;position:relative;} .rule a, .rule input, .rule select {margin:0 .5em} .rule a {text-decoration:none;} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div id="smart-playlist">
<div id="rule-header"> Smart Playlist </div>
<form>
<div id="rule-group">
<div class="rule" id="rule">
<select id="select">
<option value="Album">Album</option>
<option value="Album Artist">Album Artist</option>
</select>
<select id="select">
<option value="contains">contains</option>
<option value="does not contain">does not contain</option>
<option value="is">is</option>
<option value="is not">is not</option>
</select>
<input type="text" id="text" />
<a href="#" class="minus">Minus</a> <a href="#" class="plus">Plus</a> <a href="#" class="expand">Expand</a> </div>
</div>
</form>
</div>
</div> |
Related Posts:
4A jQuery Plugin For Changing Measurement Units Inline
I’m experimenting with an inline measurement unit switcher and recalculating tool built as a jQuery plugin. Off to a pretty good start. All one needs to get it running is pop in the basic tag, give it a type, and add a number.
Switching the measurement unit inline
The basic plug is like so:
<span class="hd-munit-switcher" rel="temperature">100</span>Version 0.1 includes support for basic temperature and a few distance measurement units. I’m interested in expanding this, but it’s my party – I’ll code when I want to.
Next I’d like to add better error capture, more measurement units, better support for inputs, and plugin options such s turning on/off switching for all units on a page.
Related Posts:
2CSS and equations
Displaying Math/Equations with CSS and HTML
Not that I spend much time browsing Calculus websites, but I have noticed there aren’t many that attempt to show math with anything other than images. Must require an awful lot of time in Photoshop. This experiment (and possibly project) is to see what it would take to do the same thing with HTML and CSS alone.
Oh the irony of showing an image in an experiment meant to avoid them
My hope is to establish a simple system for others to use, but these are early stages and I’ve not tested much across older browsers. Also my knowledge of higher level math fairly stinks. However I’ve got some fairly complicated equations looking pretty good in at least Chrome/Firefox/Safari.
Related Posts:
2Hanami Design
Experiments for Week 27
Each week I’m going to spell out for you what I’m looking to experiment with and write about on Hanami Design. Time and inspiration might have other plans, but these are the goals. Updates will be posted.
- Announce new missions and experiments
Interested to see if announcing my goals for the week increases my emotional commitment. - Start my day with a coffee + meditation + brainstorming session
A routine where I meditate while the coffee is brewing, record all my ideas, and sip a bit till my head is clear. I’ve dabbled with this already, but I’ll update you as the week progresses. My hope is that I can reduce tension, start my day smoothly, and get all my ideas and distractions out in one convenient time frame. - Play with typography of math formulas with CSS
Never displayed math formulas before. Thought I’d take a crack at how one could best do this in CSS. - Print my lists: next actions and projects
To test the difference in productivity between all digital lists in Things and paper. - Sharper button edges
A design project. Need a solution for cleaner buttons. - “Prototyping for Website Design”
Been fiddling more and more with prototyping website layouts in actual code before touching Photoshop. Hoping to work in time to write a bit about my experiences. - Bonus: “Further Songwriting with Evernote” (if time allows).
Let’s look forward to a productive week, shall we?
Related Posts:
1right with a
prototype.
From Prototype to Design
This series follows the development of a web/mobile application from beginning to final design. Started May 2011.
LegendList: Prototype Version 3
In the latest round of prototyping, LegendList has changed dramatically. Let me list the ways:
- Big search bar is now vertical (the horizontal layout didn’t work well with the big logo)
- Added several options based on use cases
- Removed HTML5 elements (fun to play with, but naturally barf in IE7 and IE8)
- Massaged the jQuery for the search options to be more helpful and friendly
- New pages: search results, getting started, etc.
- Changed navigation wording to be more use case friendly
Please note: We’re not bothering to optimize anything, yet, but are taking steps to keep things DRY (= Don’t Repeat Yourself). Ben Alman covers this nicely in his post Style in jQuery Plugins and Why it Matters.
As you can see, LegendList is quickly becoming a functioning app – and we’ve not done a single mockup, yet. Why is this important? Because user experience design is more than Photoshop. We’re working out the blueprints, figuring out how to move from room to room, and leaving the interior design for when there are rooms to decorate. We’re learning how LegendList feels.
The search boxes now:
- Autofocus on load
- Display a “clear” button whenever text is present
- Open the options menu when the down arrow is pressed (see jQuery and Keys)
- Share more common code
- Are a bit prettier
Naturally we need more than one page of this app to truly know the flow, so we’re now focusing on where things go from the landing page and on what people see and do if they begin somewhere else.
Thus far on the search results page, we’ve allotted space for many items, but we’ve got more experimenting to do with the functions of a review. Also we’ve altered our structure a bit so mobile styles need updating.
Prototyping helps nurture and reveal the personality of the app (also see Prototyping is Like Online Dating). We’re not bothered with visually impressive elements; we’re focused on giving the most important elements a place and getting their functions right. As I mentioned in Designers Rule at the Startup CEO Level with the Designer Fund, no amount of paint can turn a lemon into a Ferrari. You must treat the entire experience with care, from how the engine hums to how it feels to sit in the driver’s seat.
I can’t tell you what a joy the LegendList prototype has been for me so far, how much it has influenced me to spend more time in prototyping on every project I’m involved in.
And we’ve not done any guerilla style usability testing, yet.
Related Posts:
0search page
From Prototype to Design
This series follows the development of a web/mobile application from beginning to final design. Started May 2011.
LegendList: Desktop Updates and Mobile Styles (Rapid Prototypes II)
Since the last post, the LegendList prototype has evolved a bit. We’ve decided to go with a drill-down menu that appears when the Activities search box is hovered and not with a multi-level main menu as we’d previously planned. We feel this approach makes for a more natural and effortless introduction to available activities. Seems more right, but time will tell.
By not having the big menu along the top, we’re primed for a mobile version – an important project requirement. So let’s get to it.
The above is how the prototype first appeared on an iPhone and without a mobile-optimized style sheet. It looks… well… shrunk. Not very mobile friendly.
My first goal was to upsize and reformat. A single centered column would also be appropriate. I didn’t want to create a completely separate mobile version of the page, so I worked up a quick stylesheet for screens up to 480px wide.
Decent start. Since the headers would likely become navigation bars in future iterations, I anchored them to the top. Afterwards I removed the rounded box from the search options and made the fields larger and more in the flow.
Okay, that’s more like it, but things aren’t yet perfect. Drill-down is a bit visible if you look close enough, there’s an odd line beneath the labels, and if I press “Search” and then Back on Safari, the stylesheet freaks out.
Even with it’s flaws, we must remember this is a prototype and it doesn’t need to be perfect. Once we get a better of understanding of what works, what doesn’t, and the general personality of the app, we’ll be better prepared for a proper design.
So let’s move on now to search results and activity pages.
Related Posts:
1user experience
From Prototype to Design
This series follows the development of a web/mobile application from beginning to final design. Started May 2011.
LegendList: Rapid Prototyping a Web and Mobile Web Application with Blueprint and jQuery (1)
I love prototyping. I love thinking through user experiences and flows, making sure things are working right before they’re looking right. It’s confidence building and makes for a better product in the end.
I thought it might be fun to record the development of LegendList from the earliest stages, so we’re starting just a little past the sketch pad. LegendList is a soon-to-be-cool, activity-centric travel site.
To get to the final product faster, we’re prototyping the web and mobile web versions simultaneously and using actual code. I’m using Blueprint for the basic CSS framework, jQuery and the jQuery’s UI library for JavaScript and custom form element needs, plus as much HTML5 and CSS3 as I can justify.
First pass was pretty generic and felt a bit too much like a prototype, so I added a few labels, spread out the fields, and some CSS3 spice (shadows, rounded corners). I also began to suspect that the drop-down lists for the autocompletes could turn out to be unreasonably long.
At this point I’m happier with the layout and certain that the drop-down lists would be too long to be helpful. After a little thought and experimentation, I decided to try creating a main navigation bar (which I wasn’t sure if we wanted yet on our home page) with a drop-down menu. This seemed more right.
Now we’re talking. Best of both worlds without those worlds colliding together.
At this point I feel the basics of the landing/search page are solid enough. Next I’d like to tackle a mobile home page, followed by search results, an activity page, and a bit of code cleanup.
Related Posts:
2Highlights
- PDF to SWF viewer
- Flash search and highlight
- Printing SWFs
- Document viewer
Flash PDF Viewer w/Search and Print
The project was to create a tool that could load PDF files that were converted to SWFs and be able to navigate and search through the text. By no means was this an easy task, especially given that it needed to be done in ActionScript 2 (which I hadn’t used in a while).
Printing was a challenge, to say the least. Search was no tea party either, but in the end the blood and sweat were worth the effort. The extra time spent on UX also made things feel much more polished in the end.
Note: Trying to figure out why the yellow highlight doesn’t work with this particular document. Annoying, but c’est la vie.
Related Posts:
0Challenge
who's boss.
Highlights
- Small stresses make big ones seem worse
- Identify the little things that bug you
- Fix the small stuff!
100 Little Stresses Challenge
Inspired indirectly by the 100 Things Challenge and the realization that many little things compound to make the bigger problems of life seem much worse than they are, I’ve committed myself to the 100 Little Stresses Challenge.
The rules, thus far, are simple:
- Make a list. Write down 100 small, distinct things that bug you. You must be specific (“clutter” is too broad).
- Take action. Knowing is only half the battle. You must take steps to resolve the issues.
I’ve just started my list and here is a sample:
- Lack of space on my desk at home
- Lack of space on my desk at work
- Stain on my coffee maker
- Portafilter that leaks
- Time it takes to get backpack and rain gear ready to ride to work
- Speed of my iPhone
- Other/capacity issue on my iPhone
- Shoes not tied tight enough
- Noise canceling headphones falling off desk.
- Loose change in car
Number 8 was an easy fix, but the point is that I didn’t realize I was putting up with an annoyance I wasn’t completely conscious of. Being aware of the problem made solving it possible so, duh, I simply tied my shoe. Done. Day less stressful.
I already felt a sense in relief in just having done this much but there are 90 more things to list and actions to take. I’ll chime back in as things progress.
Related Posts:
2can be more efficient
than all digital or
all paper.
Hybrid GTD System
This is an on-going experiment to improve my offline/online GTD management system.
Going Hybrid: GTD Digital + Paper (2)
My experiment with a hybrid system for Getting Things Done continues. I’m keeping all my daily stuff (next actions, lists, etc) in a custom paper organizer and nearly everything else in Evernote. Things are going really well.
I’ve made a few modifications since my original post, including putting my daily and project lists together on a ring. I hunt less for them and can easily reorder them if necessary. Because only one can be visible at a time, I’m distracted less, basically being forced to see just one list at a time.
My project lists are grouped into three super areas: Work, Career, and Personal. Technically I have many more areas of focus/responsibility, but these super groups help keep down the number of index cards I need to keep with me. My daily lists include my daily review, grooming checklist, work start, work end, ticklers, and journal.
Another new idea is to extend sections of the notebook that are full (such as @computer) with clipped on index cards. Found some portrait style at Staples (which is helpful) and now I can continue using notebooks that I might have previously tossed when one or two contexts ran out of room.
What I’m loving most about having a paper organizer for daily stuff is the speed. I’m not bothered by software lag or screen size. I’m not limited monitor size. Because everything else (areas, project notes, goals, lists, ideas, etc) are all in Evernote, I can never really lose anything. The Evernote side of things is still undergoing its own development, as you’ll probably notice by the blank “Purpose” folder, but I’m making good progress and should have more to say soon.
Related Posts:
2Highlights
- Combines login and registration forms
- Rich solution for personal social network links
- Bold identification
Super Button UI Pattern Prototype
Was working on ways to simplify a social network’s navigation and came up with a way to combine login, registration, and all frequently accessed user functions into a single drop-down. This prototype illustrates the basic of how would work.
While the user is logged out, the button provides access to a login form and a simple registration (part of the project requirement). Not necessarily flexible as far as localization is concerned, but that wasn’t in the specification, so it’s okay.
After logging in (or registering), the button displays the user’s avatar, name, location, and member type. The respective drop-down can show any number of links and functions, including email message counts. Logout and link to the user’s account are here as well. Communication items are grouped separately.
This is a PDF prototype, built in OmniGraffle, complete with hot spots. In other words, open the PDF, click the button, and explore the basic functions I’ve worked up here.
Related Posts:
0Highlights
- Conversion formulas
- Scientific calculator view
- ActionScript 3
Flex/AS3 Scientific and Conversion Calculator
[Update] Since I don’t have a copy of Flex, I’m not currently supporting this project and am giving away the source code. I’ve not worked on this in a number of years so admitted, I probably won’t remember much about it. Thanks!
A calculator scenario gave me a chance to work with many of the math options in ActionScript 3. Not much more to say!
Related Posts:
2can be more efficient
than all digital or
all paper.
Hybrid GTD System
This is an on-going experiment to improve my offline/online GTD management system.
Going Hybrid: GTD Digital + Paper
[Updated] Lately I’ve gotten fed up with the speed of my iPhone 3G since the operating system upgrade. I’ve had enough. Goodbye to 10 second struggles to write “buy orange juice”. I’m going back to paper. Well… kind of. I’ve been developing a paper-based GTD system for my day-to-day activities, the rest being managed by Evernote, gMail, and Google Calendar. I’ll post more about the results as the months go on, but the contents are two small notepads (one for an inbox, the other for contexts), a few index cards (one group for active projects, another for ticklers), business cards, and a couple of paper clips, all wrapped in a pad protecter from Kokuyo that I picked up in Japan a while back. Even has it’s own elastic band and bookmarks!
Please note that this isn’t intended to be an all-inclusive GTD planner. With the number of projects I have and need to reference many digital items, I’ll never be able to go full-paper. Nor do I want to (I’ve tried this, but it was too much work) as what I’m striving for is simply to get things done faster. So far this is working out – no more waiting while the iPhone decides if it will let me open an app or not!
Related Posts:
2text editor could
exist (if I built it).
Highlights
- Rich text editor that's not dependent on any particular field
- Basic editing functions
- Built to work with dynamically loaded fonts (not shown)
Field-Independent Rich Text Editor in Adobe Flex (AS3)
For a Flex-based brochure building application I built a few summers ago, I developed a field independent rich text editor. Had no choice since I couldn’t find a component anywhere else that could do this. Creating the layout was obviously easy, but got stuck for a while on the bullet points… couldn’t find any documentation that indicated they were actually objects.
This needs more attention to be a true component and I haven’t decided whether I’m going to develop it further or support it, but feel free to give it a whirl.
Related Posts:
0increase productivity
Highlights
- Support the big rocks with little ones
- Help regain focus
- Productive distractions
Pair-Ups: Making Distraction Work
Overview
Distractions can be useful if chosen wisely, or at least that is the thought behind an experiment called the pair-up. The pair-up uses a lesser task as a break from a major one. When the big rock gets to be too daunting, turn to the smaller one until you can regain focus. Distraction, therefore, becomes productive.
Duration
Off and on for a few months.
Outcome
Overall, this has been a success, but one must be cautious not to get carried away with the secondary tasks. Remember that the point isn’t to purposely divide attention, but to take advantage of the times when you just can’t help it. Sometimes you simply get stuck and need to look away for a little while.
That being said, I pair-up all the time now. Though the tasks I pair-up are related in context, I prefer they be as dissimilar as possible. Usually the smaller rock is a mindless activity like updating guidelines or fixing a small, yet annoying bug, something, too, that I chose in advance during my daily review.
Hope this makes sense and I hope it works for you!
Related Posts:
0Highlights
- XML driven Flash map
- Highlights countries with links
- 200+ countries
Flash World Map
Built an XML driven world map a few years back in Flash so a travel website could feature and highlight countries they were running specials in. Links would point to different areas of their site.
Took a few cues from Google maps (as one often does) for the controls. The XML was generated by a content management system and passed country codes and links to the Flash app. Took more time to get the countries matched with the map than anything.
Related Posts:
0Highlights
- ActionScript 2
- Cat invasion
- Collision detection
Maynard vs. The Cats (Flash Game)
The Maynard game came from a request one of my students made a few years back about creating a Flash game around a janitor at his high school. Why not? All the artwork was created my Scott (student) and during our Flash lessons, together we worked out the code. I probably ought to spend some time updating and improving it as it was a lot of fun.
- Make sure your mouse is directly over the movie or the controls won’t work
- Left/right arrows or mouse for movement
- Spacebar to shoot (you can also hold)
- Arrow up to drop a water bomb
Related Posts:
1promotional tool
Highlights
- Play and create connect the dots
- ActionScript 2
- Promotion
Connect The Dots Game and Creation Tool (Flash)
This was originally created as a promotional tool but was never used. On completion, a background image would appear, but those have since been lost and I’ve not yet created replacements.
Each connect-the-dots “page” is created via XML and so could be generated externally. However this version also lets the user create their own pages; saving option is currently disabled since it requires server side code that isn’t available.
Click “New” at the bottom of the game to enter Create mode and follow the on screen guide for controls.