With the increasing demand for mobile sites, fresher designs, changing coding practices, new libraries, frameworks, and a plethora of other issues arising daily, it’s difficult for mere mortals to keep up with the demands. In this presentation, we will tell our story and introduce solutions, practices, approaches, and some tools that we found work the best for us. This presentation is the church of front-end development. If you're passionate about building memorable experiences on the web, the information in this presentation is for you.

1. What the FED’s need to know to be…

2. a modern-day Superhero.

3. IT’S THE CHURCH OF
FRONT-END-DEVELOPMENT
What are we
talking about….

4. bit.ly/FlyingSwanKick

5. STANDUP IF YOU ARE A… Developer

6. STANDUP IF YOU ARE A… Designer

7. STANDUP IF YOU ARE A… Writer

8. We do better when
WE SELF IDENTIFY

9. JOSH
@jnorthcott
COREY
@craql
JUSTIN
@jrhough

10. Doing Team
Development
and Design

11. HOW TO MAKE THIS
AN AWESOME RELATIONSHIP

12. DO FUN THINGS TOGETHER
THAT’S NOT WORK RELATED

13. FIND ANOTHER DEV
TO PUSH EACH OTHER

14. ESTABLISH
TEAM ACCOUNTABILITY

15. MAKE DECISIONS TOGETHER

16. Demand
Constraints!

17. Demand
Constraints!
YOU NEED CONSTRAINTS!
DESIGN, DEVELOPMENT,
CONTENT, OBJECTIVES, TIME!

19. YOU ARE A… Decision Maker

20. Modern-Day
Misconceptions

21. RESPONSIVE DESIGN

22. IT’S NOT RESPONSIVE DESIGN ANYMORE
IT’S JUST DESIGN.
RESPONSIVE DESIGN

23. LOOKOUT FOR TRENDS AND
TRENDY FRONT-END FRAMEWORKS –

24. LOOKOUT FOR TRENDS AND
TRENDY FRONT-END FRAMEWORKS –
YOU WILL LOOK LIKE EVERYBODY ELSE
AND QUICKLY DATE YOURSELF

25. Hmmm, these websites
all look alike…you just got
BOOTSTRAPPED!

26. Prototype,
Prototype,
Prototype?

27. FIGURE OUT WHAT
THE SMALLEST PIECE
YOUR TRYING TO BUILD
AND POC (PROOF OF CONCEPT)

28. USE A PROOF OF CONCEPT
AS AN AID FOR BUY IN
AND CONVERSATION

29. Problems
and Issues

30. MULTIPLE TIERS
WITH DIFFERENT
DEPENDENCIES

31. DUCT TAPE CODE,
ONE OFF SOLUTIONS

32. Solution

34. 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)

35. 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.

36. Build for
Performance
AND OPTIMIZE YOUR STUFF!

37. WHY DO WE NEED TO HAVE
BETTER PERFORMANCE?
User Experience
Because I’m Impatient

38. MANAGING BIG DATA
IN JS APPS
Infinite Scroll
Lazy Loading
Search Algorithm Optimization

39. BENCHMARKS!

40. Think in
Old School
Analogs

41. THINK THROUGH THE PROCESS
RATHER THAN
THE TOOLS AND TECHNOLOGY

42. FRAMEWORKS/PLUGINS ARE LIKE FRIENDS
FROM DIFFERENT PARTS OF YOUR LIFE,

43. FRAMEWORKS/PLUGINS ARE LIKE FRIENDS
FROM DIFFERENT PARTS OF YOUR LIFE,
BUT DO THEY MESH WELL TOGETHER
ALL AT ONCE?

44. Tools We Love

45. Tools We Love
THAT WILL HELP CHOKE OUT
YOUR DEEPEST ADVESARY –

46. Tools We Love
THAT WILL HELP CHOKE OUT
YOUR DEEPEST ADVESARY –
TIME WASTERS

47. WORK WITH GOOD TOOLS
BUT DON’T LET RELY ON THEM
SOLELY TO DO YOUR JOB

48. Editors

49. WebStorm EXAMPLE

50. Sublime EXAMPLE

51. Coda 2 EXAMPLE

54. Chrome Dev Tools

55. inspect / change elements in DOM EXAMPLE

56. network performance EXAMPLE

57. audits of scripts / styles / etc EXAMPLE

58. console.log() CSS EXAMPLE

59. CSS & Sass

60. test some code in the cloud - sassmeister.com EXAMPLE
+

61. Advantages
and
Disadvantages

62. BE CAREFUL
ABOUT MAINTAINABILITY

63. TOO MUCH EXTENDING
body #header .header .sub-header nav ul li a img {
float: left;
}

64. STAY AWAY FROM *
* {
background: yellow;
margin: 0;
padding: 0;
}

65. Responsive design frameworks that help EXAMPLE

66. NodeJS
HOW JS-FRIENDLY FEDS
BECOME FULL STACK DEVS

67. Socket.io
http://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

68. Restify
http://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.

69. MongoJs
http://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).

70. GUI’s aren’t as
cool as you think:

71. GUI’s aren’t as
cool as you think:
DON’T BE AFRAID OF THE
COMMAND LINE

72. GIT EXAMPLE

73. Grunt / NPM EXAMPLE
GRUNTIFY

74. Say “No” to
Duct Taped Code

75. TRY NOT TO ALWAYS RELY
ON FRAMEWORKS.
SIMPLE IS BETTER.

76. KEEP CONTROL
OF YOUR LIBRARIES

77. KNOW WHEN TO
FIX OR REBUILD

78. Takeaways

79. Takeaways
BE OPEN AND BOLD –
IDENTIFY YOURSELF,
WHAT YOU DO MATTERS

80. Takeaways
DEVELOPMENT AND DESIGN
WORKS TOGETHER –
IT’S NOT A HANDOFF

81. Takeaways
DEMAND CONSTRAINTS

82. Takeaways
OLAPAD

83. Takeaways
PROTOTYPE EARLY AND OFTEN

84. Takeaways
BUILD FOR PERFORMANCE
AND OPTIMIZE YOUR STUFF

85. Takeaways
WORK WITH GOOD TOOLS BUT
DON’T LET RELY ON THEM

86. Takeaways
DON’T BE AFRAID OF
THE COMMAND LINE

87. Takeaways
DUCT TAPE YOUR CAR’S BUMPER,
BUT NOT YOUR CODE!

88. JOSH @jnorthcottCOREY @craqlJUSTIN @jrhough