Some thoughts about the challenges of creating "Thinkin' Tags" as a JavaScript developer ... presented on apps.berlin.js (Feb., 28th, 2013)

1. Thinkin‘ Tags
Rapid Prototyping of CSS Layouts
Dirk Jesse, Highresolution.info apps.berlin.js – Feb., 28th, 2013

2. 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)

3. 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

5. Toolset
Client Server
• jQuery, jQuery UI • Node.js + MongoDB
• jQuery Plugins
– UI Layout
– ColorPicker
– MarkItUp
• Modernizr + Yepnope
• Webshims Lib
• CodeMirror

6. Challenges
… and what i‘ve learnt.

7. UI Performance
• Provide good feeling
(response time < 250ms)
• jQuery UI
– complex DOM of UI elements
– updateing is not that fast
– caching

8. Profiling JS Performance
• Don‘t build for Chrome users
– Custom-events with runtime measurement
(works everywhere)

9. Rendering Performance
• flexible UI components
box-sizing:border-box;
is your friend
• CSS3 is great
when used moderate
(box-shadows, gradients)

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

11. 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

12. Thank You
http://thinkintags.com
office@highresolution.info
@djesse