Archive for March, 2017

Make your videos look awesome with a shallow depth of field

Saturday, March 18th, 2017 | Video

If you have done any talking head or tutorial videos, you may have run into a problem. Namely, that your videos suck. I know mine do. Yours are probably way better. But there is still a clear distinction between your videos and what the pros produce, right?

This is the problem I have been trying to solve. I have a nice camera, so it should be possible.

Lighting

The first thing I did to improve my videos was to bring in some proper lighting. I have two softboxes with high-output bulbs on them. In an ideal world, you would have three to set up the industry-standard three point lighting arrangement. My kit only came with two, though, so I have had to make do with other lights around my house to fill in the gaps.

For comparison, here is me under my natural houselights:

It doesn’t look terrible: it appears natural. However, one side of my face is over-exposed while the other is in shadow. My eye sockets are too dark. Detail is lost.

Here is my ugly face in the studio lights:

Notice that the shadows in my face are filled in. It is not the dark and gloomy picture you tend to get when just using your standard home lighting.

Things are looking a little better. My next jump is the one I want to discuss in this blog post: using a shallow depth of field.

Why depth of field is important

Most people do not have a home studio. Therefore, your background is whatever you can find. In the video still above, I have the piano in the background. This works well but does mean I have nothing but hard surfaces behind me, resulting in a lot of echo.

Any background is going to be distracting, though. The ideal solution is to have the background blurred so that the audience focus on the talent exclusively.

Using a large aperture

The way we create this affect is using a large aperture. The above clip was filmed with my 24-105mm lens. This is a nice piece of kit but only goes down to f4. So I switched it out for my 50mm prime lens so that I could shoot at 50mm.

Here is the result:

I spent no time getting the lighting right, composing the shot to make sure I was in it, or working out what I was going to say. And yet, it looks cool. I am in focus while the window behind me is very blurred.

How to keep yourself in focus

The pros have someone to shoot the video and somebody else to be the talent. When you are on your own, you do not have that luxury. One of the problems with shooting at a high aperture is that the depth of field is incredibly shallow. This is the effect we want: however, it does mean it is tricky to get the focus point correct and stay within in.

Enter EOS Utilities from Canon. This little piece of software allows you to remotely control your camera from your computer.

My EOS 6D has wifi. However, I could not shoot live video over wifi. Therefore, I had to connect it using the mini-USB port on my camera. Once I had done this, I was able to get full control over the live shooting mode from my laptop.

This means that I can be in position and then set the camera up. By clicking on the screen where I want the focus to be (my head) the camera’s autofocus then adjusts to set it correctly.

Remember that if you want full control, you need to set the camera to manual (M). This applies for the software, too: if you want all of the controls on your computer, you need to alter the dial on the camera itself.

Amazing Malaysian

Friday, March 17th, 2017 | Books, Food

Malaysia is a cool country when it comes to culinary history. They have the Malay people, along with large minority populations of Indian and Chinese people. They also have colonial influences from the British and Portuguese. Their food is almost fusion in itself.

I also like that they do not worry too much about food being hot: it all gets served together. This is nice because serving scorching hot food is, quite frankly, a hassle. A hassle worth going to when the food calls for it, but in this case, it is fine to let rice steam for 15 minutes after cooking.

The narrator is Norman Musa. He hails from Penang, but is better known for Ning restaurant in Manchester.

Most of the recipes followed a set pattern. You would start by blitzing a mixture of ingredients: typically chilli, garlic, cinnamon, star anise and onion (or not, in my case) then mixing it with some ground cinnamon and a pandan leaf, before frying it and adding some meat.

It turns out that you can get pandan leaf in Leeds. Many of the other rare ingredients we were unable to procure. Musa also uses dried chilis in most of his recipes. We managed to pick up a bag of a few hundred at the international supermarket.

Fish pate. I have no idea if I was doing this correctly.

Indian lentil patties.

Spicy baked haddock.

Beef with pineapple.

Beef with tomatoes.

Aromatic chicken curry.

Beef with rice.

Christmas at the Crowne Plaza

Thursday, March 16th, 2017 | Photos

I took this photo in February.

Still, maybe the Crowne Plaza is just so popular that you have to book your Christmas do in February. Not that any Toastmasters will be eating there after what happened last time.

How to beef up your YouTube channel (if you have a podcast)

Wednesday, March 15th, 2017 | Success & Productivity

Recently, I was putting together a YouTube channel for Worfolk Anxiety. The problem? I did not have many videos. I could have released a lot of our content up-front, but I wanted to put it out on a regular schedule as doing this achieves more engagement.

