Back to the Basics: Best Practices for Front End Developers

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.

3734ba5f47b3e579b367b4202aaba163?s=128

Tessa Kriesel

April 25, 2017
Tweet

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
  39. None
  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