Thinkin‘ Tags Rapid Prototyping of CSS LayoutsDirk 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) ...
Thinkin‘ Tags•   Browser-based editor/IDE for CSS layouts•   Modular, event-based communication•   JS-based CSS engine•   ...
ToolsetClient                  Server• jQuery, jQuery UI     • Node.js + MongoDB• jQuery Plugins   – UI Layout   – ColorPi...
Challenges… and what i‘ve learnt.
UI Performance• Provide good feeling  (response time < 250ms)• jQuery UI   – complex DOM of UI elements   – updateing is n...
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  ...
Consistent UI Behavior• Webshims Lib (Alexander Farkas)  – configurable auto-loader  – dynamic injection of HTML5 elements...
What‘s next …• Frontend  – Support for Media Queries (RWD)  – Support for uploading graphics  – (improvements everywhere)•...
Thank Youhttp://thinkintags.com       office@highresolution.info                        @djesse
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Próximos SlideShares
Carregando em…5
×

Thinkin' Tags - Rapid Prototyping of CSS Layouts

2.319 visualizações

Publicada em

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

  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Thinkin' Tags - Rapid Prototyping of CSS Layouts

  1. 1. Thinkin‘ Tags Rapid Prototyping of CSS LayoutsDirk Jesse, Highresolution.info apps.berlin.js – Feb., 28th, 2013
  2. 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. 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
  4. 4. ToolsetClient Server• jQuery, jQuery UI • Node.js + MongoDB• jQuery Plugins – UI Layout – ColorPicker – MarkItUp• Modernizr + Yepnope• Webshims Lib• CodeMirror
  5. 5. Challenges… and what i‘ve learnt.
  6. 6. UI Performance• Provide good feeling (response time < 250ms)• jQuery UI – complex DOM of UI elements – updateing is not that fast – caching
  7. 7. Profiling JS Performance• Don‘t build for Chrome users – Custom-events with runtime measurement (works everywhere)
  8. 8. Rendering Performance• flexible UI components box-sizing:border-box; is your friend• CSS3 is great when used moderate (box-shadows, gradients)
  9. 9. Consistent UI Behavior• Webshims Lib (Alexander Farkas) – configurable auto-loader – dynamic injection of HTML5 elements – consistent UI behavior (e.g. <datalist>)
  10. 10. 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
  11. 11. Thank Youhttp://thinkintags.com office@highresolution.info @djesse

×