The Touch, end of mouse?

I have been working a lot with Ipad and mobile sites these days. Mostly trying to create and redesign optimized experience for Ipad users on the existing web page without forgetting mouse. At the same time I have tested and sandboxed some apps for Windows 8 while looking into Microsoft approach to touch interfaces on their new Metro UI.

Touch is definitely the new black on interface design. Like the Director of Program Management for the Microsoft Windows User Experience Team Jensen Harris mentioned on his presentation in Microsoft’s BUILD Windows conference couple of weeks back. Harris was focusing on touch-first experience and then comes the rest which by the way resamples what Luke Wroblewski talked while back on mobile interfaces . Harris said that in coming years all screens will be touch enabled.
It will be like a screen without touch is like a computer without Internet connection. If you are interested how Microsoft is focusing for Metro UI in the future, I highly recommend watching this presentation to anyone who works with UI also check out Designing Metro Style Apps.  No matter if you are Web, Windows, iOS or Android developer.

Windows 8 Start Screen

Maybe today it feels strange to think if stationary PC or laptop would have touch capabilities. It is somewhat unnatural that you reach over your laptop to the screen to move things around and then back to keyboard. But is it really so weird behavior. It is more natural than reaching your mouse, right?

Metro is user interface design-language that is heavily type based, think text, and which uses design principles of classic Swiss graphic design. Metro design excludes traditional icons, superfluous graphic and window chrome and it puts actual content up front. It uses large and clean typography and pages with lateral scrolling. Result is clean, sleek user interface that gets out of the way.

Metro UI and Touch behavior requires Windows developers to re-think their applications. How to remove all the chrome from the app is going to be a challenge to anyone who needs to develop on Windows 8. How does a developer re-design Microsoft Word -ribbon to touch? Should one go Apple way and remove from Ribbon those 95% of functionalities that is not used? This is not what Microsoft is used to do. Microsoft strength and burden has been always backwards compatibility and more-is-more features. Now the only way to go forward is to simplify so the software program can become an “app”. It is true that there is still Windows 7 alike Desktop environment but for future developers, if developer wants to develop app that can  be used on all MSFT environments they need to forget desktop and go to Metro style. The Desktop in the future is for heavy users.

“When we were an agrarian nation, all cars were trucks. But as people moved more towards urban centers, people started to get into cars. I think PCs are going to be like trucks. Less people will need them. And this is going to make some people uneasy”.
– Steve Jobs at D8 in 2010

I was really impressed when I saw where Microsoft is heading with Windows 8. Honestly I though the game was between Apple and Google but it is nice to see Microsoft is still on the game.  It is not as “lickable design” as iOS but it is definitely something new and for Microsoft defense it is just a developer preview. Microsoft is inviting developers around the world to develop on it and with their huge developer eco-system there will be innovative applications coming out in coming months. Also, if you take consideration all the effort and help from Nokia on handsets and gaming community on XBox this unified OS experience will take Windows somewhere into completely new level.

WebKit Radial Gradients (Circle gradient)

WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation.

The new syntax has four gradient functions:

  • linear-gradient()
  • radial-gradient()
  • repeating-linear-gradient()
  • repeating-radial-gradient()

On this post I am exploring radial implementation, radial-gradient() and repeating-radial-gradient().  Notice that there is also linear gradient which is most likely be used  more often than the radial.

Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.

A gradient specified using circles is called a radial gradient. You specify a radial gradient by setting the type to radial and specifying a start inner circle and end outer circle. Each circle is specified by a center and a radius. The color values change gradually from the circumference of the inner circle outward to the circumference of the outer circle.

Examples

-webkit-radial-gradient(circle, white, black);
-webkit-radial-gradient(circle, white, black);


-webkit-radial-gradient(center, 20px 20px, white, black);
-webkit-radial-gradient(center, 20px 20px, white, black);

-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);
-webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%);


-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);
-webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);
-webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px);

