You don’t have to dress up

Alright, hello party people, and welcome to another episode of JS Party, where we are every week throwing a party about JavaScript and the web. I am your host this week, Kball, and I am joined by two of our amazing regular panelists, one who is a new panelist; I’m super-excited, I’ve loved all of her episodes so far, but I haven’t been on one with her, so welcome and thank you for joining me, Emma Wedekind!

Did I butcher your last name, by the way? I’m sorry…

Wedekind, okay. I will endeavor to do better. And then our other panelist today, Chris Hiller a.k.a. b0neskull. Chris, how’s it going?

Hi! It’s just me…

Just you.

Yeah, it’s just me…

Just you… Okay… So today we are going to do a set of our fun, recurring segments, starting off with a segment that got a lot of interest the last time we did it, our fun ELI5 (Explain it Like I’m Five) segment. Now, we can take ELI5 and just explain it simply, or even more fun, you could actually try to do it for a PAW Patrol. I think the last time around we did this, I used the PAW Patrol, which is a thing my five-year-old (now six-year-old) is really into… So you can use actual stuff from kids if you want to, but you can also just make it super-simple.

I wanna start off with my question, since then somebody else will talk… My question is Explain It Like I’m Five Node streams. I’ve done UNIX streams for a long time, but somehow when I’ve tried to tinker around with it in Node, it’s always been confusing.

Do you mean piping stuff in Bash?

Yeah. That feels normal, I know how that works. Streams in Node? I feel like I should know how that works.

Yeah. I feel like it’s a little different, but I don’t really know the guts of how piping works in a shell… So I’m gonna take a crack at this. I must apologize - I have explained many things to a five-year-old, and I don’t think I’m actually any good at it, so please stop me if I say something that is in reference to something that you [unintelligible 00:03:31.10]

Node streams - so you can think of a stream kind of like a collection of data, sort of. You can think of it like an array, except not every item in the array is available at once. Maybe a better way to think of it is if you’re familiar with an async iterator. It’s this collection of data, the data is not available at once; typically when you interact with a stream, you consume each item from that stream individually. It also means then that because they’re not all available, not the entire dataset that’s in that stream is in memory at once, and this is great if you are working with very large datasets especially… But the use cases for streams are limited to very large datasets, but they’re very useful for them.

[04:26] An example I remember - this is kind of trivial - in Python, if you’re familiar with Python, there is a built-in function range(). What that does is it essentially gives you a list of however many numbers, or what have you. So you say “range(10)”, you get a list with 0 to 9, or something like that.

And there’s another function called xrange(), and it’s different – it essentially doesn’t hold the whole array in memory. So you can say xrange(50 billion zillion), and Python will just go ahead and go through, but if you said range(), well, then we’re gonna fill up memory with this huge, huge array.

So in JavaScript if an array is working with a range operator, streams are more like xrange(). Does that make sense so far?

Yeah, I think so. Basically, an array that is paged into memory a piece at a time.

Yeah, essentially. Another feature of streams - and this is where this idea of piping comes in. Streams are composable. There are two basic types of streams. One of those is a readable stream, and the other one is a writeable stream. A readable stream you can think of as a source, and a writeable stream you can also think of as a sync. These are interfaces, essentially.

An example of a readable stream might be a STDIN. If you’re in Node and you want to read some information from STDIN - readline, or whatever, and it’s a readable stream, then you can pipe it to some output. So readable streams have a method “pipe”. You’ll frequently see this.

Maybe another good example is there’s a function in the Fs module, and that’s “createReadStream”. So instead of calling, say, “fs readfile” - and what that’s gonna do is it’s gonna read the file and load its contents in the memory - you might wanna call “fs.createDreadStream” instead, so this will give you a stream, and it won’t load the whole file into memory, and let you process it piece by piece.

So readable streams, again, you can pipe them to some output. A writeable stream you cannot pipe. A writeable stream goes somewhere. A typical writeable stream is like process.STDOUT, or process.STDERR. So you can read a file with, say, “fs create readstream”, and maybe it’s a text file, or something. And because it’s readable, you can pipe it to the write stream created by “fs create write stream.” With “fs create write stream” you give a filename, and so basically you’re reading the file and then writing it out into another file. You do that piece by piece. You can read the file, or you could pipe it to STDOUT, and it’ll just dump the file contents to STDOUT.

