I have this web page to display the books I've read. Book covers often bring back memories and it's been great to scroll past them on my own page. It's also an opportunity to play around with book data. This week, I added a bit of page count-based visualisation for fun.

This is what it looks like: rectangles with colours based on book covers. Each relates to a specific book, and its size is based on that book's page count.

What's flex-grow?

Flex grow is part of the CSS's flex layout mode. When you add display: flex to a HTML element, it becomes a flex container, and with that, its direct children become flex items. Flex items behave differently from block or inline level children. The difference is that flex items can be layed out in a specific direction (horizontal or vertical) and sized flexibly. This system is called “flexible layout box model” or simply flexbox. It comes with sensible defaults as well as full control via a range of properties.

One of those properties is flex-grow. This is what it does:

[flex-grow] specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed

(from: CSS Flexible Box Layout Module Level 1)

So let's say you have ten spans in div, where the div is a flex container and the spans flex items:

If you want one to proportionally take up double the space and another to take up triple the space, you'll give them a flex-grow value of 2 or 3, respectively:

/* item 2 */
span:nth-child(2) {
  flex-grow: 2; /* takes up double */
  background: crimson;
}

/* item 6 */
span:nth-child(6) {
  flex-grow: 3; /* takes up triple */
  background: cornflowerblue;
}

The others will then each take up one part of the remaining space (as if set to 1):

