Over the weekend I was migrating several of my sites over to an nginx-based VPS.  Whilst the migration itself seemed to go fine, I was getting a weird issue with the WordPress admin where the styles and javascript was not fully loading.

After inspecting the requests with the Firebug Console, I saw that the culprit was the request:

/wp-admin/load-scripts.php?c=0&load%5B%5D=jquery-core,jquery-migrate,utils,plupload&ver=4.2.3

I tried the normal fixes such as checking permissions, updating everything, and even reinstalling WordPress but to no avail.  Then I started looking on Google for a potential fix and found this article which not only provides the solution, but also a detailed explanation of why the error occurs in the first place.

As soon as I made the recommended updates, all the sites started working properly with no issue whatsoever.

Full credit goes to the article author.  Just posting here for my own reference more than anything else!

UPDATE: As the original article no longer exists I’ve posted the instructions below:

It turns out the solution to this is quite simple. Nginx and php-fpm need to run as the same user and the directory /var/lib/nginx needs to be owned by that user. Personally I like to run all my web-related services under a www-data user, but running it under a nginx or apache user is also common. To change the user nginx runs under, edit the main nginx config file usually located at /etc/nginx/nginx.conf:

user www-data;
worker_processes 4;
pid runnginx.pid;

Now to change the user php-fpm runs under we need to edit its config file. On my Amazon Linux system this was located at /etc/php-fpm.d/www.conf while on my old Debian setup it was located at /etc/php5/fpm/pool.d/www.conf. There are two user-related settings in the config file. First, if php-fpm runs as a socket (as opposed to listening on a port), the user and group owner of the socket should be set to the same user as nginx so that nginx can access it to run php files. This is not relevant for our error, but can cause other issues if nginx doesnt have permissions to access the socket. Second, the user and group that the php-fpm process runs under needs to be the same as nginx.

    user  = www-data
    group = www-data
     
    listen = varrunphp5-fpm.sock
    listen.owner = www-data
    listen.group = www-dataL

To change the ownership of the nginx lib directory simply run the command chown -R www-data:www-data /var/lib/nginx as root (sudo will do on most systems). Finally, if we edited any config files, we need to restart the appropriate services for the changes to take effect. On most systems this can be done by running service nginx restart or /etc/init.d/nginx restart as root. For php-fpm the service name is php5-fpm.

Telegram messenger recently released an API that lets you easily create bots for their platform.  After deciding to have a bit of a play with it, I found that I had an issue where the webhooks would not send any updates to my server with no apparent error.

The Problem

I made all the following checks:

  1. Valid SSL certificate
  2. Webhook successfully registered using the Telegram setWebhook method
  3. The method responded properly when I sent a test request using a REST service tester
  4. Server access logs – look like Telegram had never even hit the server

The Solution

After a full day of searching, testing and bashing my head against the keyboard, I found this thread on Reddit, where the user described a problem where a full chained certificate was required on the server, not just the server certificate.

To create chained certificate you’ll need to have a look at what instructions your certificate issuer provides.

In my case the certificate being used was a Comodo PositiveSSL, for which I downloaded all the certificates that they sent, which contained:

  • Root CA Certificate – AddTrustExternalCARoot.crt
  • Intermediate CA Certificate – COMODORSAAddTrustCA.crt
  • Intermediate CA Certificate – COMODORSADomainValidationSecureServerCA.crt
  • Your PositiveSSL Certificate – my_domain.crt

I had to combine them all into a file in the following order:

  • my_domain.crt
  • COMODORSADomainValidationSecureServerCA.crt
  • COMODORSAAddTrustCA.crt
  • AddTrustExternalCARoot.crt

For the example above the command would have been:

cat my_domain.crt COMODORSADomainValidationSecureServerCA.crt AddTrustExternalCARoot.crt COMODORSAAddTrustCA.crt > bundle.crt

After that it was just a case of uploading the new bundle.crt to my server, updating the nginx config, and hey presto, within minutes I was receiving all the responses for my webhooks

