Transcript

CHRIS: Hello, everybody. Time for another ShopTalk Show, #227, I guess, our 227th show. Dave and I are going to be talking about all kinds of stuff.

You know how you're, like, developing a site on local and it has, like, mysite.dev? How do you view that site, let's say, on your phone or on your tablet device while you're still on the same local area network? Can't you be able to do that? Yes, you can. Dave and I are going to show you how to do that in some ways, talk about that a little bit.

We're going to talk about, oh, IDEs a little bit. Is there some kind of wave of IDEs where, like, they start to do too much and then people reject it and go for simpler stuff, and then they miss all the power of the other one, so it kind of ebbs and flows. The yin and yang of IDEs. Is that a thing, or are we just imagining it?

We're going to talk about a use case for Sass lists. We're going to talk about how you style checkboxes because there's totally a way you can do it that works pretty well. We're going to talk about kind of getting dinged for serving too big of images when that's like, eh, kind of BS sometimes. At least Dave gets a little fired up about it. That and more up ahead on ShopTalk Show.

This episode is brought to you in part by CodePen and all of our robust pro features, so many of them. You know we've heard from lots of companies that use it to hire because they basically put together a little challenge, something that, like, a front end developer should be able to do. Then they get together with them in a collab room on CodePen, which is kind of one of those things where both people can type.

You see two cursors, kind of like a Google Docs kind of thing. You just watch them think through the problem in front of them, and it gives you a heck of a lot of insight into whether that person is going to be a front end developer or not. That's a pro feature on CodePen, so check it out at CodePen.io/pro.

But for now, Mr. Dave, play it up.

[Banjo music]

MANTRA: JUST BUILD WEBSITES!

DAVE: Hey, there, shop-o-maniacs. You're listening to another episode of the ShopTalk show, and '80s action adventure cop drama with Chris and Dave.

CHRIS: Divs and spans saving the world.

DAVE: Wouldn't that be great? We should pivot ShopTalk and do a cop show, an action drama cop show.

CHRIS: Yeah, with like moral grace.

DAVE: Directed by Dick Wolf. Yeah.

CHRIS: I see. I see.

DAVE: Yeah.

CHRIS: I don't think Dick Wolf has done a cartoon. This might be a real deal.

DAVE: Oh, we could do a cartoon if somebody wants to draw a cartoon for us -hint, hint.

CHRIS: Just a little ask. Just, you know--

DAVE: Just a tiny ask.

CHRIS: Spend six months--

DAVE: Animate Chris and I. Anyway, yeah, so it's ShopTalk. We talk about websites. Right, Chris? What have we got going on today?

CHRIS: We're just going to do a whole bunch of questions, so let's just get right into it. Wade Mueller asks -- oh, gosh. We always get some of these, like, eternal questions on ShopTalk Show. "What is up with styling checkboxes? I've never had to do it before," or, "I had never had to do it before and it surprised me just how hard it is." So it sounds like he did it for the first time and it was like W.T.F. "Why haven't browsers fixed this?" which is his final question there, which is a bit of a loaded question or a complicated question or a hard to answer question - all of the above kind of thing.

<input type="checkbox"> is what we're talking about. Have you ever given it the old college try there, Dave?

DAVE: Oh, boy, have I ever. So, "What's the deal with styling checkboxes?" is a good question. It's weird. Some browsers let you kind of like size. You can size the checkbox. You can say it's 30 pixels by 30 pixels. Please make it like a big box.

CHRIS: Will it really? Some browsers will actually make it 30 pixels by 30 pixels.

DAVE: Yeah, some will. But some are just like, "No, 18 is probably the biggest I'll go." So you're just like, "Dang it, man." Then all your spacing is off because it works in one browser but doesn't work in another, and so it more or less doesn't work, like styling the native checkbox.

So we get into this kind of hack thing where you have the checkbox, and you hide that. You move it off screen or crunch it down into like a one-pixel by one-pixel box or something. Then you use the label, and you do a background image next to the label, like a fake checkbox background image. When you click a label for a checkbox, as long as it's tied together, like with the proper for attribute and the proper ID, the label will check the checkbox even if it's hidden or I'm not sure if it's displayed none, but if it's moved off screen.

CHRIS: It may be displayed none. Maybe not though, or at least kicked off because it probably is good for it to not be totally hidden from assistive technology. But what you're getting at, I think this is the way to do it, which is to just avoid styling the checkbox at all and just make a div. The div, you have background images, or you style up however the heck you want to. That is triggered by the label because the input has a checked or unchecked CSS selector that works. Then you can do the little squiggly guy, which is the descendent selector. So you can style a div depending on whether that checkbox is checked or not, and that div could have any styling in the world that you want.

And it's clickable because you've set the label on top of it. You've done some little tricky CSS positioning to set the label element on top of it. And the label, when you click a label, it toggles the input on or off. So it's a trick. They call it the checkbox hack, and I love it. I think it's the answer. I think it works across all browsers. As long as you design the checkbox such that it has good affordances, like it looks like a checkbox and stuff, I think you're good to go because you can still tab the label and activate it with assistive technology and stuff. I think that's the way to go.

DAVE: I think people will do this, and they will do a circle checkbox. And it's like, no, don't do that because that looks like a radio button now. You've got to make sure you're keeping those affordances you talked about.

There are some accessibility concerns. You should always, when you do this, run it through a screen reader and see if you messed up because, if you kind of mess up one thing, it's just basically the screen reader doesn't know about it. And so you've got to be careful about that.

There is an issue with Windows high contrast mode. I think it's maybe changed now in Windows 10, but high contrast mode is like people with low vision will throw it in, and it turns all black and yellow and stuff like that, and it kills background images, so background images don't work in high contrast mode.

