How Much Coding Should Designers Know?


Written by Irina Papuc Topics: Learn to Code title

Many designers think each discipline should mind their own business, while others see no problem in professionals wearing multiple hats. Many developers see designers who code as a threat, while others see it as a facilitator. This is a hotly debated subject, and although I think some great designers are also superb at coding, I will always defend that the more you focus on a particular area the best you will be at it. But this shouldn’t be a reason for you to miss out on the benefits of having another skill under your belt.

 

Learn to Code

Learn how to code and make yourself a great asset to any multi-disciplinary team.

As a designer who has gone as far to set up Linux servers and program back-end, I see no question that understanding ‘the basics’ of coding would benefit any designer. The question really is, how much coding should designers learn? At what point might designers be wasting their time, or really stepping over the line into the territory of developers?

In order to provide some insight into the potential benefits of learning to code, I’ve broken the different levels of coding knowledge down into degrees of usefulness.

Step 1: Know the basics of HTML and CSS

Any designer would greatly benefit from knowing the foundations of HTML and CSS and would be surprised by how easy it can be. Stop being lazy and just learn this, it will make you a better designer, guaranteed.

When is front-end just coding, not programming?

Is front-end coding? Yes! Is it programming? Only after a certain point.

HTML and CSS don’t involve programming logics. You can see that in HTML – HyperText Markup Language the letter M stands for Markup, what means that it’s nothing more than a coded structure of the page/screen elements. It works like a puzzle, but it doesn’t require a lot of mathematical thinking.

In laymen’s terms, HTML is an architectural map that tells the browser what to display. The HTML map will influence how search engine crawlers will interpret the site. So, the concern here is to make sure the code is very well structured and that those systems can understand it and rank it well.

CSS, or Cascading Style Sheets, is the code that tells the browser how to display things. Metaphorically, if HTML is the skeleton of a page or screen, CSS would be the skin and eyes colors, hairstyle, body shape, limbs sizes, etc. The language has a very simple code structure that determines typography, colors, positions and dimensions. The concern with HTML is to keep it very organized for maintenance and optimized for good performance.

Understanding code means understanding your pixels

Learning how to code gives you the opportunity to know how things work. Why do we need to worry about pixel-perfection, is it only for the sake of symmetry?

If you play with HTML and CSS, you’ll notice that everything is measured in pixels (there are other measurement units – not relevant here – but they will ultimately be converted to pixels). Understanding these mechanics will change your mindset and will care for design in a more efficient way for the development process. As a consequence, not only your projects will be easier to program as your projects may look much more structured.

Step 2: Front-end JavaScript and AJAX could make you a unique asset

This is where things can start to get complicated, but it’s also where a lot of fun happens. If you’re an analytical thinker, or specially motivated, you’ll get a lot out of learning JavaScript and AJAX. As well, your design perspective will improve in knowing exactly how far technology can take you and how far you can push it to be innovative. I don’t think going this deep is necessary though, because if you know the basics of HTML and CSS you’ll already be ahead of most competitors. However, you may find some fun in making things coming to life with the knowledge.

When does front-end become programming?

Although we could stop here and have the back-end implemented, we can make our project more dynamic by adding some scripting, like if we could give a few acrobatic abilities to the beautifully structured and painted body we created with HTML / CSS.

For that, we have our dear JavaScript, which is an actual logical programming language. JavaScript can be used to display dynamic interactions, animate elements, create a very responsive communication with the back-end or server, as well as other things. As there aren’t many limits to what can be accomplished with Javascript in front-end development, now we are talking about a programming language: functions, objects, logics, conditionals, math, math and more math so that it may be a little challenging. But it’s not that hard to learn, especially considering what most clients will require.

In my opinion if you want to say you’re a front-end developer, knowing (at least the basics of) JavaScript is mandatory. You should understand how AJAX works (which is used by nearly any modern website). You should test your interactions in real time, and if you’re a motion designer, like me, you can do some animations yourself rather than having to explain it to a programmer, which may not have the same eye for the kind of detail that you see as a designer.

As well, there are the pre-processors for HTML (Haml, Jade, etc.) and CSS (SCSS, LESS, etc.), which are languages that aim to facilitate and streamline the coding process using programming concepts (such as logics, modulation, among others). The code, as it states, is then pre-processed, generating the pure HTML and CSS (also called vanilla). Even if you know only the basics of programming, these could be real time-savers.

