Back to the Basics: Best Practices for Front End Developers

It’s easy to get overwhelmed with all the developer buzzwords that are constantly being thrown around and talked about. At the end of the day, no matter what library or framework helps you finish the project, it’s important to remember the basics.

We often forget, it’s the client’s happiness and their ability to carry on with their project after we step away that matters most. So how can we do our very best work so that our client’s are receiving a top notch website and not just a site filled with the latest and greatest libraries & frameworks.

It’s easy - we get back to the basics.

Aesthetically pleasing design
Responsive, browser-friendly code
Version control the entire team can use
Excessive testing
Client-editable content wherever possible
Easy to manage deployment & devops process
Maintainable code after deployment
Documentation, documentation & more documentation
We all know that these things are important, but how do we do all of these things and still stay within the project budget? By creating best practices that you can follow over and over again.

Transcript

1. Back to the Basics: Best Practices for Front End Developers
2. Agency & Community Engineer at Pantheon Instructor for Girl Develop It Instructor and Director at Codes of Tmrw Tessa Kriesel @tessak22 on the social's
3. 30 minutes to tell you everything!
4. I have 30 minutes to tell you everything that is important in front end web development. No problem, I’ll just talk super, super fast. OR I can just tell you about the lessons I have learned and hopefully you all walk out of here with at least one tip or trick! Speaker notes
5. So. Many. Things.
6. We have all heard, and likely used, some of the popular libraries and frameworks that exist in today’s technology. And they are truly amazing and major time savers, but it’s easy for us to forget what is really truly important, our clients happiness and success. Here are some tips to make your life easy and get back to the basics of a successful web project. Speaker notes
7. Designer + Developer Collaboration
8. When developers and designers work together from the beginning of a project, it makes for a more efficient project. This allows for the developers to have some say in the features that are designed as well as the designer to express their creative ideas and insight. Speaker notes
9. Ask to review wireframes & designs before the client receives them. Design Review Process Discuss wireframes and compare to scope of work to stay within the project budget. Review code decisions with them.
10. In the past, I have implemented a review process between designers and developers. As design concepts are being created they are reviewed by a lead developer on the project to ensure that everything within the design was a) possible and b) within the dev scope of work. This review also took place before the client saw the design. There is nothing worse than sending a client a concept and having to retract some or all of the design. It’s important to ensure that your designers and developers feel like they are on the same team. Speaker notes
11. Let's all be friends Suggest after work happy hours Offer to do a lunch and learn on dev topics they want to know about Or ask them to host a lunch and learn on design topics
12. “ An after work happy hour solves all problems. Pro Tip
13. Responsive Friendly Sites
14. Tons of devices Building mobile versions of sites just doesn't cut it anymore There are too many devices all with different screen sizes It doesn't have to always look the same, but it needs to function.
15. I feel like a broken record by bringing this up but there are still so many sites on the internet that are not responsive. With the constant changing of device screen sizes, it’s important that our websites function on all sizes. They do not always have to aesthetically look the same, but they need to be able to function correctly and allow the users to be able to obtain the content that they need. Targeting specific screen sizes doesn’t always work anymore, we need to consider every and all screen sizes and build our sites with a mobile-first mindset, when possible. Speaker notes
16. “ Just installing Twitter Bootstrap will not make your website responsive. Pro Tip
17. Version Control
18. Whoops Have you ever uploaded a file change via FTP and realized that whatever you did broke your entire site? Oh. Snap.
19. Sure, it’s easy as a 1 developer team to ignore version control and just make changes directly to the server, however, have you had that moment where you make a quick change that you think is simple and break your entire site? Speaker notes
20. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
21. New to Git?
22. Yes, it's another buzzword but it's an important one!
23. That’s where version control is important. You can look back on the changes you made and easily recognize what you did wrong and how to undo it. Whether you are a team of one or a team of many developers, it’s important that you are tracking the changes that you make. Speaker notes
24. Github BitBucket Pantheon :)
25. You can host your repositories in Github or Bitbucket or other places (like Pantheon)! Speaker notes
26. Since you brought it up... It's important to find a devops workflow that works for your team. Find a way to collaborate and be efficient!
27. While we are talking Pantheon, find a workflow that works for your team. If managing an entire devops stack works for you, then great, if not, give a platform like Pantheon a try. Come see me at the Pantheon booth after and I can give you a demo! Speaker notes
28. “ Utilizing “backup files” by copying and renaming them is not an efficient way of tracking your code changes. Pro Tip
29. Write Good Code
30. Any code that is written in a manner that makes it difficult to work on in the future is considered technical debt. Avoid Technical Debt
31. Code Reviews You can ensure everyone is following proper internal code standards. We all make mistakes - let's find them before the client does. What better way to learn new techniques then by reviewing others code?
32. Tools for Code Reviews Github Code Brag Collaborate GitLab
33. Comment Your Code
34. I don’t even think I need to add commentary here - save everyone else and yourself some trouble when you come back to this code and comment EVERYTHING. Speaker notes
35. We don't know it all Admit that you don't know everything and work together as a team to figure it out! If you lead a team, encourage continuing education and attending conferences, like DrupalCon ;)
36. Once I felt comfortable admitting I didn't know how to do something, I was much more successful and was able to learn from my fellow developers! Speaker notes
37. Accessibility I am no whiz at accessibility myself but keep your target audience in mind when writing code. You have no idea what disabilities your end users may have and you should always account for everything.
38. “ Don't be lazy. You might be even lazier the next time you have to touch your code. Pro Tip
40. Testing
41. Browser test as you develop There is nothing worse than building an awesome feature and having Internet Explorer (or another browser) smack you in the face afterwards.
42. If you take anything away from this subtopic, take away this: Test As You Dev! There is nothing worse then building out this awesome feature and realizing that it doesn’t work in Internet Explorer. I built this amazing mega menu that utilized Twitter Bootstrap with the most beautiful animations and transitions only to realize that it was a complete crap show in Internet Explorer. Epic Fail. There are a lot of great tools that can help you do this, I personally prefer Browserstack but also utilize my own browsers and devices - it’s an excuse to have all the latest tech stuff. Speaker notes
43. Browser Testing Tools Browser Stack Chrome Dev Tools Browsershots Browser Sandbox Microsoft Edge Xcode Actual Devices
44. URL Testing Find a tool or manually double check all the links and url's on your website. I use a super slick tool called Integrity - but it's only for Mac (as far as I know).
45. Behat Behat is a tool that makes behavior driven development (BDD) possible. With BDD, you write human-readable stories that describe the behavior of your application. These stories can then be auto-tested against your application. Bending Behat’s Benefits at 3:45 today with Steve Persch in room 315
46. “ After you have worked on a website for so long, you no longer see the bugs. Pro Tip
47. Client Editability
48. Things to consider Anything that you envision your client ever needing to change should be editable through a CMS. Nobody wants to be editing a website for simple content when your client can be making those changes.
49. “ Give your clients enough freedom to keep their site up to date but not so much that you come back to the site and see this. Pro Tip
50. Documentation
51. Write the docs Your clients will want to make changes - give them the power to make those changes correctly. Take the time to create a standard documentation template and copy & edit for your client specific projects. Shhhhh... don't tell anyone, but I enjoy writing documentation.
52. Tools for Documentation Use something you can easily share and manage. Google Documents Google Sites Atlassin Confluence Wikispaces or other Wiki offerings Post a link to your documentation in your sites admin dashboard.
53. “ Your client will try to destroy your masterpiece, have a little control by creating detailed instructions on how they can wreck everything you have worked for. Pro Tip
54. Thank you! @tessak22 http://tessakriesel.com