Michael’s on his way to HighEdWeb in Milwaukee, but before that, he and Aaron tackle three quick topics in this week’s episode. First up is an update on Domino’s attempt to push an web accessibility lawsuit up to the Supreme Court, then there’s a look at a website that builds itself and how that might impact how you think about your portfolio, then finally a review of some useful CSS hacks.
Domino’s Accessibility Lawsuit (4:18)
- Google adds live captions to Hangouts Meet for Android
- Supreme Court hands victory to blind man who sued Domino’s over site accessibility
- US Supreme Court won’t rule on how the ADA is applied to technology. What happens next?
The Self-Coding Website (28:47)
Useful CSS Hacks (48:31)
The following is a machine-generated transcript of this episode. It will contain errors until it has been reviewed and edited, and we apologize for the difficulty that may cause for screen readers. Do you want to help us speed up our transcribing process? Consider sponsoring an episode.
I don’t know what’s funny about that. So now you have to tell me What are you laughing at? him
I have been cracking up about this since like two days ago when I saw it. It’s it’s a shot of a sign. It says it’s supposed to say we’re not happy till you’re happy. The way the words are laid out and so it looks like it’s saying where you’re still not happy. So this screenshot of Captain America getting beaten up in an elevator by everyone from the civil war movie, and spaces where you’re not still not happy, like Captain America says. I don’t know why it’s so bloody dying or I
feel like Aaron is not on task today. Okay, Well, hello ladies and germs. This is episode number 47. That’s a really Paki wave and releasing anything they say that
it’s a little antiquated. It’s
like, isn’t it like a 1940s comedian, ladies and joins?
Yeah, I think it’s like a maybe even a vaudeville throwback.
Think I need to I need to actually put some effort into coming up with an intro. If I stayed on this path. Nothing, nothing good. Come on, folks. You’re listening to the drunken UX podcast. I’m your host, Michael Fienen.
I rather host Aaron Hill. Good morning. Good evening. Good night. Whatever time you’re listening to this show.
Good afternoon. Good evening and good night. That’s a Jim Carrey quote, quote. That’s right. Very true quote. Folks, this is episode number 47. We’re going to be coming at you with a Three shot of different topics tonight to go over everything from accessibility to CSS and some stuff in between. First and foremost, I want to make sure to give a shout out to our kind sponsors over at pork bun. If you check them out at pork bun.com you can get a free year of a dot design domain name if you use the coupon code drunken UX when you check out that’s very kind of lemon and very cool.
You know, it’s funny, I was walking around, and I saw a restaurant and had a sign in the window and advertised pork bun, but not this fine company but the actual food and yeah, but it immediately made me think of the company though.
Believe it or not, I think you know the reference might be though the same.
Probably should also connect with us. Like you can connect with pork one on Twitter and facebook.com slash truck and UX and the slack Connect thing works now so you can come find us on joining us.com slash slack and on the Instagram firstname.lastname@example.org slash drunken UX podcast
really proud of myself that I’ve gotten To start saying instinct Eagles
you know if I can get you to stage life I think we’re good yeah.
No No promises there. I’ve got myself a fancy fancy outside the box Irish Coffee. I figured this time to change things up just a little bit so and I like coffee
It’s same I’ve got clue in mind though.
Nice set a Hawaiian coffee does that.
Sure. Why not?
I think we can get away with calling it that. actually really like a kalua if you aren’t familiar. they you know they make different flavors. You can buy many different types of kalua. And okay, they have a mocha kalua up. That is so good with hot chocolate. I bet it it really just it because it doesn’t. Since it’s a mocha flavored it doesn’t really change the flavor of the hot chocolate that much but it definitely gives it like a bite. Yeah, nice. That’s a nice good Christmas drink.
I’ve done like hot chocolate grasshoppers before with hot chocolate and kinda cow come to mind. That’s pretty good.
Not much of a mint guy and
you could do without it and just do the come to Cal Unknown Speaker Say that again from the cow one more time please grab the cow that makes me feel good
yeah my one year or for Christmas speaking of that my my mom made my siblings and I like homemade kalua. I have the recipe it’s apparently not too hard to make yourself but it just takes time like a like a month of aging.
You can make your own scotch it just takes a few years of he so so this week, I went and rustled up some different topics just because I wanted to kind of change things up a little bit and and cover a lot of ground. The the first comes from a story That we have covered before, and has new information associated with it. And so I thought that would be a fun thing to go back and recover. But I didn’t wanna spend the whole episode doing it. So I bolted on two more topics. Yeah, the the subject in question is dominoes, the Supreme Court and the ADA. Yes. So, this has talked
about this a few episodes ago.
Yeah, it was two or three episodes ago. That’s why I say this is a very timely piece of information. As it turns out, they for a quick background for folks who aren’t familiar or haven’t caught up with us, this goes back to a 2016 lawsuit filed by Guillermo Robles. He basically said I’m trying to order pizza. I’m using the screen reader and I can’t use you. So he filed a lawsuit that as a place of public accommodation, Domino’s website was not accessible and therefore needed to be This, what made this super weird and kind of uncomfortable for everybody, especially web developers was that dominoes said? No, the ADA doesn’t say anything about websites or any digital access rights at all. And we think the Supreme Court should challenge this. Or should you answer this? Which put a lot of people I think in you know, up and understandably yet, it was a topic. Let me tell you.
Yeah, this was a we talked about a witch pilot episode 43 the woman Jeff Mattson
Yeah. Okay. Yeah. Yeah. I took the stance then and I still kind of take it that I don’t necessarily feel that Domino’s was wrong. That doesn’t mean that I think their motivation is good or that their you know, their actions are good. Just that their their legal precedent was operating from a place that was understandable because I don’t think that dominoes doesn’t believe in accessibility. I don’t think that’s a thing.
I have no reason to think that they do. And only like a very, very tiny reasons to think they don’t. And that’s because they challenges in court. However, I would agree with you overall,
I think the reason they challenged it in court was not because we don’t want to make accessible stuff like that. That’s a weird phrase to even say in any situation. I think they, they challenged it in the earth. They wanted to take it to the Supreme Court, because they simply wanted the bigger question to be answered. And nobody else was trying to make it. So I guess yeah, because they’re right. There, right. The ADA doesn’t specify any because it was you came out before accessible websites were even a thing we were talking about.
Yeah. I mean, it’s like the Digital Millennium Copyright Act, right like that was supposed to fix things with copyright that were problems that just didn’t exist. 15 years ago, but I think this feels a little bit like, Do you need a lot? To tell you not to, like, slap someone in the face? Like, you know, I mean, like, like, do you need legislation to tell you not to be an asshole or at least, to be a good steward of people who are trying to give you money?
But I think the the challenge with that metaphor comes back to slapping somebody in the face is illegal. And if I
walk up in salt, I mean, it’s battery I mean,
I don’t need a lot of told me not to do it because there’s a law against me doing it. And it’s if I did somebody could, you know, have me arrested or or sue me or whatever. And that that’s the problem dominoes saw and it’s something they they quoted during this process, which is that if you’re not aware, from 2017 to 2018, the number of Ada lawsuits against websites tripled in one year. Yeah. And so there’s this The, the, this broader question, this bigger problem is that Because it while making an accessible website is absolutely the ethically right thing to do. The lack of guidance and the lack of a clear legal standard and precedent auto creates a vague area for abuse because there is okay.
I would agree with that. I would say if Domino’s is saying, we want to do the right thing, but we also want to make sure that we’re doing the right thing that is considered satisfactory. And we don’t have enough guidelines for how to do that correctly. Please tell us, you know what we need to follow right, then I would I would be on board with that. I would say that’s acting in good faith
because they may satisfy Mr. Robles lawsuit. been, you know, as we all know, accessibility has a lot of ground to cover. And it’s not just about make your site useful to blind people. Right. You know, ordering a pizza can actually be a fairly complicated process when you get into multiple pizzas, with multiple toppings half on one half on the other. So you get into Cognitive accessibility things and how do you make sure people understand that? There’s a quote from the Denver channel that will include along with this that I think sums this up really well, it says In addition, dominoes argues that these types of lawsuits are becoming more common and unless the legal system helps clarify the rules, companies will get bogged down with so called drive by or surf by lawsuits. That’s a little cheesy, but
I you know, I didn’t connect that with web surfing. I didn’t read it. We thought of like an actual surfboard.
Not exactly what they were going for, in that instance. But
yes, that’s fair. That’s fair.
So the the underlying thing here I think is is worth the discussion because at the end of the day, I say I, I don’t think Domino’s is being as selfish as other people think they are. Although of course, you know, the optics of it aren’t fantastic, but I think it is reasonable to say that we are Absent some protections for businesses because it’s not just dominoes, that’s where you know this is becoming more common for smaller companies to and smaller businesses or small municipalities. This has happened we and we’ve covered this before I believe on. It wasn’t a drunken UX. It was a real time overview episode talking about city websites that were getting sued. And that’s sucks because if you’re a small town, you likely have not committed very much money and don’t have a lot of resources to get your your website up the standard. And Domino’s did the thing that a lot of places do, which is if you want to order a pizza, and you can’t use our thing, call the number. And the question of is that a reasonable accommodation at that point, you know, you’re providing there’s this whole like separate but equal kind of argument that comes into play with accessibility. And it’s it’s a tough thing to answer. If I recall the one of the things they brought up on episode 43 was that there are sometimes promos and deals that you can only get through the app or the website.
Oh yeah that you may not you might not have access to if you call so it is a it can be a different experience overall like convenience aside
that the reason I think this is an important topic and why I think it needs broader answers has to do actually very specifically with rebels lawsuit because his lawsuit alleges that not only was the dominoes website not accessible, but their app wasn’t accessible. Right? And yeah, an app isn’t the website right? And the standards that govern govern these things while you can strictly speaking apply something like week egg to an app you know, they are different in the eyes of the law for the most part and it’s it’s this idea of like and there’s a thing going around right now with the scooters, you know, municipalities having couple of the scooters are not like We’re trying to get them in. We’re literally going through this here in Pittsburgh right now. And so these cities are looking at laws for E scooters. When we went through this with segues in 10 years, we’re going to go through it with hover boards, like, Oh, wait, wait, do you know something I may have? I may know a little something. I asked that you don’t share that with all the people because all right, I had
to go through a lot of when you again get there. It’s just you and me here. You can tell me.
But that that’s the problem with you know, when we talk about accessibility, I think we have to start talking strictly about digital rights access. Sure, because it’s not about well, we’re technically an app or we’re technically a website. So you know, such and such regulation doesn’t apply just because that is the thing that happens, inevitably in law. Those are the distinctions that come out and people use them as a crowbar to avoid liability.
So okay, this is a brief tangent here, but I’m going to bring it back in. This is Oktoberfest, right?
Oh, it is.
It is. So you can submit pull request if you know Ruby and Rails and you want to get an easy one, shoot me a message. I know an app. But so I, I’ve been having some discussion with some of the other core members on my project and about how do we write issues? And what do we cover in pull request reviews. And what I’ve found is that the more specific you are in the issue, definition of what’s required and what the expectations are, then in the pull request your view when you’re reviewing it, you can, the scope is a lot tighter and then the expectation of what the person submitting is they have a better idea of what what you’re going to be wanting from them. And so in this case, we have dominoes and we have the court system and Domino’s is submitting a pull request where they want submit a pull request for changes to their website. app about how they want it to be different and more accessible, but they feel that the issue wasn’t really specific enough about what is required for that pull request. And so they’re wanting to get clarification from the maintainer of the legal repository. And that’s, that’s kind of what this feels like a little bit. I hope that’s kind of getting the benefit of the doubt. I’m good with that for now. We’ll see how they handle this after the decision.
But I’m a big fan of trying to not ascribe more sure badness to something that is strictly there and there is a you know, there have been comments from dominoes that kind of reinforce this idea that you know, they’re just trying to get answers because they’re they’re worried about they’re not thinking that I don’t know if it was the the Denver channel article or the CNBC article, but I think it was one of them had pointed out like dominoes isn’t thinking about this case, their journey about the cases to three years from now that haven’t been filed yet. And That makes perfect sense. That makes a ton of sense. ADH rolls, right? Yeah. And I want to
I want to clarify that I don’t mean people who have legitimate accessibility grievances, filing lawsuits. I mean, people who don’t actually who aren’t actually affected by it, but are just looking to sue a company. Yeah, that’s what I mean
a copyright troll or a patent troll like they’re exactly there are people who want to take advantage and there are people these this exists in the accessibility community to there are people who are perfectly legally blind button who make their living just doing nothing but going around filing lawsuits. And they aren’t doing it because they want the websites to get better. They’re doing it because it’s an easy payday. It’s just the case. There are always people who will try to leverage and try to take advantage of stuff and that’s, that’s just the nature of the beast and we deal with that, but I think we can protect against it too. There’s some interesting solutions I was thinking about. Like what the The future of this kind of looks like and I, personally have a very jaded view of things like chatbots. I don’t like them. I think they’re stupid. I think they are a bad answer to the wrong question. I’ve never seen a chat bot implemented in something that couldn’t be solved a better another way. Let me put it that way. But that being said, this feels like the one area where like, let’s say you open up the, the app, the dominoes app, and dominoes knows, like the way their app is set up. There’s no good way to make it accessible to a blind person, let’s say but maybe at the top of it when the the phone screen reader hits it, it can say, you know, art, do you want to order a pizza and you can say yes, and it drops you it pipelines you into a different workflow that still gives you access. So you can say, tell me that the And it’ll read off the deals to you. I would like to order, you know, a medium pizza. Okay, what do you want on it? That’s where we get into, you know, chat bots in this natural language processing stuff that could actually be the ultimate solution to these kinds of problems.
You know, it’s funny that the weird like, I’m imagining what you’re saying that would be pretty awesome. It reminds me of you remember the old like command line based menus, like for a BBs or like an old text based game? Yeah. When it would be presented the question and then you have numbered options, and then you just have hit the number kind of like what they eventually that became like, you know, phone menus when you call it automated.
It kind of is. Yeah,
yeah. But something something like that. But it’s, I don’t know it. It feels a little bit like that. But I think that work.
Yeah, I think it absolutely could. And I think the technology itself is getting there quickly. I don’t know that it’s perfect. I also don’t know That it’s a appreciably different from just calling the organization and question and talking to somebody except that a chatbot can handle volume where, you know, technology scales people don’t that kind of thing. Like, as somebody on a phone can only talk to one other person at a time a chatbot can talk to 1000 people at a time. Right, right. And it gets us into bigger questions about you know, voice API’s and voice user interfaces. That’s been a big topic as we get more into all of this you know, Siri and Alexa and google assistant and these tools of course, you know, the voice UI and and discovery within those you eyes. It’s like, knowing what I can ask Alexa, like a lot of Alexis. usefulness comes from guessing. Yeah, what what can I ask it to do today? And you know, you can go into the app and look, of course, but if you don’t have that in front of you, you don’t have it.
You know, it’s funny, I haven’t used I mean, I have used Alexa, but I haven’t used it much. And but I have used Google Assistant in my car. Like, I’ve put my phone into my car, and it does Android Auto. And the first time I used it, it was I was just like, I wonder if I can say this. And it was like, play this song by this artist on Spotify or something. And it did it. And it was like, Whoa,
there, they’re generally pretty good. And I say that’s why I say it’s good. It’s getting better. I think the best solutions are still though. Elite, so to speak, you know, they’re, they’re very much out of reach of your common web developer. So in this case, have you do you use Google Hangouts for much I know you work remotely?
Um, yes, we use it at work. We use slack calls like video, the video calls pretty decent now. And but we also use hangouts to
have you noticed that hangouts has a new feature with captioning
Yes, it’s actually really good. It’s Unknown Speaker a I was really impressed.
It’s the it doesn’t always keep pace with the things you’re saying.
But neither does it live captioning.
But I but the accuracy of what it’s what it’s capturing is pretty good though it like I will say that
I was really impressed with it. So if you don’t know what we’re talking about back in September, hangouts released live captioning. This has been coming for a long time, if you paid any attention to all the work that Google’s been doing in speech to text. So they’ve bolted it on the Hangouts when you’re in at least business Hangouts, like an Apps Hangout, not a personal Hangout. I don’t know maybe personal hangout has it now too. But in at least business Hangouts, there is a closed caption button. And if you hit it is live transcribing what is being said, and it’s also like it it does things like take contextual clues. So if it thinks a word is one thing, but then It gets a few words after that they clearly means that word is another one. It edits it live in space for you and everything. It’s very cool. Yeah. And they’ve done, you know, for where we’re at in terms of natural language processing, and voice recognition. The quality is, is great. And I think that those are the kinds of things where the future of accessibility is going to lie, not necessarily just in how do I make the thing on the screen accessible, but how can I even provide different tools that elevate the accessibility? Sure, but that tool is it’s a Google tool. It’s not an open tool. It’s not something you can just go pick up and throw into a slack call or something like that right yet. It will get there like all technology it will get there. But I do think we’re still a long way from that unfortunately.
It’d be funny if the if the NLP tool on this hypothetical dominoes Like accessibility and or was good enough that everyone started using it. No one is the interface.
Yeah, I mean, but again, isn’t is that not the mantra of everything we say good accessibility is good use of it.
How cool would it would be pretty cool to like be driving home and like, hit the hit the button on or tell your Google Assistant, whatever to open up the app and order a pizza. And then Google Assistant could then seamlessly interface with this, like, natural language processing thing on the app. Oh, man like this is there’s a lot of possibilities here.
The lesson is very simple, though. I think we’re gonna have to update the ADA. Yeah, I think can. So what the what SCOTUS did, they said we’re not gonna hear the case, the Ninth Circuit ruling stays, and that’s the way that is force that only affects the Ninth Circuit because that’s the way it works. But I think sooner or later, because of this sort of diversity in digital platforms. We’re no longer we don’t want to talk about Just websites or just web applications, we’re talking about native applications, we’re talking about mobile interfaces, we’re talking about all of these different things. And I think something’s going to have to give that says, you know, any digital platform with a, you know, non physical interface has to maintain reasonable accommodation as a tool of public accommodation. By that’s, that’s the phrase right that the ADA uses place of public accommodation. And it was always applied in the manner to say, what they do like and this is how it was rationalized with target and dominoes, which is your app while the app itself is not a physical place, it is part of your public accommodation for your physical look to interface with your physical location. So I think this is where I kind of a turning point here where the it’s like that whole thing when everyone everyone thought the internet was Ad like in the web was just going to die off or whatever. Yes. So
I feel like this is kind of reaffirming, like, okay, the internet’s not a fad. It’s a thing. We all kind of depend on it. You saw a lot of arguments when I’m with the re titling broadband as a title to or sorry, class to telecommunications device. Yeah. Unknown Speaker platform. common carrier.
Yes. Yeah. So like how Israel to access isn’t really just like, a luxury or entertainment item anymore. It’s like a necessary thing that we all need. And I think that we’re seeing some of that dovetailing with the accessibility things to
just it goes to show it’s worth your time and effort as a developer, as a designer to make sure you’re thinking about this stuff. Go learn basic accessibility, go spend some time understanding why you can get a used to be one of the bigger problems was access, no pun intended. For developers to screen readers, because tools like Jaws, you know, they were expensive and they weren’t something you could just go install.
Google Chrome has one
the screen in today, we’ve got screen readers now that are just available as browser plugins. You can start up your phone, your phone has a screen reader built into it, whether it’s iOS or Android, go spend those things up and spend some time using them a little bit to understand cuz that’s, that is one of the biggest hurdles as a developer is putting yourself in that seat. And so learning those tools, getting a feel for how they see your site so that you can get an idea of how your user sees your site can be very educational and then take the time you know, ask somebody if you need to whatever go on Twitter and and ask the question target accessibility. There are a lot of people out there willing to answer those questions and help you understand, you know, how you do a modal accessibly, how you know, you know which tags Do you need to include Which tags are inferred, you know, Aria label Aria roll, those things are useful. But there’s a lot of default so you don’t have to put our payroll on everything. Yeah. So take your time learn some of that start getting your feet wet. And just get the
the Andy tool and di Andy. Yes from think it’s one of those social security. Yes, they made it. The free tool you just put in your browser bar. It’s a little bookmark wit and you on any page at all. You just hit the button and then it runs that accessibility audit on the page. It’s really it’s really good.
This is just a side Have you ever sat down with somebody who was blind and watch them use a website? Not in person, but over a screen over a video call? Yeah, that the speed with which they listen to screen readers so fast. Oh my god. I have let me tell you, but when I actually watched somebody blind use a website with a screen reader. I was not prepared for how quickly that stuff but it really does show like, some of those bad when we say things like don’t use text like read more, or suddenly click here and everybody’s like Yeah, but how bad is that really? When you start hearing it in those contexts it’s like a quick a quick quick quick yeah it you real quickly learn to understand and respect some of those some of those usability issues. Okay, so that’s that’s dominoes. Let us know what you think what your stances where you’d like to see addition, subtraction is made to the ADA to accommodate this. I at this point, I think the debate is over. I think the discussion is over, you know, with SCOTUS saying we’re not going to hear it. That’s kind of it. So yeah, I’ll be interested to see what changes dominoes makes. We know it was a Was it $34,000 I believe was the number that it was going to cost them so to speak to Congrats, Chad super cheap, but that doesn’t mean it’s easy.
I don’t have $34,000 Just drop on something like that. But I mean, I’ve seen the bills that we’ve gotten from contractors that previous employers, like design work and things of $34,000 is nothing.
I’ll see what you know what the outcome of that is. Because it could happen very quickly now that you know, there’s nowhere else to appeal or do anything. So now they just have to do the work. Let’s see. Let’s see. Something. This is just cool. I don’t know. I yeah, I liked it. I thought it was neat. I thought it was a very clever website. It’s strml.net. It’s Samuel Reed’s website. It’s Samuel T. I can’t remember his middle name was RS read. And then ML, I’m guessing is Markup Language machine learning? I don’t know.
Maybe lucky. MML
stands for something for him. Samuel is the CTO of bit Max, which is I believe a like a Bitcoin crypto company. Okay. This is his, like personal sort of portfolio website. So struggle.net The reason this caught my eye is because it was listed as a self coating website.
Remember, remember tailwind CSS, we covered a few episodes back, they had a demo on the page where they showed like, like a container that had content like a bio and contact info. And then it was like this animation of CSS being written and applied. And as a CSS was written, it was applied to the container in real time with transitions and everything. And it It reminded me of that, but like, way, way, way, way, way cooler.
The coolest part. I think one of the coolest parts was when, like, so a couple things would just blip onto the page like one after another, and then he does for CSS he does like Star bracket, transition colon, one second bracket and then I was like, that’s a weird thing at the comments even so I was like, this will make sense in a minute. And then he’s like doing other things. And as he’s doing them, like, the page is like slowly morphing into these different shapes and stuff. And I was like, Oh,
yeah. So it gives you kind of an idea of what’s happening that the as the code screen, so what happens is on the right hand side of the screen, he ends up with what amounts to a text box with all the CSS in it, as it’s coming in. The way he is talking, quote, unquote, to the user is through code comments. So they’re all these code comments filling in between, so I’m just looking right now. Okay, we’re going to start filling up the screen. Let’s get ready to do some work. And then he says, Okay, here’s how this text will be styled. This is good, but all the text is white. Let’s make it even more readable. And so then he sets up all of these classes for different types of texts and gives them different colors. So a comment he’s like to code comments are font style metallic, and our color at g7 f6 be, which is kind of a brown, gray. And then colors for selectors and keys and values. So, it you know, you what you end up with is like a syntax highlighting basically, over the CSS on the right hand panel resembles sublime. Yeah, yeah. Yeah. Just to make it easy to read. But all of these code comments are kind of helping you along as you’re watching it happen. So you can kind of see what’s, what’s happening, why he’s doing it. Very, very clever, very fancy way of kind of approaching this. I think what I like about it is, if it’s if you’re learning some of this stuff, still, it’s a very interesting way of learning what causes things to happen.
yes. So for instance, and you brought it up air and one of the first things he does is set up a CSS transition. Why does he do that? Because it allows the church Changes to transitions any any kind of transition to an element is like a micro interaction. And so it’s it’s telling the user that something is happening that you should pay attention to, as opposed to just changing immediately. In this case, a one second transition gives your eyes a chance to recent or their focus and look at the thing that’s being affected. Yeah, if it just changed, you would have your eyes would jump around the screen and things are changing quickly enough, in some cases that you wouldn’t necessarily be able to keep up without those transitions. So yeah, it’s very clever. Very, you know, and it gives you an idea to how to CSS transitions work that kind of explains it.
It reminds me of code pen. Like when you see someone like giving giving a code pen as a demo, you can you can kind of look under the hood and see how the different parts work. Were like when you watch like a time lapse of someone doing a drawing Like the same kind of thing?
Yeah, yeah. And like so the equivalent of that would be like transforms. He’s using transforms on the page, which let you do things like move elements around the page, rotate them, flip them, there’s a lot of different transform commands you can give. In this particular case, I found it interesting, because he’s moving these boxes around the page. And he’s like, well, we’re going to move the code box over to the right. And he’s not doing it with absolute positioning. He’s not doing it with floats. He does it all with transforms. Right. And so it’s an interesting way to learn a, you know, a new way to go about positioning because positioning is like the holy grail of CSS for the most part. Sure, whether that’s float CSS table, CSS Grid, you know, the way we approach positioning things on a page has always been sort of that ultimate challenge from a responsive standpoint and design standpoint. So I’ll be straight up honest. I never We’re thought about using transforms as the way of putting something somewhere.
Did you watch it all the way to the very, very, very Yes. Did you see how he lets you, like change the styles by editing the style sheet? Yes. I didn’t notice that the first time. I haven’t played with it at all. But it’s really cool. So
Oh, yes yet no.
Okay, so you know, it’s, that’s another one that’s just a good way to kind of get exposure to something that you may not have seen in use before. It also can be confusing even though it’s a pretty simple, you know, 100% type scale proportion thing. Transitioning from normal percentages, or Rams or AMS or anything like that, or FRSF. Ours is one of the new units. Those all are much easier to learn when you see them in practice. I think so it’s, I was a big fan and I think the reason that stands out to me as we talk a lot about you know, how you get a job, how you interview and things like that. I’m always telling people portfolio portfolio portfolio, we talked about it in the last episode with with Megan Alicia Talking about how important the portfolios you make out of a boot camp or to helping you get a job. And developers sometimes have, I think, a problem understanding, how do you make a portfolio with code? And this is like, I think one of the best ways possible for a developer to make a portfolio because you were literally showing off your coding skill on your website and doing it not through a read what I made its watch how what I made does things. Yeah, you could add all kinds of stuff into a project like this, whether that’s, let’s say you’re an info graphics designer. That’s like a whole sub specialty unto itself. And it’s incredibly complex. Right? I don’t know. Have you ever done any work with d3 or the charts API
or I looked at it briefly once when we were exploring some database stuff. I think Not a lot. Oh my gosh, really? I mean, I’ve seen the demos, and I’ve seen the kinds of things that you can do with it. And it’s kind of mind blowing. Yeah, no,
it is Dance, Dance Dance. We’ve used it for several projects now. And every time we go into it, we’re kind of like, how are we going to make this happened. And we always figure it out. But it definitely is one of those things that like, if you are a specialty and date of his throw a page up, that puts up a basic bar graph, and then have it live change to you know, a line graph to a you know, dual access or I don’t know all the words for some of these up because I’m not a designer, but you know, the little floating bubble chart or, you know, right, convert the data into a geo map, weighted type of deal. There’s all of these things you can do. And showing that off and and, you know, throw hover states into it, throw accessibility features into it. One way we did it, we, you know, we embed a table and the table is used to generate the date of is, so show how you start with just a table, you know, normal HTML table of information, and then you hide it and you’re like, Okay, we’ve hidden that now we’re going to show you the chart and throw that up there. There’s, there’s all these ways I’m excited about this. Because I think like, if somebody brought me this if they were interviewing for like a junior dev role or something with me, and they wanted to show me what their skills were, what they’ve done in a boot camp or something like that, and they said, hey, look at this and showed me a site like Sam’s man, I would be super excited and super stoked about it because I Oh, total. I think this is it. It’s clever. It’s demonstrative. It shows you care about what you’re making.
It’s entertaining. It’s Yeah,
You don’t know what’s going to happen. It’s like, oh, what’s next? Where’s it going to put this?
So years ago, I think this would have been right 2004 I was learning Ajax I got the book from a presses like beginning Ajax in PHP. And this was I think jQuery existed and had Ajax stuff in it, but it wasn’t nearly as YB us as it is now. So I learned how to make like an XH XML HTTP request manually. Yeah, the whole thing. And so the project I made to sort of like, test it out, but also show that I can do it was remember Mad Libs. Yeah. Yeah. So I took, I started with an actual Madlib. And then I just, you know, each of the spots that had a blank, it was a link, and then you would click on the link, and then it would go and fetch a random word from the server that was that part of speech, and then dump it into that spot. And then there was also another button that you could click that would just fill in all of them with random words. And it was actually pretty entertaining. And then I did the same thing with some like, public domain stuff, like I took Shakespeare’s Hamlet. And I randomly swapped out some of the words with blanks, and it could pull from the same word base, because it was, you know, parts of speech or parts of speech, right? Anyways, it was It was fun. And it was, I think entertaining. My English professor liked it. And I got to like, show that I could actually like active act on a technology that I had learned. So
it’s, you know, I think it goes to show, right that we, the medium we work in is interactive. And if you’re building interactive things, why are we approaching portfolios as a link to my GitHub repo, you know, or a list of my projects. And here’s my LinkedIn profile like that we have so many better ways to show Hey, I’m a developer, I build cool things. Here’s how you can see what my skills are. I’m just yeah, I’m just really excited, I think by this idea, and it’s it’s even got me thinking about how do I showcase my work? You know, I think I have a personal website, but it’s, I have literally not written a post for almost a year. And most of the stuff that’s on it is personal. It’s not like work related. I’ve got I’ve got a dev domain, I’ve got my Fienen Dev. So what better way to utilize exit that’s like the end not to glad hand to the sponsors too much. But you know, like design I’ve said before, adopt design domain name is the perfect way if you are a UI, UX person and the front end design or even a product design or something like that, that’s a great type of domain to grab and set up your portfolio on. And dev is sort of the same thing. If you’re somebody who does any kind of coding. I’ve been using it for, like literally somewhere to put work like I’ve been using as a development domain. But I could also use the front page at the very least if you go to Fienen dot Dev, I should give you something that shows you know my work If I ever needed said that just like job hunting, because I’m not doing that, but maybe I’m going to try to be a speaker at an event and they want to know that I know what I’m talking about, because I’ve not, you know, not submitted to them before I can send them that and they can see the quality of my work to know that I know how to talk about the things I’m building. So it’s got me thinking, and when something gets me thinking like that, I find it, you know, very exciting.
I think so, to put a point on what you’re saying, If everyone is giving out, you know, GitHub repositories and LinkedIn profiles and things, they’re showing, like, this is the code I can make, which is I mean, useful. Like it’s, it’s useful to look at that and you should share those things. But I think that something that Sam does here and that you’re touching on also is show like, what is the finished product look like when people interact with it and feel like you’re the little bit of excitement of seeing the finished product and see that it works. And so you can get a there’s lots of free opportunities out there, like you can get Roku for deployment or a bunch of different kinds of stuff, new rails and probably react anything with you can be both
Roku supports quite a few things.
Yeah, there’s, if you, if you would have a little more control over it, you know, just five bucks a month can get you a really low bandwidth. So for instance, on like Digital Ocean or another host, if it’s a good investment, especially if you’re looking for work or want to maintain a professional presence online,
How about we just do like an open call to like anyone who has a portfolio site that they’d like to share we can put it in like the this post. Yeah, for this particular
one of these days wants to do an episode like it I don’t know if you know who Jared Polin is. Pro knows photo.com he’s a photographer that I follow. He, he’ll do like he’ll actually do portfolio reviews on YouTube videos for people. That might be an interesting Future show topic maybe if somebody wants to send us a picture. Oh, yeah, so the last thing and it’s on it’s similar vein kind of, I guess. There was an article over at dev to I don’t know what the name of that site is actually, it’s just a dev to I guess that’s all it really is. dev.to to that, yeah. Yeah. Not to Yeah, it’s a developer blogging community think medium, but for developers and without all the crap that medium does.
You know, for the longest time I thought dev two was just a domain that was proxy medium, you know, like a lot of domains will get Yeah, I thought that’s what it was. I didn’t realize it
you know, what, and what it’s always made me think of is it’s kind of like a the Reddit of are not read it the Craigslist of blogging, like their, their design and approach to layout and everything has a very, almost brutalist kind of feel to it. It’s not pretty like it’s my are a website designed to look super nice? It’s a website designed to let you post articles. And that’s it.
just yeah, it’s just one of those funny things when you see, because when you see it, it’s like, this is not the best looking website. I
think that there’s I think there’s a lot of value in just like clearly and, you know, very simply communicating content so that the content can take center stage. And the design is to sort of, you know, just sits there and does it.
Absolutely. Yeah. And it’s for them, it’s effective. I’m not saying that like as a criticism, it, it works for what they’re doing. that’s neither here nor there. The article is my favorite CSS hack. This is this is another one that maybe one day might warrant a bigger overall discussion as to like, maybe some specific a lot of specific hacks, but I wanted to talk about a couple and I wanted to talk about the one in this article. That’s very clever. I’ve used it before. It’s, it’s a very neat way of doing something that you know, you can do in things like inspector and tools and stuff like that. But you know what it is, you see it that it’s the first thing in the article. It’s star, background color, and then color with opacity applied, then it’s star star with a slightly different color than its star, star star, slightly different color, star, star, star star, slightly different color all the way down to like 10 levels deep, or nine levels deep or something like that. The idea behind it is you throw this in your style sheet, and what it does is that I’ve done a modified version of this and the way I modify it is I also have a border applied within but the background color works basically just as fine as well. But when you throw it in your style sheet, it highlights everything on the page that’s you know, that are block level in line, whatever. But it lets you basically see every element on the page and how it is aligning with everything on the page. And since the colors use opacity, it allows you to look like if it was all red, it wouldn’t do any good. But this lets things layer such that you can get contrast between them and see, you know, pretty deeply and keeping in mind that like it, even if you have 30 levels of stuff, this still works because the capacity still stacks and it’ll just, you know, default to the last selector basically over and over and it’ll keep getting darker.
I’d love to see like a really cool color gradient, like, you know, it’s like a flame gradient or something. We’re just, I don’t know this, I love seeing cool stuff done with color and this, but there’s some cool things you could do it and
it’s, it’s just a very clever kind of approach to you know, debugging layout basically, in that. You can see where overflows Are you can see where your margins and padding are, you know, misaligned, what I really like is and one thing that I’ve had a problem with this i’m sure other people have too, is with not consistently using padding and margin, using margin in some places padding and other places to effectively produce the same spacing. But it doesn’t produce the same behavior because the margin and a pad are two different things. And just for the sake of consistency and behavior, that can get kind of wonky. And so this lets you see that very easily as a result. The example they use this time, so they’ve got a screenshot of what this looks like, applied to the time website. Oh, Time Magazine,
not time the measurement of passage of
Yeah, we’ve I’ve been to the future. I’ve already explained this. I have the technology.
This is Fotolia
that’s an inside joke. Nobody gets to actually hear this. Sorry. I’m glad he’s enjoying it because it was the most clever thing I’ll say all day. Actually, as I’m scrolling, I’ve got the article up in front of me and I just happened to hit the comments. And I see down in the comments, somebody actually did the thing that I had said, which is they apply a border, and they screenshot it with with borders applied. But you can do this that the thing about this and what makes it so neat is that the basic hack just uses the star selector. And so if you’ve played with CSS, you probably know the star selector matches anything. It’s a wild card. You can of course, change this such that it matches all your Dibs all your paragraphs, all your sections. You could do it such that, you know, it’s section star, David Starr so that children of different elements get different colors, and Things like that. So that if you wanted to really sort of, you know, supercharge the way that you look at your layout, you can do that. Now I mentioned in the debug Inspector, the dev tools in the browser, you know, they have ways of doing this. Firefox, I believe is the one like they’ve got actually a really great block level visualize or have a page I forget where exactly is in the dev tools off hand. But it does, basically, they can just hover over Yeah, you can hover, which is fine for looking at individual things, but sometimes you want to see how it fits the overall, you know, the overall scheme.
I think if you’re going to the colors, the colors are super useful, but it can like add cognitive load, if you have to remember Oh, I did purple for first level and orange for second level and blue for third level. Instead, if you do a series of colors, like if you did a rainbow or like a color progression or something that progressed. You know, you could do like cool too. or something like that, it will make a lot more sense. When you just look at the page, you’ll Intuit like, Oh, this is a very deep element because it’s a cold color. And this element is very near to me because it’s warm. But and the nice thing about the approach that’s in this article is, if you utilize opacity, you can do exactly that.
So it just said everything to the same color and same opacity. Because as things layer, that Opacity is going to stack. And it’s going to make the color darker as you get deeper into the DOM. Yeah, so in this case, they’re they’re using RGA. And so the example is basically it starts off with 255 00 point two, then it’s zero to 55 0.2. Then it’s 00 to 55.2. So they’re cycling You know, they’re turning red on and off, green on and off, blue on and off, or, yeah blue, and then they started with like 255 zero to 55. This is a very simple, straightforward way. If you just wanted to say, well, we’ll just do it all, you know with red and just due to VH 500. Point two, as those elements layer, the Opacity is going to make that red darker and darker the deeper you get. So there that that’s the easiest solution they’re using the color change as a means of showing depth. As opposed to using color darkness basically is kind of what that amounts to. Darkness does still factor in because it is still layered in the distal 20% opacity. But the the idea is definitely there. Right? We use a lot of other CSS hacks. In a, as always, I would love to hear which ones you use. I think a big part of this is over time, a lot of us start to create our own libraries. And I used to run an Evernote Doc, I just always kept all these little code snippets in that I used a lot. Some of them were for debugging. Some of them were to accomplish tasks. We used to do this a lot with clear fix. Clear fix was one of these hacks, sort of that We always used to make sure that elements would properly clear floated elements as a rapper. Yeah, resets and normalization, you still see fairly common to include like a reset CSS or something or a normalization, CSS before customs so that, in theory, you’re making every browser look the same. That counts as a hack in my book. I like seeing stuff using attributes. This is something we’ve we talked about in the CSS episode here, few episodes back about using the attribute function and CSS to layer content, CSS content and stuff. And it’s also an interesting way. Like, let’s say you’re trying to debug a page, and you’re trying to see where all your links are. You can use the attribute function to grab the HF and stick it in after and a tag as CSS content.
Remember that being a accessibility tool? Yeah. Like, like, when you do it for a print layout, you have the link, and then you have it immediately to a content attribute, content style attribute to show the link after the thing, although that is problematic when you have super, super long links with tracking data than it. Oh,
yeah, definitely. Yeah. But it still works relatively well. That you used to see it a lot in production. People would use things like that, or custom selectors sometimes to do things afterwards, like, you know, a little PDF icon or in a way like Wikipedia uses the little away icon for outbound links.
I was just thinking about that. Yeah, there was a we did that when I was at IU, we would do. We had that the Wikipedia icon, when it would take you when it would open in another window, or take you to a different page outside of the area you’re in and then we use the globe icon when it would take you to a different site. Yeah. And then a PDF icon when it was a PDF,
I’m a big fan of that. Personally, I think it adds context without impacting. Definitely out and things like that. But attribute can be incredibly useful for adding context in space, whether you for users as well, but especially when you’re debugging something or trying to figure out, you know, for instance, if you’ve got a web app that has links in it, and the links themselves are triggers to do things, and let’s say it changes or the value of the HF changes or something like that. You can use that as a means of showing those kinds of changes. One of the other ones that I found recently, I didn’t know this was another one of those things. Like I didn’t know this existed until I started playing with it. Counter counter CSS counters. I don’t know that one. Yeah, exactly. Right. I don’t think it’s a I don’t think it’s incredibly well known. It’s it is a triad of a trip. counter counter reset and counter increment. And the way that I’ve, the way that I was applying it was to style an ordered list. I wanted to apply a customized number to the start of an ordered list. And that was the solution that I found. But it’s neat because it lets you set up custom increments basically, on different selectors and different elements. And you can print that out to the page, which is fantastic for things like trying to visualize, like an outline, like a document, outline, a table of contents, things like that. You can you can use that as a means of, you know, saying this is chapter one, chapter two, chapter three, and do that programmatically and do it and CSS.
So it’s like whatever would be seen for like to try Yeah, it’s that
So if their content editor so that
every time your content editor, adds a link to the page, it shows them this is the 43rd link you’ve put on this page, you know, and then you know, they can the Was this too many links? Because it probably is.
Or you could I bet you could do something where you find every image recount how many images don’t have alt text. I bet you could you could probably match that actually. attribute. Yeah, alt attribute is empty. Yeah, us,
you know, yet alt empty, or is it empty? Or is it not? I forget which one would be appropriate there. I think MV is what you I
guess. The gotcha there is a sometimes you do want to have an empty old shirts decorative,
but it’s a starting place. If you have to be careful with empty because I can’t remember if MD applies to the value or applies to the the inner text of the node. Like there was there was a hack a while back for CSS that involved if you needed, like the layout Dibs or something like that for something you could use empty as a means of styling it and you could affect it by doing things like putting a code comment in like an HTML comment into it. And that would break the empty state of it. Even though there’s visually no inner text, the note itself wasn’t empty or the other way around, I forget the exact way that was being utilized. But I know that that all factored in. That’s why I just say like, empty is kind of one of those weird ones. But there are always ways of, yeah, figuring this kind of stuff out.
This is this isn’t really a CSS hack per se, because that’s the intended use of this thing. But it’s something that I don’t see often enough. And that’s, I see a lot of sites that don’t have print CSS files. It’s the when you have your list of style sheets that you’re including you make a very, very last one that has specifically has the attribute media equals print. And then you have this style sheet override any styles necessary to like hide or reformat anything on the page. That would make it print friendly. And then when you go in your browser When you go to print the page, it will incorporate that style sheet but only when you’re writing. It will ignore it. Otherwise, it’s it’s is totally I mean, it’s not a hack that gets, this is the thing you’re supposed to do, but I just don’t see it very often. And it’s so easy. You know what
it actually is kind of a hack for and this is going to take us, you’ve done a good job bringing us full circle. From an accessibility standpoint, a print style sheet can be a good way of getting a feel for how a screen reader sees your site. Oh, yeah, actually, it makes not exactly necessarily, but it you can use it in such a way as to show like what a linear eyes version of your page looks like. That’s oftentimes when you do a print style sheet, you’ll do things like you know, hide the sidebar, or throw it out or move it or something so that it’s not taking I will
say this is straight go up into the DOM Inspector, my browser, and I will just like aggressively delete every little like container and add and everything else. So it’s just The content I want if you don’t have a print style sheet, because I’m not wasting paper and I don’t want your damn ads. Unknown Speaker I just want the rest how you really want to learn.
If you’ve got your own CSS hacks, or just snippets tools that you like, let us know if you’ve got a little library that you’ve built that you are that you find really useful or that you go back to a lot. We’d love to see it. Shoot us a message, a tweet, drops line at the website, let us know. For now we’re going to take a quick break and come back and we’ll talk about other stuff. This episode of the drunken UX podcast is brought to you by something really cool. It’s an alternative to.com it’s the dot design domain name. I’m a big fan of interesting unique website names. So if you’re a designer and you thought of the perfect name for your website, and it isn’t available under.com check out dot design. Chances are the domain name you want is waiting for you. Head to Portland calm and use the coupon code drunken UX on the checkout page to get a free dot design domain name for your website. Face it, there are no good comms left years down the road. We’re going to care about cool, nice URLs that are relevant to the website you’re going to. And the fact that there’s so many to these to choose from, you really can get a domain name that’s right for you and right for your business. Design is a great one. Visit Portland. com now and use the coupon code drunken UX at checkout and literally get a year of a dot design domain name for free. It’s bundled with free email hosting who has privacy and SSL certs. That’s a lot for nothing. Forget dot coms design is widely used. There’s Airbnb design, Facebook dot design, Uber design, Adobe design, and so many more. Google doesn’t care. It functions the same way as a.com or.org. It’s just more interesting. It’s better branding. It looks great on resumes or business cards and it looks awesome. on email addresses, design reflects what you do as a designer. Did we mention it’s free and includes a year of email hosting who has privacy, and SSL certs and all of that stuff? Just go to Portman calm and use coupon code drunken UX at checkout.
Welcome back. I wanted to plug one more time. This is the glorious month of October fest.
Get my shirt get us here. Damn it. I forgot last year I’ve got
I’ve got two so far. And this year, it is like 80s like synth wave. Hot Pink cop blue. That kind of thing. Awesome. I’m super stoked to get it. If you’re interested in doing this, you just go to October fest spelled just like it sounds delicious, calm and there’s a sign up link. You can sign up anytime this month, even like October 31 at 11pm although it’s going to be hard to get five hours in in an hour and then You just submit five pull requests, like submit widget for request to any public repositories on GitHub. And that’s it. And then they will track your progress on that site that I just mentioned. And when you get all five in, in a month or two, you’ll get a cool t shirt and a sticker
will have a link in the show notes to it too. So you don’t have to remember all that or just google Oktoberfest.
We’ve been This is perhaps a topic for a different time, but we’ve been doing aggressively making issues and things and doing peer reviews for our Decker based project. We’ve had 11 brand new contributors to our project since the beginning of the month alone. It’s pretty great.
And if you’re out and about in Milwaukee, this coming week, actually right now, literally as you’re listening to this, because of the release timing of everything. I’m going to be up at high end web up in Milwaukee. I’ll be there. from today’s release until Wednesday, and so if you see me out and about Feel free to stop me, grab me. I’ll have some giveaways will be doing a couple little prize giveaways during the conference and I’ll have some stickers and posters and stuff. Maybe I may run out quickly. I don’t know. But it
that’s where the beers cold and the people
I wouldn’t know the ladder, but I’m sure the former is probably through. I don’t think they smile upon randomly checking people’s temperatures without consent.
Oh, I mean, like, like, Oh,
yeah, I mean, that’s probably true.
Yeah. Yeah. I mean, I assume they’re all 98.6
great conference. There’s a ton of material, check out the HE web 19 hashtag on Twitter. There’ll be a ton of stuff getting shared. While this is all going on, I assure you. In fact, today is technically the first day of sessions that runs Monday through Wednesday. There was some stuff on Sunday, but those are more like workshops. But check that out. If you see me feel free to give me a yell. Be on the lookout on our Twitter feed. Facebook, Instagram, those are twitter.com, slash drunken UX facebook.com, slash drunken UX instagram.com slash jumping UX podcast. I’ll be, I’ll be sharing out some stuff about how to win some of the giveaways if you’re up there. So that will be something to keep your eyes peeled for. If you want to chat with us while you’re there or not, it doesn’t matter. You can go to drunken UX comm slash slack and join us there and share anything share us, you know what, what you think needs to be done to the ADA to make it better. Give us some of your own CSS hacks that you really enjoy or share your portfolio with us. We’d love to see what you’re doing. And
I really want to see
it be very cool. Otherwise, the other thing to keep in mind is that we are coming up on the end of the season. We’re going to be knocking out on our end, you’ll never know but we’re going to be recording a bunch of episodes very close together so that we can take the end of the year off but you’ll still get content throughout the end of the season. We’ll be back in season three. If you have any topics that you would like to hear covered, that you have a particular interest in, be sure to let us know know and we can get that on the list. You can do that, again, through all of the things we’ve already said there’s a forum on the site, anything like that. But let us know, because we’ll be lining up those topics very quickly. And we’re looking forward to that. There’s a advice coming, there’s tips and tricks coming. There’s tools coming, all of these different things. And it all kind of just comes down to at the end of the day, every time we do the episode, we like making sure that you do one thing and that’s keep your personas close and your users closer. Oh,
I see that one coming. Well,
I did it for you, but I also do it for them.