A while back I worked on a project with an existing seven year old codebase and it was my task to refresh the design of it without a rebuild. This meant that I found a few constraints and one of them was allowing full bleed components (like a newsletter banner) which didn’t exist before.

Luckily, Andy Bell shared how to create a full bleed CSS utility which was what I ended up using. Towards the end of the article, in the section how the “full-bleed” utility works, Andy points out that using that CSS method might allow the possibility of having horizontal scrollbars and suggests using “overflow-x: hidden” in the body tag to fix it.

Since this all worked fine and as expected, I overlooked the reason why having to hide the overflow was necessary. Tepy Thai explains why 100vw causes horizontal scrollbar:

When you set an element's width to 100vw, the element's width now will be the whole view width of the browser and the important part is 100vw does not include the vertical scrollbar's width into its calculation at all. Therefore, when there is a vertical scrollbar, the total width will be the sum of the element's width and the vertical scrollbar's width, which causes the overflow on the x-axis and thus the horizontal scrollbar.

And then last week I was presented with a problem. Another developer in this project messaged me and asked if we could delete the overflow-x: hidden from the body. They were trying to build a feature that uses position: sticky and as it turns out, there is a ticket reporting that position sticky inside overflow hidden doesn’t work.

A solution could be to do a refactor and create a full-bleed layout using CSS grid like Joshua Comeau suggests. Due to a variety of constraints a refactor wasn’t possible.

After making the overflow visible, I needed to fix the horizontal scrollbar and that led me to an article from Jonnie Hallman called “100vw and the horizontal overflow you probably didn’t know about”. My solution was based on the one presented in that article.

I’m not feeling 100% confident over my solution - but it works!

Solution (I think)

Javascript

//remove small horizontal scrollbar when a block is full bleed
var scrollbarWidth = window.innerWidth - document.body.clientWidth;
var halfScrollbarWidth = scrollbarWidth / 2;
document.body.style.setProperty('--scrollbarWidth', `${scrollbarWidth}px`);
document.body.style.setProperty('--halfScrollbarWidth', `${halfScrollbarWidth}px`);

My javascript steps were similar to the ones in Jonnie Hallman’s article except that when I needed to set the margin-left I needed to take into account the possible existence of the scrollbar. After some poking, it looked like half of the width of the scrollbar would fix that.

CSS

--viewportWidth: calc(100vw - var(--scrollbarWidth));
/* finalHalfScrollbar: value must be negative */
--finalHalfScrollbar: calc(var(--halfScrollbarWidth) * -1);

width: 100%;
width: calc(100vw - 15px);
width: var(--viewportWidth);
margin-left: 0;
margin-left: calc(50% - 50vw - var(--finalHalfScrollbar, -7px));

As a fallback - which I am not very confident about - in case javascript is disabled, is giving the scrollbar a width of 15px and then I used half of it as an integer (the 15px was the most common value from the browsers I tested). I also tried to cover the scenario where CSS custom properties and vw properties weren't supported, so in this case it would be contained within the width of the parent. It seems to work and I suppose that the worst case scenario is a horizontal scrollbar in the end.

There's a good chance there's a better solution for this but I did learn something regardless and do enjoy when CSS makes me scratch my head!

I'm not gonna lie - I'm quite disappointed in myself that I still haven't got my poop together and gone back to doing this monthly. I managed to write some blog posts since March but all those happened because I milked really hard the surge of energy I had at that moment.

As I've gone a bit quieter, the following quote has been haunting me every time I sign in on Twitter.

On the platform, silence isn’t an option, at least not if you want the network to remember you exist.

Quote via The internet didn’t kill counterculture—you just won’t find it on Instagram.

Bookmarks related to tech and web development