See working demo here if you are running latest WebKit (tested on WebKit Version 5.0.3 (6533.19.4, r77734))

References

VMWare Fusion Keys Reference

I just recently bought new work laptop and setup Windows 7 on it. One thing that takes time to get used to is differences in keyboard shortcuts. I have put here some of the basic commands mainly for my own reference so I wont forget.

Reference

PC
Macintosh / Fusion
Ctrl+Alt+Del
To send Ctrl+Alt+Del to a virtual machine:
  • From the Fusion menu, click Virtual Machine > Send > Crtl+Alt+Delete.
  • If you are using an external PC keyboard, press Ctrl-Alt-Delete.
  • On a full-sized Macintosh keyboard, press Control-Option-|X>. The |X> (Forward Delete) key is below the help key.
  • On a Macintosh laptop keyboard, press Fn-Ctrl-Option-Delete.
Delete
The Delete key on an Apple keyboard is actually the backspace key to all other operating systems. To send the PC Delete key to a virtual machine:
  • From the Fusion menu, go to Virtual Machine > Send Key > (Forward Delete)
  • On a MacBook or MacBook Pro keyboard, press Fn-Delete.
  • On a full-sized keyboard, press |X>. The |X> (Forward Delete) key is below the Help key.
Insert
To send the Insert key to a virtual machine:
  • On a full-sized Mac keyboard, press the Help key.
  • On older MacBook or MacBook Pro keyboards, press Fn-M. Newer MacBook models do not support Fn-M, and mapping the Insert key (to any convenient key combination chosen by the user) can be achieved in Fusion’s menu bar under VMware Fusion > Preferences > Keyboard & Mouse > Key Mapping.
Print Screen
To send the Print Screen key to a virtual machine, press F13 on a full-sized Mac keyboard.
Alt-Gr
To send the Alt-Gr key to virtual machine:
  • Press the right Option key on a full-sized Mac keyboard.
  • On European MacBook and MacBook Pro keyboards, press the Enter key next to the right Command key.
Notes:
  • This is overridden when Num Lock is used for numeric keypad support.
  • To disable this Alt-Gr mapping, open the file:

    ~/Library/Preferences/VMware Fusion/preferences in a text editor and the line: pref.mapISONumpadEnterToAltGrEnabled = “FALSE”

Selecting multiple list items
  • Press and hold Ctrl-Option, then click the multiple items.
  • Disable the mouse shortcut for the secondary button (see beginning of Resolution, above), and use Ctrl+click as you would in a regular Windows environment.
Num Lock
To send the Num Lock key to a virtual machine (allowing the use of the numeric keypad), press Clear on a full-sized Mac keyboard.
Function keys
  • Press fn + the desired function key.
  • To make the Mac function keys act like regular function keys, and trigger the special functions with fn + the function key instead, go to Apple menu > System Preferences > Keyboard (or Keyboard & Mouse > Keyboard), and select Use all F1, F2, etc. keys as standard function keys.

For all keyboard shortcuts, not necessarily those pertaining to Fusion, see Apple’s Knowledge base article Mac OS X keyboard shortcuts.

Starting to blog again

I have not been writing anything for ages on my site mostly because I have been quite busy with these two on the picture below.

However, now I have decided to reserve some time and start to write some posts again, mostly about technical and business challenges that I face daily in my work while developing solutions in Sitecore and Umbraco. Also, I want to write about application development in general using jQuery and other interesting front-end technologies that I bump into. So, if you are interested about these topics come and check out this blog once in a while and drop a comment.

List of useful websites on the web

I found most of these links from reddit (source) and thought I will share and save it to my blog as future reference. There are many new that I have not check it out as well as many old ones that I had forgotten.

http://www.grooveshark.com – For listening to music.

http://www.printfriendly.com – Makes any page printer-friendly.

http://www.ted.com – Interesting and informational videos on a whole range of topics.

http://www.stumbleupon.com – Finds websites based on what you’re interested in and how other people’s ratings.

http://www.slickdeals.net – For finding good deals/freebies/contests.

http://www.bugmenot.com – Usernames/passwords for sites requiring registration.

http://www.mailinator.com – Temporary e-mail for when you want to sign up for something and not get spammed.

http://www.google.com/cse?cx=003849996876419856805:erhhdbygrma&ie=UTF-8&q=&sa=Search – Google torrent search

http://www.pipl.com – Looking up people based on username, name, email, or phone #.

http://ocw.mit.edu/OcwWeb/web/home/home/index.htm – MIT OpenCourseWare – entire courses, often including lecture videos available for free online.

http://ninite.com/ – Great website to create an installation package of applications for when you’re reinstalling your OS or have just purchased a new computer.

http://www.retailmenot.com – Coupons

http://www.kayak.com – Awesome site for when you’re planning a trip.

http://www.nophonetrees.com/ – Get directly in touch with a human when you’re calling customer service/support.

http://www.scribd.com – Ebook search.

http://www.ovguide.com – Search engine for movies/tv shows.

http://www.tineye.com – Reverse image search.

http://downforeveryoneorjustme.com/ – self-explanatory.

http://www.popurls.com – link aggregator.

http://www.knowyourmeme.com

http://www.gethighnow.com – audio and video illusions.

http://tvtropes.org – “Tropes are devices and conventions that a writer can reasonably rely on as being present in the audience members’ minds and expectations. On the whole, tropes are not clichés. The word clichéd means “stereotyped and trite”. In other words, dull and uninteresting. We are not looking for dull and uninteresting entries. We are here to recognize tropes and play with them, not to make fun of them.”

http://www.meetup.com – Meet up with a local group that share your interests.

http://meebo.com – Web-based chat without downloading the actual client (AIM, Yahoo, MSN, etc.)

http://www.boston.com/bigpicture – Amazing, high-quality, pictures from around the world.

http://simple.wikipedia.org/wiki/Main_Page – Wikipedia – in layman’s terms.

http://opendns.org – Safer surfing. Can block sites and protect your network.

http://studyblue.com – Great site to get notes/past exams for college students.

http://www.whatismyip.com – Tells you your IP address.

http://mp3cut.net/ – Cutting/splitting mp3s.

http://ceevee.com/ – Build/maintain a resume.

http://www.cutmypic.com/ – Crop a picture.

http://www.mygazines.net/ – Magazines online.

http://tinychat.com – Create a chatroom. Has web-cam and microphone support.

http://www.mint.com/ – Money management.

http://www.deviantart.com – For anything art-related. Good site to get wallpapers.

http://www.whatshouldireadnext.com/search – Gives you book suggestions based on books you’ve liked before.

http://woot.com – Posts one good deal per day.

http://www.filleritem.com/ – Finds filler items for Amazon so you have enough to get free shipping.

http://fantasti.cc – aggregates most Porn 2.0 sites

http://labs.google.com/sets – Looking for more parts of a set of words (i.e. Entering Mars, Earth, Venus, Jupiter will yield Saturn AND MAYBE PLUTO)

http://chir.ag/projects/tip-of-my-tongue/ – GOOD LORD MAN WHAT IS THAT WORD. Well now you know.

http://www.whois.net/ – Finding the WHOIS info of a domain

http://www.tastespotting.com/ – Amazing food and amazing recipes with amazing pictures. Go indulge your mental stomach while you plan on indulging your physical one.

http://www.whosampled.com/ – Who sampled what music

http://downforeveryoneorjustme.com/ – Is that website down for every-ah you get it

http://www.synchtube.com/ – Watch youtube with your friends (syncs youtube between multiple viewers)

http://www.livemocha.com/ – Learn a new language.

http://passcracking.ru/ – Crack hashes.

http://www.allrecipes.com – Best recipe site I know

http://tutsplus.com/ – tutorials for a bunch of adobe design programs

