Let’s pretend we’ve typed http://example.net into a browser (Chrome, Safari, whatever) - and now we hit Enter or tap ‘Go’. A series of things happen:
- The browser asks itself ‘do I know the address of the machine that hosts example.net?’
- If it doesn't it goes to a DNS server (who’s sole job is to know these things) and asks ‘do you know the address of the machine that hosts example.net?’
- The DNS server responds: ‘Sure, that URL is hosted on a machine over at 123.123.123.123’.
- The browser makes a note for itself that the domain example.net is hosted at 123.123.123.123, so it can go straight there next time.
- The browser sends a message to the machine at 123.123.123.123 asking ‘do you have content for example.net?’
- The server responds: ‘yes, here is the first file of that page…’
- The browser receives a copy of a HTML file, which itself references many linked files (such as photographs and images), each of which the browser must ask for by following more-or-less the same process as above - until all the files referenced in the HTML are retrieved.
- The browser interprets all of those files and follows the instructions within them to turn all of that into the web-page you see on the screen.
As you can see, there’s a lot going on just to get from clicking ‘go’ to viewing a final web page; and for some pages that main loop of actions might be run through twenty or thirty times (because that first HTML file references twenty or thirty other files). Now, there’s no need to look into the details of these process’s too much just yet, but there are some important take-away considerations revealed:
- A single ‘web page’ is usually made up of multiple files, which the browser ‘sticks together’ to show you one completed page.
- A web-page lives on a publicly addressable machine called a web-server (technically ‘is hosted on’), what you see in a browser is a temporary copy of the files from the web-server, now stored on your machine (the copy on your machine is called ‘cache’).
- Machines do not use domain names as addresses, domain names are purely for the benefit of humans (who prefer to read words rather than long numbers).
- Machines use numeric addresses. Just as buildings have ‘postal addresses’ machines on the web have ‘IP addresses’, such as 123.123.123.123.
- The process of viewing a web-page involves multiple layers of technology; your browser is one, a DNS server is one, the web server is one. There are others.
Being a web developer can involve working on any or all of those areas, but they are broadly split into two ‘types’ called Front End and Back End.
A ‘front end’ developer has the majority of their skill set in the languages and files that the browser itself receives and interprets; so a front end developers core skills will include (but are not limited to) writing HTML, CSS, and JavaScript files - because these are the three ‘languages’ the browser uses as instructions to define, arrange, and display the content of a web page.
A ‘back end’ developer has the majority of their skill set in technologies not directly used by the browser; their skills relate more to the web server. For example they will use technologies like PHP, MySQL, and Apache (among others) because these are tools the server can use to create, store, manage, and supply the files the browser needs.
A Designer is an interesting title and somewhat less well defined; Design, generally speaking, is the considered implementation of a process or idea with regard to the end user - so we all design things. But we don’t all do visual and interaction design; and its those that are the main area’s of skill for a ‘web designer’.
A Web Designer is typically considered a different role than a web developer (though there can often be considerable overlap in skills). A web designer is mainly concerned with the look and behaviour of the final result the browser shows users; they have strong visual-design skills and good empathy for the end-user’s needs and preferences. A good web designer will also know a reasonable amount about front-end development and how that impacts the choices they can make. Their tools of choice are things like Photoshop and a pad of paper.
With regard to ‘front end’ vs ‘back end’ - generally speaking there are more ‘core’ technologies available to learn as a back-end developer than a front end developer, but that does not mean being a front-end developer is easier. Both types of development have a great deal of breadth and depth within them, and in many ways it can be said that back-end technologies are more ‘predictable’ than front-end ones. It’s also interesting to see that some ‘front end’ technologies are making their way into the ‘back end’, and ideas from ‘back-end’ techniques are being copied on the front end. I’ll talk more about that later on.
Regardless of what role a person plays within the field, all people working in web development (and web design) will benefit from knowing how to perform useful testing of their work in order to ensure what they have done is as effective as possible. Producing a working web page is fairly easy. Producing a fast, reliable, effective, and accessible web page requires much more skill (and commands higher wages).
That just about covers the broad strokes and sets the scene for exploring web development in more depth. There are certainly other things to consider, so lets tackle those as we work through the book!