Kevin Ball: Well, and here’s the thing… ZURB Foundation was started by ZURB, which was a design studio. And it was a great way for them to both deliver products, but then also marketing-wise to get a huge amount of marketing. And then at some point, CSS frameworks were less sexy. They were not as valuable for marketing. They were not really driving that much of it. And being in a services business, you have ebbs and flows. And at some point, they said “We can’t keep investing in it.”

And so I was an employee there for a while, I led later versions of the project… I can’t claim any of the original stuff, but I led some later versions. And when business got rough, ZURB Foundation got de-emphasized and booted. And I think there’s another company now that has absorbed it, largely because it ties into some of their products, and they’re doing things with it. But the development has been very push-pull, and now it’s way behind the times, and Tailwind and everything has taken way over. But yeah, it’s really hard for a for-profit company to consistently invest in open source.

Break: [00:41:54.25]

Adam Stacoviak: Yeah. I mean, these things seem to me like invitations, each section. If I read this, I’m like “Oh, I can add this tidbit to this to correct it”, or even seeing the dropdown Select menu at the top for being able to choose a different language - it seems very inviting to say “This is a working document. This is not set in stone. We may have started this…” – that’s probably a bad example, I won’t do that… I was gonna make a Billy Joel joke with “We didn’t start the fire”, but as I started to unravel it in my head, it just didn’t make any sense.

The long story short is you made this, but it doesn’t mean that you’re the only person in charge of moving it forward, and if you have opinions or thoughts on how this could change for the better to help the masses, as you’re trying to do with the mission of this project, then certainly step in, and here’s your single button for any tip in there to do so.

Erik Kennedy: And maybe they keep the brightness pretty high… But those two levers, just moving the hue, injecting a little bit of green in, and just kind of lowering the saturation - those are things that Facebook does at a different amount than Twitter; Twitter does at a different amount than LinkedIn. But the net effect is they all end in a slightly different blue color, where they all could have started from the same place, saying “Yeah, we want this universal, dependable brand for everybody, but we’re just gonna have it be a little brighter and funner than what you might think of as this default blue.”

So from there, when you’ve kind of said “Here’s the brand adjectives”, then that’s when I would start playing with colors and fonts. Those are two of the first things that I’m really gonna need to decide. And for beginning designers, you always have the option to just say “I’m really gonna not use hardly any color.” There’s always the strategy of just going as grayscale as possible. And if you look at most of the apps and sites that you use that look really well designed, it’s really not like they’re gonna have four or five different colors that are all featured prominently throughout. It’s usually just gonna be mostly grayscale, with one color, and that color has some variations on it. And maybe, yeah, you need a red for your error message, or whatever, and a green for your success message. But for the most part, it’s pretty simple. It’s just those little variations.

But like I said, this is the point at which I would open up Sketch, once I kind of know those brand adjectives, and I would do what the design community calls style tiles. Style tiles basically just means like make little bits of your UI that you’re not trying to make them look exactly like the finished product, but you’re just trying to suss out “Alright, if I pick this serif font - I’m just gonna make a button and see how that button looks. Then I’m gonna try and address some questions… I need this serif font to be in all upper-case, because it just looks incongruous to have a flat, perfectly rectangular button with this fancy font.” Or maybe it’ll make me think “I’ve gotta change my font to something else.”

But for a little more on style tiles, I think I have a blog post that covers it in some detail, called “Five practical exercises for learning UI design for free”, something like that; you can just google that. I think I give some examples of style tiles that I’ve done where I’ll play with some of the type, I’ll see what a header would look like on the site, and then I’ll see what the body font would look like on a text page… Say it’s the About Us page, or the Contact page. Or, speaking of Contact page, most sites need to design a form; so I’ll just try putting a few form components together…

And I don’t mean to say that the whole purpose of this is to create your design system, or your design library. It’s not about making every component in advance. It’s more about just trying to get little bits of interface that you think you might actually use in the real thing.

Here’s an example - I’m on that blog post that I was just mentioning, the five practical exercises for learning UI design for free; one of them is style tiles. If you skip to that, I show this one that I made for a company - I don’t think they’re around anymore, but they were a Y Combinator company a few years back called Instavest. They were this investment company, and they had a unique way for allowing users to invest in stocks. And a couple of the things I was playing around with for style tiles were like, I have this little chart widget where I have a line chart on this dark blue, and then I had just a couple colored rectangles to play with, like what colors might look together…? Since it was a site related to finance, I was like, “Oh, maybe we’ll go with a green.” Green has strong financial connotations, especially in America.

