- The most recent blog articles - mostly about PHP, Golang, databases or general website dev ops.
Convert Access (.mdb) to MySQL
Having recently needed to convert a Microsoft Access database into (something usable?!) an SQL format, I thought I’d mention the findings. This is mainly focusing on .mdb files but might work with newer the accdb files. This approach might also work for many kinds of SQL db, but for simplicity we were importing into a MariaDB instance - so MySQL essentially. There’s a few options you can go down:Web Engineering Un-conference: Round up
I was writing up some notes from my time visiting the WEUC recently and thought, why not share them too! So this is a round up of the talks I went to and some very brief content. Most of them have been simplified down to the bits I wasn’t aware of and found interesting. Talk 1: AI, Categorisation: Supervised (e.g. Labelling) vs. Unsupervised (e.g. clustering). All very interesting, the most interesting part (but very … hard) was the mention of what lead to the ‘break-through’ in LLVM’s like chatgpt (as well as better GPUs and bigger data) - the ‘Attention’ mechanism.How to: Split a CSV and Keep Headers (in Bash)
Find how many lines are within the CSV? wc -l example.csv Split the file, based on number of lines: This will produce a number of files, splitting it based on the number of lines. split -l 1500000 example.csv There is one issue, however, the header line (the 1st line) isn’t copied across to the other files. To fix this, we can manually copy it over: Get the header line:Setup PHPCS (PHP_CodeSniffer) as a Github Action
PHPCS is the shortened name for PHP_CodeSniffer, which is a package to help monitor and keep code written to a coding standard. It comes with many coding standards built in with customization to change bits as needed. To quote themselves: PHP_CodeSniffer is an essential development tool that ensures your code remains clean and consistent. We could very well run this tool occassionally on our codebase by hand… But equally we can automate it instead.Learning Resources for PHP Devs Starting Out
I’ve been collecting a list of resources to recommend to any new developers starting out - which I found useful along the way (and still often refer back to). I thought I’d move this list to a blog post so others can use (and maybe recommend some others?). I often work in PHP, so the posts maybe very heavily tailored/biased. Back-end (PHP + SQL) PHP: The Right Way - an up-to-date guide on how to use the language with enough specific detail to keep it interesting (has the advantage of using just PHP and not being framework specific).JSON+LD Example for Hugo Static Sites
After making a few sites with Hugo recently and each time having to work out a good way of building a JSON+LD structure, I thought I’d blog about it. In this post we’ll share the structure that I use within the head element of the html document. It can be just put within the <head> element, or even better when using Hugo is to make it into it’s own partial file.Connect to Mongo Atlas with Go
With the recent closure of mLab and the simple migration tool across to their successor, Mongo Atlas, I’ve recently been tasked with moving a web service across to Atlas. The data was simple to move (thanks to the migration tool), but we had to change the code to handle this new connection. The service is written in Go (as in golang) and I wanted to give an example of how to connect to Atlas - as it was a little different from connecting to mLab.PHP Functions on AWS Lambda (without NodeJS)
I’ve used AWS Lambda for a while in a few different programming languages - including NodeJS, with Go binaries and with PHP. But the PHP functions were always a bit complicated as Lambda doesn’t support PHP as a language natively. You could however emulate it by passing events to Node, which in turn passes the event to a PHP binary, specifically built for AWS architecture, to get around this though.New Website Theme - Ready for 2021!
In one of hopefully many new posts coming onto this blog, here’s a reminder of our new theme going forwards. We’ve completely rebuilt the site so it’s no longer build on Wordpress, but is statically generated instead. This means it can be easily hosted on a cdn for quick and cheap delivery. Old Theme: New Theme:Lazy loading Disqus with IntersectionObserver
We’re all keenly aware of how important performance is in this day and age of web development. Whilst recently looking over a site and checking it with PageSpeed, it showed that a big impact for mobile was the loading of the disqus commenting system. Changing Disqus to lazy-load increased the mobile PageSpeed score from mid 50’s to 95 (which is a massive change). With all of this change due to cutting down the number and size of many http requests being downloaded on page load (rather than when you need it).Greasemonkey Script to Restore Mantis Ticket Colours
Mantis, the bug tracking software, changed the style of each ticket’s background during an update. This is a Greasemonkey script to re-introduce strong background colours so you can quickly see the status of a ticket. You probably don’t want to run this on every page you visit, so you can add a // @match http://www.example.com/* into the top comment.Pre-built Lambda Tesseract Binary
While trying to build a tesseract function on AWS’ Lambda recently I wanted to use the latest version, four, and couldn’t find it. So I built it from source and made a github repo of it in case anyone needed View Github RepoWebsite Update 2018
It’s been a little while, admittedly, so I’d like to introduce a new theme to the website. A spruce up of sorts to keep things fresh. Hope you like it. Into ThisGoals for 2018
I’ve been reading a lot of blogs from software and web developers recently and many of them post about reviewing the last year, predictions for the coming year or their goals for the coming year. When reading one of these recently I was inspired to follow suit, because the new year of all times of the year is a great time for evaluating. In light of this, here’s what I’d like to work towards in 2018.Running Laravel Migrations on Heroku
Migrations are a really handy was of making database changes, be it schema or data, and keeping it in sync across multiple locations. They are however much more useful when automatic, so when they are needed to be run, they run. This helps prevent errors when you forget to run the migrations for instance. When using platforms like Heroku and tools like Composer, this becomes very easy. All that’s needed is to add the php artisan migrate --force command (–force is needed because they are run on the production) into the post-install-cmd section of your composer.PHP Session Handling on Heroku
Most web applications use sessions of some kind for things like login systems, authentication, flash messages, etc. But using them on cloud services like Heroku can sometimes be a hastle. This post will hopefully outline some of the different methods you can use to get a fast, adaptable and easy session handler with PHP. Option 1) Single Dyno, Default Session (File) By simply running session_start(); with PHP, by default a file based session will start.Prevent your Site from being used in an iframe
Often as a security measure, it can be a good idea to prevent your site from being put within an iframe. This is a measure to prevent against click-jacking. It’s well supported in most of today’s web browsers – with support for: Chrome 4+ Firefox 1.9+ IE8+ This can be done by setting the HTTP header X-Frame-Options. Htaccess Header set X-Frame-Options DENY or in PHP <?php header('X-Frame-Options: Deny'); If you try and load the site with this header present, within Firefox you will get this messageHow To Use jQuery 3 with a Fallback to v1 (for IE8)
With the release of jQuery 3 (and recently 3.1) we as developers have been able to use many new features – as well as having performance increases (at least visually). So it’s a no brainer to use it over previous versions, or is it? With the release of the v2 branch the jQuery team announced that it wouldn’t be supporting IE6-8. And… if you’re working on commercial projects, this sucks.A MySql Backup Script (with Download Speeds & Hipchat Integration)
It’s a common problem we developers come across, we need to keep a backup of our databases so that if anything happens to our live database we still have a copy of the data. This is a quick script which uses the mysqldump command to grab a copy of a database and save it. It saves the file as a gzip file (because it saves a mega amount of space over time).Make Your Own Compass with the Device Orientation API
Recently, while exploring the world of modern web APIs, I stumbled on the DeviceOrientation API which allows you to determine the exact position and rotation of a device, providing it actually has these sensors. This is especially useful when building mobile apps with technologies like Cordova/Phonegap because they allow access to functionality which would otherwise only be accessible through native applications. But it’s also useful in websites on occasions. To explore this API further I decided to make a little compass application.How to Force the Download of a File with HTTP Headers and PHP
It’s quite a common scenario with the web to want to force a file to download, instead of allowing the browser to open it. This can apply to images, pdfs, html, anything a web browser can open (which is more and more these days). To accomplish this, we need to set some http response headers: Content-Type: application/octet-stream Content-Disposition: attachment; filename="test.txt" Within PHP was can do this with a function like:Install Let’s Encrypt on Ubuntu 14.04 / 16.04
There are many reasons to run a website with an SSL/TLS certificate (we won’t dive too deeply into them in the post). In the past they weren’t as accessible as they are now though, with the cost of a certificate varying immensely. Do you want to pay for a certificate, became a question you could ask when StartSSL began issuing free certificates. They have, however, had suspicion around their safety from time to time.Direct Upload to S3 (with PHP & Composer)
This is a continuation in the ‘Direct Upload‘ series: First we began with a look at how you can directly upload a file to s3, talking it through in detail (13/10/2013). We later made another post, explaining how to handle multiple files and updating the code to use AWS’s signature V4 (7/3/2015). Now we’re back with another improvement! Instead of the copy and paste from a blog post solution we were advocating in past blog posts, we’ve now built a Composer package instead.SQL Searching with Relevance and Natural Language Processing
Working at a start-up in the early stages things are often built to solve a problem at the time, more often than not with a specific client in mind and time-frame in mind. As the company grows and becomes more established sometimes this very same code needs to scale or change based on features or performance original anticipated. One example of this is if your building your own search queries in SQL.How to: Install PHP 7 on Ubuntu 14.04 / 16.04
It’s release day! Or it was on the 3rd of December 2015 – the release date for the final version of PHP 7.0. There have been a whole host of improvements made to PHP but we won’t delve too deep into changes. This is a very quick guide on how to update to the latest release for those of you running a Ubuntu Linux system. It is very simple, thanks to ondrej managing a ppa repo for this release, like many of the previous releases.Enabling HTTP/2 Support on Apache2 and PHP
I’ve been a keen follower of the exciting changes to the HTTP specification over the past few years – with the release of the HTTP/2 standard in 2015 (after it evolved from the spdy project). If you’re unfamiliar with http/2 there are some great videos available which outline exactly what it is and how it is different from http 1.1 – which we’ve been so accustomed to over the years.Keep Your PHP Code Clean with Traits
In PHP object-oriented programming (OOP), inheritance means a class can only ever have a single parent, thus PHP is called a single inheritance language. Traits however give the ability for a class to inherit one or more sets of functions from different places and are a way around the single inheritance problem. Traits are sometimes referred to as mixins because they aren’t a class, more just a set of functions which get added to whatever uses that trait – and aren’t directly instanciable, so could be described as abstract.Converting a Decimal to a Fraction in PHP
Below is a helper function to convert a decimal, like for instance 6.5, into a fraction, 13/3 in this example. In fact the function will return an array with the number on the top of the fraction (the numerator) being the first item and the number at the bottom (the denominator) being the second item. Edit 25th Nov 2016: Changed the function to be more accurate and added some phpunit tests for it.Converting Google Maps Tile Coordinates to Boundary Box Coords
Usually working with the Google Maps API is a very simple and well documented experience. Saying this though, recently we wanted to overlay an image over the map. The overlay was relevant to the exact point which you were looking at, so the coordinates had to be exact. The images were also being retrieved from an external service, which we didn’t have access to change. The problem we were having stemmed from the fact that the Google Maps JavaScript library would give us the coordinates of where the user was looking as a long lat, but only as the corners of the viewport (outer square) – it wouldn’t give any indication as to the long lat coordinates of each tile.New Go Learning Website – GolangCode.com
I’ve recently started a new site, helping with the basics of learning go. It’s not exactly a tutorial website, where every step of the how-to guide is explained to you, but more of a snippet repository – a starting point to working out how to do anything and everything which you might be looking at tackleing. This ranges from go routines to json encoding to file management to build processes.Dedicated vs. Shared Databases: A ‘MySQL has gone way’ fix
While working on a data heavy web application recently we noticed some strange unstable performance with our SQL database – this is a post about how we investigated it and what we did about it. The application was written in PHP and hosted on Heroku in the EU region. We were using a ClearDB database, also hosted in the EU. TL;DR Our ‘MySQL server has gone away‘ message was fixed by moving from a shared database to a dedicated database structure (among other things) – and not by any code changes.Super-charge your WordPress Blog: Setup a CDN
Performance is important. We get this. As blog owners if our users get frustrated then we get frustrated. In this post we’ll look at how you can move a blog’s performance and loading times to the next level. A couple of years ago we looked at how to improve a website’s loading times – this post should be more specific than that, focusing primarily on WordPress and how content is delivered to your users.9 Things I Wish I’d Known about PHP Years Ago
I have been working with PHP for a good number of years now – (not including WordPress development, does that count? 😉 ). Here are some of the things I wish I’d known at the very beginning. Most of them are small little code snippets but there are also a few points about diving into the code too deep. Towards the end are a few helpful resources which have helped me out along the way.Detecting if a User is on a Touch Screen Device in JS
Whilst recently working with native date pickers on mobile browsers, Chrome and Opera we came across an issue. The native datepicker wasn’t acting as we wanted – but we had no control over it (you can’t trigger a native datepicker to open in Chrome!). Because of this we wanted to fallback to a custom date picker (think jQuery UI) if a native date picker didn’t exist or if the browser is on a desktop.Validate a UK Grid Reference in Laravel 5
This will just be a small article and quite a specific one. We’ll be looking at how to verify an input to guarantee it is a valid 8 figure grid reference. This will be checking against the UK Ordnance Survey standard, so two letters followed by four easting numbers and four northing numbers. e.g. AA11112222 It is important to remove any spaces from the string before submitting. This can be achieved through a small JS function and a .Create your own Exception Handler in PHP
If you’re used to writing your own PHP applications, you will no doubt be used to having to deal with exceptions being thrown at awkward moments. Resulting in a ugly 500 error being shown to the user and no extra direct from them to take. Luckily we can choose our own way of handling these exceptions, showing a better message or logging the error more efficiently. In an ideal world, we wouldn’t need these as everything would work perfectly, all the time – but alas we need to prepare for the inevitable.Direct Upload to S3 (using AWS Signature v4 & PHP)
The contents of this article has been replaced by a PHP Composer package, hope you find it useful. View on Github This article is specifically about directly uploading files to S3 using the AWS Signature Version 4, which is mandatory for new S3 regions, like Frankfurt (EU). It will also become required on other regions at some point as Amazon migrate over, so it’s recommended to use this method where ever possible.A Week with Laravel 5: What’s New
With a PHP project we have just started, we decided to begin development with the Laravel 5 framework – even before it’s been released. The framework is due to be released this month (Jan 2015) and instead of starting with Laravel 4 and attempting to migrate upwards, it seems natural to begin with the newest version even though it’s features might change slightly pre-release. Being comfortable developing with both PHP and Laravel 4, some of the changes with version 5 seemed quite major.How to: Enable Web Components in Firefox (Shadow DOM)
Web components, sometimes mixed up with the Shadow DOM, are now available in Firefox v29+ under this flag – but they won’t be available to the average end-user. How to Enable: In your address bar, go to: about:config Search for the property: dom.webcomponents.enabled and mark it as true. If your already on a development page, remember to reload it. Further Reading http://css-tricks.com/modular-future-web-components/ http://oliversmith.io/technology/2012/05/19/inspecting-the-shadow-dom-in-google-chrome-inspector/ http://soledadpenades.com/2014/01/02/shadow-dom-in-firefox/How to: Asynchronous PHP
Over the Christmas period I had a play around with getting PHP to run code asynchronously (not as easy as it sounds). When you have code, like API calls, which take anywhere near to a second to complete it drastically adds to the loading times of your pages. One easy solution for web apps is to only call the back-end PHP using AJAX. This means the page doesn’t hang and reload, things can happen concurrently and quickly.Modern PHP Password Hashing
In the early days of PHP, if you wanted to store passwords you had to do a lot of the work yourself – this left many systems vunerable, as it was only half implemented or done badly. Since then, however, the team behind developing PHP has been hard at work making the whole process much easier (thus increasing overall security).Load HTML once with AJAX
While working on a project recently, a dynamically loaded section was needed. It was used in a transition between step one and two in the user’s journey, after an API call had been made. The user was allowed to go back to step one at any time, resulting in a new API call – which was to be expected – but the call to get the HTML for step two was also made again. The same HTML which had just been loaded the first time around.Codename Sandcastle has Arrived
First there was Oceanic, then Waves and now it’s Sandcastle. Designed by a Turtle now has a new look after another year of active development. (Hopefully the name and images can remind us of the sunny times). The New Design The new design supports an edgy-look, sharp edges and bright colours and hopefully brings what’s important most (the content) to life. Technically Front-end development for this theme used Grunt and Bower for the first time to help manage third-party CSS and JS libraries.Create your own PHP Autoloader
If you’ve worked with any large file in PHP you will probably have come across a large block of include statements at the top of it. Includes allow one file to include many other files and are used a lot in OOP. A large amount of includes at the top your code poses two major annoyances: firstly they’re taking up valuable space which could otherwise be used for more important things; secondly because of their explicit nature, they get left in the code over time when they’re not needed or the file they are directing to gets move resulting in warnings and errors.How to: Create Panels with matching Heights
Flexbox & History One of the best ways to achieve a row of boxes which match in their heights is with an up-and-coming feature called flexbox. This is particularly important when presenting dynamic content, if you’re using pre-selected, static content then often the best approach to take is just to add a min-height within the CSS for the columns. As soon as the content extends a min-height however they will escape and have differing heights.Submit an Array with a HTML Form
Most of us will know how HTML forms work: inputs contained within the form send data to a url, by either a GET or POST request. This will result in the server being able to access this data on the other end. The way to do this usually goes something like this:Getting Started with Laravel: Part 2 – The Setup
In our first part to our Getting Started with Laravel series we looked at how to install Laravel using Composer and Git and then used the php artisan serve command to host a web server locally. In this part we’ll be moving on to look at getting Laravel setup with a database back end and creating our first query. This part might be quite a short one as there isn’t much setup needed with Laravel before diving straight into coding (which is for the best!).Getting Started with Laravel: Part 1 – The Install
This is the first article in a section of posts outlining how to get started using the PHP framework, Laravel. Why? There are many different PHP frameworks out there, some popular names include CodeIgniter and CakePHP, all having their merits. One of the most important aspects of choosing a framework comes down to how you feel when using it – does it make sense and feel good to use.10 Cringeworthy Things Developers Hear
1. I think I’ve changed my mind about… An idea is accepted, it’s spec-ed up, sent to the developers to work on and once the work is done and the final piece is shown — then someone adds ‘can you just change that bit?’ or ‘I’m not so sure anymore about this bit’. This is a prime reason why agile methodologies are in such common use today, conversations like these get caught as early as possible, but they’re still painful to hear.Using RequireJS to manage your JavaScript dependencies
If you’ve ever worked on a large web application before, you’ll no doubt already be familiar with the problem of managing a large number of JavaScript files, all being needed in different places and at different occassions. This is where RequireJS comes in.Smoother JS Animations with requestAnimationFrame
Within Javascript, if you ever worked on creating animations you’ve probably been dependent on the setTimeout() or setInterval() functions to do much of the work for you – incrementing a value at each execution and moving or changing an element. The situation in the code snippet below might look familiar, a function which contains a setTimeout() which changes a value, either continueously by calling itself or until a point by checking a condition with an if statement.Kerning your Typography on the Web
Kerning is the process of adjusting the spacing between two specific letters or pairs within typography. It’s not to be confused with tracking which is the spacing between letters (letter-spacing) or leading which is the spacing between lines (line-height). The kerning process has been used throughout the history of printed text but is less commonly used on the web.HHVM, Laravel & Heroku – The Killer Combination
Laying the foundations to a new project recently, some new web technologies were considered for use, notable among these was the recent announcement of Facebook’s HHVM engine and HACK language, which is now gaining support and stability. The project itself was going to be run on Heroku, a cloud PaaS (Platform as a Service) which allows websites to scale dynamically as they grow. Aside from what the software was going to run on, the software itself was going to be written in PHP (or HACK maybe?) and built upon the Laravel Framework — choosen because of it’s online support, clean code base and large number of features (e.g. a full ORM, MVC structure, db migrations, etc.).How to: Convert a String to Hex Colour (with JS)
For this site, when you hover over the Designed by a Turtle logo a colour is shown – which changes through out the site but isn’t random using JavaScript (I’ve updated the site since this post). On a previous theme for Designed by a Turtle, a colour was picked based on the document title. That meant you could refresh the page and the colour would stay the same – but each page had a unique random colour. This was done by taking a constant to that page and converting it into the 6 digit hexadecimal value and using that as a colour. In this instance the page title was used as the input as it changed from page to page by using the document.title variable.3 Reasons to Start using Sass Today
Sass is great! So I thought I would write a few brief reasons why you should start using Sass today (if you’re not already – in which good on you!). For those of you who haven’t heard of Sass, it’s a CSS preprocessor. This means that as you write your CSS it gets processed and converted into standard CSS. This means that all the work is done before reaching the browser, so you don’t need any special libraries or extra JavaScript to use it.Build your first Python API with Flask
While working with a Raspberry Pi recently I delved into the world of Python – and I come from PHP background, so this was quite an experience. Python, for those who don’t know, is a concise scripting language which works well across different platforms.Direct Upload to S3 (with a little help from jQuery) [Updated]
The contents of this article has been replaced by a PHP Composer package, hope you find it useful. View on Github Whist working on a new web app recently, running on Heroku, we wanted users to be able to upload large files (I’m talking 50mb-150mb) onto our site. We started by having the standard html form post the data to our back-end code, which processed it, etc, etc. This was fine for small files, but large files would hit the maximum request time of 30 seconds for any request on heroku, which then in turn messed up the dyno it was running on.-0 === +0
I came across an interesting tweet from @getify the other day which mentioned the difference between -0 and +0 in JavaScript. This was news to me and it took a few moments to grasp the concept of both a positive and negative zero.Blur a Background Image (with help from blur.js)
Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, webkit filters were looked at, which are admittedly limited in terms of browser support, but also gave a nasty looking white edge to the images. So a JavaScript option was considered instead.Avoid Spam Online: How to Show your E-mail Safely
We all know about spam and up until recently there wasn’t an e-mail address shown on this blog (just a contact form) for this very reason. Most of us have also tried different methods of stopping spam bots picking up our favorite e-mail addresses (ever written [at] instead of @? Or shown your e-mail address as an image?). This article should outline a few different methods of showing your e-mail address publicly and safely – and hopefully without any impact to the usability of the end user.Website Update
This is part of a series of website updates: New Website Theme - Ready for 2021! Just a small post to mention that this blog as now been updated with a new simpler theme. Take a look around and let me know if you run into any troubles along the way.Six Technology Predictions for 2013
After thinking about it at long length, I thought I would summaries and write down some of the things I believe are coming to the technology and computing world in 2013. It is obviously not long until the new year, as I’m sure you’re well aware, so many of these predictions won’t be revolutionary and may appear obvious – but bear with me.WordPress 3.5 Release Candidate Review
On December the 4th 2012, the third Release Candidate of WordPress 3.5 was release on their blog, so naturally an investigation was is in order. WordPress 3.5 boasts a major annual release for the open-source blogging software, with many improvements across the board, which will be covered in this article.HTML5 Fullscreen API
Closely related to the tag, the fullscreen API is an incredibly simple and easy to use API for using with JavaScript to maximise the window fully, as you would do if you pressed F11. Contrary to just pressing F11 however, the fullscreen API allows people to go fullscreen from the website itself, by using a link or at any point necessary.Target Android Devices with JavaScript
Having recently created an Android app and an accompanying website to match, I wanted to know how to detect an android device through the site using JavaScript. On the site a download button was created and depending on the device would either say, ‘Download .APK’ or ‘Install App’. I thought this was a clever idea to adapt the site based on what would happen after you download the APK.New SASSy Blog!
Thought I would mention that I’ve just created another blog, named SASS-Tutorials, for web designers wanting to learn about popular subject of pre-processors. It focuses on SASS, the ‘Syntactically Awesome Stylesheets’ and gives readers a step by step guide on different aspects. Each of the aspects is chosen as a lesson and will be written about.Turtle Player v2
Just a short post to mention that Turtle Player, a fully fledged, open-source, music player for Android, is now in it’s second version. Downloadable at turtle-player.co.uk.How to: Speed up Your Website
Getting your website to load faster is not like running the 100m – or a marathon. It doesn’t need training or a team behind you to make noticeable improvements. All it takes is a little know-how (which I’ll help you with), an actual website and a few minutes of your time.Smart CSS layouts with Calc()
A few weeks ago I wrote about the Traditional Box Model and the ‘box-sizing’ CSS property, which, in essence, allowed you to easily create two adjacent boxes with a width of 50% and any amount of padding, because padding was included in the width. In this article I will talk about a different method of achieving this with the help of the ‘calc()’ expression.11+ Exciting Free Fonts for Designers
Here’s a round-up of some of my favourite fonts available, for free, from Google Web Fonts. They include serif and sans-serif type fonts and can used on websites, posters and to fulfil your design needs.Version Control with Git
This tutorial is written in the hope that it can give you an overview of Git, Github and version control in general – be it for web developement or software development purposes alike. It will hopefully outline why Git (and version control) is used, the advantages to it and it should give you a brief introduction to using it yourself.An Introduction to Twitter’s @Anywhere
As part of Twitter’s initiative and for them to compete with Facebook’s Open Graph service for embeddable social networking, they released @Anywhere. This JavaScript file allows you to add the ‘Twitter communication platform to your site’.Traditional Box Model vs. W3C Box Model
One of the first things you come to learn about when first introduced to CSS is the box model. It works on the condition that every element within HTML is square and the box model defines how each element is then subsequently defined in terms of width and height. Although not explicitly mentioned, it was introduced in 1996 with the CSS1 specification (those were they days ‘ey?).Responsive Images, Now & The Future
With the huge flurry of mobile users now using the internet and browsing the web on those tiny screens of theirs – websites must adapt to accommodate this. One of the many big issues at the moment in the web design community is responsive design and if it should be used over mobile only sites (Google thinks so). If you are one of the lucky few making a new responsive design or trying to make your current design responsive then this article might just help you with making your images responsive.HTML5 WebKit Speech Input
With the addition and extension of input types with HTML5 forms, one newcomer to the scene is the microphone input. This allows you to fill inputs, like a search or name field, through the use of your microphone. It is closely connected with mobile use and is currently only available on Chrome 11+ but not to worry because it shouldn’t be relied upon anyway and should, currently, only be used to enhance your forms.Choose an Open Graph Image with WordPress
Facebook uses it’s Open Graph technology along with specific Open Graph meta tags to get information about pages with the iconic Like button on them. These are documented extensively on ‘Facebook Developers‘ and are introduced well by David Walsh on his blog.Horizontal Scrolling with jQuery [Updated]
The large majority of websites on the internet prefer vertical, portrait pages and for a good reason. Vertical pages work well with the way we read and the hardware that we use. But sometimes, just sometimes, it is nice to be different and build a website around the horizontal axis. This, however, poses limitations because the computer mouse, and it’s mouse wheel, does not scroll sideways – but this can be rectified with good-ol’ jQuery.Open Source Android Music Player
Just a quick post to mention that I’ve just released an Android music player to the general public and horray! It’s open-source! Find it, and contribute to it, on Github.18+ Web Resources & Tools
Here are a few web tools and resources which I use on a regular basis to help build reliable and fast websites. Most of them are online and well worth checking out (if you haven’t already). They are ruffly split into the categories, ‘Testing & Checking’, ‘Conversion & Compression’, ‘Frameworks & Libraries’ and ‘Text Editors’. Also, if you like this page, but sure to share it with your friends.9+ htaccess Uses & Snippets
Htaccess files are a hidden type of file used on Apache (usually Linux based) for configuring certain aspects of the server. For more information on what they are read the Wikipedia article. Htaccess files can be (and are) used for a wide range of things, some of which will be covered in this article, as we will work though some of my favourite.Feature Detection with Modernizr
Many of you, if you’re reasonably up-to-date with web design at the moment, will have heard of and used Modernizr but for everyone else out there, this article’s for you. Modernizr is an independent JavaScript micro-library to help you develop modern websites but with graceful degradation. It enables you to specify different CSS depending on if a feature is present in the browser or not (as shown in the example below).Gimp 2.8 Released
Last week, on the 3rd of May 2012 the GNU Image Manipulation Program, also known as the GIMP, released version 2.8 of their cross-platform software. It supports many new features, the most notable of which is the long awaited single-window mode as well as many other user interface tweaks which make this version more attractive and intuitive to use.Windows 8 Consumer Preview Review
As you may, or may not, already know on the 29th of February 2012, Microsoft released the Consumer Preview of its new operating system, Windows 8. It was available for anyone to try. Windows 8 harbours many new features and changes which will be looked at in this review.CSS Speech Bubbles & Triangles
You may have seen various types of speech bubbles across the web, some use images and others use pure CSS to create this effect. In this article we will be looking at how you can create a triangle with CSS and how you can use a triangle to then create simple speech bubbles.First-look at WordPress 3.3 Beta
Yesterday, the 20th of October 2011, WordPress 3.3 Beta 2 was released. With an array of minor and major changes, this is still just a Beta copy but gives great incite into what’s to come. An in-depth list of changes are available for Beta 1 and Beta 2 on their blog. The WordPress development team are aiming to release the full version of version 3.3 by the end of November.CSS Text Multi-Columns
Columns are lovely things. They allow you to read text easier, make chunks of text look nicer and now with the power and beauty of CSS3 you can make columns dynamically – yey! No more table columns and splitting of paragraphs to achieve the same effect.Stop CSS Caching After a Change in WordPress
If you’re in the process of developing a WordPress theme, browser caching isn’t necessary and it can be a pain because your theme won’t always update after you have made a change. On the other hand caching plays a crucial role in the speed and download times of websites. So what are we to do? In WordPress it’s actually very simple, if you know what you’re doing, to set up a function to force the browser cache into re-downloading the CSS file again. Depending on your level of PHP knowledge, there is a plugin already built for this task called CSS Cache Buster, or you can write your own function.CSS3 Transitions : The Basics
JavaScript libraries, such as jQuery, make easy work of animations and effects when working with websites. They allow you to move, change and fade different DOM elements in your web page, which can improve your website visually and sometimes make it more usable. There are, however, disadvantages to using jQuery, for example, most modern web browsers have the ability to turn JavaScript off and Firefox has a popular addons called ‘NoScript‘ which will also disable JavaScript – and your effects too. CSS, with version three of its specification, has CSS transitions which allow you to do very similar animations and effects as jQuery.Load jQuery from Google CDN in WordPress
WordPress, by default, includes a local copy of jQuery which gets loaded up on your website and also used by the WordPress Admin Dashboard. This is great because it makes life easier but wouldn’t it be even greater if WordPress used a copy of jQuery which was stored on Google’s CDN (or jQuery’s CDN for that matter). Well, with a tiny bit of theme editing this is possible.Smooth Page Scroll with jQuery
Many popular websites have the ‘Back to Top’ same-page links, which allow you to get back to the top of the page quickly. Some websites even scroll upwards smoothly. This jQuery code, written by LearningjQuery, allows you to do just that. Just include this code in your $(document).ready() function and it enables itself on all same-page hash links.10 Useful Linux Terminal Commands
1. $ whoami Okay, I hear you, this might not be that useful, but shh! I enjoy it nonetheless. This command basically just prints out the name of the current user. After a long programming session I occasionally like being told my own name.