 How's it going? Good day so far? So this talk, Getting Your Job Done, worked for us a little bit, it really came out of Jen and I give talks on a regular basis and we often end up in hallway conversations for 15 to 30 minutes about the tools we use and baiting what's better or worse and so we want to talk about the current state of our own because it's also something that we love hearing about from other shops and agencies. Okay, so just a quick overview of what we're going to talk about so you know what to expect, we're going to do introductions so you know who we are, we're going to talk about our process so how we go about developing sites. We're going to talk, hopefully, how the time to go into some of the many grids of power, fair development and some of the tools that we're using and then at the end of the time you guys can share what you're doing, how you're doing things, maybe you can take some questions and if not, we'll hang around afterwards and you can come. So, I am Shai and this is Jethra. I am the Chief Web Mechanic so I am the person who makes the engine go what's under the hood to run well and Jen is the Chief Pencil Trojan and she is the person who cares about the form and the aerodynamics and how the tools come together for a great sleep-visual design. We met and first started working together about 14 years ago right here at USM actually and we started our company Shai and Jethra the laboratory is 10 years ago and we chose laboratories for a number of reasons but one of them is because we all have more value that we share is that we want to have an environment created for building an experiment and teaching as well as a company that's making full sense and being profitable. Our typical clients are now agency work so marketing agencies that need a technical backbone and some larger, ongoing clients that have big maintenance needs and tools developed for them. We build almost entirely custom WordPress installs that means custom themes, custom design, custom plugins and a web project of ours typically involves about four to six people a project manager, a developer, a designer a content and text support person and occasionally a photographer as well. We do also want to say that we don't typically cover we do put in search engine optimization but we don't do search engine campaigns or marketing like that. We also don't typically do e-commerce work and we almost never do site builders. Let's get started. We just want to go through sort of what our process is for a technical site overall process is important it's good to have a standard and an understanding because then you have a pattern and you can repeat it and you can improve on it to make it run better and also understand the risks of points and where things might go off the rails. I will say we're talking about our preferred process but if you've worked with clients or you've worked on other sites you know that every client is different every project is unique so although ideally we would like to do this in every instance we do want to recognize that sometimes steps get skipped they're out of order so we just want to sort of lay this out to give you an idea and these soft skills and processes are just such an important part of project success beyond the technology that we decide to use. So the first thing we do is we have an interview questionnaire before we commit to any work so that they're happy when we work on a referral if it's an inappropriate match if we can't make them happy and meet their goals then we're not going to get a great referral so we want to as early in the process determine should we continue on with this project and do a proposal or not Yeah, and so out of that questionnaire we can usually get some priorities of the client and some of these would be like what are their goals for their website clients should always have some clear goals and then they have something to measure whether or not the project was a success budget is also very important having them know what their budget is going in quite often if someone comes to you and they don't know what their budget is it means they haven't spent enough time thinking about what they really want and so they probably need to take a step back and you can certainly help them with that process timeline is important is there any sort of event or need that the client has that you need to meet and what are your current workload sometimes really busy can't take projects on because of the timeline and then of course technology do they have certain technical requirements is that a good fit for you can you accommodate that and most importantly it's your first gut read of the people that are going to be working with what are the early indications of whether or not you're going to be a good match you are able to communicate well what do they need where are the handholds the handholding going to need to occur within the project that you can figure out really early in the process yeah like have they worked with WordPress before that's a useful thing to know and then I think what's really important going into any project is what is our or your priorities as either a company or a developer for your personal skills so for us these are some of our priorities but we're evaluating the project we want to fill client friendly sites that elevate the content that are backed by really good code that is accessible and perform it and when we're doing the work we want to use best practices we want to use cutting edge tools make a polished design at the end and have a smooth development and deployment process and along the way we want to work on something with our own skills so we evaluate these things and if we think it's a good match we put together a proposal and if it's accepted we move into discover, research, plan this is sort of the prep work ahead of building a website since we do a lot of work with agencies quite often they'll do a lot of heavy lifting on this but we still need to know a lot about the client some of the background planning is really really important for a successful project and so at this point is when we start actually to make dates we map out the calendar we have a timeline for when we expect things to get done and when certain things are due either from us or the client and we come up with a list of deliverables what are we going to be handing off to the client in the end what can they expect we do sort of a tech check so what kind of technology access do we need probably access to DNS do they have any APIs they're using if they have a current site we need access to that so we can potentially move content Google Analytics all those sorts of things that you'd have to check off and then as any project or many projects whoever is doing the interview and the proposal quite often is different than who's going to be part of the project team so who are the stakeholders who are you going to be working with and sort of get up to speed for that part so the next step and I will sort of stop and say these aren't necessarily so clients will quite often some of these things are happening at the same time but I am a big fan of starting content very very early in the process because content is really what you're doing you're supposed to be featuring their content so if you're doing a design it should support the content that they've decided to have so I always push for content very early in the process especially if the client is doing their own content they never have a good expectation of how much time it's going to take it is probably the most time consuming part of the entire project building the site is easy I think compared to gathering content writing content it is the highest risk weight that we have in a project they say oh I'm totally going to do all the content and I'll edit it and do everything and it's going to take me like two weeks I'll get it right back to you maybe if they've built the site before they have some understanding of that and also again it doesn't have to be done perfectly but having at least some I know I'm going to have news articles I want to have a headline there's going to be some sort of external link and kind of mapping that out also doing an inventory or audit of current content that's maybe going to move over is it going to get rewritten and then also gathering assets this is a great time to start thinking about do you need to hire a photographer because you want new headshots for your website where are all the logos the designer like created them years ago you need to track them down so to sort of gathering content should start happening really early in the process and before we do anything we should also cover the most important rule that we have if it isn't documented it was never done this is applicable for lots and lots of things but the really key things at this point is to have documentation of the hosting environment and maintenance decisions because if you find out oh I was expecting to host on our own environment then totally familiar with and then in the end you need to be working with a shared hosting environment and you didn't anticipate that that can be a lot of work later on having a skill of work, design brief document the non-med requirements who is hosting email do you need to touch that at all and then the most important piece of what we do is we have a functional spec for every single project a functional spec is essentially a list of all of the templates that we will be creating for a particular site all of the globals the header, the footer and any short codes that we need to produce for that particular client and this is documenting down to a pretty fine where I need to what exactly needs to be the functionality power to say and this saves our lot all the time because if we are documenting it early enough in the process then any time there's a chain we're able to reflect back and say hey this is what we were trying to like agree to do we need to change the budget do we need to do a change order can we replace something else so it's about documenting it and sharing it with the client so that they go yeah I'm on board with that and you have that cable trail to cover you and it's not just holding them accountable or approving what you said you were going to do it's also like we forget what we say we're going to do especially if a project is like and then it's 12 months you're not going to remember what we said in the early part so being able to refer back to that document and say oh yeah this is supposed to be a file upload oh right they're going to have a slider here okay so hopefully we understand the client at this point and their project and then you've got a proposal and the budget's all set and we definitely need some technical choices because we produce all this documentation we have our functional spec we've got some at least content or at least idea of the content and some assets so we've got logos we've got fonts, maybe some photography and we've got again the documentation and so now we're actually ready to do the fun part I think which is build the site and we're going to talk about the development tools a little bit later we're going to give a really quick and high level review of the development process we use okay I do the front end invisible piece so one of the key important parts for this step is doing some sort of wire framing this can be super low fidelity pen and paper on a white board or you can get fancier with specialty software or you can even wire frame with html but basically if you're not familiar with wire framing it's taking we take the functional spec sort of what the content is going to be and we sort of lock out a map of each template so we have some idea of how it's going to lay out of where the pieces need to be and this is also super helpful because quite often there's things that come out in wire framing that we didn't think about when we're writing our functional spec because our functional spec is quite often an outline document when we start drawing on a board we're like oh yeah there's going to be a drop down how's that going to work in this instance so this is pretty important step and it really doesn't have to be I think a lot of times with budget it sort of can get dropped it doesn't have to be super time consuming and it's really going to help you later on the other piece of this is actual visual design working with agencies quite often they have a designer in house so I might get psds that I need to use to write css and html to make the website look like what the psd is it really depends it might be a sketch file it depends on the designer's presence if we do the design in house which we do sometimes I'm very comfortable writing code so I tend to just skip and not use graphic software to design I just start writing the browser write some markup write the css and then we take the design especially if I'm getting a static file from a client and I start writing html css and javascript to create the visual front end and what it will look like and at the same time mostly concurrently we're implementing the functionality I don't want to skim over it too much but basically for us this comes down to functional spec well implemented if it is we go through it we implement that functionality just go right down and we're spinning it out onto the templates it shouldn't have conditional like there's no design we just need to have a WordPress admin as done as possible so that we can start getting content in and as the visual design is then completed and the markup is written then you can come back and integrate the two together and we're doing this with javascript, php and sql so like the functional spec might say we're going to have a template for uh... classes we're dealers a client has a bunch of dealers and they need to list them in a dealer search we're going to need a custom post site with a dealer and address it always needs to default to main and they're going to have a phone number in a website I'm just going to make sure we have all of those fields and then I'm just going to output them to the front end appropriately conditionally so that it doesn't show up if it's not there and then content this is where we've got back end done so that's all the functional piece, the admin piece hopefully the visual design is done and then someone whether it's us or the client is moving content, adding new content and this again is a great place to or often is a place where you find things that you can consider in the functional spec and also the design so we had a site recently where the designer had designed a really nice looking case study and then we did the programming and we made it so it was like supposed to be just one line the client actually wrote two paragraphs for that so we had to go back and amend the functional spec and say okay actually this is going to be a different input field the design had to change because the font was like this big and had to squeeze it down so moving the content will also usually require some adjustments on design and functionality which is why we had to review and adjust we need to do an all hands meeting at the end look at our checklist of what's been documented and actually go through and figure out where are the missing pieces, where do we have code that is not available and one really key rule to keep in mind during this is if it isn't documented it was never done and it was approved and you can't charge for that so if there's a big enough change we want to have that documented so that we can then go back and say we need to do some adjustments along the way in order to meet the budget that was laid out so we do change the document because we are a little big on documentation so change the functional spec email confirm the change if you talk on the phone and you have an in person meeting just write up an overview it doesn't have to be long or complicated but write up that overview to capture the date, the conversation and the decision this helps with my memory too because a lot of times I'm like I get burned in my head what we originally agreed and then if there's a change if I can't actually look up what we said I'm just going to do what we originally said so we've done the visual design functionality comment reviewed everything and buttoned everything up so we launch I'm sorry we test what are you saying um so there's obviously some sort of testing you're not the process I'm sorry I know I love that you do some thorough testing so there's definitely testing that goes along the way because you know we want to make sure it looks good and some browsers that your client might be looking at so you're probably doing some level browser testing before they even look at the site the first time there's a bunch of different kinds of tests that you can do you know you might do user testing if you have a really awesome budget that's great but some of the things that we always typically do no matter what you browser test to make sure how does it look with different devices different operating systems, different browsers validation of your code is huge especially quite often there's something that looks weird validate your code you can usually find it is usually a div that is a close or a paragraph um accessibility testing we make that a priority on every site no matter if the client is a priority for the client or not um it's a priority for us so we make sure we're testing for accessibility and then of course just generally bugging to make sure that the site is running smoothly so then we launch but we're not quite done yet um we also need to consider post launch and maintenance because yeah we did not do this well in the beginning of our company um you want to talk early in the project about who's maintaining the site because when you build it they will expect you to maintain it and if you haven't agreed to what is the return structure on how you maintain it how long are you responsible for minor edits are you responsible for maintaining it in exactly the same state that you launched it are you responsible for editing it because they had their needs changed knowing who's going to be doing that regular work on will help you better constrain the client's expectations along the way in the relationship because you could build a site for someone they're like no no we're going to host it and then it breaks and they call you and you're like well we've got to charge you hourly and they're like well you built it like you're responsible for it and so you've got to lay that out pretty early like what does that actually mean when you build a site and who's going to take care of it later so we typically only work on sites that we maintain um which we also incentivize in our pricing structure clients to do that because it makes our lives so delightfully easily easier if we know what our system is and we know who has access basically the only person in the company that's FTP access is me and I'm not supposed to use it so we have deployment structures in place so yeah it's a lot easier for us if they're working on our system then how hard do I okay so this part we're going to sort of talk about some of our development um environment, our tools we use this changes and evolves I am doing things differently than I did six months ago sometimes just because the tools change, the technology change, browsers get smarter and cooler and so hopefully if we have time we can sort of like hear some of the things so wait before we go there um just a quick reference like how many people are typically editing WordPress um through a code editor and how many people are typically interacting with WordPress online like probably the browser code editor versus the browser what's code editor so uh what's a like a text editor like notepad um so when we when we're editing we're editing things which are code um and you might be editing things through the web interface yeah I use visual studio code I just switch over to that because I want to try it out we use some line packs so this is our environment so we host our sites on WP Engine WordPress hosts they're pretty fantastic, they're a little expensive but they're worth it they're totally worth it they have great backups, you're able to roll up staging servers really quickly staging server being a direct copy of your site so that in a different environment so that you are able to you know with a hammer and install it live GitHub is our version control system so that allows us to track any changes within our um code we use deploy HQ which is the connection between our version control and the server environment so that allows us to make changes and then track who pushes the changes to the server and no one is able to edit the actual server files yeah so we're editing on our machines and then I push my changes to the repository which is where we keep all our code and deploy is the thing that then pushes it to the server so we're hopefully not breaking things and if we do we don't want to roll it back well and we also know we broke the changes there's some good messages like there's a great next KCD if y'all know the comment about getting tired and your quality of posted medicine hover is what we use for domain name registers so if you need to register a domain name we love hover and Amazon group 53 if anyone is familiar with that is our DNS our domain name server so make sites faster if anyone wants to talk to me about DNS afterwards and the pros and cons I do highly recommend it it makes your site much more significantly more performant but it's a little bit complicated some people really like building into DNS some people don't I doubt you I don't like doing that another important thing that we have developed for doing this so long is we sort of have a core repo as repo is a term for version control we have a core place and punch list where we have things that we use over and over and over again we build so many sites and there are things that we just keep doing repetitively and so we sort of save all of these things up in this one place so that we can copy and paste or download it every time we start a project and again we're happy to take questions about what we have included in this or not but you can do this at whatever scale you need to do it but having the punch list and prediction it's a hard method because we love our vacuumation and our punch list but it's wonderful because it allows us punch list is a carpentry term but essentially it's a checklist and that needs to be done we've got to think, trim, we've got to put on the carpet it's traditional in carpentry but we call it punch list it's the same thing, we've got to change the font and hook up the programming so we use a punch list but every time we spin up a site we know I'm not entirely sure where we all are in levels of things but how many revisions do we want to have in place, we don't typically want to run as many revisions as default because that takes a huge amount of database space so we're always going to want to change the number of revisions we're always going to need to make sure we have access to the DNS so we have this laid out because we're going to need it for any project that we have and then we also have things that we've worked over the years so we have a default internal plugin so we have a house plugin that we've written which is all of the debugging things that we need all of the functions that we like to debugging we always have a couple of things that we need but you could do you could construct whatever you'd like what are the things that you need to spin up every site and what are the things that you need to test and launch your site and if you have that then you have a pattern that you work on with every single time we always put our name and phone number and email dashboard so if a client logs in or maybe someone who's not familiar with us is like hey we built your site, if you have a question we'll call the clients a year or two later don't always call their web host and be like hey by the way we sold the business and here's your new contact and so the website may have an exchange with somebody new how do they contact us so we always have a widget which is front and center that says website related things call these people so yeah all of the things that we do we also have a scaffold so we're writing to us in plugins so one of the things that I know I'm always going to have my file structure in a certain way we have in-house standards we just collect that up and put that in an email plug and I have similar scaffold for front end theme development so we use underscores as our starter theme because it's great it's got a lot of built-in functionality and it has almost zero design in front end which I like because I'm going to start from scratch there are things about underscores that I do differently so I to write all my CSS which is shows what the presentation of the site should look like I use SAS which is a pre-processor for CSS I have my own way that I like to organize my files I have code that I reuse I have my own SAS setup that I save and throw in every time I start a new file supporting libraries getting in the weeds a little bit I use Gulp my Gulp setup which helps create my CSS it's the same every time pretty much maybe the file directory structure is changing but I just do these things over and over so we set them up ahead of time so we're not starting from scratch and then of course the punch list this is something that is a constant evolution we know something that we missed on one site we added in because we know we want to do it every single time and then third party plugins if you know a lot of sites you probably have favorite plugins that you use over and over again these are the ones that we pretty much put on every single site we're doing as we said very customized WordPress builds which usually means very customized templates very customized data so we're using advanced custom deals pro all the time it's amazing and that is something depending on where you're at that's something that's not terribly complicated to jump into and get a little bit more like if you're dipping your toes into the first time of if you're dipping your toes in for the first time to editing a theme or templates advanced custom deals is one of the ways that you can get to doing something a little bit more dynamic and funky which is pretty fun and then forms I don't know when I've ever built a site where they didn't want some sort of form we really like grabbie forms but I'm sure everyone has their favorite form software grabbie forms is worth the licensing fee it's so great 100% we use mainwp we have a number of sites so mainwp is a method for managing and looking at the security plugin theme, updates available other information for all of our sites in one dashboard so that helps our client manager go through and look at oh I'm doing maintenance this is what actually needs to update if you look at it in one place rather than basically the site and then Yoast everyone's probably fairly familiar with Yoast most of the sites we put it on especially because we're doing marketing agency work and they want absolutely to have that installed we're doing a really small site sometimes we won't bother because it does add some red but it's a great plugin and that's really to help with your SEO so we talked about some of the things that we use some of the tools that we do and how we work we just wanted to like take a minute or two to talk about maybe some specific software that's always my favorite thing when people talk about how they do stuff like what are you actually using for software or how are you doing these things I think I mentioned I really like SAS if you're writing maybe your CSS you should look into it it allows you to do some more advanced things with CSS and chunk up your code I use Gulp which is a task runner basically you can set it up so you have a bunch of tasks that you do over and over again and it will do it automatically so for me that's compiling my CSS I have one set up for sprites doing some minification for my job script we use GitHub for our repository I use GitHub for Mac which is a GUI interface there at least use the command line and then I use Firefox for my browser and I highly recommend if you're just hitting into developing that you always look at the web inspector it has so much information it's so powerful tool you can learn so much just from using that I have some other image manipulation things that I use while I was talking tools but we're running out of time so I'm not going to get into that right now my dev setup my code editor is live text I love using a linter which helps me format all of my code appropriately p2p tidy is a package that you could use I also love git gutter just shout out for them because that is amazing at letting me see what has changed since the last commit to version control and so it's much easier to go in and identify see that's why I like the GUI see that see that and then I turn on other packages as needed I use man for pro or local by flywheel I'm playing around with local by flywheel that's an application that lets you run a local install on your computer which is handy if you want to develop that work and not work in a live server so local by flywheel or man for pro which do you prefer I am midway between the two I think that local by flywheel is great I occasionally have needs that they cannot meet but I'm not you're new to that too yeah I think local by flywheel is pretty good it does eat up a ton of memory we'll run on vc I think so I was pretty sure I use iterm as a terminal and the get hub the command line interfaces I use are get hub, the void hq and wpcli which I think are interesting to command line tools that's a really good one to start playing man for workers and from I use inspector and the web developer toolbar extension and the one other shout out I would give is on a Mac clip menu any clipboard history application I use jump cut she uses jump cut I use clip menu if you search for clipboard history for your operating system being able to go copy copy copy copy and then jump over here and go paste paste paste paste that is amazing and then you also have the history of like I say clip menu I use jump cut but I don't know if there's still updating jump cut the other thing is if you're doing programming get to know your manuals having the understanding of what this connects and how it's organized and what they're going to cover so that you have some comfort and familiarity php or javascript main manuals for all online understanding kind of how that manual is organized allow you to debug and do cooler things faster yeah and I would also just say like there's always something new and it's really fun to try new things and also don't be afraid to like use whatever works for you if you're comfortable writing regular CSS and that works for you that's great you don't need to install all of this stuff just because that's what I'm doing or do something else because someone else is going to hit there's a lot of different options out there so really sticking with what you're comfortable with and what makes sense I think is something these are some of the testing tools that we use oh I'm sorry that's yours we're running out of time so I'm going to go through these fast these are just some of the tools there's lots of tests you can do you can test your code we already worked with those slides with further information for some of the things you've said out loud that was hidden because it would make this slide very messy yeah so this is by far not an exhaustive list but these are some of the highlights that we like I care deeply about accessibility so we're using like web aim which is a great little browser extension AX which is also an accessibility tool that is for Chrome WC3 Validator that can validate your code super useful finding mistakes I know you can go down a radical I don't know if your program is weird and then you just look at your code and you're like oh there's just an error graph the client didn't close or something and also that will help with the accessibility Lighthouse super powerful tool it's in Chrome and it's built by the folks over there that's going to give you reports on performance which is useful information having a nice fast well run site they have accessibility audit in there so if you've never played around in the Lighthouse it comes built in Chrome it's built in, right? it's built in it's very powerful I recommend checking it out the other thing we might do is ab testing, scrutiny for MAC is a really good link checker also an SEO it will check your SEO maps so this is really helpful for launch Android IOS really early days we made a decision that I would be Android I would be the in-house checker representative for Android and Jen would be on so if I get a tablet I'm getting an Android tablet and that hasn't worked out really well to always have devices available because although we use browser stack which is a browser checker sometimes it's really handy to actually have physical it's different it can be different and I'm a fan of friends and family tasks can you look at this website for me and see how it looks sometimes browser stack is so powerful but just having someone else look at it gives you at least a low level of user testing as well with my browser it's really helpful for clients that's going to send you all the information about what their browser information is so you can replicate it to test any bug that might come up like hey this is not showing anything on this page okay this is a send in that link it'll give them a special link to send back to and it'll give you very detailed information about what version of browser what operating system, what size monitor they're using do they have JavaScript turned on and that is usually invaluable because then you can use like browser stack spin up a machine that is running the same thing and you can usually find out what's going on and um they don't know what it wants yeah and google if you're if you're doing any analytics campaigns um the google LAX debugger extension is awesome at looking at what is actually being sent over okay and then just really quickly talk about what kind of project management tools that we use we use Slack for internal communication um we are on some Slack channels with uh some of the agencies that we work with have Slack so we're on theirs email of course we're using this email Google Docs our punch list um we're using documents in there these Google Docs for our functional specs and all our documentation Trello keeps track of to-dos you can have sort of a template and um use that to replicate checklists so every time we do maintenance every month we just spin up a new Trello and work flow rate is like we're in terrible larger scale um tracking everything we have gone through a lot of project management tools over years we're lo-fi this is an incredibly lo-fi project management stack we have enough processes we are people that have the habits that it works for us to do this and it works for our clients to be hands on to get a new Google Docs it doesn't have any spin up time but um there are certain people who need more um and but this is what works for us and then we have a few other tools like we have site monitors that run on all the sites that we host send us text messages and Slack alerts when the sites go down so that's helpful a lot of information so we are Shining the Jacker um we will put our slides up later in the day as well as moving some of the content around just to make sure that the physical representation has the sum of what we talked about in it you can email us at hello at ShiningtheJacker.com and um we are going into a break so we are certainly going around on the break if you want to have one more competition but does anyone have any questions what are you talking about using SAS um do you is there something with WP Engine where it um compiles it on RD just do all that compiling on your local I do it all on my local yeah so I set it up I use Gulp, there's RUN there's um I used to use a piece of software now I just yeah yeah and then commit my changes to the repository and it gets pushed out but I don't have to deal with anything I have another question you were talking about you're developing your front end how do you successfully merge those two so that is a great question one of the ways that we do that is um something that we're working on but it's we're midway through the path from being a fully test-driven development shop so this is the midway point is um Jen actually goes in and she writes PHP which outputs static html and puts in a couple of small variables of the things that are going to come from the admin so advanced testing fields you need to get something out of that field and then put it smart so she's going to put variables in for that information from the functional stuff and then just returns all the static output then I take it and convert it into more dynamic code with all the conditionals in place so she writes static and so it's static markup and then you just you turn that into an actual template yeah so the stack markup is used you just include it in the template so you go through and create all the templates so you create the templates first yeah just create the template files so you we have done it the other way too is it just fits everything out onto a page and I go through and say we'll see the paragraph this needs an h3 you know whatever yeah if I'm ahead of her I just go ahead like placeholder put the thing here yeah we don't want to keep anyone it is officially but have her to chat more yeah