Slide 1

Slide 1 text

Back to the Basics: Best Practices for Front End Developers

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

30 minutes to tell you everything!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

So. Many. Things.

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Designer + Developer Collaboration

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Responsive Friendly Sites

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Version Control

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

New to Git?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Github BitBucket Pantheon :)

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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!

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Write Good Code

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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?

Slide 32

Slide 32 text

Tools for Code Reviews Github Code Brag Collaborate GitLab

Slide 33

Slide 33 text

Comment Your Code

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Testing

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Client Editability

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

“ 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

Slide 50

Slide 50 text

Documentation

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

“ 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

Slide 54

Slide 54 text

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