So there’s readable and writeable… Does that make sense? You can pipe a readable stream, you cannot pipe a writeable stream. A writeable stream goes somewhere else.

What makes them composable is that some streams can implement both interfaces. These are typically transform streams or duplex streams. There’s a bit of a difference. The transform stream (I find myself working with quite often) is where you take some sort of readable stream, and then you pipe it through this kind of middle man, and then that finally pipes out to the writeable stream.

An example of that might be reading with “fs create read stream” and then piping it to Zlib. Zlib will let you zip up a file, or create a gzip, or whatever archive… And then you could pipe the result out from that to a writeable stream and write the file out. So you can read a file, then zip it up and write it out without loading the whole file into memory, which is really cool. That’s a transform stream.

A duplex stream I never really have tried to implement… It’s essentially a stream that will go both ways; it works as a readable or writeable, but I don’t know… It doesn’t entirely make sense to me. Don’t worry about it.

[08:26] [laughs]

So yeah… The entire dataset is not in memory. A good example is something that I’ve written in the past where I needed to download some huge thing from some website, in maybe a big json file or text file, and process it, and then write it out to a file. Instead of going and fetching the file, I used HTTP request. That will give you a readable stream, and then I could pipe that stream into maybe a transform stream that I implemented, process the data somehow, and then I can pipe that back out to whatever I need to write to.

That’s the idea of streams. Streams are all over Node. Many different modules have some sort of stream available in them. You can work in Node and never really touch streams, but they’re really good for this kind of idea of processing large datasets and composing things.

Cool. It seems like a topic we could go a whole segment on. Awesome. Thanks, Chris. Do you wanna ask your question next, and then maybe Emma can tackle that?

My question would be – I’ve been trying to get my head around CSS Flexbox. Can somebody please explain CSS Flexbox to me?

[12:00] I was running into problems because all I had was Flexbox, and I was trying to make a table… So I was like “Is this the right tool for what I’m trying to do?” And I think that sounds like the answer is no.

One of the distinctions that I’ve heard that I really liked was that Flexbox, from the word “flex” - it’s about distributing things in space in a way that you want them to be controlled by what’s in the content, or what’s in the elements itself, let the elements sort of figure out together how to distribute themselves… Whereas Grid is much more command and control; so if you’re trying to say “I want these things to be in columns”, or “I want these things to take exactly this space”, Grid is much more intended for that. And you can kind of, as you say, shoehorn Flexbox into more exact things, but that’s not what it’s intended for really, and that’s not what it’s best at.

This has been very informative, even just this little bit. Thank you.

Awesome. We’ll include a link to that in the show notes. Great! Emma, do you wanna ask your question and I’ll try to answer it real quick in the time we have left for this segment?

Or concept to explain, or…

Alright, specificity… And I’m gonna try to explain it like you’re five, so I’m gonna go back to metaphors. My kids are no longer into PAW Patrol; the latest and greatest thing is Ninjago. Ninjago is a combination word for Ninja Legos. They are these ninja characters made up of legos, and they all have different abilities, but they’re kind of all over the place. The story writing is thin. Sometimes one character is doing better, sometimes the other, and often times whichever one arrives last is gonna hit it. So if we start coming back to CSS specificity, thinking about it as Ninjago and how Ninjago is going to tackle problems.

CSS specificity, before we go into the metaphor, is essentially a set of algorithms or rules for how styles choose to get applied, and there’s two core elements of this. There’s how strong is the thing that we’re applying, and there’s what order is it that we apply it in.

In the Ninjago world I might hit something with a punch. That’s kind of weak. I might also hit it with a punch and with a weapon. Okay, that’s a little bit stronger; it’s more likely to hit. In CSS that might an element selector is the weakest specificity; that might be my punch. I wanna go a little bit stronger and I’m gonna select based on a class; that’s a weapon. So if I’ve got two different things, the one with the weapon is gonna take precedence over the one with just the punch. If I put a punch and a weapon together - that’s gonna be both of them.

There’s this whole range of different pieces… In specificity you have an element, you have a class selector, you have ID selectors, various things. Each one of those is a little bit stronger, meaning if you just have two of them head-to-head, the stronger one is going to take precedence. And if you combine them, it has the combined strength of the two. And you can add multiple weapons, a.k.a. multiple classes, or multiple IDEs. The more you select, the stronger it is.