• How to display language-specific quotes in CSS by Stefan Judis
• Accessible Icon Buttons by Sara Soueidan.
• Sharing deepfake images ‘must be made a crime’ by Jonathan Ames.
• Hiding content responsibily by Kitty Giraudel.
• System fonts don’t have to be ugly by Iain Bean.
• Questionable Advice: “How can I sniff out bad managers while interviewing for a job?” by Charity Majors.
• Digging Into CSS Logical Properties by Ahmad Shadeed.
• A Generative SVG Starter Kit by George Francis.
• The Mobile Performance Inequality Gap, 2021 by Alex Russell.
• Pa. woman created ‘deepfake’ videos to force rivals off daughter’s cheerleading squad by Jana Benscoter.
• Why is an individual contributor like a Tetris block? by Denise Yu.
• Perfect fullscreen 4:3 aspect ratio by Remy Sharp.
• 100 underline/overlay animations | The ultimate CSS collection by Temani Afif.
• Noise & gradient by Clara B.
• The internet didn’t kill counterculture—you just won’t find it on Instagram by Caroline Busta.
• A tale of languages by Kitty Giraudel.
• Kentrosaurus by Michelle Barker.
• Mistakes I’ve Made as an Engineering Manager by Sarah Drasner.
• Defining a strategy for accessibility by Craig Abbott.
• No feigning surprise by Julia Evans.
• After Working at Google, I’ll Never Let Myself Love a Job Again by Emi Nietfeld.
• A Target Sex-Trafficking Hoax Is Going Viral on TikTok by EJ Dickson.
• How to make an ineffective 404 page by Eric W Bailey.
• My current HTML boilerplate by Manuel Matuzovic.
• Beauty filters are changing the way young girls see themselves by Tate Ryan-Mosleyarchive.
• Build a fancy hover animation by Andy Bell.
• The Layers of the Web by Jeremy Keith.
• Understanding Logical Focus Order by Rachel Leggett.
• The Beauty Of Tiny Enhancements In CSS by Ahmad Shadeed.
• Bulletproofing Embedded Tweets by Adrian Roselli.
• The Importance of Career Laddering by Sarah Drasner.
• Project base for Eleventy Sites by Andy Bell.
• How TikTok Chooses Which Songs Go Viral by Shelly Banjo.
• Make a personal changelog by Brian Lovin.
• Your cut-and-keep guide to the “unregulated wild west internet” by Heather Burns.
• Awesome standalones by Dave Rupert.
• Going public by Martin Schneider.
• Flora by Hakim El Hattab.
• Left alone, together by Jenny Zhang.
• How to Add a Double Border to SVG Shapes by Mariana Beldi.
• The Pocket Technical Writing List by Stephanie Morillo.
• Creating Generative SVG Characters by Michelle Barker.
• Learn How to Build Accessible Web Apps by Marcy Sutton.
• Digital Gardening for Non-Technical Folks by Maggie Appleton.
• Auditing Design Systems for Accessibility by Anna E. Cook.
• Accessibility testing as a screen reader user by Isabel Holdsworth.
• Design for reading: tips for optimizing content for Reader modes and reading apps by Sara Soueidan.
• Simple things are complicated: making a show password option by Andy Sellick.
• Why I write weeknotes by Steve Messer.
• Automatically generate open graph images in Eleventy by Bernard Nijenhuis.
• Don’t use custom CSS mouse cursors by Eric W Bailey.
• Introducing: an Eleventy starter project for WCAG reports by Hidde de Vries.
• Inclusive UX in an era of anxiety by Cara Brashears.
• What are “unusual characters” by Terence Eden.
• Twitter to OPLM by Luca Hammer.
• HTML Inputs and Labels: A Love Story by Amber Wilson.
• Get the FLoC out by Jeremy Keith.
• Swipey Image Grids by Cassie Evans.
• A Primer On CSS Container Queries by Stephanie Eckles.
• Create a Liquid Hover Effect with GSAP & SVG by George Francis.
• Blog about what you've struggled with by Julia Evans.
• The cage by Jeremy Keith.
• In defense of disorder: on career, creativity, and professionalism by Chiara Amisola.

