Amal joins the party 🎉

Oh yes, the sound of those BMC beats means it’s time once again for JS Party. What’s up, y’all?

Ow, ow!

Hello!

I’m Jerod, I’m your friend, and I’m joined by three of my friends. Nick Nisi is here… What’s up, Nick?

Hoy-hoy!

And of course, you may know her as @shortdiv. I know her as Divya. Divya is here… Hi, Divya.

Hello, hello!

And we have a brand new face, a brand new voice on the show… Amal Hussein. We’re welcoming her for the first time as a JS Party panelist. Welcome, Amal!

Hello! Happy to be here! Yaaay! Finally…!

Yaay!

Happy to have you! So the three of us know you well, but our listeners may not know you quite as well. Why don’t you go ahead and introduce yourself by way of origin story? Every great superhero has an origin story, and certainly you do as well… So tell us how you got here.

Thank you so much for the warm welcome, Jerod and company. My name is Amal Hussein. I’m a principal software engineer based in the Boston area, and my origin story is kind of a really interesting one. I was born in New York City, ended up moving to Dubai when I was two months old… My dad got a job there, so I grew up abroad as an American, but who was an expat… Then I came back to the states when I was 17-18, and went to college, studied biomedical engineering… So yes, I transitioned into software from biomedical engineering, after being exposed to the rapid cycles with software; your only bottleneck, and the long product arcs that existed in the biomedical engineering world are just not really there… And also the knowledge sharing component with open source and how folks are sharing million-dollar ideas freely and openly… It was very different than the patent world of biomedical engineering, where everything is heavily guarded and regulated.

[03:58] So for me, I was interested in solving problems at scale, and really software felt like the right way to do that… That decision happened almost about a decade ago, and since then I’ve really been punching my way up the technical ladder, I would say, from software engineer, to senior software engineer, to tech lead, to project lead, to engineering manager most recently at npm, and I kind of have recently just made a big pendulum swing from management back into an IC role, that’s technical leadership, but less BS around all of the pain points with middle management.

So that’s a little bit of my origin story… I’m also a community organizer, podcaster myself; I’ve been podcasting part-time on the web platform podcast for a little while… And I speak at conferences, and actually that’s kind of how Jerod and I connected. I think the first time we met in real life was last November at All Things Open… And for anyone who could see Jerod - he’s wearing the conference T-shirt…

This was an accident.

I wasn’t sure if you wore that T-shirt intentionally or not…

It was a happy accident.

Yeah, he’s wearing the T-shirt from the conference where we met for the first time. I think I had actually been on the show at that point already, I had been on the Changelog, and I had been on JS Party as a guest before… So Jerod asked me to come on as a guest, but I was really bogged down with npm life, and new manager life, and I just had no bandwidth to really schedule any recurring meetings on my calendar between 6 AM and 10 PM, to be quite frank… Yeah, and I’m just really happy to have the time to do this now and talk shop.

Yeah, absolutely. Well, here we are, so we’ll link up those old episodes in the show notes. As you said, you were on the Changelog talking ASTs, you were on the lightning chats, if you all remember our – it may have been episode 100, we had 11 lightning chats from All Things Open, so Amal was on that episode as well. We’ll link those up if you’re interested to go back and hear more… But we’re all happy to have you here now.

Yeah, and I was actually even on another episode of JS Party. I can’t believe you don’t remember this, Jerod… Shame on you.

Well, I may not have been on it, so… As a rotating panel.

You weren’t on it, but Nick was on it. It was Nick and Kball.

Oh, do you remember it, Nick?

Yeah, I do.

We did a live interview at a conference, so… we did that too.

Awesome. So now you’re here for good. You’re a regular panelist, and we’re gonna get to know you even better by asking you random questions, in rapid-fire style, that may or may not have to do with JS… And we’ll start with this one - Amal, describe your perfect breakfast.

Oh, my perfect breakfast lately has been – I’ve discovered these buttermilk herb biscuits, so you get the sweet and sour… So buttermilk herb biscuits with egg, a slice of tomato and American cheese. That’s the perfect breakfast for me.

That sounds really good.

It’s so specific…

Yeah, super-specific. Well, I’m a foodie, and so is my fiancée, so we’ve kind of gone into foodie overdrive since quarantine. When engineers get into stuff, they get really intense about their stuff… So I feel I’m very intense about food right now.