[15:53] The second piece of this is the fact that it’s not necessarily that well though ahead. The last one to hit wins. So if I punch it and ninjutsu characters are – they’ve got these ninjas; they have Jay, and Cole, and they are all stupid, and they all have their own neuroses, and they’re all trying to hit things… Whichever one hits last, if they’re hitting the same amount of difficulty, that’s the one that’s gonna take precedent. So the stronger the hit, the stronger whatever it is, it will take precedence; but if you have two things that are the same strength, whatever hits last, which in CSS is literally the order you write the code when it is landing in the file - whichever one hits last, will apply.

And the final Spinjago reference is when all is lost, and they just have to blow something up, they go to what they call Spinjitzu, which is basically they turn into whirlwinds and spin around. And that is the important flag. If you have some property that just has to happen, no matter what, you can throw everything in the air, throw your specificity rules out of the way, write “important” and that’s Spinjitzu; it just wins. It’s not very advisable, either in Ninjago or in CSS, but that’s your breakthrough.

Okay, and with that, let us close this segment. We’re gonna take a short break, and we will be back shortly, talking about stories of the week in the JavaScript and front-end space.

Alright, welcome back JS Party people! Let us roll into a segment that we call Story of the Week. Each panelist is going to bring a story that they found particularly interesting or salient this week, and maybe talk a little bit about what it is, why it was interesting, and any impact it has on the ecosystem. Let’s go reverse order from what we did last time, so let’s start out with Emma.

Yeah, I have seen that article as well, and what I loved about it was this emphasis around ARIA being a tool, rather than the solution. You need to be thinking about this holistically. I saw another related article somewhere that was just highlighting how much we basically get in our own way when it comes to accessibility, because we just keep trying to reinvent the wheel, where the browser will do most of this for us, if we let it.

Awesome. Alright, Chris, what’s your story of the week?

My story is an announcement of a library. That library is called Pastel. Pastel is a framework which wraps essentially yargs, which is an argument parser, and it helps you build command line apps, essentially. So it wraps yargs, and it wraps something called Ink. If you haven’t heard of Ink - that basically allows you to create React components, and the renderer is your terminal, it’s not a browser or a mobile device, or Windows 10, or whatever. So Ink is essentially React in the terminal.

Pastel looks like a pretty cool idea. Ink is just kind of this React layer, it’s just this adaptor, but Pastel ties this together with yargs in a way that you can write components in React, and these components can essentially look like subcommands. So if you’re familiar with Git, you would say something like “git commit”, where if you were going to implement that using Pastel, the commit command would be its own component.

I think this is really interesting. There may be a bit of novelty to using React on the command line; there are certain applications where it makes a lot of sense actually, but what’s really interesting, I think, is that you could package up a command and distribute that as a standalone module, because it’s just a component, it’s self-contained… So you could essentially pull a bunch of components down from npm, and then smash them together into your own CLI. You could reuse commands from other developers. That looks really interesting.

You can’t actually do that yet. I think there are some barriers to making that happen, but I think the potential to be able to compose CLI apps in this way is there, and I think that’s really cool. I’ll be keeping a close eye on Pastel.

That is really interesting. I was having trouble imagining why in the world I would wanna use React to do stuff in my CLI, but the composition aspect is kind of interesting. It forces this model that we know works well for how to compose independent pieces, and have [unintelligible 00:23:49.17] and that sort of thing.

It works well for stuff, especially like if you were gonna implement Top, or something, which takes up your screen, and then it updates every couple seconds, or whatever. I think that would be a really great use case.

Right, that makes sense.

[24:08] There’s some others, too. It helps with formatting… But I brought this up earlier - it offers a Flexbox model, so I was trying to make it render a table, and it was not having it, so I have to look into that.

That is interesting. Yeah, CLI, but potentially actually using your entire terminal. More like readline style apps than what I might traditionally think of as a CLI, just interacting with one thing at a time. Huh. Cool.

Okay, so my article that I wanna bring forward was an announcement by Microsoft. We had an episode at the end of last year, I believe, where we were talking about some of the challenges in the reduced diversification of the browser ecosystem, and Microsoft going to use a Chromium-based Edge is something that is very much on our radar… But they’ve made a really interesting announcement just recently, that they are actually going to build Internet Explorer into that Chromium Edge… And here’s why. There are lots of businesses out there that have these old, decrepit internal web apps that they use to run their business, and have for years and years, that were developed 10-15 years ago, nobody knows how to modify them, and they only work on Internet Explorer… And that has been one of the reasons why businesses have continued to force employees to use Internet Explorer in businesses outside the tech industry, and why it has refused to die.

