– New setting added: Ctrl+Shift+Y / Minimalistic Readings — as the name shows, this option will show the height/width readings in minimalistic way (just the numbers)

– Request Feature system launched — from now on it should be even easier to send me your feedback. Just click the Request Feature menu item and you can be part of the future development in a transparent way

– “Inverted Alt/Cmd Behavior” option added to the Flying Figures menu– useful when working with figures, this option will switch the default behavior of the Alt key when resizing.

– “Flying Ratios” added — much like Flying Figures, but for Aspect Ratios (16:9, 4:3 etc.) This feature should be useful for anyone who needs to work with videos (for example — it will be really easy to see what will get cut when you transform 16:9 video to 4:3, or vice versa)

– Pixel-Based Units (not calibrated) added — useful when you don’t want calibrated units (the regular ones) but want to say how many pixels your unit contains (for example — if you want 1 cm to be exactly 100 pixels, you just go and define the unit as “Pixel-Based”. It will not be calibrated and thus useful when the actual size is let’s say a zoomed photo, medical scan or something like that.

– Some smaller Improvements:

Alt/Cmd+F shortcut added to toggle full screen (just like doubleclick)
Area now not shown in scientific notation
Area for pixels now shows megapixels instead of px2 by default (can be set from menu)
Quick links to “Edit Units” and “Edit Pixel-Based Units” added in “Units” submenus
Some quick links to screen ruler online resources added

– Bugs fixed:

Alt/Cmd and figure resize now works better
“Stay on top” state now saved between restarts
When changing figures from keyboard (on Windows) — menus are now properly updated (the right figure is checked)

To download the new version — just use the buttons below:

MS Windows XP, Vista, 7 (4.9MB; 32bit):

Mac OS X 10.5+ / Intel (13.6MB; 64bit):

PS: One final note — the price will stay at it’s current level for very few days only. After more than six months it’s time now to change the early bird price to the regular one so, for anyone who wants to save $5 bucks — be sure not to think far too long

This is the history of real chrome app and as you see, at the time when the “killer-update” came it was installed by almost 32,000 Chrome users. Then I made new version of the app and that single update caused a lose of almost 2/3 of the users. (They are 13,400 right now, but still dropping). Nice update, isn’t it And the problem was not in the updated code — it was just a simple new feature added. Still, some features may kill your app. Are you curious how I managed to achieve that? Then just read the rest of this post. That could save you from doing the same mistake…

Few months ago I decided to give Chrome Web Store a try. It is emerging app store in the last 2 years and the cost of the experiment wasn’t big at all (I don’t mean the $5 dollars tax but the time I was able to put in this test). So, back in November I launched one test app (the calculator app mentioned before in this blog) that was intended to be a real-life test for jQuery Mobile and Chrome Web Store at the same time.

So far I am quite happy with the results. The Chrome Web Store is fair place and it is well designed to fit both user’s and developer’s needs. Among the pleasant things (from developer’s point of view) is that the store gives new apps a chance. When I launched the test app, it was placed close to the top of the list for some time and that gave it a good kick-start. Then, on (some) updates, the store put it in front of users again. So, when you work on your app, it have a good chance to be noticed.

Then, the auto-update feature comes. When you pack the app (as simple as creating a zip archive of your html, javascript etc.) and upload the new version (literally clicking few buttons) the store takes care to update all current installations. This silent update is one of the best things — I fixed several bugs “on the fly” and most users never even understood there were a bug or update in the app.

But then, two weeks ago, I found something that one must keep in mind when a real life app is concerned. The silent update is not so silent. And one single update of your App can destroy 2/3 of your App’s user base.

What NEVER to do in Chrome Web Store

I saw, among the user comments, a fair feature request: to add copy/paste support to my Calculator App. And because I tend to implement as much user requests as possible, I stole 2 hours and made new version with copy/paste buttons added. Did you see what’s coming? If not – just keep reading (it’s a short post)…

As always, after creating the zip, it was just a matter of uploading the new code to the store and waiting for the change to propagate. Great store. Great feature. But…

There were a surprise hidden in the wild and waiting to eat my work. We have a saying here, in my country: “no good doing will stay unpunished”. Remember — I had a really good intention (to add user requested feature), but as you know — the road to hell is paved by good intentions. So, what was the initial sin of my app and why all that happened?

The silent update feature of Chrome Web Store is not (always) silent

The original sin of my app was (as it always turns to be) the lack of planning. Remember — I made it in just one day to test some platforms and stores and didn’t even bother to think of future improvements. And I didn’t even read all the documentation about how chrome store works. Just got the boilerplate, changed the names, packed the html/javascript and uploaded the first version. Then, on updates, I just re-packed and re-uploaded the same files (with version changed in the manifest). But there were a whole bunch of settings that I should have in mind if that was a real product. And the most important thing that I missed when initially launched the app was:

Permissions

Yes, there are specific permissions you must set for your app if it needs those permissions in order to work. The first versions of my calculator came without any permissions required — it was just a set of buttons and functions (html+css+jQuery Mobile) and didn’t need any special permissions. But suddenly, when the copy/paste functionality was added, it turned too be a requirement to add these “low-security risk” (as referred by google documentation) permissions info to the bundle. That’s another good feature of Chrome Store — safety first. But what happened when the “silent” update came to replace the old version of my app with the new one? Simple. It just destroyed 2/3 of my user base. Because when I published the new version, all installed instances of the app showed a scary message to the users: This Calculator App needs MORE permissions! Not hard to imagine what will happen when user see such message several months after he/she installed an app. There are two options: approve or delete the app. If you are just installing the app for first time, there are no so big problems (you see what the app wants while you are “fresh” in what you are installing). But if an app starts asking more permissions (whatever that means) to “access everything you copy and paste”, well, that’s “scary movie”.

I should see that coming. But I didn’t. It doesn’t hurt, when it comes to tests like this app. But if you are planning to play the real game in Chrome Web Store  – never change permission requirements for an app in any new version. I’ll write it down in bold:

Before launching the first version of your app, meditate on the future of the app and select the permissions it will need or could need in future. And never ever change these permissions in any update.

Now, be careful with this advice. I am not saying you must request all possible permissions for your app. This will scare the users from the start. I would offer to keep things simple by not asking for permissions at all. Many users will see almost any permission request as security risk (do they know you? do they believe you?who are you? why you want to access their computers?) Stay away from that. For example, if I could, I would delete the new buttons from my calculator and revert back to the old version. But since the damage is done (and I don’t actually care about that particular app) — let us at least get the moral from the story. And right now it sounds like that: Chrome Web Store is a cute place for web apps, almost all of them free, and that’s great. Anyone can publish his/her apps for just $5 bucks (one time tax). That’s great. Anyone with $5 bucks in the pocked can publish an app in Chrome Web Store. That’s awful. That makes it simple: user must feel it’s safe from the beginning. So — avoid any feature that requires special permissions at all. But if it is a must — be sure to set the proper permission requirements from the start. Otherwise you’ll get the same result as the one described here.

But any king needs an army. And obviously — we are the army. Bloggers, web-masters, SEO specialists… We are all in the never-ending battle to get our sites popular. And since we have a king, a a holy goal and an army… what more we need?

Weapons (software and tools). Maps (any attack starts with a map). Data (because there is no other way to decide how we’ll fight our battle than relying on experience, analytics and …data). And this little piece of data is here to answer one single question:

Does Community News Submission work?

Well… It seems obvious that we need to submit our great articles to community-news sections of related sites. But is it that obvious? Yes, we all know any form of popularization is welcome (I don’t mean “black-hat things here), but when you have to decide where to put your time, it does matter what exactly one could expect. I couldn’t find a proof that it is a must to spend time to submit my blog posts to community-news sites, so about 6 weeks ago I started one small experiment to see does that really affect blog popularity.

The tests

1) On the 7th of March I wrote a post called “5 Best Site Speed / Load Time Test Tools“. That post was submitted to just 7 community-news places. 3 of them approved and listed the article.