I didn’t have breakfast, so I’m very intense about food right now as well… [laughter] But I will survive, and we’ll ask another question. Divya, do you have a question for Amal you’d like to ask her?

Yeah. I feel like I know Amal a lot, so it’s really hard to ask questions, because I know a lot of the answers… But I guess for the listeners who don’t know her as well, here’ s a curveball of a question - do you like to live dangerously?

Oh, a hundred percent. My parents are East-Africa, enough said. I’m pretty sure Somalis brought pirating into the mainstream conversation more recently… [laughter] I’m a descendant of some serious bad*****, so yes. I love to live dangerously.

Nice. What’s the most craziest, most spontaneous thing you’ve done, that sort of represents that personality or that side of you?

[08:12] The thing I’m willing to share in a semi-professional setting would probably be – the most dangerous thing I think I’ve done is make friends with people on vacation and then spend an excessive amount of time with them.

That can be dangerous.

Yeah, that can be dangerous.

That feels kind of – yeah, right…? “I’ve just met you, but let’s go do stuff.” I think I’ve done that several times, so… Yeah.

That’s super-brave. I’ve watched so many horror movies that I never do that… [laughs] I just never trust anyone.

Nick would like to ask you what your favorite flavor of JavaScript is, and why is it TypeScript? [laughter] I’m just kidding…

That is something that wouldn’t have crossed my mind… But it said “non-JS questions”, so…

That’s right. Go ahead, Nick. Throw one at her.

Well, technically, if you wanna get pedantic… [laughter]

Oh, we do wanna get pedantic, trust us…

TypeScript isn’t JavaScript, right? So it’s a non-JavaScript question.

Do you know what else isn’t JavaScript? …if y’all want me to blow your minds a little bit… Anything that is stage one through three, right? Any feature that a lot of developers are using that hasn’t passed stage three is technically also not JavaScript, right?

Yeah, it’s true.

Or JSX.

It’s like an idea. Oh, JSX – yeah, it’s definitely…

Or CSS-in-JS.

Yeah. It’s one of the more controversial things, but I have to say, JSX is – I appreciate the effort. What I really like about React is the fact that there’s no magic; there’s no magical incantation that you have to learn to get started with it. It’s just JavaScript for the most part, minus some weird little rules here and there… But if you compare that with something like Angular 1.x, for example - you know, pipes and filters… How many times did I have to google “How do I pipe?”, “How do I filter?”, “How do I loop?” Because there’s just magical incantations that you’re learning that are not HTML, not JavaScript, and specific to Angular.

So I think for me the success of a framework is also heavily dependent on the learning curve, and I think that’s why you’ve seen that mass adoption with tools like React. Sorry, I didn’t mean to pivot into –

This was not supposed to be about JavaScript… I’m just kidding.

Yeah.

Fair enough.

No, that is a great point, and that is one of the reasons I really like that over something like Angular, which is very dense to learn. But non-JavaScript aside, I hear you speak more than one language. How many languages do you speak?

I do. So I told you my parents are Somali immigrants that came here 40-something years ago, and I speak Somali because of that… I can thank my dad for that, because my dad refused to speak to me any other language when I was a small child… So I really appreciate that, because my brother and my sister don’t speak Somali, because he was done heavy-parenting, I think, by the time they rolled around. I’m the oldest, so I got all the energy from them… Yeah, so I speak Somali, Arabic, French, and English. Arabic and French I learned growing up in Dubai.

Wow.

That’s cool.

I feel so unaccomplished…

Oh, no! Not at all!

[laughs]

You’re an American, you don’t need to learn anything that isn’t English. [laughter]

Thank you…

That candid compliment…

Thank you…?

It’s okay… [laughter] But no, my partners also – his parents are Korean, and we’re both learning Japanese together now, and we’re both on that CJK track; so he already speaks Chinese and Korean, so we’re learning Japanese together.

Oh, cool.

Eventually, I’d like to learn Mandarin and Korean as well… But I think Japanese is my entry point into that.

And today I learned about the CJK track… [laughs]

Same!

Oh, you guys don’t know about CJK?

No.

CJK is a thing, yeah. We should link that, maybe there’s a Wikipedia article we could add to the show notes, Jerod… But yeah, it’s Chinese, Korean, Japanese. So if you speak those three languages and you live in East Asia, you basically can do business for real.

Oh, wow.

