Monday, March 30, 2009

Mongrel process title plugin

This is a simple plugin for Rails which changes Mongrel's process title to reflect what it's currently doing. You can
then determine a given Mongrel server's status using "ps". For example:

mongrel_rails [10010/2/358]: handling 127.0.0.1: HEAD /feed/calendar/global/91/6de4
| | | | | |
| | | | | The current request (method and path)
| | | | |
| | | | The client IP
| | | |
| | | What it's doing
| | |
| | The number of requests processed during the server's lifetime
| |
| The number of requests currently queued/being processed concurrently
|
The port that Mongrel is serving



Installing into a Rails Mongrel app
-----------------------------------

Nothing special. Just drop the plugin in vendor/plugins.

http://github.com/alexstaubo/mongrel_proctitle/tree/master

Sunday, March 29, 2009

16 Fresh Adobe AIR Applications For Designers & Developers

Adobe AIR LogoWith the ease of development & multi-platform support, Adobe AIR is a getting-popular choice for creating desktop applications.

There are many beautiful applications built with it including the ones that are functional for the designer & developer community.

Months ago, a post published at WRD was sharing 27 Adobe AIR Applications - Handy For Web Designers. Since then, there are various great applications created.

And here they are, 16 Fresh Adobe AIR Applications For Designers & Developers:

ImageSizer

ImageSizer

ImageSizer is a batch image processor tool which can resize, optimize and rename multiple JPG files.

Once the images are processes, they can be exported as a single .zip file.

JustResizeIt!

JustResizeIt

A batch image resizer that works with drag’n drops. It enables users to define different presets in advance & creates resized images instantly.

The application is great for anyone sending photos with e-mails, requires batch resizing & more.

Xe-IMG Editor

Xe-IMG Editor

It supports multiple image types, image-from-URLs & SWF files as images to be edited.

With various effects like: zoom, image mask, sharpening, enhancing, embossing & more Xe-IMG Editor is a handy free desktop image editor.

.merlin - Font Organizer

.merlin Font Organizer

This Adobe AIR based font organizer is very helpful for anyone with many fonts.

It scans a given folder, renames a font with its original name & places it in a folder with the first letter of the font which makes Georgia font to go to the "G" folder.

Contrast-A

Contrast-A

The application enables interacting with a 3-dimensional RGB color space, experimenting color combinations, checking the contrast according to both WCAG 2.0 and 1.0. And, results can be seen in different types of color deficiency.

Custom color palettes can be created, printed and saved as Pdf to the user’s desktop.

Dot3D

Dot3D

Dot3D enables drawing a 16*16px image an viewing it in 3D.

Images can be easily rotated withing the canvas and saved as PNG files. Also, any drag’n dropped image is automatically drawn as a pixel image.

It is a handy application specially for icon designers.

Fractal4D

Fractal4D

A very interesting Adobe AIR application that makes it possible to draw fractal swirls.

By playing with the options like "points in use, line thickness, colors" it is possible to get very surprising results.

Drawn images can be exported as Illustrator files or saved as images.

Random Pattern

Random Pattern

It lets you to create random patterns which you have control on some variables.

It is possible to define the "number of elements", "color scheme used", "width/height", "corner radius" of the objects.

Preset files can be loaded & results can be saved as .SVG files.

Adobe Fireworks - Auto Backup

Adobe Fireworks Auto Backup

For Fireworks users, this can be a real life-saver. It automatically creates backups of .PNG files which they are modified.

An interval can be set for the backup. A nice solution specially for possible Fireworks crashes.

Caliper Project

Caliper

A caliper for measuring objects pixel perfect. It floats over any other applications, can be dragged & rotated with hotkeys.

pixDIF

pixDIF

An application for:

  • measuring the pixel distance/size of something when you’re not in Photoshop
  • testing how a new visual update would look in your websites

It floats an image over any other applications and makes imagining "how it would look" very easy.

