My team has recently been focused on a huge backend migration, and as a result we haven't been doing much frontend lately. Seeing as our sprint tasks were finished, I picked up what I thought would be a tiny little CSS fix from the backlog. I've been eager to get some CSS experience in. I also had just finished a couple great tutorials in this series, HTML & CSS Is Hard, where I learned a little bit more about advanced positioning and Flex.
The task? Make the image in a side panel in our embedded checkout modal fixed at the top of the panel, so that with enough content, the image would stay fixed while the rest of the content scrolled behind it. Essentially, the image should be sticky and not scroll away when scrolling.
Below is the before behavior. As you can see, the entire panel scrolls, the image going with it. There's also a fun unexpected little right border on the image.
When I started investigating a fix, I saw that the side panel used display: table, which I thought was curious...
It's been about 4 months since I officially switched over to full time development from managing the QA team.
On one hand, I feel a little disappointed that I haven't been able to really develop my frontend skills as much as I'd hoped for, or expected I would have by now. I've only worked on a few small bugs on the frontend and a little bit with our old legacy frontend code. I haven't worked in React too much yet, even though I tried starting work on my own for a small work related React project. It turns out when your day job involves a ton of backend code and running integration tests locally, it takes a bit of time to switch to a Docker profile that is meant for frontend. Doing that every day is just not feasible for me.
So while I'm a little less afraid of curly braces, I don't think I'm close to being comfortable with React and Redux just yet, or with frontend systems altogether.
But on the other hand, I'm pretty proud of how far I've come on the rest of the work -- the backe...