Back to the Basics: Best Practices for Front End Developers

Agency & Community Engineer at Pantheon Instructor for Girl Develop It Instructor and Director at Codes of Tmrw Tessa Kriesel @tessak22 on the social's

30 minutes to tell you everything!

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

So. Many. Things.

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

Designer + Developer Collaboration

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

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.

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

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

“ An after work happy hour solves all problems. Pro Tip

Responsive Friendly Sites

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.

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

“ Just installing Twitter Bootstrap will not make your website responsive. Pro Tip

Version Control

Whoops Have you ever uploaded a file change via FTP and realized that whatever you did broke your entire site? Oh. Snap.

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

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.

New to Git?

Yes, it's another buzzword but it's an important one!

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

Github BitBucket Pantheon :)

You can host your repositories in Github or Bitbucket or other places (like Pantheon)! Speaker notes

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!

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

“ Utilizing “backup files” by copying and renaming them is not an efficient way of tracking your code changes. Pro Tip

Write Good Code

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

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?

Tools for Code Reviews Github Code Brag Collaborate GitLab

Comment Your Code

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

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 ;)

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

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.

“ Don't be lazy. You might be even lazier the next time you have to touch your code. Pro Tip

No content

Testing

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.

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

Browser Testing Tools Browser Stack Chrome Dev Tools Browsershots Browser Sandbox Microsoft Edge Xcode Actual Devices

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

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

“ After you have worked on a website for so long, you no longer see the bugs. Pro Tip

Client Editability

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.

“ 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

Documentation

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.

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.

“ 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

Thank you! @tessak22 http://tessakriesel.com