CHRIS: Okay.

DAVE: So it's not dependable, but I think I'm misspeaking here, so a grain of salt. But I think that was just recently changed and now it does support background images.

CHRIS: It doesn't necessarily need to be a background image. It could be an image tag that you hide and show the correct one.

DAVE: For sure.

CHRIS: Or it could be some Unicode characters that you add with pseudo elements or whatever.

DAVE: Mm-hmm. Mm-hmm. I think there are a lot of good options. The Unicode one is a good hack, but some, like iOS, will turn it into an emoji, which is kind of a bummer because that would be so sweet. Yeah, so I think there are a lot of good options, so try it. It's a bummer, but this is the only way to do it because browsers don't let you style native form elements, for better or for worse.

CHRIS: Then, well, I don't know. Of course the argument comes into play like why you shouldn't be doing this at all because, the checkboxes, chances are the user who is visiting your website is well aware of what the native form elements look like, they know how to use them, and know what to expect from them. They get a lot of affordances from that, so just leave it alone.

DAVE: Mm-hmm.

CHRIS: Unless you absolutely have to for some reason, which is fine. Whatever. Then, "Why haven't browsers fixed this?" That presupposes that it's something that is a bug that they haven't fixed when I think it's not. The specs don't really dictate how things need to look. They always deal with functionality and stop short of kind of UX and UI.

That's why date pickers are so weirdly inconsistent across browsers because the specs don't say how a date picker needs to look or work necessarily. They just say what the output is supposed to be. I think that's on purpose as part of the spec. I don't know. If all the browsers had their own proprietary way of handling checkboxes, we might be lamenting that worse than we are now. In fact, I suspect that we would be.

DAVE: Yeah. What would be the Greek character for this? The desire to style forms, custom style forms, is just like the most Sisyphean effort. Everyone tries it. Everyone has a hard time with it. It's like, eh, it just doesn't work super great. It's really hard. But anyway, you can do it, but it's hard.

Mark Otto, MDO, he had a CSS forms site. I'm going to try to find it here--WTF, forms?-- and it's kind of like something that funnels into bootstrap or something. But it's kind of a cool version of input, custom styling things, but I don't know. But again--

CHRIS: Part of the advantage is like if you -- I don't know. You know how we talked about do websites need to look the same in all browsers. No, or whatever. Sometimes that has seeped into our brain a little bit is that it's kind of nice when things largely do look the same across browsers, or maybe the client dictates that they do. Like if you have a platform in which you really need your inputs to look the same across even your mobile apps and whatever that customizing them can be nice because you have, like, okay, in this app these radio buttons need to look like nipples, and they just need to look like nipples, so they need to look like nipples on my mobile app and everywhere, so I have to customize them so that they're the same across all the platforms.

DAVE: Yeah, absolutely. You have to customize. That's very important. It's so weird that we get into those situations. Blah!

CHRIS: Whatever. We covered it. What do we got next?

DAVE: Yeah. All right, the next question. Here we go. Robert Lahl (phonetic) writes in, "If you have a question from somebody who is building sites with Rails-like functionality without using Rails. He was looking into using a cheaper alternative to Heroku and Engine Yard. I'm a front end developer at a small company here in the U.K., and we've just finished building out a product called Viaduct. Viaduct is very similar to Heroku, but allows users to deploy Rails applications in addition to applications built in PHP, MVC frameworks, CakePHP, Laravel, Acera. It even does WordPress sites. Pricing hasn't been sorted yet or hasn't been seen yet."

CHRIS: I think it has now because this is a little older.

DAVE: Okay, a little older.

CHRIS: I put the link in there.

DAVE: But it's cheaper.

CHRIS: Yeah, it's cheaper, and I mean it's not an ad. They're not sponsoring this, but somebody wrote in, and we were talking about--

DAVE: But I'm going to send them an invoice for this. I'm just kidding. No.

CHRIS: But it's interesting. I think it's relevant to our audience, certainly, as to is there cheaper Heroku because Heroku is known for not being particularly inexpensive.

DAVE: Right.

CHRIS: Or is there a cheaper Rails hosting of some kind or app hosting, you know.

DAVE: Mm-hmm.

CHRIS: We talk about hosting. There are lots of different popular Web houses out there that are happy to sell you a box, in which case you're a little bit on your own. But there's this kind of niche hosting that's kind of ready to go app hosting, which is just kind of a slightly different market, I feel like, and they're trying to get in on this market.

This one looks kind of interesting, this Viaduct thing. It's like £2.50 for a deployed application, which is super cheap - a month. Then everything else is like the spoke. You're like, well, I need actually a bit more memory because I'm running something that's kind of memory intensive and I know it. So I'm just going to add the memory to it only, or I'm going to use this. Like I need a bunch of storage, so I'm going to add that, or I'm going to need SSL, so I'm going to add that. That one is free, actually. I need a dedicated IP address. That's a little spoke charge. It's kind of like people that know what they're doing and need kind of specific app hosting can kind of piecemeal together a plan for them, and it ends up being cheaper because of it.

That's them, and that's not an ad. It's just they wrote in, or Robert wrote in here to tell us about it. I wonder if anybody else out there has opinions for that kind of thing, like doing specifically app-like hosting on the cheap. What do you think?

DAVE: Yeah. I would be interested in node apps or something like that, those sort of things.

CHRIS: You can get all that running on any box. It just depends on how much that host helps you do that.

DAVE: Yeah. All right. Well, thanks, Robert, for the pitch. I'm sending you an invoice.

