wtfrontend!?

but seriously, this will explain front end development

the stack



Dev Ops
Back End
Front End

The stack


Dev Ops
Dev Ops people are basically machine magicians.

Your laptop is a machine.
A server is a machine.
'The Cloud' is a bunch of servers, which are machines.

THE STACK


Back End
Back enders write code to put on the machines.

They usually look at crazy looking hacker screenz all day.

  • Ex: Calculate who to follow on twitter
  • Ex: Match you up with cuties on OkCupid
  • Ex: Create databases of information like Spotify!

THE STACK


Front End

We convince a browser to talk to the code on the machines

... and make things look pretty.

the stack

                                                                   

design & front end



  • Communicate to meet realistic goals
  • Translate final version to the web
  • Adapt and iterate changes

Ui/ux & front end


How do users *actually* use your site?


  • A/B testing: Do users click A or B more?
    • sorry designers...
  • Iterating changes on the fly
  • Testing iterations for site-wide errors

Average day @ work


  • New Site Feature 
    • Talk to Back Ender about how to grab data
      • ex: a user's submitted photos
    • Talk to Designer about limits with design
      • ex: can only show four photos per page
  • Look for existing bugs
    • Consult with team as needed, or fix
  • WRITE TESTS FOR EVERYTHING!

common languages

Example

        1. HTML - Hyper Text Markup Language

          • Your body

               2.  CSS - Cascading Style Sheets
          • Your wardrobe/makeup

               3.  Javascript- has NOTHING to do with Java!
          • Your attitude! What you do!


common tools



  • XScope- grabs pixel measurements
  • Adobe Photoshop- medium for designers/front devs
  • Adobe Illustrator- helps create webfonts
  • Glpyhs- helps creates webfonts
  • Web Inspector/Console

current trends


  • CoffeScript http://coffeescript.org/
  • jQuery http://jquery.com/
  • node.js http://nodejs.org/
  • SASS http://sass-lang.com/
  • HAML http://haml.info/
  • Compass http://compass-style.org/
  • Responsive Design, Adaptive Design
    • Foundation/Bootstrap http://foundation.zurb.com/
  • Client-side applications
  • OOB Javascript
    • Backbone http://backbonejs.org/

manic-pixie-dream-job


oh god, run




  • Flexibility w/ Design/Code
  • ONE job position/responsibility
  • 'UX/Design Interns'

Where are we?


  • Everyone loves twitter.
    • https://twitter.com/csswizardry/followers
    • https://twitter.com/LeaVerou/followers
  • Open Source Projects


<h1>

THANK you!

</H1>

h1 { font-color: lightPink; } 

Made with Slides.com