Microsoft is saying, “Okay, we’re gonna give you a browser that for those applications will behave like Internet Explorer, so you can use it… And for everything else it’s actually a modern browser.” To me, I was like “That’s brilliant.” It’s using technology to solve a very non-technology, very human and stodgy business problem, but it will be a huge step forward in getting some of the last remaining, lingering people using really old, broken browsers out of that world.

Does that mean we don’t need to test in IE anymore?

It might…!

Yeah. So we’ll see… Microsoft has been trying to kill IE for years now. Basically, ever since Edge came along, they’ve been trying to kill off an end-of-life IE and then failing. It just keeps lingering and lingering and lingering. And this to me seems to address one of the real use cases why that was happening.

I think it’s pretty much exclusively old internal business applications. This is the same type of thing like “Why are there still jobs for COBOL developers?” Some old, decrepit thing that was built years ago, and maybe one person knows how to maintain it (if that), and there’s a striking amount of software like that.

It might have to do with stuff like ActiveX and proprietary APIs, too…

Alright, so that I think wraps up our story of the week segment. Let’s take another short break and then we will come back with some pro tips.

Okay, welcome back! The last segment of today’s JS Party - we are going to share some pro tips, talking about how you can make your life better, whether it’s how you do your development, debugging, just general life tips… Anything along that dimension. I know we’ve expanded the gamut before, and we probably will again today. Let’s start off with Chris. Chris, what are your pro tips to share with our audience?

I’ve worked remotely for the better part of the decade, so I have some pro tips around working from home. Some of these are probably obvious, but… You’ll need a home office. You need somewhere where you can shut the door and just essentially separate yourself from the rest of your family. You need this home office. You don’t always have to work in the home office, but it needs to be available.

One thing I’ve found - and this is a recent upgrade for me - is an adjustable desk. I can sit or stand… That’s great.

Yes… Yes.

I love it. And another thing that keeps the work-life balance for me is having a computer for work and having a computer for not work. I’m on my work computer during the day; at the end of the day I shut the work computer, and if I want to do something else, I play video games, I do something, I will get my other computer… But that work computer doesn’t get opened up until the next day.

Yeah, I will do that – I have been doing most of my coding, if I’m coding in the evenings, which is not that often anymore, I’ll probably just use my work computer, because again, I don’t have everything set up on my other one… But mostly I’m just playing games on that other machine.

Another thing - invest in a decent microphone and some headphones. If your computer doesn’t have a webcam, get a good webcam, because you’re gonna be video-conferencing, or on Skype etc. a lot. So make sure people can hear you, make sure your stuff works every time. You don’t wanna be screwing around, trying to get your audio set up right… It would be really helpful to make sure that you plug in instead of Wi-Fi, because that helps with video-conferencing, and such.

You don’t have to dress up, but you should…

Get dressed… [laughs]

…be presentable. Yeah, you should get dressed.

I wear comfortable clothes around the house. I go through slippers – they’re essentially disposable. [laughter] I just wear the hell out of slippers, because I just wanna be comfortable around my house, and when I’m working. I wanna be comfortable, not have to fuss with my clothes. Just wear comfortable clothes, be presentable, do things like shave and take a shower… This is stuff that I’ve forgotten to do in the past, and it’s something I have to remind myself, “Oh, I should probably shave, so I don’t look like a bum.” Video-conference when you can. It helps you take care of yourself, essentially…

Yeah… I mean, I’ve been there. It’s something you have to work at, for sure. And then another thing is if you have issues with sleep, or don’t get enough sleep, you will find working from home – your bed is very nearby, and it can be tempting to use your bed for sleeping, during the day. I’ve found that if I make the bed, I am less likely to go try to lay in it. Make your bed. That’s my tip.

[32:09] Honestly, I don’t leave the house that often, but it’s more to do with my personality, that I’m kind of a recluse. I do go outside, and that sort of thing, especially after the workday is over, and on the weekends… But during the workday I’m pretty much always at home. I don’t like to go and work from a coffee shop, because I find that it really affects my productivity. I like to be in my comfortable space and just totally zone out. That’s how it works for me.

I don’t think I could do the digital nomad thing. I need my comfort and my familiar space and my control over my environment.