CHRIS: If anybody else has options, just write in and maybe we'll make a little segment about them.

DAVE: All right. Wes Todd writes in, "I was listening to a recent episode of ShopTalk where you talked about Sass lists. I thought I would send you this example of some Sass we have at work. It uses a list and a few functions to dynamically create all the helpers for an icon font."

We'll put a link in the show notes.

CHRIS: Yeah, it's a gist that he published. It's kind of interesting. Sass lists are just a construct in the language of Sass that allow you to just basically make name spaced key value pairs, essentially, right?

DAVE: Yeah.

CHRIS: Instead of making 50 variables at the root, you just make a variable called "icons." It's like an object in JavaScript, essentially.

DAVE: Mm-hmm. Yep. Yep, it's just an object. They're using it. They have an icons variable that has a map or a list in there, and it's exclaim, X, play, user, search, menu, and then it references the icon font spot. Then you just kind of spit all those rules out, so it's kind of nice.

CHRIS: I thought it looked kind of cool, and this wouldn't have to be an icon font necessarily. In this case it is, I guess, but I often think you want to use some Unicode stuff in CSS, like as a Pseudo element. You always need that backslash and then just a random weird number, and you always have to look it up on some chart or something.

DAVE: Mm-hmm.

CHRIS: I kind of dig the use of Sass lists here because you're like, "Oh, I need the one that's a right arrow."

DAVE: Mm-hmm.

CHRIS: In HTML, that's: →

DAVE: Mm-hmm.

CHRIS: And you're like, cool, a right arrow. That's easier to remember for me. If you had to use that in CSS, it's like /1D412 or something.

DAVE: Right.

CHRIS: And you're like, uh, that's impossible to remember. Using a Sass list allows you to just make a thing that's named icons and then have right arrow and then have it be that value. Then when you need it, you can use it by its name rather than the weird number. Pretty cool.

DAVE: There you go. All right, well, thanks for sending that in and reminding me it's been about 300 years since I've written a for loop in Sass, so I don't know if that's good or bad.

Ben Edwards writes in, "All my life I've been a loyal Windows Web-based Web developer, but now I'm heading to a new job into the brave new world of using a Mac day-to-day. Any advice for a Mac newbie on what to install on my first day so I'm not flailing around like a lunatic for the first few hours?" This is probably an older question.

CHRIS: Yeah, well, maybe, but it's kind of interesting that it's reversed in that we've been talking. The last episode or two episodes ago was all about Dave's kind of sticking on Windows now, and we've kind of covered a little bit, some advice for what it was like for you on Windows and some must have apps and stuff. This is the reverse in that Ben has been on Windows his whole development life and is now switching to Mac and is worried about what that's going to be like.

I would suspect that some of the same stuff that you said in reverse, kind of like it's going to be weird to use the Apple key instead of control key for stuff, so that'll be weird. But I wonder what. I mean I don't know what to tell you, like what apps to get. I don't know.

DAVE: I'll tell you the ones I'm missing. Can I tell you guys?

CHRIS: Sure.

DAVE: PNG Alpha, which is like you can basically lower the color profile and medium quant slice your PNG is really awesome. And ImageOptim is missing. There's like a PNG gauntlet, but it's just not the same thing. It doesn't do JPEGs the same way. Yeah, you're going to want those two programs for sure.

CHRIS: Okay. ImageOptim, I use that every day of my life.

DAVE: Yeah. Preview is actually pretty good now for slicing and cropping PNGs or something if you need something like that on the fly. You kind of don't need any super PhotoShop or anything at this point.

CHRIS: Really? Preview can crop? I didn't even know that.

DAVE: Oh, yeah. Command + K. Gees. What? No, it's good. It's good. I'm trying to think of what else do I miss. Get yourself a terminal, like iTerm or that brand new HyperTerm that looks so good. I'm so jealous of that one. I think that would be a smart move. Just get a terminal you like and install oh-my-zsh and make sure it looks good and feels good to you. Anything else, Chris?

CHRIS: I don't believe you about the cropping. I'm trying to find it. Command + K? Really?

DAVE: Yeah, I think so.

CHRIS: Oh, yeah. It's grayed out for me. I have a PNG open and it's grayed out. Why would it be grayed out?

DAVE: I don't know. I broke it. I broke it.

CHRIS: That's awkward. Oh, maybe you have to -- oh, you have to select some area first, and then you Command + K.

DAVE: Oh, there you go.

CHRIS: That's really good to know.

DAVE: Yeah.

CHRIS: I'm going to use that all the time now.

DAVE: Yeah. Yeah, it spits out the fat version, so you need to go and re-optimize it, but it's pretty good.

CHRIS: Oh, right. This blows my mind a little bit. Okay. Ben, good luck with your Mac stuff. If this is really old and you've switched to Mac, feel free to write back in and tell us what that was like and what your must use apps are.

I almost don't even think about it any more. I don't use that much stuff. I use a Web browser, and I haven't switched to HyperTerm. I have iTerm and sublime text, a Twitter app, and stuff. My doc is full of stuff, but I'm not in and out of all that.

Everything feels kind of interchangeable. I have some random calendar app, but it could be anything. I don't care.

DAVE: Yeah. No.

CHRIS: A Twitter app. Whatever. It could be anything.

DAVE: I feel you.

CHRIS: Okay. Let's see. That was Ben Edwards. We've got Avi G. (phonetic) who wrote in. I think this is an interesting one. Let's stick on this for a minute.

"I often use a PHP debugger during Web app development. I've been thinking on moving on from Netbeans IDE," that was the one he's on, or her, "to Sublime Text, but then found out there's only one extension called Sublime XDebug, which seems partial and rarely updated." Do you know of any other alternative for PHP debugging on Sublime? It seems many developers get around fine without using a server side debugger. What is your approach?"

