Modern Web Development with CSS Layouts and DevTools: An Interview with Chen Hui Jing
The self-taught designer and developer from Singapore reveals how basketball got her into web development, how she discovered her love for CSS — especially Grid and Flexbox — and why DevTools have the potential to be much more than a debugging tool
Just over ten years ago, before Chen Hui Jing was a web developer and internationally sought after conference speaker, she was playing basketball full time in the Malaysian national team. As is so often the case when you’re pretty good with computers, she became the go-to IT person to sort out the Wi-Fi connection or help people log into their laptops. Her coach then made the assumption that she probably could figure out how to build a website as well and asked her to update the site for the Malaysia Basketball Association.
“At the time I was young and naive enough to think ‘oh yeah, sure, why not? It can’t be that hard’,” Hui Jing laughs as she remembers the experience. “That was my first web development project. I knew nothing about building websites at all but I did know how to view source. So my career started off with the trusty copy and paste command, let’s put it that way!”
Hui Jing — who graduated with a finance, accounting and management degree from the University of Nottingham Malaysia Campus — continued on the basketball team for another two years before taking a job as a project manager on a major banking project in Malaysia. However, as she didn’t have any prior work experience, the sheer scale of it made her feel like she wasn’t qualified enough to make a real difference.
Learning by doing: how to get into web development
“I kept schedules and communicated with the team leads, but I felt like a postman, just transmitting messages from team to team,” she remembers. “There is value in this work, but through my interactions with the technical leads I realised I was actually more interested in how the systems worked. The developers were really kind. When they could spare a minute, they would explain things to help me understand, even though I couldn’t implement what they told me myself. So a couple of years later, when I got the opportunity to get hired as an entry-level web developer, I took it because I wanted to build stuff.”
Hui Jing began teaching herself how to code — reading books, tutorials and blog posts, listening to podcasts and watching screencasts — but found that to make the information really stick, she needed to use a hands-on approach.
“I retain information best if I build the actual thing,” she explains. “For example, if I want to learn how to build a chat application, I can’t just follow along and copy and paste whatever the instructor is doing in a tutorial. I need to figure out what every line does, and if I can, I try to rewrite it in my own style or add an extra bit of functionality. So the concept is the same but the implementation is different. That method still works best for me now.”
Wait, CSS can do that now?
Hui Jing returned to Singapore, where she had started her education, to pursue web development professionally. She focused on the basics — HTML, CSS and JavaScript — and discovered her love for native web technologies. CSS quickly became her favourite.
“It was so intuitive and just made sense! JavaScript just felt that it took more effort. At the beginning I went a bit overboard with CSS. There were so many things I could easily have implemented with three lines of JavaScript but I’d go a very convoluted route to get it to work in pure CSS. In hindsight it was more trouble than it was worth, but it also meant that I found out a lot more about CSS than most people.”
One of the podcasts Chen listened to regularly was The Web Ahead with Jen
Simmons. It was there that she heard about CSS Shapes, a property she found especially intriguing. “Jen talked about how you let text flow around a shape, which is something that you never saw on the web before. Everything was usually a box, a rectangle. So I dug a bit more into it, wrote a blog post and dropped Jen a short email to thank her and let her know about the article. Now, Jen is a very busy lady. She didn’t have to dedicate any time to this random person from half the world away. But Jen responded and even tweeted out my article. I think that was the first post that gained traction. Everything previously had pretty much been for my own reference. I was just documenting my notes from my own learning.”
Hui Jing became friends with Simmons, kept blogging and co-founded Talk.CSS, the first meetup in Singapore around all things CSS. Her passion for CSS led to Mary Lou from web design and development publication Codrops inviting her to continue to build up a CSS reference started by Sara Soueidan. One of the properties she covered was CSS Grid.
Building web layouts with CSS Grid
“I had heard about it from Rachel Andrew,” Hui Jingrecalls. “It sounded interesting but until I actually used it and built stuff with it, I didn’t realise how powerful it could be. It’s so much more straightforward than a lot of the hacks that we had to do in the past to build web layouts.”
Hui Jing was also hooked by the different mindset that CSS Grid requires. “You have to relinquish control, which should be the way that we build things on the web, simply because your content could be viewed in so many different contexts. It’s impossible to control. In print you come up with a really beautiful design, send it to the printer and then it comes out at a certain ratio, gets stuck to a certain wall and people walking by look at it that way.
On the web somebody could view your design on a 70-inch television screen or on a tiny 3-inch budget phone screen. So Grid and Flexbox came out because the spec editors thought we should have a tool that enables us to cater for this very uncertain canvas that we’re building for. I can’t think of any other medium that functions the same way and challenges us — designers and developers — to simultaneously consider all the different possibilities and then write code that can adapt. It’s this unique constraint that’s one of the reasons I really enjoy building and designing for the web.”
Speaking at conferences around the world
Around the same time Hui Jing was asked to speak about CSS Grid at the Mozilla Developer Roadshow in Asia (she believes Jen Simmons put her name forward) and about East Asian web typography at Webconf.asia in Hong Kong.
“The organiser just took a chance on me because she had seen my articles but I had no real speaking experience at that point. It was the first time I spoke at — and even attended! — an international conference. I learned that meeting people in person really does make a difference. A lot of it is about timing and luck. Vitaly Friedman from Smashing Magazine was in the audience and booked me for his conference the following year.”
Hui Jing had no idea how her talk would be received and she felt that the topic — vertical writing modes — was relatively niche. However, the industry was waking up to the importance of localisation and internationalisation and the fact that not everyone in the world was reading left to right, so the talk hit a nerve.
“Suddenly, I was offered opportunity after opportunity to speak at events around the world. Whereas in my first year of speaking I went through the CFP process, the next year I got invited instead. So I think getting your first few conferences really gets the ball rolling. Speaking at events around the world means so much to me. I’m always really grateful because I’m more expensive than most speakers, simply because I’m so far away.”
DevTools, more than just a debugger
At the moment Hui Jing is refining a topic that she presented about at conferences like Pixel Pioneers last year — learning CSS through DevTools. “Firefox shipped a Flexbox Inspector, which made a light bulb go off in my head,” she enthuses. “Flexbox is my favourite CSS property to talk about because it can be very confusing for a lot of developers. The spec is very well-written but I didn’t really understand it myself until I saw the numbers laid out for me in the DevTools. And DevTools are with us in the browser all the time. They can help developers who are trying out new CSS properties figure out what’s happening in a more convenient manner, which also means that they’re less inclined to give up.”
As many people simply don’t know about the many different DevTools available in all browsers, Chen has made it her mission to stand on a stage and talk to a few hundred people at a time to spread the word, which also helps the CSS Working Group as well as browser vendors.
“DevTools can potentially serve as a bridge,” she hopes. “They help developers understand CSS better, which could encourage the adoption of newer properties. The challenge is to get people to try new features and provide feedback early on in the process. There are several ones in particular that really benefit from having a visual overlay. Grid and Flexbox naturally but also properties like CSS Shapes and Firefox now comes with the Shape Path Editor built into DevTools.”
Seven years into her career, now a developer advocate for Nexmo, Hui Jing still really enjoys the process of building something and then seeing it come to life. Her fascination with browsers and HTML and CSS as the foundation of the web is completely infectious.
“My analogy for the web is that it’s like a car,” she laughs. “People use it to get from point A to point B. For them it’s just a tool to get things done but I want to know how the car works. I want to know what goes under the hood and how the engine is built and how it works. So every time I meet a browser engineer I get exceptionally excited! I think it’s a privilege that a lot of people in this industry don’t have.”
This article originally appeared in issue 331 of net magazine in 2020.
