A few weeks ago I gave a talk for Smashing Meets about Web3. Find the talk description below.
You can watch the video of ‘Web3: creating problems where we need solutions’ on Smashing Magazine’s Vimeo.
Web3 is one of Silicon Valley’s latest buzzwords, hoping to become a movement. Blockchains, cryptocurrencies, the metaverse, and NFTs may paint themselves as futuristic solutions to tech and society’s problems, but who really benefits from their use? We need to confront the harms of Web3. But first, we need to understand them. In this talk, Laura will explain the technologies behind Web3, why she believes they raise serious ethical questions, and how they are not the alternative to Big Tech we need.
I would also really recommend watching Trine Falbe’s talk from the same event on ‘Selling Ethical Decisions’. Trine truly gives the most pragmatic and practical advice on ethical design.
Read the original post, ‘Web3: creating problems where we need solutions’.
Read more
In September I’ll be speaking at Design Matters in Copenhagen. Ahead of the event I was interviewed by Giorgia Lombardo about accessible and inclusive design.
Read the interview, ‘Get on the Path to Accessible and Inclusive Design with Laura Kalbag’.
Read the original post, ‘Get on the Path to Accessible and Inclusive Design’.
Unsurprisingly, it’s been a busy few months since I started working with Stately. My website is in a state of neglect, so I’m here with a quick remedy. In vaguely chronological order…
Remove Trackers (on CSS Tricks).
I wrote a response to “What is one thing people can do to make their website better?” on CSS-Tricks. Of course, I chose “remove trackers.”
In related news…
Sadly, Better Blocker is no more.
After years of trying to work through Apple’s App Store bureaucracy and then finding out about Apple’s latest proposals for privacy violation, we decided it was time to retire Better Blocker. If you’re looking for an alternative, we recommend 1Blocker.
I’m still horrified by tracking on the web and will keep an eye on developments, but it’s going to be better for my mental health that I’m no longer examining some of the worst of the web every month.
Speaking at Smashing Meets on 9th February.
On the 9th February 2022, I’m speaking at a Smashing Meets event on (design) ethics. My talk is “Web3 — creating problems where we need solutions.” Yep, I’m a sucker for social media blowback. But it’s a topic we need to discuss in more detail, and I’m speaking alongside the brilliant Trine Falbe, who always gives insightful talks.
Read the original post, ‘Winter catchup’.
Read more
From today, in addition to my work at Small Technology Foundation, I’ll be working with Stately on developer and designer relations as a contractor.
The pandemic has made finances tighter at Small Technology Foundation as we’d usually support our work with in-person conference talks which would pay speaking fees. We were already thrifty with our income, but we’ve still got a way to go before the Small Web is financially self-sustaining.
With that in mind, I decided to look for suitable additional work that would allow us to keep Small Technology Foundation running and give Aral the space to keep doing the intensive research and development required for Small Tech.
Stately is a good match because they’re working on tools I’d want to use myself, I get to use the full range of skills and experience I’ve developed over my last twelve years in tech, and I’ll have the time to keep things at Small Technology Foundation ticking over.
It’s going to be an adventure!
Read the original post, ‘Working with Stately’.
Read more
Earlier this week a case study of Small Technology Foundation went up on the Scotland’s First Minister’s National Advisory Council on Women and Girls website. I was asked to share our work as part of their digital Spotlight on Women and Girls in Digital Spaces and Industries.
The audience for their site, and the case study structure, made me really think about how to communicate what we do at Small Technology Foundation. I aimed for plain English and clarity, and I think it resulted in a nice summary of our work over the last seven years. If you’re interested, you can read the case study on the NACWG website.
Small is Beautiful
Writing the case study also made me realise that I’ve not mentioned Small is Beautiful on my blog yet. Small Is Beautiful is a monthly livestream hosted by Aral and me. We usually have guests (sometimes not) to discuss their projects and work that is in, or adjacent to, Small Tech. The livestream is around an hour long, and we have an open studio where anyone watching can join to ask questions, either on or off camera. Afterwards, the livestreams are available as videos on the Small Tech website, complete with transcripts and captions.
Next week is our 10th edition, and if you’re interested in livestreaming and making videos without Big Tech, you’ll really want to join this one. We’ll have more information about it tomorrow on the Small is Beautiful page.
Read the original post, ‘Small Technology Foundation as a NACWG Case Study’.
Read more
A couple of weeks ago, Aral asked me if I could write a user stylesheet for web browsers to make Twitter nothing but a compose box.
Jump straight to how it works
I totally get it. Twitter sucks your time and soul. But sometimes you need to use it to share what you’re working on, or promote events. Essentially, you want to use Twitter but you don’t want it to use you. The way to do this is to hide every part of Twitter’s interface that doesn’t help you compose a tweet, or otherwise likely to distract or derail you.
The power of CSS pseudo classes
As part of my work on Better’s blocking rules, I sometimes have to hide parts of the page using CSS. Hiding ads isn’t really Better’s purpose, we try to block the tracking and behavioural advertising scripts before they put anything on the page. But occasionally, sites have rolled their own obnoxious first-party targeted ad system that is inseparable from the rest of their site’s functionality. On such occasions, I roll up my sleeves, and get my pseudo CSS selectors out to set these elements to display: none. Because, of course, these sites design their HTML and CSS to avoid blockers like Better.
The problem with user stylesheets
Hiding parts of Twitter’s interface is a similar problem. Luckily, a lot of Twitter’s interface has semantic naming (amongst the gazillion nested divs and robot-generated CSS classes) for accessibility purposes, so it’s simple enough to hook into these elements for a user stylesheet. The problem with user stylesheets is that they’re a blunt instrument, aimed at making global changes across every site you visit. Really useful for making font sizes big on every site you visit, but if you use it to hide any element with the class of “timeline”, chances are you’ll break a lot of websites you visit.
A solution to target specific websites
My solution was to chain what I suspect are fairly unique element selectors in a likely unique sequence, ensuring that these rules will only apply to twitter.com, even though the stylesheet will be used on every site visited.
/* Hide the Home timeline and Explore timeline */
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Your Home Timeline"],
div[data-at-shortcutkeys] header[role="banner"] + main[role="main"] div[aria-label="Timeline: Explore"] {
display: none !important;
}
As you can tell from the selectors I’ve used, it is fragile as anything. As soon as Twitter decides to change the aria-label for its home timeline, the stylesheet will no longer effectively hide the home timeline. But, as with a lot of Better’s blocking rules, this is a balance between using a fragile rule that works against a big corporation that tends to be pretty slow in rolling out changes to its interface.
After a couple of weeks of using this stylesheet in my primary browser and not noticing any issues with other sites, I’m fairly confident in sharing this stylesheet with anyone else who might find it useful.
How the stylesheet works
I ended up creating two stylesheets, one for Aral’s way of working (write-only.css), and one for my way of working (read-some.css).
Write-only Twitter
write-only.css is a user stylesheet for the browser that hides absolutely everything except the Home feed compose box on Twitter. write-only.css in action.
Read-some Twitter
My Twitter use varies, particularly as I sometimes use it for Better support, so I need to be able to access a bit more of Twitter’s interface.
read-some.css is a user stylesheet for the browser that hides:
Home timeline
Explore timeline
List timelines
but keeps:
Mentions
Messages
Settings etc
And let me tell you, having this stylesheet on my desktop Safari for the last couple of weeks has made a huge difference. Now I can check our @mentions without getting further distracted. Even when my muscle memory types “twitter.com” when I’m procrastinating or seeking distraction, the page loads so minimally, I take one look at it and close the tab. It no longer appears in my “Frequently Visited” sites! read-some.css in action.
Where to find the stylesheets
You can download the Write-Only Twitter stylesheets and find out more about them on our Small Tech repository. I’ll update them when needed. There’s not instructions for every browser in there, but it shouldn’t be too hard for you to find that information if you need it. Personally I recommend Safari for everyday browsing as you can use Better Blocker to block trackers while you browse 😉 Like this? Support my work! If you find my work useful or valuable, please help me continue by supporting our work at Small Technology Foundation. We are a tiny not-for-profit organisation working on everyday tools for everyday people designed to increase human welfare, not corporate profits. You can support us by becoming a patron of our foundation, or just by giving my work a shout-out. It really means a lot to me ❤️
Read the original post, ‘Write-only Twitter’.
Read more
There’s a lot of discussion on UK Twitter right now about women’s safety in public spaces. And of course, I’ve been afraid to walk after dark, and sometimes even during the daytime, in most places that I’ve lived and visited. Since I was a young teenager, our friends would always make sure nobody walked home alone at night. That’s why it astonishes me to hear from cis men who don’t understand how much the rest of us fear them.
I don’t feel safe at conferences
A lot of people are wondering what they can do to change this situation. (I mean the reasonable people who aren’t blaming the victims.) And so I wanted to bring up the safety of in-person conferences, in the hope that perhaps conference organisers might take this opportunity to commit to making their events safer, and less scary, for people who justifiably fear harassment and harm from cis men.
For the last few years, I’ve had the following in my conference speaking terms:
Please arrange for someone to meet me at the airport or train station.
I’m happy to take public transport, I would just appreciate some company! As a woman, it really means a lot to feel safe travelling to/from venues at night. I’ve had conferences expect me to walk alone across an unfamiliar city late at night in the dark. If the venues are close-by, or there’s someone who can help me get back safely, I’d really appreciate it.
I can count one conference that has actively taken my request seriously, or even acknowledged it.
Most conferences have parties that end late in the evening, often at venues at a distance from the event venue, and potentially further away from the accommodation they book for speakers. I can’t count the number of times I’ve walked back to my hotel from a venue in the dark, trying to map the route on my phone, hoping my mobile roaming plan will hold out for long enough in a city I’ve never been to, trying not to draw attention to myself as a small and weak person. Trying to decide whether it’s safer to travel on faster empty public transport where I could be trapped with someone, or taking longer walking where at least I could try to run away. Never wearing earphones, trying to stand tall and walk stridently as if I’m a strong woman who knows where she’s going. Often having had confrontations with aggressive men at the conferences who disagreed with my views, or thought I wasn’t sympathetic enough to their perspectives. Usually I’ll leave a party or dinner early if I know another speaker (who I feel safe with) is going back to the same accommodation, so we can travel together.
Perhaps my request isn’t strong enough, perhaps I need to chase up the organisers to ensure my requests are heard. If I’m honest, I struggle to ask for “special treatment”. As someone who is not a big name cis white guy, who chooses to speak about “challenging” topics like accessibility, inclusivity, privacy and rights, I’m all too aware of constantly walking a line where I could easily be dropped by an organiser for being difficult, or not worth the effort.
What can conferences do to improve our safety?
It would really help me, and other people who feel vulnerable in these situations, if conference organisers could help keep us safe. I’ve got a few specific ideas below. I’ve tried to focus on affordable options:
Provide speakers with maps (that don’t rely on internet connections!) and optimal travel information to help them get between your venues and their accommodation.
Meet speakers at the airport or train station, help them get to the venue or their accommodation safely.
Arrange a buddy system so that speakers don’t need to travel alone, whether that’s with other speakers, organisers or attendees. Give people an easy option to choose another buddy if necessary, and don’t question their need to do so. (Unfortunately many of us know people in the industry with whom we’d not feel comfortable alone, and do not want the repercussions of sharing their names publicly.)
At the conferences themselves
Safety at the conference itself is a whole other issue. I could write many blog posts about codes of conduct, their lack of enforcement, and the poor behaviour of both conference attendees and organisers. Maybe another time.
For non-organisers
If you’re a cis man at a conference, please be aware that you are, by default, a threat. It’s not personal, it’s statistics. And unfortunately usually based on past experience. You may well be “one of the good guys”, but if you are a stranger (and sometimes even not), there is no way for us to know that you won’t harass or harm us.
What can you do to help? Number one, for all time, pay attention to the people in the room who may feel vulnerable and step in if they are being faced with any questionable behaviour. Passive-aggressive comments can often escalate into worse situations, don’t let it get there. Make sure people know when their behaviour is unacceptable, and take care of the person who had to deal with it, especially when they might be more vulnerable alone later on.
Ask someone if they need company getting to where they need to go, and help them find a safe route, or someone who is suitable to help them, well ahead of the time they need to leave. Realise that offering to take someone back to their accommodation can be perceived as a potential threat, so prioritise finding a person who will make them feel safe over being the hero yourself.
And try to make people feel less of a burden when you help them. When you are socialised as a person from a minoritised group, you are encouraged to politely refuse help that might make a cis man go out of his way. Yes, these requests can be socially awkward, and rely on you stepping out of your comfort zone. But a little of your discomfort could afford someone the safety that might just save their life.
Read the original post, ‘Safety at conferences’.
Read more
My site hasn’t had an update in a while. I broke the local version in the autumn last year, and told myself I needed to fix it before I posted again… a few months later and here we are!
Site.js and the starter theme
In our Small is Beautiful #2 livestream, I spoke about how I spent a lot of last year creating a Hugo starter theme for Site.js. We decided to move in a different direction with Site.js, but I’d built so much cool stuff into this new theme (please let me be pleased with myself for once!) it seemed a waste to not make use of it.
One of the key ideas behind the starter theme was to make a theme that could work for a whole website, or could be an accessible rights-respecting foundation for a site that has its own added-extras on top. Aral and I both use Hugo as the blogging system for our sites, as well as for the Small Tech website. Hugo has a pretty useful system for overriding the defaults in a theme for your own site, and I built the starter theme with customisation and flexibility in mind.
While we aren’t using Site.js itself (we’ve forked it) for our work with the Small Web, that doesn’t mean that Site.js is abandoned. Our aim is that the Small Web is an alternative to many of the Big Web platforms out there today, with a completely different infrastructure. Site.js is a tool for the web as it is today, for developing on a local server, syncing and deploying to your own server, with SSL/TLS certificates and site statistics, and no configuration required. In the future we aim to have Small Web sites that can communicate with each other, and do other useful things, but they’ll be more than we need for a simple static website. Site.js will still be useful for the good old static website, and so my starter theme should hopefully still be useful for anyone who wants to get a site up and running quickly with Site.js and Hugo.
What has changed?
I’ll explain more about how the starter theme works in a later blog post, but here’s some starter theme features I’m using for the new version of my site that you might find handy too:
responsive images with different sizes generated using Hugo and implemented with srcset.
snazzy photo gallery using Hugo to smart-crop the responsive images
dark mode (following your operating system’s preferences).
a subscribe page listing RSS feeds and explaining how to use RSS
no tracking whatsover (naturally.)
Of course any personal site update probably comes with bagloads of bugs, and if you notice any, please let me know! Like this? Support my work! If you find my work useful or valuable, please help me continue by supporting our work at Small Technology Foundation. We are a tiny not-for-profit organisation working on everyday tools for everyday people designed to increase human welfare, not corporate profits. You can support us by becoming a patron of our foundation, or just by giving my work a shout-out. It really means a lot to me ❤️
Read the original post, ‘A little site update’.
Read more
Ahead of the Small is Beautiful livestream this evening, I thought I’d share what I’ve been working on recently in text too.
Site.js starter theme
For the last (checks repository) nine months, I’ve been working on a Hugo starter theme for Site.js. As we were using Hugo, a static site generator, for our own sites, and Hugo was available as a binary, Aral decided it made sense to include Hugo in Site.js. The idea was that we make it as easy as possible for developers, and people with a little development experience, to get a basic blog or website up and running with Hugo and Site.js. The starter theme is my attempt to create a theme that has everything you need for an easily-maintainable website with accessible, rights-respecting defaults.
Pretty good defaults
The theme has quite a few elements of the theme that please me:
Accessible default templates making it easy to author accessible content.
Vanilla CSS for easy-to-read typography and using flexbox and grid for simple progressively-enhanced responsive layouts.
Responsive images generated using Hugo, including srcset images, and thumbnail images generated for social media.
Multiple colour scheme options, including dark modes, with accessible colour contrasts.
Favicons generated using Hugo, matching the chosen colour scheme.
A simple-as-possible (especially for Hugo!) six step process for getting a site running locally with Site.js.
Privacy page
RSS Feed
Ambition pared back
The current version of the theme is not quite production-ready, but still has a lot of useful bits and pieces if you’re a developer working with Hugo. Ambitiously, we originally aimed to have the theme fit flexibly for a photoblog, standard blog, and simple few-pages website. This led to a lot of different configuration options which I tested across a few different demo sites. Below is a couple of examples of them: The photoblog layout, using the beautiful illustrations of Margo de Weert. The basic blog layout, where I started writing documentation for the theme.
As with all things Small Tech, our aim is to create things that we first use ourselves. That way we very quickly realise if something isn’t working, and we’re not making assumptions about the people who use what we build.
Towards the end of 2020, we came to three realisations:
Site.js, now a mature project, worked fine with Hugo, but didn’t need Hugo when it was forked into Place.
While my sites has a photoblog section, neither of us currently have a photoblog, and so the scope of the starter theme was moving further away from our specific needs.
Having a theme that accommodated so many different requirements added too many configuration options which raised the barrier to entry for anyone trying to understand the theme.
I was divided. Do I completely ditch the starter theme, pulling what I’ve learned into the custom Hugo themes we’ve created for our other sites? Or do I rework the theme, pare back the ambition, into something we can build all our sites upon, and hopefully be more useful for other developers too?
At first I dabbled a little with the former approach. I had learned loads about Hugo in the process, it hadn’t been wasted time and effort. But then I realised that my own site sorely needed the update. The Small Tech site could do with it as well. A website is fairly easy to maintain if you’re never updating the content, or even if updating the content is your full-time job. But if you don’t have much time to update your website, or multiple websites, the maintenance has to be really easy. You should need to re-learn a content management system, add a bunch of new CSS, or write HTML in your markdown every time you want to share a new blog post.
So my 2021 starter theme strategy was born: strip out any excessive configuration, make the theme easy to use, and make it a joy to update my own website again. I’m less than a week in and it’s going well. You’ll know if my new strategy has worked when my site gets updated again!
Better Blocker
Last year, on top of all the other things, I still managed to get a few blocking rule updates out for Better Blocker. Honestly, Better Blocker doesn’t make us a load of money, and we’re running a not-for-profit organisation, so I try to be very efficient with my updates. (And close my ears to people who don’t believe an app is worth a onetime payment of €2 unless it has frequent arbitrary updates!)
Over time, the updates to the blocking rules are fairly repetitive. Not much has changed in the tracking landscape in the nearly-five years that Better Blocker has existed. Every update I find a few more prolific trackers to block, I block a couple more blocker blockers, and I tend to revisit the same German tabloid websites with the most determined anti-blocking strategies.
The absolute state of web development nowadays means I’m seeing more sites break more spectacularly in the face of tracker blocking. The tech industry seems to be increasingly indiscriminate in relying on third-party solutions for large chunks of their functionality. Did you notice how many non-Google sites fell over when Google went down at the end of last year? I see that happen a lot with tracker blocking. Logins broken, checkouts broken, even links broken. CSS and even basic HTML content blocked from loading. No progressive enhancement anywhere. Fragile websites built entirely reliantly on other people’s platforms.
Every time I get cranky about development on social media, it’s usually because I’ve been trying to fix sites that break when visited with Better Blocker. I do a lot of work because of other people’s poor development practices, the venting helps a little. Takes deep breath.
We’ve also enrolled in Apple’s new Small Business programme, which essentially means we’ll see a little bit more money from app sales in the future. It’s something, but our involvement with Apple as a platform is plagued with irritations, and not a long-term investment, so I won’t go on about it here!
Read the original post, ‘January update’.
Read more
A few weeks ago I recorded a short video for the NYC School’s Tech Summit and the Eastern Partnership Civil Society Hackathon about accessibility in 2020. A lot of work went into it, so I thought I may as well share it with everyone! Like this? Support my work! If you find my work useful or valuable, please help me continue by supporting our work at Small Technology Foundation. We are a tiny not-for-profit organisation working on everyday tools for everyday people designed to increase human welfare, not corporate profits. You can support us by becoming a patron of our foundation, or just by giving my work a shout-out. It really means a lot to me ❤️
Read the original post, ‘Accessibility in 2020’.
Read more
Guest