Yesterday, I wrote about Impress.js, an awesome JavaScript library for creating online presentations. Since posting online, I’ve had several people ask how exactly to use it, as there’s no set documentation on the actual project page.  This guide will help you get started and allow you to create a simple slideshow, but after completing it please bear in mind that there’s so much more that can be done with it.  The only limit is your creativity!

This tutorial is available for you to view and download on GitHub

Requirements

To see this tutorial in action, please use Google Chrome or Safari (or Firefox 10 or IE10).  Impress.js is not currently compatible with earlier versions of Firefox or Internet Explorer.

Setup

The first thing you want to do is create a new webpage.  Mine’s index.html and within it setup the basic head and body elements.

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

Add the impress.js file before the end of the body element.  This imports the Impress library into your project

<script type="text/javascript" src="impress.js"></script>

Next we’ll create a wrapper which will contain the slideshow.  This is simply a <div> element with an id of ‘impress’

<div id="impress">

</div>

Creating Slides

Now you’ll see how easy it is to create a new slide in the presentation.  Each slide is a <div> element (within the wrapper) with a class name of ‘step’

<div class="step">
    My first slide
</div>

Whilst that creates a simple slide, things are a lot more fun you start adding data properties to your slides.  Data attributes signify properties of your slide for when it’s NOT the active slide.  The following data properties are available to you:

  • data-x = the x co-ordinate of the slide
  • data-y = the y co-ordinate of the slide
  • data-z = the z co-ordinate of the slide (how far/close it appears to the user)
  • data-scale = scales your slide by a factor of this value.  A data-scale of 5 would be 5 times the original size of your slide
  • data-rotate = rotates your slide by the specified number of degrees
  • data-rotate-x = For 3D slides.  This is the number of degrees it should be rotated about the x-axis.  (Tilt forward/lean back)
  • data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
  • data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Data Attributes In Action

The following slide configuration will guide you through each of the data attributes in action.

Let’s start with an initial slide.  This slide has it’s x and y data attributes set to 0, so will appear in the center of the page.

<div class="step" data-x="0" data-y="0">
    This is my first slide
</div>

The second slide will have an x position of 500, but the y position of 0.  This means that it’s going to have to come in 500 pixels across the x-axis (slide left) when it becomes active.

<div class="step" data-x="500" data-y="0">
    This is slide 2
</div>

Easy huh?  The next slide will start with the same x-position as slide 2, but a y position of –400.  This will slide in from the top 400 pixels.

<div class="step" data-x="500" data-y="-400">
    This is slide 3
</div>

Slide 4 uses the scale value to show how a slide can appear to zoom in/out.  It has a scale value of 0.5, meaning that it’s half the size it should be.  When it becomes active the presentation will adjust the scale of ALL the slides by the factor required to make the scale of the active website 1.  What this means in this example is that for this slide to display normally (scale value 1) it will need to be scaled up by a factor of 2 (0.5*2 = 1).  All the other slides will also be scaled up by a factor of two, and become twice the size.

<div class="step" data-x="500" data-y="-800" data-scale="0.5">
    This is slide 4
</div>

The rotate attributes allows you to rotate a slide into view.  Slide 5 is set to rotate by 90 degrees.

<div class="step" data-x="0" data-y="-800" data-rotate="90">
    This is slide 5 and it rotates in.
</div>

Finally, for a 3D transition, you can specify rotate attributes for each dimensional axis (x,y,z).

The x axis is the horizontal axis.  This means that you can make things tilt forwards (positive value) or backwards (negative value).
The y axis is the vertical axis so you can have things swing in from the left (negative value) or right (positive value).
The z axis is the depth axis (the one coming out at you) so rotating things on this would be rotating things up (negative value) and down (positive value).

Combinations

Now that you know all about the data attributes, which is really all you need to animate your slideshow, you can use your imagination to combine these in weird and wonderful ways to create your own style of slideshow.

<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
    This is slide 7 and it has a 3D transition AND a scale.
</div>

Unsupported Browsers