I guess we've talked about this a little bit before. I've never actually went full boar on Netbeans, but I suspect if I was a full-time, back-end, PHP code writer that that would feel pretty nice to have an IDE that knew how to execute PHP and potentially tell me about problems in my PHP code before I--I don't know--deployed it or refreshed the page or whatever. It seems like the fact that it kind of knows about the language and can execute the languages better with Sublime Text is like completely dumb. It's just a text editor. It just opens up the text file. You can edit it, and it's very good at dealing with text. But it doesn't know about PHP.

DAVE: Yeah. I mean I think my whole opinion is changing on this quite a bit. I'm like you. Sublime, Atom: those are very dumb editors and they know nothing about the code or the language. No kind of like deep integrations like that.

But let me say this. I've been using Visual Studio code. The VS code is on all platforms and it has really good IntelliSense from the Visual Studio platform, so you can get the definition of a function or whatever. It's cool.

Auto complete is really good. But the best feature about it is if you're writing node apps. It's kind of written to work with node apps. You can step in debugging on a node app, so like you set a debugger in your code and your node app will stop just like a Web inspector or whatever.

I was dealing with socket.io on that global defense game I made, and I was just like I don't get how socket.io is working or how do I reference this thing. I just hijacked, like I set a debugger and it's paused where the debugger hit. Then I had access to the object. I was like, okay, socket, what does that return? Oh, a bunch of junk. Okay, socket.io. Okay, what does that return? A bunch of stuff.

Then I could kind of navigate the big, gnarly, native JavaScript object just using my code editor.

CHRIS: Cool.

DAVE: I've never done that in anything. My node app was like I was Web inspecting it like a freakin' front end app or like a jQuery plugin, and it was just so cool. And you can start/stop it. I used F5, I guess, on Windows. I don't know what it is on Mac, but you start and stop the server, so you don't even need to open the command line. Call me lazy because I am. That was the best because you just kind of tell it, like when you hit F5, what does it need to launch or run, what node process, node script or whatever, and it does it. I was like this is the best.

Whenever I'm writing node apps, I'm using this app, hands down, because it is just miles beyond anything I've ever experienced. To step so deep into something, like kind of have that tight coupling between like a node thing and the editor, like the language and the editor. All that to say I think I'm kind of changing my tune. I think if you can use Netbeans or something like that and it gives you that 10X feeling that you're navigating code and you're learning it, mastering it, and you don't have to remember as much. You're brain ram is cleared out because the editor takes care of that for you. That's kind of awesome.

CHRIS: I totally agree. I'm not going to disagree with you at all. As much as I am a fan, I'm just very comfortable in Sublime, and I just open my project, it just opens immediately, I know how to jump around in there and write code, and it seems like I'm productive, it seems like any time I have upped the game in the IDE place, it's been kind of awesome. You know, like, okay, I've got linting in there now. That's pretty cool. Oh, I have kind of some Git integration in here. That's pretty sweet.

Or like, we have now some more advanced, like in the React stuff I'm working on. It's like there's more. The linter knows way more about that. It knows, like, oh, you've used a prop that you haven't kind of tested here that you should worry about. There's some advanced React-y linting stuff that's happening. It almost knows more about the code I'm writing than it did before. I know I'm struggling to explain that, but it feels pretty cool.

From what I hear--I haven't jumped into this--that that's what people really like about TypeScript is that the tooling with TypeScript is awesome. It has that kind of, like it executes itself and the whole kind of dev environment knows what's going around in a TypeScript app that that's what people really get attracted to. I was like I kind of get it now. I kind of want to try it. I really like it when my IDE knows a bunch about the code I'm writing and can make suggests and know what I'm doing is wrong before I have to go find out that it's wrong through some other tool elsewhere.

DAVE: Yeah.

CHRIS: It seems like the more powerful it gets the better. I wonder if Sublime was so popular because it was like if all this stuff goes in waves. I wouldn't doubt that it is. I just don't have enough step-back perspective to know that, but I wonder if it became popular because IDEs started getting too much. You know where, like, eh, I just want a simple text editor, so people started to reject the "too much" editors and jump onboard the really lightweight things.

Now it's starting to go back in the other direction that we miss what we had before and then editors are going to get more complicated and complicated. Then there'll be another rejection, and we'll move back to simple editors again. Or if people do that in waves. The editors stay what they are, but the human beings go back and forth.

DAVE: Yeah, I wonder. I mean of course somebody out here is like, "Just use Vim or Emacs. I've thought about that too. It's like what if I just did that and then all I'd have to do is install like a doc file.

CHRIS: You still need insight, though, into your linting stuff, and you need insight into when a bug happens. The bug is going to happen. Do you want to find out about it in your text editor, do you want to find out about it in a third-party tool on the command line when tests run, or do you want to find out about it in the browser? Where do you want to find out about the bug?

DAVE: No, and that's fair too. Did you make a typo? Do you want to find that out on compile or as you're typing, which I think a lot of these IDEs give you the bonus on that. I think that's the thing. I think any text editor starts heading down a path to become an IDE for a certain language. TextMate was a good example, and it just like was the de facto Rails, you know, Ruby machine. I know some Rubists still use it, so it just kind of like gets tuned for that or the environment around it. All the plugins and stuff kind of anchor itself to that, so I think that's kind of just how it goes.

I don't know why, like, Sublime, Atom, and all those kind of exist without, but they have such a good plugin ecosystem. I think it's kind of like it can be whatever it wants. Maybe that's it. Maybe we've developed good plugin ecosystems for code editors. I don't know. Anyway, Avi, I hope you enjoy Netbeans. Don't switch to Sublime just to switch.

