Tools of the Trade

Starting Developing on the web can be a bit of a wide-eyed moment when you look at the tool set available to you. I’ve been involved in software development for years, but web development is a field I’ve always stayed relatively outside of, and only ever used ‘web’ development to provide a convenient front end for something else. Here at Glue Studio it’s a bit more of an all in world, so whilst I still focus on the back end and Alex on the front, I’m suddenly much more in the front-line of our web development.

Starting effectively from scratch is daunting with so many tools and frameworks. The hot frameworks seem to come and go in a week, and age old CMS systems are still kicking around. But now I’ve been in for 3 months, I thought I’d stop and review what I’ve learned, what tools I like (and dislike) and hope this can help anyone else starting in the field.

The Tools

So I came from a job where everything was provided for me – laptop, desk, office, salary, even lunch. Sounds great right? There’s definitely pros and cons, and that’s for a different time, but the other thing that was provided for me was the tools for the job, love or loathe.

Now I’m free to make my own choices on equipment, software, services and pretty much anything Here’s where I’ve settled.

Hardware

Hardware list is short, which is great since you won’t need to be shopping around for hours. On my first day, Monday morning and we went off the the Apple Store and came back to the office with a new MacBook Pro 13″ with TouchBar. I’ll write a review about it soon enough, but short version: It’s a lovely laptop. Why this model? I wanted one with more than 2 ports. In hindsight maybe that’s not required, I’ve only once had 3 ports filled at once, and I could’ve unplugged from power to release a port. I got a couple of obligatory dongles, a case and that’s it.

Also useful for development, but not needed, an iPad is a great addition for a mobile setup. Pair it with DuetApp and you’ve got a dual screen desktop wherever you can put an iPad. I would recommend having a secondary screen where you can but don’t let that hold you back.

Software

So where the hardware list is short, software is a different story. Lots of it will depend on your preferences, but here’s a list of what I use and why.

  • Visual Studio Code – First thing any developer needs is a decent code editor. VSCode has served me well since day one, and I haven’t felt the need to stray. It’s easy to just jump in and get started, and some of the more advanced features come out over time. What’s great about VSCode is the vast community and extensions that can make VSCode what you need. On a quick side note, I know Alex uses PHPStorm and swears by it so if VSCode’s not for you give it a go.
  • Slack – Communication is the key to getting anything done. And even if you’re going it alone, you’ll need to speak to someone at some point and before you know it you’re slacking off with everyone. For Glue, we use Slack to organise discussions about all our ongoing projects, to throw snippets of code back and forth and as a one-place to discuss everything. #channels mean that conversations stay on topic (mostly) so that when you’re looking for something later you’ll be able to find it.
  • Safari – Can’t be a web developer without a web-browser. I think I’m the odd one out here though, Google’s Chrome is far more popular from my casual observations. Whichever tool you use, you need to know the Web Inspector back to front. I’ll write up more about why I prefer Safari another time, but if I had to pick one way in which it’s better than Chrome it’s Responsive Design Mode – it allows you to simulate a mobile browser or iPad or any custom resolution screen, so you can check that your site that looks amazing on your retina 23″ monitor looks ok when it’s viewed on a device 360px wide.
  • Transmit 5 – Once you’ve built a website it’s very likely you’ll need to put it on a server. Old habits die hard, and FTP is still rocking around even after 45 years of use. Naturally FTP has evolved but is still a defacto way of loading files to a web server. Transmit is my app of choice for this, it’s got a great interface, and a sync command to upload only the changed files. Plenty of other choices in this area though, so don’t be afraid to look at what might suit you.
  • Sketch – If you’re having designs done for you, chances are that they’re going to arrive in a Sketch file. Sketch is built with modern interface design in mind, and includes all the data you’ll need to make that design a reality. The day you get a design sent in a jpg and a sketch file you’ll start to demand sketch for all future projects

This is by no means an exhaustive list, and there’s always a new tool just around the corner that’ll replace all of these in one great package.

Utilities

What’s the difference between utilities and Software you ask? Honestly, not much. But for the sake of this list, it makes it easier read and I would organically categorise this software differently since it almost all runs more in the background than in the front.

  • NodeJS – Nothing these days works without Node. To put it simply, Node allows JavaScript to run outside of the browser. Since most web developers know at least the basics in JavaScript the number of packages in the community is unbelievable, and it’s never that hard to find something to do the job you’re after. So what can Node do for you? Here we go!
  • Sass – Writing out everything in full is so 2010. I like SASS, it’s a CSS pre-compiler which means you can skip out writing {} and ; in your CSS, and adds a bunch of useful little things to make it quicker to write and read your CSS. Nesting classes within each other make so much more sense in SASS than the standard CSS syntax does, and allows you quickly to build out a structured, easy to read style sheet. Downsides are that it needs to be converted to CSS for the browser to use it. But Node can do that for you.
  • Uglify – So all that beautifully structured SASS code gets chucked together and ‘uglified’. Simply takes all your files, bunches them together into one file and removes the whitespace to reduce bandwidth usage on loading. Does the same with JavaScript. Powered by Node of course.
  • BrowserSync – Browser sync is a tool which allows CSS to be ‘injected’ into a page without it being reloaded, or if it can’t be injected, it’ll force the browser to reload the page. Nothing magic, but means that your ⌘+R keys can be used for something more productive.
  • Gulp – Gulp is a silly name, but it’s the tool that brings it all together for me. Gulp (or it’s alternative Grunt) is what’s called a task runner. All these things above would normally mean that you’d need to run them all individually, you’d need to recompile your SASS every time you change it, uglify it and then inject the browser with the new CSS. Gulp takes all that away, and watches for file changes and automatically does all of the above. The day you can make a change to a document, save it and by the time you’ve looked up at the browser (on your second screen via Duet of course) the change has taken affect. It makes me feel like my development time is halved because I don’t have to reload the browser.

Services

No matter how independent you are, you’re going to need some help and you can’t do everything on your own. So here’s the services that we use to get everything together.

  • Dropbox – if you’re sharing files, you’ll need Dropbox. Except for that one pesky person that insists on using Google Drive. But don’t worry, you’ll need a google account so having a Google Drive isn’t an issue.
  • Google Suite – I wasn’t exactly sure how to label this one, since Google Suite provides a wealth of services all under one umbrella, from email to calendaring, aforementioned Drive and other developer services like Maps APIs and groups. We use google suite to host the email for our domain, and features like groups allow us to pickup email from hello@gluestudio.co.uk
  • Linode – If you plan to host your websites as well as build them and you’re familiar with hosting a website you can’t go far wrong with Linode. Great bandwidth and speeds, and the pricing scales up to meet your needs, and bumping up to the next category is as simple as pressing a button. Linode offer you the server, but it’s on you to put the software in place to actually make your web server run. A guide for this will come soon enough, but if that’s all too intimidating for you there are other options on the market. Or we can host for you, get in touch for a quote.
  • GitHub – all our code is version controlled in Git, and we use GitHub to make that easier for us to share. We also use Git for pushing changes to our production server, which allows fast deployment and avoiding the day-long FTP transfer while you upload someone’s 10GB WordPress media Library.
  • AWS – Lastly, you can’t do much online these days without finding a use for AWS. We use lots of the services when we need to, but predominantly we use S3 combined with Cloudfront to deliver our content as fast as we can.

There’s still tons of things I’m yet to cover (frameworks, frameworks and more frameworks) but getting all of the above will get you set up to start the journey into web development.

Related Posts

Copyright © Glue Digital Studio Ltd