Technology blog oriented towards good design and impressive web applications.

IdleTogether

Obsessing - web based processing sandbox

by Nicolas Noben

obsessing.pngThanks Ollie for this one. Obsessing is a web based processing sandbox.

Beta features will include real-time error checking, code-completion, import, export, tabs, and saving to Amazon s3.

Still in heavy beta.

Picture 10.jpg


SpatialKey: Heat mapping application

by Nicolas Noben

Spatialkey let’s you overlay data on a map. Really cool.

Picture 3.jpg


Capture CTRL+N / CMD+N in Flex/Air/AS3

by Nicolas Noben

When you program features for (web) application, it’s often useful & good practice to allow users shortcuts for common actions.

This easy snippets shows how to capture ‘new’ or Control+N or Command+N on the Mac.

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);

private function keyDown(e:KeyboardEvent) :void
{
        if(e.commandKey || e.ctrlKey)
        {
                switch(e.keyCode)
                {
                        case Keyboard.N:
                                // do stuff
                        break;
                }
        }

}

Easy Form Validation and Submit Button enable-disable in Flex 3

by Nicolas Noben

The submit button is enabled/disabled automatically based on the form elements’ validations.

The form

<mx:Form x="0" y="90" width="100%" height="100%" id="form1" creationComplete="resetForm()">
	<mx:FormItem label="Email" width="100%">
		<mx:TextInput width="100%" id="txtEmail" change="validateUs()" />
	</mx:FormItem>
	<mx:FormItem label="Password" width="100%">
		<mx:TextInput width="100%" id="txtPassword" displayAsPassword="true" change="validateUs()"/>
	</mx:FormItem>
	<mx:FormItem width="100%">
		<mx:Button id="btnLogin" label="Login" width="85" height="25" click="loginUser()" />
	</mx:FormItem>
</mx:Form>

The validators

<mx:EmailValidator id="val1" source="{txtEmail}" property="text" required="true" />
<mx:StringValidator id="val2" source="{txtPassword}" property="text" required="true" minLength="2" />

The script

private function resetForm() :void
{
	btnLogin.enabled = false;
}
private function validateUs() :void
{
	btnLogin.enabled = (Validator.validateAll([val1,val2]).length == 0);
}

Automatically resize Text/TextArea based on content (autoSize) in Flex

by Nicolas Noben

UPDATE: turns out that doesn’t always work. the autoSize property is not reliable at all…

This, should do!

var ta_height:uint = 25;

field.validateNow();

for(var i:int=0; i < field .mx_internal::getTextField().numLines; i++) {
	ta_height += field.mx_internal::getTextField().getLineMetrics(i).height;
}

derivedHeight = ta_height;

Thanks Vaan.


Original post:

Adobe’s dodgy textHeight sure doesn’t do the trick. I end up getting a textfield of 2000px height while it clearly looks like 300 tops.

This, however, works.

the code

private function resizeMe(field:TextArea) :void
{
	field.validateNow();
	field.mx_internal::getTextField().autoSize = TextFieldAutoSize.LEFT;
	field.height = field.mx_internal::getTextField().height;
}

Just use that on your TextArea or Text component:

creationComplete="resizeMe(this.myTextAreaInstance)"

Thanks to Vaan for some insight about the mx_internal::getTextField().


Odd @font-face parsing in Flex 3 (bug?)

by Nicolas Noben

This works:

@font-face
{
	src: url("assets/FontReg.ttf");
	fontFamily: FontReg;
	fontWeight: normal;
	fontStyle: normal;
}

@font-face
{
	src: url("assets/FontMed.ttf");
	fontFamily: FontMed;
	fontWeight: normal;
	fontStyle: normal;
}

This won’t work properly (all ends BOLD):

@font-face {
	src: url("assets/FontReg.ttf");
	fontFamily: FontReg;
	fontWeight: normal;
	fontStyle: normal;
}

@font-face {
	src: url("assets/FontMed.ttf");
	fontFamily: FontMed;
	fontWeight: normal;
	fontStyle: normal;
}

Yeah. Not much to add. I believe it has to do with the way the flex compiler parses the style code.


Use Applications Full Screen in OS X Leopard (Hide the menubar)

by Nicolas Noben

presentyourappslogo.png

The problem

Well, before Leopard I used this app called Menufela. It was good, but it died with Leopard and that’s that.Since then it’s been frustrating. I like to program fullscreen, with textmate, coda, flex builder etc. So anything that takes screen real estate has to go. I love the approach of Writeroom for writers and Developers need a solution like this.

The Solution

Googling I ended up found this trick on MacOsxHints. It seems to work but it’s quite hard to implement.Eventually, this donationware (free) application called Present Your Apps allows you to do just that, very easily.The only down side is that it will ask you for a password and restart your application.