CHRIS: Or switch and see if you like it, and then don't be afraid to go back. It doesn't have to be an upgrade unless you declare it an upgrade, darn it.

DAVE: Mm-hmm. Darn it.

CHRIS: Lavi Perchik (phonetic) writes in with interesting comments about accessibility. He's a Web designer and developer from Israel. He says, "A new Israeli law," and this may be--again, we've been picking questions from all periods of ShopTalk Show history--this might be a year or two old. "A new Israeli law requires all websites to be accessible at the AA level. The law states, 'Website administrators who fail to comply could face fines of up to 50,000 shekels,' which is approximately $14,000," so this is serious. They're saying all websites. "A new Israeli law requires all websites to be accessible at the AA level.

"This has stirred a huge debate in the Web community in Israel. I'm wondering if similar accessibility laws exist in the U.S. or other western countries. Do you think that it is possible to make every website accessible at the AA level? How do you ensure that your site is accessible? I'd love to hear your take on it."

I don't think there is any U.S. law that forces all websites to be accessible, but I think that is the case within our government, right?

DAVE: Yeah, and so any public website has to abide by. Right now it's Section 508, which is the government's version of accessibility, which is very similar to WCAG AA level, but it's not exactly the same. Every year, and I think recently there has been a law in the works, but it gets punted on, about making every commerce site have to obey AA level accessibility.

Can I share some insider knowledge, some secret stuff? Is that okay here on ShopTalk?

CHRIS: Yes.

DAVE: I was talking to a friend who works at a museum. She was like, "Yeah, well, we got super sued about our accessibility on our website, so we're having to fix it.
I was like, "Oh, gees. That's a bummer because most people try, but you know, and that's a bummer." She was like, "Yeah, so apparently the word on the street is everyone wants -- being accessible is a good thing. You should do that. It's a good deed almost, but you should do that."

But lawyers are getting wind that there's a precedent set that you can sue companies and get money, and they get a chunk of that money. Then the representative group also gets a chunk of money. Lawyers are getting wind that you can sue websites now and make money.

CHRIS: Do you think there's going be a little wind in the sails of these lawyers that it's just going to kind of go around?

DAVE: It appears there is a little bit of an uptake in these kind of….

CHRIS: Who do you sue on behalf of though? Is it first to sue gets the money? Who gets the money?

DAVE: I mean it could just be a coalition of blind Americans or deaf Americans united or some sort of super pack of people with disabilities. I think it is a thing. It used to be these big blowouts like Target or whatever had to settle for millions and millions of dollars, but I think that has sort of set a precedent, and now kind of litigious lawyers, people who just like to sue but also are doing a good job, are getting wind of this. Not to put too much FUD--fear, uncertainty, and doubt--into the situation, but it is becoming, like, anything that's a profitability business to lawyers will probably attract lawyers.

CHRIS: Why is Target? If we don't have a law, why is Target -- why can they be sued? If you're big enough, you could….

DAVE: Well, they got sued because, if you think of Target's storefront, if they didn't have handicap ramps or if they had no kind of assistive technologies. It was just like public facilities or like businesses have to be accessible after being built after a certain date or whatever. That means--

CHRIS: But that law exists.

DAVE: That law exists, and that's part of--

CHRIS: But the Web ones don't or do? They are tucked in there somewhere?

DAVE: Web does not, but it's not a hugely leap to say, like, "Well, if the physical store has to be accessible, then the digital storefront should also be accessible." That's almost like a linear jump of thinking. Granted, they are totally two different totally different things, but there is this kind of like idea.

The museum, for example, it's like the museum has to be accessible, and it does have some kind of public funding. But, like the digital museum, the digital version should also be accessible. So it's kind of wild to think, but it does, just from what I understand, and I don't have all the answers, but it does sound like there's been a pickup of these kind of lawsuits, or settlements is usually how it works because people would rather pay out and just say, "Hey, we're going to fix it," than go through a big legal battle.

CHRIS: Interesting. So they might. Yeah. It just would have looked bad or whatever, so you can get sued for it because just being sued doesn't mean you win. That doesn't assume whether you win or lose, but they might just be like, "I don't want to even go through this. We're just going to pay them $2 million to go away."

DAVE: Yeah, like hush money. No, but just to say, like, "Hey, we get it. It's a problem. We failed. We'll try to fix it, or we'll get on fixing it." Yeah.

CHRIS: Which is good because if the law were to exist, which apparently it doesn't here, except for within the government, the law is -- I don't know. It's there to do good. The point is to. But what comes of that law is always tricky, huh?

DAVE: Yeah.

CHRIS: Like if it resulted in every website in the world being sued, that would be kind of a negative effect even though they should be accessible, so maybe we'll get the world to a better place. But if it just makes the storm of legal activity in the Web industry, the outcome may not be so good.

DAVE: Mm-hmm. Yeah. Here. I'm going to put a link into the show notes. This is kind of from an accessibility project thing, but it's a list of legal settlements that Karl Groves is keeping track of from the year 2000 on. It's just huge. Yeah, so it's to like 2015, so it's happening, I guess, is what I'm saying.

CHRIS: Wow. This is good journalism here. This is the data we actually need here. Yeah.

DAVE: Yeah, and I'm trying to figure out what--

CHRIS: Toys R Us.

DAVE: Yeah, I know. Yeah, Target had to pay, settle $6 million, so if your company is not ready for that. And Canada already had kind of strict laws in place, so if you do business in Canada, you've got to be concerned about that. Yeah, good luck.

