Learning Python

When I initially thought about how I’d rebuild Lists of Bests, I had in mind to use some technologies that were somewhat new to me, so I’d have a chance to learn along the way. Well, since that post those new technologies aren’t all that new to me anymore. At my new(-ish) position at Arcadia, I’ve been writing quite a bit of React along with Ruby on Rails (and its API capabilities). So, there isn’t that much of a need to learn those tools from scratch.

So, what to use instead? Well, I’m thinking it may be Python and the latest version of Angular (I still work some in AngularJS 1.x, but not at all with any version greater than 1.6). Why these? Well, I think the primary goal of getting the app up and running again was to use the process as a learning opportunity. If I’m using familiar technologies that I’ve used before, or currently during my day job, then it won’t be as much of a learning experience.

I’ve kick-starting my learning with the ebook version of Python Crash Course, and along side that, the Flask Mega-Tutorial. The book is doing a fantastic job of teaching me the basics, and the Flask tutorial is helping me get a handle on pieces of the web programming side. The Python Crash Course book does include a Django section which I haven’t encountered yet, but I think Flask may be more along the lines of what I would use for Lists of Bests.

It was great to see how Pete (aka RasterWeb) is starting to learn Python as well. In his post, he mentions how “learning a new (computer) language is probably easier now than it was 25 years ago” and I totally agree. Way back when - like with Pete, I was probably learning Perl - the resources available were much more limited than they are now. Just getting your system set up to run a particular language could take a long time with lots of trial and error. Now, with tools like Homebrew on a Mac, and Chocolatey on Windows, getting a programming environment up and running only takes a few minutes.

Making this change may make it take a bit longer to get the old site up and running, but I think it’ll be worth it. I’m excited to actually get it started soon.

~ ~ ~

Back to Windows?

Crappy photo of the MSi laptop I bought

About a year ago, I bought a Windows laptop so that I could have a non-work computer to use. I thought about getting another Mac (for over 10 years, have been using them for work and home), but I didn’t feel like shelling out how much they’re asking for the newer MacBook Pros. So I started looking at Windows laptops for their power, but also the ability to play games that aren’t available on Macs. I bought an MSi laptop, and it’s mostly succeeded as becoming a fill in for the Macs I’m used to.

However, getting things exactly like I’m used to has been a bit of a struggle. I was happily surprised at the software ecosystem for Windows, but still there were a couple of hiccups. Some applications and tools can be quickly installed with the Chocolately package manager. Thankfully, many of the other tools I normally use have a Windows version, like Visual Studio Code, 1Password, SimpleNote, and others.

The one thing that’s not quite set up how I would like it is the more Unix-y tools I’m used to, like Vim, Ruby, Node.js, Git, ssh, and others. There are some packages available from Chocolately for these, but PowerShell isn’t bash, so getting all these tools working together how I’m used to is still a work in progress.

There are also some neat new features in Windows, like the Windows Subsystem for Linux, that I’m eager to play around with a bit more. Hopefully, details about things like that will end up as blog posts as well.

2019-01-14 — #programming #windows
~ ~ ~

Making my own sketchbooks

Some of the sketchbooks that I have made so far

Since I’ve been sketching more the last few years, it sometimes seems like I’m always searching for the next sketchbook to buy. I’ve been a huge fan of the different sizes of the Stillman & Birn Alpha sketchbooks, but I thought it could be fun to make some sketchbooks of my own.

When I started looking for some bookbinding tutorials, I came across Sea Lemon’s videos on YouTube, and specifically her simple saddle stitch bookbinding tutorial. That definitely seemed like something I could pull off. Plus, it didn’t seem like the supplies for those kinds of books would set me back too much.

I visited the local Dick Blick store and picked up a few supplies, like a few sheets of thick posterboard in various colors (for book covers) and a big roll of cheap-ish drawing paper for around $30. The paper wasn’t all that I needed, though. All that was left were a few more essential tools (like a awl, a bone folder, and some thread), and I could make my own sketchbooks with relative ease.

The first couple haven’t been the best quality, and they certainly don’t have perfectly square corners, but they work well enough to sketch in. You can see in the image above I’ve finished one, and the larger, square one is almost completely full as well.

Once my current handmade sketchbooks are full, my next goal will be to take an old and cheap hardcover book, rip out the innards, and fill it with my own sketching/painting paper. Sea Lemon has a video on case binding, which looks to be exactly what I want to do. First, though, I need to fill up the ones I’ve already made.

All in all, I was surprised how easy it was to make a basic sketchbook that I could start filling with my own sketches and paintings. I’ve already made a half a dozen sketchbooks, and I still have plenty of paper and supplies for another twenty, all for the cost of a couple of professional sketchbooks.

A few more resources:

2017-12-12 — #art #bookbinding #diy #sketching
~ ~ ~

Stopping CNN's autoplaying videos with a Chrome extension

Even though I have uninstalled Flash and checked all the appropriate settings in Chrome, CNN still seems to be able to get its videos to start playing whether I want them to or not (I don’t). And because of this, I decided I’d like to give building a Chrome extension a try in order to stop those videos from autoplaying.

I realize there may be other Chrome extensions out there (like Disable HTML5 Autoplay), but I want something very simple and something I can update as needed. I don’t want to disable videos across the whole web. For the moment, I just want to focus on CNN, and maybe BBC News.

Luckily, I don’t need to start completely from scratch, because I found an extension that does something very similar: Make Medium Readable Again. This extension removes some annoyances from Medium articles, which is very much in line with what I’ll be trying to achieve in my own extension. I’ll try not to reuse any of its code, but instead just the ideas of how it accomplishes hiding elements on a page.

Creating the necessary files

For the simplest script, it appears that we’ll need just a couple of files to make it work. First, is a manifest.json file that stores the configuration for the extension, and second, a script file (named content.js) that will do the work of hiding the videos.

This looks to be the least amount of info needed for the manifest.json file:

{
  "manifest_version": 2,
  "name": "Simple Video Autoplay Stopper",
  "description": "A very minimal extension to stop autoplaying videos on CNN",
  "version": "1.0",
  "permissions": [
    "tabs",
    "*://*.cnn.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://*.cnn.com/*"
      ],
      "js": ["content.js"]
    }
  ]
}

And the script that does all the work, content.js. Just to make sure it’ll work on CNN pages, I’ll just have it print something to the dev console.

console.log('Success! You are on a CNN page.');

Install your simple extension

Now, with those two files in a directory on their own, you can add them in Chrome. On the Extensions page (via Windows menu, then choose Extensions), you will need to check the “Developer mode” checkbox, and then click the “Load unpacked extension…” button. From there choose the directory with those files, and then you should see something like this:

Screenshot of extensions page with new extension's details

Once installed, open up the Chrome dev console and if you go to CNN’s website (any page), you should see the message above (possibly hard to find amongst a whole bunch of other messages):

Screenshot of dev console log showing our success message

And if you visit any other non-CNN website, you should not see that message in the dev console.

Let’s block some video

The CNN HTML and CSS code isn’t the greatest, but they do seem to follow some common patterns when it comes to their video players. It appears that many of the video players on the CNN site have a <div> with a class name of media__video, which looks something like this:

<div class="js-media__video media__video" id="media__video_large-media_0--wrapper">
  ... evil video player ...
</div>

My goal at this point is to just wipe the video from the page completely. I don’t want to temporarily disable it and provide a link to play it. And I don’t want to replace the video with a “blocked” icon, or something like that. There has yet to be a time that I actually wanted to watch the CNN videos. I just want it gone.

So, let’s just wipe the video player off the page completely. Here’s just about the least amount of code needed to accomplish deleting the videos:

// in case there are multiple videos, let's find all of 'em
const playerWrappers = container.querySelectorAll('.media__video');

// now, delete them from the DOM
playerWrappers.forEach(player => {
  player.parentNode.removeChild(player);
});

Let’s give it a try

Once you’ve installed an “unpacked extension” from local code, you can always update the extension by clicking the “Reload” link - shown in the first screenshot above with the Apple symbol next to it (it will look different depending on your OS).

Now if we visit a CNN page with video we should no longer see the video at the top of the article. Here’s what it looks like with the extenstion disabled (or not installed):

Screenshot of the CNN page with the video present

And here’s what it looks like with it enabled:

Screenshot of the CNN page with the video completely removed

Awesome.

Clean it up a little bit