2) On 11 March I wrote similar post: “5 site validators I am using daily” but this time I didn’t submit the article anywhere.

3) On 1st of April, 2012 I published this, bigger guide: “Multiple Browser Testing: Beginner’s Guide” and submitted it to 18 community-news portals; 8 of them approved and listed the news (curiously, even one site I didn’t submit to listed the article, but it seems it was owned by the same people behind one of these I submitted to)

4) About 10 days ago I wrote another short post (something about my jQuery Mobile tests) and didn’t submit that one anywhere (it actually doesn’t deserve it)

And the results:

1) The 1st post, submitted to several community news places and approved by only 3 or 4 of them reports these results right now in my analytics (my visits excluded everywhere)

2) The second post (not submitted anywhere) got these visits:

3) The third article, written on 1st of April (20 days ago) and listed on 8 community news places reports these visits:

4) The last one, written 9 days ago and never submitted anywhere got 7 pageviews so far (for over a week!):

Conclusion

The average number of pageviews for posts that I never popularized is under 30 for the first month. The average for posts that was submitted to some sites is 5-8 times bigger (80-250 visits for the first month). In any case, popularization trough community news places worths — it takes about 30 minutes to submit your news to 20 sites. If 5 or 10 of them approve the news, you get a nice kick-start for your article.

So, it seems now that it works — when a post has some value — we must submit the news to related community news sites. When popular community news place list your article, you will ged a lot of visits in just few days. If you get listed to more sites, you’ll get more visits. But then — remember that all these places are moderated. You’ll not get listed if you submit useless things. And you risk to get banned if you submit too many news / too often. Don’t push your luck and submit only the posts that worth something to the audience, and submit to relevant places (I don’t think football site will list web-design tutorial, for example)… But this is another story.

Back in November, after few weeks of curiosity, I decided to give jQueryMobile a try. In my world that means: get the framework, create a real-life example and put it into the wild. It was “a must” especially in this case, because I couldn’t find any real-life example of using jQueryMobile back then (everything I managed to find was just these simple nice how-to tutorials, but I was interested in web apps, not mobile sites with few pages) It is always the same: everything looks fine with any framework when you read the documentation, but is it suitable (and where is it suitable) can be found only with real-life tests…

The test app

So, I wrote an app, pure html app based on jQueryMobile (I mixed jQuery, the jQueryMobile and pure JavaScript) and published that app in the Chrome App Store (I believe every one visiting my web-design site will already know what chrome apps are, but for the record: Chrome apps are packed html applications that one can install with few clicks to extend the Chrome browser). The app is called “Melanto Calculator” and is just that: a calculator made for tablets and netbooks:

I had no big expectations — didn’t have the time to carefully test how it works and couldn’t spend the time to create all the features such app may need back in this first release — but while the actual goal was to test jQueryMobile in the real life, it was OK to start with something (better than nothing).

The Tests

I made several versions of the app: Chrome App, Chrome Extension, a packed exe for Windows (just a WebKit wrapper + the html app), tested in MeeGo also (Although it was already dead I did give it a try because Intel was still supporting it in their app store), tested with PhoneGap also and from Android browser itself (directly the app, without the PhoneGap layer). In the months following the inial release I tested again (mainly PhoneGap and Android). And here are the results:

jQueryMobile and Chrome

I started with the Chrome web store at the end of November. Now, several months later, I tend to believe jQueryMobile works very well for chrome apps and extensions. See the actual app, if you don’t believe me:

https://chrome.google.com/webstore/detail/nioffklpggjkmgpndbfklpnclpohpjid?utm_source=chrome-ntp-icon

With over 31,000 users at the time of this writing, it looks for me the app is working, and based on the fact that I “forced” the framework to show tens of buttons, plus event listeners, keyboard support etc., it seems to me jQueryMobile works as expected for Chrome Apps.

Still, there were troubles hidden in the story. One of the first tests was with MeeGol. Back then I found it was somehow slow (the transitions were a pain) but when I removed all page transitions it started working in my test device. Was that something MeeGo specific or not? Don’t know, and wasn’t actually important because MeeGo was killed back then (just to reborn as Tizen later).

Desktop

I tested the app in different desktops (Mac, Windows XP, Windows 7) and it worked in all tests, as webpage in browsers and as “packed app” (WebKit with the app included to mimic desktop application). Didn’t have the chance to test on Mac with touch-screen (and never tested on iOS tablet) but the windows version worked on touch screens both as web app and wrapped.

Android and PhoneGap

I made several attempts to build the app with PhoneGap — remember, there are tablets out there, and it would be great if one can just quickly port a web app to Android and all the rest I still can’t find a real reason to get one of these shiny iPads so I never tested iOS version. But Android was first in the list. There are android tablets comming all around and it should be primary target for any such web app.

Boom! It didn’t work. In all my tests it was taking forever (read: over a second) for the app to just react on user click / tap. Everything was so slow, that I just couldn’t find any way to get it working. And PhoneGap wasn’t the reason here. I tested the app as web-page directly in Android browser. Nope. Too many buttons, too many events… I am re-trying almost every month (when building new versions of the chrome app) but still no success. The last time I tested even with catching the touchstart event in separate handlers for every button — but it wasn’t there. It could be anything. Could be jQueryMobile, or jQuery, or my stupidity, or the simple fact that I pushed the framework with too much UI elements… Still, it doesn’t work well on android (and I read in other places about these slow reactions, not only in my app). But I’ll keep trying with the future versions of jQueryMobile and who knows, may be one day it will be all ready?