So it’s kind of like a requirement to get above certain levels.

[12:17] Do you think that your practice and experience in learning multiple spoken languages has aided you in perhaps learning multiple programming languages, or do you feel very in the JavaScript world, or are you polyglot in that sense, too?

Yeah, that’s a really great question. I am definitely polyglot and I identify – the longer I go in my career, the more I identify as a generalist, so the more and more I’m like… I don’t really think about things in terms of frameworks and tools and languages. It’s more like I look at the problem and then I pick “Okay, based on the problem and based on the constraints that I have, this is how I would approach it.” And of course, a lot of that is pulling from my past experience, but sometimes I know that something that I don’t have expertise in would actually be a better solution, and that’s an opportunity to come up to speed with that.

I would say the benefit of having this open-minded approach to problem-solving is that – basically, what happens is you accelerate your learning a lot as you progress through your career. I’ve gotten a lot better at learning new things, because I’m a lot more open to learning them, in addition to the fact that I constantly learn new things. So my sphere of learning is not small, and therefore I feel like when I learn a new thing, I have more data points to compare and contrast.

For example, let’s say JavaScript is your first language, and now you’re learning Python… So now you’re not learning about what is a for loop; you know about the concepts of looping, and now it’s just a matter of “Okay, how do I loop with this syntax?” So it’s that kind of mapping that helps me accelerate my learning. It’s a very nerdy answer, I’m sorry…

I love it, I love it.

I guess I’m like the nerd curmudgeon that’s gonna be on this show.

You’ve found your people.

[laughs] Okay, cool.

What’s been your favorite language to work with, since you sort of consider yourself a polyglot and learned a lot?

And why is it TypeScript? [laughter]

That’s so funny, I’m learning TypeScript now for the first time. I’ve managed to avoid it my whole career. The company I work for now uses TypeScript, and I’m learning it, and it’s this really interesting, curmudgeony experience… I think I’m slowly understanding the benefits, but we have to also be honest and acknowledge that with good testing and good coding practices you don’t need TypeScript… So I just think it’s very important to state that. TypeScript is there because we as developers are generally lazy, in a good way, and it’s there to combat our laziness around not having proper conventions in a language that lets you shoot yourself in the foot all the time… Just putting that out there. I think I forgot the original question… [laughter]

Your favorite one.

Oh, favorite one…? Oh, favorite one for sure is JavaScript, I’m sorry. I mean, it’s about accessibility, it’s about language of the web… It’s so accessible; JavaScript lets you do so much. There’s no compiler needed… That should be the tagline for JavaScript. JavaScript - it just works. For me, accessibility trumps all things. Accessibility, and then scale of usage, scale of examples, ecosystem… There’s so many metrics to score tools and languages and frameworks and ecosystem on, and JavaScript really massively wins on all of those counts, for me.

The last question for you here before we skip to the next segment, which is “What made you wanna join us nerds here at JS Party, and what do you think you’ll bring to the show that’s all Amal?”

[16:04] Yeah, I’m really excited to be on this show because I really – you know, as I progressed through my career, I find myself lecturing a lot, and having these weird professorial moments with people, and I think it’s like an outlet for that energy… And I really have a strong passion when it comes to teaching, and also I think being a woman and a person of color that’s quite senior, there’s a representation factor which I think I bring here, that is really important and inspirational to others.

I never spoke at a conference or did community work because I was like “I need to represent brown people”, or whatever. It’s just the feedback that I’ve consistently gotten. It’s the DMs that I get, or it’s the people who apply for jobs, referencing that they saw me speak and they wanna work with me… It’s things like that. Representation matters, and if I can show the world that not only do people who look like me belong, so we’re not just in the classroom, but we’re teaching, we’re a part of the conversation. I think it’s good for the web, because we need more people that are not white dudes, simply put… Representing, and teaching, and leading the way.

Well, we’re super-excited to have you, and on behalf of everybody, welcome to JS Party!

Thank you!

Alright, we’re back for Pro Tip Time. Pro Tip Time - that’s my intro theme song. Pro Tip Time. We need to really have somebody who’s not me make a jingle for that… Maybe, Nick, you can do that. You could have your robots do that thing for us. Automate it. [Jingle 00:18:50.29] This is where we share our pro tips. Sometimes we’re actually pros at things, and sometimes we just play them on JS Party. These are life hacks, lessons learned from doing dumb things etc. So let’s share the wisdom. Nick, you’re up first. Do you have any pro tips for the people?