I also work from home all the time, and on exactly that getting out thing - there’s a habit that I’ve adopted that I now advocate to everyone… And it wasn’t my intended pro tip, but it is an amazing tip… I try to once a day go for a walk outside, and during that period - living in a place with beautiful weather, or the place - I find something to be grateful for, and reflect on that as I walk. I’ll walk outside, I’ll be like “Oh my gosh, I’m so lucky to live in such a beautiful place, with beautiful weather”, or whatever it is.

The thing with this is actually there’s science behind this, which says it activates two things that make you feel better. One is just moving your body; being more active will make your body feel better. There’s just the physical reaction. And two is it’s shown that gratitude and practicing gratitude will make you feel happier, and it’s one of the things – if people are struggling, keeping a gratitude journal and various other things…

And working from home, it’s like – I get outside the house. I’ll usually go walk somewhere for lunch. Or if I eat lunch in, I’ll take a walk after lunch. But go for a walk, find something on that walk that I feel grateful for, and reflect on it. When I started this practice, it totally shifted my emotional well-being along a number of dimensions, plus working from home, it got me out of the house.

It could be. I have a lot of those hacks. I’m gonna tell about one in a little bit, but I wanna hear your pro tip first.

[36:11] Yeah, speaking is a great hack.

Can you talk more about breathing? I have that problem, too.

That’s awesome. Speaking is a great hack for introverts, because you got to a conference and you wanna meet people, but if you’re like me, you’re kind of shy. You wouldn’t think that I’d be shy with the speaking that I do, but I am; and a lot of folks are. But if you’re a speaker, people wanna talk to you, so you don’t have to put yourself out there any more than just getting on stage, which as scary as it is, I find less intimidating than going up to people I have no idea who they are, or that I am excited to know but I don’t know, and being like “Hi…!” But if you’re a speaker, then they’ll come and talk to you.

It’s easy to connect with other speakers, because you’re a speaker and they’re a speaker, and you’re gonna have the speakers’ lounge, and you can just tweet at them beforehand and say “Hey, I see you’re speaking. I love your stuff! I’m gonna be there, too!” It’s great.

Awesome. Alright, I think I’m the last one with a pro tip, and I sort of teased this because I said I have a lot of brain hacks; this is also kind of a brain hack, and it comes from a personal growth guru that I follow, because I’m into that kind of stuff… Both woo-woo and not woo-woo; I actually prefer the not woo-woo that’s backed by science, but take from it what you will.

Anyway, so there’s this guy named Brendon Burchard, and he has this thing that he says - he says “If you think about a power plant, a power plant doesn’t have energy, it generates energy. You take that and think about it for your own life.” One of the biggest things for me in terms of my productivity, in terms of what am I getting done, in terms of being able to get out and interact with people and do things is like “Where’s my energy?” And when I heard this and started thinking about it, it completely shifted my mindset about this. I should not expect my environment to give me energy, or other people to give me energy, or the project even necessarily to give me energy. I need to think about how do I internally generate energy, and bring it to whatever scenario I’m gonna be in. This can apply to more than energy.

I now have this self-mantra of the things that I want to bring into everything that I do. For me, those things are curiosity, joy and love. When I show up in my best self, it’s because I brought those things to the table, and this concept shift of whatever it is that is your best self - and that’s hard to figure out sometimes; it’s very personal - focusing on the ways that you can generate that and bring it to the table, rather than expecting other people in your environment and whatever else to bring it to you. That has been revolutionary for me, so I wanted to share that as an idea.

Yeah, 100%. And this is not to say stuff doesn’t happen; bad stuff happens, and if you’ve had bad stuff happen to you, that can be really rough. I’m not trying to say that you can or should be able to generate these things in yourself all the time, however what I’m saying is for me the mind shift of going from “This is stuff that happens to me, somehow I was in really good energy today and somehow I was not” to “This is something that I at least have partial control over, and can work on myself and iterate and figure out what are the things that I do that help me generate energy and joy and curiosity and all those things.” That was very empowering. So yeah, stuff does still happen to you…

Alright. So that wraps up our pro tips, and this wraps up another episode of JS Party. Thank you all for joining, thank you for listening. Listen live every Thursday… I guess they tell you that in the after-show, but I’m gonna say it, too. Listen live Thursday, because it’s so much more fun when y’all are hanging out with us and chatting in the Slack room, and everything like that.

Thank you Emma and Chris, and we will see you next week.