CHRIS: Here's "Blind woman sues Toys "R" Us, alleging violation of federal disabilities act." You're right, which I'm sure is the act that requires the ramps for wheelchairs and all that. "Sipe seeks a permanent injunction, directing Toys "R" Us to bring its website into full compliance with ADA requirements."

I don't know. Maybe there are requirements. Americans with Disabilities Act: We'd have to look through there and see. I'm sure the answer to this is easier to find than me actually reading the Americans with Disabilities Act, but I probably should.

DAVE: Well, I can. Yeah, I can provide more links. Section 508 is pretty out of date, but I have an article on A11Y Project kind of drafted that would be kind of relevant there.

CHRIS: Yeah, I'm sure there's people out here that are a little mad about my ignorance here and you're not, so yeah. I apologize in advance.

DAVE: No. This is where -- can we add a layer of commentary, nuanced commentary to our podcast? I'm totally down. I definitely think things should be accessible. I think buildings should have ramps and stuff. The thing about digital and Web accessibility in particular is it's kind of super hard, and it's kind of super complicated. There are a lot of, like, state. There are a lot of things you have to manage. You almost have to be a certified expert to do it successfully. Like layman, just like security or something like that, laypeople, like accessibility is usually missing the mark, so you've really got to kind of like learn it, step up your game, know how to do a screen reader, and know when it goes wrong. That's just stuff that we kind of have to do. We really have to kind of take it on, but it's such a nuanced field.

Like your answer probably isn't right. Like I saw somebody. Can I give an example? Somebody was doing an accessible color palette website. Like, here; you go to this website and you vote on accessible color palettes. It's a really cool thing, really noble thing, but how they did it, they promoted it on Twitter is they put it in a GIF, like a bunch of color palettes cycling through on a GIF. Well, that GIF causes seizures because it's animating too quickly.

It's like on one side you're like, oh, let's make accessible things. Then on the other hand you're like, let's cause seizures. That's like you've got to think of the whole picture. It's not just about color contrast and blind people. You have to think of the whole picture. That's what I would say.

CHRIS: Yeah.

DAVE: It's a lot to think about. That's why any legislation is like, "Oh, gees. That's tough," because that's regulation and all of that. But like it needs to happen because we're missing the mark, I guess is what I'm saying. I have very nuanced opinions. Welcome to the nuanced….

CHRIS: There's a little bit of information here. I just found a Forbes article of Adriana Gardella speaking with Lynn Calkins, who represents the government in some way, it looks like. Gardella asks do you know what type of businesses, business websites, will have to comply with the ADA? And Calkins says, "Businesses that provide products or services to the public through their website," which is like a ton of websites. And it says, "But beyond that it's not clear yet. Court decisions have been inconsistent. For example, the ADA has been applied to websites in cases where there's a brick and mortar store," involved with the website, but not all cases. In fact, Netflix has been used as well, so they don't have a brick and mortar store.

Apparently this is all, this is very nebulous still a little bit. This was just last year, so this is not quite a year old, so it's not totally out of date information yet. The maximum penalty, it looks like, is $75,000 for the first violation and up to $150,000 for subsequent ones. It's actually even higher than it is in Israel.

DAVE: Yeah. Well, it's something to consider. You've got to think about it, I think, and start thinking more and more about it.

All right, let's move on. Shall we?

CHRIS: Yep.

DAVE: Boyan Stepich (phonetic) writes in, "I am getting a low score on the GTMetrix for serving larger--"

CHRIS: I think that's a website that you put in a URL and it gives you a score kind of thing.

DAVE: Score, like a performance score.

CHRIS: Yeah.

DAVE: "For serving larger images than the boxes they are intended for on my website, all because I'm trying to think about users with large screen resolutions." That could also be like high screen resolutions. "If I get them to a smaller size, I will get a better score and perhaps be better optimized for Google rankings. However, users on my website will have a worse experience. These online tests such as GTMetrics and even Google page speed insights are making me give users a worse experience. Am I wrong?"

I'm on team Boyan on this. This frustrates the hell out of me. I don't know. There's no such thing as a 1x image on mobile because every mobile device is 1.5x or more. I don't understand. They're like, "Your image could be 320 pixels wide on mobile." And it's like, "No, there's no such thing as that." Ugh!

CHRIS: Well, I actually didn't think of that. That has a level of nuance there that I had missed. But at first I was like, well, this thing is just trying to tell you that you're serving an image that's too wide for the screen to be on it, so let's assume that this thing is intelligent enough to know that if it's a 400-pixel wide screen, say, and it knows that it has a 1.5x display, hopefully it's smart enough to know, well, the image, it would make sense if the image was 450 pixels wide. But if it's wider than that, you're sending more image data down than you need, and you have an opportunity for an enhancement there, especially now that we have all of the tools that responsive images gives us. And it's just trying to let you know that, which I think is smart on a website that's whole purpose is to tell you about performance optimizations that you could make. But you're saying that these tools aren't smart enough to know that, and it's like dinging us.

DAVE: Yeah. Let's say you had a 900-pixel. Like, okay, let's start at the site level. You have a 1,200-pixel wide site, right? Then you have a 300-pixel column and a 900-pixel column, right? Does that make sense? And so you put a 900-pixel wide image in there for your 1x desktop.

Well, the page speed insights or whatever will run your site at something like 800 pixels, not the 1,200 pixels, or even it'll run at 1,000 pixels instead of 1,200 pixels, and so it'll say, "Oh, your image is 900 pixels wide and it only needs to be 768 here, so you failed," or, like, "We're not giving you any points for that."

