 She loves a professional basketball once. She has, do you have a double degree? No, I don't. I have a finance degree. I've got a management degree. Don't know much about me, do you? Actually, don't know much about me, do you? I could do a corporate production here on my street. That's fine. So we're good. Yes, we're good. Okay. So I screamed at all of you just now so you know how loud I can be. And obviously, if you have been at Top CSS before, you will realize that I dressed up today because I'm wearing shoes. My trousers go past my knees. You know, this is me dressed up. This is like if I were going to attend a wedding or something. And this is very different from how Chris and I usually run things. We're very haphazard. We wing things all the time. So if Top CSS or Cinderella, this is Cinderella at the ball. So enjoy it while it lasts because the next round is not going to be this way. So firstly, I want to say thank you to all our awesome speakers for blowing our minds with their wonderful talks. I don't know about you, but I've learned a ton from them. And honestly, Chris and I want to thank each and every one of you for choosing to spend your afternoon here with us. Tuesday was not the best idea that we ever had, but you're here now, right? So I'm going to be wrapping up the evening with a talk called Love the Web for what it is. Clicker, not working. Now can most of you remember your first encounter with the web? Because I can. We used to have a dial-up modem back at home, the kind where if you connected to the internet, nobody else could call the house. Back then, butlers were in style. Online chat programs had meaningful acronyms like ICQ, clicker, not working. Damn it. ICQ, kids. People made websites about things they liked, because nowadays, people just make Facebook pages. If you work at Facebook, no offense, sponsor us next time. Google didn't exist, so we used Yahoo Search, and I still have the same email account I got when I was 11. It kind of looked something like this. It doesn't look like this anymore, though. There was something called the browser wars, and browsers competed by adding non-standard features and extensions to the fledgling HTML, CSS, and JavaScript syntax. Now, I was too young to fight insect war, but I was part of what was being fought over as a user of the web. In fact, when I got my first real job as a web developer, fixed layouts were already falling out of favor, and responsive design was the norm. This was great, because when it came to web design, it was the mental model that was dynamic from the get-go. I didn't really have to overhaul my thinking when it came to designing for the web. Now, according to my friends who do not build websites for a living, this behavior is not normal, and I'll just look at them like, what do you mean you don't resize your browser a thousand times a day? But jokes aside, in my mind, the web is dynamic and interactive, and it was learning more about browsers' layout engines, how rendering works, and the relationship with HTML and CSS that has shaped my current opinion of web design. I love this code, by the way. And perhaps you may not agree with me, but I do believe that an understanding of the history of the web, amongst many other things, is essential to becoming a better web designer. Let's be honest, the digital age we live in now moves at a breakneck speed. The first electronic computers came about in the 1940s, and that's less than a century ago, which is why I think it is important for us to understand how the web came to be in its current state today, to give us a greater sense of appreciation of what we have now, and to inform a direction of where we ought to be moving in the future. So, we often talk about the holy trinity of HTML, CSS, and JavaScript. HTML for structure, CSS for style, and JavaScript for interactivity. All three are key aspects of the web, and all three have evolved greatly since their inception. Now, this handsome man right here is Sir Tim Berners-Lee. Back in 1989, he proposed a solution to a problem that Sirn had at the time with regards to information access. His paper introduced the concept of linked information. The concept of cross-referencing information between documents could allow for a web of information to be held electronically on machines across the world, and connected via some sort of hypertext. So, Sir Tim Berners-Lee is credited with inventing the worldwide web because he developed the language for encoding documents which is HTML, the protocol for linking them which is HTTP, and a method for addressing them which is URL. The web was built for the publication and retrieval of information. The story of CSS began in 1994. Now, the web had started to become more popular as a publication medium, but there was no good way to style documents at the time. Horkham William Lee, the man in the picture, he saw the need to have a style sheet language for the web, and he presented his proposal for CSS at the Second International Worldwide Web Conference in Chicago. Style sheets in browsers were not a new idea as separation of document structure from presentation had been a goal of HTML since the beginning. Sir Tim Berners-Lee wrote his next browser slash editor to support use of a simple style sheet to determine document styles, but he chose to let browsers decide for themselves how to best display pages to their users. Very laissez-faire approach. So, users of the web did what users do best. Complain. Largely about how they couldn't control how their pages looked. But proposals are destined to remain mere academic endeavors if they're not implemented into real-world applications. So, the first commercial browser to support CSS was Microsoft's Internet Explorer 3, followed by Netscape Navigator 4.0, then Opera 3.5, and then everybody jumped on the bandwagon and, you know, so on and so forth. Now, JavaScript's origin story, and I unfortunately have to mention JavaScript, JavaScript's origin story started in 1995 when Netscape wanted a way to make the web experience more dynamic. They hired Brendan Eich as a contractor to implement Scheme, which was a Lisp dialect in the browser. And in his words, the idea was to make something that web designers, i.e. people who may or may not have much programming training, could use to add a little bit of animation or a little bit of smarts through their web forms and web pages. So, in 1996, JavaScript was implemented in Netscape first, then Internet Explorer. Fun fact, the IE version was actually called JScript because trademarks. Now, when Tim Berners-Lee created the web, he imagined the web as an open platform that would allow everyone everywhere to share information, access opportunities, and collaborate across geographic and cultural boundaries, which is why the web was released to the public domain in 1993. So, although the browser wars were a dark time for the web, in its aftermath, something good emerged, which is web standards. This is an effort to keep the web open, interoperable, and accessible. We've really come a long way in the relatively short span of two decades, from browsers trying to one-up each other with non-standard implementation to working together to create technical documentation for web developers built on an open-source web development documentation platform based on Wiki technology. You can't get any more open than this. But some of you might be thinking, browsers are still broken, right? I'm going to make the assumption that a number of people in this room have had the experience of building a comp in one browser that works great, only to find that it's rendering really weirdly in another browser, one that you obviously did not test at all during the build process. But what we need to understand is that browsers are software, software built by human engineers working for different companies. Each of these companies have their own internal dynamics and decision-making matrices that outsiders like us are simply not privy to. So no, features will not be universally supported at the same time, but because of web standards, we will get there. The web standards project was formed in 1998 essentially to tell browser vendors to quit it and stop messing up the web. And they were largely successful. Browser makers are no longer the problem. The onus now falls onto us as designers and developers of the web make sure that the sites we build today will work for all today and tomorrow. This means keeping browser-specific markup out of the code we write and building with web standards in mind. Most of the information on the web is consumed via an electronic screen. And electronic screens were introduced as an output device in the 50s and screen technology has improved rapidly over these past few decades, electronic screens are essentially a proxy medium in that whatever we see displayed on the screen comes from data encoded as electronic signals, and the heart of electronic displays is light. It is not tangible. You can't reach out and touch light. Because the web is a completely new medium, it's only natural to try to reconcile it with something familiar, like print. Even the terminology we use was borrowed from print. We use terms like web pages. However, there is an additional degree of separation between the creator and the final product. As such, we cannot have the same set of expectations when it comes to handling the web as a medium. I think this emoji explanation sums it up reasonably well. Designing for the web requires an intimate knowledge of the browser that will be rendering the final output. You can't stick your hands in there and change things directly. You have to change the instructions given to the browser, explaining how you would like things to be rendered instead. When browsers first started out, they couldn't do much except display text, or maybe images if you were lucky, like a baby that hadn't developed motor skills to even sit up yet. But over the years, browsers have become more mature and vastly more capable. And when it comes to lay up on the web, I feel that the release of CSS Grid last year is like the web finally getting its driver's license. It's like the web has come of age, you know? There's still a lot of legacy expectations brought over from print that cause designers a lot of frustration when designing for the web. I know this because I'd given my share of grief to them when I said, no, we cannot build this because it requires me resorting to extreme measures of hackishness, so hell no. Which is why I want to establish a new normal for the web. A normal where people don't expect websites to look the same on different browsers and devices. In this new normal, we embrace the fluidity of content and work with it instead of against it. This is a normal where we see control of our designs to the browsers that render them. New layout techniques like Flexbox, CSS Grid, they give us a whole suite of commands to tell the browser how we'd like things to look depending on the context of the screen being used. And it's much easier to trust the browser if we understand exactly how it works. I know there are a boatload of browsers using different layout engines and hence each have their own quirks or release features at different times and you know what? That's perfectly fine. Your parents didn't expect you to behave exactly like your siblings. If they did, I'm sorry, no judgment. As builders for the web, we need to adapt to the evergreen browser model where features and bug fixes get shipped rapidly. So we layer on different styles that are not browser specific but feature specific. So feature queries are a fantastic addition to our toolbox because they allow us to perform this layering natively. Without resorting to extraneous code libraries, none of that. If you had to write extra code to make the website look exactly the same in every browser, you could write less code and have designs that work well on browsers with different levels of feature support. I've come to the realization that designing layouts on the web requires interpolative thinking on multiple levels. We don't just think in one fixed dimension. We get to think about how our design will morph on a narrow screen on an older browser in addition to how it will appear in a browser with the latest features. There is no other medium on earth that allows us to do this right now. So how great is that? The medium is really something special. I reuse this example all the time. So some of you may have already seen this before, but the point I'm trying to make here is that we need to move away from the idea that a site or page needs to look the same in every browser. So CSS Shapes is one of my most favorite properties and you know I'm a CSS nerd because I can actually rank CSS properties based on my personal preference. But that's not the point. The point is CSS Shapes is one of those properties with rather uneven support. Since it's a great candidate for using feature queries. So IE 11 or any older browser that does not support feature queries will get styled. So content can still be comfortably consumed. But a newer browser like say Firefox which does not support CSS Shapes yet will get the visual treatment in the middle. Since CSS Shapes ships in Firefox it will automatically look like the design on the right. So current Chrome users actually see the design on the right because Shapes has been in Chrome for a while already. But the point is you do not have to go back and update your code every time the browser updates itself. It's now much safer than before to use cutting edge CSS in your projects without having to worry that things will be broken on older browsers. So Daniel Huntrods from Clear Left said it best. CSS has its own unique landscapes and structures and our mental maps around it need to reflect that. So this is anecdotal but based on my observation which is actually a very limited sample size, it is often those who write the best back-end code. Those whose mental models around traditional programming paradigms are the strongest who find CSS very uncomfortable. When you think about CSS think about water and how it flows. We can learn to channel water to our benefit or fight it and drown. Okay maybe that was a little bit too dramatic but you kind of get my point right. CSS is ultimately a holistic technology in that even though you can use properties in isolation the full power of CSS shines through when used in combination. So CSS is actually a team sport. For example to do layout we usually start off by using the display property but eventually most of us end up using a whole suite of properties that number more than players on a basketball team. So these properties work together to make magic on the web. Now we can always recreate the same old boring layouts that we've always built with these new powerful tools at our disposal or we can draw inspiration from graphic design and print magazines from film even architecture these sources that inspire designs which only a year before I was saying could not be built. They couldn't be built before but they can be built now. And some of you might be thinking why am I asking you to reinvent the wheel. Aren't we supposed to be building things faster with less effort you know ship ship ship I don't support that view and here's my counter question is the wheel still relevant when you're no longer on land. The web is a unique medium altogether so maybe we ought to be thinking about wings instead. It's not that I want things to take forever to build but I still maintain a moderately romantic view of craftsmanship like a potter who works and shapes his clay by hand or a sculptor who chisels his marble with the precision of a surgeon. I would like to direct my browser like a conductor does his orchestra. To me the magic of the web is the process by which the web evolves. The web was meant to be an open platform one where new features can be proposed and discussed by the community before implemented into browsers and so I want to encourage all of you to participate in shaping the web platform. You may think your voice is merely a drop in the ocean but it is not it is significant. All the CSS working drafts are hosted on GitHub and we are free to raise issues for clarification or even submit pull requests if we spot any errors. Raising browser bugs sends a signal to browser vendors that certain features are in use and they will prompt the browser vendors to fix those bugs sooner rather than later. Conversely if we don't use a feature simply because it is buggy, browser vendors would think this feature is not in demand and prioritize something else instead. Writing and talking about certain CSS features also promotes visibility and feedback to browser vendors and specification writers. But regardless of platform remember that browser engineers and specification writers are human too and we all have feelings so be kind because the world needs more kindness and it is only through our collective effort that we can all make the web a better place for everyone. These are the resources I referred throughout this talk. The slides are publicly available. Get them on the link or you can ask me for them and once again thank you all for being here today.