Who is a front end developer? What tools do they use? What skills do they need?
Discover what it takes to become a successful front end developer with our new infographic “<The life of a front end developer/>”
If you know somebody who can benefit from this infographic, someone who wants to become a developer perhaps, please share it with them. Thanks.
All the best in your career.
The Vanamco team.
Recently we received quite a few requests from people wanting to use Ghostlab for their website and webapp testing from behind corporate proxies. Unfortunately, as Ghostlab’s server component is built on node.js and the HTTP client in node.js assumes that a direct connection to the Web can be made (i.e., node.js ignores the system’s proxy settings), we had to build our own support to proxy requests in node.
There are some other blog posts on how to do a request through a proxy for HTTP, so adding that was easy. But not for HTTPS, so that’s what this little write-up is mainly about.
Let’s start with the easy part. Assume you want to request the content of https://www.vanamco.com/ghostlab. Requesting it through a proxy, we would do something like:
telnet 192.168.5.8 3128 if 192.168.5.8 is the IP of your proxy server running on port 3128),
GET https://www.vanamco.com/ghostlab/ HTTP/1.1
Or with node.js:
var Http = require('http');
var req = Http.request({
host: '192.168.5.8',
// proxy IP
port: 3128,
// proxy port
method: 'GET',
path: 'https://www.vanamco.com/ghostlab/' // full URL as path
}, function (res) {
res.on('data', function (data) {
console.log(data.toString());
});
});
req.end();
While the above code is the correct way to do a HTTP GET request through a proxy, it won’t work if you try to use HTTPS. For instance, if you replace the path by https://www.twitter.com, your proxy server might say something like
“Unsupported Request Method and Protocol. Squid does not support all request methods for all access protocols.”
In fact, you actually wouldn’t want the proxy to be able to do this; you wouldn’t want it to decrypt and send you back your unencrypted data. Instead, proxies support the CONNECT request, which will establish a tunnel to the remote server, so the data will remain encrypted.
When you open a telnet session (telnet 192.168.5.8 3128) and do a CONNECT request
CONNECT twitter.com:443
the proxy will answer with
HTTP/1.0 200 Connection established
This means, that the proxy set up the tunnel to the host. Now you can communicate with the host through the tunnel. I.e., you’ll have to start by sending your encrypted request (which is a bit hard to do with telnet, so the next code listing shows how to do it with node.js).
var Http = require('http');
var Tls = require('tls');
var req = Http.request({
host: '192.168.5.8',
port: 3128,
method: 'CONNECT',
path: 'twitter.com:443',
});
req.on('connect', function (res, socket, head) {
var cts = Tls.connect({
host: 'twitter.com',
socket: socket
}, function () {
cts.write('GET / HTTP/1.1rnHost: twitter.comrnrn');
});
cts.on('data', function (data) {
console.log(data.toString());
});
});
req.end();
The node.js program does a HTTP CONNECT request to the proxy and listens for the connect event. The event handler is passed an instance of net.Socket which we can use as if we were directly communicating with the remote server. I.e., we need to start by sending the encrypted request and we’ll receive back the encrypted content.
To do the encryption and decryption, we use node.js’s TLS module. The tls.connect method accepts an options argument which contains the socket we received from the connect event handler. Make sure to also include the host in the options, even though the node.js docs say the host will be ignored when you’re passing a socket. If you don’t pass the host, an error will be thrown, “Hostname/IP doesn’t match certificate’s altnames”. As a second argument, tls.connect accepts a callback function (a listener to the secureConnect event, really), in which we do our HTTP request (manually, in this snippet) writing to the tls.ClearTextStream object returned by tls.connect.
To make life a little easier and also benefit from node.js’s HTTPS client implementation, we can wrap the CONNECT request and dealing with TLS into a https.Agent so we only have to do this when doing an HTTPS request via a proxy:
var Https = require('https');
var agent = new HttpsProxyAgent({
proxyHost: '192.168.5.8',
proxyPort: 3128
});
Https.request({
// like you'd do it usually...
host: 'twitter.com',
port: 443,
method: 'GET',
path: '/',
// ... just add the special agent:
agent: agent
}, function (res) {
res.on('data', function (data) {
console.log(data.toString());
});
}).end();
In summary: in addition to a regular HTTPS request, you only need to instantiate an HttpsProxyAgent and pass the instance in the agent property of the request options.
To implement the HttpsProxyAgent, we can reuse most of node.js’s implementation of the http.Agent and https.Agent. But we need to overwrite two methods, addRequest and createSocket to handle the asynchronous nature of how we receive the socket (the original implementation assumes that createConnection returns a socket), and so we can emit an error event on the request object when the connection to the proxy fails.
Here we go (Gist):
Update (March 23, 2015): The code below was updated to work with node v0.12.0. See Gist for more information.
var Util = require('util');
var Https = require('https');
var Tls = require('tls');
function HttpsProxyAgent(options) {
Https.Agent.call(this, options);
this.proxyHost = options.proxyHost;
this.proxyPort = options.proxyPort;
this.createConnection = function (opts, callback) {
// do a CONNECT request
var req = Http.request({
host: options.proxyHost,
port: options.proxyPort,
method: 'CONNECT',
path: opts.host + ':' + opts.port,
headers: {
host: opts.host
}
});
req.on('connect', function (res, socket, head) {
var cts = Tls.connect({
host: opts.host,
socket: socket
}, function () {
callback(false, cts);
});
});
req.on('error', function (err) {
callback(err, null);
});
req.end();
}
}
Util.inherits(HttpsProxyAgent, Https.Agent);
// Almost verbatim copy of http.Agent.addRequest
HttpsProxyAgent.prototype.addRequest = function (req, options) {
var name = options.host + ':' + options.port;
if (options.path) name += ':' + options.path;
if (!this.sockets[name]) this.sockets[name] = [];
if (this.sockets[name].length < this.maxSockets) {
// if we are under maxSockets create a new one.
this.createSocket(name, options.host, options.port, options.path, req, function (socket) {
req.onSocket(socket);
});
} else {
// we are over limit so we'll add it to the queue.
if (!this.requests[name])
this.requests[name] = [];
this.requests[name].push(req);
}
};
// Almost verbatim copy of http.Agent.createSocket
HttpsProxyAgent.prototype.createSocket = function (name, host, port, localAddress, req, callback) {
var self = this;
var options = Util._extend({}, self.options);
options.port = port;
options.host = host;
options.localAddress = localAddress;
options.servername = host;
if (req) {
var hostHeader = req.getHeader('host');
if (hostHeader)
options.servername = hostHeader.replace(/:.*$/, '');
}
self.createConnection(options, function (err, s) {
if (err) {
err.message += ' while connecting to HTTP(S) proxy server ' + self.proxyHost + ':' + self.proxyPort;
if (req)
req.emit('error', err);
else
throw err;
return;
}
if (!self.sockets[name]) self.sockets[name] = [];
self.sockets[name].push(s);
var onFree = function () {
self.emit('free', s, host, port, localAddress);
};
var onClose = function (err) {
// this is the only place where sockets get removed from the Agent.
// if you want to remove a socket from the pool, just close it.
// all socket errors end in a close event anyway.
self.removeSocket(s, name, host, port, localAddress);
};
var onRemove = function () {
// we need this function for cases like HTTP 'upgrade'
// (defined by WebSockets) where we need to remove a socket from the pool
// because it'll be locked up indefinitely
self.removeSocket(s, name, host, port, localAddress);
s.removeListener('close', onClose);
s.removeListener('free', onFree);
s.removeListener('agentRemove', onRemove);
};
s.on('free', onFree);
s.on('close', onClose);
s.on('agentRemove', onRemove);
callback(s);
});
};
Image credit: hiroze
hljs.configure({
tabReplace: ‘ ‘,
useBr: true
});
hljs.initHighlightingOnLoad();
Whether you are a newbie or professional, chances are that some of these tips for developers will help you to bring your career as a front end developer to the next level.
Here is the infographic: 8 tips to help you to become a better front-end developer.
Click here for the high resolution version
The infographic is based on the article found on Ihatetomatoes
Check it out for more info.
We dare you to take this quiz to find out how much of a geek you are. If you do well you could win a free Ghostlab licence!
10 questions to test your knowledge of front end development.
Don’t forget to input your email at the end to be in with a chance of winning a Ghostlab licence!
If you like the geek quiz, please share it with your fellow geeks.
The chance to win a Ghostlab licence is gone but the epic geek test is still here. Leave your email address behind for epic news and resources and quality content.
[polldaddy type=”iframe” survey=”0D05C362FA50CC85″ height=”auto” domain=”ghostlab” id=”0D05C362FA50CC85″]
Jordan Lewis (@jordanlewiz) is a frontend developer working for Envato on the Marketplaces team as delivery lead on the Purchase team.
Headquartered in Melbourne, Australia, Envato is an online company with an ecosystem of sites and services to help people get creative. On our Marketplaces thousands of people earn a living selling things like WordPress themes, photos, music tracks and illustrations. We also run an education platform called Tuts+, and a freelance marketplace called Envato Studio.
The Envato Marketplaces are a collection of eight sites running from the one codebase, which makes cross-browser testing complicated. Having the right tools and workflow for testing is incredibly important for us to be confident we are delivering a quality experience to all our users.
Over a year ago we started the long journey in making the Marketplaces all responsive designs and during this time we have been using Ghostlab to help ease the pain of testing our multiple sites across the large range of browsers and devices we support. Not only do we use it for mobile device testing, but also regular desktop cross-browser testing over many operating systems running inside virtual machines.
Prior to Ghostlab we used a combination of Pow and xip.io on our development machines to serve our Marketplaces application to our testing devices and virtual machines. However, with the added complexity of debugging Javascript and CSS on mobile devices, it meant our old testing methods were incomplete.
Ghostlab quickly became an invaluable tool in our cross-browser and device testing workflow.
Due to the nature of our Marketplaces application, we want to focus our testing on performing the same actions across a range of browsers whilst being signed-in on each and simulating different scenarios. This can be from a simple “how does this button look?” to “how is the new purchase flow experience on a mobile device compared to the desktop experience?”.
On the Marketplaces we embrace progressive enhancement and develop first for basic functionality and subsequently layer additional features on top for the browsers and devices which can support them. This often means we build a feature to work without Javascript and then introduce Ajax, modals, visual flourishes and so on to compliment the experience. As a result this makes the testing experience different across the range of browsers we support. Our strategy has been to test on one browser at a time to make sure we are happy with the experience rather than rely on the Ghostlab synchronized feature which we find can interfere with Ajax form submissions.
The Marketplaces team is growing rapidly and we are currently working on many new and exciting features from the 2014 roadmap. We are paying particular attention to improving on our user experience on mobile and tablet devices as our mobile traffic increases.
Ghostlab has removed the pain and frustration from what is arguably the most unpleasant stage of developing a website. What was once a very complex solution for only the brave developer is now as simple as scanning a QR code.
Often when we first meet people our topic of conversation is what they do for a living. Our lives are centered around how we earn our living and at Vanamco we have an interesting dynamic: we created a browser testing application designed to make developers lives easier and save businesses money. Behind this is our team – driving each other to deliver a better, stronger product and have a good time doing it. Over the coming months we’re going to introduce you to our team and get to know the who and why behind Ghostlab. We’re hoping that through our team, we can provide an open channel of communication – we want to know what you think, how you work, why you work and how we can make it easier for you to use Ghostlab.
Each time we introduce a team member, we’re going also talk about a topic surrounding our values for our team and workplace. As workplaces evolve, move to the cloud and become geographically scattered our attitudes and values must be transparent and clear so the team are consistently working towards achieving their goals. Our clients come from a diverse range of backgrounds and through providing our app and service we have learnt about many different working situations – and we’d love to share some of our insights as much as hearing yours. Given this is our first team post, we’re also going to give you a little background into how Ghostlab came to be.
Ghostlab is the product of Swiss company, Vanamco, based in Zurich. “Vanamco” stands for “vanilla ambient computing”. That’s computing applications and services that are built to work out of the box, use at your home and on the road, and provide you with the information you need in any context. Our skillsets rely around information architecture, responsive design, web engineering and customer satisfaction. We have grown to service clients such as CreditSuisse, RS Technick and Unic, just to name a few. Since launching Ghostlab (and also DeviceLab), the application has been used by major clients such as Bose, R/GA, Lego and Envato. More importantly however, we have been recognised for our work with Ghostlab amongst our industry peers as a quality product and major player in browser testing solutions. Now, we’re still humble! The point we are trying to make is that behind this success and quality application are 1) the customers and 2) our team. We learn from our customers and we develop our products to meet their needs – and now we want to share with you how and why!
This month, Andi Dysart, a front-end developer and self-announced ‘product maker, for lack of a better term’ will talk about his role at Vanamco. Essentially, Andi was a key player in bringing Ghostlab to market. But firstly, let’s begin with one of the key values that underpins the Ghostlab team: efficiency.
Our last blog post was about how a business can save money with in-house browser testing. Ghostlab itself is designed to promote efficiency for businesses by a company that states and upholds a ‘we build rock solid and fast’ mentality. So, it goes without saying that we strive within our team to be efficient. Why? In short, valuing efficiency cultivates the team and teamwork, innovation, accountability (internally and with our customers) and ultimately culminates in the delivery of a great tool we as a team can stand proudly behind. Let’s break it down a little further.
Learning to cooperate together on various tasks reduces workloads for all employees by enabling them to share responsibilities or ideas. Teamwork also reduces the work pressure on each member of the team, which allows them to be thorough in the completion of the projects . In sharing ideas or responsibilities, every employee should have a role that suits their specialization. It’s important to recognise the levels of interest in the project at hand, which positively influences the efficiency or speed of their output in accomplishing the task.
When a task is handed to a well-trained and efficient team, the team’s work pace assures that the task will be completed quickly and accurately. This is most helpful for a product like Ghostlab, where efficient team members from different backgrounds work together. This leads us to a thriving, efficient team capable of delivery as a whole. The result getting to enjoy great customer satisfaction!
Shout out to @device_lab + @ghostlabapp – the Delarge Device Lab is in full effect pic.twitter.com/UPi95Yd02z
— Paul Burgess (@delarge) May 14, 2014
With the team running efficiently, we see the next benefit: room to innovate. Working well together means a comfortable space where people feel encouraged to share their ideas and problem solving skills. Team members become accustomed to processing brainstorming information, and Ghostlab benefits from the variety of suggestions that come from effective teams. There are several reasons why employee proactivity and innovation might contribute to increasing company performance. First, many new businesses are now relatively decentralized and employees need to work without close supervision, not that Ghostlab is, but small teams generally work individually to produce the bulk of their work. Thus, proactive and innovative behaviours are necessary. Secondly, the team knows everything: they know what is going on, what customers want and need, what inefficiencies lie in the system. Without their suggestions, we may ignorantly be relying on potentially outdated products, services and procedures. True innovation can only come from a team with the space to cultivate it. We are proud to have innovation within our team and even prouder that so much of it comes from working as an efficient team.
The actual production of Ghostlab depends on the accountability within our team, because we are accountable to our customers! Accountability drives efficiency – are we all working the best way we can to achieve our common goals? Who is responsible for what and delivering when? When do we need to be delivering these changes to customers and how are we going to do it? These are some common questions that come up in the day-to-day running of an app like Ghostlab. Realising that within our team, our individual responsibilities add up to delivering on our responsibilities to our customers. People are relying on us and our product; for their business, on behalf of their clients and oftentimes for themselves. We are accountable! Again, it’s efficiency that must drive our team to deliver and be accountable: ‘work with attention to detail, but work fast and with purpose – we have people relying on us!’. As the mentality trickles through individuals and through the team we begin to see the benefits in the ultimate result: Ghostlab itself.
This is the core of what it is all about. The final delivery of a quality product, with attentive support and ongoing commitment. Efficiency as a value leads to our team being productive, innovative and accountable and that has led us to delivering an application that is productive, innovative and accountable. It’s quite a simple cycle and a simple point, and that’s why it’s good to step outside the walls of your office (virtual or otherwise) and see what values lead your business to where you want it to go. Now, as promised, we chat to Andi – front-end developer, adventurer, product maker and Tweeter of the things like the world’s longest word. Experienced with front end development but able to change hats, Andi now also maintains the websites, documentation and marketing. We asked Andi the quick five questions we’re going to ask all team members we profile:
Longest word in the world: Taumatawhakatangihangakoauauotamateapokaiwhenuakitanatahu — gitmash//andiio (@gitmash) April 16, 2014
My name is Andi Dysart, I’m a frontend developer and a “product maker” for a lack of a better term. I’m sure there is a hip job description out there somewhere.
I came about the idea for Ghostlab due to the need for seeing the whole design not just the first viewport and wanting it to work on all my devices and not be platform biased. Furthermore, I’m a lazy developer and didn’t want to test forms or a menu click on 8 devices for every refresh. I was using Shadow from Adobe before this, they delivered the first mobile testing product.
Now, my general daily role with Ghostlab is maintaining the websites and documentation. I’m also on the Twitter, marketing and other social platforms.
I test and develop new ideas, then build a package creating a product that can be sold. I am pretty much everywhere from the idea phase through to developing functions, design and coding, social media, building street cred and customer service. I wear all the different hats needed to develop and launch a product. But thats only a small part, Matthias Christen is the genius that codes the products and brings ideas to life.
Seeing people use the products we make, images on Twitter, videos, blog posts and speakers talking about them at conferences. Then you see where your “baby’s” ended up and how they are used. Another this is coding and learning something new, the team here is pretty relaxed and hacking around to solve problems (or make frankenstein solutions) is welcomed. I get the most pleasure being a humble developer building small custom made websites.
Having to change hats so often. Making my little brain change from say, coding in a very structured and focused way to coming into a creative flow and idea development. I guess its that left/right brain? If that makes sense.
Bring the product to market. So much work was involved, and then it paying off by upping the game in the web and mobile testing segment. Doing one thing and doing it well.
There you have it:
“Doing one thing and doing it well”
. Andi is just one in the Vanamco team, and we are looking forward to having you meet us over the coming months as we open up about our workplace and how we go about bringing Ghostlab to you.
As always, we’d love your thoughts, feedback and questions. Reach out on Twitter, Facebook, Youtube and below. We’d also love to know about other workplaces – how do you experience efficiency, has Ghostlab maybe even been a part of that journey?