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
~ ~ ~

How I'll build the new Lists of Bests

When Lists of Bests launched in 2003 (see previous post), the site consisted of a few Perl scripts and maybe an external CSS file. I don’t think I used a bit of JavaScript on the site at all, and my design skills were less than competant.

Despite all that, the site did quite well. I can’t recall the total number of users I had on the site at the time I sold it to the Robot Co-op, but it was maybe a few thousand. And that was many more than I had ever expected. All in all, I considered the project a success.

The web development landscape has changed quite a bit since that time, and I have some new decisions to make, when it comes to how I’m going to put the site back together again. I suppose using Perl again is an option, but I’ve forgotten everything about that language.

I think for the second version (well, third, if you count Robot Co-op’s version) of the site, I’m going to split the front-end and the back-end into separate pieces. That’s how we build things at work and it seems to work well. So, given that, I needed to make a decision on which direction to go.

For the back-end, I was wondering if I should go with a JavaScript server like Express, or stick with what I know and use Ruby on Rails, and specifically using the new-ish Rails API-only functionality.

On the front-end, I was a bit less sure. I’ve already built a small React application, but at work I’ve primarily worked with Angular. At this point, I’d say I’m probably a bit more proficient with Angular, but I’d like to attempt a larger project with React. And then there’s also Vue.js, which looks interesting and has gained a lot of steam lately.

In the end, based on experience and ability to find online documentation and examples, I think I’m going to go with React for the front-end, and Rails for the back-end. I think I’ll be able to spin something up quicker with these than with any other technology.

Finally, for the original I stored all the data in the MySQL database, but I’ve been working with PostgreSQL the last six or so years, and I’m a little more comfortable with it.

~ ~ ~

Bringing back an old friend

I have a crazy idea. It may even be a bad idea.

I’m going to try and bring Lists of Bests back from the dead.

If you don’t know what I’m talking about, here’s the story. Back in early 2003, I had an idea for a website where you could keep track of books you’ve read, films you’ve seen, and albums you’ve listened to that happened to be on a list of greats (think The Academy Awards, the Pulitzer Prize list, etc). The result was Lists of Bests. It started out with maybe 10 lists, but over the years grew to over 30 lists of all kinds.

Then in 2006, I sold the domain and the site to the Robot Co-op group (old blog post), and they added a lot of neat features to the site and integrated it with their other properties. It was in good hands, and they kept it running for many years.

But at a certain point in the last decade, the Robot Co-op - and Lists of Bests - ceased to exist.

Now, flash forward to a few weeks ago when Namecheap had a sale on domain name registration, where .org sites were only a few dollars to register for a year. On a whim, I picked up listsofbests.org (the .com domain seems to have fallen into hands trying to make a buck), and thought I’d try and bring the site back up… in a way. I guess the big question is this: why?!

I think it will be a good chance to a) learn something new, and b) give me something to write about here on the weblog. There are still many unanswered questions about this endeavour, but I’m going to give it a decent attempt. I don’t think it will end up being a fully functional site at the level it was before, but it could end up as a neat proof of concept. We’ll have to see where it goes.

I’ll likely be sharing the code, and I’ll definitely keep track of progress here on the blog. But who knows what I’ll end up with in the end. It could be fun, right? Wish me luck.