419: Hey! What About Email, Scroll Triggers, Mobile First vs Desktop, and more?
We're talking email, custom properties to tame the CSS stack, scroll trigger animation, WordPress blocks, mobile first vs desktop first design, and getting stuff to look nice on mobile Safari. And MORE!
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--finally got to zero RSS unread--Rupert and with me is Chris--
Chris Coyier: Hmm…
Dave: I don't know.
Chris: I accidentally clicked the button the other day. I clicked the "mark all as read."
Dave: Oops.
Chris: In the reader and there was no undo, nothing. I was just like, oh, those are all gone.
Dave: Oof.
Chris: It's not like email. That would actually cause me literal strife, I think, if I went to my actual inbox and just selected them all and archived them. That's not an option for me. I have too many. There are people waiting for answers. It would just make me look back or lose a client. There'd be problems.
Dave: Yeah.
Chris: RSS, not so much. You know?
Dave: You had a post about that on your semisecret email blog. [Laughter]
Chris: Oh, do I?
Dave: Well, it was about -- wasn't it what's his name from The Office.
Chris: Oh, yeah. Yeah. [Laughter]
Dave: Parks and Rec, it may be a setup, but he just, oops, deleted his whole 50,000 unread, or something, in his inbox. [Laughter]
Chris: Yeah. Which 50,000 for a celebrity seems pretty light. For Chris Pratt, that seems light.
Dave: Yeah, for Chris Pratt.
Chris: Who has a findable email address.
Dave: Well, he should probably have somebody who does that for him. [Laughter] He was also admitting--
Chris: Well, he does.
Dave: "I just sign up for everything. If it says you want your email, I'm like, okay."
Chris: Yeah, which he's so earnest sounding that it was almost a weird moment for me with him. How do you not love Chris Pratt? I love Chris Pratt. Love him. But it's like, you do have people answering email for you, I promise. You're a huge star, so you do.
The other one -- ugh, there are so many problems with this. One of them is that he promised then that he would get through all 50,000 of them by doing a couple a day -- doing them over time for people. I'm like, that's not a good use of your time, Chris Pratt.
Dave: Yeah.
Chris: Don't do that. Again, find somebody else to do it for you. It's one thing if you want to tell fans that you'll get back to your fans, but I think you're setting up a situation where you can't do that for very long.
Dave: Yeah.
Chris: You could spend the rest of your life doing that, so you're setting up expectations that you can't get through. Anyway, I like thinking about email, all the time, just little things.
Dave: Are you on this new Hey that's very popular from Basecamp?
Chris: I immediately closed the thing. The idea that you could only have an @hey.com email address, I was like, "Okay. Bye."
Dave: Mm-hmm.
Chris: What?!
Dave: Yeah.
Chris: I get that there's a whole paradigm thing there yet. I should probably just get over myself for a minute and give it more of a chance. The moment that I got the code and I was going to get in there, I was like, "No. I can't just play with your client. It's like a whole thing."
Dave: Yeah.
Chris: Then all of this app store controversy, which we should not get into because that is uniquely -- there's enough white men talking about the Hey Apple problem at the moment.
Dave: [Laughter] Yeah, there are lots of Apple podcasts. It's interesting to me that it's a Web only product, basically. It's also interesting to me that you have to use their stuff in their silo, sort of.
Chris: They have Web wrapper apps.
Dave: That seems both webby and unwebby at the same time.
Chris: Yeah, right, in a way.
Dave: Mm-hmm. I don't know.
Chris: It's hard to describe. Then there's stuff like, you have to okay every single domain name that emails you. I'm like, um…
Dave: Oof. Okay. Yeah, well.
Chris: I don't have those problems. My email problems are not that. Then I was thinking about, this happened to me just the other day, right? I open up -- I use Gmail. I like Gmail. Gmail has always been there for me. Twenty-plus years of Gmail. Don't get no spam. I can search every email I ever got. It comes in handy all the time. It's a fast, nice client. I think they do a damn fine job. Okay? End of rant.
I have Gmail app on my phone. I used to really like the inbox app, by the way. RIP inbox. Now we're back to the Gmail app. Whatever. It just quit on me. I'd open it up and it would insta-quit and go back to the home screen. Couldn't get it. I'd empty my whole inbox. There's no emails in there - insta-quit. I don't know what was wrong with it. Something was wrong with it.
I was like, "Gosh, I have a lot of built-up muscle memory of using that as my client but I can't use it right now. I literally can't use it right now," so I just got rid of it.
Dave: Mm-hmm.
Chris: I just moved it away to some other folder and put a different email client there. I just picked the native one on the phone. It's called Mail. I use Mail.
Dave: Mm-hmm.
Chris: I switched to it. You know what the implications of that were? Nothing. It was fine. It's fine. I use it. I still do my email. It affected my productivity none. I have the same amount of unread emails. My fingers aren't mad about anything in particular.
It got me thinking about an email client is not the solution to your email problems. You cannot find a perfect client and have it clean up your email. This is a mental game. It's an effort game, an elbow grease game, a change in how you operate game. It is not an email client game, getting good at email.
Dave: Yeah, probably, my one trick for email was not caring.
Chris: [Laughter]
Dave: I gave up. I don't know how. I get probably 50, 60 emails a day. I maybe check it. I have no drive to check my inbox anymore. It's probably, I spent way too much time on Twitter and stuff like that, Slack, or whatever. But I am actually going to check my email. Nope. I go through 60 at the end of the day and that's it. [Laughter] It works for me.
Chris: Sixty at the end of the day, though, every single day, that's a healthy email strategy, I think.
Dave: But I do have -- the problem that Hey would maybe solve in a more strict filtering sense is, I get a lot of spam. I'm on some list, right? Even if I click unsubscribe and say I did not sign up for this list, I still get -- I'm on some disseminated list out there that my email keeps showing up on marketers' email list. I have a theory that it started from a conference, but I'm not going to oust them yet. But it all started right after I went to a conference.
Chris: Aye yai yai.
Dave: Yeah. Hot drama that I know I didn't consent to my email at this conference, to my knowledge. Anyway, even today, I got an ad or whatever for a shop, the Shopify that sells fully automatic AR-15 triggers. I'm just like--
Chris: Wow!
Dave: Big no thank you.
Chris: Really? You got a marketing email from a Shopify store that you have nothing to do with. This is from Shopify itself suggesting you this store?
Dave: It's through Mailchimp but, yeah.
Chris: Wow.
Dave: I'm on somebody's list, basically.
Chris: Okay, so Shopify couldn't have stopped this. This wasn't their algorithm.
Dave: I don't think Shopify could, but I'm just like -- you know, this is terrible, man. I get it a lot and I'm on a lot of lists. It's getting weirder and I think this list was picked up. I'm just following trends here, but there's been some weird religo-conservatism stuff - extreme. I'm fine with the religious opinions, but this was very extreme, "Obama is the devil," sort of stuff. That problem with email where you're trapped and I know they know I opened it, but then they know I clicked on unsubscribe, but then they keep me on the list.
Chris: Oh, yeah! That's a killer, isn't it? When you unsubscribe but that means extra subscribe. [Laughter]
Dave: Yeah, it means extra subscribe in some weird country on this planet. Anyway, that problem with email, I guess I could probably do it and go into Gmail and just nuke these or try to.
Chris: Hey would stop that because you just wouldn't even see it. It'd be some weird--
Dave: Would never see it, you know.
Chris: Yeah.
Dave: Again, RSS to the rescue. Feedbin to the rescue. I've started doing all my newsletters through Feedbin.
Chris: Yeah. Yeah.
Dave: That's a pretty cool feature because I can--
Chris: That's cool.
Dave: If you actually want news, you don't have to sign up for somebody's dumb newsletter with your personal email address. you just give them this ghost Feedbin ghost email.
Chris: Let me do my inbox real quick. This is a peek into the life of. This is why I care about email because, hopefully, this will give some insights into why I think this is important.
I had a thought. I think it was late last night where I was like, you know what? I should do more for this particular sponsor. I haven't done anything special for them in a minute. I didn't know what, but I was just like, I have this thought and I was like, that's a good idea.
I went into my email and I found an email, my last email thread with them. I just put it in my inbox to just give myself a little to-do to reach out to them. Then I have a QA event that's coming up this week that I forgot about and I'm going to be out of town. Now I need to have a little mini hard conversation where I'm like, "Super sorry. Can we reschedule that or is it too late? Should I figure out something?" Okay, so it has to be dealt with this week.
I have an email from Lynn Fisher here. You know Lynn? She's the world's greatest Web designer, I think.
Dave: Yeah, topnotch.
Chris: Somehow, she agrees to work with me on stuff. It's amazing. I hired her at one point to redo all the illustrations for Flexbox and Grid guides on CSS-Tricks, so they look all good. I was like, you know what we should do, Lynn? Let's turn your illustrations into a poster and people could buy the poster. I found that it's really quite easy to wire up an integration between WooCommerce on the site--which they do sponsor the show once in a while, but I'm just doing this because it's technology that I'm using--and a company that does on-demand printing and distributing.
All I had to do was get a beautiful design from Lynn. Check. That was definitely the hard part. Then I just made a new product in Printify that has her beautiful thing on there. I tested it. I sent one to myself first to make sure it wasn't junk.
Dave: Yeah.
Chris: It turned out pretty good.
Dave: Wow.
Chris: Now I just have this thing. This conversation thread is me and Lynn going back and forth getting all the details of this thing right. They're live right now. You can go to the Flexbox guide on CSS-Tricks that says "Buy the poster" at the top and you can buy the poster. It's pretty cool.
Dave: Wow.
Chris: That came -- that happened 100% through email for me, this whole idea through getting it live. No Slack, nothing, no phone call. It happened 100% through email.
Somebody is inviting me to a conference and I said, "I'm fuckin' too busy," because I am.
Dave: [Laughter]
Chris: But then I got this, like, "Well, I don't know. What if we do a live ShopTalk Show? What if I MC a little bit so I don't have to, you know, how about that? How about we tie in some sponsorship stuff to it too?" This is business happening in my inbox. I'm going to get thousands of dollars out of this at the end of it. You know? Not bad, right?
Dave: Mm-hmm.
Chris: I got an email from my music friends saying, "Let's get together this week. We'll just stay six feet apart. We'll play outside in the yard. Drink a beer and play some banjos.
Dave: Okay.
Chris: Hell yeah. Down.
You know Marc, Beyond Tellerrand, Marc. What's his last name?
Dave: Oh, Thiele.
Chris: Thiele. That's funny because I know another Marc Thiele. Sorry, Marc. I know you, but I just know two Marc Thieles. Anyway, he hooked me up with -- I was looking for a new video intro for CSS-Tricks for my videos because I was like, mine is old. I want a new cool one. He's like, you've got to meet dina -- oh, now I'm killing it with the last -- Amin, dina Amin. I'll put it in the show notes. Look her up. She's amazing. She does these videos that are like stop motion where she breaks garbage and turns it into monsters and stuff. They are so cool.
Dave: What?! Whoa!
Chris: I was like, um, I hire you immediately. Please do my intro.
Dave: [Laughter]
Chris: This thread going back and forth about her playing with the intro, you know.
I got some GitHub emails with some people that want my opinion on something, which I'll probably archive because that's hard to make time for that stuff. Sorry.
I've got an email that somebody is asking me at CodePen to test something. Sure. No problem.
My doctor is emailing me saying I have a past due invoice. I can't archive that.
Dave: Yeah. You can't just--
Chris: That's it. That's my inbox. To me, 85% of this is good stuff. Only good is coming from these things.
Dave: You know, just your inbox story, it's very diverse, if that makes sense, the tasks that you're doing there. You're paying a dentist invoice.
Chris: Yeah.
Dave: You're setting up a poster. You're getting a commercial figured out.
Chris: Yeah.
Dave: You're managing how you do conferences. I think that's one neat thing about email as a platform is it's very diverse. You can sign up for things to get exactly what you want out of it, almost like RSS.
Chris: Right.
Dave: Just email me this newsletter, this roundup of links or whatever. I paid for Patreon. Patreon sends me stuff a bunch.
Chris: Mm-hmm. Mm-hmm.
Dave: I think that's cool.
Chris: You know what's not in mine? There are a few moments, and I try to avoid this a little bit, where I break off the email into other jobs because I don't want ten emails. I really only just want one if I can get away with it.
There's one that's too busy for that, and one of them, we're going back and forth with writers at CSS-Tricks. That has to be separated out because there's just a lot of back and forth there with all those. That's special, but that's cool because then I can invite people to it.
This show has an email address called [email protected]. We have that, so the three of us--me, you, and Chris Enns--can have access to that that just has this one purpose for that. That feels right. That's been working. I don't want to do that ten times. There's a limit to how many different email addresses I can have.
Dave: Yeah. Yeah, I have my personal, I have my Paravel one, and then I have an old Hotmail one that just is almost purely for Windows. It's so weird. Then I have a--
Chris: Dave Rupert has a Hotmail address. You heard it here first.
Dave: I use a Hotmail--
[Laughter]
Dave: Not just have one. I use one.
Chris: [Laughter]
Dave: Then occasionally clients, which this is a weird thing about client services. I'm sure your employees have a CodePen email address, possibly.
Chris: They do.
Dave: But I will get an email address for the client so, occasionally, I'll have these whole emails and, often, they're enterprise people and they have Active Directory stuff. It's kind of interesting.
One thing I've never had -- email and calendars kind of go hand-in-hand. I've never had the "God" calendar where I can just look at one calendar. I have to balance it.
Chris: Mm-hmm. Really?
Dave: It's like, okay, this calendar is in this one. You can funnel all these in, but my busy times are never -- I don't have one calendar. I have five calendars. I have the ShopTalk calendar. I have a personal calendar.
Chris: You have to log out of a website and log into another one or what?
Dave: Yeah, well, I can get them in the calendar app, but my phone doesn't have it because then--
Chris: Mm-hmm.
Dave: My phone is like, oh, you need to sign up for your client's whatever spy tech or whatever it is, like the Active Directory on your phone thing where you VPN -- you know, your whole phone goes through their VPN and stuff like that.
Chris: Oh.
Dave: I'm just like, you know, I'm just not going to do work on my phone in this instance.
Chris: Yeah. Yeah, I look out and all mine are Google-based. I don't use Google Calendar, but I have them all there for the sharing capabilities and sync capabilities and all that.
Dave: Yeah. I just wish I had the auto-calendar. I'm just so bad at calendars, so it's not even worth it. You know what I mean? I just wish I had the auto-calendar thing where if somebody is like, "Oh, I want to schedule a meeting with Dave. Oh, he's busy at 8:45 in the morning, so I'm going to schedule it--" you know?
Chris: What's that app that every has? I use it, too, once in a while. Scheduly?
Dave: Oh, like Calendly.
Chris: Calendly. Isn't it Calendly?
Dave: Yeah.
Chris: Yeah. That does look at your calendars and it allows people to schedule meetings in that way. What a genius startup product. That's great. That's so cool.
Dave: Well, and I'm surprised it's just not acquired. You know what I mean? [Laughter] It's a feature of email or calendaring.
Chris: Yeah.
Dave: It's just not--
Chris: Right. I think Google might actually have something that's similar. You can somehow expose what your availability is without saying what, you know, but I don't know that it allows people to then actually book a meeting. I don't know.
Dave: I would need to check, again, the client's work calendar, client B's work calendar, my work calendar, the ShopTalk calendar.
Chris: Right. Sometimes, something is on there that it's almost like informational.
Dave: Oh, like Stephanie's birthday.
Chris: Like snowblower is ready. Yeah, right. You don't have to not have a meeting that day because it's Stephanie's birthday. You know?
Dave: Yeah. Yeah, it's all--
Chris: I'm sure Stephanie disagrees.
Dave: Cool. Yeah. No, it's -- I mean she's very upset every time I forget. But then the weakness there, this is the thing. The weakness is, I'll have randos. At some point I said, I'll just get everybody's birthday from Facebook or some app did that for me, right?
Chris: Mm-hmm.
Dave: Now I have a bunch of email birthdays or whatever for randos.
Chris: Oh, no. It's on your main calendar, too? It's not even on some birthday thing?
Dave: Yeah, just showing up, yeah, on my main.
Chris: Great.
Dave: That's in there but then the second part of it is people who aren't on Facebook that I care about. Their birthdays aren't on there, like Regan Ray's birthday.
Chris: Oh, my gosh.
Dave: It's today, so happy birthday.
Chris: Aw! Happy birthday, Regan.
Dave: But anyway, there are certain things. It's just like, you know, it's that data blindness thing. I have data. I actually have too much data so that it's worthless. Now, I am almost data blind. I've actually gone through. I made a private app using the new Vue component editor in CodePen.
Chris: Oh, yeah?
Dave: Made a little app.
Chris: Nice.
Dave: I stole all the birthdays from Facebook. I have 400 friends, 600 friends, or something weird because I've collected too many people in my life. If you're waiting on a friend request, I'm just going to start saying no. I apologize. I just can't handle this anymore.
I went through and I pruned this list of like 600 birthdays down to like 100 birthdays and I made a little app that tells me whose birthday it is every week.
Chris: Hey!
Dave: I added people and so I check it every day because that was something I want to be a big boy about is remembering people's birthday or whatever.
Chris: That's nice. That's an adult-like thing to do. Be like, "Listen. I know we can't hang out like we used to, but the least I can do is do something nice to you on your birthday."
Dave: Yeah. You get older. Your friends used to all hang out in the same living room, but then people get married, have kids, and go off, live in different cities, and relocate. You just don't see your friends, but they're still your friends. You still want to reach out and say, "Hey."
Chris: Yeah. That's funny how the nature of friendship changes over the time like that. You almost miss it. You're like, "Why don't we hang out and just laugh in lawn chairs anymore?"
Dave: Yeah. Well, we have 8 o'clock bedtime. That's part of it. [Laughter]
Chris: Yeah. I can give you about ten good reasons why we don't. The chief among them is that I don't want to. [Laughter]
Dave: [Laughter] I saw this tweet the other day. Relaying tweets is a little bit like relaying SNL clips you saw. It always goes terrible, but here we go.
This guy was like -- or my 16-year-old self, like, "Hey, do you still listen to Rage Against the Machine?" He goes, "Yeah, man. I listened to them at a protest last week." "Ah, that's cool." "Then I had to leave to put my kids to bed." "What?" "Pizza hurts my tummy."
[Laughter]
Dave: It just basically summed up my weekend. Man, you get old. It changes everything.
Chris: Yeah. Yeah. Did you eat something you shouldn't have yesterday? It was Father's Day, so I feel like it's kind of--
Dave: Oh, yeah. I had pizza.
Chris: Me too! I had pizza.
Dave: Yeah.
Chris: The best thing happened to me, too. There was a trainee and a little bit burnt the first one, which I don't even mind, and so they made me a second one, so I got two pizzas.
Dave: Idiots.
Chris: They gave me them both.
Dave: Just giving free pizza. Just -- ah.
Chris: Mistake.
Dave: That's fine. No, we had pizza. The wife made some delicious, not brownies, blondies.
Chris: Oh, yeah.
Dave: That's -- those are better, to me.
Chris: Yeah.
Dave: I'm pro vanilla.
Chris: Oh, that's great. Yeah, we had fun. We rented a canoe and paddled up and down the river. It was good.
Dave: Nice. Nice.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Hoefler&Co. Welcome. As a sponsor, I am stoked about it. They are my favorite type shop out there.
The URL is one of the best URLs you could possibly imagine, typography.com. Nothing is more critical to a good Web experience than just clear, clean, attractive typography, which is good news because it's not particularly hard on the Web anymore. Type on the Web has just gotten so good. It's affordable and easy to integrate. Hoefler&Co. fonts are the designers of some of the world's most beloved typefaces like Gotham and Knockout.
You know the CCS-Tricks logo? It's just Gotham rounded, all caps, CSS-TRICKS. [Laughter] That's it and I've used for so long, I feel like it's striking. I feel like it's just coming into its own, really. I really like it, still.
All the typography on CSS-Tricks is also Hoefler&Co. fonts: Ringside, Sentinel, Operator. Ringside is the title, Sentinel is the serif'd body copy, and I've only been using it now for--what's it been--three, four months, and I just love it. In fact, my own team, just yesterday, complimented me on the typography of the site. I've been tweaking it forever. It's finally really beautifully come into its own. It's something I take really serious. Operator mono is just my favorite monospace font for code. Really. It was one of the first ones out there that had the kind of slight cursive look for italics, which was just genius and has been copied many times since. I love it.
At typography.com, you'll find nothing but the highest quality fonts. They're screen optimized for the browser, complete families, deep character sets, clever features to help you solve design problems. Then, on the site itself, there are free tutorials and stuff to help you become a better typography. Oh, thank god. I could use it.
Download their fonts to self-host them or it's $99 a year to get a cloud typography subscription, which lets you use the entire library for $99 a year. You get 15% off that if you use coupon code SHOPTALK at checkout. Just one word, SHOPTALK at checkout. Typography.com/shoptalk gets you that deal. Incredible deal. Incredible fonts. Thank you for the sponsorship. Love it.
[Banjo music stops]
Chris: Uh, let's see here. So, what have we been ranting about? Email and calendars, my gosh.
Dave: We talked about emails and calendars, so we're doing pretty good.
Chris: Mm-hmm. Yeah. Oh, and I mentioned my posters just offhandedly because of the connection. I don't even know how I ended up talking about that but, yeah, if you want a CSS Grid or CSS Flexbox poster, they're the best ones you'll ever get.
Dave: Totally. These are great. Well, but you're really undercutting your whole operation here. How are you going to get the traffic if people have the post inside their house on the wall?
Chris: I did consider it. I did consider it and I was like, by the time you've given me -- they cost $25 in which I believe we get 40% of that and then Lynn and I are splitting it. It's kind of like, whatever I get, a couple of bucks per, that's way higher than the ECPM of one person.
Dave: Ad revenue. Oh, but one person coming a thousand times a year, you've got to -- see, you've got to think of it in those terms. [Laughter]
Chris: There's no way that's worth $2 or whatever, but yeah.
Dave: [Laughter]
Chris: Maybe. Maybe. I am hurting myself, but I have a feeling you buy it for the wall and then you Google it anyway because you can't copy and paste the wall, you know.
Dave: Well, that's a fair point. A fair point.
Chris: Yeah.
Dave: All right. Nice.
Chris: What should we talk about now? There's a Miriam Suzanne post on CSS-Tricks today that I think is going to hit with some people.
Dave: Okay. Okay.
Chris: Sometimes, it takes a little minute for new CSS things to dig into how people are actually using them day-to-day and what kind of the best practices end up. Like the day Grid dropped, we weren't using Grid like we are now. Things change. This is a cool one about how -- the most interesting thing about CSS custom properties is the fact that they follow the cascade in a way that Sass variables just can't because Sass doesn't know what the DOM is. Sass only knows what the CSS OM is. Sass variables can be scoped by nesting. That's a scoping, but they can't actually use the actual cascade. You know?
Dave: Mm-hmm.
Chris: This has a little bit to do with that. But it also has a little bit of an idea of, like, where and how do you want to declare things like colors, fonts, and stuff to be used. You could, for example, go way high up in the cascade and have really low specificity and just say, "This is the general base colors I want to use."
Dave: Mm-hmm.
Chris: Then you can always override, you know, really, really target the exact button. Maybe even use inline styles to set a color through a custom property. But there is kind of middle ground there too. There's like--I don't know--what page are you on? What component are you in? That kind of thing. You could set properties there, too.
That can be a little verbose or you can do it with a variable stack, as Mariam put it, where you use a bunch of nested variable statements to be like, "Try to use the specific one. But if you don't have that, then fall back to something a little less specific. Then fall back to something a little less specific." The specificity is based on some naming that you set up.
Dave: You have like a global var or whatever, body, background, var, theme background, and then comma var global background comma.
Chris: Yeah.
Dave: Because you can specify….
Chris: Scope background. Element background.
Dave: But if the theme thing never gets set, if that's just empty, then it'll go back to the global background, which should be interesting.
Chris: Right. Right.
Dave: It's kind of like font stacks for variables.
Chris: It's like font stacks for variables, yeah, but you have to set it up as a stack. Its' really leveraging the idea that variable, the var function, var(), you use the property and I don't think this is that much used. Then you can comma separate a fallback value.
Dave: Mm-hmm.
Chris: When you think fallback, you're like, "I don't know. I'll just put black or whatever." I don't think people do that that much but the trick here is that it doesn't have to just be a value but it can be another variable and that one can have a fallback.
Dave: Yeah. Interesting. Interesting. Yeah, no, that's cool tech. For this to work, you have to be IE11+ because IE11 really does not like variables.
Chris: Right.
Dave: But wow, yeah. If you don't care about IE11 or it's not on the priority--
Chris: Yeah. Yeah.
Dave: --you can do some--
Chris: There's one thing, you know, so global usage, a huge asterisk here, like I don't care about global usage, generally, but just for podcasting reasons, is like 1.4% or something.
Dave: Yeah. Yeah.
Chris: I would think a lot of projects that us all work on, it's going to be lower because they're just kind of like more of whatever, modern projects, and I bet a lot of that 1.X% or whatever come from--I don't know--Wikipedia and big sites that have super global usage and that. If you look at the statistics of CodePen or something, it's super zero. [Laughter]
Dave: Yeah, well, you guys also flag IE11 and say, "Hey, you can't use IE11."
Chris: Well, right, which would show up in analytics, but yeah. Yeah.
Dave: Yeah. Yeah.
Chris: Yeah, that's the thing. CSS-Tricks is even lower. CSS-Tricks has really weird traffic. For example, I think it peaked out at 4% ever mobile traffic. Then last year it dipped to like 3%.
Dave: Whoa!
Chris: Globally, if you look at global statics, we've crossed the 50% barrier, generally, for mobile traffic. More than half of Web traffic, generally, is mobile. Not on CSS-Tricks.
Dave: Huh.
Chris: It's really dependent on the site itself. That's what that huge asterisk was about because I think when you're caring about things like the support of features and analytics tracking, the generic statistics are much less interesting than the specific ones. I think we got into that last week a bit.
Dave: Yeah. Yeah, no, a lot of my clients are still supporting IE11, so it's tough because some clients will have the dollar value of IE11 written right there. It's multiple salaries a month of money.
Chris: Yeah, so you deal with it, especially because your client is Microsoft. That doesn't help.
Dave: Well, but I think even companies are starting. You can make a pretty good argument like, "Hey, this is just something that's hard to support." Even with the latest and greatest in fallbacks or progressive enhancement, there's a lot of work you can do. I feel like if you draw the line after IE11, if you say, "That one goes away. We only do modern browsers," it opens up a lot of the Web.
Chris: Well, because then you're in evergreen territory because Edge is--
Dave: Evergreen territory.
Chris: Yeah. There was early -- what got us once in a while was--
Dave: Yeah, we have old Edge, yeah, early Edge.
Chris: Right, which is starting to update now, but that one had some issues, too. The earliest versions, like non-Chromium Edge had some ES6 stuff it didn't support and stuff.
Dave: Like Spread didn't work.
Chris: Yep.
Dave: You have weird things, but I think that kind of is going away. Hopefully, those issues become less and less.
Chris: Yeah.
Dave: It's getting -- yeah, I think--
Chris: It's still there. We'll find new stuff to bitch about as soon as that's not a problem, anyway.
Dave: It'll be mobile Safari, I think.
Chris: Yeah, it will. Right. [Laughter]
Dave: Yeah. Sorry, Jen. [Laughter]
Chris: Yeah.
Dave: Things changed. When we started this, I think that our first episode we were talking about IE6 and stuff like that.
Chris: Mm-hmm.
Dave: That stuff happened. It's been--
Chris: Some things change. Some things stay the same. Here's a trick. You want a trick?
Dave: Okay.
Chris: It's a one-liner to set the percentage of the scroll position of the browser or to just get your hands on that number.
Dave: Really?
Chris: You've seen this a million times. It's like window.document.document-element.pagex.height.
Dave: Yeah.
Chris: Divided by the window.scoll. blah-blah-blah. It's a calculation.
Dave: Yeah.
Chris: But you can get it right and you can get it done. It's just one thing divided by the other thing. Then use some math.round or whatever you've got to do to get the number. So, now you've got a number. It's between zero and 100.
Dave: Okay.
Chris: It's either you're not scrolled or you're 100% scrolled. You set property, set the scroll property. Okay? Now CSS knows a number from zero to 100 if you scroll down. Well, how useful is that?!
Dave: Yeah.
Chris: Now you've got the world of CSS unlocked for you based on what percentage of scroll position it is. Zero might be interesting. A hundred might be interesting. Everything in between might be interesting, too. You could hide and show things.
Here's the Scott Kellum trick that I think is so cool. He sets on the root, or the HTML, whatever, some low specificity element that scroll thing. He sets all animations. This is just a demo, so you could scope it however you need to, to have animation play state paused and then animation delay of that number times negative one seconds or whatever. It does a little multiplication thing, too, based on one second. You set all your animations to one second. Then as you scroll down, none of the animations that you've used, the keyframe animations, are moving. But as you scroll, they complete one cycle of their animation until you hit the bottom of the page.
Dave: Because it's times one.
Chris: Times one. Yeah.
Dave: Times zero or 100. Huh.
Chris: Yeah. Yeah, and if your animation duration, if you change that to 0.5, it would complete 2 iterations because that's whatever. You can do the math to how many iterations you want. But let's say you just have a bar and you want it to be width equals 1% to 100% or 0% to 100%, you just make that a keyframe animation. As you scroll down, it fills out the bar because that's what the animation does.
Dave: Yeah. Yeah.
Chris: It could do a rotation. It could do literally anything. It could go from red to blue. It doesn't have to be a number-based thing anymore because it's just completing the keyframes from zero to 100% but at the specific place.
Dave: Yeah.
Chris: You have this one-liner in JavaScript and it opens up this scroll-based animation thing to you in a really kind of powerful way. That's a Scott Kellum trick that I'm stealing.
Dave: Yeah. I think I use that very similar for the cheap-ass parallax, you know. You set a little scroll variable.
Chris: Yeah.
Dave: Like a number, but I love this percent idea because that's often what you care about is how far down the whole thing are they.
Chris: Yeah, right. But let's say it's a 15,000-pixel page. It's not as nuanced then.
Dave: Yeah.
Chris: There's a whole lot of pixels between zero and one there, but you get a float anyway. It is still smooth. It's not like it goes one pixel at a time or one percentage at a time.
Dave: Yeah, that's the tough part about using document.scroll. It's pixel snappy, if that makes sense, because there are no sub-pixel for document scroll or whatever.
Chris: Right.
Dave: It would be a lot smoother if it based on the full height or some math there to get the height. Yeah.
Chris: Yeah. Yeah, it's a cool trick, though.
[Banjo music starts]
Chris: Hey, ShopTalk Show listeners. This episode is brought to you in part by JetPack. Man, they've been doing some cool stuff lately. You know Jetpack, right? It's a plugin for your self-hosted WordPress site that brings you the powers of Automattic, you know, all kinds of powerful, cloud-based stuff.
We've talked about that a bunch of times. There's lots of stuff that Jetpack can do, but they've been moving more towards a pay for what you need model. For example, they have search, right? I use it on our sites. I use it on CSS-Tricks. It has awesome search that happens off your site, in the cloud, indexed by elastic search. You have a bunch of control over it. It's super powerful. Absolutely love it. That's a la carte, meaning you can just buy it.
You know you had a la carte lunches. I always think of that, middle school. You could just get a tray lunch and you just get to have whatever they have, or you could buy just an apple for a dollar or just a slice of pizza for $1.50. You know? [Laughter] I don't know why. That's what I think of.
You can just buy search if you just want search and you want Jetpack to do nothing else for you.
They have new ones, so there's backup. It's the same way. You just want backups from your WordPress site? It backs up everything: your database, your files, your media, everything. It's super trustworthy. Love that. You can just buy that if you want.
Their brand newest one is Jetpack Scan. If you're just concerned about the security of your WordPress site, which Jetpack does a bunch of stuff anyway for, but it's literally looking at the files and the database of your site to make sure there's no problems. If it detects problems, it lets you know if there are problems. Most of those problems, you can fix with a click. It knows how to repair it and does. How cool is that? Jetpack Scan, if you just want that, if you're just like, "I need more security for my WordPress site," you can just buy it, $7 a month. Pretty cool. Thanks, Jetpack.
[Banjo music stops]
Chris: It's funny timing because I just got all excited about that at the same time the GreenSock released their scroll trigger add-on.
Dave: Mm-hmm.
Chris: Everybody is playing with that. I think it hit at a perfect time. They had some great marketing for this. I think it's our challenge this week at CodePen, too, which is also just weirdly good timing.
Dave: Uh-huh.
Chris: I think the market for scroll plugins was in bad shape. There was ScrollMagic and people weren't particularly excited about any of them, I feel like. Now, all of a sudden, GreenSock comes along with their kind of beautiful take on the thing. I think it's going to do really well for them.
Dave: You know the demos I've seen, there was one with an airplane flying as you scrolled.
Chris: Was that Steve? Who sent--?
Dave: I was trying to find out because I'm like, where are my likes?
Chris: He emailed me right away and said, "Can I write this for CSS-Tricks?" I'm like, you can't not. You're not allowed not to write about this.
Dave: Yeah. [Laughter] You have to write this.
Chris: [Laughter]
Dave: Yeah. Am I going to find it? Come on, now. Certainly, I liked it. Well, it was beautiful. It was amazing.
Chris: It had like a 3D model of a plane, which I don't even know how that works on the Web. But then it literally moved around and flew, which is like, well, first, you need to get that working. It seems like that's almost harder than the scroll part.
Dave: Yeah.
Chris: But they really marry together really nicely.
Dave: Well, and there is some Z index trickery where it'd go in front of the text and behind the text. That just was very cool.
Chris: Epic! That's the kind of job--
Dave: Yeah.
Chris: --where you get to quote Boeing.
Dave: Yeah.
Chris: $75,000 for that one-pager. You know?
Dave: Yeah. Well, and I think it's -- you think about -- do you remember Snow Fall for the New York Times?
Chris: Of course. In fact, I think anybody who works in news collectively groaned when we said that.
Dave: Well, exactly. It became almost a trope. Everyone wants Snow Fall. We need to have that, you know?
Chris: Mm-hmm, with more upsells.
Dave: [Laughter] Yeah. It's cool and I do like immersive experiences. I think, though, if every article is a Snow Fall, nothing is a Snow Fall. You need to really take your time and pack these punches where you can. I think New York Times does an excellent job of layering in graphics when they can.
Chris: Mm-hmm.
Dave: It doesn't always work, but they do a pretty good job.
Chris: Yeah. It certainly can't be a requirement. I've been trying. I have a couple of strategies at CSS-Tricks for it that I try to employ when I can. For one thing, I can just flip on our directed article mode.
Dave: Yeah.
Chris: It sets me up a hero at the top and then a single column down the middle of the stuff. It turns off the ads, so I can't do it all the time, but it gives me a little more creative freedom. Actually, it doesn't quite turn them off. I think it puts them way at the bottom. I think the world is your oyster when you have a single column of text down the middle.
Dave: Mm-hmm.
Chris: Now, I can move the text to the left. I can move the text to the right. I can put a big gap. I can put big backgrounds. You just can do whatever. But I did it in this reliable way where it's still got the header. It's still got the footer. The comments are untouched. It's just like this chunk in the middle that gives me design possibility that I like. That's just by flipping on a switch, but that's not all I can do. I also have this ability. If it's in a special category, do a special template. I like having the tools, but the default is to do nothing. Just use your regular template.
Dave: Yeah. I hope that's the future. I know it's a lot of work to get a company to agree on one template.
Chris: [Laughter] Yeah.
Dave: Homepages are so boring and they just do the same thing. Wouldn't it be cool if we stopped thinking of a homepage as a single template? It's always four or five templates. You know?
Chris: Right. Right.
Dave: They just change based on the news of the day or the volume or the attention that's needed.
Chris: Mm-hmm.
Dave: I think of even my homepage. Sometimes, I'll write an article that's just a banger and I'll need…. You know?
Chris: Mm-hmm.
Dave: My homepage doesn't support that at all.
Chris: I love that idea that it's not just that one URL, that the presence of that URL on another page might trigger another template.
Dave: Yeah. Yeah, so just because -- I don't know.
Chris: Actually, you remember this? I used to use this Dave Rupert authored plugin for WordPress called Art Direction and it had two modes. One of them is, apply this CSS just to this page.
Dave: Yeah.
Chris: One of them is, apply this CSS to anywhere that that -- any other page that this thing shows up, like search results, archive, or whatever. That way, if you wanted to change the title, font, and color or something, it didn't have to just be on that one URL. It could be anywhere. That was clever. You did that.
Dave: Better art direction because there was an art direction.
Chris: Yeah, better art direction.
Dave: It just didn't work. [Laughter]
Chris: I still have it installed. I still use it, but it's starting to be outdated for me because I have this other plugin installed that does that but scoped to blocks because I'm all into the WordPress block editor now.
Dave: Yeah. Heck yeah.
Chris: The beauty of it is that I can select any element and just apply custom CSS to it, but I don't have to think up a selector or apply it. The selector in this plugin is just selector. You just write "selector" and then a curly bracket and it does the scoping of the class to the thing that you're applying it to, which is rather clever. It does it in the editor, too, so the CSS that you're applying to it, you can see as you're doing it. With better art direction, you just had to apply the class and then preview the article.
Dave: Hit save. Yeah. Just cross your fingers. [Laughter]
Chris: To see what you were doing, yeah. This applies it right in the editor, which opens up some possibilities, yeah.
Dave: Wow. Oh, that would be a dream. Yeah, because you want that. I have library load and all that stuff, so I can do it pretty quickly.
Chris: Mm-hmm.
Dave: Just that instant feedback for little iterations.
Chris: That's why I think that this WordPress block editor is a bigger deal on a psychological level to sites. It's one thing to be like, "Ah, WordPress is this behemoth. Move away from it." But it's not only -- there's some extra stuff you get in this really powerful editor. It's one of those things, gosh darn it. It's almost like somebody should take it and make it totally isolated so you could edit your markdown files in it in case you're building an 11ty site or whatever.
Dave: Yeah. Yeah.
Chris: The editor is so fricken' nice that it's almost unfortunate I have to use WordPress to use it. It's not unfortunate to me because I get all kinds of power out of WordPress.
Dave: Well, so much of WordPress was, you know, anyone can spin up a WordPress. You go to WordPress.com, hit "Give me a blog."
Chris: Yep.
Dave: Done. But where the client services stuff sort of started coming in was where somebody would say, "Oh, but I want a custom about page. I want three faces beneath. I want it to be responsive."
Chris: Yeah.
Dave: That's where people get me on phone. Now they don't need to get me on the phone, and that's good and bad for business.
Chris: Ah, because there's a columns block and you just rock the columns.
Dave: There's a columns block and they'll just figure it out.
Chris: Yep. I don't think it's settled in quite yet. Right before this call, I'm mentoring somebody new and she's got this website. It's like a directory website for the fashion industry, yadda-yadda. It's pretty cool but it needs work. I'm just trying to figure out where to start mentoring her.
She picked WordPress for the site and threw it up on some WordPress hosting somewhere. We might have to reevaluate that. But she did it all by herself, entirely. It has that "my first WordPress site" going on, like, "Oh, I've learned what plugins are." There's a good 25 of them in there: sliders, contact things, page builder things slapped in there to accomplish layout stuff that she couldn't figure out how to do.
You know it'll take a little untangling or will it, you know? I feel like just deleting some of the junk, fine, but I'm not going to tear this thing apart for her. She's the one who did it. I don't want to. I don't know.
Dave: Yeah. Yeah, I mean sometimes you've just got to let people do what they want. This isn't a mentor/mentee relationship, but with clients, sometimes they're just like, "Oh, I just want to put a whatever, sign up modal on the page." On load, you'd get the newsletter modal.
Chris: Yeah.
Dave: You're just like, well, if that's important to you and that's how you're going to get business, good.
Chris: Mm-hmm. I didn't have to code it. I don't have anything to do with it.
Dave: I don't think it's great for your user experience, long term, but if that is how you're going to make a business decision, I can't really stop you.
Chris: There were some really smart decisions she made in here, too. One of them was thought about better than I. Each one of these -- there's a listing and the listing can have multiple agents on the listing. I think she's using some advanced custom fields for it, so that's already cool. I would have done a repeater field and then just manually typed in the agents for each entry. That's where my brain would have went. She didn't do it that way. She made yet another custom post for the agent. Then made the agents individually. Then programmatically attached the agents to the entries in case the agent was used on multiple fields. I'm like, "What are you a genius? That's relational database stuff."
Dave: Yeah.
Chris: That's like you nailed it.
Dave: Wow.
Chris: Good job.
Dave: See. Advanced.
Chris: That would have been a mess that you dug. If you did it my way and not your way, that would have been a hole that you dug for yourself that would suck to dig yourself out of later.
Dave: You know it's tough. You always want to do -- you're like, if I just do it this way it's done.
Chris: Right.
Dave: If I just enter it this way, it's done. But almost always, you need to take that one next step to where it's very decoupled and very reusable.
Chris: Right, like we didn't do this on ShopTalk Show. We didn't make Jen Simmons a unique database object in which we apply to the show. We just typed Jen into the show.
Dave: Yeah.
Chris: Which might work for us because maybe the Jen of past might have a different avatar and have a different job and stuff and that's relevant to that show.
Dave: Yeah. Yeah.
Chris: It doesn't need to change over time. But we didn't do it. Whatever.
Dave: No, and so we don't have any kind of guest database.
Chris: Yeah. You can't say, "Show me shows that Jen Simmons appeared on." You can't do that because she's not a tag or anything.
Dave: Mm-hmm.
Chris: You can search, but even our search is just kind of limited by a little bit of metadata in the title. I guess that works. And we put effort into this.
Dave: Yeah. Yeah.
Chris: This wasn't just like, whoops. At one point, we programmatically redid the whole site and still don't have it. [Laughter]
Dave: Well, I have done it before, in the past, in an old WordPress, at least. I think a lot of plugins smoothed it over now. In old WordPress, it was sort of a bit of a dance to get this relational thing happening. It didn't feel great, I guess, is what I want to say. [Laughter]
Chris: Yeah. Right. Programmatic connections between posts is not a WordPress strength in any capacity. Although, the way she did it is probably the best it can be done, which is kickass.
I don't know. We have a few minutes. Let's see if we can -- I'll find one of these that we should do real quick.
Chris: Christian Strausbach. I'll pick the last one on the list. Why not? "Hello, guys. Loving the show since day one." Oh, baller. "I listened to it under my helmet on my motorbike tour through Australia."
Dave: Wow! Stay safe. [Laughter] Sorry.
Chris: Yeah.
Dave: Yikes. Okay.
Chris: "I'd like to know if--" I mean this is probably -- he probably wrote this in November. That's how fast we are at answering questions.
Dave: Okay.
Chris: "I'd like to know if you start designing a website as mobile-first and then convert it to a desktop or if you go mobile-first or if the mobile-first feels wrong. You start on the desktop version or what. What are your thoughts?"
I guess he's asking for, like, generally, because I don't know. I've certainly done projects both ways. Haven't you?
Dave: Yeah. Yeah, I mean we probably -- we're maybe slippery. We'll kind of do the desktop and then we'll build that as quick as we can. Then we'll have a mobile view and then we'll show the client the mobile view or they start insisting on that.
Chris: Interesting. Desktop first, even for Paravel? I definitely am. [Laughter]
Dave: We build it mobile-first, and that's the important part.
Chris: Oh, you dev it mobile-first. Yeah, I see.
Dave: Yeah, yeah, for sure, dev it mobile-first. But, you know, I think that's also just a function of what you're developing on. I have done a few mobile-first apps, like very mobile-first. I think my struggle there, and I think you can -- it's that thing where you need to know where you're going, to some degree, too, from a markup perspective. I'll just do a mobile column and I'm like, "Great. I'm done." Then stretch it out and it gets weird. Then I'm just like, "What do I do?" because I had this spreadsheet looking thing. But now that doesn't work on a desktop. You can't just have edge-to-edge borders or whatever. I don't know. You hit a limit where it's weird, so I think building it mobile-first, like you said, the traffic is overwhelmingly mobile now. I do think we all need to reprogram our brains and start thinking of your website as a mobile thing, not a desktop thing.
Chris: Mm-hmm.
Dave: But I think, from a design perspective, it does kind of help to know where you're going from a holistic viewport sort of perspective.
Chris: Yeah. Yeah, that's cool. I mean I would trust you. There's nobody in the world I'd rather have working on my system than Paravel. You all got this--
Dave: Well, thank you. Never phone in your mobile experience at the same time. When you're building it, you have to consider both of these at the same time. You can't just be like, "Oh, we'll figure out mobile later." It just never works.
Chris: That's the thing is it's harder. It's just harder, so start with the hard one first.
Dave: Yeah.
Chris: You have to make harder decisions. What's going to be here and what can't? Just straight up, there's less room. You can't pack too much crap on there. The thing is going to suck and your mobile design intuition is going to be like, "This sucks," if there's too much on there. If you're having, "This sucks," you've got to pull some stuff back. Start getting deeper into the design. Make those hard calls. Then as it gets wider, the decisions are just easier to make.
Dave: Yeah.
Chris: You know I had this thought. Here's one. This is totally random. You know how all these mobile sites have a fixed bottom bar for navigation?
Dave: Yeah. Yeah.
Chris: So does Windows and so does Mac, the OS. It has a dock on the bottom and you click crap on the bottom. Why don't desktop websites ever use that? They never have a doc.
Dave: [Laughter] You know, well, fixed positioning is weird in iOS, but is it Kristen.dev? Kristen. What's Kristen's last name? I forget already. @kristenkwng on Twitter. She released a new website. I'll put it in the show notes here. She released a website that's an OS, basically. It mimics an OS.
Chris: Cool.
Dave: It's a React site and you can drag the window around and stuff like that. What was most impressive, because I saw the screenshot of a mobile OS and I just was like, "This is going to fail on my phone." I pull it up on my phone and not to be a dufus, but I just know it's hard to come up with that. She has the little Mac-style icons on the right but then when you go to the phone view, they're actually arrayed on the bottom like a tab bar. It's a killer experience and she knocked it out of the park. I just was impressed because I just know that's hard when you get to, "What am I going to do about the mobile experience?" She figured it out and has a little tab bar of folders at the bottom.
Chris: I've got to go to my other computer to look at it.
Dave: Oh, man. It was really good. Anyway, I think there's that new mobile Safari fix, the viewport height fix. Do you remember the name of the property?
Chris: Oh…
Dave: It's like a WebKit.
Chris: Yeah, fill available.
Dave: Height.
Chris: Is it WebKit fill available?
Dave: Fill available?
Chris: Yeah. That fixes that.
Dave: Look at fill available.
Chris: It has to do with when the keyboard comes up or when there's the go back button along the bottom and all that.
Dave: Yeah, because does disappearing header/footer bars and they shrink and stuff like that. You're 100 VH calculation was always wrong. 100 VH was never 100 VH. It was 100 VH but it's now behind the back button and the favorite bar.
Chris: Right and you kind of can't change it because it will break other stuff and the Web doesn't like breaking stuff like that. Their solution is another value, like, don't use 100 VH. Use this fill available which is really similar but different.
Dave: It's similar but different. It's good. I'm glad we have that, at least. The problem I always hit was when I pull this up on the iPhone, it's broke, and all my math is wrong.
Chris: Yeah.
Dave: …viewport math.
Chris: Why didn't they use N? They made N for fricken' the notch and all that stuff. Why is it always something different? Why not use N screen height minus -- I don't know. Maybe that's because it's hard to….
Dave: Are you telling me one of the most closed source operations has some unilateral transparency issues?
Chris: Ooh, well said.
Dave: I would be surprised. Anyway. I do wish -- it does seem like they -- they find these fixes and they want to release in a way that they can control it, but it would just be better if there was some not sort of secret but some sort of cabal or like when they changed viewport, the meta viewport entirely just because and it was just like, what? It'd be nice if they didn't do that stuff.
Chris: Yeah, it would. All right, well, we did it. We talked about a bunch of random stuff. That's how we roll.
Dave: Hope you like email, everybody.
[Laughter]
Dave: If you got this over email, we switched over to Mailchimp over on the ShopTalk email. You can get this emailed to you if that's how you prefer to get your podcast, but be sure to download, star, heart, favorite this up on your podcatcher of choice. That's how people find out about the show. We don't really do any marketing. [Laughter] We don't have commercials on other podcasts. It's only by you sharing it that people find out about it, so we really appreciate that. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.
If you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you.
Chris, do you got anything else you'd like to say?
Chris: [Deep breath] shoptalkshow-fill-available;