Knowing how to program informs the limitations of devices

If you, a designer, learn front-end you will clearly see various advantages for knowing it, such as knowing how things work and see the limitations of each device.

Even browsers behave differently – let alone separate devices – so knowing this when you are creating gives you a sense of making something solid, lowering the chances of future complications in projects. Every programmer I know got a layout that was impossible to reproduce at some point in their lives.

Knowing the mechanics behind a digital project will not only give you an idea of what limits your work, but also what boundaries of technology you can push. I remember when several agencies, such as Fantasy and Firstborn, made a reputation in the early 2000’s for using Javascript in a different and very creative way.

Step 3: Back-end JavaScript might be overkill

Well, maybe we’re going too far here. Knowing the basics of back-end JavaScript can be useful depending on the stack your team uses (like MEAN stack, for example). But, you don’t have to go too far if all you need to know is how to run a project. However, if you dream of leading product teams, this may be helpful. But, if you call yourself a designer, not developer, your returns are seriously diminishing at this point, so you’d be better off expanding your creative skills.

Learn to code and collaborate better with developers

Would romantic relationships be easier if men could read the minds of women? Many would think so. I wonder the same thing about designers and developers.

Knowing how developers think and what they need to be able to do their job may sound like stepping on their territory, but it will make you a great asset to any multi-disciplinary team.

This can be very useful both for internal communications, as well as in idea pitches, because you know what to expect from the other members of the team. If you can do this, know your limitations (and how to push them), then you will be able to propose much more robust solutions to clients.

A designer who can code will see more job opportunities

One of the reasons why I closed my small company (RIP!), was the fact that I started international relationships that became increasingly more attractive than local businesses. For these contacts, today I work exclusively for this the global market, so 99% of my network is foreign. The opportunity that opened up this market for me was a scenario that required an individual who could do it all, including front-end. And I fit the bill; I could even program back-end. By then I ended up getting involved more and more with the dark side of the force, even to the point of setting up and managing Linux servers.

In every opportunity I had since then, knowing how to program made a big difference both in the screening processes and the day to day work. At Toptal we see a bunch of opportunities for professionals with this hybrid profile, and startups out there are eager to find people that can take over both the design and front-end of their early-stage applications.

designers coding

Learning how to code might lead to some unexpected opportunities.

Still, there are some designers and programmers who dislike one another snooping into each other’s businesses. Why might this be? Some may be afraid of losing work, and some may be lazy to learn something new. But the truth is that you should analyze your options, and focus on what will increase your chances of success. You may not have enough time now to learn everything, but maybe knowing vanilla HTML and CSS should be sufficient to add a significant differential to your career. It should be quick and easy for you to take the first steps. The more you know, the more you expand your opportunities. So, by experience, I would never discourage any opportunity to learn new skills.

Step 4: Database Architecture and Software Engineering Won’t Get Designers Anywhere

Unless algebra and complex computing are your thing, I would say “Dear God, no!”. There are other useful side skills you could learn instead (like knitting). People are just as likely to want to hire a designer who knows how to knit as one who knows how to architect databases. Besides, you don’t want to be in a place where you need to take care of everything, believe me.

So, should designers program?

I would say no. You don’t need to. But more and more the work opportunities in the design field add web-development, or at least front-end notions, as a requirement or a differential. So you don’t need to, but maybe you should if you want to have something else to offer, especially if you’re having trouble finding work. Sometimes we can’t find an opportunity that fits our profile, and that’s when we need to adapt to what is out there.

Conclusion

All of this said, we all know that it is not mandatory for a designer to know how to program. I know a lot of designers that don’t, excellent ones in fact.

However, in some cases, I notice deficiencies from a development point-of-view, in details that could even harm a project’s productivity.

You don’t need to be a designer who is also an expert in front-end development to have these differential skills added to your CV or applied to your projects, and you have a lot of online resources to start walking down this road. Simple skills can impact your potential for success in a very positive way.

Do some research, look at what job offers are requesting, see the profile of designers startups are looking for, and maybe you can agree with me when I say you don’t need to learn how to code, but you should.

Think about it!

This article was originally posted on Toptal

Share this:

Read More

Boost Your Productivity With Clever Travel Hardware


Written by Irina Papuc Topics: Self Improvement 18414811362_e985c582a6_o

Boost Your Productivity

So, you want to boost your productivity? Nevermind Game of Thrones, winter is not coming, at least not in the northern hemisphere. It’s summertime, and here at Toptal that usually means many of our freelance developers and designers are either on the road or getting ready to hit the beach.

When I started writing this, some of our people were in Portugal, trying to work out the math behind surfboards. Now it’s my turn, and I’m wrapping up my draft with a nice view of the Adriatic Sea, just a few miles away from the best windsurfing spot in Europe.

Yes, I’m a workaholic, so this might as well be a good time to cover the topic I had in mind.

I can probably guess what some of you are thinking:

This is a lifestyle post! This guy is going to talk about surfing, healthy food and excercise.

No. This is not a lifestyle post. As far as food goes, fresh fish and veggies are always a safe bet. Exercise? Well, cycling to a nearby village to try a marginally different fish dish and sample local wine counts as exercise, at least to me.

So, with all the lifestyle stuff out of the way, I can get back to my message and start discussing the logistics behind travel and remote work and how you can boost your productivity. You can buy capri pants, cheap flip-flops, and boonie hats everywhere, but beachside shops usually don’t carry quality hardware that can help you be more productive on the road, or save time and money for more enjoyable activities.

Caveat: If you’re an avid Apple user with a profound dislike of Windows, you may not like where I’m going with this. I don’t intend to bash Apple, but Cupertino simply doesn’t bother with cheap hardware that won’t be missed if it ends up in the water.

Travel Hardware: Myths and Moths

(more…)

Share this:

Read More

Learn to Code: Toptal’s Quick And Practical JavaScript Cheat Sheet: ES6 And Beyond


Written by Irina Papuc Topics: Learn to Code learn-to-code-3

JavaScript: What is ES6?

ECMAScript 6 (ES6) is the latest standard specification of JavaScript, the programming language of the Web. Since HTML5 and the birth of Node.js, the runtime that allows us to run JavaScript on the server or desktop, JavaScript has gained a unique momentum. There is a growing adoption rate among enterprises, embracing it into production, and thus its newest features were greatly awaited.

We created this cheat sheet as a list of ES6 features we use everyday. Trying to be comprehensive but concise at the same time, new API methods are left apart. For those who need them, make a quick search by yourself or try to explore the MDN documentation to catch the latest experimental APIs. However, some the most bleeding edge characteristics like async and await from the next specification draft (ES7) are included. This is because of most of us developers are going to use a transpiler like Babel anyway to get advantage of the newest JavaScript.

You can test out some of the mentioned tips by running the node REPL with this command:

node --use-strict $(node --v8-options | grep harm | awk '{print $1}' | xargs) #ES6

Or, use directly a babel-node to get the most of Javascript in your console.

 

Download JavaScript ES6 Cheat Sheet

CLICK HERE TO DOWNLOAD JAVASCRIPT ES6 CHEAT SHEET

JavaScript (ES6 and Beyond) Cheat Sheet

Constants

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

let vs var

> var average = 5
> var average = (average + 1) / 2
> average
> 3
> let value = ‘hello world’
> let value = ‘what is new’
// -> throws TypeError: Identifier 'value' has already been declared

Warning! If array or object, the reference is kept constant. If the constant is a reference to an object, you can still modify the content, but never change the variable.

> const CONSTANTS = []
> CONSTANTS.push(EULER)
> CONSTANTS
> [ 2.7182818284 ]
> CONSTANTS = { ‘euler’: 2.7182818284 }
> CONSTANTS
> [ 2.7182818284 ]

Be aware of Temporal Dead Zones:

> console.log(val) // -> 'undefined'
> var val = 3
> console.log(val)
 // -> 3

Because it’s equivalent to:

> var val
> console.log(val)
> val = 3
> console.log(val)

Variables declared with “let/const” do not get hoisted:

> console.log(val)
// -> Throws ReferenceError
> let val = 3
> console.log(val)
// -> 3

 

Binary, Octal and Hex Notation

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

New Types

Symbols, Maps, WeakMaps and Sets

Arrow Function

> setTimeout(() => {
…  console.log(‘delayed’)
… }, 1000)

New Scoped Functions

> {
… let cue = 'Luke, I am your father'
 console.log(cue)
… }
> 'Luke, I am your father'

Equivalent with Anonymous Function

> setTimeout(function () {
…   console.log(‘delayed’)
… }.bind(this), 1000)

Equivalent with Immediately Invoked Function Expressions (IIFE)

> (function () {
… var cue = 'Luke, I am your father'
… console.log(cue) // 'Luke, I am –
… }())
> console.log(cue)
// Reference Error

Object Notation Novelties

// Computed properties
> let key = new Date().getTime()
> let obj = {  [key]: “value” }
> obj
> { '1459958882881': 'value' }

// Object literals
balloon = { color, size };

// Same as
balloon = {
  color: color,
  size: size
}
// Better method notations
obj = {
foo (a, b) { … },
bar (x, y) { … }
}

String Interpolation, Thanks to Template Literals

> const name = 'Tiger'
> const age = 13
>
console.log(`My cat is named ${name} and is ${age} years old.`)
> My cat is named Tiger and is 13 years old.

// We can preserve newlines…
let text = ( `cat
dog
nickelodeon`
)

Default Params

> function howAreYou (answer = ‘ok’) {      
 console.log(answer) // probably ‘ok’
}

Promises

new Promise((resolve, reject) => {
  request.get(url, (error, response,  
  body) => {
    if (body) {
        resolve(JSON.parse(body));
      } else {
        resolve({});
      }
  })
}).then(() => { ... })
.catch((err) => throw err)
// Parallelize tasks
Promise.all([
   promise1, promise2, promise3
]).then(() => {
   // all tasks are finished
})

Classes, Inheritance, Setters, Getters

class Rectangle extends Shape {
  constructor (id, x, y, w, h) {
    super(id, x, y)
    this.width = w
    this.height = h
  }
  // Getter and setter
  set width (w) { this._width = w }
  get width () { return this._width }
}
class Circle extends Shape {
  constructor (id, x, y, radius) {
    super(id, x, y)
    this.radius = radius
  }
  do_a(x) {
    let a = 12;
    super.do_a(x + a);
  }
  static do_b() { ... }
}
Circle.do_b()

Destructuring Arrays

> let [a, b, c, d] = [1, 2, 3, 4];
> console.log(a);

> 1
> b
> 2

Destructuring Objects

> let luke = {  occupation: 'jedi',
 father: 'anakin' }
> let {occupation, father} = luke
> console.log(occupation, father)

> jedi anakin

Spread Operator

// Turn arrays into comma separated
// values and more
> function logger (...args) {
 console.log(‘%s arguments’,
    args.length)
 args.forEach(console.log)
 // arg[0], arg[1], arg[2]
}

…Go Destructuring Like a Boss

> const [ cat, dog, ...fish ] = [
‘schroedinger’,  ‘Laika’, ‘Nemo’, ‘Dori’]
> fish // -> [‘Nemo’, ‘Dori’]

Or Do a Better Push

> let arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

…And Destructuring in the Future    ⚠ ES7

{a, b, ...rest} = {a:1, b:2, c:3, d:4}

Async   ⚠ ES7

async function schrodinger () {
return new Promise((resolve, reject)
  => {
   const result = Math.random > 0.5
   setTimeout(() => {
     return result ? resolve(‘alive’)
     : reject(‘dead’)
   })
  })
}

Await   ⚠ ES7

try {
console.log(await schrodinger())
// -> ‘alive’
} catch (err) {
console.log(err)
// -> ‘dead’
}

Export   ⚠ ES7

export function sumTwo (a, b) {
return a + b;
}
export const EULER = 2.7182818284
let stuff = { sumTwo, EULER }
export { stuff as default }

Importing   ⚠ ES7


import React from ‘react’
import { EULER } from ‘./myexports’
import * as stuff from ‘./myexports’
// equivalent to
import stuff from ‘./myexports’
// { sumTwo, EULER }

Generators

They return a objects that implement an iteration protocol. i.e. it has a next() method that returns { value: < some value>, done: <true or false> }.

function* incRand (max) { // Asterisk defines this as a generator
while (true) {
// Pause execution after the yield, resume
// when next(<something>) is called
// and assign <something> to x
let x = yield Math.floor(Math.random() * max + 1);
max += x;
}
}

var rng = incRand(2) // Returns a generator object
> rng.next() // { value: <between 1 and 2>, done: false }
> rng.next(3) // as above, but between 1 and 5
> rng.next() // NaN since 5 + undefined results in NaN
> rng.next(20) // No one expected NaN again?
> rng.throw(new Error('Unrecoverable generator state.'))
// Will be thrown from yield

This article was written by Jesus Dario Rivera, a Toptal Javascript developer.

Share this:

Read More