Posts

Showing posts from 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 yo…

Windows 8 Pro in Screenshots

Image
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:


S…

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 s…

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:
Your browser does not support the 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 w…

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 def…

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. So…

My Approach To Design

Image
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 tableI 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…

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…

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

Image
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…

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 forma…