Please note: DO NOT USE the app MENUFELA. It does not play well with modern OS X.

I now recommend to use Cinch - also available on the mac app store.

presentyourapps.jpg


Happy Birthday IE6!! And DIIIIIE.

by Nicolas Noben

IE6 is 7 years old!, and Wisdump has a campaign to kill the web browser that just won’t die.

Few facts about IE6:

  • it came out a few weeks before the Twin Towers fell
  • it came out before the Nintendo GameCube
  • it came out before the first iPod.

I say let’s do it. Let’s do whatever it takes to bury that piece of c… nightmare.


Student forced to remove Tris from Itunes App Store

by Nicolas Noben

Developer to pull Tris from App Store tomorrow

This is ridiculous. Tris is one of the best app for free on the iphone store. It doesn’t even have the name TETRIS and it is better than the Tetris that you have to pay for on Itunes.

They could just buy it instead of canning it. EA is really being a bully.


Tile Windows in OS X Leopard

by Nicolas Noben

ASAppIcon.pngOne thing that I really missed when moved from XP to OS X was the ability to tile windows and make use of them fullscreen.

Yes, it’s not for everyone, and it’s not for every apps but it’s damn handy when you are working on 2 or 3 different files in TextMate.

That’s where applescript black magic comes out. I found a few script, most of them were shit, except one.

bbs.macscripter.net -> use the second one, it has settings.

All you need to do is copy and paste that in SCRIPT EDITOR, save it as a script scpt in your documents folders or applications folders.

