Today on the show we welcome Ian McNally. Ian is a Software engineer specializing in the web. He currently works at Schoology as a UI architect, where he is helping shape and deliver their design system. Ian also actively writes on his blog, Ianmcnally.me, and contribute to open source projects like Create React App, Webpack, Storybook, and other personal projects. Ian thrives in building collaborative working environments, with each team member empowered and working at their best. In this episode we will be talking about CSS and JavaScript, the front end library that nearly everyone uses in today’s day and age. Stay tuned as we dive into some CSS frameworks, debate it out, and discuss the limitations without CSS modules. All this and more inside today’s episode.
Key Points From This Episode:
Transcript for Episode 34. Styles (CSS + JS)
[0:00:01.9] MN: Hello and welcome to The Rabbit Hole, the definitive developer’s podcast in fantabulous Chelsey Manhattan. I’m your host, Michael Nunez. Our co-host today.
[0:00:09.5] DA: Dave Anderson.
[0:00:10.1] MN: Our regular guest.
[0:00:12.0] EG: Emmanuel Genard.
[0:00:12.6] MN: Today we’ll be talking about CSS and JavaScript, a front end library that nearly everyone uses right now at today’s day and age. So we’ll just dive into some frameworks of that sort.
Before we continue, I’d like to introduce a guest of this show, Ian McNally who is the UI architect for Schoology. What’s going on Ian?
[0:00:32.5] IM: Hey everyone.
[0:00:33.8] MN: How’s it going?
[0:00:34.4] DA: Howdy.
[0:00:34.7] IM: Good.
[0:00:35.4] EG: Welcome.
[0:00:36.0] IM: Did I sound like a Muppet when I said, “Hey”? “Hello everybody.”
[0:00:40.9] MN: We’re jumping in right on to CSS JavaScript.
[0:00:44.2] EG: That’s the perfect transition right there.
[0:00:46.3] MN: There you go, Muppets teaching us JavaScript today which I didn’t learn JavaScript.
[0:00:50.8] DA: Today is brought to you by the letter C.
[0:00:54.7] IM: C for cascade.
[0:00:57.0] MN: There you go. Well, jumping right into it. Obviously, me, personally, I’m not a big fan of CSS. Anytime that I have to make any edits to CSS, I find it very painful. Does anyone share that similar experience when they deal with CSS in the workplace?
[0:01:13.4] DA: I mean CSS, I love the act of like actually creating something visual that people can see. But I feel like a lot of times with full stack developers like you kind of – you have a preferred area of the code base. You know, a lot of people who are like full stack they tend to like front end. Some people like back end. I like the databases.
[0:01:32.0] IM: You like the DB’s?
[0:01:33.3] DA: DB.
[0:01:34.9] EG: I really feel that CSS is misunderstood.
[0:01:36.5] IM: It is, yeah, thank you Emmanuel. The voice of the people.
[0:01:41.6] EG: I do because I mean, it’s really, it’s a different mental model than programming and thus it takes kind of a different picture in your mind than making an object and imagining the methods being called on it and state and data. It’s really kind of like a waterfall.
[0:02:03.0] DA: Yeah, paint me a picture.
[0:02:04.9] EG: That’s the image I have with CSS, it’s a waterfall or a sea.
[0:02:09.4] DA: It’s a waterfall just made of boxes?
[0:02:11.4] EG: Waterfall of boxes.
[0:02:14.8] IM: That would be a good album name. Yeah, I mean, that’s a great point, Emmanuel. I do feel like you go from programming and thinking about things and you know, calling functions and structures and stuff in CSS definitely a leap, you know? Styling, you know, it’s definitely different leap jumping from you know, programming language to CSS because the way CSS rules interact with one another and how – the order of operations of what gets loaded when and stuff and that all affects the display and how something looks and how it behaves.
[0:02:48.4] DA: Right, how everything is global.
[0:02:50.2] IM: Yeah. I think a lot of debugging and figuring out like, you know, why is it looking the way it is, it’s through a lot of accumulated knowledge which you can express in the same way you might express something through object-oriented programming or whatever.
[0:03:05.9] DA: Yeah, that’s interesting with CSS though. It’s always evolving. I guess anything on the front end like JavaScript is constantly changing. By the time this comes out, there will be something else that’s a really sweet that everyone’s going to be really into but –
[0:03:20.6] MN: Some weird acronym that gets used and thrown, and everyone has to know it and know how to use it.
[0:03:25.7] DA: BEM and SMACSS and Sass, there’s a whole of that.
[0:03:28.4] EG: SOG.
[0:03:29.4] DA: Yeah.
[0:03:30.5] MN: I do like BEM though, I think BEM organizes CSS very well in my opinion, I don’t know how anyone feels about BEM or SMACSS to do anyone file on convention at the workplace or?
[0:03:41.7] EG: At the client I’m at, we use an in-house CSS framework and they try to follow BEM and recently, we had one of our Striders make a presentation at this thing we have where we teach everyone something we’ve learned about how to actually use BEM on a project because people were just putting CSS classes or whatever, right?
[0:04:02.0] DA: Man, important!
[0:04:02.9] EG: Yes.
[0:04:04.2] MN: Important everywhere!
[0:04:05.8] EG: Then there was like a couple of stories where a couple of Devs just spent like two or three days just renaming CSS class to fit the BEM format.
[0:04:14.9] DA: That’s horrible.
[0:04:17.3] EG: All across all the front end.
[0:04:18.7] IM: Bless their hearts.
[0:04:20.7] MN: Yeah, just sent them into the desert.
[0:04:24.7] IM: Maybe Emmanuel, like what BEM solves right? You know, we talk about like waterfall.
[0:04:27.7] EG: We should probably define BEM.
[0:04:29.9] DA: Wat is BEM?
[0:04:32.4] IM: What is BEM?
[0:04:34.2] MN: BEM I believe stands for block element modifier where…
[0:04:37.7] IM: Nailed it.
[0:04:38.7] MN: There you go. Boom! That’s why they pay me the big bucks. BEM has to do with styling in the sense that you cover the entire block of your component — I’m going to use the word component — and then when you want to go on to more detail, you have different syntax to show the element CSS changes and then another different form of syntax to show the modifier.
If you have like a header for example to use and then there’s a button. The button will be an element in the header block and then a modifier when it’s disabled will be the modifier flag for that particular system.
[0:05:14.8] EG: That would be like .header-button__disabled, right?
[0:05:19.7] MN: Yeah, more or less. I mean, at the syntax I’ve seen is one _ from the block, one _ to the element and then two dashes for the modifier. There’s many different ways to do it but the syntax has to be in house.
[0:05:31.1] IM: I think there is a BEM prescribed one but I think, really what BEM is and SMACSS and is just a level of semantics like a way of writing a CSS selector that will help you theoretically write more maintainable CSS by effectively componentizing styles under a block.
[0:05:49.2] DA: Yeah, allowing you to not only add styles but also to remove them if you need to and not feel like you’re cutting wires on a bomb.
[0:06:01.2] IM: Yeah, right? There is a couple of articles I think that came out this year. One was called like a Unified Styling for CSS, I don’t know? I’m butchering the title of that by this guy named Mark Dalgleish and also Chris Coyier CSS tricks wrote about scaling CSS, links in the show notes.
[0:06:23.3] MN: Show notes, now we got to put them on the show notes.
[0:06:27.2] IM: And third shout out, Adam Morris wrote about scaling CSS last year. He did like a lot of research and kind of like a survey of just going to websites and seeing how they wrote their CSS and you know, what was like the duplication and, you know, did CSS code bases grow and how are they maintained and was there any order to it? What Chris Coyier’s and Adam Morris’s article especially talked about is basically most CSS code bases only ever grow, like over time.
There hasn’t been a technical solution or a semantic solution to improve it, or not improve it but to decrease the rate of growth, the cons and growth without a lot of dropping because like Dave have said, people are terrified of removing styles, which is probably a cocktail of misinformation, some poor previous CSS writers and like you know, just the nature of CSS because the cascade is actually really powerful if you use it to its affect.
[0:07:29.9] DA: It’s pretty easy to have a global style somewhere and not really be fully aware of what all it’s impacting.
[0:07:36.2] IM: Yeah, exactly. The point of these articles is like, all right, if every technique or technology is scaling up over time, what actually works? The sort of conclusion was atomic CSS, there is no one technology but the idea of sort of single rule, single use classes that can be repeated sort of infinitely.
Adam Morris has a pretty vested interest because he wrote Tachyons. which Emmanuel and I have geeked out over a lot of times.
[0:08:03.7] DA: I guess like – so single use CSS is different than like componentizing your CSS.
[0:08:10.1] IM: Yeah, it’s sort of the exact opposite, right? If each class — Hello person outside the door.
[0:08:18.8] MN: Watching us record.
[0:08:20.0] IM: Yeah. In atomic CSS, each class maps to one rule essentially and any style is built up of a bunch of class names. If you do that, you can – actually, why would that help scale?
[0:08:36.9] EG: Well, the argument I read he made that is that you then don’t have duplicate CSS in your thing so the tradeoff is that your class — in your html, your class equal is going to be super long sometimes. Maybe most of the time.
But, every CSS class does exactly one thing and one thing only. Like, you want a margin bottom of like one EM, you put margin dash, dash, bottom one EM and that’s all it does, right?
[0:09:10.2] DA: If you have 10 different elements of style that are being applied to this thing then you would have 10 different classes that you’re writing out?
[0:09:19.1] EG: Yeah. What that does is keep your CSS file very small, right? Then it doesn’t grow without – everyone knows what each thing does.
[0:09:29.3] DA: Yeah, that’s interesting. Recently, I’ve been looking more at styles in JavaScript and all of the various libraries that are out there to do that, there’s a whole bunch like styled components and JS but the one that we’ve been working with most recently is Fela and it does something pretty similar to what you’re describing where it manages your styles for you and basically makes a style like A where the class name is A and it is font size 16. Or maybe a different style where the line height is 1.25 and that’s your B style and will keep on going through that. Your classnames get crazy because they’re really big but you know, theoretically it produces a size of the page and you don’t need to manage it yourself.
[0:10:20.3] IM: Yeah, I feel like that’s a great intervention of technology to solve problems that computers are good at like generate a bunch of class names, build them together and I don’t really care what they look like. Just stick them on to the page.
[0:10:32.8] DA: Yeah, I feel bad for the QA engineers because they’re like, “We need a classname for those selenium script.” It’s like, “Sorry guys."
[0:10:40.5] IM: Yeah, last name is X2CB42A.
[0:10:43.9] EG: But the next run is going to be something else.
[0:10:48.0] IM: Just don’t get too attached with that hash.
[0:10:49.8] MN: How would you QA that? Would you have to like add an ID or would you just say, “Hey, stop automating, quit using selenium. Unit tests all the way.”
[0:11:02.1] DA: We want to do all those things.
[0:11:03.3] MN: Yeah, exactly, yeah, of course.
[0:11:04.7] DA: More unit tests is better but, you know, we do want to have some end to end feature tests. We’re still working through this but ID’s is one way to do it I’m sure but kind of annoying. Another way might be to use like a non-production environment and also kind of the library or like a helper that will give you a meaningful class name.
[0:11:25.7] IM: Interesting.
[0:11:27.0] DA: Yeah, styled components, we use that prior to this and that had a nice little Babel plugin that would set you up nicely with that classname, even though the classnames are typically gibberish because it’s managed by a computer.
[0:11:41.5] EG: Could you have any way of making whatever gets spit out by the library using deterministic at all? Or is it the black box?
[0:11:52.9] DA: At this moment to me, it’s a black box.
[0:11:55.4] EG: As far as I’m concerned, it’s black.
[0:11:57.6] MN: Black box of knowledge.
[0:11:59.9] DA: You know, maybe come back next week and I’ll have a teach and learn.
[0:12:03.6] MN: Good old teach and learn.
[0:12:06.1] IM: Yeah, for that, I’ve been using a CSS in JS solution but I’ve been using CSS modules so you write your CSS and you have web packs CSS loader handle that so it will – when you import the CSS in JavaScript, you get an object and the keys are like, the CSS classes are the keys and the value is you know, your big, long generated string.
You can actually give it a template for like what kind of selectors you want so in development, I’ll have like the nice pretty BEM looking ones, speaking of BEM. Then in development, I just give the poor product and QA testers and be five hashes. Which, you know, I mean, presumably it saves some space in the final bundle size and stuff. I know, I’ve heard some Twitter chat about like, killing the web because like, you’re making scraping really hard and I do sympathize with that but honestly, I haven’t done a lot of scraping.
[0:12:55.2] EG: Also, I mean, your job, I feel like is it valuable to the people who are using whatever you’re doing, right? Sometimes having a smaller CSS file size means it takes less bandwidth for them to download whatever you’re doing and then, so then, whether some scraper is trying to like scrape your website, that’s – you know, you figure that problem out. That’s not my problem, basically.
[0:13:21.0] DA: Yeah, I feel like that’s pretty solidly in “not my problem”. They’re stealing your data that put up in your website.
[0:13:30.4] IM: I consulted for a company who their clients built a scraper because their website was so slow.
[0:13:35.7] MN: Oh my gosh, the eternal client wanted a scraper?
[0:13:39.3] IM: No, like a company that use this software built a scraper because their website was so slow and not designed in the most user-friendly way that they built their own scraper.
[0:13:51.4] MN: Oh my gosh.
[0:13:52.2] IM: And the company knew about it and like, okay, whatever.
[0:13:54.6] MN: Whatever gets us the data, yeah. Whatever gets to the data faster?
[0:13:57.7] EG: My gosh.
[0:13:59.1] DA: That’s tough.
[0:14:00.3] MN: Write better CSS I guess? That’s the moral of that story. Or write better websites in general so they’re not slow so you’re not forced to scrape.
[0:14:08.0] IM: If someone’s scraping your website, I think like long and hard like, “Are we failing our users somewhere?”
[0:14:16.0] DA: Exactly. If you just asked.
[0:14:17.7] IM: Yeah.
[0:14:18.5] DA: Yeah, that’s cool. I guess like the way that really works is just j through the power of web pack and you get like all of the hot reloading goodness and that.
[0:14:29.0] IM: Yeah, you get like the flexibility of – for the project I’m working on actually, the styles are separate from the JavaScript component library. The styles package, we use learn, it’s big one model of three but we basically did the styles as a package and the components as a separate package.
The styles package has its own build setup and that’s just a static CSS file, using like a sort of BEM-like syntax. If we have third parties or external users of our style guide or design system actually, you can just use CSS if you want. Because that’s really like the heart of any design system I think is it’s CSS.
Then, the components package pulls it in through another web pack loader that’s customized to pull it in as JavaScript and you apply the CSS classes through like the objects. So you import display form styles and you – do your [classambiguousdisplay.grid].
Shout out to CSS grid.
[0:15:24.3] DA: Yes.
[0:15:27.1] IM: Yeah, its’ the future and the present, the coming revolution.
[0:15:30.4] MN: Making everyone’s lives better by doing CSS, I’m all for that.
[0:15:34.9] DA: Yeah, I’m all for that because it’s painful when I have to sit down and do CSS.
[0:15:38.7] EG: There is another thing that’s been – I’ve read about this and I should write, I’ve mentioned it for the show notes but this is like called Houdini.
[0:15:46.7] MN: What is the Houdini?
[0:15:47.8] EG: Which is going to be a way to programmatically, like extend CSS from what I understand it.
[0:15:55.4] MN: That sounds like magic.
[0:15:57.2] EG: Yeah, hence the, name Houdini.
[0:15:59.2] MN: Yeah, Houdini.
[0:16:00.6] IM: Yeah the thinking behind there right? It is similar to how in JavaScript we have Polyfills and feature flags and all these stuff where you can try out upcoming features or features that are now all in browsers. We don’t really have that for CSS but there is a CSS engine deep below in the recesses of your browser and every browser and I think the Houdini Project is an effort to sort of expose that and allow essentially Polyfills to be built for it.
[0:16:24.8] MN: CSS Polyfills you mean?
[0:16:26.0] EG: Yeah, CSS Poly something and also in a way to make up for let’s say you just want to have one CSS file, you don’t have to have any special CSS file for IE or make special rule to deal with Safari. These are the ones that count to me because that stuff that we are dealing with at a time right now.
[0:16:47.9] MN: Is IDA your problem?
[0:16:49.0] DA: That is a similar thing that like in an all solution like Sass gives you, right? It does the Polyfills or is this somehow different in a new and special way?
[0:17:00.1] EG: Man, I should have read more in Houdini but what I think works is that –
[0:17:03.2] DA: We gave a pause moment.
[0:17:04.3] EG: Yeah, how I think it works is that you are able to tell the browser how to interpret the style, right? And so you write the styles you want. You can even make up new CSS rules essentially and say, “Browser when you see this in a CSS file, display it this way,” without necessarily like — even the Polyfills were just these work around that dependent on special like you have to put —web kit, —whatever in front of something or –
[0:17:33.1] DA: Right, you end up with a lot of extra craft in the file.
[0:17:34.5] EG: Yeah or —MS dev or MS in front of something. In here you’d say, you just write your CSS and you will then say, “Hey if you don’t understand this, this is how you should write this, you should display this.”
[0:17:46.1] DA: Okay but then that may not be supported by your IE size.
[0:17:51.7] MN: I8, IE8.
[0:17:54.3] EG: Did you have? Just get in the booth.
[0:17:56.6] MN: IE8.
[0:17:57.7] IM: Yeah, one should know.
[0:17:59.0] MN: I just hate my pain towards like anytime the client has ever asked me, any previous client has ever asked me to write stuff in IE8 it’s just like, “Ooh.”
[0:18:10.8] DA: It’s vintage, it never got any better.
[0:18:13.5] MN: No, no, no I don’t want IE8 at all. I don’t want to deal with that.
[0:18:18.9] IM: Life’s been good with the Evergreen browsers. Oh man in the last couple of places I worked they’re just like, “Whatever is the latest.” I’m like, “Okay cool” and I think like Emmanuel you’re talking about prefixes, browser prefixes and stuff, I think CSS grade is like such an awesome case study and how it’s developed in the community but not so released before it was really flushed out and once it was flushed out it was like, “Oh psych.” You know grid is instantly in 70% of the browsers in two weeks whereas like Flexbox was built and churned over three years and then before that, you MS this, WebKit that. Opera, whatever Opera’s thing is, shout out to the one Opera user in the world.
[0:19:02.1] EG: That is me.
[0:19:03.2] MN: That damn guy.
[0:19:05.5] EG: Yeah I remember when Flexbox was only available on like Chrome and I’ve put WebKit Flexbox stuff and I’d be playing around it. This is cool, you could do this columns and all of this, yeah amazing.
[0:19:17.6] MN: This is amazing, this is so cool. But yes the Evergreen browsers are amazing and they make our jobs easier as we have to write CSS. To the client out there, please stop asking us to write an IE8. It’s painful, no one uses IE8, please stop and if you are –
[0:19:33.7] EG: My mom still uses IE8.
[0:19:34.2] MN: If you’re listening get her off AOL.
[0:19:36.6] IM: Buy her a new computer.
[0:19:37.0] MN: Get her off AOL.
[0:19:40.1] DA: Get her a new computer, have her use the latest Windows, Windows 10 I think is the one. I’m not even sure now.
[0:19:45.6] EG: I have a question, does anyone have any strong feelings about — I know, I remember when CSS and JS was first introduced, there were all these like think pieces on Medium about how this is sitting back though like the web backwards? We built CSS to have this separation of concerns between style and content and people were all twisted up about using CSS and JS. Anyone have any thoughts on that or?
[0:20:14.3] DA: At least there were a lot of other articles too that we’re like, “Yes, we’re finally destroying CSS and moving on, whatever comes next.
[0:20:20.1] MN: The end of global CSS, yeah.
[0:20:22.7] IM: Well I think with any new way of doing things there is always cognitive dissonance for a while. I remember it was early 2014 I was just getting asked to check out React and I was like, “htlm my JavaScript? I just spent my whole career avoiding it and then here we are” and I was like, “This is stupid.” But to their credit, the Facebook team on their docks were like, “This is going to seem weird but give it five minutes,” and after five minutes, I was still annoyed.
But then five minutes more, five minutes more, I was like, “Well there is a lot of power here.” So fast forward to now, most of the initially has gotten used to JSX and React in the component paradigm and so the new, the latest innovation I think has been CSS and JS and I think it come from a real place of wanting control. Since we’re talking about components and state, we want to be able to control the CSS in a programmatic way. So got to get that into JavaScript so I think CSS and JS was maybe a logical next step for frameworks that got used to putting HML in a lot of control inside a component or a review.
[0:21:30.5] EG: Yeah.
[0:21:30.9] DA: Yeah, I feel like it’s funny how plastic my opinions can be sometimes where it’s like you, JSX is like, “This is so offensive” and I spend some time coding CSS and JS using Fela. This is repulsive, this is the worst thing I’ve ever done and then by the end of an hour I’m like, “This is great. This is the best!”
[0:21:55.8] EG: You know I really feel that there are a lot of these best practices. I am going to drop something that is going to make some of our listeners upset but –
[0:22:05.1] MN: Let me get the air horn ready.
[0:22:07.6] EG: You don’t need semicolons in JavaScript most of the time.
[0:22:13.2] IM: Agreed. Turn that off, it’s prettier to pull them things out.
[0:22:16.1] EG: Yeah, you really don’t and I know it became like dogma in the JS community especially because of Douglas Crockford’s book. But the way –
[0:22:26.5] DA: He just wrote the book about semicolons basically?
[0:22:28.3] EG: Yeah.
[0:22:28.8] MN: Why you need them.
[0:22:29.8] EG: Why you need them, right. But no, I remember sitting next to a senior dev at Stride and I said to this person, “Hey you don’t actually need semicolons,” and he shot me a look because we were repairing.
[0:22:43.5] IM: Yeah like, “Who’s this guy?”
[0:22:45.7] MN: You need to semicolons.
[0:22:47.4] EG: The look was like, “How dare you say that?”
[0:22:51.8] IM: Like they instantly lost all trust in you as a human being at that moment?
[0:22:54.8] EG: I know and I was like, “All right I am not going to go ahead.”
[0:22:57.3] MN: I see this is a conversation for another day. I will not talk about tabs and spaces.
[0:23:04.1] DA: Oh that’s a whole lot comments in your object? Oh gosh.
[0:23:07.5] EG: What point was I trying to make? All right, the point I was trying to make is a lot of times these things came about to solve a problem and when people sort of forgot about the problem and remembered just the rule and they are just following the rule out of like because this person told them and this person told them and everyone tells them “this is the best practice”.
[0:23:24.4] IM: It’s your tribal knowledge being passed down, yeah.
[0:23:26.6] EG: And no one ever thought about it, “Hey why are we doing this?” and maybe we can solve this in rule in a different way like we want to separate CSS. We want to make it so that we can edit CSS easily, right? And so this is just a different way of adding CSS easily without having to worry about in line styles.
[0:23:44.8] MN: There you go.
[0:23:46.2] IM: I think that was probably the knee jerk reaction. I was like, “Ugh inline styles?” Because the first few CSS and JS solutions, if memory serves me, were essentially in lining styles.
[0:23:55.7] DA: Oh yeah, important styles right there.
[0:23:57.9] IM: Yeah, oh Aphrodite was doing automatic imports in after every rule I think for a while. I think that changed but, you know, I can see having a heart attack. Be like, “Import everything?” But I think there had been some great solutions that have come out. Dave was telling me about Fela before the podcast came up and I honestly haven’t heard of it and I consider myself someone with the ear to the ground and so Fela was new to me.
The styled components looks really great, glamorous, glamour, there is a bunch of them now. I feel like an old timer saying, “I prefer my CSS modules.” So that is not even that new. But I remember pitching CSS modules a couple of years ago and they’re like, “We don’t get this,” and now CSS modules are like the old thing. Just like yeah, here I am like, “Let’s write CSS and let’s import in JavaScript,” and people are like, “Oh we’ve been there bro. We’re installing Fela,” you know?
[0:24:54.5] DA: Right, they’re in their spaceship. So with CSS modules when you say that that is doing a similar thing as Fela? Like were you having CSS in the JavaScript because you are using web pack to inject it and import it and all of that?
[0:25:09.2] IM: Yeah, exactly. I think what I want — the need I saw fulfilled by CSS and JS, which was also filled by CSS modules was the ability to conditionally apply CSS in your React components or your JavaScript framework. You know I’ve seen in angular too and all that stuff and so that’s why I want it. But the other problems around CSS like performance around generating classes for different rules and stream them together automatically. Building one style sheet that you can ship off and cutting down on a lot of duplicates and composition and stuff that was solved by CSS modules for me.
So I don’t – the only thing that CSS modules doesn’t have that I can see people wanting though I haven’t quite found the need for it is to dynamically build a CSS rule. So say if I am building on a grid and I want a row and I want it to be row span 10 then if I am using CSS modules, I have to have a CSS class that’s grid span 10.
[0:26:13.0] EG: Grid span 10, yeah.
[0:26:13.4] IM: So my choices are essentially predefined which is not bad if you are using a design system or a pattern library where you can strain the amount of available choices in the world. But with abstractions comes limitations and say one day I want to span 20,000 rows. I know, we’re going to have big ass screens in the future.
[0:26:35.8] EG: All 4K.
[0:26:36.5] IM: Yeah, yeah all 4K.
[0:26:37.7] MN: 20 inch is the norm, 50 inch wide.
[0:26:40.2] IM: Yeah but then I couldn’t have my components say like, “Oh suddenly I want 20,000 and make a styled change.”
[0:26:47.0] DA: Algorithmically decide like how many shouldn’t be there.
[0:26:50.5] IM: Yeah, there’s probably a more practical use case than 20,000 span row but just imagine some sort of dynamic data rendering CSS like you don’t have that flexibility if you have to predefine your CSS but at the same time, there is a lot of optimizations you can do at build time to remove duplicates and all of that. So that’s why I am sticking to my CSS modules.
[0:27:10.6] DA: That’s awesome, I feel like that that’s a good thing. To limit the amount that you have to reason about and constrain it, which takes more discipline when you are doing JavaScript and CSS. So I guess maybe to wrap up, we can have a final question. Who’s going to win? Is it going to be JavaScript with styles or is it going to be just straight CSS?
[0:27:35.8] IM: Oh boy. Well to buy myself some time, I will say that I remember I started my career as a software developer in the early 2010. So I think my first job was in 2011 and I think around that time backbone was invoked and you know backbone was a response to the j-query stuff and j-query was a response to, “Oh crap we want dynamic data in html”. So then after backbone, I came on angular and I guess the industry too was like, “Oh Angular is like got built in data binding, and then like, wow that solves the huge pain in the ass about Backbone,” right?
And then so on and so on and then Rack came out and it was like light bulb moment or branding splitting moment and you’re like, “Oh the state, the model of using state and declarative components is super powerful.” I think that’s had a huge effect I think on the JavaScript framework community and I think you have seen that happen. It’s trickled down to view and to an extent angular too and maybe Polymer, #userplatform, yes. Oh man this endless Twitter wars between Polymer, yeah WebCon.
So that was a huge tangent to buy myself some time thinking about. So I don’t think anything is going to win. I think a lot of these solutions are very good. The decision really comes down to like does AB or C technology work for your team? You know, can it meet the goals of the product, which is why we build software in the first place to deliver some value in the world, and do the people in your team feel comfortable with it?
Yeah, you know, I’ve been on teams that love JS and I was like, “I don’t know if I love it but let’s do it,” you know?
[0:29:20.4] DA: Yeah. I think that was the correct answer, “It depends.”
[0:29:25.0] IM: The best answer is no answer.
[0:29:26.7] DA: There you go.
[0:29:27.8] MN: Ian, how can people reach you?
[0:29:31.6] IM: I’m on Twitter, ianmcnally_ shout out to the other Ian McNally that beat me. My website is ianmcnally.me.
[0:29:44.6] MN: Awesome.
[0:29:45.3] IM: I don’t know why I need to spell out my first name. It’s three letters, although you’d be surprised.
[0:29:51.5] DA: Yeah, you’d be surprised.
[0:29:55.0] IM: My CVS card is Ian McNally.
[0:29:58.1] MN: But it’s IAN, make sure the listeners know. Ian, thank you so much for coming on out.
[0:30:03.0] IM: Thanks everyone, it’s so much fun.
[0:30:04.4] MN: Really appreciate it. Our cohost, Dave Anderson, thank you and our regular guest, always good to have you.
[0:30:10.6] EG: Yes, thank you.
[0:30:11.8] MN: Feel free to hit us up at twitter.com/radiofreerabbit. This is the Rabbit Hole, we’ll see you next time.
Links and Resources:
Article: A Unified Styling Language
