Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Thinkin' Tags - Rapid Prototyping of CSS Layouts

2.464 Aufrufe

Veröffentlicht am

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

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×