The specification recommends generally using flex instead of flex-grow. This shorthand can take three numbers: a flex-grow factor (how much should it be able to grow), flex-shrink factor (how much should it be able to shrink) and a flex-basis factor (what size should we start with before applying grow or shrink factors.

We can also give flex just one positive number, to use that number as flex-grow, and a default of “1” as flex-shrink and “0” as the basis (meaning no initial space is assigned, all of the size is a result from the grow or shrink factor). In our case, we'll use that flex shorthand, it's a sensible default.

Flex-grow for widths, aspect ratio for heights

My sites displays, like, 50 books for a given year. Each with a different amount of pages. Some are just over 100 pages, others are over 500. I wanted to use that number as the flex-grow factor. This means some books claim space of 113, others claim 514:

[a-113-page-book] {
  flex: 113;
}

[a-514-page-book] { 
	flex: 514;
}

So that will claim 113 worth of space for the one book and 514 worth of space for the other. I used little magic for this, I just applied an inline style attribute to each book in my template (Nunjucks), setting flex dynamically. When they all have a number, they all take a proportion, and when all the numbers are similar amounts, you'll see that the size they take up is quite similar, except for a few outliers.

As mentioned above, these numbers represent a proportion of the total available space. You might wonder: which space? Flexbox can work in horizontal and vertical direction. Or, really, in inline and block direction, where inline is the direction in which inline elements appear (like em, strong) and block the direction in which block-level elements appear (eg paragraphs and headings).

Flexbox only takes space in one direction. For my illustration, I used the default, which is the inline direction or flex-flow: row (this is shorthand for a flex-direction: row and flex-wrap: nowrap). This means my flex-grow values are about a proportion of “inline” space, in my site's case, this means horizontal space.

I also want each book to take up some vertical space, as with only a width, we would not actually see anything. I could set a fixed height (in fact, I did that for the screenshot above). But in this case, I want the height to have a fixed relationship to the width. The aspect-ratio property in CSS is made for that: if an item has a size in one dimension, the browser figures out what the other dimension's size needs to be to meet a ratio you provide. In this case, the browser finds a height based on the width that it calculated for our proportion.

Ok, so let's add an aspect ratio:

.book {
  /* flex: [set for this book as inline style] */
  aspect-ratio: 1 / 4;
}

I also added a background-color that I have available in my template (it's a piece of image metadata that I get for free from Sanity).

Oh, but wait… they still have the same height! That's because by default, items are aligned to ”stretch”, they take up all available space in the opposite direction (block if items flow in inline direction, inline if items flow in block direction). When items stretch, remaining space is assigned back to them. In this case, that means they'll get the same height. Often super useful and quite hard to do pre-flexbox. But in this case, we don't want that, so we'll use align-items to set our items to align at the “end” (also can be set to “start”, “center” and “baseline”):

What the books looks like for different values of align-items

In my case, I also added a max-width to avoid extreme outliers and I addded opposite rotate transforms to even and odd items for funs:

.book {
  transform: rotate(-2deg);
}
.book:nth-child(odd) {
  transform: rotate(2deg);
}

This works with grids too

When I shared this, Vasilis rightly noted you could pull the same trick with grids. If you add display: grid to an element it becomes a grid container and its children grid items. That sounds a lot like flexbox, but the main difference is that sizing isn't done from the items, it is done from the container. For a grid, you define columns (and/or rows) that have a size. The fr is one of the units you can use for this, it's short for “fraction”. Pretty much like proportions in flexbox, fr will let you set column/row size that is a proportion of the available space. If you set all your columns with fr, each one will be a proportion of all available space in the relevant direction.

Summing up

I usually use flexbox with much lower numbers, often under 10. But it turns out, it works fine with larger numbers, too. I have not done extensive performance testing with this though, there may be issues if used for larger sites with more complex data.

Originally posted as Data-informed flex-grow for illustration purposes on Hidde's blog.

Reply via email

With only a few days left 2022, I wanted to review some of my 2022, including speaking, reading, music, writing and travel. Let's go!

Note: like in 2021, 2020, 2019, 2018 and 2017, in this public post I mostly sum up “highlights“, stuff I liked about the year etc. Of course, life is more complex and less structured than posts like this make it out to be.

Work

From February, I started working full time at Sanity.io, we focus on making content management pleasant for everyone involved. I'm in the developer relations team, with a focus on things like documentation, starters, videos and workshops. The problems are intriguing, they are both technical (like real time multiplayer content editing) and organisational (like cross functional collaboration). I'm enjoying being in a place where I can learn a lot and contribute a lot of my experience at the same time. I feel lucky with great colleagues. Some things we released this year: Sanity Studio v3 (customisable SPA to edit content), GROQ 1.0 (language to query content) and an /accessibility page following an accessibility review of Sanity Studio.

This year I did only minimal accessibility consulting. including reviews and presentations for UWV, a Dutch governmental organisation focused on employment and unemployment, DigiD, the Dutch digital government identity and MDN/Mozilla.

I am also still involved in Open UI CG, where I try to learn and contribute: I scribe sometimes, join discussions where I can and talk about the work at events. This year, we got a lot done on <selectmenu> and popover. See my posts on customisable selects and dialogs vs popovers.

Speaking

This year had many more in person events, and I have loved speaking in person at JSConf in Budapest, EuroIA in Marseille and State of the Browser in London. Most talks were about accessibility, some about CSS, HTML and content.

In 2023 I want to talk about the nitty gritty of building popovers and the power of systems that use composability as design principle (see the Speaking page).

These are the talks I did in 2022:

• The Next Web on why that's not “Web3” for SendCloud (remote)
• A toolkit for web accessibility on the “toolkit” edition of Beyond Tellerrand's Stay Curious event (where Stephanie presented her awesome toolkit for CSS) (remote)
• It's the markup that matters at JSConf Budapest and Modern Front-ends Live
• Shifting left, or: making accessibility easier by doing it earlier at DevOps Amsterdam (remote), the Sanity July meetup (remote) and State of the Browser
• Editor experiences that your team will love, a workshop, at React India (remote) and React Summit Amsterdam (remote)
• More to give than just the div: semantics and how to get them right at Frontmania
• Your CMS is an accessibility assistant at IAAP-EU (remote)
• Cross-functional collaboration for structured content, a workshop at EuroIA and Structured Content Conference, developed by my colleague Carrie Hane, co-facilitated by my colleague Simeon Griggs
• Styling selects? You've got options!, a lightning talk at CSS Day + CSS Café

Reading

In total, I read about 30 books this year, still a mix of physical, ebooks and audiobooks.

On technology, I loved Blockchain chicken farm by Xiaowei Wang. “Hustle culture” isn't just a Silicon Valley thing, it's there in rural China. From “e-commerce villages” that solely focus on producing for Taobao to free range chicken on the blockchain (of course it added no value). Awesome mix of technology, travels, encounters, food and how the world and life works from an original thinker. Original thinking was also in Ways of being by James Bridle, about artificial intelligence, ecology and the relationship between the humans and the ‘more than human’ world. He critiques the idea that the world, all of the world, can be computed and represented in data points. He shows why that would be a limited way of thinking. It's a little vague sometimes, according to Cory Doctorow that's because the book argues against crisp articulations themselves.

Two books I liked about identity and cultures were Takeaway and If I surivive you. Takeaway by Angela Hui is about what it's like to grow up in rural Wales when your parents run a takeaway. Often entertaining, often touching tale of family relationships, finding identy and racial abuse. Food is a central theme too, the recipe each chapter ends with was a nice touch. I found If I survive you, by James Escoffery, a very well written collection of short stories about a Jamaican family in America, about existing between two cultures, capitalism and being black in America.

I also thoroughly enjoyed Erasmus: dwarsdenker a biography of the philosopher/theologician Erasmus (in Dutch). Didn't know Erasmus spent lots of time begging patrons to fund him, so that he could write, travelled a lot (UK, Germany, Belgium and France, by horse and ship), got ‘jobs’ in the church that came with a livelong salary without requiring him to actually do the job (this was a thing at the time, Erasmus had his in Aldington, UK and Kortrijk, Belgium) and Erasmus had criticasters who published their criticisms anonymously and circulated lists of criticisms on his New Testament, mixed with gossip about his life and history. Glad we don't do any of that anymore. Oh wait…

Music

This year I listened a lot to:

• Kendrick Lamar's new album Mr Morale and the Big Steppers, which was my first introduction to his music and got me ready to explore all the earlier albums that everyone had been raving about. A colleague recommended the Dissect podcast, which explains To Pimp a Butterfly track by track in hour long episodes.
• Nubya Garcia's Source remix album: saw her live in Rotterdam and have had her Tiny Desk and BBC Proms (posted last month) gigs on repeat
• WIES, Froukje, Joost Klein and Hang Youth: there has been a resurge in Dutch artists performing in Dutch (English has been more common), loved the Bandje pun on the Dutch Prime Minister's dismissive attitude towards the performing arts and ‘Met je Ako ideologie’ on getting one's world view from the train station's best selling non fiction (not making this up)
• Robert Glasper's Black Radio 3 was my favourite album, where jazz and hiphop meet. Beautiful spoken word on a Radiohead-esque melody in the opening track and lots of collaborations with people like Esparanza Spalding and A Tribe Called Quest's Q-Tip (on one track) throughout.

Writing

I finally added some more useful categories to this blog, moved to a veey short domain (it's just hidde.blog) and published about 30 posts this year. I'm most happy with:

• Dialogs, modals and popovers seem different: how are they different: a deep dive into these common patterns, with many thanks to Adrian Roselli and Scott O'Hara for their review help
• “That's not accessible!” and other statements about accessibility
• ATAG: the standard for the accessibility of content creation, I learned a lot about ATAG while I was at W3C and this was my personal plain language version
• The web doesn't have version numbers, the industry continued to surprise me with its dreams of making everything about money and ‘on’ an inefficient database (I'm also feel the ‘metaverse’ is a non-sensical investment)

Cities

San Francisco, Budapest, Düsseldorf, Cologne, Oslo, Paris, Marseille, London (5 times), Brighton, Antwerp, Lille, various towns in Normandy and Taipei.

It's especially been nice to meet international internet friends in person, many for the first time, like Nicole, Tantek, Yulia, Vadim, HJ, Adam, Una, Gift, Adrian, Manjula, Ana, Jeremy, Michelle, Mu-An, Bruce, Andy, Sophie, Léonie, Anuradha, Jhey and Patrick. Plus almost all of my colleagues.

Conclusion

That's all for this year, thanks all for reading my posts, liking subcribing, disagreeing via email, everything! If you've posted a year in review, let me know, I'd love to read it!

Originally posted as 2022 in review on Hidde's blog.

Reply via email

I'm mostly on Mastodon now (I'm @hdv). What I mean by that I try and keep up with what people share on their Mastodon timeline and no longer do so on Twitter.

In the past weeks, I've gone to “mostly Mastodon” from “partially Mastodon and partially Twitter”. I did join a Twitter Space and still post every now and then, but it feels increasingly uncomfortable. I also monitor DMs, but will give out iMessage/LINE/Signal info to any mutual who wants a better way to contact me.

I wrote about reasons to leave Twitter earlier, new reasons pile up:

• a lot of the people I care about are now on Mastodon or stopped posting on Twitter (yay)
• quality matters more than quantity
• Mastodon has open ways to syndicate your content (it's been long since Twitter had open APIs)
• Twitter is mostly ChatGPT screenshots these days anyway (only partially kidding)
• the new owner tweets a lot about “woke” as if it is a bad thing
• the new owner doesn't seem to understand basic concepts like truth and free speech, but, and this is my main issue, continues to make bold claims about them, while running and making decisions about Twitter
• the new owner spreads misinformation including about public health, again, while running and making decisions about Twitter

So, I'm mostly not spending time on Twitter.

I'm mostly on Mastodon, instead. What does that mean? I post there primarily and only occassionally (and manually) cross-post to Twitter. I consciously choose Mastodon when engaging with cross-posted tweets, sometimes this means looking up a toot-version of a tweet, which is a bit of a nuisance, but fine. I've put my Mastodon presence on slide decks instead or in addition to Twitter, and added it to the footer of posts.

Maybe you wonder why I don't just go, why I share all this? Touché. Well, it's been a non trivial decision for me, after decades on Twitter and making lots of connections there, the start of many professional and not-so-professional relationships and friendships. I can imagine it's the same for you. If you're reading this and are still mostly on Twitter, may I ask you to consider spending more time on Mastodon? It isn't as hard to use as sceptics make it out to be. Together we impact which place is more worthwhile.

Originally posted as Mostly on Mastodon on Hidde's blog.

Reply via email

The ACT Rules Community Group (CG) writes testing rules for accessibility standards conformance. In the process, they find consensus in interpretation issues. This week, the CG published an “Implementations” page that shows these rules are not used in just one place, but in many: from manual methodologies to semi-automated (axe DevTools) and automated (axe-core, Alfa, Qualweb and more) tools.

Before going into why this is great, I will give some context. Accessibility standards like WCAG define criteria to conform with, they help makers of websites understand what a web without barriers means in practice. For instance, in WCAG, it means colours have sufficient contrast, pages have titles, buttons have names, and so on. In WAI-ARIA, it means elements with a cell role must be contained in or owned by an element with the row role, to name just one example. These, and all other requirements (“MUST”s) in standards, are testable requirements. This makes testing basically the process of finding out if you meet the standards (you, a product, a browser, a tool, an assistive technology, etc). It is a great lens to view accessibility through. and definitely a lens I use a lot when teaching.

But if you ever speak about the same issue with multiple accessibility specialists, you'll find that there can be differences in interpretation of these standards (see also: The Accessibility Interpretation Problem by Glenda Sims and Wilco Fiers). One way to avoid interpretation issues would probably be to have thousands of success criteria WCAG that allow for zero interpretation, but that imaginary world would be a much worse world. Instead, agreeing on how to test might be the best option we have.

The ACT Rules Community Group brings together makers of tools and other stakeholders to make testing accessibility standards more consistent, by finding agreement. They then write rules according to a format they specified. The rules that apply specifically to WCAG are also reviewed by AGWG, the group that produces WCAG.

This is tedious work and I, for one, am very pleased to see these rules now have implementations across different methodologies and tools. We'll probably see them more and more in the wild (I know I will in some tools I use). Congrats, Community Group, and keep up the great work!

Originally posted as ACT Rules CG published implementations on Hidde's blog.

Reply via email

This isn't a post I wanted to write, but alas, sometimes not staying silent matters. This week I spoke at Modern Frontends Live in London. I was disappointed to see the organiser lied and misrepresented what they offered, as it impacted attendees, speakers and sponsors that were involved (financially and mentally).

I didn't want to name names either, but my judgment after interacting with her and a number of people I trust, I fear Gen Ashley, the organiser, might try it again, potentially under a different event name and/or try to hide what happened. To inform other attendees, sponsors and speakers, I want to be sure to share my experience.

Below I'll list the misrepresentations that I found specifically problematic. Other writeups are available from Jo Franchetti, Cassie Evans, Kent C. Dodds, Todd Libby, Chris Perry, Mike Hartington, JD Hillen, Dylan Beattie, Niamh McCooey and Kilian Valkhof. There is also a video reflection from Tejas Kumar. Again, I don't think any of us intend to “pile on”, but speaking out matters, it shows that the issues aren't just one person's perspective.

First, some context (that shaped my thoughts on conferencing). I have been involved with Fronteers Conference for 5 years (until 2013), anything from sitting at registration and holding mics to curation, team chairing and organiser handbook author (writing down what PPK and Krijn largely shaped). I was also involved with CSS Day and Performance Now to help out with practical stuff like registration. I've also given over 50 talks. Long story short, I do notice stuff at events sometimes.

Second, not everything about the event was bad. I'm grateful the organisers put me in a decent hotel, served a tasty speaker's dinner and were friendly and treated me mostly with respect (but, for completeness, also broke promises to me, and treated others badly). I actually had a good time meeting friends, some for the first time. As a lot of my work is virtual, it was great to have lots of interesting conversations and relating to developers (my job is in developer relations), and to finally meet some of the Open UI and other W3C groups in person.

Wildly exaggerated attendee numbers

The conference website showed (and therefore promised) '3000+' attendees. There were a few hundred, to my best estimation. I asked Gen and the people manning the registration desk various times what the number of actual attendees was. She tried to dodge this question, said there were about 1000 tickets of which a number was free tickets, but she didn't know how many were attending as not everyone showed up.

Screenshot of the homepage taken on 19 November 2022, the day after the conference

Conference registration systems show numbers and these badges are sent to a printing company. Health and safety people and catering need to know these numbers too. It seems nearly impossible to not know how many badges or you have.

Either way, a few hundred is not a little bit less than 3000, it is 5-10% of what was promised.

It's okay if ticket sales don't go as expected. It's not okay to stay silent about it and have everyone only find out on the event day. A few hundred is a small-ish event, 3000 is a huge event. Sponsors count on numbers to make their spend worthwhile, attendees count on numbers to estimate with how many people they could network. As a speaker, I need correct numbers to decide too, as there are a lot of events and me and my employer (if it's for work) are mindful about where we go. I don't mind speaking to 10 or 1000 people, but the number is one of the things I use to decide, especially when considerable travel time is involved.

Payment taken for a non-existent livestream

Livestream tickets were sold, but there were not cameras. These tickets (£42) were still on sale during the event, while there were no cameras. It was framed as ‘technical issues’. I've seen a lot of livestream-related technical issues, but they usually involve at least the presence of cameras.

I found out while attending a session and accidentally scrolling my Twitter timeline, as one does. People had paid for a stream, got no information regarding how to access it. Friends wondered if there were even cameras. I looked around in the room, noticed none. Asked the technician, confirmed there were none in that room. I felt a little sick, assuming there must be a misunderstanding, left the room (sorry speaker) and went to check all other rooms. No cameras.

Then I confronted Gen. She laughed at the idea that people had assumed cameras were needed for a livestream. Why did we assume such a thing, she wondered, and said they had planned to livestream with Streamyard. Maybe a possibility in theory, but it was halfway the first day and it hadn't happened yet, nor did I as a speaker receive instructions around setting that up (and anyone I checked with had not either).

It's ok if the livestream you planned fails or even if the camera team you hired all got covid on the day. It's not okay to not communicate about that, or promise videos, as this tweet suggests they did:

Just got an email. “Due to technical issues, we will not be streaming live, unless it gets fixed soon.”

If not resolved, We will share recordings at a later date”

Posted by @ukF1dev on November 17 2022

To my knowledge, after a lot of pressure the organiser have promised the people who bought a ticket a refund and a free ticket to “next year's event”.

Broken travel arrangement promises

Some speakers were not paid for travel, others were promised. Some paid thousands from their own pockets. I can personally say two hotel nights were covered for me by the conference. Travel reimbursement was promised to be paid before the event, after many reminders I am still waiting for that.

Update (23 November 2023): it's a week after the event started and I've received reimbursement for my travel costs.

I firmly believe an event should pay speakers' travel expenses as a minimum. Getting there and staying there should be paid from the conference budget, because speakers are an essential part of the event. They attract attendees and spend a lot of time to prepare, speak and attend. Exceptions could include events that are free to attend or that are (actually, like, really) community driven. I love those events and am usually happy to make time for them. Exceptions should not include events that charge attendees in the hundreds and sponsors in the thousands.

Somewhat controversially and socialistically, I feel this should apply equally between speakers, and also apply to speakers who work for very rich employers. This helps avoid power imbalance in a couple of ways. I know some organisers take speakers whose employer pays the travel and it helps with the budget, and I get that, events can be very costly.

It's okay if you don't want to pay any of the speaker's travel expenses, but do it fairly. It's also okay if you get so much email that you miss one of a speaker's three reminders, but communication is important. In my case they kept sending me emails and DMs to ask me to boost their event, but meanwhile ignored my requests to pay what they promised to pay.

Venue represented wrongly

Under a “The venue” heading, the website showed an enormous wall to wall screen and a very large audience. This isn't what the venue looked like. I understand a marketing website wants to persuade, but the gap between what this photo shows and the actual main room is too large. Was I naive to assume this reflected reality? I don't know, the screens at View Source (2019) in Amsterdam or JSConfEU (2019) in Berlin were a bit like the one shown on this photo. It's quite large for a developer conference, but it happens.

Another screenshot of the homepage taken on 19 November 2022, the day after the conference

In her post, Jo Franchetti describes the venue in more detail.

Conclusion

Organising events is hard, lonely and stressful. I have a lot of respect for conference organisers, I have done it myself (not without many mistakes, believe me) and have friends who do still do it. So, by default, I cut organisers a lot of slack and have a lot of understanding for the many ways it could go wrong in. I believe in good intentions, generally anyway. I am also grateful for the things the conference did do right, thanks for that.

There were red flags from the start (from the accessibility and front-end of the website to the lack of communication), but those did not stop me from going. The issues that emerged during the event did make me regret somewhat, but all I could do then is still try to enjoy it and deliver interesting content for the attendees that paid to come.

The specific issues I've put in this post cross the line between honest mistakes and bad behaviour. They cross the line, because they consistute fraud (the livestream) and because they impact attendees, sponsors and speakers. The front-end community doesn't deserve this, and I'm worried for people new to the industry, who get may assume this is normal or ok. It's not normal. In the last year I've spoken at a number of events that had a very high bar to make it great for attendees, sponsors and speakers (shoutout to Beyond Tellerrand, JSConf Budapest and State of the Browser).

In any case, if you were at the event, I encourage you to speak up, too.

Originally posted as My experience at Modern Frontends Live on Hidde's blog.

Reply via email