Front-End Development in 2019

Every year brings new trends in front-end development and these trends really shape the landscape of work produced by the industry. Last year we saw a continued explosion of Vue.js, NPM JavaScript library downloads, a re-emergence of PWA’s and Serverless architecture continuing its relevance in the web world.

VueJS in 2018 Github

As we approach 2019, I look forward to seeing if we can get the upper-hand ahead of projects, getting familiar with technologies well before the client knows about them.

Typescript/Flow

Thoughtworks‘ technology radar vol.19 highlighted Typescript as something to ‘trial’ but I’d like to extend that on to Flow as well. As JavaScript applications grow both in size and complexity the need for more stable codebases becomes evermore important. This is where these two technologies come in. Although proven not to reduce bugs, we mustn’t forget, tools aren’t there just to reduce bugs in production. Many are often produced to make working with teams efficient, to make our code more readable and development tools more productive and consistent. Like it or loath it, JavaScript is a loosely typed language which, if you know how, can be harnessed into very powerful applications. Most of the time though, in this fast-paced world with code changing hands many times and ideas or intentions getting lost, unless we write documentation or comment our code applications can easily become unstable. I think the necessity to add static typing with technologies like Flow or Typescript will become evermore important next year so start learning!

Typescript or flow…

GraphQL/Apollo

I’m not going to claim to have used GraphQL extensively but I can already see its power and can see its relevance growing even further in 2019. GraphQL is a middleware between your application and your API’s. It allows you to query your API but specify exactly what data you need in JSON format. This is so powerful given the somewhat slow development of API’s and the format they output often not suiting how the front-end wants to consume them. When requirements change no work is needed on the backend, you just ask GraphQL to return you a different set of data. My advice is that you’ll be left behind if you haven’t picked up the basics of GraphQL. GraphQL will become the new norm. Apollo is a library simplifies and extends the power of GraphQL as a client. There are many others in many different languages but Apollo seems to be leading the charge in the JavaScript world. I think looking into some of these libraries will help enhance your GraphQL application.

Image result for graph ql logo
GraphQL will become the new-norm.

Ramda

Ramba is a very curious library. If you’ve used React, you may have come across the term Higher Order Component (HOC). These components allow you to wrap any other component in a common piece of functionality. The easiest example I can give is a call to a specific API. Ramba introduces the concept of a Higher Order Functions library which can do incredibly powerful things. They are much more lightweight than building a HOC as the overhead of a component is unnecessary. I think this library will become crucial in stripping back those essential kb’s and speeding up your app. I also think it’ll change the way you architect the application.

Communication/Remote

Although not strictly a tool, communication skills amongst development teams will be an important skill to harness in 2019. Efficiency, trust and transparency are three important aspects to great communication but there are many more resources to help learn what makes for great communication. With the inevitable advent of remote working becoming the new norm we need to be aware of how we communicate but also how we appear to others when 90% of what we say is over chat. NLP, self-awareness, how to listen and language are just some areas to consider when starting out to becoming a better communicator and ultimately a better remote worker. I strongly suggest the book ‘How to Win Friends and Influence People‘ by Dale Carnegie. It teaches you the subtlety of communication and how to harness it.

Image result for how to win friends and influence people

And with that slight tangent, I hope you found this useful. Let me know your thoughts. I’m on most things as @fakesamgregory. If you want to hear more from us, follow my company where we discuss development, design and business on Twitter @jupiter_giraffe and if you’re curious about how we cope with being a nomadic agency, check out tumblingoutwards.com where we will be launching in 2019.

🚀🌈✨ Sketch tools and plugins for 2019

I’ve been using Sketch for a few years now so I thought it’d be a good idea to write about the plugins and tools that I’ve found particularly helpful in speeding up my workflow. Maybe you’re already using some of these tools, or maybe they’re brand new to you. Either way, I’d love to hear from you so feel free to comment and hopefully, you’ll find this helpful ✌

A bit of background from me — I’ve been working as a digital designer and developer (more on that later) for the past few years. I’ve also co-founded a nomadic branding agency called Jupiter and the Giraffe where I’m the creative lead. If you’d like to hear more about our nomadic adventures stay tuned at Tumbling Outwards.

Abstract

