AJV

I came across a problem where I had a mysql table with a column like this:

index
---------
2
4
7
11
15
26
50

…and so on, a list of incrementing values that didn’t have to be so far apart, 1,2,3,4,5,6,7,8 would do the same trick – and would also be much more tidy.

The easy way would be to make a loop with php or similar, add a counter and update each row separately, but that’s pretty far from elegant or efficient.

Luckily this mysql command does the trick:

SET @i:=0; UPDATE table SET index = (@i:=@i+1) ORDER BY index ASC

To make it work with php’s mysql_query-command, you need two rows:

mysql_query("SET @i:=0");
mysql_query("UPDATE table SET index = (@i:=@i+1) ORDER BY index ASC");

Simple & clean.

eapu.fi on helppokäyttöinen webbipalvelu, jonka kautta kuka tahansa voi tutkia, mitä elintarvikkeiden E-koodit oikein tarkoittavat. Sain idean palvelun tekoon näinä päivinä käytävästä keskustelusta elintarvikkeiden sisällöistä ja siitä, kuinka hankala e-koodien merkitystä on tietää ilman opasta. Palvelu on täysin ilmainen ja kaikkien käytettävissä.

Käytöstä on tehty hyvin yksinkertaista: hakukenttään kirjoitetaan haluttu koodi, esim. E128, painetaan HAE ja sen jälkeen tutkaillaan mistä aineesta olikaan kyse. Jos haluaa, voi hakukenttään kirjoittaa useamman E-koodin peräkkäin, esim. E100 E110 E621 E500, jonka jälkeen HAE-painikkeen napsautus tuo esiin kaikki listatut koodit. Jos puhelimen oma näppäimistö ärsyttää (kuten allekirjoittanutta), voi hakukentän edessä olevasta 0-9-painikkeesta avata pikanäppäimistön, josta löytyy kaikki E-koodien kirjoittamiseen vaadittavat merkit.

eapu on tehty ensisijaisesti kännyköillä käytettäväksi, koska harva jaksaa raahata saati käyttää tavallista tietokonetta ruokaostoksilla. Sivusto on kooltaan hyvin pieni, joten se latautuu nopeasti hitaallakin nettiyhteydellä.  Sen voi myös tallentaa kännykän muistiin (jos kännykkäsi nettiselain pystyy siihen), jolloin et tarvitse nettiyhteyttä käyttääksesi sitä. eapun pitäisi toimia melkein millä tahansa kännykällä, jossa on nettiselain. (Tosin – mobiiliselaimien joukko on niin kirjava, että täyttä takuuta ei voida antaa.)

Tiedot E-koodeista on kerätty Eviran E-koodiavaimesta ja Wikipedian suomen- ja englanninkielisiltä sivuilta. E-koodien tietoja päivitetään toistuvasti ajantasaisemmiksi. Mitään kummempaa ideologista ajatusta eapun takana ei ole, vaan sen kautta yritetään antaa mahdollisimman neutraalia infoa lisäaineista. Lisäaineet sinänsä eivät ole mielestäni pahasta, sillä E-luettelosta löytyy myös luonnontuotteita. Silti, kun käy E-luetteloa läpi, joukossa on sellaisiakin aineita joita en henkilökohtaisesti välittäisi syödä.

Toivottavasti eapulle löytyy käyttöä – saamani alustava palaute on ollut pelkästään positiivista. Jos haluat olla mukana eapun kehitystyössä joko tekniikan tai sisällön kanssa, ota mieluusti yhteyttä!

…and the same in English

Just got the DNS’s working and eapu.fi is out. It’s a simplified tool for translating the codes of food additives to plain text. E621 stands for Monosodium glutamate, for example. It’s made only in Finnish and mainly for mobile use, but works on desktop browsers just as well.

I had a need for converting a css file with pixel values to a file where all measurements are in ems.  I googled around and found only some tools where you can manually convert the pixel values to ems, but with a big file it’s a pain converting each value manually.

So I made a tool that processes the CSS data, finds all px-values (accepts values written like 12px or 12 px), converts them to ems and prints out the new CSS data. Really simple, and seems to work pretty good. I needed some manual fixing after I converted my test css, but overall I’m pretty happy with it. Don’t know if I’ll need it again, though…

Check it out at www.ajvweb.fi/px2em

