Thinkin‘ Tags Rapid Prototyping of CSS Layouts

Dirk Jesse, Highresolution.info apps.berlin.js – Feb., 28th, 2013

That‘s me

• Civil Engineer/Editor

• Coding Background – Amiga 500 Assembler Freak (early ‘90)

– CSS Framework YAML (2005)

– YAML Builder: First Contact to JS/jQuery (2007)

– Thinkin’ Tags (since 2009)

Thinkin‘ Tags

• Browser-based editor/IDE for CSS layouts • Modular, event-based communication • JS-based CSS engine • CSS box-model visualisation • Object orientated layout modules

Toolset

Client • jQuery, jQuery UI • jQuery Plugins

– UI Layout – ColorPicker – MarkItUp

• Modernizr + Yepnope • Webshims Lib • CodeMirror

Server • Node.js + MongoDB

Challenges … and what i‘ve learnt.

UI Performance

• Provide good feeling (response time < 250ms)

• jQuery UI – complex DOM of UI elements – updateing is not that fast – caching

Profiling JS Performance

• Don‘t build for Chrome users – Custom-events with runtime measurement

(works everywhere)

Rendering Performance

• flexible UI components box-sizing:border-box; is your friend

• CSS3 is great when used moderate (box-shadows, gradients)

Consistent UI Behavior

• Webshims Lib (Alexander Farkas) – configurable auto-loader – dynamic injection of HTML5 elements – consistent UI behavior (e.g. <datalist>)

What‘s next …

• Frontend – Support for Media Queries (RWD) – Support for uploading graphics – (improvements everywhere)

• Backend – Looking for help with Node.js & MongoDB

to implement all the ideas

Thank You http://thinkintags.com

office@highresolution.info

@djesse