[32:07] Then I had a couple things where I’d just put little bits of text that may very well appear on the site, but it was real copy from the site. I put “Find world-class investing ideas” or “Make money twice on your best stock tips.” Those were things that were kind of relevant to the business… But the point is all that stuff that might really appear on the app or the site - I wanna just start playing with those and kind of feeling out like “Is this giving me the brand that I want? Is this making me feel the adjectives that we’ve agreed that one should feel when they land here?”

Matt Moore: To pick just a completely random example. Or Java, you’re likely using JARs off of Maven Central or – one of the ones that gets a lot of attention is npm, right? npm, it may even be more than 90%, because people write these little one-liners and you pull in enough Node modules to fill your disk, right? So yeah. I mean, just increasingly, it’s become all about the package managers for really bootstrapping new languages.

One of the funny things that I always felt like it was sort of missing from C++ – I know there’s things like Conan now, but I really had an a-ha moment the first time I used Maven, and I was like, “Oh cool, there’s this repository of really useful libraries, and I can download things and use them”, but at the same time, how do you establish trust for those things and whatnot?

[34:20] So I think the point there is there’s a lot more to securing your supply chain than really just securing your own stuff. So that’s one of the reasons I think we’re so invested in open source as well, because ultimately, we need to make this incredibly easy to use and incredibly accessible to open source developers. And so one of the key projects that we are investing in and building around is a set of projects under an umbrella called Sigstore projects. The project names are Fulcio, Rekor, Cosign. So Cosign is the CLI. It’s what I think folks will probably have the most exposure to in terms of if they’re a developer day to day, they may invoke Cosign to attach what’s called an SBOM, or to sign things or to attest to things, which is a form of signing a claim…

But I think one of the most exciting things for me about what Sigstore is doing is not the sort of traditional modes of signing in tools like Cosign, where you generate a public-private key pair or use a KMS system, and then with those keys, you sign things, and then it’s verifiable with the verification key. You can do those with Cosign, but I think what’s really, really exciting to me and I think ties into that, making it accessible to and easy for developers, is this thing called keyless signing. So if you sort of rewind time ten or so years - maybe more now; I’m going to show my age… But before Letsencrypt existed, getting TLS certificates for your website was hard, it was expensive. And then Let’s Encrypt came along, and they got themselves registered as a certificate authority with all the groups that sort of matter in the space to become a certificate authority. Then they offered this public good service that had a challenge process, and you could get TLS certificates. And there’s fantastic graphs that show where the number of websites with TLS before Letsencrypt, and then it launched, and it goes up and up and up. And at this point, when you’re viewing a website and it doesn’t have the little green lock in your browser or whatever, it’s very suspect, right?

Kevin Ball: My pro tip is actually something that I know I learned from The Debugging Show. I think it was Nick actually who did it, but it was recently incredibly useful for me, so I wanna bring it up again. This is that in your Chrome Debugger you can insert a breakpoint that does a console log. So if you are debugging minified scripts, where you can’t actually modify them, you can actually still insert console logs and get information. This was relevant for me recently, because I was tracking down a bug that only showed up intermittently and only showed up in minified scripts, and it was in an area where – the backtrace was coming from something that didn’t have enough context for me to know… Like, I didn’t have enough from the backtrace, but that function got called thousands of times, and only sometimes intermittently would fail… So I wanted to know what was it being called with the times that it would fail, but inserting a breakpoint wouldn’t get me there, and I couldn’t insert a console log because it was on minified stuff, and if I changed – anyway, it was a mess.

[48:10] But this tip - that once again, I think Nick was the one who highlighted it on that debugging show - saved it for me, because I was able to insert a breakpoint that did a console log; it used a conditional breakpoint mechanism, which basically lets you evaluate some JavaScript, and if it returns true, then it will do a breakpoint, but if you put a console log in there, it’s always gonna return falsy, but it will just log it out. So I would get this log of what was the function being called with, and then the last item before the error would be the one that caused the problem… So that let me track down this intermittent issue that had been happening for months and we’d never been able to dig it up, and that was awesome.

So I highly recommend conditional breakpoints with a console log in there as a way to track down issues in minified code.