Alright… I took this as an opportunity to give out some pro tips for your next Zoom call or meeting, just to make it so you can shine and be the bright star that you are in that Zoom call… And I have three apps to help you with that. Because we’re all doing a lot of Zoom calls right now, and I spend a lot of time – basically, I’m a professional zoomer.

So a couple of things that I’ve found that have helped get a point across, like when I’m screen-sharing, or doing pair-programming, and not using Visual Studio Code’s live share thing - I’m foreshadowing a little bit there - but one cool thing is this app called… And I forgot the name of it…

[laughs]

You’re really a pro at this.

Yeah, I’ve put the Mac App Store link in there…

[20:05] I think it’s called Presentify. I’ve just clicked–

Presentify, yeah. Thank you.

Yeah, you’re welcome.

You’re really getting your point across here.

Yeah… [laughs] This basically brings the awesome drawing feature that you have in Slack - if you ever share your screen on Slack - it gives you that ability to draw on your screen with a simple key command. So you can just toggle it and then your screen becomes a canvas, so you can draw arrows or you can draw squares, or just free-hand draw anything, and delete it, and really get your point across, which is really cool.

And then for the vain screen share - this is where your next tool comes in, and this one is called Vidrio. I’ll paste a link in the show notes, but it lets you – when you screen-share, you’re not sharing your face as much, or your face becomes smaller, and you’re sharing your screen, which becomes bigger. And that’s unacceptable if you’re vain, right? So this lets you combine that by using opacity and the camera to share yourself with the screen as well; so you can get really up-close and creepy, and it’s pretty fun.

And then the third one, I will say - and I’m probably gonna get a lot of hate for this, but there’s a Snapchat filter for your webcam, or a Snapchat app for your webcam that lets you use the Snapchat filters… And the way that I approach that is exclusively with all of the Tom Holland Snap filters. So when I share my screen, I just have these random “I love Tom Holland”, or pictures of Tom Holland… [laughter] And I don’t know why… But there’s a lot of them, and it gets you a lot of variety. But there you go, there’s some pro tips to excite your next Zoom call.

[laughs] I will say, this is the creepiest picture I’ve ever seen of you; we’ll have to include that in the show notes for people to enjoy the creepiness.

You’re gonna have to be more specific - which one?

Nope, both of them.

Wow… [laughter]

Very cool. So this Vidrio - the idea is instead of being in the corner, you are the whole screen, but your opacity is cranked down. So you’re just kind of like a ghost behind what’s going on on your screen…

Yeah. And it works really well for your dark-themed code editor. With me, I have a very bright background, and then a dark theme for Vim… So I just show up like I’m floating in the Vim window, which is pretty awesome.

The Ghost of Vim Past.

Yup.

Awesome.

He’s stuck in Vim. Can’t exist.

He can’t get out. [laughter] That would actually make a good video…

Really… [laughter]

You’re just like floating around… Epic.

Yeah, that’s funny - one of my teammates actually just used that filter at work the other day, and I just couldn’t believe it. I was like “Wow, that’s incredible, and I’m never gonna get any work done in meetings anymore.” [laughter]

I wanna say that I heard a story about somebody who’s manager tried it out and turned themselves into a potato, and then couldn’t figure out how to turn it off, so they gave the entire meeting as a potato. [laughs]

They couldn’t undo it?

Yeah, I saw that too. That was hilarious, because there’s just something – and I think it was the manager of that team, or the leader…

Yes…!

So it’s even more hilarious… But yeah.

Yeah, I’m gonna need a link to that, because I missed it, and I do not want to miss the potato man.

The potato manager.

Alright, good stuff for those zoomers out there… Although, Nick, I think you’re technically a millennial, but we’ll give you a pass on this one. A zoomer pass. Divya - your turn.

Cool. So to go off of that, the foreshadowing - I use VS Code Live Share a lot. It’s really cool, because it fixes a lot of pain points you have when especially you’re remote and you’re like “Oh, let’s type on this thing together”, and it’s really nice. It’s just sometimes really slow, especially if you have a lot of things running. That’s the only downside to it.

