If you spend a fair amount of your time in your browser’s page inspector examining and tweaking CSS, then you’ll probably find these two sets of features in the Firefox Page Inspector to be really helpful.
Track changes you make
Firefox Developer Tools offers a great way to track CSS changes we make while testing CSS solutions for users. Here’s a terrific video that explains how to use this awesome tool:
You can also find information about this in the MDN documentation, here.
Identify and understand inactive CSS
I came across another useful feature of the Firefox Page Inspector. From Firefox 70 (launched in the last few days), you can now see not only which CSS code is inactive, but also why 😲. Here’s an example:
I haven’t encountered this in practice just yet, but I can already see the explanations to be enormously useful. The links in the pop-ups will take you to the excellent MDN web docs for more information.
I primarily use Firefox Developer Edition as my day to day browser. I use the excellent Firefox page inspector several times a day to troubleshoot issues for our customers, and write CSS for a variety of tweaks on sites that I use.
As much as I enjoy using the Firefox browser inspector, I noticed a feature in the Chrome Dev Tools that I really like, and would love to see introduced to Firefox. It’s bit like a heads-up display that’s very helpful for seeing an element’s styles at a glance.
If I select an element in Firefox, I see fairly basic information about the element such as the element’s dimensions, and the type of element it is, like this:
Selecting an element in the Firefox page inspector
On the other hand, when I select the same element using the Chrome browser inspector, I see more information about the element, like this:
Selecting an element with the Chrome page inspector
Chrome provides not only information about the image’s dimensions, and the type of element it is, but also other useful information such as the font color, style, and margins (in this case).
Even though I can see all the details of the element in each browser’s inspector panel, this extra information when I select an element is a really nice touch.
I really like how Zach Leatherman has taken control over his tweets, and is sharing them on his site with some great analytics. He provides some insights into how he’s taking his tweets, and republishing them on his site in his post “I’m Taking Ownership of My Tweets” –
I fully expect my personal website to outlive Twitter and as such have decided to take full ownership of the content I’ve posted there. In true IndieWeb fashion, I’m taking ownership of my data.
My test site uses a relatively old plugin that hasn’t been updated recently. At the same time, it seems to be working relatively called Ozh’ Tweet Archiver. I prefer how Zach has formatted his tweets, and how the images and links are modified for more sustainable presentation on the assumption that Twitter has gone offline.
I also really like how he’s captured replies, and has added analytics to his tweets to surface all sorts of insights such as more popular tweets, retweets data, and more.
I’ve love to know how he’s actually capturing, and reformatting his tweets, but I don’t see a link to the code he’s using for this. I’d eventually like to bring something like that to this site, so this site becomes a complete archive of my tweets too.
At least with the Ozh’ Tweet Archiver plugin running on my test site, I’ll have a WordPress archive that I can readily import as a starting point. I’d like to have linked media load from my site, and not as embeds from Twitter, for example. The idea here is to capture your tweets, and preserve them so they contain their links and media should Twitter no longer exist.
I really like CSS Grid for layouts. My challenge is that I tend not to use it all that much in my day-to-day work (I provide a fair amount of CSS support, but it tends to be focused on narrower issues), so I don’t practice it all that much. Then, when I return to CSS Grid, I don’t remember any of the syntax beyond display: grid; 😜
I noticed a curious sequence of events this morning. I responded to a tweet about Donald Trump’s latest tweet where he referred to his “great and unmatched wisdom” using the Twitter app on my Android phone –
I then turned to our Android TV box where we were watching YouTube videos in the YouTube app, and I saw a recommendation for this Late Late Show video about Trump’s tweets:
That’s some pretty snappy algorithmic matching there, Google! 🤔
Better gender representation is a challenge. I’m proud of our team’s efforts to better understand this challenge, and how to meet it. It’s clearly not something that’s capable of a simple fix, but I’m glad that we seem to be moving in a good direction. Here are some links if you’re interested in reading further:
I bought my wife a 11″ MacBook Air in 2011. It’s a Intel® Core™ i7-2677M CPU @ 1.80GHz (four core) laptop with 4GB of RAM. Over time the battery became less effective, and started to swell. We eventually removed it early last year, before it burst.
That left my wife with her MacBook Air that she had to use when connected to main power. It had also become pretty sluggish between macOS updates, and general cruft accumulation so it took forever for the device to boot up, and perform simple tasks.
My wife recently left her job, and we bought her (formerly) work Lenovo laptop for her to use as a personal machine. This left her MacBook Air gathering dust in a corner of the apartment.
An available option
I’d wanted a personal laptop for my non-Automattic projects, and was building up the courage to buy a new machine that I’d install Linux on. I decided to see if my wife’s laptop would suffice, instead.
I first reset the device, and poked around a bit in macOS. The laptop is past the support cut-off for the current macOS version, so it was running High Sierra (I think). It worked ok, but it felt pretty slow.
Setting it up
I’ve also wanted a Linux laptop to geek out on, so I took a leap, and wiped the drive completely (I was actually planning to configure dual boot, but couldn’t work this out), and installed Pop!_OS by System76 on it.
I installed a couple of my preferred apps such as Sublime Text, Sublime Merge, Dropbox, and so on. I also switched my shell over to ZSH (with Oh My ZSH), installed Conda as my main Python distro/option, and even figured out how to run Jupyter Lab on the laptop.
Of course I also installed the WordPress.com app for Linux testing too.
The laptop still seemed a bit sluggish initially, and it looked like all the processors were maxing out. I also couldn’t work out how to make the dock appear in a more convenient way, and how to add other bits and pieces to my desktop to improve my experience.
I then switched the desktop environment to the MATE desktop, and it seemed to help. For one thing, MATE is better suited to older hardware, and it has a bunch of indicators and widgets that you can customise. I liked it, but I still preferred the overall aesthetic of Pop!_OS.
I also realised that the reason why the laptop was so sluggish was because Dropbox was being Dropbox when it started up. It eventually released its death grip on the processors, to a degree.
Getting used to a different environment
My one big adjustment has been moving from my glorious 15″ Macbook Pro screen where I spend most of my time, to a teeny 11″ screen. On the other hand, I do like the much smaller form factor for mobility.
The laptop is small enough that I may even be willing to take this with me on work trips so I have a personal device for movies (assuming I can get them onto the device, legitimately), projects on longer flights, and so on.
The immediate challenge to all of that is that this machine doesn’t have a battery. I’ve found a solution for that, though. iFixit sells an after market battery for this model for about $75. That’s certainly cheaper than buying a new laptop (assuming it works).
Other than that, it’s also taken me a while to figure out how to do otherwise routine things in Linux. I’ve found ways to customise my experience of the desktop using things like GNOME Extensions, and other apps and utilities.
Mostly, though, I use Sublime Text for my writing and coding (I know VS Code is what all the cool kids are using, I prefer Sublime for now, and it loads really quickly), Firefox as my main browser on this laptop, and I have my terminal pretty much set up with my various extensions.
More of the similar for other home uses
My experience with this laptop has reminded me why I much prefer a Linux computer for home. Our daughter uses a really old desktop PC that’s running Ubuntu 19.04. The PC is a Core 2 Duo with 3 or 4GB of RAM.
When it comes time to replace that, I’ll probably give her one of the new Raspberry Pis with an external drive for storage. The current version is just incredible for what you’re paying. This review will give you a pretty good idea:
The new board comes with a four core AMD processor that, I think, is pretty comparable to the MacBook Air’s 2011 processor, up to 4GB of RAM, and runs on USB-C power. The 4GB model costs around $50 to $60, and the main challenge is actually getting your hands on one.
A Raspberry Pi would probably be a decent upgrade on what she has at the moment, and she could continue doing everything she’s been doing (Minecraft, browsing the Web to school sites, general school research, Google Drive, YouTube, Spotify) just fine.
I’d be very tempted to get one for myself one day, if I could come up with a decent plan for how to travel with it, and use it productively on the road. The biggest challenge would be a screen of some kind, I imagine.
So far, I like this
So far, I really like what I have. I’d like to get some other apps going, such as AutoKey for text expansion, and Albert for easier app launches, web searches, and some of the tasks I use Alfred.app for on my work laptop.
For the time being, though, this Linux-driven MacBook Air is proving to be a pretty good choice.
Featured Image: Unleash Your Potential Robot by Kate Hazen at System76, licensed CC BY SA
My son is a Tetris fan lately. He’s competing with my friend in South Africa (they’re both playing the same game, and sending boasting screenshots by WhatsApp). He came to me with his laptop (actually mine, I’ve loaned it to him) over the weekend, excited to show me how he’s playing Tetris on the MacBook Air, in emacs …
He doesn’t really appreciate quite what emacs is (or Vim, for that matter), but he definitely loved this version.