http://colorschemedesigner.com/ – useful for website color schemes

http://www.smashingmagazine.com/ – design blog

https://thepiratebay.org/ – While it lasts

http://www.dropbox.com – Free service that syncs a folder on your computer to an online data store.

http://network-tools.com Pings, trace routes, dns lookups, dns reverse lookups, whois (domain name owner details, ip address owner details). A total swiss army knife of uh, network tools.

http://delicious.com/ – social bookmarking

www.gigapedia.org: ebooks (for those hard to find textbooks).

www.metacritic.com : aggregrate movies/films/games ratings from all major critics.

http://pandora.com – Another great free music site. Unlike Grooveshark, you can’t freely play any song you want, but it has a fantastic algorithm for discovering similar music so it takes a lot less effort to set it up to play a wide variety of things I like – no need to pick out lots and lots of songs from the catalog beforehand. Yes, Grooveshark does have that same radio feature, but it’s sorely lacking.

http://www.gutenberg.org – for a transcript of any book written before copyright laws. Includes some semi-professional volunteer audiobooks.

http://www.spanishdict.com – as a Spanish major, I’ve found this to be the best and most complete Spanish-English dictionary if you’re looking for a thorough and clear definition.

http://tvshack.net/ has lots of tv shows and movies for streaming. I use a proxy to get around the hour viewing restrictions that some of the shows have.

http://pixlr.com (fixed) I stopped using photoshop since I found this.

http://www.blindtextgenerator.com/lorem-ipsum – Dummy text generator.
http://dummyimage.com/ – Dummy Image Generator.
http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html – Adobe Flash player configuration.
http://www.reemst.com/calvinandhobbes/stripsearch – Calvin and Hobbes Extensive Strip Search.
http://challonge.com/ – Tournament Bracket Generator.
http://www.doihaveadeadpixel.com/ – Do I Have A Dead Pixel.
http://accidentsketch.com/ – Accident sketching online.
http://www.freemaptools.com/ – Maps you can make use of…
http://radiotuna.com/ – Discover Online Radio.
http://www.gazopa.com/ – Discover similar pictures.
http://errorlevelanalysis.com/ – Image Error Level Analyzer.
http://www.rainymood.com/ – Rainy Mood.
http://subreddits.0fees.net/comment_stats.htm – Reddit Comment Statistics.
http://www.radioreddit.com:8000/ – Reddit Radio.
http://subredditfinder.com/ – Sub-Reddit Finder.
http://www.visca.com/regexdict/ – Regex Dictionary.
http://www.gskinner.com/RegExr/ – OnLine Regex Testing Tool.
http://scr.im/ – Convert your email address into a short, cute and safe link you can share it more safely.
http://showmewhatswrong.com/ – Instant screen recordings.
http://www.subs.to/ – Search Subtitles.
http://www.youtube.com/disco – YouTube Music Discovery Project and Playlist Creation Tool.

http://www.wikimapia.com – Satellite maps with explanations, tags, links

http://www.marinetraffic.com – Every ship at sea right now

http://www.radioreference.com – Live police & emergency scanner traffic
http://www.flightaware.com – Every IFR airplane airborne in US airspace
http://www.liveatc.net – Live Air Traffic Control radio monitor
http://www.airliners.net – Photos of almost every aircraft in existence
http://www.the506.com/nflmaps – NFL games broadcast map
http://www.gifexplode.com – separate an animated GIF into its component images

getmac

hihi…

I did not know Windows had “Get Mac” command.

Windows PowerShell
Copyright (C) 2009 Microsoft Corporation. All rights reserved.
PS C:\Windows\system32> getmac
ERROR: Out of memory
PS C:\Windows\system32> getmac
ERROR: No more threads can be created in the system.
ok… it’s actually command to Find MAC Address nothing to do with Apple. Just something that I have not notice before… ok… I stop writing this nonsense and go back to work.