Impress automatically detects whether or not a browser supports it or not, and if it doesn’t then automatically adds a class name called ‘impress-not-supported’ to the wrapper ‘<div>’.  Using some CSS we can show a message to people on browsers which aren’t supported by Impress.

At the start of your <div id=”impress”> add the following:

<div class="no-support-message">
    Your browser doesn't support impress.js.  Try Chrome or Safari.
</div>

Then, create a stylesheet or add this to your existing stylesheet:

.no-support-message { display:none; }
.impress-not-supported .no-support-message { display:block; }

This hides the message by default, but then displays it to browser if the impress-not-supported class is present.

Have fun!

This tutorial covers the fundamentals of using Impress.js to create your very own online presentation.  The entire example is available on Github for you to download and play with.

View on GitHub

Requirements:

VirtualBox (FREE)
MultipleIEs (FREE)
Windows CD (XP recommended)

About

As a designer or a coder, you’ll reach a point when you want to make sure that your design looks consistent across the numerous Microsoft browsers using your Mac.

There are several ways to quickly check if it looks OK using sites like Browsershots and Adobe BrowserLab, however, those won’t actually allow you to browse the site so you can’t tell if your JavaScript is behaving as it should, your animation effects, hover effects – basically anything that moves.  In this case you’d need to get Windows working on your Mac.  There’s a few ways to do this too, including BootCamp, VMWare, Crossover.

The thing with BootCamp, is that you have to go out of OSX, and boot into Windows – which if you’re like me with over 10 applications open, is really inconvenient.
VMWare and Crossover come at a price, and from experience VMWare does use up quite a bit of resources (maybe it was just me).  So, the best solution I managed to find was: VirtualBox.  It’s a similar program to the others – it lets you install other operating systems on your Mac, but the biggest difference is that it’s FREE, and is quite light too (compared to the others).

How-To

  1. Install VirtualBox
  2. Run VirtualBox
  3. Go through the New Machine Wizard and install Windows XP
  4. Run the XP Virtual Machine
  5. Install IE8
  6. Install IE6 from Multiple IEs

Now, on your XP Virtual Machine you have IE8 and IE6, “but what about IE7?” you ask.  Well, Internet Explorer 8 has really handy developer tools which let you emulate IE7 (as if you were running IE7 itself).  To use it, just open IE, and select “Tools” > “Developer Tools”.  On there, you’ll notice the “Browser Mode” option, in which you select IE7!

Conclusion

So basically, all you need to get IE6, IE7 AND IE8 is VirtualBox and a Windows CD – Windows XP is highly recommended because it’ll let you run all 3 Internet Explorer versions on the same OS!  Most of the tools are free, and an XP CD can be bought pretty cheap from the net too if you don’t already have one.

Extra

  1. When testing sites, I normally upload them to a development site first – if you want to test a site on localhost such as MAMP or XAMPP on your Mac then I’ve found that visiting: http://10..0.2.2 in your virtual machine will work.
  2. When I first installed VirtualBox, the virtual machine would not connect to the Internet.  Now I’m no expert in Virtualization, but I found that by right-clicking my XP machine in the VirtualBox application window, selecting “Settings” and under “Network” setting “Adapter 1” to “PCnet Fast III (Am79C973)”, and attached to “NAT” seemed to get things working for me.

I hope this is useful to you!  For me it’s the best way to test across multiple browsers and it worked out free seeing as I had my XP CD to hand.

If you’re ever stuck trying to find out which web hosting service a website uses, then there’s a very simple way to find out.
All you need to do is perform a WHOIS lookup, which provides information about any domain name.

A popular WHOIS site is http://www.networksolutions.com/whois/index.jsp. All you do is enter the domain name, and check under the “Domain servers” section. It should look like “ns1.hostingsite.com” so the part after the ns1 will tell you who the web host is.

This could be really useful if you’re looking for hosting yourself, and are impressed by the speed and stability of a site you come across. You can quickly lookup its host and get the same great service for yourself!

Today was a different kind of problem. Working on a PHP web application on localhost using XAMPP, I was required to import a massive list of geographical locations into a MySQL database. The problem was, the .txt file with the data was over 700MB!!

