Saturday, December 29, 2012

IE10 does not have conditional comments anymore

Probably old news for many of you. Internet Explorer 10 will totally ignore your code similar to this one:

   <!--[if IE]>
  
  <![endif]-->

After some search I found the topic on stackoverflow.com: http://stackoverflow.com/questions/9900311/how-do-i-target-only-ie10-for-certain-situations-like-ie-specific-css-or-ie-spec/14087321#14087321
You can also read my reply there.

Why do we have to address it? The problem is IE10 has its own rendering engine which differs from other browsers, and some specific css styles still require special handling in case of IE10.
The solution for css styles will be using document.documentElement - the root element associated with any document, documentMode property of IE, which says how IE interprets and renders the document, and @cc_on Statement, which activates conditional compilation support in JavaScript in IE.
You include the next one-line script inside of head tag of your html page before your css link.


Then in css file you specify your styles as descendants of "ie10" class:

.ie10 .myclass1 { }

And voilĂ ! - other browsers stay intact. And you don't need jQuery. You can see the example how I implemented it here: http://kardash.net.

Friday, October 5, 2012

Windows 8 Pro in Screenshots

Two days ago I decided to take an advantage of BizSpark and installed Windows 8 Pro on my Lenovo laptop. My impression:
User Experience which is blowing your mind! I haven't seen so much innovations in one product since the first iPhone from 2007. It's totally new approach what you can do and how you can use Windows. Suddenly it's fun again.

Screenshot #1. New concept of a start screen with Modern (Metro) UI applications from Application Store. Live tiles, Charms, new typography and semantic scaling... Possibility of customization are almost infinite. Yes, like those which are on Android or iOS. Of course, there are not that many applications in the store yet. Official launch of Windows 8 is still in the future: October 26th.


Screenshot #2. Email application supports all my email accounts on Google, Yahoo, Hotmail and even German GMX. If you want to configure any application, just press Windows key + C on the keyboard, and you see these common UI elements called Charms:


Screenshot #3. Window 7 desktop is here as well. On this part of Windows 8 we can install all your "old" Windows XP/Windows 7 application as we did before. And Internet Explorer 10, which supports as much of HTML5 as it possibly can be.


Screenshot #4. Microsoft Word 2013 Preview. Brand new look and feel.


Special thank you to Matt Harrington (@mh415) for his UX session last night in Microsoft store in Stanford Shopping Center. Windows 8 is cool.

UPDATE:
Some important key shortcuts in Windows 8 Pro:

WinKey+C - show Charms, including settings of the application.
WinKey+Z - shows options you can do with the current/selected item on the screen.
Alt+F4 - close any application. This is as old as Windows itself.
WinKey - switch between Old Windows Desktop and New Start Screen.
Alt+Tab - switch between applications including Old Windows Desktop applications.
WinKey+Tab - switch between Windows Store only applications (in another words: Full Screen Applications) and New Start Screen. It will give you an option to switch back to Old Windows Desktop, but will not show opened applications there, i.e. Old Windows Desktop is treated as a Full Screen Application.
WinKey+X - brings Administrative Tools menu in right lower corner of the screen. Very useful.
WinKey+E - Explorer.
WinKey+R - Run command.
WinKey+D - Old one. Brings Desktop with minimized apps.
WinKey+L - Old one. Lock the system.
WinKey+F - Find Files.
WinKey+Print Screen – Put a PNG in the Pictures folder.

These are IMHO essential. The full list of Windows 8 shortcuts is here:
http://windowsteamblog.com/windows/b/windowsexperience/p/win8_keyboard_shortcuts.aspx

Friday, September 14, 2012

Today's limitations of HTML5 video support


It's hard to believe but there are still some.

At least two conditions/limitation when your browser will not play HTML5 video, EVEN if you think you have a decent one:

1. Safari for Windows only supports HTML 5 video if Quicktime is also installed.
2. No support in Internet Explorer prior version 9. (Probably it's not an issue, unless you are inside of corporate network and extremely conservative IT department.)

My test page for you (created by Easy HTML5 Video Converter) to test HTML5 support in your browser. If your browser supports HTML5 video it will play: http://files.kardash.net/jslab/html5video/

--------------
Below are links about HTML5 video to consider:

http://www.808.dk/?code-html-5-video - HTML 5 video with table of browsers compatibility.

http://easyhtml5video.com/ - converter of your video format to any of HTML5 supported formats: OGG (Theora video codec), MP4 (H.264 video codec), WebM (VP8 video codec), and Flash MP4 (for fallback to Flash if HTML5 video is not supported).

http://videojs.com/ - JavaScript and CSS library that makes it easier to work with and build on HTML5 video. This is also known as an "HTML5 Video Player"

https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements - Media formats supported by the HTML audio and video elements.

Thursday, September 13, 2012

Video in HTML5: no support in Safari for Windows

All modern websites show videos. But before HTML5 it was plugin based functionality, such as Flash, Quick Time, or ActiveX. Today there is a better technology: HTML5, supposingly supported by all popular browsers. HTML5 is not new in the tech world, and provides a standard: <video> tag.
I have tested all my five browsers on Windows 7 desktop, and four of them - Chrome, Firefox, IE 9 and Opera - show video without problems, though UI controls, such as play/pause button, volume and full sreeen, are slightly different. What I am having problem with is Safari. Yes, Apple Safari 5.1.7. Safari is always described as a browser with native HTML5 video/audio support, but this is in fact not true.
Try to open this page, which consists of a video tag:
 

And Safari will give you "Your browser does not support the video tag." Another official link will render black rectangle in Safari.
Probably the most valuable corporation in the world doesn't care any more in promoting web standards swimming in the rays of fame of iphone, ipad and ipod sales?

And then I tested in Safari 5.1.1 on OS X. And video runs without any problems. Voila! Safari on Mac is not equal to Safari on Windows. I also don't have Quicktime. My desktop doesn't need it, having Media Player, VLC Player and K-Lite Codec Pack.

Another thought if you don't have OS X available to test you can always try Adobe BrowserLab. They will access your URL in number of browsers and generate screenshots. At least it will give you idea how your page looks.

UPDATE: Safari for Windows only supports HTML 5 video if Quicktime is also installed.

Monday, August 27, 2012

Five (5) cool new HTML5 text-level semantics elements

HTML5 adds to our web pages the new structural semantic elements like <header>, <aside>, <nav>, <section> and many other, which are pretty awesome. But what even more exciting are the new text-level semantics elements which change text visually without extra (and sometimes complex) coding. Below are the overview of five of them. Unfortunately only Chrome browser supports them in full today. 4 out of 5 work in Opera. Firefox and Safari support fewer, Internet Explorer 9 is on last place, and hopefully this will be changed in upcoming IE 10. Refer to the table of supporting browsers at the end of the post.


1. The "mark" Element


The <mark> tag is used to highlight or reference a run of text due to it's relevance in some other context. You can incorporate this tag into the search results page on your website or blog to enable your visitors to more quickly find the content they search for.


2. The "progress" Element


If you wish to define the progress of any task, such as weight-loss or project completion, consider using the new <progress> tag. You can specify the current and the maximum value.

Your download is 49% complete.

Code for this example:
49%


3. The "meter" Element


<meter> tag define the measurement value in HTML web documment.
Like the <progress> tag, the <meter> tag shows overall progress. You may consider using it on a multi-page survey or quiz, for example.

Your score is (21): F
Your score is (81): B
Your score is(91): A
Percentage meter: 

Code:
Your score is (21): F

Your score is (81): B

Your score is(91): A

Percentage meter: 



4. The "datalist" Element


The new <datalist> HTML tag allows you to create a list of data. Previously, you may have used a drop-down menu without anchor destinations to perform this function. The list appears similar to the text input and you can specify a list of values that appear when the visitor clicks the input. You may use this as a method to allow visitors to select an item from a list in a form. Try to type a car brand from datalist in the input field, e.g. BMW or Volvo:



Code:
  


5. The "details" Element


The new <details> tag in HTML is a handy tag that allows you to define details, such as a copyright notice, without using valuable real estate on your page. When used in combination with the <summary> tag you can show a summary that is clickable to reveal more details. An arrow denotes this section on a Web page.



Your Summary (click to expand or collapse).   Additional details go here.

Code:
Your Summary (click to expand). Additional details go here.

Enjoy!


UPDATE: As of September 5th, 2012 here is the table illustrating the major five browser support on my Windows 7 desktop:


Browser
<tag>Chrome 21.0Opera 12.02Firefox 15.0Safari 5.1.7IE 9
markyesyesyesyesyes
progressyesyesyesnono
meteryesyesnonono
datalistyesyesyesnono
detailsyesnononono

And it's getting better! January 2013 (IE10 on Windows 8, other browsers are on Mac):

Browser
<tag>Chrome 23 Opera 12.12 Firefox 17.0.1 Safari 6.0.2 IE 10 
markyesyesyesyesyes
progress yesyesyesyesyes
meteryesyesyesyesno
datalistyesyesyesnoyes
detailsyesnonoyesno
And if you want to see the comprehensive report of how well your browser supports HTML5 then visit this link: http://html5test.com/.

Thursday, August 23, 2012

Is it a problem of objective, or shoud UX designer know how to code?

Communication, understanding, and right message are very important from the beginning.

What I learned: have a strong and clear objective. Deliver it to right people.

Preface: I applied for UX Designer position in a large company. Then was given a call from HR, and during the conversation I mentioned that, yes, I can write the code on JavaScript. Follow up was the scheduling of a phone interview.

Phone ring… I was asked to open a link with some code editor window in browser. And the first question on the interview, which apparently appeared to be a strictly technical and coding interview, was:

- Are you familiar with JavaScript? Ok, write the code to implement event handling in JavaScript as if no implementation of event handling existed in JavaScript.
- Uh, what? What exactly in your mind?
- I want these two functions:
function addEvent(element, eventType, callback)
function fireEvent(eventType)
- Ok, we can create our own object and make these two functions be a public methods. Something like this:
function eventReadyObj() {}
eventReadyObj.prototype = {
    addEvent: function(el, eventType, callback) { },
    fireEvent: function(eventType) { }
}
var ourObj = new eventReadyObj();
But what exactly do you want me to do?
- I want this two:
addEvent(document.getElementById("foo_obj"), "foo", myEventHandler);
fireEvent("foo");
- I don't understand.
- [short tempered] What were you thinking applying for this position? If you not comfortable to program it's a wrong position for you. Good bye.

End of the interview and the story.

UPDATE: Found it!
AddEvent() solution was posted by Dean Edwards in his blog in 2005. http://dean.edwards.name/weblog/2005/10/add-event/.
This solution is the answer to the potential problems using addEventListener and attachEvent (in IE), including, among others, a potential memory leak, or unexpected results, due to their conceptual differences.
Dean Edwards is the guy who has created object oriented JavaScript framework, and made JavaScript his hobby and passion of his life.
But, seriously, why we have to understand how to invent a wheel? Today all major JavaScript frameworks, jQuery for instance, are resolving it very well.

Thursday, August 16, 2012

My Approach To Design

Here is my objective of what I do designing things, what makes me creative, productive, and helps to deliver an awesome result:

  • I am seeing myself as a pixel perfectionist with developer/technical background, and with the ability to understand the intersections of disciplines from multiple perspectives bringing the big picture to the table
  • I approach design with a simple, fun, and intuitive mindset.
  • I enjoy conceptualizing and designing clean interfaces.
  • I love simple, usable interfaces and appreciate the hard work that goes behind creating them.
  • I love to see my work come to life in front of a large audience.
  • I subscribe to the Less Is More (minimalistic) design philosophy.
  • I solve complex problems and drive company’s products experience forward.
  • I design simple experiences that delight users.
  • I am taking business requirements and translating them into customer experience requirements. I visualize them.
  • My goal is true innovation to help end users with sincere empathy.

Design is an iterative process intended to ultimately improve the quality and functionality, where the needs, wants, and limitations of end users of a product are given extensive attention at each stage.


Wednesday, March 14, 2012

Typical Senior Frontend Developer position

This is a typical example of the UI engineering requirements. They are great. Typical for 2012 in its manifestation. It's a classic.

About You

Your proven track record of building amazing things speaks for itself.  You are passionate about creating extraordinary web experiences by writing beautiful code. You have extensive experience with JavaScript, DOM Scripting, CSS and semantic HTML and have strong debugging abilities across all major browsers.  You've worked efficiently in large JavaScript codebases and know how to keep the code modular and loosely coupled.  You are comfortable thinking full stack and moving around the codebase as necessary to get the job done, including interfacing with RESTful APIs and implementing supporting mid-tier code in Java.

The Role

The clean, intuitive, and beautiful user interface you will build will play a critical role our user experience -- allowing users to navigate through data and visually manipulate massive data sets to gain new insights and also to share and tell stories around their data.  You will be building core frontend components of a fast, scalable, complex web application (HTML5, CSS, JavaScript) using libraries and frameworks (e.g. jQuery, MooTools, Closure, Dojo, YUI).  You are not just someone that mindlessly converts Photoshop files to HTML pages, you are an an integral part of our product/engineering group helping to define, design, and develop new features.
Tags: HTML5, CSS, Javascript, Closure, jQuery, Dojo, Prototype, YUI, DOM Scripting 

Saturday, March 3, 2012

What is the real purpose of the programming assignments? Do they serve a mere purpose?

I found it! The code written in February 2010 for the company called kaChing, later - WealthFront. So-called kaChing hired a recruiter - Dane Santos, who contacted me through linkedin on Saturday morning, and insisted I cancelled my plans for the weekend. Instead, he said, I should not miss this great opportunity and waste spend a weekend prototyping a Widget for kaChing. I agreed. And I wrote the code. And I spent a beautiful weekend day not on the beach playing with children, but in front of the computer. And I sent my code back to Dane Santos. And this is a feedback I have received "from kaChing" through Dave:
Regretfully, kaChing will not be moving forward with you. 
Here are a few technical comments they shared with me on your code exercise:
- update is triggered by button click instead of form submit, so Enter doesn't work
- document.forms isn't as robust or as simple as using an id on the text input
- arrow uses an img element instead of background-image
- arrow is stretched by browser because dimensions are wrong (8x7 instead of 7x8)
- not using a table to display tabular data (his div/span layout fails for some data values; try GOOG)
- quote box has a fixed height, so description can get truncated and even partially spill out beneath
I was shocked. One part of the feedback was simply false, and other - just not part of the requirements.
Yes, it featured table less design, background-image styles to render the arrow on the meter properly, and javascript to the extend to meet the assignment requirements.
Basically, what I've got back is: code is not "robust" enough! Hey, dude, thank you for your code, it sucks!

I really-really would like to know the people who I work for. Before coding for them for free. It's just another lesson.

And here is the widget (I don't have an access to kaChing API, so YHOO ticker is hardcoded now):





Friday, March 2, 2012

StumbleUpon frontpage prototype assignment

It's time to update this blog again. It's been a while. I completed a range of small assignments, which don't worth to be even mentioned. A lot of HTML, CSS, ExtJS, Prototyping and Photoshoping. But here is the one interesting, which proved to me the importance of HTM5, and showed how much development can rely on frontend, how much processor work now is performed on client's browser, and which direction UI technologies are moving.

StumbleUpon contacted me for frontend position, and gave me an assignment. I did not express too much enthusiasm professionalism motivation aptitude to work in this cool fast paced San Francisco shop, I guess. I completed the assignment, and never heard from them again.
Here is the result of the assignment: http://portfolio.kardash.net/StumbleUpon/.
Demo prototype of StumbleUpon frontpage.
HTML is very simple. Utilizing semantics of HTML5, tags such as <header>, <nav>, <aside>, <section>, <footer>. All the formatting is done by css files. Special condition for lower than 10 versions of Internet Explorer which do not support new set of HTML5 specs tags:
 
   

I used jQuery as a basic JS library.
What is really cool about this demo page is that nothing is hard coded. I mean all the content is taken from JSON-like structure located somewhere else. For the demonstration purposes, it's sucked from this javascript file: http://portfolio.kardash.net/StumbleUpon/demo_data.js.
Styles, text truncates, icons - everything was carefully detailed and polished.
Primary Content Block, Secondary Content Block, Followers section - they all are just empty placeholders in HTML!
<!-- Main stumbles go here -->
<!-- Favorite topics go here --> 
<!-- Followers avatars go here -->

Another cool thing is sorting by Views, Title, Category of the data taken from the data.js above file. Pure javascript implementation. Quite a work was done here: http://portfolio.kardash.net/StumbleUpon/demo_su.js.


These were StumbleUpon requirements.

It's a history now.