I’m fairly new to Abstract but boy oh boy — this has been a real game changer! I can’t imagine life without it. I came from a background in development so the concept of abstract makes perfect sense. It’s essentially versioning control like how developers use git — but for designers. If you’re not so well-versed -source control means that you can have a centralized location of your Sketch files to version, manage and collaborate on. No more saving new files with each iteration, just revert to a previous ‘commit’ and away you go! The paid version ($9 and $15 per collaborator, per month) gives you the ability to collaborate and review each other’s work towards the same file. Being solo, I get by on the free version but the option is there if you’re part of a team. Developers can also benefit in these paid tiers by being able to see CSS snippets for the design but I use another tool for that called…

Zeplin

Zeplin is a tool that I first came across as a developer which really empowered me to build a pixel perfect design without having to second-guess the designer’s intentions. I still use it as a designer but from the other side — to enable developers to be able to confidently build my designs with the accurate specs alongside code snippets. You can also integrate it with Slack so that the team can be notified when there’s a design update or change. As I’m always working between design and development teams this really is a godsend. It’s the ultimate collaboration tool and speaking first-hand with developers they agree with me. You only get one project on the free plan which is great if you’ve only one project on the go but if you have multiple projects – you’ll need to pay for a subscription. Zeplin integrates not only with Sketch but Adobe Photoshop, XD and Figma. If you’re working with websites or apps, start using this now!

Stark

Stark is a plugin I use for every project for checking that my designs are accessible and inclusive to all. It works by checking accessibility and contrast levels in line with AA and AAA WCAG (web content accessibility guidelines). Another cool feature is that you can imitate different types of colour blindness within your document allowing you to imagine your design through another perspective. I even tried this on a colleague of mine who is colourblind and it’s surprisingly accurate! I think it’s every designer’s responsibility to have their work accessible to all so this tool is a must for me.

Angle

Angle is a super cool plugin for showcasing your design work. You can place your screens into various perspective mockups across many different devices. This looks great for presenting your work in your portfolio or for those Behance case studies. The plugin is free alongside fifty free mockups but you get over two hundred devices to add to your global sketch library in the paid version.

Map generator

I’ve used the Map Generator frequently in recent projects. It allows you to design beautiful custom map interfaces with Google Maps & Mapbox simply and easily inside of sketch. It’s very useful and I’d highly recommend. It adds that personal touch to designs if you need to include the client’s location or store location.

Fontily

Fontily has come in useful on many occasions. It allows you to quickly find and replace fonts — as you would a variable in code. It lists all the fonts in the document and allows you to change selected ones. Change a font type and font weight and it will propagate out across your whole file. Magical. Great for experimenting quickly with different font sets across your entire designs and I think we’ve all been there where we’ve had to suddenly change a font stack. If this plugin wasn’t free it would’ve probably paid for itself several times over by now in the time it’s saved me.

Artboard manager

If you want to keep your artboards positioned neatly without having to think about it too much then this is the plugin for you. Artboard managerautomatically arranges the position of all your Artboards in your document, snapping them to rows & columns. Neat huh?

Runner

If you’re a keyboard shortcut fiend like me, Runner is an amazing plugin that allows you to run, install and manage plugins inside Sketch and run other Sketch commands from your keyboard. It’s Spotlight for Sketch if you like and a must have.

Prism

If you find yourself creating pattern libraries or brand guidelines regularly, Prism allows you to instantly generate a professional looking colour palette alongside the relevant hex and RGB codes based on your document colours. One limitation might be the style of the boxes is set and you don’t get control over how the colours are displayed but it does the job in a clean enough way that it’s never bothered me.

Looper

Create beautiful tessellations and geometric patterns from duplicating shapes and groups in endless variations. Looper is so much fun and I could spend hours making these. Think spirograph for adults.

Pixel Perfector

If you’re a bit OCD when it comes to pixel dimensions being consistent and rounded up to integer points then Pixel Perfect is a lifesaver. It helps you find pixel imperfect layers in your document and then select them and round them up to the nearest integer (or whatever you prescribe). It’ll help keep your documents cleaner and keep your design specs uniform.

So that’s all from me for now. I hope you’ve enjoyed this article and look out for my next one on design trends for 2019!