Conclusion

The simple fact that tens of thousands are using my test app in Chrome says that jQueryMobile can be used (at least whenever Chrome is installed). But… Getting complex app to work on Android is another beer (I never tested on iPad  – shame on me –  because I don’t have one yet). But after the Android failure it doesn’t matter does it works or not in iOS. The very idea of creating html5 apps is to get things portable. And in this field jQueryMobile still needs to be improved. But in time I believe things will get better, so I plan to continue monitoring that nice framework in future.

If you already know how to test the integrity of your design on different platforms and browsers, you may skip reading this post right now. For anyone new in website publishing: the testing services listed below are “a must”. Every browser (and even the same browser in different operating system) will render your html in a different way, and (unfortunately) often the end user can see something ugly instead of the beautiful page you designed. But (fortunately), there are very good and free cross-browser test services online and you don’t have any excuse to avoid them. These below are my favorites:

Adobe BrowserLab

This is one of the best and most used cross-browser testing services that works as standalone online service (https://browserlab.adobe.com/) and also from within Dreamweaver. I would advice, however, to use the online version with testing on real, remote server (not from your development machine). In fact, when I am building sites, I am always testing this way — local files tend to lead to problems. The way I am doing it: create a testt site online (some subdomain or a domain I am using for tests only), then uploading the site as on the final (real) server and testing this online demo. This is the closest thing to the real site I am building and gives me the exact result on how the final site will perform. But for quick tests while you are designing the Dreamweaver integration is fine. The browser lab service is still free — just go oand create your account with Adobe (they will ask for confirmation of your email in the usual “confirmation link” way).

How to use it:

1) Create an account at https://browserlab.adobe.com/en-us/index.html and click the confirmation link you’ll receive on your email address

2) login to the service home page (click the “Start” button at top-right:

3) Type the URL of the page you want to test and click the “refresh” button:

4) That’s it. you just need to wait some time to get your screenshots ready and then — just change the browser shot from the combo-box at top-left:

Hint: don’t forget to take a look on the options — for example, create your own browser sets to use when testing new pages or at least check the “view” options (top-right) to see which preview format best fits your needs…

BrowserShots.org

This is probably the oldest kid in town when it comes to cross-browser testing. It’s free and it works — what more one could want? Just go to http://browsershots.org/, type the url of the page you want to test, select the browsers / operating systems you want to test with and click “Submit”. Sometimes not all sandboxes are available, but that’s why we have BrowserLab service too — when one of them is out, the other may work…

Usage:

1) Go to www.browserShots.org and enter the URL of the page you want to test

2) Select the browsers and operating systems (just check the respective boxes). You can also select additional options from the comboboxes at bottom (screen size, javascript etc.)

3) Click the big green “Submit” button and wait until your screenshots are ready. You must stay on the “waiting” page because you may need to click a button to extend the waiting time (seems like feature made to avoid robots)

Hint: if you want to check the same site more than once per day, you’ll need to create an account.

These 2 browser testing services are among my “most visited” sites when it comes to web mastering. And I think I wouldn’t make a mistake if I say these are the best in what they do. But all such screenshot-based services come with one downside: you can’t see how your site works when user interacts with it. There are some nice options on the net that can fill that gap, but so far I didn’t find free one. However, lately I found one site that may be useful when the two above aren’t enough:

Spoon.net Browser Sandbox

You can create a free account at spoon.net to use their nice browser sandbox service (and will need to install a browser app to get it working, but everything is quick and takes under a minute). The big advantage of this service is that you can actually interact with the page you are testing. The disadvantage is that the free account is quite limited (you have only 2 minutes machine time per day) but well, that’s a good way to try the service and why not to test in one or two browsers some specific behavior of your page that doesn’t require so much time? I found the spoon.net site just weeks ago so, no long-term experience yet, but so far I tend to think this one could be one of the webmaster’s online friends…

To use it:

1) Create an account

2) Run the browser you want to use (on the first run you’ll be asked to install a plugin to your browser)

Hint: the free accoun gives you only 2 minutes usage time per day, but for quick test in specific browser that could be a good deal. Still, there is a downside: the service works on windows machines only (and that’s not the smartest thing on earth, because… well, why pay for their pro-version if I cannot use it from mac? I can install these browsers on any windows machine my own…but that’s another story)