Lita - SQLite Administration Tool

Lita - SQLite Admin Tool

An SQLite admin tool that runs on the Adobe AIR platform.

It enables users to manage databases, tables, columns & records. SQL queries can be ran, databases can be encyrpted/reencryped & more.

htmlText Editor

htmlText Editor

Specially for Flex developers, it provides a shortcut to having htmlText generated in a WYSIWYG type editor.

It updates both ways: while updating the htmlText or the rich text. Optionally, it can wrap the htmlText in CDATA tags and what you copy to the clipboard will be wrapped in the CDATA tags.

Bolso

Bolso

Bolso is an Amazon SimpleDB GUI which displays the data stored in the service.

It can run custom SQL queries, add/edit/delete/view items, import phpMyAdmin exported data & much more.

SQLFury - SQL Injection Scanner

SQLFury - SQL Injection Scanner

An SQL injection scanner, using blind SQL injection techniques to extract information from a target database.

It supports, MySQL, PostgreSQL, Oracle & Microsoft SQL Server.

De MonsterDebugger

De Monster Debugger

An open source debugger for Adobe Flash, Flex & AIR.

It can trace strings, numbers, objects, arrays, xml and even custom classes, edit properties in runtime, explpre your live application & much more.

P.S. Alcon: another Adobe AIR based debugger for ActionScript developers.

And a healthy bonus:

RelaxMyEyes

RelaxMyEyes - Computer Eye Exercise

For anyone who works with computers, eye health is something that requires attention. So, every x minutes, taking a break is a must.

This tiny application runs in the background & warns you when it is time to relax your eyes. Very handy for designers & developers, people who are ,clearly, very concentrated & don’t realize how time goes by.

http://www.webresourcesdepot.com/16-fresh-adobe-air-applications-for-designers-developers/

Rolling out Sly - The JavaScript Selector Engine

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

Sly awesomeness:

  • Pure and powerful JavaScript matching algorithm for fast and accurate queries
  • Extra optimizations for frequently used selectors and latest browser features
  • Works uniformly in DOM documents, fragments or XML documents
  • Utility methods for matching and filtering of elements
  • Standalone selector parser to produce JavaScript Object representations
  • Customizable pseudo-classes, attribute operators and combinators
  • Just 3 kB! (minified and gzipped, 8 kB without gzip)
  • No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
  • Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Querying the DOM with Sly:

// Finds all odd rows in all tables
var rows = Sly.search('table td:odd');

// Finds all links with class "internal" and an attribute "href" starting with "#".
var links = Sly.search('a.internal[href^="#"]');

// Another notation is also possible, since Sly acts as a constructor
var snippets = Sly('pre.highlight.javascript > code').search();

// features is just one element, lists has all list items are siblings of features
var features = Sly.find('#features');
var lists = Sly.search('~ ul', body);
http://digitarald.de/journal/89737433/rolling-out-sly-the-javascript-selector-engine/

Thursday, March 26, 2009

Cufón

Cufón is similar to Typeface.js which aims to become a worthy alternative to sIFR, and despite its merits still remains painfully tricky to set up and use. Cufón consists of two individual parts as well – a font generator, which converts fonts to a proprietary format and a rendering engine written in JavaScript.

It works on every major browser on the market. There is near-zero configuration needed for standard use cases. And it is fast, even for sufficiently large amounts of text.

Cufon

Requirements: Canvas and VML
Demo: http://cameronmoll.com/archives/2009/03/cufon_font_embedding/
License: License Free

http://www.webappers.com/2009/03/26/cufon-another-sifr-alternative-for-font-embedding/

Protovis. A graphical toolkit for visualization

