iOS Theme Update

I pushed an update to the iOS jQuery UI Theme to add support for the latest release - jQuery Mobile 1.2.0. Not much should change, but there is a notable syntax change to “in page” buttons.

The changes are:

  • Added support for jQuery Mobile 1.2.0
  • Support for, and styling of new popup elements
  • An example iOS style popup as per the image below (would be best if you set it up with a timer to hide after a couple of seconds?)
  • Major refactoring of “in page” button styling. No more messy .ui-btn:not(this):not(that), instead it inherits from .ui-btn-plain.
  • Closed various issues and pull requests
Notable exclusions/issues:
  • While basic popups are supported, no nested popup menu support is available
  • As above, button syntax has changed. This causes an issue with <button> elements. I’ve raised a bug here.

 

Delta jQuery UI Theme

Hey guys, just a quick heads up that I released the “Delta” jQuery UI theme a while ago over on the blog of my employer, Kiandra IT. It’s a completely free theme, and the best looking one yet. There are some known issues reported on the GitHub repo, so I’ve got to find some time to push up the fixes. All in all it’s pretty stable and cross browser compliant. It works on both light and dark backgrounds, something you don’t always see. It’s also retina display friendly and makes use of my OS-dependent modal script.

The details:

Enjoy.

Repository Updates (iOS Theme + jQuery.Gantt + Aristo)

Hey guys, not much has happening on the design/development front while I’ve been away on leave. Today I’ve landed some fairly big pull requests and bug fixes to what are probably my three biggest repos.

jQuery.Gantt

This is the big one. I made some pretty major changes before I went away but wanted a few more people to test it before I did the writeup.

I received a fairly major (and necessary) rewrite from Leo Pfeifenberger who sped up this project like you wouldn’t believe. It wasn’t a simple matter of landing the pull request, as the performance changes did come at the cost of coding standards and consistency. Some parts had been buggered by what looked like Visual Studio auto formatting, but they could have been hand-coded that way too.

For future reference, here are my own personal front end dev guidelines that have been received well by the community. They’ve changed in some regards based on feedback from individuals and organisations and represent how you should aim to format your code.

  • Major performance increases.
    A before and after IE9 test shows performance going from 20 seconds to 400ms.
    That’s 2% of the previous run time.
  • All new click events - fired when clicking an item or when clicking the empty space. Use this to edit events or create new events at certain points.
  • State persistance - requires cookie.js to work.
  • Scroll to today on load
  • Extensive documentation
  • Defined a license (MIT)
  • Removing $.ajaxSetup, which was corrupting other scripts in the page.
    According to this stackoverflow answer it was only there to ensure it worked in ASP.NET situations. If you’re using it there, consider setting $.ajaxSetup externally.

Unfortunately that means there are some new issues:

  • Code standards - I spent a considerable amount of time running the code through JSHint and fixing issues. I got most, but that included setting a few ignores.
  • Eval - yep, as above, you’ll notice that there’s an eval in the code. Yuck.
  • Holiday and “Today” highlighting are not occurring on the cell, only the header.

Two steps forward one step back. No biggie.

 

iOS jQuery Mobile Theme

I realised there was a big difference between what I was seeing in Chrome, the iOS simulator and my iPhone running iOS 5.1. Turns out the iOS simulator was only running 4.3.1, so I’ve now got the 5.1 simulator and that’s helped me resolve some visual quirks.

  • Fixed: header bars had black top border
  • Fixed: Vertical centring of header buttons was off (related to above, layout woes)
  • Fixed: Black buttons had blue text shadow
  • Fixed: Footer icons had crept to the right with last update (jQuery Mobile styles took precedence)
  • Pull Request: <label> styles coming from poorly scoped selector
  • Pull Request: Demo page typo
  • Set demo page transitions to “slide” by default
  • Set all demo page toolbars to be position=”fixed” by default
  • Decided on licensing (MIT)

 

Aristo jQuery UI Theme

  • Fixed: Cross browser CSS3 animations appear to have been re-instated.
  • Pull Request: Added a non-prefixed value that I missed.
  • Pull Request: Widget nesting issue fixed.


 

HTML iOS Notifications - UX Lab 007

I thought I’d build a facsimile iOS notification plugin for shits and giggles. It’s pretty much the exact opposite of a good UX, but it’s more of a proof of concept than anything else.

  • It’s 100% wide on standard and retina iPhones and 60% on desktop and iPad resolutions. 
  • It has built in retina icon handling.
  • Doesn’t break middle mouse clicks when using a URL.
  • Passes JSHint.
  • It works with Chrome, Safari, Firefox and I believe Opera, but I haven’t tested.

Documentation and options are available on the demo page.

It also has its own GitHub repository.

 

I&#8217;ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I&#8217;ve added new content and improved old. I&#8217;ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out. I&#8217;ve added some sections on: The importance of understanding the box model (CSS) Knowing when to float, and when to position (CSS) Generating unique IDs without timestamps (JS) Preserving middle mouse click functionality (UX) I also: Made the website work without JavaScript enabled Cleaned up the overall design and interaction (Bootstrapped!) Re-wrote some content here and there Added pretty graphics to explanations Added some resources to the list Basically, we&#8217;ve gone from this: To this:  
Pop-upView Separately

I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out.

I’ve added some sections on:

I also:

  • Made the website work without JavaScript enabled
  • Cleaned up the overall design and interaction (Bootstrapped!)
  • Re-wrote some content here and there
  • Added pretty graphics to explanations
  • Added some resources to the list

Basically, we’ve gone from this:

To this:

 

I&#8217;ve just pushed some pretty hefty changes to the jQuery.Gantt project I&#8217;ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn&#8217;t play nicely with my pre-existing code.  I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below. A lengthy list of changes follows: Reduced conflicts with Twitter Bootstrap by name-spacing styles Source now accepts data from a local object, not just a JSON call   Can now extend data properties on to bars for use with Bootstrap popovers etc. Code is now &#8220;use strict&#8221; Fixed a couple of errors resulting from &#8220;use strict&#8221; Various English translations: renamed months and days to english, hollydays/holidays Redesigned buttons and slider with CSS3 and an image sprite Modified category colours and styles Made chart 100% width so it responds to parent container width Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity Updated demo page doctype to HTML5 Moved body styles from stylesheet to page to reduce style conflicts  
Pop-upView Separately

I’ve just pushed some pretty hefty changes to the jQuery.Gantt project I’ve been developing with lately. I tried some other Gantt libraries, but they were either dependant upon ExtJS, no longer maintained or just didn’t play nicely with my pre-existing code. 

I settled on jQuery.Gantt, but there were a few things I found that really kept it from being an accessible, front-end developer friendly resource. For instance, you could previously only specify a URL as a data source, and not a local object. I needed to pre-parse another JSON feed before plugging it into the chart. There were also some conflicts when using the Twitter bootstrap, and the inability to place attributes on the Gantt bars meant no sexy popovers like below.

A lengthy list of changes follows:

  • Reduced conflicts with Twitter Bootstrap by name-spacing styles
  • Source now accepts data from a local object, not just a JSON call  
  • Can now extend data properties on to bars for use with Bootstrap popovers etc.
  • Code is now “use strict”
  • Fixed a couple of errors resulting from “use strict”
  • Various English translations: renamed months and days to english, hollydays/holidays
  • Redesigned buttons and slider with CSS3 and an image sprite
  • Modified category colours and styles
  • Made chart 100% width so it responds to parent container width
  • Began enforcing front end dev guidelines such as double quotations (but singles on HTML strings), triple equals comparison and using spans instead of hyperlinks for JavaScript interactivity
  • Updated demo page doctype to HTML5
  • Moved body styles from stylesheet to page to reduce style conflicts

 

Introducing the UX Lab The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I&#8217;ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example. The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes. Some of the cool things to come: Credit Card Type - Passive Selection jQuery UI Slider Toggle Switches Mac vs. Windows Close Buttons Flash-free Google Analytics  and more&#8230;  
Pop-upView Separately

Introducing the UX Lab

The lab is a place for me to share my thoughts and experiments with the web development community. While the name indicates a user interaction and user experience focus - I’ll also be sharing CSS3, JS and HTML5 tidbits. My aim is to make the web a better, more consistent place. And what better way to achieve that than by leading by example.

The experiments will be hosted as one main repo on GitHub. That way you can easily view the code, download any resources, as well as forking or branching it for your own purposes.

Some of the cool things to come:

  • Credit Card Type - Passive Selection
  • jQuery UI Slider Toggle Switches
  • Mac vs. Windows Close Buttons
  • Flash-free Google Analytics 
  • and more…

 

Repository Updates (Aristo + Guidelines)

Some recent changes to some of the GitHub repositories that I manage include:

As always I hope you enjoy my work and continue to raise issues and contribute code via GitHub.

Repository Updates (iOS Theme + Front End Dev)


Front End Development Guidelines (Demo | GitHub)

The ability to “deep link” to categories and articles went in a while ago, but until today there wasn’t a UI to make it easy. I also added a section on centering content, both horizontally and vertically. It reflects the blog post I recently posted on the matter.

iOS jQuery Mobile Theme (Demo | GitHub)

I’ve replaced the CSS3 back button with an image sprite. The original snippet required a custom button syntax and just flat out looked terrible. I dabbled with -webkit-mask-images, but these are buggy and inconsistant. There was no reliable way to mask the button into the correct shape, and then apply the CSS3 gradients, shadows and border effects. It was a compromise, and currently only supports 1x (non-retina) displays, but it works. Here is the difference blown up.

I also styled the persistant footer bar and added in some sample Glyphish icons. Please consider the licensing if you want to implement the Glyphish icons on a commercial site.

This is my most desperately sought after feature right now in GitHub. In terms of streamlining the GitHub process, the most repetitive thing I find myself doing is updating the front end pages branch to mirror their &#8220;master&#8221; branch. It&#8217;s a pretty antiquated process of copying the contents of &#8220;master&#8221;, pasting it into a &#8220;gh-pages&#8221; branch, committing it and then pushing the changes live. For a team that is renowned for developing awesome features that users didn&#8217;t even realise they needed yet; this one seems like an absolute mulligan.
Pop-upView Separately

This is my most desperately sought after feature right now in GitHub. In terms of streamlining the GitHub process, the most repetitive thing I find myself doing is updating the front end pages branch to mirror their “master” branch. It’s a pretty antiquated process of copying the contents of “master”, pasting it into a “gh-pages” branch, committing it and then pushing the changes live.

For a team that is renowned for developing awesome features that users didn’t even realise they needed yet; this one seems like an absolute mulligan.

Front End Development Guidelines - Update

Well that was a wild ride indeed! Since release, the front-end development guidelines I posted have gone bananas. Tens of thousands of page views, plenty of GitHub forks and followers, and even a kind word or two. Many thanks to Paul Irish and other figureheads for tweeting about the resource I put together. It really helped spread the word about what I was trying to do, and in turn pulled in some great comments and suggestions logged through the GitHub issues interface.

As we stand, there are currently 8 open issues and I’ve managed to close 20 others.

Some of the most recent changes I’ve made include:

  • Rewriting the section on commenting your JavaScript. My team leader at my previous employer put this one together when he was proofing my work, and slipped it in. A lot of people have flagged it as a massive WTF and it has seen been replaced.
  • I’ve merged in a range of spelling and grammatical changes. What can I say? Me dun speak english good-like.
  • Added the new “micro clearfix” to the section on clearing floats.
  • Added a section on commenting CSS blocks (handy!).
  • Further discussed whether remapping “this” to “self” is a good idea.
  • Added section IDs for deep linking (but no way to easily do so, as yet).
  • Removed the Gotham web font, which I embarrassingly left in, ignoring my own advice.

