A presentation I gave for the CS359 - Web Programming students in Computer Science Department of University of Crete.
*wipes tear*
From student to web professionalHints, tips & cheat codesZaharenia Atzitzikaki •
View Slide
Hi.
I’m Zaharenia.
I’m a designer.
I’m a designer.Now Lead Designer at Workable
I’m a designer.Previously freelancing, agency workNow Lead Designer at Workable
class00
Two parts
Two partsPart 1: Let’s talk
Two partsPart 1: Let’s talkPart 2: Technical
From Uni to real life
What CSD taught me
WHAT CSD TAUGHT MEHow to learn stuff
WHAT CSD TAUGHT MEHow to work with others
WHAT CSD TAUGHT MEHow to embrace design
STOP! HAMMER TIME.Designer? Why?!
What CSD didn’t teach me
WHAT CSD DIDN’T TEACH MEHow to be professional
WHAT CSD DIDN’T TEACH MEHow to work efficiently
WHAT CSD DIDN’T TEACH MEHow to market my skills
Where are the jobs?
WE’RE LUCKYDemand >>>>> Supply
“ If you work on the Web and youcomplain about the financialcrisis, you do something wrong. „Thanos Papavasileiou • UpNorth Conference
FIVE YEARS AGOLimited options
Corporate or freelance
Few startups
Limited funding options
TODAYOptions galore
Think global
Freelance.
Freelance.Work in a start-up.
Freelance.Work in a start-up.Sell digital goods.
Working in a startup
Start-ups != old-school corporate
Flexibility
Satisfaction
Minimum Viable Product
Start small
MVP does not implybad design
Kirill Shikhanov
Rapid iterations
Ship first, worry later
Done is better than perfect
Teamwork is everything
Word of advice
Don’t stop learning
Develop your social skills
Allie Brosh
Networking
Learn & help others learn
Level up your CSS
Preprocessors
Prepro… what?
Sass
SassLESS
SassLESSStylus
WHY SASS?Variables
// A nightmare to maintaina { color: #fc3; }p { color: #fc3; }nav { background-color: #fc3; }
// Variables are cool!$brand-color: #fc3;a { color: $brand-color; }p { color: $brand-color; }nav { background-color: $brand-color; }
WHY SASS?Nesting
Sasquatch Records
header[role="banner"] {margin: 20px 0 30px 0;#logo {float: left;margin: 0 20px 0 0;img {display: block;opacity: .95;}}}
WHY SASS?@mixin - @extend
// Lots of repetitive stylesp {margin-bottom: 20px;font-size: 14px;line-height: 1.5;}footer {margin-bottom: 20px;font-size: 14px;line-height: 1.5;}
// 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; }
.alert {padding: 15px;font-size: 1.2em;text-align: center;background: $color-accent;}.important {font-size: 4em;}
// Combine styles without code bloat.alert-positive {@extend .alert;@extend .important;background: #9c3;}
.alert, alert-positive {padding: 15px;font-size: 1.2em;text-align: center;background: #ea4c89;}.important, .alert-positive {font-size: 4em;}.alert-positive {background: #9c3;}
WHY SASS?Partials
_header.scss
_body.scss_header.scss
_body.scss_header.scss_footer.scss
_body.scss_header.scssstyle.scss_footer.scss
_body.scss_header.scssstyle.scss_footer.scssstyle.css
// 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';
Modularize
CSS sucks at scaling
Design systems, not pages
HOW?Create modules byobserving patterns
HOW?Create layouts fordifferent sections
Everything is a module
Lorem ipsum dolor sit amet,consectetur adipiscing elit.Donec a posuere velit.
class="img">@Stubbornella 14 minutes ago
.media, .bd { overflow:hidden; }.media .img { float:left; margin-right: 10px; }.media .img img { display:block; }.media .imgExt { float:right; margin-left: 10px; }
Modules should do onething and one thing only
Combine modulesfor fun and profit
Modules should beoblivious of their context
WHAT’S THE BENEFIT?Complexity is limited
WHAT’S THE BENEFIT?Code is predictable
Rules of the game
RULE #1You need version control
RULE #2Obey rule #1
RULE #3Your text editor isyour friend
RULE #4You + MVC + OO = LFE
RULE #5It’s never too early toworry about performance
RULE #6Automate boring work
Thanks! You rock.Zaharenia Atzitzikaki •
sugarenia
uxevents
sugiyama_sukedachi
hik0107
miure
ikuhotamura
naoenomoto
stephaniewalter
sakito
tapidokes
onf
jmmastey
wjessup
mraible
smashingmag
hursman
kastner
yeseniaperezcruz
62gerente
zakiwarfel
michaelherold
eitanlees
jonyablonski