Protovis is a visualization toolkit for JavaScript using the canvas element. It takes a graphical approach to data visualization, composing custom views of data with simple graphical primitives like bars and dots. These primitives are called marks, and each mark encodes data visually through dynamic properties such as color and position. For example, this simple bar chart visually encodes an array of numbers with height:
new pv.Panel().width(150).height(150)
.add(pv.Bar)
.data([1, 1.2, 1.7, 1.5, .7, .3])
.bottom(0)
.width(20)
.height(function(d) d * 80)
.left(function() this.index * 25)
.root.render();

Although marks are simple by themselves, you can combine them in interesting ways to make rich, interactive visualizations. To facilitate this, Protovis supports panels and inheritance. A panel is a container for marks; the contained marks are replicated for each data point on the panel. You can vary the panel position to create small multiple displays, or you can overlay panels, such as in this stacked area chart of sine waves:

new pv.Panel().width(150).height(150)
.add(pv.Panel)
.data([[Math.sin(x / y)
for (x in pv.range(50))]
for (y in pv.range(3, 9))])
.add(pv.Area)
.data(function(d) d)
.fillStyle(pv.Colors.category19.unique)
.bottom(function() let (c = this.cousin())
c ? (c.bottom + c.height) : 0)
.height(function(d) (d + 1) * 13)
.left(function() this.index * 3)
.root.render();

Inheritance lets you derive new marks from existing ones, while sharing some or all of the same properties. This is the same principle as cascading in CSS, or prototypal inheritance in JavaScript. For example, here we derive labels for a rule and a bar:

new pv.Panel().width(150).height(150)
.bottom(9.5).left(20)
.add(pv.Rule)
.data(function() pv.range(0, 2, .5))
.bottom(function(d) d * 70)
.anchor("left").add(pv.Label)
.root.add(pv.Bar)
.data([1, 1.2, 1.7, 1.5, .7])
.height(function(d) d * 70).width(20)
.bottom(0).left(function() this.index * 25 + 4)
.anchor("bottom").add(pv.Label)
.root.render();
http://vis.stanford.edu/protovis/

Wednesday, March 25, 2009

Introducing IE=EmulateIE7

Bill Gates’ recent Tech Ed keynote and Tony Chor’s follow-up blog announced that IE8 Beta 2 will be available in August in many languages. We are encouraging sites to get ready for Beta 2 prior to release as it will present a big jump in IE8 browsing traffic.

What does “getting ready for IE8” mean for web sites? IE8 displays content in IE8 Standards mode – its most standards-compliant layout mode – by default. In previous blog posts, we’ve discussed how this aligns with our commitment to Web standards interoperability. However, browsing with this default setting may cause content written for previous versions of IE to display differently than intended. This creates a “get ready” call to action for site owners to ensure their content will continue to display seamlessly in IE8.

The preferred response to this call to action is to update the site to ensure that IE8 is provided with standards content fitting the DOCTYPE. However, we know it is very important to give site owners the chance to update site content on their schedule without affecting user experience. As such, we provide a meta-tag that tells IE8 to display an entire site or a specific page like it did in IE7.

In IE8 Beta 1, that option is the “IE=7” X-UA-Compatible tag, which instructs IE8 to display content in IE7 Standards mode. However, the scenario this doesn’t address is when IE=7 is applied as an HTTP header to a site that contains Quirks mode pages. The IE=7 HTTP header will force all pages – both Quirks and Standards – to display in IE7 Standards mode. Developers using this header while updating their sites would then have to add the “IE=5” tag to each page they want to keep in Quirks mode. This logic is fine for many websites. However, if a site has lots of Quirks mode pages, or for the case where pages with frames host a mix of Strict and Quirks mode content – as brought to light by IE8 Beta 1 user feedback – the compatibility opt-out adds a bit more work than we intended.

In response to the great IE8 Beta 1 feedback we’ve received so far, we are introducing the “IE=EmulateIE7” tag to address this problem. EmulateIE7 tells IE8 to display standards DOCTYPEs in IE7 Standards mode, and Quirks DOCTYPEs in Quirks mode. We believe this will be the preferred IE7 compatibility mode for most cases. Support for IE=EmulateIE7 is available now as part of the IE June Security Update for IE8 Beta 1. Installing this update will enable you to verify you’ve applied the EmulateIE7 tag to your site correctly.