[24:00] But in general, I think it’s really nice to be able to share a session and then have two people work on the same – so you can be on a Zoom call, sharing a VS Code live session… And it feels better, because you can also switch when you’re pairing who drives, rather than having to be like “Oh, let me share my screen”, and then the other person being like “Let me share my screen”, and then they’re in two different states of the project… But with this it’s really nice to just be able to work off the same one. And you can make notes, and whatever…

So it feels like you’re almost next to the person, even though you’re not, which I think it’s super-cool. It’s made my pairings really smooth, so I 100% recommend that. And also, related – so I talked a little bit about writing a playground at work, which is essentially a little online IDE type thing for validating whatever… And I’m building one currently, and I was using Monaco… And I complained a lot about Monaco, and I’ve switched away from Monaco completely… And I use Code Mirror now, and I honestly think it’s so good.

If you are thinking of writing an IDE or a playground, Code Mirror is amazing, because it’s just very bare-bones, and very simple to integrate. The resizing is really nice. I think I just got annoyed because Monaco didn’t have proper types, and it also was annoying to resize. You had to keep telling it to resize when you resized the screen, which is really annoying and janky. And Code Mirror just automatically resizes… And it’s just super-simple.

In order to change the theme, you don’t have to include – Monaco has this giant library, and then you can change the themes, which is really nice. Code Mirror is super-lightweight, and you just add in the CSS file if you want that specific theme. So if you imagine that your IDE or your particular playground will only have one theme, you can just load that particular CSS file, so you don’t have the bloat of extra other things.

So I really like it… It’s super-clean, super-smooth… There’s so many different tools that use it. I think CodePen uses Code Mirror, Svelte’s Playground uses Code Mirror, and I’m sure a bunch of other tools as well, so it’s super neat and smooth… That’s the story of the playground that I’m building; I moved away… Sorry, Microsoft. Also, Code Mirror is open source.

Yaay!

I think it’s funny that they don’t have good type support, given that it’s literally the editor that powers VS Code…

Usually, what happens is that you have it indefinitely-typed, or whatever, so it’s like [unintelligible 00:26:33.12] It doesn’t exist, and it’s just in the library itself… And I had to do some shenanigans with my View Config to grab that type and add it to my config. It was a horrible experience.

I have played with it as well, and the – at least the last time I played with it, it was all AMD, so I had to load RequireJS into my project to…

Yes, that also. It’s still the same, yeah. They haven’t changed that. But anyway… Yeah.

Honestly, what I find kind of interesting about this explosion of smart IDEs in the JavaScript community - as somebody who’s been using tools like WebStorm for literally more than seven years at this point, I’m just really confused at all the hype around VS Code… Because I’m like “Wait, WebStorm - we’ve had this for years.” [laughs] I just think it’s interesting; the barrier to entry, I think, has been licensing. I think people have to pay for WebStorm, and WebStorm has been this awesome, fancy IDE that can do so many things for years and years and years… But I think just like the accessibility factor of free - you can’t beat that.

[27:47] I feel like WebStorm is kind of getting their lunch handed to them with VS Code, even though performance-wise and many things are quite good and/or better in WebStorm; I think the ecosystem factor is where VS Code for me wins. It’s like the same idea behind why Slack took off… How many instant messaging and chat apps did we have? Slack works because of integration. The value-add for tools like Slack is integrating your JIRA, and your Google Drive and everything else in this one-stop shop. So yeah, the ecosystem matters…

Yeah. Network effects. Everybody uses it because everybody uses it, you know?

Yeah, pretty much.

Yes…

Tough to break out of that…

Yeah, that’s really interesting. Thanks for sharing that, Divya.

Yeah, for sure. And then my last thing is just – I started doing a bunch of game development outside of work, which has been really fun…

Awesome…!

Because I’ve been so tired of just doing coding projects that’s like strangely related to work, and practical… Yeah, I don’t wanna do practical things. I wanna do dumb things, so… I took game development classes in college before at WPI - yay!!

Oh my God, yeah.

We talked about this…

Holy crap! Yeah, we did talk about this. That’s so funny. I keep forgetting that you did game development as well.

Yeah, I do. So I took game development classes. I did it in Unity, hated Unity because I wrote it in Jscript, because I refuse to write C#… [laughs] And sort of dropped that aside. But then I’ve found this new engine called Godot, and it’s open source, which is awesome; I’m all for that.

I think the biggest thing, from reading Reddit posts and stuff, is they’re sort of similar, because you use C# in both… But in Unity, if you want dark mode, you have to pay for it, and Godot dark mode is free… [laughs]

