iOS UI elements in HTML - part 1
The "detail" button on list views
In this entries series I will show how to make UI elements that look like iOS ones. This includes buttons, tabs and toolbars. This approach is entirely based on HTML and CSS and calls for no image. The point is for these elements to be more lightweight and to display nicely on high density screens which otherwise require multiple images and multiple CSS rules.
The first one is the small blue circle showing when there is more than one action on a list - it usually goes to the "details" view of the element. There is also the small arrow indicating that a list item leads to another panel. Here they are below:
Technical Bookmarks
Programming in a browser
From a developer's perspective, a web application (called a website back in the days) is made of two parts: The server side code and the client side code.
Writing a program for a web browser is something different than writing for a server. Most of the time, web developers do both as client-side programming is seldom enough to build a UI. Both programming are similar in many ways: You write loops, classes, functions, tests, etc. but they are also very different. This article tries to explain the fundamental differences and what it means for the developer.
Samsung's Galaxy S3 was the biggest selling phone last quarter
And it's not good for everyone
As you may have seen all over the web, Samsung's new flagship phone is now the best selling phones of all. At least, it was last quarter. Will it last or not is a completely different story with the recent release of the iPhone 5, but it sure means one thing: they sold a heck of a lot of them!
And I feel it is deserved. The Galaxy S3 is a great phone.
Now, what does that mean for all the web developers out there? Well, it's pretty bad news. Because now we can rest assured that a heck of a lot of people are going to come to our web sites using the Galaxy S3.
Why is that bad? It's bad because you'll find the Galaxy S3 loaded with the stock Android browser. And the stock Android browser is one of the most monumental piece of crap Google ever produced. Ok, I'm overreacting a bit here, but I'm close. The sheer number of bugs will force us to redeem the usage of some features and will complexify our testing by a large margin.
Now, it is not without hope. Mobile devices lifespan is pretty short so one can expect most of these devices to be in a trash can in about 3 years. In the meantime...
You may have heard that Google now releases Chrome as the default browser on the Nexus 7, and you would be right. Google is getting there, and their will to make Chrome the default browser on their latest tablet is probably an indication that Google is aware of the state of their Android stock browser.
Now, brace for impact, and don't assume that the fact that it works on the iPhone means it works on Android. Because it is not true and each webkit browser has its quirks and tricks. And Android's default one gets the crown here.
Drag and Drop in HTML5
Windows 8
Just a week old, already on my nerves
So, they made this new interface. It was once called Metro, but we now are instructed to not call it that way. That's all good. But how do we call it then?
The problem is I want to blog about it. So what?
Let's call it Metro. The hell with it.
So, now that that's settled, let's get started to my first issue about it. Nothing too bad really. It's just... either immature or just fucked up. Here is what I did.
I bought Windows 8 online about a couple of weeks ago. I received it. I am no fan of "upgrades", I'd rather do just fresh installs. Just a habit. So I format my drive, install windows 8 (specifically telling it to do a fresh install not an upgrade). All is well and good. The thing installs, starts up, and I start playing with it.
Let's make a pause now. Because installing almost requires you to open an account at Microsoft. I guess MSN or some other crap. That's the default route. The button "Continue without a Microsoft account" almost looks like you're going to cancel the whole thing if you ever click on it. Ok, let's forget about that.
Now that I've bitched a bit, let's give credit where it's due. During the installation process, Windows shows you how to pop the right menu in. I would never have guessed. That said, it is just the basics of how the damn thing works. I keep finding myself typing on Google (not Bing dammit) "How to shut down Windows 8" and other such basic things. Ah... I see, I was supposed to give credit. Ok. Good job guys.
Now, after a few hours of happy usage it asks for me to Activate my version of Windows. I know, it sounds weird and alien, specially if you're not a windows user. I am (or should I say was?) So I know what it's all about. I click on "Validate Now", it shows some nice "Metro" UI, and I enter my key. And it fails. The error message is just useless. Something like "It failed. Please enter something valid you useless cretin." I don't remember exactly. I try again. Same response. And again, and again.
That's a bit unsettling, wouldn't you say? So I let it go thinking the Microsoft online activation service must be down.
Three days later, Windows bugs me about activation about every quarter of an hour. It is too much. I search "Activate" and ... waitaminute !!! TWO apps show up to activate windows!
The first one is the one I know. Unkind. Not understanding. The second one is the regular non-Metro app. It looks definitely as mean as the first one, but I try it. After all, I've typed my product key about 10 times now, I almost know it by heart. And then, the error message appear: "Your key is valid only for an update, not for a standalone install." Well, if the f**king Metro app would have told me so before !!!!
Hmmmm. This is embarrassing. It's not displayed anywhere on the box. Oh well... I have a Vista license so I'll get it in.
I put my Vista CD in, reformat and before long, I realize that maybe, just maybe, the Vista license number would have been enough. But it's too late, the whole process has started. I wage my options and I decide that it's worth it. I eject the Vista DVD in mid-install, reset forcibly the computer and get the Win8 DVD in the drive. Install restarts. I hope the Vista license key would be good enough.
The thing installs.
Now I know what to do: hunt for the activation app and feed it my Vista license number. I get it. I find it. I open it. And it tells me my product is perfectly activated as of now.
Go figure.
End of rant.
Internet Explorer 10 is out
A comprehensive list of the new css things any web dev should know about
Windows 8 has been released about a week ago now, and it is time to ask ourselves how Internet Explorer 10 (its default browser) will treat our websites.
I will describe here all of the new features in Internet Explorer 10. This article is meant to be concise and focus on the most important features of IE10. If you want the Full Monty, you can get it at the source of all things IE, msdn.
We will focus in this first article on web design - mostly CSS but not only. I will do a follow up with HTML5 and JavaScript later on.
CSS3 Media Query Testbed
the web developer 101
I've written quite a few articles on the css3 media queries and I thought I'd clarify my work on the subject and give a little more info on the context of these articles.
First of all, what I wanted to do was to build a database of the various values one can expect to be supported by the various devices out there. And this is not a simple task, so I did set up a "test environment".
The new iPads and our websites
Now that Apple has announced their iPad lineup for the holidays, it's about time to think how our websites are going to work on it.
The 4th generation iPad looks like it has the exact same screen as the 3rd generation iPad. So nothing should change.
But how to target the iPad mini with media queries?
CSS media queries best practices
You will also find here various tips and advices that I've collected on the web and from experience.