In summary, IE7 compatibility support looks as follows:

Content Value

Details

IE=7

Display in IE7 Standards mode; Already supported in the IE8 Beta 1 release

IE=EmulateIE7

Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode; Available through the IE June Security Update for IE8 Beta 1

There are two ways to implement this tag:

  • On a per-site basis, add a custom HTTP header

X-UA-Compatible: IE=EmulateIE7

  • On a per-page basis, add a special HTML tag to each document, right after the tag

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content. Although adding this tag will prevent most display issues, you may also need to update your site to properly detect IE8. To learn more about IE8 document compatibility and browser detection, check out the IE Compatibility Center.

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

Tuesday, March 24, 2009

Rhomobile

Rhomobile's open source mobile application framework Rhodes lets you quickly build native mobile applications for all smartphone operating systems: iPhone, BlackBerry, Windows Mobile, Symbian and Android. These are true native device applications, which work with synced local data and take advantage of device capabilities such as GPS and PIM access.

Mobilize your enterprise applications:

Ready to begin? Read the tutorial, and jump right in. Or you can watch this video from the Mountain West Ruby Conference. Here are some frequently asked questions about Rhomobile and our Rhodes framework. A great way to start using our product is to enter the Rhodes app development contest: $10,000 for the best mobile app submitted by the end of April!

http://rhomobile.com/

Wednesday, March 18, 2009

Expression Web SuperPreview makes cross-browser testing like moist delicious cake

Expression Web SuperPreview

Editorial note: If you’ve been following my tweets in the past 12 hours you’d have seen me hinting at something very cool for web developers coming out of Microsoft’s MIX09 event today. Well, it’s still at least 3 hours until MIX but it appears Microsoft’s own Expression Web team blog has let the dogs out early (their server is set to to New York time, not Las Vegas time), so consider the NDA broken :)

superpreviewforie“Expression Web SuperPreview”, the name is typical of Microsoft products, it’s technically self-explanatory but mind-numbingly bland and ridiculously long.

To make matters worse, the beta being released today - a subset of the full release coming with Expression Web 3 - is called “Expression Web SuperPreview for Windows Internet Explorer”. Granted the name is not that important for a developer tool, a kickass one at that.

Every web developer today faces the challenge of checking website compatibility across a large pool of browsers and browser versions in the marketplace. Up and until now, either you could install every browser, verify the website via a visual inspection and debug with tools specialized to that browser, or you could send a URL to a third-party screenshotting service like BrowserShots for an all-in-one visual inspection. The former is messy and tedious but gives you more control and an opportunity to diagnose problems, whilst the latter is simple but slow and useless to fix the problem. Needless to say, SuperPreview is the best of both worlds.

Note: The following screenshots come from a newer unreleased internal build of the application and does not reflect accurately what you can do in Expression Web SuperPreview today. Please don’t hurt me. I like kittens.

Expression Web SuperPreview

SuperPreview as a tool allows you to compare different rendering engines in a single unified interface. Simple clicks gives you comparisons between Internet Explorer 6, the native version of Internet Explorer installed, other browsers you may have installed locally - Firefox 3.5, Safari 3, Safari 4 - and even an bitmap images of website prototypes.

Pushing the envelopes a little, Microsoft is also building in support for remote rendering, such as those on different operating systems even. Details about this feature is not entirely clear at the moment, but I would expect this to be more advanced than just an image rendering.

Expression Web SuperPreview

On top of just a visual inspection, you have a standard set of modern HTML debugging tools like a DOM inspector, CSS inspector, element highlighting, pixel rulers and guides.

Expression Web SuperPreview

And perhaps what I think is the coolest feature, an overlay mode to compare exactly what’s different for pixel-perfect alignment. Or if you cross your eyes, the web in 3D.