So it’s the little things.

It’s the little things, I know.

Like, don’t you care about our eyes, Unity?

I know, I know…!

No, they care about your wallet, is what they care about… [laughter]

Just code with your sunglasses on, everyone.

I know, basically…

Save your eyes. Open your wallet.

Exactly. [laughter] Open your wallet, LOL… Funny.

But yeah, it’s a really good game engine, and it’s also more geared towards indie developers, which I think is cool, because I’m not pro at all. I don’t know what I’m doing.

What kind of game are you building?

So I’m building a platformer, like a 2D pixel-style platformer…

Sweet.

…just because I think it’s cool. The art style can be super low-fi, which is really fun… And for pixel tools, this is another fun tool thing, if anyone’s interested… I’m using this tool called Aseprite (link in the show notes) for pixel art. You can use whatever, you can use Illustrator or anything, but Aseprite is a very low-definition tool for pixel art. There is a cost for it, so it’s like $5 for the app, but it’s free if you download the binary from GitHub and build it yourself… Which I did, because I’m cheap… [laughs] Like any other developer, I’m like “I know how to do this”, so I pulled it down and I essentially executed the binary, and it runs…

You should put it up on DockerHub and make everyone’s life easier in the future.

No, but I feel bad, because –

Oh yeah, yeah. I actually take that back. No, do not do that… Nobody should do that. [laughter]

Yeah, I want them to get the money, but I–

Jerod, cut this out of the show. [laughter]

I’m the worst. Ugh… Okay. I decided, since they offered this free alternative, I might as well take them up on it. But it’s very cute. It’s very small, simple… There’s not a lot of craziness to it. Because usually, with graphics development there’s so many different tools; it’s hard to learn. But for this, the tools are so barebones that it’s very quick for you to get up and running. Also, I think the timelines are super-nice, so you can create little pixel animations… So cute. And they have onion skinning, which is great, if you’re familiar with animations… You can just layer on frames and then just draw as you go… So good.

Awesome.

Very cool. Yeah, we should link to Jenn Schiffer’s pixel art.

Yes! Actually, yes. That’s a good one

[31:58] Jenn is – we both worked Bocoup, but also we’re friends now… And I feel so cool saying “I’m friends with Jenn Schiffer.” It feels like I’m saying I’m friends with Beyonce. Basically, it’s the equivalent of Beyoncé in the web community, is Jenn Schiffer. She’s got an incredibly awesome, hilarious, satirical blog, but also she does pixel art, which is cool… So yeah, if you want some inspo, Divya…

For sure, yeah.

So do you wanna introduce me, Jerod, or should I just –

No, bust into it. Go ahead.

Jump in. [laughter]

“Do it! Do it!!”

I already introduced you, that was the first segment. Now you’re on the show. Just talk, yeah.

Right. Now I just talk. Just talk. Alright, so my pro tips are – I’ve been very in the debugging headspace, so a couple things I have to share are on debugging… The first thing is I’m surprised at the number of developers that don’t know about Console.trace. Console is an object with lots of methods. I would highly advise you to just look at all the things that you can do with Console. You can do many cool things, including Console Table for just easy viewing of data, JSON object data… Just tons of cool stuff.

But my favorite thing is trace. So when I’m debugging something and I wanna cheat, and I don’t wanna have to figure out what’s calling what - so instead of just doing a log, you can do a trace, which will do a log++, and that ++ is the actual stack trace. And that works in Node, that works in the browser… It’s incredible.

The second thing I wanna share - actually, there’s two things. They’re copy commands in DevTools. I’m sure if you’re debugging stuff, there’s a lot of copy-pasting back and forth etc… You can kind of simplify this by using the copy object in the JavaScript console… So if you essentially just – perhaps something that you’re debugging and it’s a value that you wanna be able to inspect in another tool, so you basically can use the copy object and then it’s available on your clipboard, so you can wrap your code in a copy object, or wrap a variable in a copy object. Then it’s on your clipboard and you can paste it wherever you want.

Same kind of thing for network responses… Sometimes when I’m doing API design or writing contract tasks or something, it’s really nice to be able to just inspect, or grab my mock data or real data or whatever from the console, and it’s always kind of a pain. But there’s some options, and we’re linking that in the show notes, so y’all can see that… But there’s an easy way for you to actually just copy network responses, and then they’re available on your clipboard as well.