Then in Quicksilver, add a triggers to call that script. Mine is Control+` and VOILA, TextMate has wicked Tiled Windows now.

here are my settings

property horizontalSpacing : -4 — sets the horizontal spacing between windows
property verticalSpacing : -4 — sets the vertical spacing between windows
property maxRows : 1
property maxCols : 3

-4 because otherwise, there is gap, even at 0 (due to drop shadows).

Note: it doesn’t work well with Finder or Flex Builder ;-)

tiled windows textmate osx.jpg

I attach the script for archiving purposes and in case that site falls off the earth.

All credits go to isherman and dennis from bbs.macscripter.net for the following:

--tile windows of frontmost applications in a grid
--this script is useful for
--multiple window chatting
--working side by side of several windows of the same app

--make need to make it as a stay open application later
--for now assume that it is opened and closed per invokation

property horizontalSpacing : -4 -- sets the horizontal spacing between windows
property verticalSpacing : 0 -- sets the vertical spacing between windows
property maxRows : 1
property maxCols : 3

on run {}
	local a
	set userscreen to my getUserScreen()

	--display dialog (getFrntApp() as string)
	try
		set applist to getFrntApp()
		if length of applist = 0 then
			return
		end if
		set a to item 1 of getFrntApp()
	on error the error_message number the error_number
		display dialog "Error: " & the error_number & ". " & the error_message buttons {"OK"} default button 1
	end try

	try
		tileScriptable(a, userscreen)
	on error the error_message number the error_number
		--display dialog "Error: " & the error_number & ". " & the error_message buttons {"OK"} default button 1
		try
			tileUnscriptable(a, userscreen)
		on error the error_message number the error_number
			display dialog "Error: " & the error_number & ". " & the error_message buttons {"OK"} default button 1
		end try
	end try

end run

on tileScriptable(a, screen)
	local i, c
	set i to 1
	tell application named a
		set theWindows to every window of application a whose visible is true and floating is false and ¬
			modal is false -- and miniaturized is false
		set c to count theWindows
		if c = 0 then
			return
		end if
		set tiles to calTileBounds(c, screen, 1)
		repeat with theWindow in theWindows
			my tileScriptableWindow(a, theWindow, item i of tiles)
			set i to i + 1
		end repeat
	end tell
end tileScriptable

on tileUnscriptable(a, screeninfo)
	-- unscriptable app
	local i, c
	set i to 1
	tell application "System Events"
		set theWindows to (every window of application process a)
		--set theWindows to my filterUnscriptableInvisible(theWindows)

		set c to count theWindows

		if c = 0 then
			return
		end if

		--display dialog screeninfo as string giving up after 5
		set tiles to my calTileBounds(c, screeninfo, 1)
		repeat with theWindow in theWindows
			--display dialog (class of visible of theWindow)
			my tileUnScriptableWindow(a, theWindow, item i of tiles)
			set i to i + 1
		end repeat

	end tell
end tileUnscriptable

on filterUnscriptableInvisible(ws)
	-- filter out from ws windows that are docked
	set newws to {}
	set docklist to getNamesDocked()
	--display dialog (docklist as string)
	repeat with theWindow in ws
		if name of theWindow is not in docklist then
			set end of newws to theWindow
		end if
	end repeat

	--display dialog (count newws)
	return newws
end filterUnscriptableInvisible

on getNamesDocked()
	tell application "System Events" to tell process "Dock"'s list 1
		set l to name of UI elements whose subrole is "AXMinimizedWindowDockItem"
	end tell

	return l
end getNamesDocked

on tileScriptableWindow(a, w, bound)
	tell application a
		set bounds of w to bound
	end tell
end tileScriptableWindow

on tileUnScriptableWindow(a, w, bound)
	tell application "System Events"
		--display dialog (count position of w)
		set AppleScript's text item delimiters to " "

		set position of w to {(item 1 of bound), (item 2 of bound)}

		-- why the -5?
		set size of w to {(item 3 of bound) - (item 1 of bound) - 5, ¬
			(item 4 of bound) - (item 2 of bound) - 5}
		--display dialog (count properties of w)
	end tell
end tileUnScriptableWindow

on calTileBounds(nWindows, screen, direction)
	-- return a list of lists of window bounds
	-- a simple tile algo that tiles along direction (current only 1=horizontal)

	local nRows, nColumns, irow, icolumn, nSpacingWidth, nSpacingHeight, nWindowWidth, nWindowHeight
	set {x0, y0, availScreenWidth, availScreenHeight} to screen
	set ret to {}

	set nRows to (nWindows div maxCols)
	if (nWindows mod maxCols) ≠ 0 then
		set nRows to nRows + 1
	end if

	if nRows < maxRows then
		set nSpacingHeight to (nRows - 1) * verticalSpacing
		set nWindowHeight to (availScreenHeight - nSpacingHeight) / nRows
	else
		set nSpacingHeight to (maxRows - 1) * verticalSpacing
		set nWindowHeight to (availScreenHeight - nSpacingHeight) / maxRows
	end if

	repeat with irow from 0 to nRows - 1
		if nRows ≤ maxRows and irow = nRows - 1 then
			set nColumns to nWindows - irow * maxCols
		else
			set nColumns to maxCols
		end if
		set nSpacingWidth to (nColumns - 1) * horizontalSpacing
		set nWindowWidth to (availScreenWidth - nSpacingWidth) / nColumns
		set nTop to y0 + (irow mod maxRows) * (verticalSpacing + nWindowHeight)
		--display dialog "Top: " & nTop buttons {"OK"} default button 1
		repeat with icolumn from 0 to nColumns - 1
			set nLeft to x0 + (icolumn) * (horizontalSpacing + nWindowWidth)
			set itile to {¬
				nLeft, ¬
				nTop, ¬
				nLeft + nWindowWidth, ¬
				nTop + nWindowHeight}
			set end of ret to itile
			--display dialog item 3 of itile as string
			--set itile to {x0 + (icolumn - 1) * wgrid, y0, wgrid, hgrid}
			--set item 3 of itile to ((item 1 of itile) + (item 3 of itile))
			--set item 4 of itile to ((item 2 of itile) + (item 4 of itile))
		end repeat
	end repeat

	return ret
end calTileBounds

on getFrntApp()
	tell application "System Events" to set frntProc to ¬
		name of every process whose frontmost is true and visible ≠ false
	return frntProc
end getFrntApp

on getUserScreen()
	-- size of the menubar
	tell application "System Events"
		set {menuBarWidth, menuBarHeight} to size of UI element 1 of application process "SystemUIServer"
		--display dialog "Menubar width: " & menubarWidth & ", height: " & menubarHeight
		set dockApp to (application process "Dock")
		set {dockWidth, dockHeight} to size of UI element 1 of dockApp
		--display dialog "Dock width: " & dockWidth & ", height: " & dockHeight
		set dockPos to position of UI element 1 of dockApp
		--display dialog "Dock x: " & (item 1 of dockPos) & ", y: " & (item 2 of dockPos)
	end tell

	-- size of the full screen
	(*
{word 3 of (do shell script "defaults read /Library/Preferences/com.apple.windowserver | grep -w Width") as number, ¬
word 3 of (do shell script "defaults read /Library/Preferences/com.apple.windowserver | grep -w Height") as number}
*)
	tell application "Finder"
		set screenSize to bounds of window of desktop
		set screenWidth to item 3 of screenSize
		set screenHeight to item 4 of screenSize
	end tell
	--display dialog "Screen width: " & screenWidth & ", height: " & screenHeight

	-- by default, set the available screen size to the full screen size
	set availableWidth to screenWidth
	set availableHeight to screenHeight - menuBarHeight
	set availableX to 0
	set availableY to menuBarHeight

	--determine the userscreen origin and size

	-- case 0: hidden dock
	-- if (item 1 of dockPos < 0 or item 1 of dockPos ≥ screenHeight) then
	-- no need to change anything
	-- end if

	-- case 1: bottom dock
	if ((item 2 of dockPos) + dockHeight = screenHeight) then
		set availableHeight to availableHeight - dockHeight
	end if

	-- case 2: left dock
	if (item 1 of dockPos = 0) then
		set availableWidth to availableWidth - dockWidth
		set availableX to dockWidth
	end if

	-- case 3: right dock
	if ((item 1 of dockPos) + dockWidth = screenWidth) then
		set availableWidth to availableWidth - dockWidth
	end if

	return {availableX, availableY, availableWidth, availableHeight}
end getUserScreen

My Tiny Jesus * Another great use of Twitter

by Nicolas Noben

Another great use of the useless Twitter is My Tiny Jesus. No explanation as to what it does besides pumping recent Twitts.

That said, anybody using Twitter data is either looking for art or fun. So having no explanation sure fits the bill.

Twitter is not my favourite application as you must know by now, but I am often amazed by the things people come up with using their api. It’s filled with tons and tons of useless information. Brilliant for a weirdo mashup.

I will definitely have a play with the Twitter API myself once I’m done with Digg Mob Talk.

Twittearth was brilliant.

And so was Twistori.

Now be sure to check out My Tiny Jesus.

Twitter Tiny jesus.jpg


The Cuil Debacle: not so cuil.

by Nicolas Noben

cuil is funnyTake an unknown japanese company and suppose it comes on the market with a product that is supposed to kill the ipod. The press is all over it, Digg’s homepage screams “the Ipod killer is here” and your fingers become numb.

They’ve thrown millions at it, the blogoshpere is buzzing, even Michael Arrignton wants to publish it the minute it’s live. On top, you add the words such as stealth startup, known investors, ex-sony employees and the word secret.

The result, a less than working player, which tends to skip tracks in a playlist, mixes up metadata and looks radically different than the ipod, yet based on the same exact idea. It’s black instead of white.

That’s cuil. Except it doesn’t play music, it searches the web.

It’s quite a debacle and it’s indeed all over the web. Searching for “Bill Clinton” returns his biography but a photo of another politician, “Boris Becker” returns the photo of Andre Agassi and finally looking up “Missionary” returns the right definition but not quite the right picture!

Let’s look at the bright side. You don’t have to fiddle with your browser settings, you’re not even tempted to give it a go and they won’t complain about scaling issues like Twitter has.

So let’s look at the facts and let me present to you:

the top 10 Idle list to compete against Google:

- don’t even try
- I ran out.

I shall now get back to my work on glimpsr.com, a search engine that will make Google insignificant.

Good night.


Twittearth - Twitter in 3D live around the world

by Nicolas Noben

twittearth logo.pngTwittearth is pretty cool and a great use of 3D!

Finally something that gives Twitter some sense of usefulness. It’s like a mood chart for the world at present time. I also like how day/night time are represented.

twittearth.jpg


Joss Whedon - Dr Horrible’s Sing Along Blog

by Nicolas Noben

Probably one of the best ideas for writers on strike to get some money was to come up with alternative ways of working, while being on strike.

Joss Whedon, the creator of the highly rated Firefly / Serenity teamed up with a few actors such as Nathan Fillion (do they sleep together?) and Barney from How I met your mother.

And they came with with a great concept; Dr Horrible’s Sing Along Blog. A blog that publishes a quality TV show on a budget.

The story and the characters is wacky, cheesy and highly addictive. Recommended.

DrHorrible.jpg


Flokoon - flex visual search using last.fm

by Nicolas Noben

Picture 1.pngFlokoon is a visual search engine that uses last.fm api. It’s in french.

Pretty cool. Not too sure about the use of it though.

flokoon.jpg


The Linux Distro timeline

by Nicolas Noben

Pretty cool graphic representation. I actually thought there were more.

Picture 2.jpg


Cool portfolio

by Nicolas Noben

Cool portfolio. Simple and elegant.

quiteless.jpg


Brilliant Mashup of technologies

by Nicolas Noben

Sometimes technology helps people. It’s reassuring that smart people can sometimes rule the world. It is of course illegal but that doesn’t stop me from thinking that it is brilliant.

Picture 1.jpg


Face your pockets.

by Nicolas Noben

An arty party project, featuring scanners, pockets and dodgy russians.

Their DNS is as weird as their idea, so if it doesn’t work give it an hour or two.

face your pockets.jpg


Wordle

by Nicolas Noben

Wordle is a pretty slick concept. Silly and art mix well together.

wordle.jpg



« There is more!    Next Entries »