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

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*

1b8ad785acdd1ce1c99914b1c2a4e10e?s=128

Zaharenia Atzitzikaki

May 20, 2015
Tweet

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

  33. None
  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

  55. None
  56. None
  57. Level up your CSS

  58. Preprocessors

  59. Prepro… what?

  60. None
  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

  78. None
  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

  92. None
  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 •