Beer, Photography, Code, and the Rest

Angular Seed – Good starting point for an angular project

https://github.com/angular/angular-seed

Egghead.io – Tons of videos about AngularJs

http://egghead.io

AngularJs – the source

http://angularjs.org

Angular UI – components for UI items in Angular

http://angular-ui.github.com

ngModules – popular modules for AngularJs

Revised scroll directive that supports IE8

Calculate Offset

Scroll directive

In bootstrap.css

We decided to use DateTimeOffset or DateTime2 as the datatype for our date fields in Sql using Entity Framework Code First.  Sounds simple enough should not cause any problems right?

WRONG!

The default of DateTimeOffset and DateTime2 has a precision of 7 digits for milliseconds, but ECMAScript only supports 3 (webkit does 5) digits for milliseconds.

See this example with AngularJs

http://jsfiddle.net/markcoleman/8UyTU/

The time is completely wrong.

Changing the time stamp

2013-03-18T15:29:22.2001801-04:00 <-- Does not Work

2013-03-18T15:29:22.20018-04:00 <-- Works

Code First

Try the Column Attribute

Looked promising you can specify a datatype, so I tried datetime2(2) and datetimeoffset(2) no dice as for some reason it did not recognize the data type with the (2), taking off the () would change the schema to a datetime2, but the default precision for datetime2 also is 7.

Global Conventions

We could create a global convention to change the precision of the datatype to handle the problem.  Nope, conventions existed in EF5 but were pulled before it went live.  EF6 has conventions but that is currently in alpha.  

Fluent API

This could work but we would need to always remember to adjust the precision of our fields via the fluent api for any new field we wish to have precision.  This would work but just seems like a giant pain and potentially prone for further bugs down the road.

Bye bye DateTimeOffset/DateTime2 and welcome back in DateTime

So in the end we just went with DateTime which will just work and requires no additional configuration.

SXSW Day 5

Interfaces, Accessibility & Superheroes

One out of seven of the world’s populate has some form of disability

In the US 15 and over 21.3% have a disability, People over 65 49.8%

Regulations and Guidelines

1990 ADA

1998 Section 508

1999 WCAG 1.0

2008 - WCAG 2.0

2010 - All video needs captions

Superhero Checklist

Overcome adversity

fight for good

adhere to principles guidelines and laws

use existing infrastructure in new ways

use innovative technology

look great in a cape

Four principles of P.O.U.R.

Perceivable - Providing alternative text on images, captions or transcripts for video and audio, good color contrast, avoid marques or movement

Operable - providing access to navigations and controls through alternative means e.g. tab  Don’t make buttons too tiny

Understandable - Content is clearly and logically presented.  Wording should be simple and concise.

Robust - semantic markups, validated code, responsive design

Basic Elements of Accessible Design

Can my audience understand it

how can the platform help my users understand?

does the platform suggest particular usability patterns

How difficult is it to learn? (learned behavior vs established patterns)

Legibility

Hierarchy - Order Size and Action.  Example would be a traffic light 

Iconography - Simplicity is key.  make sure to always name things that make sense and also always to use alt text on the image.  If you use sprite sheets make sure to always include title or alt text on the element.  Empty elements with a sprite sheet causes problems for screen readers

Color and Contrast - Hue chromaticity saturation value contrast.  Color blindness affects approximately 8% of males and .5% of females.  Never use yellow with white type or yellow type with while background.  Munsell color system

Typography - Font, size, weight, uniformity, contrast.  Spacing between lines is very important.  Left aligned text is ideal, center align is hard to find the next line, and right align should be avoided by all costs. Geometry of font is important geometric typography is usually easier to read.  If you squint and can not decern the letters it should be avoided.

Sound - use in conjunction with visual cues, differentiated between alerts, integrating sound as responsive feedback.

Touch and Haptics - Haptic feedback to indicate state of error or completion.  Touch to invoke action.

Exercise with turning on voice over

Our phone gap application does not work at all when it is turned on.  Mobile website did a bit better but need to title the input text boxes.

Common built-in features

increase text size

text to speech

pinch and zoom

Assistive Technologies and services

screen readers

screen magnifiers

alternative keyboards

braille output

Advanced interactions

shake your device for help since it might be a sign of frustration from a user.

Ways to improve the application you tested voice over

Add alt and title text to clickable elements.

Increase font-size or at least make it adjustable

Figure out what needs to be done to make the application accessible.

Thinking outside the box

Breaking the Mold with Meaningful Design

Define a problem that the consumer has to deal with and work through each and every step that solves that problem completely.

Good design is when you have the bar minimum to solve the problem.  Don’t add features just for the sake of it to make it more robust.

When hiring people ask people what they want to learn.  How would you take a thing and make it better.

Only ship when something is ready never rush.  

You need to iterate constantly.

Intentionally Dealing with Responsive Design

  A designer/developer is a unicorn a mystical person that does everything.

As an organization grows the specialization in each field grows.

They optimized the css per page not actually globally.  This allows to optimize for the smallest possible css required for the page.