Oh, cool.

Super-cool. The next couple things I have to share are just some general tooling that I always install on all my new machines. It used to be called Spectacle, for window management. Without this tool, I’m very disoriented and I don’t know how to use the computer. I just use my keyboard to move everything around, resize, center, full-screen, get it out of my way… But Spectacle, unfortunately, as of a few months ago, is no longer maintained… Rectangle is his predecessor, so we’ll link both… But obviously, I’d start with Rectangle, if you’re starting with it today.

Nice.

And then Gifox is one of my favorite tools too, for making gifs and videos… And especially if you’re doing frontend work, it’s a really nice thing to include in your PR, it’s a good thing to send to your product folks, or your designers… Just to like make a video, visual stuff - it communicates so much faster and better than text… So use video when you can, and Gifox is like a paid app that you can use on macOS, and it’s incredible.

Nice.

I love it.

I use something really similar. I use a tool called Kap, or Kapture, and it does the same thing… But you’re right, it does wonders when you’re wanting to show differences, like “Oh, this is what it was before, or this is what it is now”, or even to show interaction.

Yeah, and the nice thing is the user experience of Gifox is nice. You can make things and just drag it into Slack, or have it automatically go onto your clipboard after it’s done… There’s a nice usability there, which I think is good for dev workflows. But yeah, I couldn’t agree more - making a video of a bug and saying “Is this expected?” is so much better than “Here’s 40 lines of text, and 17 questions that follow, to clarify…”

[36:07] Yeah…

Combine that with Presentify, and then you can annotate it before you take the screenshot…

Wow…!

And let me put Tom Holland on it, and then make it a ghost.

Exactly. [laughs]

Yeah. [laughs]

Over-achieving, Nick…

[laughs] Well, I will just very quickly share a pro tip… More conceptual than what y’all have been sharing… But y’all know that cliché, “You’re the average of the five people that you surround yourself with…” That’s a cliche. Well, first of all, let me say something about clichés… Clichés are clichés because they are true, and they are so true that you say them so much that they become a cliché. So don’t discount a cliché. But my advice is, given that, which I think it’s true – I mean, you don’t average out people that are around you; and five? Who came up with that number, five? But if you wanna learn a thing, or learn a lot of things in life, find people who are smarter than you, surround yourself with them, and then learn.

Now, that’s a simple formula. It’s somewhat hard to do, but it’s gotten a lot easier lately, especially with the advent of podcasts… Because you can now have as a “friend” the smartest people on Earth, out there, talking in the microphones. And you don’t have to maintain that relationship… There’s a lot of things you can’t do. You can’t interactively ask them things, which sometimes is necessary to learn, but you can learn a whole lot just by gleaning from smart people all around. So I would advise others – I do it all the time, and I’ve learned a ton through podcasts… And I would advise – hey, if you’re listening to this podcast, maybe you’re trying to do that… Why are you listening to us? We’re a bunch of schmucks. I’m just kidding… We’ve got Amal here, we’ve got Nick, we’ve got Divya - we’ve got some smart folks. But go out there and learn via just hanging out and listening. That’s a pro tip.

Alright, that’s Pro Tip Time… Insert Nick’s robot theme song here… [Jingle 00:38:01.21] And we’ll be right back.

Alright, we are back… And speaking of learning things from people that are smart than you - I’m trying to understand this CSS Sweeper project that I came across last week… Which is basically Minesweeper completely in HTML and CSS. No JavaScript. And it accomplishes the game, which - we’ll link it up and you can go click through and play it yourself. It’s the classic Windows Minesweeper, which is a great time waster… I was more of a Free Cell guy myself, but it’s still a good one.

[39:55] But it uses this trick in order to make CSS basically a full-on programming language. They call it the Space Toggle Trick, and it’s taking advantage of CSS variables. This is explained in the readme of the repo, which I’m sure you all are looking at… But I started reading that and I was like “I don’t get it, y’all. I don’t understand what’s going on here.” So I thought maybe we could demystify it; maybe one of you three can demystify it for me, or we could talk through it together… Who’s given this a look and who thinks they can explain what’s going on and how you can play Minesweeper with just CSS.