It also means that all of our content is the same format.

Instead, I decided to leverage some of the work I have already been doing. The Worfolk Anxiety Podcast has been running since last year and now has a small archive of episodes with more scheduled to come out every two weeks.

So, I look the podcasts and re-encoded them as videos.

I put together a title card, which, as you can see, is just a simple image with some text directing people to the podcast URL. Then I combined it with the audio to make a video I could upload.

Doing this for every episode would be time-consuming, Instead, I picked out a few select episodes and named them “best of the podcast”. Doing this allows me to upload a bunch of videos without creating any more content. If it turns out to be a useful acquisition channel for the podcast, we can do more work on it then. For now, I see it as a showcase of the best that will direct people towards subscribing using their usual podcast app.

Logotype

Tuesday, March 14th, 2017 | Books

Logotype is a book by Michael Evamy. Here is the description:

Logotype is the definitive modern collection of logotypes, monograms and other text-based corporate marks. Featuring more than 1,300 international typographic identities, by around 250 design studios, this is an indispensable handbook for every design studio, providing a valuable resource to draw on in branding and corporate identity projects.

It is literally just that. A big book of logos. There is nothing else in here. No real commentary on logos or review of what works well and why it works. Just lots of logos.

It comes in a regular and mini size. The regular seemed to be out of stock. The mini size does have incredibly tiny print. However, as someone with average eyesight, I was able to read it fine by moving my face closer to the page. If your eyesight isn’t so good, you will struggle.

Building an online checkout with Stripe and React

Monday, March 13th, 2017 | Programming, Tech

Worfolk Anxiety recently launched its web store. We build this for a number of reasons. One is that it gives the customer a better experience because they can buy one eBook and get it in every format. Another is that it makes it a lot easier for us to offer upsells and tripwires.

Payment processor

We’re using Stripe as the payment processor. Stripe has become very popular over the past few years because it allows you to build an entirely integrated checkout process without any mention that Stripe is behind it.

How do they do this without requiring you to have PCI compliance on your server? It is all done client-side. You include their JavaScript library. This hashes the credit card details the customer enters and sends it off to stripe’s servers. Stripe then send you back a hash that you can then use to make server-side credit card charges.

Using React

Given so much of the work has to be done in JavaScript, React was a good choice for building the checkout. This allowed me to make it interactive and give the user clear and speedy feedback.

In the case of our checkout process, you are asked to enter your credit card details. Once you have done this, further fields are revealed asking you to enter your name and email address. This step by step approach is a better experience for the customer because they do not get overloaded.

Deploying with Webpack

The finally step is Webpack. This takes the JavaScript and packages it up for the browser. Because the JavaScript is written in ES6, and web browsers only support ES5, it first uses Babel to transpile it back to ES5, before loading everything into one single module and compressing it.

How to set up a web store with WooCommerce

Sunday, March 12th, 2017 | Tech

At the end of last year, I used Shopify to build an e-commerce store for Mountain Wallet. This worked well, but the costs quickly added up. The base Shopify subscription is only $30 but then there are themes and plugins that you will want to pay for on top of that. Last month, I ported it over to WordPress and WooCommerce, and I thought I would discuss my experience.

What is WooCommerce?

WooCommerce is a plugin for WordPress. Once installed, it provides you with a shop admin built into the WordPress admin, as well as front-end pages and a full checkout process. It installs like any other WordPress plugin making it very easy to get up-and-running.

Because of its popularity, many WordPress themes support WooCommerce out of the box. If not, you may need to play around until you find a suitable theme. I used a theme named Bento.

How easy is it to use?

As easy as Shopify. You add your products like you would add posts. It’s the same with adding product images: you use the media uploader. There was some messing around setting up shipping options and configuring payment integrations, but nothing too taxing.

Plugins I am using

As well as WooCommerce, I am using the following plugins:

  • Facebook Messenger Chat
  • Header and Footer
  • Instagram Feed
  • MailChimp
  • Social Media Flying Icons

There is nothing directly commerce related here. These allow me to add a chat link to the Facebook page, insert Google Tag Manager scripts, link the Instagram feed, add a mailing list sign-up form and some share icons.

I also have my standard array of security plugins installed.

Venla’s 5-month birthday

Saturday, March 11th, 2017 | Family & Parenting

On Thursday, Venla reached the grand old age of 5 months. She celebrated in the usual way: by doing a lot of crying and screaming.

Unfortunately, as people have a habit of doing, she overindulged a little. Soon she was passed out on the sofa.