Finally, how you can get your dirty web developer paws on this awesome tool, and it’s a little complicated to say the least. The beta of this software available right now is downloadable from Microsoft.com (250MB). The catch being it only supports renderings between IE6 and versions of IE installed on your computer already, but it should ease the pain of testing for IE6/7/8 compatibility for a lot of devs.

The full and final version of this product will be bundled together with Expression Web 3, sometime later this year and will run as a separate standalone application. Unfortunately for the many Mac web developers out there, because Expression Web is not an application part of the Expression Mac suite, SuperPreview will not be available.

You can watch this announcement and more from MIX09 from the livestream website starting at 9AM PST (Las Vegas time), and not EDT (New York time).

http://www.istartedsomething.com/20090318/expression-web-superpreview-cross-browser-testing/

Open Source Ajax Image Editor: AIE

Logo AIEAIE (Ajax Image Editor) is a rich internet application for manipulating images online. It's works with Mozilla Firefox and Internet Explorer. It uses HTML, JavaScript and Ext JS on client side and ImageMagick and PHP on server side.

AIE (Ajax Image Editor), formely known as Akoie was released as open source under the GNU General Public License (GPL) in 2007.

Easily integrate AIE in your Website!

It is avaiable for free download at sourceforge.net

Try live-demo

http://www.ajax-image-editor.com/

Simple Round CSS Links ( Wii Buttons )

Now you can style both <a /> and <button /> in this super easy and light-weight solution

You may not get a Wii, but you can still get your own Wii Buttons with only 2 tags + 1 image + one CSS file .

At least it's tested and compatible with IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9.

  1. Anchor
  2. Form Button : (you may want to use server-side detection to detect browser)
  3. For IE (and if you need to use multiple buttons inside a FORM element)
  4. Disabled Action

If you also would like to support IE5, you need to use instead of and adjust the CSS rules, too.

http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php

Tuesday, March 17, 2009

Defining Columns in Migrations

When using migrations, bear in mind that a migration is (by design) a database-agnostic representation of a database. It uses generic data types for columns, like :binary and :boolean, to define the kind of data to be stored in a column.

However, different database servers implement the migration column types in different ways. For example, MySQL doesn't have a boolean data type; so any migration columns you define as :boolean are actually converted into TINYINT(1) fields in the resulting MySQL database table (0 = false, 1 = true). Each migration column type also has a range of extra options you can set, which again modify the definition of the resulting field in the MySQL database.

The table below summarizes the migration column types, how they map to MySQL field data types, and the extra options available.

Migration column type...

Converts to MySQL field type...

Available options1

:binary

TINYBLOB, BLOB, MEDIUMBLOB, or LONGBLOB2

:limit => 1 to 4294967296 (default = 65536)2

:boolean

TINYINT(1)

-

:date

DATE

-

:datetime

DATETIME

-

:decimal

DECIMAL

:precision => 1 to 63 (default = 10) :scale => 0 to 30 (default = 0)3

:float

FLOAT

-

:integer

INT

:limit => 1 to 11 (default = 11)

:primary_key

INT(11) AUTO_INCREMENT PRIMARY KEY

-

:string

VARCHAR

:limit => 1 to 255 (default = 255)

:text

TINYTEXT, TEXT, MEDIUMTEXT, or LONGTEXT2

:limit => 1 to 4294967296 (default = 65536)2

:time

TIME

-

:timestamp

DATETIME

-