Obviously any import with phpMyAdmin would timeout after 128MB. There’s fiddlier options such as BigDump, but I went out on a search for a more elegant solution.

Introducing Sequel Pro…

Sequel Pro is the successor of cocoaMySql. It’s free of charge, and it’s actively developed.

After a quick download of 3MB, and the 2 second OSX installation time, I launched Sequel Pro. The interface was very intuitive, the first screen asks you to enter details of a new connection. Simple enough: “site name”, “host”, “username”, “password”, “database” -> Connect!

Upon connection it quickly brought up all the tables in the database, and I selected the table that I wanted to import data into. Then, File -> Import and I selected the .txt file that I needed (though the CSV option was selected). I also made sure that the field delimiter was set to “/t” (which means TAB) because that’s how the data in my file was sorted.

The next screen allowed me to select the table into which the data would go, and more importantly, a preview of how the data would be processed. I made sure that all the data was going into the correct fields. Now that I was happy, I clicked Import and that was it.

Within 15 minutes, all the data had been imported into the database succesfully. No messing around with BigDump, no modifying of filesize limits, just a free simple tool, that takes care of everything for you.

If you’re struggling to import data into a database on OSX, then I’d strongly suggest you check out Sequel Pro too!

1)  Where are you looking for designers?

Some places look good, but its always better to look for ones in the same country as you.  Posting in forums is always good because you can look up a users profile to see their post content – which usually reflects their experience, knowledge and communication skills!  If you’ve not been already, try Web Designer Forum who have a Looking to Hire board where you can advertise your job for free!

2) Do you know what you want?

The more information you give the better – the more details you give means that it’s easier for a designer/developer to estimate the total time required and give you a more accurate quote.

If you miss out something in your initial request, chances are there’ll be additional costs during development.  There’s a lot of features in websites which might just look “standard” or as if “the software” might just make it for them but in fact it’s a lot of work for designers.

3) Do they have experience?

Obviously someone with experience is better than someone with no experience – but even the guy with no experience has to start somewhere! Generally designers tend to do small jobs for friends/family/local businesses to build up a bit of a portfolio and will then offer their services elsewhere. Personally I think when looking at experience, you should look at how much work they’ve done, and the quality of it rather than just numbers such as “10 years web experience” – which could just mean having a personal website for 10 years and nothing else!
Try to find someone who has a bit of experience at least as they’ll be able to quote you from experience, know what they’re doing, and most likely complete your site quicker as well.

4)  Things to look for

A portfolio is always one of the first things to look at. Make sure they accept a payment method you want to use. See where they’re based – it’s easier to deal with ones that are national rather than international. Checkout their homepage – if someone claims they’re a designer, they should have a decent website as proof. Validate their site – use the W3C Validator to validate the designers website – many claim to make standards compliant sites yet even their own homepage isn’t valid! Looking at experience and establishment – in a few months or even years you might want to go back to the designer to get more work done, what are the chances they’ll still be around?

5)  Is it safe to request services from someone online?

As a designer/developer, my experience has only been doing jobs requested online. Generally I’m able to pick out the ones that won’t be a nuisance. Seeing as websites are a web-based product, and most designers advertise their services online anyway I see no harm in getting work done via their website, or a forum or job site. It would be advisable to go for the designer with the portfolio and decent site so you know they can be trusted.

6)  Are you prepared to pay?

Just because you have a new idea and want to go online doesn’t mean that designers will lower their prices for you.  Designers tend to charge a fixed hourly rate whether it’s David Beckham that wants a site, or just your average Joe Bloggs who has some shoes to sell.

Most designers will charge a deposit upfront (amount varies) to protect themselves. The remainder of the cost is charged on completion.

7)  Signing contracts

Try to get a contract signed once you and the designer have made agreed on price and requirements.  A contract is good for both parties as it makes everything more “official” and gives you more protection if something does happen to go wrong.

Most contracts are agreements that the designer is willing to provide their service to you for X amount and that you agree to pay the amount on completion.  When the work is done, it should belong to you – but make sure the contract says so.