Presentación realizada en el #webcat Barcelona de Junio 2013 Autor: Daniel Guillan (@danielguillan) ------------------------------------------------ RECURSOS: - Ulabox www.ulabox.com

1. Pushing
the boundaries
Daniel Guillan

2. @DanielGuillan
+ ?

3. @DanielGuillan
+ ?

4. @DanielGuillan

5. Pushing
the boundaries

6. From obstacles
to challenges

7. Leaving
the comfort
zone

8. Driven by
motivation

9. Why?

10. You should know how
your product works

11. Specialization
is great.
!
But…

12. No need to be a
unicorn.
Just care about
your craft.

13. “UI is software, so designers
should know how to program.”
—Ryan Singer

14. Speed and
Performance are
design concerns

15. Old ulabox.com
116 requests
1.1 MB
!
New responsive ulabox.com
(wide screen)
37 requests
349 KB

18. The user interface
should drive product
development

19. Front-end
developers should
care about
Typography
Structure
Rhythm
Color
…

20. Caring about
common concerns
is the key

21. Learn by doing

22. $ Don’t fucking fear me

24. jQuery slideshow plugin

25. Lightweight jQuery slideshow plugin

26. jQuery:
Slideshow Plugin:
32kB
16kB

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

28. Magic is done
by magicians

29. Awesome tools!

30. Don’t use them just
because you’re lazy
to run this simple
command
$ sass --watch scss:css

31. Bootstrap
is sleek and awesome! But no, thanks!

32. Build your own stuff

33. I made a few
advanced things:
Responder
Bellboy
Prelude

34. Stimulate your
curiosity and you’ll
find the spark
for learning

35. Once you do some
magic on your own
you’re pushing the
boundaries

36. Thanks!
@DanielGuillan