Other bookmarks

• How Portugal silenced ‘centuries of violence and trauma’ by Ana Naomi de Sousa.
• All culture is cancel culture (via twitter).
• How not to say the wrong thing by Susan Silk and Barry Goldman.
• Crab mentality (via twitter).
• My identity = my job has a dark side (via twitter).
• For some, Wii Fit’s legacy is body shame by Ana Diaz.
• My first novel was a hit. I could write full-time. And that made me … angry by Kevin Power.
• Shantay, You Pay: Inside the Heavy Financial Burden of Going On ‘Drag Race’ by Rachel Miller.
• EU citizens arriving in UK being locked up and expelled by Giles Tremlett and Lisa O'Carroll.
• Boundary Setting vs Tone Policing by Miri.
• Just because your early career was hell doesn't mean others' has to be by Anne Helen Petersen.
• Hope in the dark: a post for mental health awareness week by Amy Hupe.

Last weekend my husband and I started to watch Ted Lasso and as soon as the character Ted sets up their new home in Richmond, it reminded me of one of my worst job interviews because I’m pretty sure I cried in front of Ted’s local.

Let’s start from their (the interviewers) perspective. Here is what happened: this nice woman got through the first conversations and seemed okay enough to be sent a coding exercise to do at home. She sent back her exercise which wasn’t finished so they decided to have an in-person interview to go through it. A date and a time were suggested but never confirmed however she turned up anyway and then froze and couldn’t finish the coding exercise.

This is deeply embarrassing and I am still mortified that this will forever be the reflection of me in their eyes.

Now here’s what happened from my perspective: I was really happy at my job at the time until a snowball of events unrelated to me or the team I was in happened. Then a new manager was hired. This manager had control issues and quickly started to question all the team. This included doubting that people were absent for known medical issues (which wasn’t an issue before) to banning casual work from home without a justification that they deemed acceptable. Our team environment was severely impacted and people started to quit and the ones that remained were miserable. But the moment that I knew that I needed to leave was when he jokingly asked me in front of my teammates if I was thinking of getting pregnant while noting that it would be inconvenient for our future product release.

Needless to say, I was in a rush to get a new job. I couldn’t sleep and I started to completely forget about plans I made outside work hours. With everyone else quitting or some taking time off, I found myself alone managing contractors in a strange work environment where you could cut the tension with a knife. By the time this prospect company sent me the code challenge, my mental health had severely declined. I was also following people’s advice: do not tell the real reasons you’re leaving your job. The coding challenge was timed for two hours and I don’t actually remember it. I don’t remember doing it. I was crying while trying to do it. By the time the two hours were hit, I gave up. So I sent what I had done (which wasn’t enough at all), apologised and moved on.

A few days later they got back to me and suggested a day and time. Unfortunately, their office was in Richmond, which is on the other end of London. This meant that either I had to leave work early and risk getting transportation issues getting there because of rush hour or I could work from home (at the time I was living in Fulham) and I could work all day and leave after work and only take half an hour to get there. My heart was racing because it meant I had to ask this manager permission for either of these options. I replied to the email saying that it worked for me and I put in a request with my manager to leave work a little bit earlier. I was questioned a lot about it and it was incredibly stressful since a white lie was involved.

It’s the day of it and I prepare to make my way to Richmond. As I am leaving, I text my now husband to let him know and he says “oh, you didn’t tell me they had confirmed it”. My heart sank. I opened my email app. They never confirmed it. I never got a reply to that email. While in the tube, I went through all the scenarios in my head. I overthought everything and I was deeply ashamed. I tried to tell myself “maybe all will be okay and I am overthinking this”. Until I got there and they weren’t expecting me.

