I've been doing Angular development lately, and as with any single-page app, the "Let's do everything in JS" approach breaks basic web functionality. Scroll handling is only one example. If you're looking for a way to alter URL query params without having Angular scroll to the top of the page, this post is for you. But before we get to the problem, let's recognize what browsers are good at — doing web things. If your site relies on server-rendered HTML you get well-working scroll handling out of the box. If you link to an anchor element (/something#foo), the browser scrolls to it. Do you hi ..read more

When I started coding, Sublime was the editor of choice. It was lightweight, fast and ... drum rolls ... had the minimap™. The minimap made the editor look fancy. I loved it. I kinda still love it because it looks cool. VS Code, my main driver these days, supports it, too. Yet, I switched it off years ago because I didn't use it. I just wouldn't interact with it, and if something blocks 10% of my horizontal editor window, it would better be worth it. I found that it's hard to navigate or see anything in the minimap unless I put huge comment blocks into my files ..read more

Here's Temani Afif once again doing what he does best: creating wild single-element tricks. What's on this time? The preview below shows the article's result, which is two image elements. The img elements are displayed as 3D boxes and only reveal their image content when hovering. There are no div wrappers or anything — what you see above are two img elements. Temani walks you through how to create this effect step by step; go check it out. It's a great read. But one thing stood out in the article: you might think that the images hide and show with some wild CSS tricks, but the effect uses g ..read more

If you take the time to create content online, you probably want people to read it. It doesn't have to go viral, but it'd be nice if some folks read it, right? But for people to read your stuff, they must know about it. And for this, Google (or other search engines) must index your site. Googlebot is usually pretty good at following all the trails to discover your pages, but you can also lay some breadcrumbs by providing a good old sitemap.xml. A sitemap is a document that lists all the pages that should be indexed by a search engine. Here's an example. <?xml version="1.0" encoding="UTF-8 ..read more

Guten Tag! Guten Tag! ? How could you use the new CSS @scope to create encapsulated component styles? What does the quotes CSS property do? And when would you use the never TypeScript type? Turn on the Web Weekly tune and find all the answers below. Enjoy! Christian listens to "DOMi & JD BECK, Anderson .Paak - TAKE A CHANCE" and says: This song is a combination of some of my favorite music nerds, it just makes me happy. Do you want to share your favorite song with the Web Weekly community? Hit reply; there's only one more song left in the queue. Happy CSS Naked Day! Happy what? Let m ..read more

Disclaimer: I don't have the answer to this hefty post title, but Jacob Kaplan-Moss just woke me up to think about life. So, let's blog about it. Why are you giving less time and attention to your personal goals than you give to work? I don't know Jacob, but wow... this is an excellent and very uncomfortable question. At work, I'm structured, focused and transparent. I have processes and guardrails in place to hit my targets. I reflect, write brag documents, and plan ahead. I hold myself accountable if I don't deliver. Being good at my job is important to me. Being a good colleague is impor ..read more

How do you evaluate your software's doing what it's supposed to do? Do you test all your app's possible cases, branches and states? I don't, at least not manually. Nobody aint time to manually click through all the edge cases. QA'ing a simple login form takes time, let alone testing complex applications. Having robots do that helps a ton, and I recommend writing automated tests to help you sleep well at night (and release fewer bugs)! Ignoring the burden of writing and maintaining tests, testing a "normal" web application is straightforward because it's predictable. Throw something at your ap ..read more

Guten Tag! Guten Tag! ? When will align-content work in divs? Does the new popover attribute improve accessibility? And why does margin: auto work on absolutely positioned elements? Turn on the Web Weekly tune and find all the answers below. Enjoy! But before, the Web Weekly music queue is almost empty. If you enjoy discovering and sharing new music, send me your favorite tracks to keep the Web Weekly jukebox playing. Ellen listens to "Slut — If I had a heart" and says: "If I Had a Heart" creates an aura full of melancholy and a unique atmosphere, as if the song itself was my heartbeat. Wo ..read more

I can't tell you how many times I've discussed whether and when links should or shouldn't open a new tab. It's one of those topics that is impossible to settle; it just fires up occasionally. It was March 2024, and we were just doing another round. While I had always been in the "let me decide when I want to open a new tab!" camp, I discovered three valid arguments for opening a new tab. ✅ Clicking a link while filling out a form could lead to data loss. ✅ Connected information needs to be visible in two places. I'm having a hard time coming up with a reasonable example for this, but I can s ..read more

Kyle Shevlin blogged about his belief in detailed atomic commits at work. On the contrary, he changes entire projects with a single commit in side projects. I feel you, Kyle. To improve the side hustle commit chaos, Kyle added a make command called checkpoint to at least occasionally add progress to version control. I have the same YOLO commit traits and, of course, I love this approach! But I don't use make, so I created a more general solution as a custom Git command. Quick tip: git- prefixed shell commands available in your $PATH will become git commands automatically. A git-yolo shell f ..read more