modisposition

In the last few years web technology has lived through rapid growth and heavy change. We went from frames to table layouts, to column layouts, to responsive layouts. From html4 to xhtml & flash to html5. From heavy server to rich client. From rpc to soap to rest. From sql to nosql and big data. From MVC to MVP and so on. In the following post i want to describe what has become state-of-the-art from my perspective. A Backend is a REST api  Every backend should be seen as a REST api and every controller as another resource. You want to analyze your problem domain, find your resources and design proper paths for them. They become the M in your MVC Architecture. Developing a webapplication first, and adding an extra REST api later on has to be considered an antipattern. If you do make a REST api, you want to consequently use it yourself, making your frontend its first consumer. This procedure allows you to smoothly add different kinds of clients later on, such as a mobile app or e...

A quick one about workers after few tests. Mobile Workers are apparently nowhere in Android devices stock browsers. The only one able to bring workers seems to be Chrome in ICS. As alternative, both Opera Mobile and Firefox Beta work without many problems. About iOS , version 4 does not support workers while version 5 does and quite well. Desktop and Data URI Workers are almost fine everywhere except IE9 ( surpriiiiiiiiiise ) but there is one thing not a single browser does except again Firefox and Opera, accepting " data:application/javascript; " with or without base64 encoded code. On mobile side this is supported again by Opera Mobile and Firefox Beta without problems but on desktop, and not only ... Safari works only with external files while inline data uri are supported only via file protocol WebKit nightly does not support inline data uri even through File protocol Chrome does not support inline data uri neither via file protocol nor online Safari Mobile does not ...

It's time to summarize at least few mistakes or epic fails of the year, hoping the next one will try to follow a better direction. I won't mention anything related to war, politic, Berlusconi, or fashion related stuff, other more prepared than me will do via pictures or posts, all I gonna talk about is the field I am concerned about: web and mobile web oriented technologies and facts. The order is completely random, so grab a mug of coffee, take few minutes, and read 'till the end, forgetting for once tl;dr philosophy ;) The Partially (Multi)? Touch Device Case This has been the most annoying fact of the year: vendors going out with freaking powerful mobile devices with touch or multi touch capable screen/hardware not exposed through the browser and only available for native apps. We are not talking about potentially "dangerous" technologies as WebGL could be, we are talking about the most basic thing able to break 140% the user experience. If a user plays a nat...

I know I am not in the list of speakers page yet, but I am actually in the official schedule already. It's about jsconf.eu and my talk on Sunday morning at 10:45 entitled ... Buzz It For Real ! ... the tortuous road to Mobile HTML5 Apps For the very first time in my life I will not represent just myself during a conference. This time I will talk about few ideas, problems, and solutions, we have faced during the " still in beta " development of our Mobile HTML5 Applications. I will talk about some problem completely ignored by majority of HTML5 developers providing concrete real-world examples, and solutions, over tested code. I know Sunday comes after the first conference party and I hope you, as well as me, won't be too drunk to follow my talk :D Of course a SpeakerRate page was a must have so see you there and enjoy the conference!

this is a quick one I have implemented already in fuckn.es in the create angry memory button logic ... The New Download Attribute Hopefully soon, most updated browser will implement the download attribute in hypertext links (aka: <a> tag) The quick summary is this one: The download attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. The attribute may have a value; the value, if any, specifies the default filename that the author recommends for use in labeling the resource in a local file system. And this is a basic example: click here to <a href="resource234.txt" download="license.txt" > download the license </a> What Is Download For Well, I am pretty sure you have read at least once in your life this kind of extra info beside a link: right click to download the content and "Save As ..." Moreover, I am pretty sure you have created at least once in your server a page ...

When you spend half week of holidays recovering because of a dislocated shoulder, when you come back and spend 1 month recovering after a shoulder surgery, or for any other smaller or bigger shitty situation life could offer us, there is now a customisable way to express our anger: fuckn.es ! 100% Embedded HTML5 Application One project that always fascinated me is py2exe , an utility able to convert whole python applications into a single executable file. This concept is similar in OS X Applications, where everything is transparently contained in a single file. I have tried to reproduce a similar concept with this stand alone web page application where the manifest is hilariously the only external dependency, totally superfluous but necessary for mobile devices. In any case, fuckn.es is a portable, " copy and paste source ready to go ", cross platform tiny app, where rather than #! /bin/sh at first line, the user should simply double click it and run within a (modern) bro...

Update Thanks to @gregersrygg for his link and hints, this is a hackish way to solve the problem apparently cross browser and trustable ... still a hack! // this save one char, how cool is that! !function(document){ // (C) WebReflection (As It Is) - Mit Style // we all love function declarations function redraw() { // clientHeight returns 0 if not present in the DOM // e.g. document.removeChild(document.documentElement); // also some crazy guy may swap runtime the whole HTML element // this is why the documentElement should be always discovered // and if present, it should be a node of the document // In all these cases the returned value is true // otherwise what is there cannot really be considered as painted return !!(document.documentElement || 0).clientHeight; } // ideally an Object.defineProperty // unfortunately some engine will complain // if used against DOM...

