Table Of Content

c } g ) e ; at c pOpocpneno.Ursninstsnio tncna eolprrripeHns nTPt=dMa( eLtudr hsoe=(ecd )ruLr.smiet)esnh.ntdejt eno.=r(igeuneds(tLe"Eir"lss)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 po!rn c en#es o`rsdtt "n<s<tiu < sdop vrph tin p>ne3 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 caslnlsoaaasnsms= ses"==,=t " "i(hictueselsaOleednl"reU">rn>T"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 2022 };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 25. How to get a raise 401 23. Communication skills 373 26. Thank you 418 24. Useful tools 386 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 ﬁts 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.