Tibor SzászInteraction matters

  • Home
  • About me
  • Projects
  • Reqest price offer
  • Contact me
  • RSS

2009 1211

MooTools Forge

MooTools Forge MooTools.net has a nice new feature, called Forge. It's a code repository for developers who are willing to share their MooTools based projects. At this time, it has only 36 scripts, but I'm sure, that this will be multiplied in a shot time, check AjaxRain.com for instance. It's a great collection of scripts, but it's uncontrolled.

What I like about MooTools Forge, is that they give you a guideline on how to publish you code. The first step is posting the project into GitHub, then you have to add a simple "yml" file to describe your package. You can even define the dependencies. Read more here.

It does 4 things at a time: provide documentation, example codes, demos and download opportunity. Official MooTools projects will be stored here also.


Category: Programming - Tags: mootools javascript forge Read more

2009 1209

DATA URI scheme

This is a good-to-know piece of web development. Images, HTML, data objects can be rendered with a single URI.
The Hello world example of the URI data scheme is:

// copy this to the address bar
data:text/html;charset=utf-8,

hello world

Example 2: Do you see this RSS icon? Right click on it and press "inspect element" if you have Firebug, or check the source code, it's base 64 encoded image data.

Unfortunately, Internet Explorer (who else) doesn't support it just the latest version 8.

The formula for creating data URI-s is:
data:[][;charset=""][;base64],
So, what's the use of this?
  • Reduce HTTP requests
  • Create crazy things, like: this and this.
  • Useful for bookmarklets
  • Generate images on the fly
  • CSS also supports it

Please note, that encoding files with base 64 makes your data much larger, than it was. More info on Wikipedia.


Category: Programming - Tags: trick data-uri Read more

2009 1205

Tabbed CSS only website template

Tabbed CSS only website template Did you know what a small anchor link can do for you? More, than you might think. You can turn it into an advanced navigation on your website. There is nothing new in this, it was designed to do this. This only make sense, if the scrollbars are visible in your browser, isn't it? Well, no. Anchor links even work, when the invisible content is in an overflow: hidden container. The target element should have the same ID as the anchor link's href attribute.

Show content
Very very long text... images... forms... btw my over flow is hidden...
I'm invisible by default, but your click just revealed me. :)
This is really nice, but this is too nice to be true. The bad guy this time is Opera. She refuses to play the game and anchoring simply doesn't work in overflow: hidden elements.

After some experimenting, I came up with a working solution: Opera jumps to the desired point, if the overflow is auto. Great, I only need to hide those scrollbars, and I'll have a cross browser, JavaScript free navigation system, that just rocks.

The trick is, that you have to put the overflow:auto element in an overflow: hidden wrapper, that crops the scrollbars.


Category: Programming - Tags: css template free tabs - 11 Read more

 < 1 2 3 4 5 6 7 8 9 10 >  Last ›

Briefing

Me myself and I
I love coding, especially for the web. I'm in the online industry for 6 years. My favourite toys are:
JavaScript, PHP, XHTML, MySQL, Canvas, Flash
Váltás magyar nyelvre

Topics

  • Coffee break
  • Design & stuff
  • Generative arts
  • Programming

Friends

  • Kárpáti Róbert
  • Royaljerry
  • Bagi Zoltán
  • Pegazoo
  • Charles Alexander Deli
  • Bence Bangócs
  • Lunakid
  • Rapp design

Feeling so social

  • Facebook
  • IWIW
  • TurulMeme

Tags

javascript (12) php (6) mootools (4) iscaffold (3) codeigniter (3) crud (3) tutorial (2) google (2) renders (2) structure-synth (2) css (2) template (2) free (2) google-buzz (1) script (1) forge (1) hack (1) table (1) open-source (1) rc1 (1) infovis (1) rss (1) interface (1) canvas (1) design, (1) user (1) experience (1) soundcloud (1) resizing (1) joomla (1) bermuda-triangle (1) wordpress (1) drupal (1) data-visualisation (1) data-uri (1) konami-codes (1) tagging (1) slimbox (1) bugfix (1) cfdg (1) blackout (1) firefox-extension (1) utf8 (1) class (1) slideshow (1) nl2br (1) experiment (1) svg (1) library (1) ajax (1) sitebuild (1) tabs (1) inspiration (1) lists (1) drag-and-drop (1) wikipedia (1) dns (1) trick (1)




All rights reserved, ©2008-2010 - Built on CodeIgniter framework - Konami codes - Mostly Valid XHTML 1.1 - Valid CSS 2.1