blog: Devtools deep dive

[eerii]

This is a very first draft of the blog post about the devtools support. I tried not making it too long, but I can add more content if it is needed. I'm still a bit hesitant on some sections, specially the first paragraph and the console one, as well as the summary, but I will update them if I can think of something better. I also need to add the images and links.

@delan please make any changes you consider necessary and give any feedback on what needs to be different. Thanks!

[delan]

Hi, is this ready for review? No rush, just wondering since it’s still marked as draft :)

[eerii]

Hi, sorry about the delay, this week was a bit chaotic. I wanted to re-read it once more and add images before marking it for review. I still need to add the PR links, is there any automated way to do that? And maybe the images should be a tad larger, what do your think?

[delan]

No worries, take all the time you need! I partially automate those links by typing the number, exactly like you did, then using find-and-replace right before publishing.

I think given your original images, making them a bit bigger on the page would be nice. How legible we can make them depends on their width though, so for mobile that doesn’t really help:

I wonder if we can recompose the figures to make them narrower? The side-by-side figure could be top-and-bottom or overlapping (🗗), and we could resize the windows to reduce the empty space and make the panels stack vertically. Some examples using devtools in Firefox:

[eerii]

Thank you so much for the suggestions! Yes, I think it is important that it is seen right on mobile. I made the images more vertical. I also tweaked a bit the image placement to be more inline with the "This month in Servo" posts, having them to the side on wide screens and inline on mobile.

Does this look better?

[delan]

Much better! I’ve done some minor copyediting in 73da0a0a5180d91e016c7a3b571543e9d5a06a08. I also fixed the figures so they shrink properly on viewports narrower than 33em in f176dc4f07eb4bfb0350e67f0b62ed1a2f22de28, by pulling in the latest per-post styles. I think we needed the ._figr { max-width: 100%; } part for the ._figr > a > img { max-width: 100%; } to work.

I’ll do a second pass shortly :)

[delan]

Thanks for all your hard work! We’ll publish this on Monday :)

[eerii]

Thank you so much for all of your help with this! c: