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’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: 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’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’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  
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’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…  
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 “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.
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 “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.
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 :)