If you notice in the first screenshot included in this post, instead of a nice icon for the extension you’ll see the puzzle piece logo instead. To remedy this, I created a super simple (and very ugly) image for the extension (named icon.png), and then added a reference to it in the manifest.json:

{
  "manifest_version": 2,
  "name": "Simple Video Autoplay Stopper",
  "description": "A very minimal extension to stop autoplaying videos on CNN",
  "version": "1.0",
  "permissions": [
    "tabs",
    "*://*.cnn.com/*"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://*.cnn.com/*"
      ],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "128": "icon.png"
  }
}

Success!

It’s nice to see how little code it takes to get rid of those annoying autoplaying videos. When I do visit CNN, it’s usually to get a quick impression of a story, and not any in-depth reporting. But when there are videos starting without me wanting them to, I want to check the CNN site less and less. But now, I have an easy solution.

It’s likely there are cases that I will miss, due to different HTML and CSS identifiers surrouding the video. If so, I’ll likely come back and update the extension to make sure those videos are removed as well. Even if I do, it’s nice to know it isn’t all that difficult to do.

Where to find the source code

The code for this simple extension can be found here on GitHub: simple-video-autoplay-stopper. If you’d like to fork it and add your own features or block videos from other sites, feel free. I think I’m going to keep it as simple as possible for myself.

Some links that were helpful

Finally

I may revisit this sometime soon and add support for blocking video on other sites, and I may actually make it an option to play the disabled video. If so, I’ll make a new post explaining the modifications I made. But for the time being, this works just as I had hoped!

~ ~ ~

Setting up SSL/HTTPS with Let's Encrypt for kindofblue.com

With an upcoming version of Firefox set to warn users when they’re browsing on a site without SSL encryption enabled, I figured it wouldn’t hurt to get it all set up for this domain - kindofblue.com - as an experiment. I knew that with Let’s Encrypt, the SSL certificates are free. It just requires a bit of work to get them set up.

Luckily, at DigitalOcean - where I host this site/domain - they have this handy guide for getting HTTPS set up with LetsEncrypt (for Ubuntu Linux). Since I’m using the same HTTP server (nginx), I was able to follow along without needing any extra help.

I did have to adjust my DNS setup at Namecheap, since I had a wildcard (*) catch-all domain record. Once all I had was my necessary DNS entries (minus the wildcard), I followed along with the instructions pretty much as given.

Here’s the quick version of the setup instructions:

# add certbot repository
sudo add-apt-repository ppa:certbot/certbot

# update package list
sudo apt-get update

# install the python certbot client
sudo apt-get install python-certbot-nginx

Next, make sure that you have an nginx configuration file with the proper domains listed. In my case it was in the file /etc/nginx/sites-available/kindofblue.com where the config included:

server {
  server_name kindofblue.com www.kindofblue.com;
  ...
}

They then explain to make sure that if you’re using a firewall, to allow both HTTP and HTTPS traffic through. Their example is with the ufw utility, but I double checked that I’m allowing both kinds of traffic through with the firewall I’m using, iptables:

$ sudo iptables -L
Chain INPUT (policy ACCEPT)
target     prot opt source               destination
...
ACCEPT     tcp  --  anywhere             anywhere             tcp dpt:http
ACCEPT     tcp  --  anywhere             anywhere             tcp dpt:https
...

We now need to get a certificate using the certbot client (again, using my own domain as example):

sudo certbot --nginx -d kindofblue.com -d www.kindofblue.com

You’ll be asked a few questions, but the process is quite quick. When it asks for the HTTPS settings, I asked it to make all non-HTTPS requests redirect to the HTTPS domain. If you look in your appropriate nginx configuration file, it should look like this:

# Redirect non-https traffic to https
if ($scheme != "https") {
  return 301 https://$host$request_uri;
} # managed by Certbot

If that section is still commented out, then you’ll need to uncomment and then restart nginx with: sudo service nginx restart

Once that’s done, and there were no hiccups in any of the steps above, you should now be serving your site securely. So now, this blog is now served only over HTTPS! This was so much easier than I had expected it to be. And as a part of the certbot setup, it installs a recurring task to update the certificate when needed - since Let’s Encrypt certs only last for 3 months at a time.

Once I get everything set up and going with Lists of Bests, then I’ll sort of know what I’m doing.

2017-11-09 — #nginx #security #site