IT Career Acceleration course

Friday, March 10th, 2017 | News

Today I am launching my new course: IT Career Acceleration. What is it and why should you do it?

First, it is targetted at people in IT. So if you work in a different industry, give it a miss. Second, it is designed to help you take the next step up the career ladder. So, if you are happy in the job you are in and do not want to earn any more money or get promoted, you can safely skip it too.

However, if you do want to progress your IT career, it will be of interest.

Simply put, it takes the best parts on CV writing, interview techniques and negotiating for more money from the IT Contracting Master Class, adds in some awesome stuff about how to get promoted, and packages it up for the same price as a £15 cup of coffee.

A course for winners

You probably already have a good CV and set of interview skills, right? That is how you have carved out a successful IT career already.

There is room for improvement, though. There always is. The best athletes in the world have a coach. Someone to help them refine their skills even further. That’s what this course does: it takes you from good to great.

Do not miss that perfect opportunity

Olympic athletes are a good comparison. They wait four years for the games to arrive. They get one shot, and then it is over. But they don’t spend the time in between sitting idle. They train so that when the opportunity comes along, they are ready.

Winning jobs is the same. Your dream job only comes along once. If you are not prepared, there is not much you can do to fix it in three days. You have to do the work in advance. Which is no big deal, right? Who isn’t willing to invest a few hours in their career?

Get started for free

The first five lessons of the course and the first workbook are free. IF you previously registered for the Master Class, you can use the same login details.

Read more about the course on the Master Class website.

Can Cloudflare speed up your website?

Thursday, March 9th, 2017 | Tech

Cloudflare is a CDN (content delivery network) that sits in front of your web server and speeds up your website. They have grown in popularity because they offer a set of basic features as part of their free plan. Therefore, you can get started for nothing and see what you think.

Setup

It is easy to get set up with. You start by entering your domain and Cloudflare scans the DNS records for it. It then sets up all of the rules in its own system and you update your nameserver records to point at their server.

You choose which hosts go through Cloudflare and which do not. You move all of your DNS over to their system, but only certain parts (typically www and any static asset subdomains you are using) will flow through the Cloudflare CDN.

Speed results

I am resistant to make any recommendations here. I ran a couple of tests for Anxiety Leeds. A sample set of one project with a few tests run is not representative.

I first ran a test while the site was still running on my server with no CDN in front of it:

I then ran the same test again once Cloudflare had been set up. I got the same results: the time did not change.

However, when I tried it the next day I got much faster results:

Whether this was because it took Cloudflare a while to cache everything, or whether it was because it provides no speed benefits but my server was just faster at the time I re-ran the test, I am not sure.

When I ran the test a few weeks later, things were really slow:

However, I ran the test again immediately after and got completely different results:

DNS management

It is also worth considering whether you want Cloudflare managing your DNS. For example, you could move all of your DNS management over to Cloudflare and bypass their CDN layer. I use NameCheap for registering my domain names and they provide free DNS hosting, also. How to do the two compare?

NameCheap is great: they provide a redirect server and email forwarding. Therefore I use them for a lot of the domains where I want to implement those features as I get them for free. Their email forwarding service reliably delivers emails to my inbox.

Therefore, I usually stick with NameCheap.

Cloudflare does have one advantage, though. They support CNAME flattening on the root domain. When using Heroku, you have to CNAME your domain to theirs. However, you cannot CNAME the root domain (www.example.com works fine, but example.com does not) as this disrupts all of your other DNS records.

Cloudflare (and a number of other DNS providers, but not NameCheap) solve this by providing CNAME flattening in which they allow you to enter a CNAME, but they translate this into an A record that updates automatically. Because of this, I tend to use Cloudflare when using Heroku.

DNS speed

Another concern is the speed of Cloudflare’s DNS server. First, let’s look at a typical response from the NameCheap free DNS service.

30 milliseconds. That sounds fine. Now, compare that to one of my sites running on Cloudflare’s DNS service.

It is an eye-watering 813 milliseconds. That is almost an entire second just to do the DNS lookup. I immediately re-ran a few more tests on various websites, including on the same website again. The second time, it was much better.

6 milliseconds. It is also a big difference to the first result. Such discrepancies are concerning.

Conclusion

Can Cloudflare speed up your website? Based on the available evidence, no. However, this is one website that I ran five tests for. That is not a large enough sample to draw any conclusions from.

Second, it may be that I need to spend more time playing around with the cache headers on Anxiety Leeds to get the full affect. The documentation suggests I should not have to do this, but I am not convinced that that is the case.