Suche senden
Hochladen
Unic - frontend development-in-complex-projects
•
4 gefällt mir
•
2,594 views
Unic
Folgen
Talk by Thomas Jaggi and Romy Wysseier at the Frontend Conference Zurich 2012
Weniger lesen
Mehr lesen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 55
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
Chris Mills
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
Foundation vs Bootstrap - CC FE & UX
Foundation vs Bootstrap - CC FE & UX
JWORKS powered by Ordina
2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
vzaccaria
Empfohlen
HTML5 and CSS3: does now really mean now?
HTML5 and CSS3: does now really mean now?
Chris Mills
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Drupal south 2014 - bootstrap vs foundation deathmatch - v.1.1
Vladimir Roudakov
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
Foundation vs Bootstrap - CC FE & UX
Foundation vs Bootstrap - CC FE & UX
JWORKS powered by Ordina
2022 HTML5: The future is now
2022 HTML5: The future is now
Gonzalo Cordero
HTML5, just another presentation :)
HTML5, just another presentation :)
François Massart
BEM Methodology — @Frontenders Ticino —17/09/2014
BEM Methodology — @Frontenders Ticino —17/09/2014
vzaccaria
Html5
Html5
Mehdi Jalal
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Bootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
Display Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
BEM it!
BEM it!
Max Shirshin
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Suzanne Dergacheva
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? Webinar
Suzanne Dergacheva
Google’s PRPL Web development pattern
Google’s PRPL Web development pattern
Jeongkyu Shin
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
Cristina Chumillas
HTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
The benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
Intro to CSS3
Intro to CSS3
Denise Jacobs
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content Types
Carrie Hane
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
David Burns
Responsive Web Design
Responsive Web Design
Debra Shapiro
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
Acquia
Technology independent UI development with JVx
Technology independent UI development with JVx
SIB Visions GmbH
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
Matteo Papadopoulos
Weitere ähnliche Inhalte
Was ist angesagt?
Html5
Html5
Mehdi Jalal
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Bootstrap 5 ppt
Bootstrap 5 ppt
Mallikarjuna G D
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
Display Suite: A Themers Perspective
Display Suite: A Themers Perspective
Mediacurrent
BEM it!
BEM it!
Max Shirshin
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Suzanne Dergacheva
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? Webinar
Suzanne Dergacheva
Google’s PRPL Web development pattern
Google’s PRPL Web development pattern
Jeongkyu Shin
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
Cristina Chumillas
HTML5 Essential Training
HTML5 Essential Training
Kaloyan Kosev
The benefits of BEM CSS
The benefits of BEM CSS
Bob Donderwinkel
Intro to CSS3
Intro to CSS3
Denise Jacobs
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content Types
Carrie Hane
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
David Burns
Responsive Web Design
Responsive Web Design
Debra Shapiro
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Erin M. Kidwell
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
Yandex
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Jer Clarke
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
Acquia
Was ist angesagt?
(20)
Html5
Html5
Developing Your Ultimate Package
Developing Your Ultimate Package
Bootstrap 5 ppt
Bootstrap 5 ppt
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Display Suite: A Themers Perspective
Display Suite: A Themers Perspective
BEM it!
BEM it!
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
Minimalist Theming: How to Build a Lean, Mean Drupal 8 Theme
What is Drupal? And Why is it Useful? Webinar
What is Drupal? And Why is it Useful? Webinar
Google’s PRPL Web development pattern
Google’s PRPL Web development pattern
Improving the Responsive Web Design Process in 2016
Improving the Responsive Web Design Process in 2016
HTML5 Essential Training
HTML5 Essential Training
The benefits of BEM CSS
The benefits of BEM CSS
Intro to CSS3
Intro to CSS3
Content First – Planning Drupal Content Types
Content First – Planning Drupal Content Types
Drupal - Blocks vs Context vs Panels
Drupal - Blocks vs Context vs Panels
Responsive Web Design
Responsive Web Design
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
DRY CSS A don’t-repeat-yourself methodology for creating efficient, unified a...
Preventing Drupal Headaches: Content Type Checklist
Preventing Drupal Headaches: Content Type Checklist
Andere mochten auch
Technology independent UI development with JVx
Technology independent UI development with JVx
SIB Visions GmbH
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
Matteo Papadopoulos
Agile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App Development
AnyPresence
Basics of Rich Internet Applications
Basics of Rich Internet Applications
Subramanyan Murali
Comparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
Angelin R
Rethink Frontend Development With Elm
Rethink Frontend Development With Elm
Brian Hogan
Modern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be true
WaveMaker, Inc.
Cost Effective Web Development Techniques
Cost Effective Web Development Techniques
Drew McLellan
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
Lemi Orhan Ergin
Architecture of a Modern Web App
Architecture of a Modern Web App
scothis
Andere mochten auch
(10)
Technology independent UI development with JVx
Technology independent UI development with JVx
Web Frontend development: tools and good practices to (re)organize the chaos
Web Frontend development: tools and good practices to (re)organize the chaos
Agile IT: Modern Architecture for Rapid Mobile App Development
Agile IT: Modern Architecture for Rapid Mobile App Development
Basics of Rich Internet Applications
Basics of Rich Internet Applications
Comparison of Java Web Application Frameworks
Comparison of Java Web Application Frameworks
Rethink Frontend Development With Elm
Rethink Frontend Development With Elm
Modern Rapid Application Development - Too good to be true
Modern Rapid Application Development - Too good to be true
Cost Effective Web Development Techniques
Cost Effective Web Development Techniques
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
Architecture of a Modern Web App
Architecture of a Modern Web App
Ähnlich wie Unic - frontend development-in-complex-projects
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Akihiro Ikezoe
Designing True Cross-Platform Apps
Designing True Cross-Platform Apps
FITC
High performance website
High performance website
Chamnap Chhorn
Efficient theming in Drupal
Efficient theming in Drupal
Cedric Spillebeen
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud slide share
Mike Ensor
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?
IWMW
Web Components
Web Components
FITC
Web design-workflow
Web design-workflow
Peter Kaizer
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
Melanie Archer
Drupal: an Overview
Drupal: an Overview
Matt Weaver
Ensuring Design Standards with Web Components
Ensuring Design Standards with Web Components
John Riviello
dmBridge & dmMonocle
dmBridge & dmMonocle
University of Nevada, Las Vegas
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
One Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp London
hernanibf
Webpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
Web components, so close!
Web components, so close!
Aleks Zinevych
Face off apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
Christian Rokitta
The new way of managing layouts and blocks
The new way of managing layouts and blocks
Ivo Lukac
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
Rod Martin
Ähnlich wie Unic - frontend development-in-complex-projects
(20)
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Designing True Cross-Platform Apps
Designing True Cross-Platform Apps
High performance website
High performance website
Efficient theming in Drupal
Efficient theming in Drupal
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud slide share
How Responsive Do You Want Your Website?
How Responsive Do You Want Your Website?
Web Components
Web Components
Web design-workflow
Web design-workflow
Getting started with CSS frameworks using Zurb foundation
Getting started with CSS frameworks using Zurb foundation
Drupal: an Overview
Drupal: an Overview
Ensuring Design Standards with Web Components
Ensuring Design Standards with Web Components
dmBridge & dmMonocle
dmBridge & dmMonocle
Drupal theming - a practical approach (European Drupal Days 2015)
Drupal theming - a practical approach (European Drupal Days 2015)
Advanced CSS Troubleshooting
Advanced CSS Troubleshooting
One Drupal to rule them all - Drupalcamp London
One Drupal to rule them all - Drupalcamp London
Webpack and Web Performance Optimization
Webpack and Web Performance Optimization
Web components, so close!
Web components, so close!
Face off apex template and themes - 3.0 - k-scope11
Face off apex template and themes - 3.0 - k-scope11
The new way of managing layouts and blocks
The new way of managing layouts and blocks
Absolute Beginners Guide to Drupal
Absolute Beginners Guide to Drupal
Mehr von Unic
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Unic
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Unic
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Unic
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Unic
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Unic
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Unic
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Unic
Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?
Unic
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
Unic
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Unic
Herausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce Alltag
Unic
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Unic
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Unic
Customer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AG
Unic
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Unic
Know every customer. Own every experience.
Know every customer. Own every experience.
Unic
2015 - a static site generator odyssey
2015 - a static site generator odyssey
Unic
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Unic
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Unic
Trend Spotlight: Marketing Automation
Trend Spotlight: Marketing Automation
Unic
Mehr von Unic
(20)
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Ralf Wölfle: E-Commerce Report 2018: Wandel und Trend...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Christine Reichardt - Smarte Selfservices im Kreditbu...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Marta Kwiatkowski Schenk - Simplexity: Die Sehnsucht ...
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Digital Nudge Day 2018: Christof Zogg - Self-servicing im öffentlichen Verkehr
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Präsentation des E-Commerce Report 2016 - Prof. Ralf Wölfle, FHNW
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Digitale Transformation in der Medikation - Walter Oberhänsli, Zur Rose Group
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Blick ins Hirn: Was das E-Commerce von der modernen Hirnforschung lernen kann...
Customer Centricity – Wie geht es weiter? War’s das?
Customer Centricity – Wie geht es weiter? War’s das?
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
CRM – Wie die gesamtheitliche Betrachtung eines Kunden gelingt / Do’s and Don’ts
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Kundenzentriertheit im internationalen Wettbewerb am Beispiel Multichannel
Herausforderungen von Customer Centricity im E-Commerce Alltag
Herausforderungen von Customer Centricity im E-Commerce Alltag
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Keynote: Der Post Logistik-Kunde im Mittelpunkt
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Sitecore Experience Marketing – Gestaltung von aussergewöhnlichen Kundenerfah...
Customer Experience Highlights am Beispiel Post CH AG
Customer Experience Highlights am Beispiel Post CH AG
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Relaunch post.ch – Ein Schritt Richtung digitale Transformation
Know every customer. Own every experience.
Know every customer. Own every experience.
2015 - a static site generator odyssey
2015 - a static site generator odyssey
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Das grösste E-Banking der Schweiz erneuern – challenge accepted.
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Kundennähe von Banken und Versicherern im Web - Benchmark 2015
Trend Spotlight: Marketing Automation
Trend Spotlight: Marketing Automation
Kürzlich hochgeladen
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
LoriGlavin3
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Mark Simos
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Curtis Poe
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Rizwan Syed
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
LoriGlavin3
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Lorenzo Miniero
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
LoriGlavin3
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Pixlogix Infotech
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
2toLead Limited
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
Alan Dix
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
Fwdays
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
BookNet Canada
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
NavinnSomaal
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
MounikaPolabathina
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Raghuram Pandurangan
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
UiPathCommunity
Kürzlich hochgeladen
(20)
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
Unic - frontend development-in-complex-projects
1.
Frontend development in
complex projects Frontend Conference Zurich 2012 9th September 2012 Rosmarie Wysseier & Thomas Jaggi
2.
Rosmarie Wysseier • Gymnasium
(Psychology and Economy) • Creative Media Diploma, SAE Zürich, 2004 • Bachelor of Computer Science University of Applied Sciences Bern, 2009 © Unic - Seite 2
3.
Thomas Jaggi • MSc
Food Science (Major in Human Nutrition) from ETH Zurich • Fiddling around with frontend technologies since before it was cool © Unic - Seite 3
4.
Unic at a
glance • Founded in 1996 in Switzerland • We design, develop and maintain premium e-business solutions for e-commerce, digital communication and collaboration • We are an independent, owner-operated group with 270 employees • Sales of 38 million CHF i.e. 33 million Euro (2011) • 7 offices: Amsterdam, Bern, Brussels, Karlsruhe, Munich, Vienna and Zurich © Unic - Seite 4
5.
What we are
going to talk about • Writing maintainable and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 5
6.
Starting point • Lots
of people involved • Multiple devs / teams are working on the same project • Sometimes in parallel, sometimes one after another • High degree of uncertainty • Detail specifications and/or design might still be in the works • Interface frontend – backend not yet defined © Unic - Seite 6
7.
Agenda • Writing maintainable
and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 7
8.
Exemplary issues • Issue
#1: HTML code is highly redundant • Issue #2: CSS is location-dependent • Issue #3: CSS assumes too much about the markup • Issue #4: JS is not adequately separated from HTML / CSS • Issue #5: No consistent coding style © Unic - Seite 8
9.
probably copyright-protected screenshot
of “The Office” Issue #1 HTML code is highly redundant
10.
«The customer just
told me he wants Click to editform in the header, after this search Master title style all.» – Project manager © Unic - Seite 10
11.
Problem: Redundant HTML
code is difficult to maintain • Design templates for every existing page type • Usually: 1 design template = 1 HTML file • Changing the structure means changing dozens of HTML files • Find & replace has its limits © Unic - Seite 11
12.
Solution • Modularization of
the HTML • Our tool of choice: Middleman (http://middlemanapp.com) © Unic - Seite 12
13.
Using partials in
middleman • Layout file: <html> <head> <title>My Site</title> </head> <body> <%= partial "header" %> <%= yield %> </body> </html> • Partial: <header> <a href="#" class="logo“>Home</a> </header> © Unic - Seite 13
14.
Disadvantages • Build process
necessary • HTML for one page type spread over many files © Unic - Seite 14
15.
probably copyright-protected screenshot
of “The Office” Issue #2 CSS is location-dependent
16.
«The customer just
told me he wants to Click to edit Master the main content to use this teaser in title style area, too.» – Project manager © Unic - Seite 16
17.
Problem: Location-dependent CSS
is not flexible #sidebar a { color: #c30; text-decoration: none; } #sidebar .teaser { background-image: linear-gradient(to bottom, #ddd, #fff); padding: 1em; } #sidebar .teaser h3 { font-size: 1.2em; font-weight: normal; margin-bottom: 1em; } © Unic - Seite 17
18.
Solution • Modularization • Approach:
OOCSS © Unic - Seite 18
19.
«Basically, a CSS
“object” is a repeating visual pattern, which can be abstracted into an independent snippet of HTML, Click and possibly JavaScript. Once CSS, to edit Master title style created, an object can then be reused throughout a site.» – OOCSS (https://github.com/stubbornella/oocss/wiki) © Unic - Seite 19
20.
Multiple approaches • Some
famous methodologies: • OOCSS by Nicole Sullivan (https://github.com/stubbornella/oocss/) • SMACSS by Jonathan Snook (http://smacss.com/) • BEM by Yandex (http://bem.github.com/) © Unic - Seite 20
21.
Examples (based on
how I understand their docs) • OOCSS: <div class="teaser featured"> <h3 class="title">Title</h3> <div class="bd">Blabla</div> </div> • SMACSS: <div class="teaser is-featured"> <h3>Title</h3> <div class="body">Blabla</div> </div> • BEM <div class="teaser teaser_type_featured"> <h3 class="teaser__title">Title</h3> <div class="teaser__body">Blabla</div> </div> © Unic - Seite 21
22.
probably copyright-protected screenshot
of “The Office” Issue #3 CSS assumes too much about the markup
23.
«We can’t strictly
implement your Click tostructure, our CMS renders HTML edit Master title style additional tags.» – Backend developer © Unic - Seite 23
24.
Example • Before:
<div class="block-teaser"> <h3>Title</h3> <div class="content“>Blabla</div> </div> • After: <div class="block-teaser"> <span id="hfk42342kj:ksa89080hajlk"> <h3>Title</h3> </span> <div class="content“>Blabla</div> </div> © Unic - Seite 24
25.
Problem: CSS assumes
too much about the markup Slide updated to reduce confusion • Avoid • Immediate child selector: .block-teaser > h3 {} • Adjacent sibling selector: .block-teaser .xy + h3 {} • And similar ones .block-teaser .title {} • Use additional classes instead: // or faster regarding // selector matching: .block-teaser-title {} © Unic - Seite 25
26.
Disadvantages • Missing out
on generally useful selectors • Extra markup © Unic - Seite 26
27.
probably copyright-protected screenshot
of “The Office” Issue #4 JS is not adequately separated from HTML / CSS
28.
«Your JavaScript does
not work. How Click to edit Master title style about testing before shipping?» – Backend developer © Unic - Seite 28
29.
Styling hooks used
as JS hooks • JavaScript functionality is coupled too tightly to CSS selectors used for styling • E.g.: Changing a class breaks the JS © Unic - Seite 29
30.
Example • HTML:
<div class=“carousel"> <ul> <li>Hi there</li> <li>Hi there 2</li> </ul> </div> • JS: $(function() { var $target = $('.carousel‘), carousel = new Carousel($target); carousel.init(); }); © Unic - Seite 30
31.
Solution • Use namespaced
classes as your JS “hooks” (i.e. “js-carousel”) • Use data attributes instead of classes © Unic - Seite 31
32.
Example <div class="carousel" data-init="carousel“
data-options='{}'> <ul data-role="items"> <li data-role="item">Hi there</li> <li data-role="item">Hi there 2</li> </ul> </div> © Unic - Seite 32
33.
Disadvantages • Performance of
attribute selectors • Extra markup © Unic - Seite 33
34.
probably copyright-protected screenshot
of “The Office” Issue #5 No consistent coding style
35.
«I just refactored
your multi-line declarations into single-line ones Click to edit Master title style because I like them better.» – Other frontend developer © Unic - Seite 35
36.
Problem: Every developer
follows his own private styleguide • Indentation, spaces: CSS/JS is difficult to read • Structure: Specific parts are hard to find • Versioning: Refactoring messes up history © Unic - Seite 36
37.
Example: Github (https://github.com/styleguide/css) •
Use soft-tabs with a two space indent. • Put spaces after : in property declarations. • Put spaces before { in rule declarations. • Use hex color codes #000 unless using rgba. • Use // for comment blocks (instead of /* */). • Document styles with KSS © Unic - Seite 37
38.
Disadvantages • Takes a
lot of time to develop / agree on • Restricting © Unic - Seite 38
39.
Other examples • Curated
by Chris Coyier, http://css-tricks.com/css-style-guides/: • Google HTML/CSS Style Guide (http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml) • WordPress CSS Coding Standards (http://make.wordpress.org/core/handbook/coding-standards/css/) • «Idiomatic CSS» by Nicolas Gallagher (https://github.com/necolas/idiomatic-css) • … © Unic - Seite 39
40.
probably copyright protected
screenshot of “The Office” Strive to make everyone’s life easier.
41.
Agenda • Writing maintainable
and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 41
42.
Data mocking • Mock
a GET-Request $.get('/js/data/data.json', function(data) { alert('This was easy'); }); • Mock REST (i.e. with Backbone) POST /collection GET /collection[/id] PUT /collection/id DELETE /collection/id © Unic - Seite 42
43.
How can weMaster
title style Click to edit mock this data © Unic - Seite 43
44.
Mock of REST
requests var oldBackboneSync = Backbone.sync; Backbone.sync = function(method, model, options) { … if (method == "delete" || method == "update") // handle id in URL … // is URL mocked? if (urls[baseUrl]) … // is method mocked? … return response[method]; else oldBackboneSync(method, model, options); } © Unic - Seite 44
45.
Mock of REST
requests BackboneMock = { "/request_mocks/collection/": { "read": function () { return [{ "id": "1", "title": "This was hard work!" }] }, "create": function () { return { "id": Math.floor(Math.random()*10000) } }, "delete": function () { return {}; } } }; © Unic - Seite 45
46.
Agenda • Writing maintainable
and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 46
47.
Who does write
unit tests for Click to edit Master title style JavaScript © Unic - Seite 47
48.
Unit testing • Tests
should cover the most important pieces of code • You should test the interface with the backend carefully • You should not test styling or plugins © Unic - Seite 48
49.
Agenda • Writing maintainable
and scalable HTML / CSS • Data mocking • Unit testing • Continuous integration © Unic - Seite 49
50.
Does anybody have
a CI server for the Click to edit Master title style frontend © Unic - Seite 50
51.
Continuous Integration
layout, partials HAML HTML @import "partials/base"; SCSS CSS //= require 'plugins' JS JS Middleman © Unic - Seite 51
52.
Continuous Integration
Check updates Jenkins SVN Source Ruby server Deploy HTML JS CSS Apache server © Unic - Seite 52
53.
Release Management
JS Automated Release CSS HTML Adaption in System Mocks Automated Release © Unic - Seite 53
54.
© Unic -
Seite 54
55.
Unic AG
Rosmarie Wysseier Belpstrasse 48 Senior Frontend Engineer 3007 Bern Tel +41 31 560 12 12 Thomas Jaggi Fax +41 31 560 12 13 Senior Frontend Engineer bern@unic.com www.unic.com © Unic - Seite 55
Jetzt herunterladen