Your SlideShare is downloading. ×
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Pre-processing for Fronteers by Viking Kristof Houben
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Pre-processing for Fronteers by Viking Kristof Houben

4,724

Published on

On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'. …

On 22/6/2012 Viking Kristof Houben gave a presentation at 'Fronteers' about 'Pre-processing'.

The organization 'Fronteers' wants to professionalize the job of front-end web development. It strives for the recognition and support of Dutch speaking front-end web developers.

'Fronteers' unites about 450 front-end web developers in Belgium and The Netherlands.

Enjoy!

22/6/2012 Fronteers by Kristof Houben

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,724
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Pre-processingINCEPTION ALL OVER AGAIN!
  • 2. RIPARJAN EISING He’s not really dead :)
  • 3. Hi, I’m Kristof@houbenkristof — kristof@treeshadow.be
  • 4. Front-end/designat Mobile Vikings
  • 5. I’m always up for aChallenge
  • 6. Run a small firm CALLED TREESHADOW MEDIA
  • 7. Creative BrewskiTOGETHER WITH @TOMCLAUS & @DENNISJANSSEN
  • 8. LEt’s TALKCSS
  • 9. "You don’t need a new stylesheetsyntax, CSS is simple and you’re a moron if you can’t do it."
  • 10. C’est très simple
  • 11. Not that easy to maintain
  • 12. Stylesheets evolve
  • 13. Simplicity creates complexity
  • 14. Keep things DRY DON’T REPEAT YOURSELF
  • 15. we shouldReference to existinginformation
  • 16. "CSS is the weakest link in the web developerstoolbox. The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block."
  • 17. It’s all aboutAbstractions
  • 18. CSS PRIMITIVES HAVE NO MEANING
  • 19. That’s our job!
  • 20. Abstractions ARE GROUPS OF PRIMITIVES
  • 21. Abstractions arenot abstract to us
  • 22. We give BUILDING BLOCKs meaningSO IT MAKES IT EASIER FOR US TO UNDERSTAND
  • 23. OurDESIGNSCHANGE
  • 24. A kitten dies everytime that happens
  • 25. Find & replaceOH PLEASE, DON’T GET ME STARTED!
  • 26. Client: “We want #000 to be #333 but not the user information underneath my #bada55 body text, oh while youre at itcould you position absolute that element and rotate it a gazillion degrees, … oh, #333 doesnt look that great after all… Change it back!”
  • 27. You’re screwed
  • 28. What do weNEED?
  • 29. The interior decorator!
  • 30. Decorates with parts
  • 31. He does not make those parts LAMPS, TABLES, CHAIRS…
  • 32. PArts for PArts
  • 33. Oh my godYOU REUSED A BUTTON!
  • 34. When elements are commonREUSE tHEM!
  • 35. Focus!ON WHAT IS IMPORTANT,YOU MUST!
  • 36. Hard to upgrade Customized thirdparty stylesheets
  • 37. Clearly we are in need of some Pre-processing
  • 38. "In computer science, a preprocessor is aprogram that processes its input data to produce output that is used as input to another program.” — Wikipedia
  • 39. SyntacticCUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD IMPROVEMENTS
  • 40. ex. SASS & LESS
  • 41. Keeping things maintainable
  • 42. SASSBY HAMPTON CATLIN & NATHAN WEIZENBAUM
  • 43. Written in Ruby
  • 44. Don’t worry, there are also GUI’s
  • 45. Watches folders &compiles on save
  • 46. 2007ORIGINAL SASS SYNTAX
  • 47. Hard to convertexisting CSS TO SASS
  • 48. 2010SASS 3 INTRODUCES SCSS
  • 49. Regular CSS = VALID SCSS
  • 50. BUT WAIT there’s also COMPASS
  • 51. It’s chock full of the web’s bestreusable patterns.
  • 52. Also contains other cool features IMAGE SPRITING, COLOR FUNCTIONS
  • 53. LESSYou say
  • 54. It’s all javascriptORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
  • 55. Regular CSS = VALID LESS
  • 56. LESS INSPIRED SCSS
  • 57. LESS VS SASSThanks to Chris Eppstein - https://gist.github.com/674726
  • 58. Learning curveYOU HAVE TO KNOW JACK SH*T ABOUT THE CLI
  • 59. CODEKIT IS HOT!
  • 60. CSS3 HelpersSASS HAS COMPASS, LESS DOES NOT
  • 61. Variables
  • 62. Mixins
  • 63. Extending
  • 64. Custom units in SASSMAKING THE LANGUAGE MORE FUTUREPROOF
  • 65. Looping
  • 66. DEMO
  • 67. Thank you!
  • 68. Resources:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/http://sonspring.com/journal/sass-for-designershttp://css-tricks.com/sass-vs-less/http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/
  • 69. Questions?

×