We have a pretty big project here at work – we’re transforming a 220 page exercise book to an interactive one, so that you can zoom in to each exercise on the pages and show/hide the correct answers on each exercise. There are 2-3 exercises on each page, so the total amount of exercises to convert is pretty huge. And of course there are many, many books just like that waiting to be converted. So any 100% manual workflow (capture images from pdf, create new fla, do the layers, keyframes etc etc…) is really not an option.

So, to build as much automation as possible, I created a JSFL script that creates new FLA’s, imports the correct pages to them, creates layers, movieclips etc. All this saves a LOT of work.

This was my first real experience with JSFL. It really is a great, great tool to have, but the way it works is a bit different than any other ecmascript-based language I’ve run into. Basically you can’t think like a programmer, but instead you have to think like a Flash IDE user working in the IDE.

So, if you want to delete a movieclip from the stage, you don’t do it like this:

element.remove();

Instead you do it like this:

element.selected = true;
fl.getDocumentDOM().deleteSelection();

Another example, if you want to add a layer to a movieclip that’s on stage, you don’t do this:

var newLayer = element.addNewLayer();

Instead, you do this:

var doc = fl.getDocumentDOM(); //This is just a reference to the DOM
element.selected = true; //Select the element you want to edit
doc.enterEditMode("inPlace");  //Enter edit mode
var timeline = doc.getTimeline(); //Get the timeline we're working on, now it's the timeline of the element
var newLayer = timeline.addNewLayer("Name of the new layer"); //Add a new layer to the timeline.
doc.exitEditMode(); //End editing.

Also, when you’re selecting elements on the stage, the procedure is like this:

1. Get the timeline
2. Select the correct layer of the timeline (zero-based numerical indexes)
3. Select the correct frame of the layer
4. Select the correct element on the frame.

I made a simple function that returns the correct element from a specified layer’s first frame:

function getElement(layerIndex, elementIndex){

   if (!elementIndex) elementIndex = 0;

   layer = doc.getTimeline().layers[layerIndex];

   frame = layer.frames[0];

   return frame.elements[elementIndex];

}

//Usage: if you have only one layer, and three elements on it's first frame, this is how you select the element that was added last:

var element = getElement(0,2);

Also, at first I was looking for events and eventlisteneres, but there aren’t any. It just seems to wait until a process is finished and continues from there.

But anyways, with JSFL you can pretty much automate anything you would normally do manually in the IDE. And you can’t do much that you can’t do manually, for example creating and saving FLA’s with specific names automatically; JSFL can only open the Save as -dialog for you.

Here’s the documentation: http://livedocs.adobe.com/flash/9.0/main/flash_cs3_extending.pdf

After reading Samuli Hakoniemi’s post about javascript tricks & tips I made a small demo of how to use window.name in simple UI stuff. In this case I use it to remember the status of opened/closed elements on the page. Window.name is a really nice utility which eliminates the use of cookies in in-site stuff.

Check out the demo:

http://www.ajvweb.fi/demo/windowNameDemo.html

Steve Jobs finally wrote a public post on why Apple won’t be having Flash on its mobile devices. Since Jobs is a mythical figure whose opinions and actions get religious following in a large number of people, I thought of somebody else who is up there in the same league, and the most obvious person (?) was, of course, God. Luckily he/she responded quite fast, here’s the unedited reply I got.

“Hey there. What’s up? (Like I wouldn’t know, haha)

But yeah, I read his post and wasn’t very convinced. I’ll just go over it step by step.

1. Open/closed

Didn’t anyone tell him you can write Flash applications on fully 100% open source tools? Yeah, it’s not as open as HTML, but at least it’s a more open platform for making software than the official way of writing iPhone/iPad apps.

2. Full web

“oh, you can show H.264 video on iPhone OS.” Flash does a lot more than show video. For example, it’s great for online games, and even if you have x thousands of games on the AppStore, that has nothing to do with a full web experience.

3. Security

http://twitter.com/gskinner/status/13085521778

4. Battery life

Yeah, using Flash will drain the battery. So what? Everyone knows that if you talk a lot on your phone, the battery drains faster than if it’s on standby. So most people would understand that if they use Flash, they have to load their iGizmo more often. If there was a setting to disable Flash, that would be win/win for everyone. Blah.

5. Touch

I’ve been hearing about this “Flash doesn’t support multitouch” flaming for a while now. What a load of aramean bullshit. And yeah, many Flash sites would have to be rewritten. So what? Most regular html websites need to be rewritten as well to work good on mobile devices.

6. The most important reason