Performance of a responsive design is very important when designing responsively.  700k on a desktop is no big deal but having to serve the same content for a mobile device is not acceptable.

Only axes for media queries are screen width.

Screen dimensions

orientation

pixel density

Performance hit

CSS Regions and Content Flow 

Not backward compatible

Srcset spec

Not backward compatible

Only for images

Aware.js and Breakpoint.js

Multi class structure leads to harder to maintain code at scale

fewer responsive axes

Conditionizer

Good at managing low and high resolution images

What to use?

Intention.js

allows you to create custom responsive contexts

do things in those contexts

Context.js

an implementation of Intention.js with a whole lot of useful

can easily be extended to add your own.

http://intentionjs.com/pages/about.html

http://www.slideshare.net/everyplace/intentionally-dealing-with-responsive-design

How AI Is Enhancing the User Experience

When AI goes wide things are very broad and might frustrate users because of expectations.

If you go deep you pick a subject and train the machine to understand the subject.  Expectations for the user are that it should only deal with that subject and tends to provide a greater experience.

AI works well if you have collections of data on intent.  Google Now is working well because of all the search history.  If you do not have the data of intent it it AI tries to crawl random history of the user and tends to be noise and produce a lot of notifications.

Future

SXSW Day 3

https://github.com/fisherwebdev/seeds

Versioning your app is not agile or lean

With using apple you only have 100 test tickets, this limits your alpha group.

If you use web you have unlimited alpha

Future Friendly

The age of ubiquitous computing

progressive enhancement is not graceful degradation

mobile first

responsive design

Write once -> run anywhere (debug everywhere)

How many will you support today?

50% - 18 devices

60% - 37 devices

80% - 156 devices

90% - 331 devices

Web Apps that don’t suck

The Financial Times http://www.ft.com/home/uk

Used html5 technologies and hacks to achieve optimal user experience

user prompted to save to home screen and allow additional local storage

Presentation on how to they did it.

http://vimeo/26604635

http://labs.ft.com

In Code

Improve the initial page load with gzip, fewer requests and advanced caching

optimize for touch interaction

Hardware acceleration and throttled event handler calls with requestAnimationFrame

Hit the DOM as little as possible.  Batch DOM reads and writes. Avoid Reflow

Optimize how you then make external requests with ajax, web sockets, and WebRTC

In Design

Try to avoid taking control of scrolling

Don’t assume connectivity or the latest WebKit is going to be there.  Archaic and Unreliable First.

Skeumorphism is fattening, avoid drop shadows, gradients, rounded corners.  If you use animation on you are going to have a world of pain.

Know the limitations of your platform.  Design to the platform you are building for.

DO you really want to spend 4 weeks trying to figure out how to get that feature you saw in a native app working in HTML5.  Is there an alternative?  Is it actually needed?

Optimistic rendering

Render the success even though it might not actually happen.  This gives the user the perceived idea of very fast interaction.  

Responsive Web Design

Not just for small screens

Generally use percentages for width and ems for height

Pixels to be avoided

Thing about haptics (vibration api)

This would allow for the user to know that a button was pressed by giving a bit of vibration that something was pressed.

Only supported by firefox at the moment

  http://bill.hotstudiodev.com/mowebapps/Mobile-Web-Apps-Suck-Part-1.pdf

SXSW Day 2

Prototype or Die (Workshop)

Five questions of 

Do they get it?  Do they understand what is going on in the application

Can they find it? Does the user know that something is on the screen.

Can they do it?  can they preform the function

Do they like it? is it enjoyable experience

Is it useful?  Does the user find that the application is useful

Use wizard of oz type just so people can see and go through the action, the action doesn't need to actually happen.  Instead of taking a picture to capture text use oz to make it appear to happen

Building Prototypes

Fake it with images

Avoid compiling, don’t use any special optimizations.

No semantic html, use very simple elements use <div/> instead of <ul/>

It doesn’t need to be just one prototype.

Don’t adapt, you control the environment prototype for that particular device

Browser extensions, use extensions to inject css and html into an existing site so you don’t have to build up a base

Hacks are encouraged.

Never optimize

Research

You do not need a user study per say just ask people sit down and show them the ideas

If you have about 5 people you can identify about 80% of the usability issues.

Define the research questions, these should come easily from the product questions that you created from the start.

Recruit participants of our actual users since the person making it is not the user.

Ask questions to find people, use twitter/facebook to find the people.  Have questions that are not yes/no.  Multiple choice examples so the person replying doesn't know what you are looking for and you get actual users.

Define study tasks

Don’t ask them what items mean, give them actions that they need to perform.

Make them meaningful

use the users language

describe the end goal, don’t give the user steps give them a goal with the prototype given.  Don't tell them how to perform the action just tell them buy a product don't reference cart, products, check out etc.

Asking interview questions

Avoid leading and biasing questions.  Keep things open ended.   Ask questions that would help describe how the feature would fit into a workflow.

Observation is key, don’t just listen. Ask the user to perform the action not just describe what they did for the action.

