Inter{action} Monthly: August ‘18

In this month’s Inter[action], Siddharth Vadgama, Developer at Tribal Worldwide, give us the low-down on the four tools every Frontend Developer should know about.

As developers, we’re just as flawed as anyone else. Sometimes we start writing code for the sake of it, or losing sight of the problem we’re actually trying to solve. Here are a few things things I’ve found help me reduce the gulf of execution, and get on with accomplishing what I’m really here to do — solve problems.

Netlify: Continuous integration for the masses

One of the challenges we face as developers is our deployment process. Once we’ve built a thing, where does it go and how does it get there? Do we Dockerise it and push it to a Kubernetes cluster somewhere? Do we hook it up to Heroku? Do we simply upload it to S3? For static sites (and a few other things), Netlifymight just be the answer you’ve been looking for.

To start out with, all you need to do is point it to your Github/Gitlab/Bitbucket repository. It’ll set up the git hooks, so whenever there’s a commit to master, it builds and deploys your site. Easy. It’ll pick up whatever you’re using, automatically download the dependencies, build it out and deploy the results of your output folder. Behind the scenes, it deploys to S3 — nothing you can’t do yourself, but Netlify does improve on developer experience. You never needto think about your deployment pipeline.

Netlify also supports pull request previews, A/B testing, cloud functions, and much more. It’s a fantastic tool that allows developers to focus on solving the actual problems, rather than getting caught up with chores.

Vue CLI: Create and manage Vue projects with ease

Vue UI mode

If you’re a Vue developer, Vue CLI 3is for you. It allows you to spin up new projects using presets or your custom configuration. Along with this it has a fantastic UI mode (above), which allows you to manage existing projects, run performance checks, and execute anything you’d normally do in the CLI, through the UI.

Behind the scenes Vue also does a bunch of optimisation. Code splitting, tree shaking, minifying, uglifying, polyfilling — the works.

All in all, it’s a breeze to use, includes a bunch of quality-of-life features, and massively reduces the effort required to build cool stuff. It’s great for both building quick prototypes, and as a starting point for more production-grade applications.

Imgix: Image manipulation through an API

Imgixis a pretty nifty management system for handling responsive and ‘fussy’ images. Firstly, you need to have all your images hosted somewhere; S3, Google Cloud Storage, or anywhere else that’s accessible over the web.

Once you’ve signed up, you can access all your images through Imgix’s proxy. The difference is that you can do a bunch of image manipulation via URL parameters (above). Imgix sorts you out when you get designs which require more specific cropping, and have to be responsive around an unusual focal point. You can read more about all the different options it has in the API docs.

Ngrok: Expose your localhost to the web

Ngrok’s CLI

Nothing super new, but incredibly useful. If you’re building something locally and want to send a link to someone to show them how it’s going — you might not get very far. As an alternative to pushing it to a server somewhere, or sending a link to your local IP (assuming you’re on the same network), Ngrok might just be the solution.

Ngrok is a super simple command line tool that exposes your local environment to the web via a tunnel. You simply type ‘ngrok http [port number]’, and it’ll expose localhost:[port number] to the web via a public URL (above). YAll you need to do is share that URL, and boom, anyone viewing the link can see what you’re working on.

It’s great if you’re doing live demos, or presentations that require your application to be publicly accessible.