No matter what you do, no matter how well your pages are looking offline, you must always confirm the result and these nice and free services listed above are one good way to test your site before making it public (or invoicing the client;-))

Find duplicate lines in two files:

Strip duplicates from one (single) file

1) The W3C Markup Validator

This is the validator. If you never checked your site’s code against this validator — go and do it. It is not just a validation service, it’s a learning tool too. After fixing the same type of error several times, I tend to avoid the wrong code in future. In brief — this (and all) W3 Validators are the industry standard for testing against the industry standards

2) CSS Validator

Use this validation service to check your Cascading Style Sheets (CSS) and (X)HTML documents with inline CSS.

3) Feed Validator

If you publish RSS or Atom feeds (who doesn’t?) — you may want to test them with this service.

4) Unicorn

This is a validation service that will run the above listed tests from one place. Just go to the Unicorn page, fill in the site (or upload page) and click the “check” button to get all the recommendations in one place.

5) Mobile OK Checker

The last of the W3C validators I’ll list here is the mobile readiness checker. This is extremely useful for those who are building mobile versions of their sites (and with mobile being mainstream these days, that’s everybody and his dog).

Online Site Speed & Performance Test Tools:

These are “real-life” testing utilities. In general, you enter the URL, select among servers/locations, click a button and get the report (after some time of waiting for the actual test  to be performed). The advantage of these tools is that you can check the load speed of your site from different locations (different servers in different countries).

Pingdom Tools – Page Load Time, DNS Health, Ping & Traceroute

Pingdom is very nice ping service that you can use to monitor your site’s up-time. But along with this they offer some very nice webmaster tools (online) that youo can use to test your page. At the time of this writing the page above will give you 3 tools: Load Time Checker, DNS Checker and Ping & Traceroute check service.

WebPageTest

This is, in my opinion, one of the best speed / load time checkers available. In fact, most of the time I am using this and the above one (Pingdom load test) only. WebPageTest.org is slower (you must wait in the queue to test and for some servers waiting can be longer), but offers a lot of servers to choose from.

PageSpeed Online

This is the online version of Google’s PageSpeed (free and opensource) test tool. As the previous tool, it will give you a lot of hints and suggestions on how to speed up your site. This is the third (and last) online site load speed tool I am using.

Browser-Based Page Speed Test Tools:

There are some nice browser extensions that can give you even more info than the online checkers listed above. The advantage is that you don’t need to wait in a queue and the reports and hints are (sometimes) better. The downside is that with these tools you are checking the load time only from your own internet connection. In my practice, I am starting with the online checking tools (like WebPageTest.org) to get an idea for the average speed of my site in different states and countries, then I am using the browser-based tools for faster testing when fixing the sites. (And at the end, I am re-checking with the online tools to see is there any improvement).

YSlow

Yaho YSlow is a tool that will analyze the performance of your page and will try to suggest possible ways to fix the issues found. Just like the WebPageTest.org service listed above, the YSlow tool is something like “standard” for this kind of utilities. It is available as browser extension (I suggest to use it with WebKit browsers like Chrome or Safari) — just click the link above and you’ll find an “install” button on the YSlow home page.

Page Speed browser extension

This is the second among my favorites. The tool is available as Chrome and Firefox estension and will give you almost the same result as the online version (listed above)

Well, I am sure these 5 tools are not the complete list in this field, but they are the ones I am using most often. Feel free to add more in the comments.

PS: Yes, your site speed is vital factor for your online presence. Some researches are saying that anything over 4-5 seconds load time is bad. Still, do not forget that in most cases user will see the page before all the elements are loaded . Don’t panic if some of the tools above says your site is too slow. Try to read the hints and suggestions, check with other tools and do that from different servers in different states and countries. That will give you some better idea about the average load time.

PPS: I have my own page speed test tool listed here, at wonderwebware.com, but it serves more or less different purpose (it downloads many pages to simulate some load and gives no hints or suggestions), that’s why I didn’t list it here. 

Programming is hard job. But there are other ways one can put some value to a website. That’s why I decided to restart the “resource” section of wonderwebware.com. I remember I put few resources here long time ago, then forgot about them. Why? A mystery… However, this blog is here and it costs no more than a hour a day to write a post about this or that. The web is full of challenges and I believe I can write some posts for beginners (naturally — keeping the web mastering theme on top).

So, as per this moment, the webmaster blog on wonderwebware.com will become a place not only to list the updates of my programs, but a place with some resources, tips, guides… Let’s hope there will be something useful inside.

Vlad