Front End Overview for Interns 2015

Front End Team

Rachel Ober Core 2 Adam Christie Create Dan “With a
Beard” Cicconi Events Joseph Natalzia Events Kelly Sly Front Door Peter Margaritoff Front Door

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

WE ALSO MAKE THINGS LOOK PRETTY

What is Haml? • Lightweight markup language to describe XHTML
• Designed to address many of the ﬂaws in traditional template engines • Trying to make markup as elegant as it can be

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

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>

Haml Fast Facts • White-space signiﬁcant • 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

(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 ﬁnd in the Haml documentation… click = succeed ‘.’ do %a{ href: “thing” } here click <a href=“thing”>here</a>.

Scalable Vector Graphics

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

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>

(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 ﬁle • Pattern Guide includes iconiﬁed classes (available “soon”) • Responsive SVG need proportional dimensions

We use Sass at Paperless Post

Why Sass? • Variables • @import • Mixins • @extend
• You’re programming styles instead of just writing CSS

CSS Box Model (not as cute nor fun as kittens)

CSS Box Model

CSS Box Model with border-box

Box Model in Developer Tools

BEM Block - Element - Modiﬁer

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.

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.

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.

• 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

BEM Naming Conventions • Blocks: prefix-block-name • Elements: b-block-name_ _element-name
• Modiﬁers: usually adding --modifier-name

CSS & JavaScript • Don’t closely couple style & behavior
• Either use a js- preﬁx class • eg: js-dropdown-menu • Or use a data- attribute that can be targeted by JavaScript • eg: { data-javascript-hook: dropdown-menu }

CSS Speciﬁcity !important IDs Classes Elements inline Inline Styles normal
IDs Classes Elements

Pattern Guide

Pattern Guide • “Modules” of code and style ﬁtting the
Brand designed to be reusable. • Available as a Ruby gem or npm package to be included in your apps.

Front End Overview for Interns 2015

Front End Overview for Interns 2015

Rachel Ober

More Decks by Rachel Ober

Other Decks in Programming

Featured

Transcript

Front End Team

Rachel Ober Core 2 Adam Christie Create Dan “With a

Front End Team • Work together with Product Design &

WE ALSO MAKE THINGS LOOK PRETTY

Haml

What is Haml? • Lightweight markup language to describe XHTML

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

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

Haml Fast Facts • White-space signiﬁcant • Use 2 spaces

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

SVG

Scalable Vector Graphics

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

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"

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

CSS

We use Sass at Paperless Post

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

CSS Box Model (not as cute nor fun as kittens)

CSS Box Model

CSS Box Model with border-box

Box Model in Developer Tools

BEM Block - Element - Modiﬁer

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

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

Element • Element is a part of a block, that

• Modiﬁers are properties of blocks and elements; they change

BEM Naming Conventions • Blocks: prefix-block-name • Elements: b-block-name_ _element-name

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

CSS Speciﬁcity !important IDs Classes Elements inline Inline Styles normal

Pattern Guide

Pattern Guide • “Modules” of code and style ﬁtting the