#47: Talking Accessibility, Portfolios, and CSS Hacks

I don’t know what’s funny about that. So now you have to tell me What are you laughing at? him

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

like, isn’t it like a 1940s comedian, ladies and joins?

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.

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.

Believe it or not, I think you know the reference might be though the same.

really proud of myself that I’ve gotten To start saying instinct Eagles

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

Nice set a Hawaiian coffee does that.

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.

Not much of a mint guy and

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

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. 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 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.

But I think the the challenge with that metaphor comes back to slapping somebody in the face is illegal. And if I

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.

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

Not exactly what they were going for, in that instance. But

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.

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

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.

Oh, it is.

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

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.

It kind of is. Yeah,

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.

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?

have you noticed that hangouts has a new feature with captioning

But neither does it live captioning.

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.

Yeah, I mean, but again, isn’t is that not the mantra of everything we say good accessibility is good use of it.

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

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.

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

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’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.

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.

Yeah. So if you’re interested in this, and the way this works is we talked about it, also have a link in the show notes to the GitHub repo that this whole site of his is in GitHub, so you can go look at all the code that drives this and what makes it happen. And, and learn what he’s doing. If you want to kind of get a feel for it, you go to the site. And it starts out as just a white page with a line of text on it. And from there, that line of text starts growing into CSS. He’s using JavaScript to write out the CSS into the page as time progresses, and so it starts out with let’s you know, let’s add a transition, let’s add a background color. And so the page starts evolving in front of you as it goes, and the whole thing but I don’t know if you sat through the whole deal takes about was it three minutes about that? It’s Yeah, it’s not long.

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.

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.

that’s using a technique. I don’t know if you dug into how that’s working or not, because that’s a div. Yeah, it is a div. And it’s full of markup, though, because the way like all the syntax highlighting and stuff works is because he’s marked it all up so that it has syntax highlighting. But the way that you can enter stuff in is that he is flagged to the field or the node rather have a div with an attribute called content editable time. Yeah, which is an increase it that’s, you know, it’s a fairly popular approach and things like node and angular or not node but yeah, angular and view and some of these front frameworks to build elements on pages like so when we talk about things like Gutenberg, some of these visual editors, rather than using text fields and stuff like that, what they’ll do is they’ll put in an h1 and set it as content editable, so you’re actually editing the h1 in space. That’s it’s just a very neat technique. It’s not something you see a lot of yet and it’s something that if it’s your first time having seen that, you know, it can be useful to go in there and kind of get a feel for it and how that’s then plumbing into his JavaScript and things like that. What I I love this, you know, so I said, transitions transforms box shadow, if you’ve ever you know, played with box shadow or not, he’s got some of that in there. VHVH units he relies on heavily that’s something a lot of people haven’t played with too much, which not not vertical height, that’s viewport height. So it functions is like a percentage of your viewport height. We’re Yeah, so like nine DV is basically saying 90% of the viewport is a good way of doing proportional proportional scaling. There’s VH and VW viewport width.

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

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.

You know, you mentioned that and I think what One of the important parts there that can’t be I think, stressed enough is it shows he can communicate. You know, when you start reading because the whole again, the whole way he’s doing this is through code comments. The code comments are telling you the story as the site builds out. Yeah. And so what he’s doing there is he’s saying I am capable of writing stuff that does things and explaining that. And that by itself is so important, whether it’s CSS, JavaScript, Ruby, PHP, if you can document your code in a way that explains to the user, what’s happening, that is it so valuable for a team or a company.

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.

Roku supports quite a few things.

so go go check it out. It’s str ml.net. Watch it three minutes, give or take is all it takes to watch through it. It’s neat. In the footer, so to speak of the page, there’s a link to the GitHub so you can go through and view source on it and see exactly like the page itself is incredibly clean and tidy. There’s not much to it. It’s Yeah, a ton of JavaScript though. And it’s, you know, it’s pretty high in JavaScript in terms of, you know, what’s happening there. So that there’s a lot that I think that can be learned in terms of that. So, go check it out. See, you know, think about how you know, you build your portfolio or how you want to present some of the projects that you’ve built or the skills showcase the skills you have. And again, let us know I love to see kind of how or if you have something like that if you’ve done something you think is super clever to show off your Yeah, I’d love to see it. I think that would be that would be cool.

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, 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

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.

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,

Yeah, we’ve I’ve been to the future. I’ve already explained this. I have the technology.

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.

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.

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’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.

yeah, it’s it gives you away Create in and access in, you can nest ins, you can do all of these things with it. So. So you what you do is you set up the counter on the element, you set the reset to whatever needs to reset to and what a thinker mentoring on. And just yeah, it’s just a very simple kind of thing. It’s it’s limited in usefulness granted, but let’s say, you know, you’re concerned about the number of links on a page, you can use that to very quickly. I mean, you can do it in JavaScript, of course, to just count, you know, query selector and see a query structure all and see how big your node lyst is, but maybe you so and here’s maybe the use case for this is maybe you want to show it in the editor to your content person.

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.

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

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.

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

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.

Get my shirt get us here. Damn it. I forgot last year I’ve got

will have a link in the show notes to it too. So you don’t have to remember all that or just google Oktoberfest.

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

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.

yeah, I mean, that’s probably true.

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

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 did it for you, but I also do it for them.