Beer, Photography, Code, and the Rest

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.

we could alter this after the fact with a script but just wanted it to work without having to shoe horn something after the database is created

SxSW Day 5 - Interfaces Accessibility & Superheroes & Breaking the Mold With Meaningful Desgin

Thu, 14 Mar 2013 12:07:59 -0400

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.

Good design needs constraints

SXSW Day 4 Intentionally Dealing with Responsive Design A designer/developer is a unicorn a...

Tue, 12 Mar 2013 10:40:24 -0400

SXSW Day 4

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

AI will become greater with more virtual with very specific needs. Along with wearable devices that collect more data for intent to better understand the user.

SXSW Day 3, (Mobile Web Apps Suck - Workshop)

Mon, 11 Mar 2013 10:21:33 -0400

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

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

Random SXSW Day 2 Notes (Prototype or Die!)

Mon, 11 Mar 2013 10:19:31 -0400

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

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

Random Notes from SXSW 2013 Day 1

Sat, 09 Mar 2013 03:07:02 -0500

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

http://webtypography.net/talks/sxsw13

Correct setup for iCloud in Windows 8 Mail

Tue, 05 Mar 2013 20:03:41 -0500

Correct setup for iCloud in Windows 8 Mail:

From the link

youremail@me.com

imap.mail.me.com port 993 With SSL

smtp.mail.com port 587 No SSL

Outgoing requires authentication

Use same username for incoming and outgoing mail.

AngularJs currency filter with no $ sign

Tue, 05 Mar 2013 15:03:06 -0500

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

AngularJs, Json.Net, and the $type property

Mon, 04 Mar 2013 16:18:01 -0500

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

Now Angular is happy and Json.net is happy!

AngularJS directive for currency that adds +/- classes to the element

Tue, 26 Feb 2013 16:04:02 -0500

AngularJS directive for currency that adds +/- classes to the element:

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

Unknown (to me) .net framework gem - TextInfo

Wed, 06 Feb 2013 15:18:23 -0500

Unknown (to me) .net framework gem - TextInfo:

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”

.net framework and msdn once again to the rescue.

Tug

Fri, 25 Jan 2013 18:57:09 -0500

Tug

Microsoft Lync wants to use the OC_KeyContainer_emailaddress keychain prompt

Tue, 08 Jan 2013 07:37:17 -0500

Microsoft Lync wants to use the OC_KeyContainer_emailaddress keychain prompt:

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

Deleting the OC_KeyContainer files allowed Lync to start back up again and create a new one.

Why does VS2012 always check out the sln when opening it?

Fri, 04 Jan 2013 13:18:43 -0500

Why does VS2012 always check out the sln when opening it?:

This explains why whenever anyone opens up a solution they automatically check out the file with no changes.

Bug Hunt: Always use radix in parseInt()

Wed, 19 Dec 2012 09:26:56 -0500

Is the bug valid?

Yesterday we received a bug report that one of our text fields were defaulting to 00 when the user enters in 08 or 09. Confused as to what could be causing this I fired up my various browsers and iOS simulator and was not able to duplicate the problem.

The Code

Looking at the code it was something like this:

   1: var num = $(this).val(), //val() would be "08" or "09"

   2:     theInt = parseInt(num);

Nothing seems out of the ordinary and everything is working correctly. What could possibly be happening? From there I started spinning up older versions of iOS5 and android. Bam, the bug presents it self and is easily reproducible.

Debugging

Next up I wanted to figure out what the heck could be going on, so now the code morphed to the following.

   1: var num = $(this).val(),

   2:     theInt = parseInt(num);

3:

   4: alert(num); //alerts "08"

   5: alert(theInt); //alerts 0

Well it looks like we found our problem, parseInt() is some how behaving differently depending on the version of the browser, but why?

To the google!

After a few searches I soon smacked my head and said, darn it I forgot the radix! The radix specifies which numeral system to use when parsing the number. But why does it work correctly in new browsers but incorrectly in older ones? Well after a bit more research I found this blurb on mozilla

ECMAScript 5 Removes Octal Interpretation

The ECMAScript 5 specification of the function parseInt no longer allows implementations to treat Strings beginning with a 0 character as octal values. ECMAScript 5 states:

The parseInt function produces an integer value dictated by interpretation of the contents of the string argument according to the specified radix. Leading white space in string is ignored. If radix is undefined or 0, it is assumed to be 10 except when the number begins with the character pairs 0x or 0X, in which case a radix of 16 is assumed. If radix is 16, number may also optionally begin with the character pairs 0x or 0X.

This differs from ECMAScript 3, which discouraged but allowed octal interpretation.

Since many implementations have not adopted this behavior as of 2011, and because older browsers must be supported, always specify a radix.

The key part is that in older browsers when no radix was specified the radix would default to 8, while in new browsers the radix is assumed to be 10.

The Fix

Well since we now know the problem we can easily fix the code to look something like this:

   1: var num = $(this).val(),

   2:     theInt = parseInt(num, 10);

Now the script works correctly on new and older browsers and we no longer have the undesired behavior we had previously.

Building TypeScript in Web Applications

Fri, 07 Dec 2012 08:13:12 -0500

The one thing I failed to mention with the AngularBanking demo application is how do we get the TypeScript files to build during a build of the application.

Well the first part is simply installing the plugin from the TypeScript site.
Unload and edit your web application project and add the following snippet to the BeforeBuild <target/>

   1: <?xml version="1.0" encoding="utf-8"?>

   2: <Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

   3:   <!-- snip -->

   4:   <Target Name="BeforeBuild">

   5:     <Message Text="Compiling TypeScript files" />

   6:     <Exec Command="&amp;quot;$(PROGRAMFILES)\Microsoft SDKs\TypeScript\0.8.1.1\tsc&amp;quot; -target ES5 @(TypeScriptCompile ->'&quot;%(fullpath)&quot;', ' ')" />

   7:   </Target>

   8:   <Target Name="AfterBuild">

   9:   </Target>

  10: </Project>

Once you reload your project your TypeScript files will build along with your web application and you will get your JavaScript files your application relies on each time.

Also the AngularJs demo has been updated on github.