Oh, I took a look and I feel like it makes sense. And then I opened up a quick CodePen and tried to replicate a little bit of it… And so far on this call I have not been able to get that working. But it’s taking advantage of a couple of things with CSS variables. One of them is that you can set a default value for a variable, and the other is this – what they call the Space Toggle Trick, where you set a variable to an empty space and then change it later to initial, and you take advantage of the idea that you can set a CSS variable and then it will go to the most recent value of that.

So if you think about like the CSS cascade, you can set it somewhere else and set it to initial, and then it will flip, basically… Like flipping a bit to be whatever the other value is. And you can take advantage of that to toggle things on and off, and then take advantage of states in CSS, like a checkbox being checked, to flip that bit and change it to be something else.

Hm… I was wondering what was triggering the actual interaction, or triggering the logic, which is - it’s just using “is checked”, or some sort of selector…

Like a radio button, or something…

Yeah. That’s mind-blowingly cool. I did not know about this until right before this show started, and I was like “Oh, wow. What is this?” So it’s just been mind-blowing, looking through the readme and peeking through the code.

I think for me what’s a very interesting take-away here is this concept of variables being introduced into CSS, and how it’s another story of developers paving the way for the web platform… Web developers and library authors doing that innovation in a low stakes, low-risk way. Because you can’t really mess around on the web platform; it’s just too high stakes. It’s banking software, it’s how people do their jobs… That’s why the arc of standards development is so long; it takes a while to get it right, it takes a while to perfect it, have consensus on implementation etc. But you know, this is a clear example for me of web developers leading the way here, and it’s a good moment for us. It’s always a good thing when something that we’ve been doing for a while, and – we have conventions that are not official, that are like best practices, and they’re now abstracted into the platform. That frees up our memory for something else, so that’s exciting for me.

Mm-hm. Divya, what’s your take on this?

On the Space Toggle? I think it’s super-cool. I’ve used CSS variables before, but I’ve never used it to this level, and it is mind-blowing. I mean, I don’t feel so bad, because it is a trick that not a lot of people have heard of. I think in that particular GitHub readme they reference – that has been discovered like three times, or something like that… So yeah, it’s pretty cool. It’s a fairly novel concept that’s only been in the readme; they refer to it being discovered three times, and I think it’s only been like – Ana Tudor found it supposedly three years ago, and then no one talked about it until really recently… So I think it’s still blowing a lot of people’s minds. And even when you look at the tweet in which – is it James? He wrote about finding that trick. He’s like “Not a lot of people engage with it. It’s not like thousands of likes, and stuff.”

[44:09] The question is is this a cool novelty, by taking advantage of a feature that didn’t really expect you to use it this way, or is this so useful that you’ll start to see it become more than just a trick? Something that actually has real-world value, maybe it gets framework eyes and people start building things with it… Or is it just kind of staying in the “Hey, remember the CSS Minesweeper? That was cool…”

I think it might be a niche… Honestly, the thing that I find the most fascinating is – it wasn’t referred in here; someone used that trick with media queries, which I think is really neat, because oftentimes with media queries you end up having to write a lot of extra cruft around “Oh, for this media query and this class, do this.” But then you could utilize this particular Space Toggle that would make your code – it won’t make it more understandable, it will actually make it less understandable… [laughter]

I can’t understand what I’m looking at right here…

If anything, it would make it less messy… But I don’t know at what cost, so yeah…

Time will tell. Well, check it out, CSS Sweeper, on GitHub, of course. The link is in your show notes… This was a super-fun episode, super-fun conversation. We hope everybody enjoyed it as much as we did. That’s our show, we’ll talk to you next time.

Nick, has anyone ever told you that you look like Hugh Jackman, with the variable green…

Thank you… No… [laughter] [unintelligible 00:46:43.23]

It’s definitely a compliment…

[laughs]

No one’s told you that?!

No… [laughs]

Oh, my god… People suck, because they’re thinking it, they just haven’t given you that compliment…

You’ve just made my day…

Yeah… [laughter]

Thank you.

You’re welcome. Divya, do you see the resemblance?

I didn’t see it. I think it didn’t occur to me. And then – yeah, I can see it.

You’re kind of like a more handsome Hugh Jackman, you know?

Yeah, for sure. More handsome, smart…

Like if he was more handsome, and–

A Hugh Jackman who could program.

Right.

Yeah.

Maybe that should be a future show… Like “Which celebrities do you wish could program?” [laughter]

“Which celebrities do you wish could program?” That’s a good segment right there.

A good segment, right?! [laughter]