Update apparently I am more than late since datauri.com does similar stuff ... oh well, better two options than nothing, right? Thanks @mathias for the update. Right, you may think this is the most useless thing ever but actually embedded content is freaking cool and this is the reason I have created a truly simple page in 3site.eu/base64 . What The Hack Is That Nothing truly special, you choose a file, you get its representation in base64 compatible with inline data url. Best Available Option ... is converting data accordingly with your browser: who better than a browser can know how to understand inline data? Chrome or any other HTML5 Enabled Browser should work offline without problems, but if you are masochist and stubborn, it may fallback into server side encoding. Latter case may be dropped as soon as my cheap space in my cheap website will suffer too many requests so ... did I say already use a decent browser? And that's all folks :)

I don't know about you guys, but I am kinda bored by all these news and tweets against Microsoft ... don't get me wrong please, you may have realized over these years I have rarely been that nice with M$ products, but there is time to complain, and time time to move forward and appreciate, at least, what we have now compared with what it was 10 years ago. IE6 is Death, Long Life to IE6 Back in time, IE6 was the kick ass browser every web developer was dreaming about: tons of security issues to hack in order to have access to any sort of private data (btw ... it's still like that ...) hybrid JScript/VBScript engines with different privileges for each language and none of them based concretely over a standard the predecessor of what we call today Ajax hybrid box model able to understand the worst markup we can possibly imagine so ... wannabe developer friendly (I'll be back to this point later) ... and so on ... with all its glory ... Why NO future IE will be the next ...

My uncle Paolo opened an Italian Restaurant in London, New Barnet, and I have been there few weeks ago to visit him and bring him my congratulations. While this is absolutely not technical, the story I would like to tell you is ... The Real Beauty Of The Web HTML5 is probably the most overrated buzz word since the Web started existing, most likely even more misunderstood than Ajax therm itself. Microsoft promoted his latest IE9 (and please use it if you like IE) behind the sentence Beauty Of The Web ... well, accordingly with Microsoft the web has always been beauty since Chrome, WebKit, Opera, and Firefox became real competitors ... but this is another story. What many did not get about this HTML5, is that it's born backward compatible , which means that as document declaration it can be used right now and there is nothing to wait for ... The real value of HTML5 is the ability to bring newer techniques where available, still being compatible in W3C therms with all those old brow...

... I know, I have said " Happy Holidays " already, but yesterday, after a (annoying) picture upload in Facebook , I had a an idea ... why on earth I should have a Java plugin to perform images resizes on Facebook? Why on earth if I don't have such plugin I have to wait the possibly extremely long upload, up to 10x slower for high quality images, stressing Facebook servers for such " simple " operation as an image resize/resample could be? The FileReader Interface In the W3C File API , I guess part of the HTML5 buzzword, we can find all we need to perform the operation we want totally on client side. The interface is called FileReader , and it provides functionalities to read chosen files from an input node with type file, and that's it: we can even disconnect from the network and keep resizing and saving images without problems . The Canvas Trick Still into HTML5 buzzword world, the canvas element and it's 2dContext.drawImage method is the key to perfo...

Under the HTML5 flag, browsers are bringing to our desktops or devices exciting features such GeoLocation , File , and many others such camera, microphone, system access, etc ... The Problem While this is good from possibilities point of view, the activation approach historically sucks. Flash and it's video or microphone activation shows a dialog that asks the user to authorize media access while browsers are lazily asking via JavaScript the same. The real life scenario we all know is definitively different when a page is using a screen reader, and this article and video about twitter UX should be enough to open our eyes: something is wrong . Solutions If we ever used an Android device, or we have download applications from whatever mobile store, we should be familiar with the installation warnings and confirmations we suppose to read and accept in order to grant application access to anything it needs to work properly. This simply means that once we accept we won't be both...

The most famous and W3 friendly technique to serve an SWF has been described in this excellent A List Apart Article ages ago. Unfortunately there are few problems with that technique, and being Flash Player still widely adopted, plus nobody has created yet a HTML5 friendly Satay method, here I am with this proposal/suggestion. Satay Problems There are at least a couple of problems with the good old Satay method: double SWF request , performed by almost every browser SWF impossible to cache , due necessary queryString for each different SWF so that classic c.swf will be required for each call Object Tag Behavior The Satay method is based over the assumption that an object tag, with a forced type, will help the browser to recognize the SWF. At the same time, if Flash Player is not present or it has been disabled, Satay trick allows us to provide an alternative content inside the Object itself. What we should be aware is that Internet Explorer won't execute any script tag inside ...

This is just a quick post about my last HTML5 sessionStorage implementation for "every" browser and this is the summary: Linear Storage Protocol finally consistent as a stand alone general purpose storage (string, file, request) RC4 Stream Cipher key generation without breaking characters (\x00 not in the random range) Cross Domain Support , if both site a.com and site b.com support my implementation, they will not delete or modify each other domain information optimized boot strap for frames and iframes, the storage parsing and reassignment is performed once and not every time which means zero delay when an iframe is injected or more frames uses the same implementation Finally, few bug fixes and this version is both W3C Draft compatible and cross browser. Known Supported Browsers Chrome 1 and 2, version 3 or 4 should have native support for Web Storage Internet Explorer 5, 6, and 7, 8 has native support for Web Storage Opera 7, 8, 9, and 10 beta, hopefully 1...