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