You could add more break points to make this thing happy, but you're just tricking the machine. You're not, like -- you could add--

CHRIS: Yeah, definitely don't do that. It's kind of like doing something to make you pass the HTML validator that is actually superfluous code or something. Don't. These things are just tools to help you do a good job.

DAVE: Yeah. Yeah, but you should know, like, "Oh, I put a 22 meg logo in there and it's only 100 pixels wide." You should respect that, but I don't know. I have a tough time when it's doing post images or even, like, let's say you run a blog and you're not the editor. Somebody else uploads these gigantic images and puts it in there. It's your job to kind of format it, but you kind of don't control that content block.

It's weird that their computer is like, "Oh, well, it's larger than it is on my little computer device that I don't tell you the dimensions of," by the way, because it doesn't do that, so you get dinged. Ugh! It kind of makes me a little upset. I'm a little fueled up by this, and the fact that there's no 1x mobile thing. That also bugs me, so anyway. I'm going to just go have some whiskey.

CHRIS: Okay. Okay. I mean at the basic level, though, it's trying to. You know without getting -- the tool could get better to solve this entire problem, in a sense.

DAVE: Yeah, it could, but it's also like you're judged. Your Google ranking is based on Google's tool, so that just stinks.

CHRIS: Hmm. I wonder what the internal wall structure is there. Like does your page speed score affect your kind of like search rankings? And does the page--?

DAVE: Yes.

CHRIS: And so if they have a bummer rule in there that just is kind of like inaccurate and you put in stuff to trick it, even at the cost of more bogus CSS and HTML that you don't really think users need or actually makes your site a little worse, just to get a higher score for their algorithm, that it's kind of worth it.

DAVE: I don't know. I think it's worth it because if you think about your laptop is probably a retina, right? My laptop is 1.5x. Even 4K laptops are out there now, so that's another. That's a 2x laptop.

If you serve a 1x image, it's going to look bad. It's going to look bad in that container, so you can use the responsive to do the 2x, but maybe you could split the difference and do just a little bit more and it is great, but Google dings you for that. So I don't know. It's a bummer. It's a bummer.

CHRIS: I kind of want to end this, though, with just saying, like, boy. Okay, so there's some nuance to this, and obviously Dave isn't happy about it. I get all that perspective, but also, to me, the question reads as this, like, I only want to serve my desktop users and I don't really care about the mobile thing. Or I want to just send giant images because I want people on a large screen to see my giant images. You know mobile be damned.

That's how this kind of reads to me a little bit, and you don't have to necessarily think that way. And you don't have to forsake your desktop users. There is such thing as responsive images. You can use the source set and sizes attribute to give those large screens good images and take care of mobile. That's what it's for. So I think you can.

DAVE: Yeah. No, that's fair. It's a good audit of your site, I think, and it'll help you say, like, "Hey, you're using images that are too large." But don't assume what the user wants or make a good assumption.

I'm frustrated with the tools. I cannot give an unbiased ShopTalk Show opinion, Chris. I'm sorry. I'm sorry.

CHRIS: All right.

DAVE: I can't handle Google's totalitarian stronghold over our websites. Whoops.

CHRIS: Yeah.

DAVE: Next question.

CHRIS: Yeah. I really do want to know that. That scares me a little bit that the page speed score that you get is so tied to the regality of search rankings because if there are any mistakes in it, like, oh, my God.

DAVE: Yeah.

CHRIS: It just scares me. I feel like those two things should be not related that directly, but maybe they're not.

DAVE: I heard somewhere it's like 10% of your grade or something like that, and I may be wrong, but something in that measure.

CHRIS: Adam Green writes in, "I have a quick question regarding local development using MAMP, which I think even MAMP was later -- as old as MAMP is. There's WAMP too, which is the Windows version of the thing. It's basically a way to give you all the local dependencies for MySQL, Apache, and PHP.

DAVE: There's also MAMP. MAMP, the company MAMP, the MAMP MAMP. That's also available in Windows now and it's really good.

CHRIS: Oh, sweet. Gosh, what was I going to say about it? Testing something. Oh, and everybody has heard of LAMP, right? Which is the stack. It's just what your Web servers probably run, so whatever, which is Linux.

"I have a quick question regarding local development using MAMP and testing responsive sites on your local machine from other devices--phones, tablets, et cetera--in your local area network. How do you go about doing this? I tend to develop sites using WordPress or Perch, and typically they are set up in MAMP PRO as, like, I invent a domain name, like mylocalsite.dev or something. I would like to use those same URLs to access my site from my phone and tablet, and I guess this involves some kind of proxy server. I've tried Ghostlab from Vanamco, which is great, but it's really slow for some reason to serve the pages. Adobe Edge Inspect is also great, but I'm not a creative cloud subscriber, so the functionality is limited. Do you know of or use any other solutions?"

I think there are lots of solutions to this. Aren't they, Dave? Isn't there like some pretty easy command line tools that just make a little local area networky blasty thing?

DAVE: A local tunnel? Yeah, I'm using NGrok, which is really awesome. You just type NGrok. I use whatever the port is, 3,000 or NGrokhttp3000, and that spits up a custom URL. Boom. It's beautiful. It works on all devices, and I can tunnel through.

Another one that's cool, which might be good if you're using the .dev annotation is called Forward, fwd.wf.com. That's a weird one, but we use that from time-to-time, and you can pay $5 a month or something for a vanity URL. Totally worth it, and so you can have it be like DaveRupert.fwd.wf. It's pretty great. Forward: and that's just like you just forward the port, or you forward the site and it'll do it. I like that. I would recommend something like that.

