/blog

Written and published by Martin Wolf

Microsoft: Documenting the Web together →

Erika Doyle Navara / Dev Writer, Microsoft Edge:

Today, we’re excited to share some big news for developers around the world wide web: We’re committing our resources towards making MDN Web Docs the best place to go for web API reference. To kick things off, today we started redirecting over 7,700 MSDN pages to corresponding topics in the MDN web docs library powered by Mozilla.

Wow, big news. As so often in the recent past Microsoft is doing the right thing for the web and developers.

Accessibility for Everyone by Laura Kalbag →

You make the web more inclusive for everyone, everywhere, when you design with accessibility in mind. [...] Whether you’re new to the field or a seasoned pro, get sure footing on the path to designing with accessibility.

One of my goals this year was to learn more about Accessibility. To my own disappointment I didn’t get very far up to this point but or especially because of this I’m very much looking forward to the book by Laura.

Dave Ruperts slow conversion over to Web Components →

My favorite quote from the article:

I like the HTML’y-ness of Web Components as well. I still have a JS-dependency and I’ve inherited a framework dependency (Polymer) but I eject myself from the All-in-JS approach and the transpile dependency stack. Writing HTML that contains JavaScript, not JavaScript that contains HTML, feels good to me; Dave Rupert, Bachelor of Arts in Japanology and Definitely NOT a CoolGuy 😎 Computer Scientist.

This is a sentiment I can identify a lot with. I should definitely take a closer look at Web Components (and Polymer) because that's what I want:

HTML that contains JavaScript, not JavaScript that contains HTML

»Switch to Windows« Interview Videos →

This is a YouTube playlist by the Windows Developer channel currently containing five short video interviews with developers (Raymond Camden and Sean Larkin amongst others) who gave Windows 10 a try and are really impressed by it. Definitely worth your time if you are at all interested in Windows 10 and the Surface products for (web) development.

Laissez-faire Font Smoothing and Anti-aliasing →

Zach Leatherman:

Recently, Twitter made a global anti-aliasing CSS change to their website. Before writing this post, I didn’t know very much about anti-aliasing—so I decided to learn everything I could about it to better understand the reasoning behind a decision like that. Here’s what I learned.

Interesting deep dive into how different anti-aliasing methods work, nicely illustrated with close up images. Until reading Zach's article I was an "all-in with grayscale anti-aliasing kind of developer", but I might have to reconsider this approach and definitely test a few thing on low dpi displays.

Celebrate the web by using another browser than Google’s Chrome →

David Heinemeier Hansson:

You don’t have to be that old to remember the dark days when Internet Explorer strangled the web by its utter domination. When large swaths of the web was only accessible through Redmond. Those were not happy days.

[...]

So please, if you’re using Chrome, take a moment to download another browser and incorporating it into your routine. I personally love Safari and use it for the bulk of my browsing (with Chrome as a pair for development). But the good folks at Firefox deserve your usage just as much.

And if you are on Windows, Microsoft Edge has become a really good browser, too. Give it a try. I just published this post with it.

Useful VS CODE Keyboard Shortcuts

Over the past couple of weeks I gave Visual Studio Code, the code editor by Microsoft, a try. I didn't use it exclusively but I got a good impression of it. I used it both on macOS and Windows 10. (It's also available for Linux if I'm not mistaken.) Generally I can say it's really good.

But instead of a big review I just wanted to share some keyboard shortcuts I discovered along the way with you.
These are the Windows shortcuts, but generally you just have to substitute ctrl with cmd for the Mac shortcuts.

ctrl + enter: New line below
ctrl + shift + enter: New line above
alt + arrow keys: Move line top/bottom
shift + alt + right arrow: Grow selection to everything inside quotes (sadly doesn't work when cursor is right next to starting quote)
shift + alt + left: Shrink selection
ctrl + enter when opening a file via quick open (ctrl + p): Opens file in new split editor
ctrl +`: Opens integrated terminal
ctrl + b: Show/hide sidebar
ctrl + k ctrl + w: Close all tabs
shift + tab: Unindent line, no matter where in the line the cursor is positioned
ctrl + page down: next editor / next tab
ctrl + page up: previous editor / previous tab
I kinda feel like the last two should be exactly the opposite, but I will keep the default for now and see how it goes. On macOS you can also use cmd + alt + arrow key.

Here you can find an official PDF cheat sheet with a lot of shortcuts: keyboard-shortcuts-windows.pdf

Good way to find keyboard shortcuts

Often times I know what I want to do but don't the shortcut for it, here is a good way to find the key combination: ctrl + shift + p opens command palette with all commands, then you can type what you are looking for, for example "close". You then find all commands that have something to do with closing something and you can see the keyboard shortcut on the right side.

What doesn't work

ctrl + \ should open a new split editor on Windows, but it just doesn't work for me. If I select the command from the menu it works. No idea why.

I hope these commands might help you using VS CODE effectively. Give it a try!

A Container Queries Trilogy

A few weeks ago Ethan Marcotte wrote about container queries — about what they are and why we need them:

On container queries.

The article was overall very well received and I too, couldn't agree more. I want, I need, container queries. But Paul Robert Lloyd then wrote a blog post response arguing that we might not need container queries and that new layout methods like Flexbox and CSS Grids can be the solution the community is looking for:

Questioning Container Queries

He made good points but Ethan used the opportunity to reply with another article tightening his arguments:

A bit more on container queries.

And as far as I can remember from Twitter, in the end Paul agreed that container queries are needed and can solve a lot of the issues we currently face when building complex components.

I don't write this to celebrate Ethan's victory. I just really enjoyed seeing a blog post back and forth with thought out arguments instead of 140 character tweet replies. And I think in the end we all learned how we can solve a couple of things right now with the solutions proposed by Paul and we also see more clearly now why we need container queries. And to say it in Ethans words: Maybe you could help us figure out how to make them happen.

And if it's not clear by now: I highly recommend you read all three articles.