For Women Who Code Singapore on March 28, 2017. This is sort of a transcript of the talk.
Good evening, everyone. Thank you to Purnima and Women Who Code for reaching out and giving me the opportunity to speak to all of you. From what I understand, the audience tonight is quite a mix, from people who are already working as programmers, to people who just started out, to people who are simply curious about what this is all about. To be honest, 20 minutes isn't enough time for me to tell you how to do web development, it's just not. So I'm going to talk to you about the why.
Before we get into all that, I probably should introduce myself. My name is Hui Jing, and I'm a front-end engineer. I also run Talk.CSS with my friend, Chris Lienert. It is the only CSS-centric meetup in Singapore at the moment and occurs every month, in fact, our next one is happening tomorrow, if anyone's interested.
Can someone volunteer an answer to the question, what is the Internet? Okay, then what about the World Wide Web? I started going online when I was 11. This was my World Wide Web then. Does this sound familiar to anyone? If not, you can kinda guess how old I am.
Whatever I'm doing right now though, has absolutely nothing to do with what I learned in school. I didn't even think I'd be working on the web and getting paid for it. My degree is probably hanging on my dad's wall or something, I mean, he did pay for part of it.
I hope everybody knows what this is. It's a basketball. And it was, and still is, one of the most important things in my life. In fact, it's safe to say I wouldn't be standing right here without it. Stay with me, this is going somewhere.
So I have a typical Asian family, you know, study hard, do well in school, don't get into trouble, standard stuff. Both my mum and dad were educators. I have 2 older siblings, I might have been an accident. And I was the only kid who somehow got herself involved in an athletic endeavour. At the time, I felt the elder generation didn't approve of this basketball-playing thing I was doing. The siblings were great, of course, but there was resistance from the parents, or at least I perceived it as such. Teenagers, right? So teenage me decided that the only way I could get their approval was to be so good that they had to be proud of me. Long story short, I managed to play for the Malaysian women's national team for about 6 years.
When you're on the national team, it's a full time thing. You wake up, train, eat, sleep, train, eat, sleep and do it again the next day. If you have to go to school, you do that, but most of us are free to do whatever during the in-between down time. I became the IT guy. Computer won't boot? Document won't print? Internet not working? Then, one fine day, my coach came to the conclusion that since I was reasonably good with computers, I could build websites, and asked me to do something about our languishing association website. Because I had time on my hands, I was like sure, I'll figure it out.
There was a lot of copying other sites' code. and a lot of googling. But I managed to slap together something that worked. Granted, it was a stew of handwritten code plus copied snippets plus I can't remember what else any more. Then my coach wanted to add more content. Version 2 it is. So that was how I started out.
But I really learned most of what I know now a bit later, after I got myself gainfully employed as a web developer. Here's why I find the internet and the web so amazing.
The internet is the entire network of networks that connect all the world's devices to each other. The internet was conceived of by a group of smart, talented individuals working out of the Advanced Research Projects Agency (ARPA) in 1958.
So these are the 4 original computers that were connected by the first network ever built. As you can see, computers were monolithic machines, mostly found in universities, that took up rooms, were very expensive to build, and couldn't talk to each other. In fact, you couldn't copy a program from one machine to another, you had to rewrite it for your own machine.
Another thing was, given how expensive computers were at the time, it wasn't efficient to let just one user use the computer at a time. So there's this thing called time-sharing, which allowed a large group of users to access and run programs on the mainframe at the same time. Data used to be transferred over telephone lines, but it was unreliable, costly and inefficient.
Data communications is different from making a phone call. A phone call needs a constant open line of communication for the conversation to take place smoothly. Data, however, is bursty, in that it torrents out in a short burst, followed by periods of non-activity. So most of the time the line is kept open, it's practically wasted bandwidth.
The concept of packet-switching could solve this problem. Incredibly, it was independently conceived by 3 people, Leonard Kleinrock out of MIT, Donald Davies out of the National Physical Laboratory in the UK and Paul Baran out of RAND Corporation in California, around the same time period. Packet switching breaks the data up into discrete blocks, which are then sent individually over the network to be reassembled at its destination.
Such an implementation would require routers, which were “small” computers known as Interface Message Processors, IMPs, at every node to handle the packets of data. Somebody had to build these things, and in 1968, a request for quotation was issued by ARPA. RFQ! Times haven't changed much, have they?
The contract was awarded to a small company called Bolt, Beranek and Newman, beating out established players like IBM and Raytheon. This was indicative of the anti-bureaucratic nature of how the internet was built.
Even though they were small in size, Robert Kahn, one of their researchers, described them as the “cognac of the research business, very distilled.” It was clear they knew exactly what they were doing, because they were the only guys who submitted a 200 page proposal, complete with flowcharts, tables and detailed calculations on exactly how the IMP would work.
The original protocol was written to handle communications between hosts on the same network. But after a successful demonstration at the International Conference on Computer Communication (ICCC) in 1972, the challenge was then how to expand this protocol to allow different networks, that ran on different technologies to communicate with each other as well. How to create an internet, if you may.
What came out of that was TCP/IP, which is still in use today. It is the foundation on which open-architecture networking was built on. This concept that allows any computer and network to speak freely with one another regardless of what hardware or software they are running. The internet was built to be open.
Now, the web is much more recent, formally invented by Sir Tim Berners-Lee on March 12, 1989 as a means for researchers to share information. This is what he wrote in an open letter during the web's 28th birthday earlier this month.
“I imagined the web as an open platform that would allow everyone everywhere to share information, access opportunities and collaborate across geographic and cultural boundaries.”
An open platform. think about it. That isn't normal. I'm sure most of us have used Microsoft Office at some point in our lives, if not every other day. Guess what, my dad still has Office 97 on his computer at home. And if you tried to open a document you created using the latest version of Office on my dad's computer, you couldn't. But that's a pretty common situation when it comes to software, isn't it?
But the web, is different. You can still access the very first website ever built.
From the hardware to the software, the whole thing was built to be open. No centralised control, you didn't have to ask anyone's permission to publish a website. You could go ahead and do it. To me, that is amazing. There isn't anything else like this. If your friend from Argentina has a website, you can just type in that URL to see it. You don't need a passport. There are no national boundaries online. Which is why there have been concerns raised over restrictions on the web in recent years. It goes against the principles on which the web was built.
But that being said, the web is still reasonably open. However, some of us may be unintentionally creating barriers to access. You see, web technologies have advanced really quickly. What it took to build a website 10 years ago was a lot simpler than what we have today. At the same time, bandwidth has improved, internet speeds have gotten much faster, browsers have gotten much smarter. The problem is, this progress has been very uneven.
The web is an informational medium. We go online to find out about things. Sure that information can come in all formats nowadays, as opposed to mostly text when the web started out. But the priority is still content. So understand that when we go online to access information, this data has to be sent to our devices from somewhere else. Here's a simplified explanation of how a website renders on your browser.
I'm going to make the bold assumption that almost everyone here has experienced websites that take forever to load, or sometimes not at all. Especially if you're surfing on your mobile device, and the line isn't all that good. Singapore is still not bad, it's like the world's second best country for digital connectivity. But Singapore is like the Asian exception. Because the whole country is a city.
I'm Malaysian, and I just got back from Perhentian last week. For those who don't know, Perhentian is up in Terengganu and is a very beautiful and chill place. And there was barely any cell service. When we're travelling between states, on the highway, connectivity is also sporadic.
Most people now use smartphones to go online. That's how the direction we're moving in. Especially in developing countries like India, Indonesia, Africa. In China, almost 90% of its internet users go online using a mobile device. The main difference across countries is the type of mobile device used, the content we are trying access, is pretty much similar.
So if after tonight, you feel inspired and interested to pursue this web development thing further. I'd like to bring your attention to a couple of concepts that I hope will form the foundation of your approach to developing for the web.
You may have or will soon hear the term progressive enhancement. This term has been around for more than a decade and still, some people are confused about what it really means. The definition I've settled on is that the core functionality of a website should be available without CSS or Javascript. Progressive enhancement is a development approach, not a technology choice.
In fact, if the purpose of your website is to inform and communicate a message, then it's mandatory, and if content is not accessible, that's considered failure. Networks can be unreliable. We want to reduce the incidence of such failures in spite of unreliable networks. Assuming you typed your URL correctly, and your device has some semblance of a connection to the web, HTML is the first thing that your browser receives after the initial response was made. The content should be in here.
Remember I mentioned that as the browser parses the HTML, it will send additional requests to the server for these extra resources? Think of it like shooting a basketball. If you take one shot and make it, you're 100% accurate. The more shots you take, the odds that you will miss also go up. Same concept. The more requests you make, odds that some of them will fail also goes up. So if you're relying on CSS or Javascript to render the content on your site, I'm not saying you can't, I'm just saying you're increasing the odds that your user might be faced with a blank site.
This quote here, was pulled from a case study by Airbnb. They are a very popular site these days, and performance is important to them, as it should be. So they went through an optimisation process, and found that the secret to making their site load super fast, was to serve up real HTML instead of waiting for the client to download Javascript before rendering. Who knew?
Optimisation is not optional. The lighter the site or app, the faster it loads, the less data it consumes, and the less expensive it is to visit. So optimisation encompasses a lot of things. It's a long checklist. Some of them are things you can automate, or take care of near the end of the development process. Like for images and fonts. Minification can quite easily be automated before deployment.
But being mindful of how you structure and write your code has to happen from the start. And that comes with experience. Reading articles and tutorials helps, but you'll learn best from actually writing the code yourself. Everyone will have settle into their own style of writing code. And that's fine. If you work with a team, you will all have to agree to certain standards and practices as well. But there are some universal principles that apply regardless of your style.
Learn vanilla HTML, CSS and Javascript first. I really want to stress this point. All the frameworks and libraries can come later, they will always be there waiting for you. Understanding and mastery of the basics will put you in control of the framework or library, instead of the other way around.
HTML and CSS are quite forgiving, in that, even if you write it rubbishly, your website can probably still work, albeit not very well. I don't know if you've experienced this, but I've visited websites that made my CPU go from 46 degrees to 76 degrees and my fan to start spinning super loudly. Or sites that load megabytes of unoptimised images and 1001 Javascript libraries, half of which are probably not even used. I'm sure we can all do better than that.
Being a web developer doesn't sound like much. We're just building a website or web app, right? But remember, the web is a gateway to a treasure trove of knowledge and information. And I'm speaking for myself right now, but even though I sometimes will rant about why some things are so hard to do, I truly don't think what I do for a living is hard. To me, hard is being a refugee fleeing from war, hard is being a migrant worker earning a pittance to support a large family back home you don't even get to see, hard is having to make a choice between paying your rent so you won't get kicked out or buying food to feed your young kids.
No, what we do is not really that hard. And our actions, however small, do make an impact. Making knowledge accessible to everyone, regardless of their social status, can make a difference. Even if just one person benefits, that's one more than if we didn't make the effort.
I just want to close off with a quote from one of my all-time favourite conference talks, by a designer called Mike Monteiro.
“The world is generally changed by people who just want to live out their ordinary lives. By people who are just trying to get home.”
Ordinary people, just like you and me.
Thank you.