All column types accept a :null or :default option:

  • :null
    The default value for this is true (i.e. the field's value can be null in thedatabase). Set :null => false if you don't want to allow nulls in thedatabase field, e.g.
    • t.column :first_name, :string, :null => false
    Note that if you allow nulls in a field (:null => true or not specified), youdon't need to specify :default => NULL: NULL is already the default for a field, which allows null values.
  • :default
    Specify the default value for the database field when new records are addedto the table. The value you specify should be of the correct data type for the column, e.g.
    1. t.column :completed, :default => true (for a :boolean column)
    2. t.column :size, :default => 1 (for an :integer column)
    3. t.column :name, :default => 'Unknown' (for a :string column)
    4. t.column :reminder_on, :default => Time.now (for a :datetime, :date, :time or :timestamp column)
Note that the default value should match the data type of the column (not the field). For example, if you were using MySQL and had a :boolean column, even though boolean fields are represented internally in MySQL as 1 digit TINYINT fields, you would specify the :default as true or false (not 1 or 0). This keeps your migrations portable to other database back-ends (for example, while MySQL just emulates booleans, some database back-ends have a native boolean data type, and a value of 1 or 0 might not make sense).

The :limit option on a :blob or :text column specifies the size of the database field in bytes. You can set this directly in bytes, or use a convenience method to specify the size, e.g. 2.kilobytes, 2.megabytes, 2.gigabytes(!). Note that MySQL will actually create a field with a data type, which encompasses the size you specify, i.e.

  • 1 to 256 bytes: TINYBLOB or TINYTEXT
  • 257 to 65536 bytes (64KiB): BLOB or TEXT
  • 65537 to 16777216 bytes (16 MiB): MEDIUMBLOB or MEDIUMTEXT
  • 16777217 to 4294967296 bytes (4 GiB): LONGBLOB or LONGTEXT

The :precision option specifies the number of digits to store before the point in a decimal; the :scale option specifies the number of digits to store after the decimal point.

http://www.packtpub.com/article/Working-with-Rails-ActiveRecord-Migrations-Models-Scaffolding-and-Database-Completion

motionbox-eventhandler

A prototype-based javascript event bubbling and custom event library. Allows you to subscribe to elements before they exist in the DOM.

The Motionbox EventHandler allows you to:

  • Subscribe to elements before they are on the DOM
  • Subscribe to entire classes of elements (eg. subscribe to clicks on all elements with the class ".foo")
  • Subscribe to arbitrary Objects (including DOMElements) which allows you to nicely separate your code
  • Use the same interface to trigger events between Objects and/or DOM elements
  • Limit your actual observers to a minimum (Only 1 per type of event) and still subscribe many elements
  • Maintain a consistent interface among both custom, browser, and on Object events
  • Easily defer your functions (fire using setTimeout by simply adding { defer: true } to your subscriptions)
  • Blur and focus events are supported and bubble in all the supported browsers.
http://github.com/tobowers/motionbox-eventhandler/tree/master

Mamoo

The Motionbox Advanced Model Observer Observer

A light-weight MVC framework for separating concerns (Data model, views, related actions). It also provides a javscript queue system which lines functions up in an array and will execute them at an interval.

Full documentation can be found here: http://tobowers.github.com/mamoo/

Video demonstration can be found on Motionbox.

It's built on top of Prototype and the Motionbox EventHandler. Minimized it's about 13k.

http://github.com/tobowers/mamoo/tree/master

Sunday, March 15, 2009

Eval, JSON and curly braces.

Say, you have JSON data (object literal) stored as a string somewhere:

  "{ one:1, two:2 }"

and you want to parse (convert) this string into scripting object.

Obvious solution for this would be to write something like this:

  var dataStr = "{ one:1, two:2 }";
var data = eval( dataStr );

Looks nice and simple but will not work. To make it work you need to wrap your string in ( ) brackets:

  var dataStr = "(" + "{ one:1, two:2 }" + ")";
var data = eval( dataStr );

Reason is simple:

eval accepts sequence of statements of JavaScript and at this level JavaScript parser
interprets ‘{’ token as a start of a block and not a start of an object literal.

When you will enclose your literal into () brackets like this: ({ one:1, two:2 })
you are switching JavaScript parser into expression parsing mode. Token ‘{’ inside expression means start of object literal declaration so JavaScript will accept it.

http://www.terrainformatica.com/?p=14

Thursday, March 12, 2009

Cappuccino & Objective-J

cappuccinoCappuccino is an open source application framework for developing applications that look and feel like the desktop software users are familiar with.

Cappuccino is built on top of standard web technologies like JavaScript, and it implements most of the familiar APIs from GNUstep and Apple's Cocoa frameworks. When you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.

Cappuccino was implemented using a new programming language called Objective-J, which is modelled after Objective-C and built entirely on top of JavaScript. Programs written in Objective-J are interpreted in the client, so no compilation or plugins are required. Objective-J is released alongside Cappuccino in this project and under the LGPL.

http://cappuccino.org/learn/demos
http://cappuccino.org

Atlas: Under the Hood

Atlas provides a new take on web layout that make it easy to define precisely the behavior you want, while simultaneously doing away with existing browser inconsistencies. Instead of having to learn the variety of different ways to position and resize elements in the browser, Atlas introduces the simple concept of ‘anchors and springs’. Anchoring an interface element to one of the edges around it ensures that it will stay “stuck” there when it’s container resizes. Activating the internal ’springs’ causes it to resize with its container.

While simple to learn, these two tools enable you to create incredibly complex and fluid layouts. More importantly, they’re guaranteed to behave the same way regardless of the browser you’re running your web app in. Atlas also provides a large selection of collection views to handle common layout tasks such as split views, table views, and scroll views.

Connections Reduce Glue Code

A common problem that has plagued layout editors in the past is the need for additional glue code to “talk” to the generated interface. In Atlas, much of this work can be done with a technology called ‘connections’. Connections allow you to visually define the interactions between interface elements and other objects. For example, you can define what action a slider should take when it is dragged:


Similarly, you can ‘bind’ the contents of an array to a table, so that when it changes the table automatically updates as well, all without having to ever touch the keyboard:

Model View Controller Built-In

Cappuccino is a Model-View-Controller framework, and Atlas takes this idea to the next level by allowing you to not only create visual elements, but abstract models and controllers as well. By allowing you to interact directly with the objects in your program visually, you can focus on building unique interactions instead of learning a myriad of APIs.

Atlas has gone a step further and provided a number of pre-built controllers to existing web services that you can simply drop in to their applications. You can then simply use connections to grab information from services like RSS and Twitter. Once again, Atlas’ plugin architecture allows you to create controllers for your own web services as well, which you can then share with others.

Multi-Platform Support

Cappuccino was built from the ground up in preparation for a world of multiple platforms. It is becoming increasingly important for applications to run in several different environments: browsers, social networks, handheld devices, and much more. In general, very little application logic or backend code has to change from platform to platform, but the interface usually needs to be recreated from scratch.

With Atlas, it is drop dead simple to create a unique and custom interface for different platforms like the web browser and the iPhone. Cappuccino will then intelligently load the correct interface for your application depending on the environment it is being run on, allowing you to reduce the amount of code you need to rewrite and as well as using just one language and API for all the platforms you deploy on. We call this idea ‘Write once, layout everywhere’, and we feel it is the right way to gaurantee a high quality experience everywhere you ship your application.




http://thinkvitamin.com/features/atlas-under-the-hood/
http://280atlas.com/

CSS Frameworks

Elements CSS FrameworkYUI Grids CSSYAML CSS FrameworkBlueprint CSSSchema Web Design FrameworkCleverCSSTripoli CSS FrameworkESWAT Web Project FrameworkBoilerplate CSS FrameworkWYMstyle CSS FrameworkESWAT Web Project FrameworkLogicss FrameworkThat Standards Guy CSS Framework960 Grid SystemEmastic CSS FrameworkOrigo CSSTypogridphyHamlSenCSS
TaffyHartija CSS Print FrameworkFormy CSS Form FrameworkConstructCSS LayoutsCSS Layouts