From student to web professional: Hints, tips & cheat codes

A presentation I gave for the CS359 - Web Programming students in Computer Science Department of University of Crete.

*wipes tear*

Transcript

1. From student to web professional Hints, tips & cheat codes Zaharenia Atzitzikaki •
2. From student to web professional Hints, tips & cheat codes Zaharenia Atzitzikaki •
3. Hi.
4. I’m Zaharenia.
5. I’m a designer.
6. I’m a designer.
7. I’m a designer. Now Lead Designer at Workable
8. I’m a designer. Previously freelancing, agency work Now Lead Designer at Workable
9. class00
10. Two parts
11. Two parts
12. Two parts Part 1: Let’s talk
13. Two parts Part 1: Let’s talk Part 2: Technical
14. From Uni to real life
15. What CSD taught me
16. WHAT CSD TAUGHT ME How to learn stuff
17. WHAT CSD TAUGHT ME How to work with others
18. WHAT CSD TAUGHT ME How to embrace design
19. STOP! HAMMER TIME. Designer? Why?!
20. What CSD didn’t teach me
21. WHAT CSD DIDN’T TEACH ME How to be professional
22. WHAT CSD DIDN’T TEACH ME How to work efficiently
23. WHAT CSD DIDN’T TEACH ME How to market my skills
24. Where are the jobs?
25. WE’RE LUCKY Demand >>>>> Supply
26. “ If you work on the Web and you complain about the financial crisis, you do something wrong. „ Thanos Papavasileiou • UpNorth Conference
27. FIVE YEARS AGO Limited options
28. Corporate or freelance
29. Few startups
30. Limited funding options
31. TODAY Options galore
32. Think global
34. Freelance.
35. Freelance. Work in a start-up.
36. Freelance. Work in a start-up. Sell digital goods.
37. Working in a startup
38. Start-ups != 
 old-school corporate
39. Flexibility
40. Satisfaction
41. Minimum Viable Product
42. Start small
43. MVP does not imply bad design
44. Kirill Shikhanov
45. Rapid iterations
46. Ship first, worry later
47. Done is better than perfect
48. Teamwork is everything
49. Word of advice
50. Don’t stop learning
51. Develop your social skills
52. Allie Brosh
53. Networking
54. Learn & help others learn
57. Level up your CSS
58. Preprocessors
59. Prepro… what?
61. Sass
62. Sass LESS
63. Sass LESS Stylus
64. Sass LESS Stylus
65. WHY SASS? Variables
66. // A nightmare to maintain a { color: #fc3; } p { color: #fc3; } nav { background-color: #fc3; }
67. // Variables are cool! $brand-color: #fc3; a { color: $brand-color; } p { color: $brand-color; } nav { background-color: $brand-color; }
68. WHY SASS? Nesting
69. <header role="banner"> <div id="logo"> <img src="logo.png" alt="Sasquatch" /> </div> <h1>Sasquatch Records</h1> </header>
70. header[role="banner"] { margin: 20px 0 30px 0; #logo { float: left; margin: 0 20px 0 0; img { display: block; opacity: .95; } } }
71. WHY SASS? @mixin - @extend
72. // Lots of repetitive styles p { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } footer { margin-bottom: 20px; font-size: 14px; line-height: 1.5; }
73. // Abstract them in a mixin! @mixin default-type { margin-bottom: 20px; font-size: 14px; line-height: 1.5; } p { @include default-type; } footer { @include default-type; }
74. .alert { padding: 15px; font-size: 1.2em; text-align: center; background: $color-accent; } .important { font-size: 4em; }
75. // Combine styles without code bloat .alert-positive { @extend .alert; @extend .important; background: #9c3; }
76. .alert, alert-positive { padding: 15px; font-size: 1.2em; text-align: center; background: #ea4c89; } .important, .alert-positive { font-size: 4em; } .alert-positive { background: #9c3; }
77. WHY SASS? Partials
79. _header.scss
80. _body.scss _header.scss
81. _body.scss _header.scss _footer.scss
82. _body.scss _header.scss _footer.scss
83. _body.scss _header.scss style.scss _footer.scss
84. _body.scss _header.scss style.scss _footer.scss style.css
85. // Import shared styles @import 'shared/alerts'; @import 'shared/avatars'; @import 'shared/loaders'; // Import base styles @import 'backend/base/grid'; @import 'backend/base/icons'; @import 'backend/base/typography'; @import 'backend/base/forms'; // Import modules @import 'backend/modules/billing'; @import 'backend/modules/filters';
86. Modularize
87. CSS sucks at scaling
88. Design systems, not pages
89. HOW? Create modules by observing patterns
90. HOW? Create layouts for different sections
91. Everything is a module
93. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
94. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
95. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a posuere velit.
96. <div class="media"> <a href="http://twitter.com/stubbornella" class="img"> <img src="profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div>
97. .media, .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; } .media .imgExt { float:right; margin-left: 10px; }
98. Modules should do one thing and one thing only
99. Combine modules for fun and profit
100. Modules should be oblivious of their context
101. WHAT’S THE BENEFIT? Complexity is limited
102. WHAT’S THE BENEFIT? Code is predictable
103. Rules of the game
104. RULE #1 You need version control
105. RULE #2 Obey rule #1
106. RULE #3 Your text editor is your friend
107. RULE #4 You + MVC + OO = LFE
108. RULE #5 It’s never too early to worry about performance
109. RULE #6 Automate boring work
110. Thanks! You rock. Zaharenia Atzitzikaki •