Piccalilli Members Newsletter #16

Categories


    Howdy pals 👋

    It is Friday and I feel like I’ve worked about a million hours this week. The good news is, I hit a heck of a milestone on the writing project that can’t be named yet: I submitted all the drafts.

    Writing drafts is the worst part of a big writing project for me and it really gets on top of me. That’s why the last few issues of this newsletter have been a bit thin, because frankly, iA Writer and I have been sworn enemies. The same thing happened when I was neck-deep in drafts on the Eleventy Course too. I much prefer doing what's coming up next: collaborating with editors, digging into the detail of the content and making cool stuff with CSS!

    Now that I’m over the hump of this project, I’m going to get back into making more Piccalilli content too, because I’ll have some bandwidth again. Because I’ve been sworn enemies with my writing software, writing content for here when—especially recently—I’ve been clocking thousands of words a week just aint been happening, as you can probably imagine.

    Behind the scenes permalink

    Now that I’m in a better place with this writing project, I started getting back into material I was working on for this site—notably the latest premium tutorial: building a carousel that is not actually horrible for users.

    Folks, I’ve thrown in the towel. I can’t get the prototypes to a stage where I could endorse their usage on a website. As you probably know, I take inclusivity in design extremely seriously and frankly, carousels don’t support that, so it’s now in the bin. You’ve gotta know when to give up on stuff and last night, I finally let go.

    Some of you in the Discord mentioned you’d get a benefit from the reasons why I gave up on the carousel stuff, so here’s some quick points:

    • Everything needs to be observed all the time. I was using a Proxy state to manage this, along with ResizeObserver and IntersectionObserver, just like I did in the burger menu tutorial. This all worked fine, but it got to the point where I had to ask: is all of this complexity actually helping the user experience or is it just making a terrible experience less bad? The answer, in my opinion, is the latter.
    • I spent more time hiding content from screen readers than anything else. I’m not into that.
    • Although CSS scroll snap makes things easier, there’s still loads of messing around with skip buttons and slide navigation that makes everything feel exceptionally clunky

    There are some not terrible options. Firstly, if you want something accessible, the WAI one is decent, but ugly as heck. Sure you can style it up with CSS, but I was trying to teach y’all how to build something that actually looked really good too. The Filament Group one is pretty decent too. They’re good people there, so you know it’s built with the right stuff.

    I’m pretty settled that the only way I’ll use this pattern is to have a swipey-boi on a product page, so people can scroll through images only. Here’s a demo of what I mean. You can do that with only a few lines of CSS too.

    Code language
    CSS
    :root {
      --swiper-item-size: 100%;
      --swiper-gutter: 0;
    }
    
    .swiper {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    .swiper > * {
      scroll-snap-align: start;
      flex: 0 0 var(--swiper-item-size);
    }
    
    .swiper::-webkit-scrollbar {
      display: none;
    }
    
    .swiper > * + * {
      margin-inline-start: var(--swiper-gutter);
    }
    

    Even with this though, it presents issues for mouse users, so meh, I’m inclined to cover some material on making design decisions that are good alternatives to these sort of patterns, maybe.

    Now I’ve put that carousel tutorial in the bin, it means I am open to suggestions for the next premium tutorial! I like to get really deep into the details of something for these—they’re pretty much short courses—so if there’s something meaty you want to learn, let me know. I’m currently thinking something with React/Vue might be worth looking at.

    Memberships just got cheaper permalink

    I’ve been quietly thinking about doing this, pretty much from the day I launched memberships on this site and today, I flipped the switch. Every member now gets the same access to everything for the same price: $5 per month. This means everyone gets free access to premium tutorials, huge discounts to courses and all the usual Discord and newsletter stuff too.

    Why have I done this? I’m trying to find the perfect balance right now. I obviously need Piccalilli to sustain me from a “business” perspective because heck, I have a family to feed and staying independent is incredibly important to me. I also don’t like charging individuals lots of money for things because y’know, we’re all trying to get by the best we can. I’ve decided to set it so all members pay the same $5 so it takes the pressure off folks, financially, and opens the door to folks who might have found the old supporters club plan too expensive initially—$10 a month was just a bit steep for some folks and yep, I get that!

    I did a similar exercise with courses recently by slashing the prices to $69 (nice) instead of £160. I’d say revenue has actually probably increased since and people have paid less money, individually. I’m happy with that.

    You may have also noticed I’ve put some ads on the site. This is again to try and spread money around a bit to take the burden off folks. I selected Carbon Ads because I’ve had success them with the past and they are very much as good as it can get in terms of ad providers. They seem to be much less horrific than other ad networks. If they become problematic, they will be removed immediately. So far the page speeds don’t appear to have been affected too much, which again, is very important to me.

    I’ve tried to add the ads to the site as tastefully as I could. I spent a lot of time working on layout, flow and because Carbon let you customise ads: design. I don’t want them to get in the way of content, so they just show at the start of a page and stay out of the way. I’ve also mixed these with internal ads which I’m considering switching to be sponsor slots, so companies can pay ~$250 a month to have their stuff there. I’ve got lots of thinking to do about that, but if you’re part of a company that would be into that sort of thing, give me a shout.

    Some housekeeping for members while we’re here: if you log in again with your access link, all of the ads on the site will vanish. There’s no way I’m making members see ads!

    Wrapping up permalink

    Sorry, this issue was a bit of a long one! I hope you’re all happy with these changes that I’ve made to the membership system and ads stuff. As always, I’m open to suggestions, so let me know if something is bothering you.

    To all the members, thank you all for being such lovely folks. I’ve said it before, but even when I’m super busy, I love popping into the Discord to see you all chatting and helping each other out. It’s very wholesome and I’m very happy and thankful you’re all there.

    I made this newsletter free to everyone too, so folks could get an idea of what it’s like. I hope you enjoyed it and if you did, please consider becoming a supporter.

    Until next time, take it easy 👋

    Become a supporter by joining the Piccalilli Membership

    For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

    Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

    Support Piccalilli by becoming a member

    Sign up for updates

    Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.