Thanks for reading and contributing, be sure to send through any further suggestions using the issues interface or via my email address listed on the right.

My role with my last employer involved creating websites, applications and widgets with front end technologies like HTML, CSS and JavaScript. Other parts of my job included code reviewing commits and running training exercises to spread the knowledge around. When I handed in my three weeks notice, they were quick to ask me to write up guidelines on the best way to write maintainable, clean and accessible code. What follows is a GitHub hosted document, allowing for revisions, forking and issue logging - a concept I &#8220;borrowed&#8221; from the great resource JavaScript Garden. Considering my knowledge is all gleamed from many years of reading Hacker News and following Twitter links, it definitely has holes. I am completely self taught in that regard. So although I can&#8217;t vouch for the accuracy of all the information, hopefully you can log any corrections or raise any questions via the issues interface. View Front End Development Guidelines.
Pop-upView Separately

My role with my last employer involved creating websites, applications and widgets with front end technologies like HTML, CSS and JavaScript. Other parts of my job included code reviewing commits and running training exercises to spread the knowledge around. When I handed in my three weeks notice, they were quick to ask me to write up guidelines on the best way to write maintainable, clean and accessible code. What follows is a GitHub hosted document, allowing for revisions, forking and issue logging - a concept I “borrowed” from the great resource JavaScript Garden.

Considering my knowledge is all gleamed from many years of reading Hacker News and following Twitter links, it definitely has holes. I am completely self taught in that regard. So although I can’t vouch for the accuracy of all the information, hopefully you can log any corrections or raise any questions via the issues interface.

View Front End Development Guidelines.

Aristo 1.1 Released

I woke up on Saturday morning to find about 2,000 new visitors to my blog and 22 email notifications of new Twitter and Tumblr followers. It turns out Aristo made it to the front page of Hacker News for the second time in it’s short lifespan, and in turn was tweeted about by some popular Twitter users.

HN users had some great suggestions in the comments section, and most of those have been implemented and are now live on the GitHub repo and demo page. The list of changes include:

  • Styled basic input and textarea fields.
  • Button hover effects now fade with CSS3 transitions (Webkit, Firefox & Chrome).
  • Put user-select:none; on buttons to give them a more native feel.
  • Prevented empty button links from sending you to the top of a page (confusing when in a modal).
  • Fixed auto-complete versus slider z-index bug by hard coding z-index. This may cause other problems, so be on the lookout.
  • Fixed background bleed through bug for the progress bar.

I hope this keeps you satisfied for a while :)

 

Aristo 0.7 Released

The power of the GitHub community has proved itself once more! I’ve been far too busy of late to post any Aristo updates, so two particular members have come through with the goods. Massive props must be delivered to Muhammad Lukman, who both raised and solved four issues with the Aristo theme, and usual suspect Stefan Livens for merging the fixes in and updating the demo page.

Most importantly, I have decided to manage pull requests and forks entirely via the web interface!

Ego Wish List

The Ego application is brilliant. I think it works really well on the iPhone - presenting a great design and simple functionality that has earned it a spot in my top 4. I still haven’t had the chance to play with it on an iPad, but I think the extra functionality delivered in the form factor would be wicked too.

Despite its brilliance, I’d still love to see a few more metrics added.

Dribbble Followers
Pretty simple. You could alternatively have the number of shots you have posted, likes you have received (total); but I think the total number of followers would stroke the ego enough.

Forrst Followers
Similar deal here, I think just the one metric of followers would get the job done.

AdSense
The AdSense metrics would definitely need multiple views in the typical Ego fashion. Today. Yesterday. This Week. This Month. This Year.

GitHub
There’s also the potential of multiple views with GitHub. Personal followers. Branch followers. Branch Issues/Bugs. Forks. Wow, actually quite a lot when you think about it. Branch followers would probably be the highest priority for me.