Categories
Coding People

How The Hacker Who Saved The Internet Redeemed Himself

I read a fascinating story in Wired about Marcus Hutchins, a hacker who used lessons from years of writing malware to save the Internet from WannaCry, only to come to terms with his past misdeeds at the height of his success. This is how the story begins –

At around 7 am on a quiet Wednesday in August 2017, Marcus Hutchins walked out the front door of the Airbnb mansion in Las Vegas where he had been partying for the past week and a half. A gangly, 6’4″, 23-year-old hacker with an explosion of blond-brown curls, Hutchins had emerged to retrieve his order of a Big Mac and fries from an Uber Eats deliveryman. But as he stood barefoot on the mansion’s driveway wearing only a T-shirt and jeans, Hutchins noticed a black SUV parked on the street—one that looked very much like an FBI stakeout.

The Confessions of Marcus Hutchins, the Hacker Who Saved the Internet | WIRED

The article seems to be well researched, and worth reading.

Categories
Blogs and blogging Coding Design Education People Tutorials

How Wes Bos built his new site

I’ve followed Wes Bos for a couple years now. I bought several of his courses, and look forward to when I have time to do his Beginner JavaScript — Learn JavaScript from Scratch course. He recently rebuilt his personal site using Gatsby.JS, and published both a post and a video explaining how he did it:

The details of his site are pretty technical, and the code is available on GitHub if you want to fork the repo, and take a closer look yourself.

I don’t see myself reproducing what he’s done, and building a new site for myself in the foreseeable future. That said, I have tremendous respect for Wes Bos, and how he approaches his work.

He shares openly, offers pricing for his courses that make it much more affordable (I especially appreciate that), and he produces really good quality content.

If you’re interested in how to build a really fast, static site using the Gatsby.JS framework, definitely take a look at his post and video tour. If you’re interested in learning how to code in JavaScript and JavaScript frameworks like React, check out his courses.


Featured image credit: Wes Bos (I took this version from his GitHub repo).

Categories
Coding

Couples who code together

My talented wife has been learning to code. Specifically, she’s been learning front-end web development, starting with HTML and CSS.

One of her projects as part of a coding bootcamp she joined is to build a basic site with the HTML and CSS she’s learned. She experimented with a CSS-powered dropdown menu on her project site, and hit a snag with it, so I took a look at it last night.

In the process of working out a solution, we found something new we can do as a coding couple … submit and merge pull requests (no pun intended there ).

Categories
Applications Coding Tutorials

The missing piece in my Python scripts

My quest to automate parts of my workflows usually involves writing Python scripts to streamline some of my tasks as a Happiness Engineer.

One output has confused me for far longer than it should have, and I was shown the light today (in the form of a pretty simple solution).

My dilemma

Many of my scripts generate template documents. These include meeting agendas, hangout notes, and team reports. These documents include a couple components that I’ve largely automated using Python, such as –

  • Calculating dates and times in reports (sometimes including timezone conversions);
  • Taking inputs I provide in response to command line prompts, running calculations, and adding those to fields in my reports; and so on.

Many of my documents have a static list of team members that I ping much like Twitter mentions when I publish them as posts on internal blogs (we use internal blogs quite a lot, as you can imagine). Those lists each need to be updated manually every time there’s a change in the team composition, in each of the documents the list appears in.

Although the team composition doesn’t change frequently, I often find myself re-using a script for a team report, or hangout agenda, for example, in another group I work with. This means another set of documents where I need to manually create a list of people, and maintain that.

An example could be something like this:

Pinging: @john-doe, @maryjacobs, @davesmith, @janestuart, @tomwright, @steverobinson

The solution

Currently, the first part of generating this sort of list of people is creating a .csv file that looks something like this:

first_name,last_name,username
John,Doe,john-doe
Mary,Smith-Robinson,maryjacobs
Dave,Smith,davesmith
Jane,Stuart,janestuart
Tom,Wright,tomwright
Steve,Robinson,steverobinson

I was planning on using Python Classes to do this, but quickly realised that I don’t understand Classes nearly well enough to using this feature for this aspect of my documents.

I realised that there’s actually a simpler solution using .csv files and the csv module available in Python instead, after watching Corey Schafer‘s tutorial on this, here:

As an aside, Schafer’s tutorials are wonderful!

I was able to borrow from Schafer’s solutions to write a script that produced a list that looks something like this:

Pinging: ['@john-doe', '@maryjacobs', '@davesmith', '@janestuart', '@tomwright', '@steverobinson']

My script looked like this:

import csv

with open('people.csv', 'r') as csv_file:
    csv_reader = csv.DictReader(csv_file)

    members = []

    for line in csv_reader:
        wpuser = f"@{line['wp_user']}"
        members.append(wpuser)

print(f'Pinging: {members}')

I couldn’t work out how to just generate a list of usernames separated by spaces. I ran into a similar issue with other scripts where I similarly loop over a list of items to produce some sort of list-generated output.

In other words, I couldn’t figure out how to output the list of usernames without the []' characters you see in my initial output.

So, I asked for help on reddit where JohnnyJordaan pointed me to this StackOverflow post that includes a couple solutions to a similar question. I had searched for a solution to my challenge, but didn’t come across this answer (or anything like it).

Clearly, I need to work on my Googling skills when it comes to finding solutions to my coding challenges.

Anyway, the solution that JohnnyJordaan suggested is pretty simple. Instead of using something like print(f'Pinging: {members}'), I could rather join the items in the list with a statement like this:

print(f'Pinging: {", ".join(members)}')

As I suspected, the solution is pretty simple. It just eluded me, completely. So thank you to JohnnyJordaan for the pointer!

I also like the * that came up in one of the StackOverflow solutions, but it doesn’t work with the f strings that I tend to use. Still, there are other ways to use them. Trey Hunner has an interesting post about these operators here (if you’re interested).

Categories
Applications Coding Design

Two more Firefox Dev Tools tips for inactive CSS and tracking changes you make

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.

You may also want to watch this video explanation too:

Both of these sets of features are really useful!

Categories
Applications Coding Design

The Chrome browser inspector has a very cool feature

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.

unsplash-logoFeatured image by Abby Anaday
Categories
Coding Design Social Web

Owning your tweets

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.

Zach Leatherman

I started doing something similar on a test site here: @pauljacobson tweets – All the tweets

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.

unsplash-logoFeatured image by Ridham Nagralawala
Categories
Coding Design Education Tutorials

A CSS Grid refresher with Mozilla

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;

Fortunately there are loads of resources online to learn CSS Grid. The latest is a video by Miriam Suzanne on the Mozilla Developer channel, titled “Build a Classic Layout FAST in CSS Grid” –

My favourite CSS Grid resources also include the MDN guide “CSS Grid Layout – CSS: Cascading Style Sheets“, and Wes Bos’ terrific CSS Grid YouTube series: