what front-end developers (fed's) need to know to be the modern day superhero

What the FED’s need to know to be…

a modern-day Superhero.

IT’S THE CHURCH OF

FRONT-END-DEVELOPMENT

What are wetalking about….

bit.ly /FlyingSwanKick

STANDUP IF YOU ARE A… Developer

STANDUP IF YOU ARE A… Designer

STANDUP IF YOU ARE A… Writer

We do better whenWE SELF IDENTIFY

JOSH@jnorthcott

COREY@craql

JUSTIN@jrhough

Doing TeamDevelopmentand Design

HOW TO MAKE THIS

AN AWESOME RELATIONSHIP

DO FUN THINGS TOGETHER

THAT’S NOT WORK RELATED

FIND ANOTHER DEV

TO PUSH EACH OTHER

ESTABLISH

TEAM ACCOUNTABILITY

MAKE DECISIONS TOGETHER

DemandConstraints!

DemandConstraints!YOU NEED CONSTRAINTS!

DESIGN, DEVELOPMENT,

CONTENT, OBJECTIVES, TIME!

YOU ARE A… Decision Maker

Modern-DayMisconceptions

RESPONSIVE DESIGN

IT’S NOT RESPONSIVE DESIGN ANYMORE

IT’S JUST DESIGN.

RESPONSIVE DESIGN

LOOKOUT FOR TRENDS AND

TRENDY FRONT-END FRAMEWORKS –

LOOKOUT FOR TRENDS AND

TRENDY FRONT-END FRAMEWORKS –

YOU WILL LOOK LIKE EVERYBODY ELSE

AND QUICKLY DATE YOURSELF

Hmmm, these websites

all look alike…you just got

BOOTSTRAPPED!

Prototype,Prototype,Prototype?

FIGURE OUT WHAT

THE SMALLEST PIECE

YOUR TRYING TO BUILD

AND POC (PROOF OF CONCEPT)

USE A PROOF OF CONCEPT

AS AN AID FOR BUY IN

AND CONVERSATION

Problemsand Issues

MULTIPLE TIERS

WITH DIFFERENT

DEPENDENCIES

DUCT TAPE CODE,

ONE OFF SOLUTIONS

Solution

OLAPAD• Putting code in one location and

requesting via location dependent

include (DEV, STG, and PRD)

• Host your files on high redundancy servers

(think AWS S3)

• Build necessary assets for site to function,

rather than delivering it all (Done)

HAVE A SEPARATE MEETING

TO CREATE BUY IN FOR

THE NEXT PHASE

If stakeholders want the updates,

They’ll come with fresh minds to the

Next POC kickoff.

Build forPerformanceAND OPTIMIZE YOUR STUFF!

WHY DO WE NEED TO HAVE

BETTER PERFORMANCE?

User Experience

Because I’m Impatient

MANAGING BIG DATA

IN JS APPS

Infinite Scroll

Lazy Loading

Search Algorithm Optimization

BENCHMARKS!

Think inOld SchoolAnalogs

THINK THROUGH THE PROCESS

RATHER THAN

THE TOOLS AND TECHNOLOGY

FRAMEWORKS/PLUGINS ARE LIKE FRIENDS

FROM DIFFERENT PARTS OF YOUR LIFE,

FRAMEWORKS/PLUGINS ARE LIKE FRIENDS

FROM DIFFERENT PARTS OF YOUR LIFE,

BUT DO THEY MESH WELL TOGETHER

ALL AT ONCE?

Tools We Love

Tools We LoveTHAT WILL HELP CHOKE OUT

YOUR DEEPEST ADVESARY –

Tools We LoveTHAT WILL HELP CHOKE OUT

YOUR DEEPEST ADVESARY –

TIME WASTERS

WORK WITH GOOD TOOLS

BUT DON’T LET RELY ON THEM

SOLELY TO DO YOUR JOB

Editors

WebStorm EXAMPLE

Sublime EXAMPLE

Coda 2 EXAMPLE

Chrome Dev Tools

inspect / change elements in DOM EXAMPLE

network performance EXAMPLE

audits of scripts / styles / etc EXAMPLE

console.log() CSS EXAMPLE

CSS & Sass

test some code in the cloud - sassmeister.com EXAMPLE

+

AdvantagesandDisadvantages

BE CAREFUL

ABOUT MAINTAINABILITY

TOO MUCH EXTENDING

body #header .header .sub-header nav ul li a img {

float: left;

}

STAY AWAY FROM *

* {

background: yellow;

margin: 0;

padding: 0;

}

Responsive design frameworks that help EXAMPLE

NodeJSHOW JS-FRIENDLY FEDS

BECOME FULL STACK DEVS

Socket.iohttp://socket.io/

Pros:• Great Documentation

• Rapid Community Adoption

• Multi-user SPAs

• V1.3.5 (this is ancient in nodejs)

Cons:

• Ports can be blocked

• New tech requires new ideas

Restifyhttp://mcavage.me/node-restify/

Pros:

• Adds try/catches to your code

• Great documentation

• easy plugins

• gzip

• Plays well with socket.io

Cons:

• Flexibility can equal messy coding.

MongoJshttp://mcavage.me/node-restify/

Pros:

• Simple, event-based mongo

• Extensive db commands.

• Easy replication set support.

Cons:

• Not the same as mongodb core api team.

• Still in dev (failing build as of right now).

GUI’s aren’t ascool as you think:

GUI’s aren’t ascool as you think:DON’T BE AFRAID OF THE

COMMAND LINE

GIT EXAMPLE

Grunt / NPM EXAMPLE

GRUNTIFY

Say “No” toDuct Taped Code

TRY NOT TO ALWAYS RELY

ON FRAMEWORKS.

SIMPLE IS BETTER.

KEEP CONTROL

OF YOUR LIBRARIES

KNOW WHEN TO

FIX OR REBUILD

Takeaways

TakeawaysBE OPEN AND BOLD –

IDENTIFY YOURSELF,

WHAT YOU DO MATTERS

TakeawaysDEVELOPMENT AND DESIGN

WORKS TOGETHER –

IT’S NOT A HANDOFF

TakeawaysDEMAND CONSTRAINTS

TakeawaysOLAPAD

TakeawaysPROTOTYPE EARLY AND OFTEN

TakeawaysBUILD FOR PERFORMANCE

AND OPTIMIZE YOUR STUFF

TakeawaysWORK WITH GOOD TOOLS BUT

DON’T LET RELY ON THEM

TakeawaysDON’T BE AFRAID OF

THE COMMAND LINE

TakeawaysDUCT TAPE YOUR CAR’S BUMPER,

BUT NOT YOUR CODE!

JOSH @jnorthcottCOREY @craqlJUSTIN @jrhough