Don’t use words that are in the UI, don’t ask them about the share button.  Ask them a question about a real life scenario that they need to perform that action.

Give the participant time to answer.  If you don’t the follow up question would bias the participant to answering the question with the follow up question you provided.  Give the person time to answer and the answer will be open ended.

Ask the participant to think aloud 

The Future is Now - Futuristic UIs with HTML5

https://github.com/mattnull/thefutureisnow-workshop

https://github.com/mattnull/thefutureisnow-demos

SxSw 2013 - Day 1

Lean Forward, Lean Back: Tablet News Experiences

Storytelling in the age of the tablet

Lean forward platforms are phone and tablet, short quick headlines easy to see and read

Lean back, long form and lots of detail, paper or computer

If you put any emphasis on something treat the phone as almost the most important

Tablet is also almost as important

keep navigation down to a minimum

Keep the bucks of information to a minimum so people do not get overwhelmed.

Design for the tablet, design for the eye, touch, and finger.

The tablet experience should almost be like a pop up book.  When taping on things things should happen so the touch does something.

The tablet isn't just meant for a photo and to turn the page.

After 6pm is the time when you will find the usage of the tablet increases (lean back time) computer and phone usage decreases. 

Don't take what is there and convert to a tablet application.  You need to white board and sketch out the application.

EyeTrack: tablet research

You need to have one element that is 5 times bigger compared to the rest.  The eye goes to the photos first.  60% of the design is from the pattern from the eye track research and about 40% creativity.

70% of people like landscape

Make things bigger to draw emphasis to certain materials, that way the user doesn't need to try to hunt for the information.

Pictures say a lot and let people make a decision quicker.

67% used native controls like the back button to get to other information.

Older readers where more methodical 

Younger readers scan more when reading information.

61% of readers touched the screen frequently

80-90 second is the bail out point when someone jumps ship and stops reading

What is next?

Does the tap and reveal of information helps people retain the information.

Awe-Inspiring Web Typography You Can Do Now

Typography does not actually improve comprehension of the content.

Good typography can put the user in a good mood

45-75 characters is widely regarded as a satisfactory length of line for a single column page.

66 characters is about 32em in length.

Use media queries to keep line length in an ideal range.

Use hyphens auto for smaller screens helps increase readability, on larger screens it does not hep so turning hyphens off is the ideal practice.

Use column count to split up short paragraphs, longer paragraphs can cause issue if the person needs to scroll back up to the top.

16px is an ideal size to start out with in a page.

The bigger the text the smaller the line height.

Always good to do a margin and padding reset.  This forces you to do this and think about the items and how they relate.

Treat numbers as letters to make sure they don’t stand out.  If you put dates in the text it makes them appear like they are shouting.

Most fonts come with this number formatting backed in as part of CSS3, you can use old style numbers which makes the numbers not stand out.  Might have to change your type face to one that supports this features.

If you use acronyms, use c2sc capitals to small caps, which is an open font feature.  The capitals are a bit smaller and fatter to make them appear like they lower case letters.

Choosing Fonts

Even if people are not consciously aware of the type they’re 

Does the font have the character set your text requires.

Does it have enough useful weights and styles

Does it have the features you need

Loading Web Fonts

Default text appears as each web font loads

don’t send web font to small screens

fall back

media attribute on an link element to apply conditional css loading

Show text in the fallback font until all the font loads, can use the google web font loader.  This allows you to use the css classes to swap out the font once it loads.

be aware of the device for fall back fonts ios/windows phone 7/android have different fonts installed by default.

Fonts

Shaker

Karminda sans, pairs nicely with karmina serif

april display, works will with april text

april text

table gothic compressed , works well with apirl text

Url

From the link

[email protected]

imap.mail.me.com port 993 With SSL

smtp.mail.com port 587 No SSL

Outgoing requires authentication

We use the Json.Net serializer in our project and while performing a post that deserializes into a derved class we would also serilization exceptions. We enabled Json.net to emit the $type property so this should be working without problems. Opening up Firebug we quickly realized that the $type property was missing from the request, what gives?

Digging in a bit further it appears that for some reason AngularJs was stripping any property that has a $ sign in the name.  Looking further into the source the problem is in the toJsonReplacer function.

The reason this happens is so Angular doesn't accidentally post angularjs ($$hashkey for instance) properties to the backend, but in this case we need the $type property to go along so Json.Net remains happy.

This can easily be accomplished by replacing the default transformRequest function on the $httpProvider.

https://gist.github.com/markcoleman/5085650

A source Description of "REGULAR SAVINGS"

            TextInfo textInfo = new CultureInfo("en-US", false).TextInfo;

            depositProduct.Description = textInfo.ToTitleCase(share.Description.ToLower());

Using TextInfo

Turns it into "Regular Savings"

I ran into this issue yesterday and after a quick google the answer was found, archived here for my own knowledge.

From the answer:

gnomehole replied on 

March 28, 2012

Fixed my own problem... in case anyone else runs into this.

I removed the keychains from my keychain access app, but even though they did not show there were still physical key files in the folder userid/Library/Keychains