Yeah, I kinda understand their point. But still… People can write crappy iPhone OS apps on Apples own tools. If a 3rd party tool doesn’t support new cool features, why in the name of Me would anyone use it? Meh. They just could have said that there’s too many idiots using Flash that would drown our AppStore moderators with crappy apps, and most of them can’t learn Objective-C, so that just makes it easier for them.

So there’s some thoughts.

God

Sent from My gPad (with Flash support, suckers)

”

I have to say, I was really surprised that he/she had the time to answer. Hope he/she doesn’t get mad at me for making this public. But people do publish their email exchanges with Jobs and nowadays the wrath of Jobs seems to be a bigger threat than the wrath of God…

I’m getting pretty tired with all the Adobe vs. Apple talk. A lot of talk about how Apple’s decisions and the advent of HTML 5 are going to KILL FLASH! And yeah, it seems that now even Adobe are admitting defeat in the iFight. And while the mobile Flash Player is coming to Android and a lot of developers have started to look to that side of the fence, it’s becoming more and more obvious that there are a lot of users who simply don’t notice that their device doesn’t support Flash, or even if they do, it’s not that big of a deal. At least not that big of a deal that it would be the dealmaker when they’re choosing a new mobile device.

So, the mobile future of Flash doesn’t seem very bright at the moment.

And then there is HTML 5. But where Apple’s decisions were clear and justifiable (at least from Apple’s viewpoint) against Flash, saying that HTML 5 / CSS3 / JavaScript is going to kill Flash is mostly ideological than practical now. Sure, with Canvas you can draw similar animations as with Flash, but when you don’t have Canvas natively on IE and even the best browsers don’t come even close to Flash’s framerates, AND remember that when you write advanced javascript, the browser compatability issues are really big. So until a good Canvas IDE comes along (and most likely the first good one will come from Adobe), development of even basic animations with Canvas will require an advanced knowledge about JavaScript. Flash’s biggest benefits is the ease of development. You can create nice animations, banners etc with very little knowledge about coding. This, of course, is the biggest reason why some folks truly hate Flash, as little knowledge sometimes results in 99% processor loads and browser crashes. Still, if you want some technology to KILL FLASH, it needs to be easier to develop. Not the current case with Canvas.

Still, Canvas is a really cool technology and with the current browser wars it’s definitely getting faster. Unfortunately that doesn’t remove the browser incompatability issues. But, if you need to come up with some interactive animation stuff on the web, I wouldn’t do it with javascript unless it was something really simple or I had the time and budget to really test it with different machines. And after all the main thing in everyday web development is not making technological breakthroughs, it’s creating stuff that your clients/users like and want to use. At the moment, Flash is just so much cost-effective if you need to have any advanced animation on your site. Besides, if you want to have those advanced animations on mobile, native apps are pretty much the only working solution nowadays. So, as a developer it’s imporant to keep an eye on what the Canvas guys are doing, but ditching Flash is overkill.

Besides Canvas, the other threatening technology is HTML5′s <video>-tag. It’s truly great, nowadays video on a web page is just as common as an image, so there really shouldn’t be a need for a 3rd party plugin. Nevertheless, it’s funny to see all the flaming against Flash video, as it pretty much single-handidly made online video as big as it is nowadays. And, while all the browser makers (and especially the developers) know how much crap resulted from pursuing company-specific technologies instead of common standards, it’s really unbelievably, amazingly dumbfounding that even with the video-tag is supported in current browsers, they haven’t been able to select/make a good open-source video codec to use. I’m really hoping that Google’s efforts with VP8 will make it the standard. But then again, when you know how much effort Apple put into bringing Flash into their mobile devices, and how much they like Google, I would be a bit surprised if they made iHandhelds compatible with a codec that’s not their own. Hope I’m wrong.

But eventually, if there isn’t any big changes in the way things seem to be developing, the amount of .swf’s on the web will get smaller. And I’m saying that’s a good thing. People have been making sites and site components with Flash just because you can add explosions, visual effects and all kinds of other stupid stuff with no real reason besides the lack of visual taste.

Here’s a small table about the current and future use cases of Flash, and how I predict they will change in the future.

Use case: Mobile

Doesn’t look too good for Flash. Someday, there will be popular devices that have more than enough battery and power to run embedded & standalone .swf’s nicely, but it will take a while, and if the wait gets too long the need for it will get smaller and smaller.

Use case: Video

When the browser companies manage to settle on a common codec to use with the <video> tag, and YouTube, Vimeo etc really put their weight behind it, Flash video will lose percentage. Not before.

Use case: Full Flash campaign sites

Example: Sites on thefwa.com

These will be made with Flash, but we’ll see them less and less, due to reasons that have nothing to do with technology. It’s a pity ’cause I’ve made good money building them

Use case: Games

Browsers & computers have to get A LOT better & faster before online games can be made as accessible and classy without plugins. Or the majority of online gamers will need to switch to devices that don’t support Flash.

Use case: Banners & ads

The category that has given Flash more haters than any other, Flash ads won’t be going away for a while. Designers don’t want to sacrifice the current possibilities Flash ads give them, no one wants animated gifs back, and if you stop making banners with Flash, all the AdBlock users will have a seizure.

Use case: UI elements

The use of Flash as site components, such as navigations, transitions, image galleries etc etc is on the way down, thanks to easy-to-use jQuery plugins and things like that. I’m guessing that this trend will get stronger, and that’s a really good thing as in the vast majority of the cases Flash doesn’t give any advantages, many times it’s way better to make them with JavaScript.

And of course the worst uses for Flash, such as message boards, webstores or large full-Flash sites (without swfAddress) are on the way out, hopefully for good.

So, all in all, the cases where Flash will continue to dominate are getting fewer and it’s hard to think of any new area where Flash would increase its popularity. But it’s not going away, and there will be a demand for it for many years. I’m guessing these current developments can hopefully bring out a balance between Flash and the HTML5/css3/js combo, where each technology is used and embraced where it fits best.

A bunch of big-name bloggers are really upset on Gizmodo for knowingly buying a stolen prototype of the upcoming iPhone model. Yeah, it’s against the law. Yeah, the founder should’ve given it straight back to the bartender/owner/etc. But still, I’m guessing that ANYONE even REMOTELY interested in new Apple products, when given a chance to look at the new prototype, would do ANYTHING to get a look. Maybe they wouldn’t blog about it, but they sure as hell would still brag their brains off about it to anyone who would listen. “Oh, so you have a new iPhone prototype? Don’t tell me anything about it, I don’t even want to have a glimpse of it, post it to Cupertino at once, you bad, bad man!”

And, even if they’re now saying that Gizmodo was stupid/evil/criminal (of course they were) and that they knew it was illegally purchased from the first moment they read the headlines, I’m 150% sure that every single one of those hypocrite bloggers got their magnifying glasses on and examined the report and each photo with the same excitement as a 13-year old boy who finds his first porn mag in the dumpster.

When learning the new HTML5 elements and methods, and trying to figure out how to use them in different situations, there’s nothing better than a great real-world example. Just like this one: http://gmailblog.blogspot.com/2010/04/drag-and-drop-attachments-onto-messages.html

When you’re building flash stuff, trace() is vital in basic debugging. But as it is the most basic thing inside Flash IDE, reading them while running the .swf in the browser is tough. Ever since Sephirot’s FlashTracer extension for Firefox got outdated I haven’t been able to find a good and simple way of doing it. There is Senoculars Output class which does its thing great, but I still don’t find it as good as it should be. Also playing around with Flash Players log files just isn’t as simple as I prefer.

But then I noticed that as you can call “javascript:doSomething()” via navigateToURL(), and pretty much every developer has Firefox & Firebug, why not combine those two and output the trace-statements to Firebug’s console? I tried it out and it works like a charm!

I made a class that does the job, you instantiate a Console object and after that you can just output the messages by calling console.log(“value”);

There are a couple of minor setbacks, compared to the native trace-function. First setback is that the actual trace()-commands don’t get sent automatically. So, as a workaround there is a check inside the class that traces the messages normally if you’re working in Flash IDE and uses the browsers console.log -method if you’re running the swf in Firefox. The other thing is that if you log multiple statements from the same frame, the logger has to start an ENTER_FRAME loop for sending the statements. That’s because Flash can’t send more than one navigateToURL -command per frame.

Also, a couple of requirements – you obviously need Firefox (shouldn’t be too picky with different versions) and the Firebug extension. When you’re running Firefox, open the Firebug from the bug-like icon in the right bottom corner and enable the console window.

Check out the demo or the source files.

If you open the demo in other browsers, it doesn’t throw any errors etc, so even if you forget it there in the published version, nothing’s going to crash.

Hope you find it as useful as me!

ps. TODO: convert the class into a static one so you don’t need to instantiate it.

pps. you can use the same idea with as2, might make a version for that too.