Front End Overview for Interns 2015

Front End Overview for Interns 2015

An overview of how Paperless Post uses Haml, Sass, SVG in our projects.

297d4a4b165eb79b7e341645a05c70d6?s=128

Rachel Ober

June 16, 2015
Tweet

Transcript

  1. 2.

    Rachel Ober Core 2 Adam Christie Create Dan “With a

    Beard” Cicconi Events Joseph Natalzia Events Kelly Sly Front Door Peter Margaritoff Front Door
  2. 3.

    Front End Team • Work together with Product Design &

    Back End Developers • Set front end coding standards • Build reusable components (into the Pattern Guide) • Maintain Pattern Guide • Ensure consistency across entire product
  3. 5.
  4. 6.

    What is Haml? • Lightweight markup language to describe XHTML

    • Designed to address many of the flaws in traditional template engines • Trying to make markup as elegant as it can be
  5. 7.

    Haml Example !!! %html{ :xmlns => "http://www.w3.org/1999/xhtml", :lang => "en",

    "xml:lang" => "en"} %head %title BoBlog %meta{"http-equiv" => "Content-Type", :content => "text/html; charset=utf-8"} %link{"rel" => "stylesheet", "href" => "main.css", "type" => "text/css"} %body #header %h1 BoBlog %h2 Bob's Blog #content - @entries.each do |entry| .entry %h3.title= entry.title %p.date= entry.posted.strftime("%A, %B %d, %Y") %p.body= entry.body #footer %p All content copyright © Bob
  6. 8.

    Example XHTML Output <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>BoBlog</title> <meta content='text/html; charset=utf-8' http-equiv='Content-Type' /> <link href="/stylesheets/main.css" media="screen" rel="Stylesheet" type="text/css" /> </head> <body> <div id='header'> <h1>BoBlog</h1> <h2>Bob's Blog</h2> </div> <div id='content'> <div class='entry'> <h3 class='title'>Halloween</h3> <p class='date'>Tuesday, October 31, 2006</p> <p class='body'> Happy Halloween, glorious readers! I'm going to a party this evening... I'm very excited. </p> </div> <div class='entry'> <h3 class='title'>New Rails Templating Engine</h3> <p class='date'>Friday, August 11, 2006</p> <p class='body'> There's a very cool new Templating Engine out for Ruby on Rails. It's called Haml. </p> </div> </div> <div id='footer'> <p> All content copyright © Bob </p> </div> </body> </html>
  7. 9.

    Haml Fast Facts • White-space significant • Use 2 spaces

    for indentation • “%” starts a new tag • If you start a line with a css class/id (.class-name/#class-name) it assumes a <div> • “-” Executes Ruby code • “=” Displays the outputted Ruby code • Use Ruby helpers like image_tag instead of Haml tags like %img
  8. 10.

    (Some) Haml Gotchas • Haml isn’t great for large pieces

    of text. • In order to put a period after an anchor link you do this stupid thing: • Plus other “stuff” you’ll find in the Haml documentation… click = succeed ‘.’ do %a{ href: “thing” } here click <a href=“thing”>here</a>.
  9. 11.

    SVG

  10. 13.

    Why SVG? • SVG are basically images in code (XML)

    • Highly manipulatable with CSS • Ready for Retina and HD displays • Can be resized without artifacts • Product Design only has to create the asset once, Front End Team does the rest of the work
  11. 14.
  12. 15.

    SVG Code Example <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="download" class="svg-download-photos" x="0px"

    y="0px" viewBox="0 0 520 520" enable-background="new 0 0 520 520" xml:space="preserve"> <g> <polygon points="380,60 380,80 500,80 500,500 20,500 20,80 120,80 120,60 0,60 0,520 520,520 520,60 "/> </g> <polygon points="370,300 353,283 260,381 260,0 240,0 240,381 147,283 130,300 250,420 "/> </svg>
  13. 16.

    (Some) SVG Gotchas • You still need a PNG version

    to support old browsers • However, we have a script that does it for us (HUZZAH) • SVG straight out of Illustrator can have extra crap in them • Run it through an optimizer before sending to production • When using React, to inline SVG you need to make a separate .js file • Pattern Guide includes iconified classes (available “soon”) • Responsive SVG need proportional dimensions
  14. 17.

    CSS

  15. 19.

    Why Sass? • Variables • @import • Mixins • @extend

    • You’re programming styles instead of just writing CSS
  16. 25.

    Why BEM? As our Front End team grew, we needed

    a way to communicate code without intersecting and over-writing each other all the time.
  17. 26.

    Block • Block is an independent entity, a "building block"

    of an application. • Blocks contain information about themselves and their children (block elements). • Blocks can be used on their own or as a part of other blocks.
  18. 27.

    Element • Element is a part of a block, that

    performs a certain function. • Block elements can only appear inside their respective blocks. Elements can be mandatory and optional.
  19. 28.

    • Modifiers are properties of blocks and elements; they change

    appearance or behavior of the elements, they are applied to. • Each modifier has a name and a value. Multiple modifiers can be applied simultaneously. Modifier
  20. 30.

    CSS & JavaScript • Don’t closely couple style & behavior

    • Either use a js- prefix class • eg: js-dropdown-menu • Or use a data- attribute that can be targeted by JavaScript • eg: { data-javascript-hook: dropdown-menu }
  21. 33.

    Pattern Guide • “Modules” of code and style fitting the

    Brand designed to be reusable. • Available as a Ruby gem or npm package to be included in your apps.
  22. 34.