Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What is the next step for a front end beginner

Randy Lien
December 22, 2014

What is the next step for a front end beginner

An introduction for people who want to learn more in front end technology

Randy Lien

December 22, 2014
Tweet

More Decks by Randy Lien

Other Decks in Programming

Transcript

  1. Performance Challenge • How to handle DDoS ? • How

    to provide good user experience ? • 1 second display 6
  2. Architecture Challenge • How to maintain large app’s architecture? •

    How to collaborate with others? • How to test? • How to do automation? • How long can your architecture live? • Performance, Readability, Scalability, Package Size 8
  3. Reusable Component Challenge • What is your reusable component strategy

    ? • How to manage your components ? • How can you reuse it ? • How to persuade your colleagues ? • How to solve legacy problems ? 10
  4. Next • Be a CSS Samurai • Be a JavaScript

    Ninja • Read codes (Github is a good playground) • Watch Conference • Design your own product 12
  5. Be A Css Samurai • Use Preprocessor • Learn CSS

    framework • Understand OOCSS and SMACSS concept 13
  6. Understand Oocss & Smacss • Identify reusable objects • Minimize

    selectors • Extend your classes • Sub classing <div class=”box box-highlight”></div> • Style separate from content • Content separate from container • Design a module without its context 17
  7. Css Naming • Layout • Use l- or layout- •

    layout-passwords • State • Use is- as a prefix • is-hidden, is-enable, is-disable, is-selected • Module • Go with the name of module itself • Use the module name as prefix for its variation • .navigation, .navigation-primary 19
  8. Be A Javascript Ninja • Use jQuery but don’t be

    controlled (Cost $) • Study Design Patterns • Pick a framework and understand how it works 20
  9. Pick A Framework And Understand How It Works • Understand

    how MVC framework works • Backbone.js/Marionette.js is a good start • Try to use RequireJS or Browserify to manage your modules • Try React 22
  10. About Front End Development • Web technology is everywhere. •

    Keep the fundamental in mind. • Always be curious and humble. • It is a long journey and you will learn new things and enjoy it. • Don’t think, just do it. 25