I wanted to hide forever. I thought “oh my god - these people have my full name and my Twitter handle… they now know how much I suck”. They were incredibly polite and welcomed me in. I’m sure I ruined their evening plans and I apologised. In the back of my head, I had another running task: “what other excuse can I come up with to tell my manager if this gets postponed?”. I held my tears and we sat in the room. We talked about how my exercise wasn’t finished and I said: “well.. That’s what I did in two hours”. What they didn’t know is that that’s what I did in two hours while having a breakdown. One of them mentioned how it is interesting because most people would lie about it. I tried to convince myself that was one small point in my favour. He then suggested “how about we finish it now together?” and I agreed. Except that I didn’t. I was bottling up all the tears and shame of my blunder, the build-up inside my head of even imagining having to ask my then manager to be excused and how I was mentally and emotionally drained from my current job. I don’t remember what happened next. I don’t remember what I told them. I just know we wrapped up and they left with the idea that I was really bad at coding.

I left their office and walked towards the park that is shown in the Ted Lasso series and I cried a lot. In the next few days, they followed up via email obviously explaining that I wasn’t on their top list but there was nothing but kindness from their end.

This interview still haunts me. I struggle a lot when I fail at something, especially when I fail “in public”. The idea of someone knowing that I didn't do something well breaks me but this was one of the very times in my life that I immediately forgave myself and treated myself with kindness.

Either way, I don't do well in interviews. The last time I went on another job hunt, I also failed at a few of them. I particularly dislike doing any code in front of others as so rarely I build projects/exercises from scratch. And guess what? So far I’ve always been employed.

If there’s any lesson from this story, I’d say: don’t start job hunting when it’s officially really bad. Trust your instinct and begin leaving before you get desperate. Although I don’t regret the path I ended up taking because I’m pretty happy now, I regret that I sacrificed my mental health at the time and now have bad memories because I left it too late to leave a job that was making me miserable.

In the television show Masterchef there was an episode where the judges did a test on what they call “basic skills”. One of the judges often says that in order to be a “true chef”, you must know how to quickly and finely cut onions. It was really intense and they were looking for near perfection! I don’t know the industry well but I had a quick look on Youtube and cutting onions produced a lot of results.

So my immediate instinct, without thinking it through, was laughing and thinking: “hehe would they yell at me if I turned up with my onion chopper? Why does it matter how fast and how you chop your onions if the end result tastes good anyway?”.

I got an onion chopper because I don’t like how my hands smell after cutting onions, I don’t like how it makes my eyes tear up, I’m not very fast at cutting onions manually and I don’t have lots of space in the kitchen to set up multiple cutting boards.

This was really bothering me and I am stubborn so I wanted to win this fake argument really badly so I looked up why the way one cuts onions is important: as it turns out, the shape and even the surface area affect the end flavour. I thought the whole “chop chop chop” was about performance in the kitchen. Cut quickly to serve quickly! I was wrong.

It annoyed me, even more, when I realised how this applies to my industry: web development.

My onion chopper is great! Though, if I am being honest, it does affect the texture and flavour a little bit in the end. The thing here is that I prioritised how my hands would smell because the end flavour wasn’t really bothering me. And if we think about web development, I suppose that many tools that save us time… might output something a little bit different in the end regardless if it looks the same.

Back to onions! I can see why there was a dedicated test for it on this show (maybe I could dismiss the “quick” bit as part of the assignment, but I won’t get into that now). In real life, there will be people, like myself, who don’t know enough about the craft and won’t know why such tests exist and just buy an onion chopper.

You see where I am getting here? Anyway, analogies aside, my point is: front end interviews should really test basic skills like HTML, CSS and accessibility as it truly affects the outcome of a website. This also made me realise that the only time I’ve ever been asked in detail about HTML, CSS and accessibility in a job interview was when I was interviewing for a junior developer role. Since then, most of my interviews and job ads I’ve seen, completely gloss over basic skills and focus on tools/frameworks. And if we don’t know the basics, how can we know what is missing in the tools we use?

This post has a content note of miscarriage. Visit the link directly if you're okay with reading it.