I think you could probably set up browser sync to kind of do something, and then you get the full synching and scrolling and click synching. But I'm not sure how you do that exactly, so yeah. But NGrok is pretty great for tunneling, so I use it.

CHRIS: You're on a Mac. Codekit does it. Codekit spins up a little server. I use Codekit and MAMP at the same time. It knows. They know how to work together. You just point. Within Codekit, you can point the thing to the URL of what MAMP is hosting, and so you get a special, weird URL that Codekit makes for you. I don't know why mine is so weird, but I can't even say it because I think it's a URL that I use for something secret or whatever. It's a vanity domain-ish kind of thing.

It spins up a thing that, so on Mac there's this thing called Bonjour, which is like your local networking stuff that's built into OSX. The URL that you get through Codekit should work on any other device that's on the same local area network as you are.

DAVE: Mm-hmm.

CHRIS: If your phone is at home and you're using the same router or whatever, that URL will work on that device as well. That's exactly what you need, and it's just all built into Codekit, which is cool.

I downloaded it, like I was saying. Did I say it in this episode? Maybe it was the last one. I downloaded the new preview thing of the new MAMP, the one that's got all the new languages and Nginx and stuff built into it, which is cool.

DAVE: Oh, yeah?

CHRIS: And it's got some new thing too. It's called MAMP Viewer, and it's just a checkbox. You turn it on and give yourself a new alias. I think it's basically the same thing. It gives you a local area network hittable URL at a certain port. You just roll with it. That's built into that too, which is kind of cool. Yeah, there are a bunch of command line tools that's built into some software.

I've seen menu bar apps that do it. There are solutions galore for this kind of thing.

DAVE: Oh, yeah. Yeah. No, LAN access. That's interesting. Cool. That's very cool. Yeah. All right, well, hopefully we answered your question correctly. I think we did a pretty good job.

All right, Chris, have you got time for one more, maybe? Yeah, I think we can maybe do one more.

CHRIS: Absolutely. Let's see. What do we have?

DAVE: Okay.

CHRIS: Drew here, this one.

DAVE: Yeah, Drew Wyatt writes in, "I'm fairly new to Rails. I keep stumbling on a lot of other Web servers like Puma and Unicorn and was wondering if these were worth looking into. So far I have not encountered any problems with WEBrick. What are some reasons that would make one of these alternatives a good idea?"

CHRIS: Does Rails still ship with WEBrick or whatever? Is that the one?

DAVE: Rails 4 and below are WEBrick. Rails 5 has switched to Puma.

CHRIS: No kidding? Rails 5 isn't even shipped yet, or it shipped like last week or something.

DAVE: Yeah. It's like beta, beta 3 or something, or last week. Yeah. Puma is probably the new de facto. The cool thing about Puma is it's threaded, so it's multithreaded, so it can do multiple things at once. It's not just in and out, in and out, in and out. It's like you can handle multiple connections in Web Workers and all that. Puma is the future there.

CHRIS: Well, I'm glad you knew what you were talking about because I have no idea. My answer would have been more philosophical like why change if there's no problem, you know.

DAVE: No, that was actually my answer when we started, but then I was just like, oh, just use Puma. It's good. Any time you're threading or whatever, it can kind of go wrong, but it's good. My friends over at Heroku, which we host DayTrip on, they also recommended Puma. They were just like, "You'll get a little bit more performance and squeeze a little bit more out of it if you use that."

CHRIS: Yeah. The idea is concurrency, which is nice, but the idea is speed. Because concurrency, then speed.

DAVE: Yeah, if you think about it. I think there may even be more optimizations, and Puma may be more set up for HTTP2. H2, we'll call it. But if you think of it like a restaurant or something, it's like you have a door. Do you want one door or five doors on your restaurant to get people in and out? That's the easiest way to think about the threading.

CHRIS: I'm so biased for the design of sites. Go to the home page for Puma, which is Puma.io, and it's actually really nice. It has a really cool logo of, like, cool, overlapping colors and an actual puma that has that kind of like weird 3-D subtle shadow look to it. Then the website for Unicorn literally doesn't have any CSS at all. It's one of those websites that they didn't even ship any CSS. It's just browser default styles, so it depends.

I don't know. I just look at Puma, and I just have a different feeling. I'm like, oh, clearly they put some time and effort into this thing, and they explain it well. It just seems like a real project. I think other people could get that feeling from the Unicorn sites as well. I'm sure this appeals to a certain type of audience.

DAVE: A certain type of developer. Yeah, it's been a long time since I've thought about how the design of a site makes you feel, builds trust, and makes you like it.

CHRIS: Oh, my God. That's all I think about.

DAVE: You know that means maybe the Web isn't so dead after all.

CHRIS: That's why I've never tried TypeScript. Have you ever been to the TypeScript website? Sorry, TypeScript people. The page for TypeScript, oh, it's changed since I've looked at it days ago. It looks all nice now. Oh, just kidding. It used to look like garbage. Now it looks nice, so now I'm willing to try it. In fact, thanks, TypeScript website designer.

DAVE: Hey, no. Let's embrace this. You've got to take the time to make it look good.

All right, well, thank you, dear listener, who looks good driving that car. Looking good. All right, thank you for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up, tweet about it. That's how people find out about the show. While you're on the Twitter, follow us at ShopTalk Show. That's @ShopTalkShow, all one word, for tons of tweets a month about this podcast.

If you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because you're going to want a job in the future. Chris, have you got anything else you'd like to share?

CHRIS: I just really, I want to drive that home. You've got a job. I really feel like you're going to fulfill that job by posting it on the ShopTalk Show. I just have a good feeling about that.

Anyway, until next time, ShopTalkShow.com.