SlideShare a Scribd company logo
1 of 36
Download to read offline
Pushing
the boundaries
Daniel Guillan
@DanielGuillan
+ ?
@DanielGuillan
+ ?
@DanielGuillan
Pushing
the boundaries
From obstacles 

to challenges
Leaving 

the comfort
zone
Driven by
motivation
Why?
You should know how
your product works
Specialization
is great.
!

But…
No need to be a
unicorn. 

Just care about 

your craft.
“UI is software, so designers
should know how to program.”
—Ryan Singer
Speed and
Performance are
design concerns
Old ulabox.com
116 requests
1.1 MB
!

New responsive ulabox.com
(wide screen)
37 requests
349 KB
The user interface
should drive product
development
Front-end
developers should
care about
Typography
Structure
Rhythm
Color
…
Caring about
common concerns 

is the key
Learn by doing
$ Don’t fucking fear me
jQuery slideshow plugin
Lightweight jQuery slideshow plugin
jQuery:
Slideshow Plugin:

32kB
16kB
It only takes 10 lines of vanilla JS 

to do what we wanted
var current = 0,
slides = document.getElementsByTagName("img");

!

setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : current = 0;
slides[current].style.opacity = 1;
}, 3000);

300 bytes vs 49.000
Magic is done 

by magicians
Awesome tools!
Don’t use them just
because you’re lazy
to run this simple
command
$ sass --watch scss:css
Bootstrap
is sleek and awesome! But no, thanks!
Build your own stuff
I made a few
advanced things:
Responder
Bellboy
Prelude
Stimulate your
curiosity and you’ll
find the spark 

for learning
Once you do some
magic on your own
you’re pushing the
boundaries
Thanks!
@DanielGuillan

More Related Content

Viewers also liked

PolicyLab Change Cards
PolicyLab Change CardsPolicyLab Change Cards
PolicyLab Change CardsPolicy Lab
 
10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer ExperienceYuan Wang
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanPost Planner
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionIn a Rocket
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting PersonalKirsty Hulse
 

Viewers also liked (6)

Sincronia y diacronia noemi
Sincronia y diacronia noemiSincronia y diacronia noemi
Sincronia y diacronia noemi
 
PolicyLab Change Cards
PolicyLab Change CardsPolicyLab Change Cards
PolicyLab Change Cards
 
10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience10 Insightful Quotes On Designing A Better Customer Experience
10 Insightful Quotes On Designing A Better Customer Experience
 
How to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media PlanHow to Build a Dynamic Social Media Plan
How to Build a Dynamic Social Media Plan
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
SEO: Getting Personal
SEO: Getting PersonalSEO: Getting Personal
SEO: Getting Personal
 

Similar to Pushing the boundaries

The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101kellyhousholder
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernFITC
 
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.comAdobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.comChristopher Cubos
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with CanvasJason Harwig
 
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Jason Strimpel
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin HowlettFITC
 
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Learnosity
 
Openmind magnolia modules 2010
Openmind magnolia modules 2010Openmind magnolia modules 2010
Openmind magnolia modules 2010fabrizio giustina
 
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignJohannes Ippen
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web DesignKoji Ishimoto
 
Design Processes and Systems in Craft
Design Processes and Systems in CraftDesign Processes and Systems in Craft
Design Processes and Systems in CraftCourtney Bradford
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performancedmethvin
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfAndrea Verlicchi
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1Vitali Pekelis
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsdavrous
 

Similar to Pushing the boundaries (20)

The Art of Web Design, 101
The Art of Web Design, 101The Art of Web Design, 101
The Art of Web Design, 101
 
Getting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James HalpernGetting Intimate with Images on Android with James Halpern
Getting Intimate with Images on Android with James Halpern
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.comAdobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
Adobe Edge Technology Preview - Web Development Month 2011 SiliconGulf.com
 
Advanced Web Graphics with Canvas
Advanced Web Graphics with CanvasAdvanced Web Graphics with Canvas
Advanced Web Graphics with Canvas
 
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
Satisfying Business and Engineering Requirements: Client-server JavaScript, S...
 
Nakal
NakalNakal
Nakal
 
Performance as UX with Justin Howlett
Performance as UX with Justin HowlettPerformance as UX with Justin Howlett
Performance as UX with Justin Howlett
 
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
Educate 2017: Quick 'n Lazy: How we keep things speedy while staying out of y...
 
UX for Developers
UX for DevelopersUX for Developers
UX for Developers
 
Data layers 101
Data layers 101Data layers 101
Data layers 101
 
Openmind magnolia modules 2010
Openmind magnolia modules 2010Openmind magnolia modules 2010
Openmind magnolia modules 2010
 
Openmind modules 2010
Openmind modules 2010Openmind modules 2010
Openmind modules 2010
 
Design ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial DesignDesign ♥ HTML5 – The Future of Mobile Editorial Design
Design ♥ HTML5 – The Future of Mobile Editorial Design
 
High Performance Web Design
High Performance Web DesignHigh Performance Web Design
High Performance Web Design
 
Design Processes and Systems in Craft
Design Processes and Systems in CraftDesign Processes and Systems in Craft
Design Processes and Systems in Craft
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
How and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdfHow and Why ($) to improve web performance.pdf
How and Why ($) to improve web performance.pdf
 
Android design lecture #1
Android design   lecture #1Android design   lecture #1
Android design lecture #1
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 

Recently uploaded

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphNeo4j
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Hyundai Motor Group
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetEnjoy Anytime
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 

Recently uploaded (20)

Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge GraphSIEMENS: RAPUNZEL – A Tale About Knowledge Graph
SIEMENS: RAPUNZEL – A Tale About Knowledge Graph
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2Next-generation AAM aircraft unveiled by Supernal, S-A2
Next-generation AAM aircraft unveiled by Supernal, S-A2
 
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your BudgetHyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
Hyderabad Call Girls Khairatabad ✨ 7001305949 ✨ Cheap Price Your Budget
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 

Pushing the boundaries