Archive for the ‘Tech’ Category

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.

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.

Is this the worst sprint ever?

Wednesday, February 1st, 2017 | Tech

If you are not familiar with a burndown chart, the idea is this: you pull so many points (bits of work) into a sprint (a period of time, typically two weeks) and your burndown chart shows you how far you are through said work. So, the red line on the chart (the amount of work done) should follow the grey line.

Or, at worst case scenario, the red line should stay flat because you have done literally nothing.

However, what it should never, ever do is go in the opposite direction to the grey line. Because that would mean you actually ended the sprint with more work to do than you had at the start of it. The point of a sprint is that you should not be bringing in extra tasks.

Safe to say then, that this was not a great sprint for us. But, it is at least comically bad.

SEMrush

Saturday, January 21st, 2017 | Tech

SEMrush is a competitor analysis tool for online marketing. Specifically, they focus on Google. You can enter a keyword and it will bring up a report that shows you:

  • Volume of traffic
  • Related keywords
  • What the search results are for it
  • Who is running paid ads
  • Copies of the ads they are running
  • A history of the ads for that keyword

Then, if you want to look at a specific competitor, you can bring up a domain report. This shows you:

  • How much organic search they are getting
  • What keywords it is coming from
  • Copies of the adverts they are running
  • What keywords they are bidding on
  • How much they are spending on paid advertising
  • Where their backlinks are coming from
  • Who their main competitors are

They also have a projects feature where you can enter your website and SEMrush will track it. This includes crawling it to find broken links and other bugs, as well as offering SEO advice: does a specific page have too little text or too many keywords?

It is super-useful for marketing. However, it also expensive. Their lowest package, which only allows you to create five projects, is $70 per month. They offer a free 30-day trial (for the pro account, the guru account trial is only 14 days) if you search around for it, which is time enough to evaluate if it will deliver enough benefit to cover the cost.

BriteVerify

Friday, January 20th, 2017 | Tech

Email is a word of trouble these days. Most of it spam. So everyone, ISPs and users alike, put up huge defences against the spam. These are typically so aggressive that a huge amount of legitimate email gets caught in the net. For example, gMail categorises anyone emailing Anxiety Leeds as spam. Most ISPs block any email from Leeds Skeptics also.

However, email is still really useful and probably the most powerful form of online communication, so everyone is still using it. You have to find a way to make it work. One of the important ways of doing this is protecting your reputation. You cannot be sending emails to the wrong accounts, or accounts that do not exist.

When I started a course to teach IT contracting, I had a problem. I was giving away my first set of lessons, and a book. All you have to do is register and you get it all for free. But people were registering with fake email addresses or other people’s email addresses. To stop this, I put in a double-opt-in system, in which you had to click the link I emailed to you.

However, still meant I had to send an email to a possibly fake email address. Not to mention that people started using disposable email addresses.

So, I integrated BriteVerify. They have an API where you can check whether an email address exists or not. They check the MX records of a domain, filter out disposable email addresses, and does a few other checks.

Does it work? Mostly, yes. It passed on all the test email addresses I gave it. In the real world, it is not perfect, but it does provide an easy way for me to automatically screen out obvious fakes. They maintain a list of disposable email address providers for example. I have my own blacklist, but there’s is much more comprehensive than mine.

The downside is that a) it costs money ($0.01 per check with no free tier) and b) that it will slightly slow down the response times of my page while I am speaking to their API. Given that registration is a one-time process, though, so far it has proven worth it.

Unbounce

Thursday, January 19th, 2017 | Tech

Unbounce is a WYSIWYG editor for building landing pages. If you have no coding skills, you can whip up a landing page for your business by dragging and drop elements onto pre-built templates.

I have been wondering whether approaching everything as a coder is a distraction from building my businesses online. Maybe I should use more tools like this and concentrate on building the business, not the website code. It certainly does allow you to get up-and-running very quickly.

It also has some good integrations: I can easily drop my MailChimp account in there, for example. It also supports building a desktop version and a mobile version at the same time. As you drag elements in for one version, they appear on the other. You can then toggle between them and adjust each one individually.

Some things I found frustrating. For example, centring text. When coding, I would make the box 100% width, and therefore it would be in the centre regardless of the screen size. However, Unbounce requires you to create boxes with a specific size and then adjust the size for the different breakpoints.

Also, I did not feel it added too much value. Yes, it allowed me to create a page, add some integrations and create A/B variants. That is all useful stuff. But, I could do that myself. It does not provide step-by-step funnels and chain-linking pages that some of the competition seems to offer. I enjoyed my free trial, but ultimately, I have decided I can do without it for now.

OptIn Monster

Monday, January 16th, 2017 | Tech

Earlier this month, I trialled OptIn Monster. It is a set of lead generation tools designed to help you convert visitors into return users. I have been using it on my personal blog, as well as the Leeds Restaurant Guide.

For my blog, I used their footer bar. As you scrolled down the page, a bar would appear to ask you if you wanted to get the blog posts in a weekly email. I like this because it is a not intrusive way to offer some extra value to visitors. It does not stop you reading but lets you know my newsletter is there. The problem was that when the bar loaded in, it changed the font of my titles.

By the way, if you did want to sign up for that newsletter, it is still available: you can find it at the bottom of each blog post page.

With the guide, I used exit intent offers. These are dialogues that appear just as the visitor is about to close their browser tab. In this case, I offered them the first three chapters of the guide for free. Again, that is still available on the guide’s website. In this case, I couldn’t seem to get the offer to trigger.

The toolset itself is a great idea, but the implementation is not perfect yet.

New book alert: How to Exit Vim

Thursday, January 5th, 2017 | Books, News, Tech

It has been a writing-heavy month over at the Worfolk household. On Saturday, I am going to be announcing my new restaurant book. But, between finalising that and sending it to the printers for proofing, I have finished another, and I am announcing that one today.

The title is How to Exit Vim.

For months I have been joking that what would be really useful is a book on all the different ways there are to exit Vim. For those not in-the-know, Vim is a command-line text editor for Linux. It is notoriously difficult to exit once you enter the program.

The truth is, though, that book would be genuinely useful. So I have written it. It comes out on 15 January. You can pre-order it now from Amazon and iBooks.

Mailgun

Wednesday, January 4th, 2017 | Tech

Mailgun is an email sending service made by Rackspace. Specifically, it is designed to be used as an API for sending automated emails.

This is different from a mailing list manager such as MailChimp or Infusionsoft. These allow you to build up a mailing list and send out newsletters. Mailgun is designed to be used by web applications looking to send emails behind the scenes. For example, I use it in my IT contracting course to send out welcome emails when someone registers.

Setup is relatively straightforward. You register, enter your domain name, and then Mailgun gives you a whole host of DNS entries you need to add to your domain. You are then given an API key that your scripts can use to send messages out from. They have a PHP library you can bring in via Composer (and libraries for all the other languages too), so it was just a case of wrapping that in my own code.

Best of all, they have a free tier: you do not pay anything for your first 10,000 emails.

Of course, the real test of success is delivery rates. Time will tell whether that is successful or not. However, my old solution was setting up a gMail account and sending email through their SMTP servers is unreliable (Google occasionally thought I was being hacked and locked my scripts out) and meant the email was coming from an @gmail.com account, which is not very professional. So, this promises to be a big improvement even if delivery rates are only just as good.