Table Of Contentc
} g ) e ; at c pOpocpneno.Ursninstsnio tncna eolprrripeHns nTPt=dMa( eLtudr hsoe=(ecd )ruLr.smiet)esnh.ntdetj en.o=r(gieuend(stL"eEi"rlss)et ;m;!e"n t{ById("app"); } w( } h)l; i celh!boaeea"unrx v isnp(e{lt(eaFd )rlu(l;iin)emv(;aee)rn);nt ({=);
const personlist
} ; ) c ; c o por!n c ene#s o`rsttd "n<s<tu i< sdop rvph tin pn>e3 v(ce `r "{ ulr(sc csasol:nlesona aarsnls"ms)= is es)"=s= ,=;t t" "i(" h ic}tu=e<sels /aOleep(dnl"ru>eU">)srn>T e"ii!r>ct"s$ol ){re{ nn !aP:"ma et$u}h{s! ie#}srh Os3=n.> Umunasipec(rou;rsnePra t!h" ? } ; ) ;c or!c ne #o` st dn<<tu<isdp rhvti pn3> vce `{ lr(ct casllnsoaaasnssm= sse"===,t "" i(hcitueeslsalOeedln"re"U>r>nT"ii>ct$ol{renn aP:ma et$}h{isOnUnicornPath ? "
c oc }no c;sn otsmn tesA ttPgh Ieoo_tdpUO:tRn iLU"o nGn=iEs cT "o"=hr tn{tPpast:h! $=f raosnytnecn d(u)n i!c"o r{n.com/api";
Edition 2021 };rcceootnnussrttn drdaeatstapa o;=n saew a=i ta wraeistp ofnestec.hj(sAoPnI(_)U;RL + "/users", options
Multipleauthors Multiple authors
Frontend Frontend
Unicorn Unicorn
Learncodefaster,bemoree!cient, become Learn code faster, be more e!cient, become
a high-valued developer and earn more money a high-valued developer and earn more money
Table of
Table of Contents
1/7
INTRO
1. Who is this book for? 7 4. Understanding design 46
2. Frontend Unicorn 11 5. You're the designer! 119
3. Stack decisions 29 6. Nudge the designer 138
LEVEL 1
7. Semantics & Accessibility 155 10. Code =/= Product 208
8. Code = business card 173 11. Developer in a startup 218
9. Back-end basics 190 12. Master GIT 230
FIRST BOSS
13. Work/Life balance 245 15. Time management 267
14. Taking notes 255
LEVEL 2
16. Code review 279 19. The mobile world 316
17. How to learn e!ectively 289 20. Impostor syndrome 327
18. Learn something rare 305 21. Details that make a di!erence 338
FINAL BOSS
22. Debugging 359 24. Useful tools 386
23. Communication skills 373 25. Thank you 401
2
Hello! Szymon, Albert, Albert & Michal here.
Welcome to “Frontend Unicorn”!
A couple of years ago we noticed, that as the front-end development
industry becomes more and more popular, many people are repeating the
same mistakes over and over. That led to junior developers competing in
an unfair ba!le for a cool job, where hourly rates are the only advantage.
Screw that! Unicorns exist and by learning the right approach, you can
become one too. So just a"er writing our super-popular UI design book
(www.designingui.com) we decided to tackle the front-end next. Creating
popular educational materials and speaking at conferences all across
Europe allowed us to distill the best of the best practices for you. Let's go!
3
HYPE4
In 2013 we co-founded HYPE4 - a design-driven so!ware house. Since then,
we've been working for both small startups and Fortune-500 companies
from all over the world. We were lucky enough to be able to work on nearly
every product category (from banking, "nance, advertising, and media to
pregnancy tracking).
We started as a small, design-only studio with three employees.
We did the designs, and then external so!ware houses handled the
development. We quickly noticed a huge problem with that approach. The
execution quality was so low that we were rarely satis"ed.
In some cases, the designs were butchered beyond recognition.
We decided to take action by starting the development branch of
the company but strictly following our design-driven approach.
Our goal was always to work with true unicorn developers - people who
contribute to the project a lot more than 80%-precise execution.
At HYPE4, we build web and mobile products of all sizes. A!er hours we also
work on our internal startups and have a lot of fun doing it.
If you'd like to learn more, go to:
h!ps://www.hype4.com
4
WHY SHOULD I BE A UNICORN?
But why should you even consider becoming a unicorn? There are a
couple of reasons, but the most important two are money and
satisfaction.
By being versatile in improving your skills and also knowing enough of
the surrounding skillsets you'll be able to get much higher hourly rates
than people who "just code". Don't just code, be a unicorn!
But money is one thing. After a while, being able to see how everything
fits together and how you actually make a difference with your work is
even more important. It'll help you to actually be happy with what you
do, and this, my friend, is worth a lot more than money.
So strap in, let's begin our unicorn journey!
And don't forget to
STAY AWESOME!
5
Joke time
We really found this in someone else's code ;)1/7
6
Become a unicorn
1/7
Become a unicorn
1.
Who is this
Become a unicorn
book for?
Become a unicorn
Who w
Who is This Book for?
LET'S START
It's for front-end developers who treat their work seriously and want to grow
as fast as possible.
It's not yet another coding tutorial. We will not teach you loops, conditions,
and functions. You will not learn a hot new framework.
You can learn these things in many places already.
Instead, we'll show you how to transform from a beginner to an
indispensable person in any team. We'll cover techniques, a!itudes, and
mindsets that will kickstart your career.
Coding is just a part of a programmer's job, o"en even not the most
important part. To grow and get recognition, you need much more.
Beginner Developer True Unicorn
8
THE GUIDE
We'll show dozens of tips and tricks - you'll learn how to learn and
communicate with others. How to use version control and work with
designs. If it's the only way, we'll even help you become a designer! We'll
guide you through the process of planning your career. You'll also learn
some o!en overlooked front-end developer skills, like semantics and
accessibility.
In short, we'll show you what you need to know to become a senior
developer. That usually leads to a much higher hourly rates and a bigger
feeling of accomplishment, so it's a win-win situation!
Unicorn developer growth Regular developer growth
Your hourly rates can grow faster or slower. You can take the standard path and reach seniority in a couple of
years, or become a unicorn and reach that point faster while also feeling happier about the quality of your work.
This book is not a silver bullet. A lot of work is waiting for you. The journey
from someone who knows the basics of programming to a competent
developer is hard and long. Our job is to make sure you understand what
you need to learn and how to learn it. Your job is to put in the work.
Good luck, and have fun!
9
We give you the skills We give you the skills
“
and tricks, but you still and tricks, but you still
need to put in the work. need to put in the work.
