About bfi51CJLQX

Posts by bfi51CJLQX:

Backend/Development

Snippets in Notepad++

I’m a massive fan of Notepad++, the lightweight Windows based text editor, it has a tiny footprint but packs enough features to make it my go-to Windows text editor. Up until quite recently however, I’d been missing snippets, but not any more.

Continue reading →

_______________________________________________________________________________________________________________________

An accessible and validated PHP/jQuery contact form

This is a really accessible and well validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery and PHP RSS Feed Syndicator (with auto-reload!)

This simple jQuery and PHP feed loader is a dead simple and effective way of adding the contents of a news feed to any page you choose. Inserted into a page using only jQuery, it’ll allow you to keep your users up to date with whatever’s happening right now with it’s inline Ajax powered reload.

Continue reading →

_______________________________________________________________________________________________________________________

Love LESS but you’re put off by Ruby?

I’ve fiddled around with the original LESS a few times and loved the convenience of variables and nested rules in CSS, but I’ve always been reluctant to put it into production because of the fact that it’s based in Ruby. Not that I have anything against Ruby as a language, far from it in fact, but simply the fact that it isn’t as all pervasive as PHP which makes maintenance and portability a bit more of a pain that it should be. But now there’s an answer.

Continue reading →

_______________________________________________________________________________________________________________________

phpBB: Serve static files from a CDN

Having recently spent the best part of a day modifying the phpBB codebase (3.0.7) to allow me to serve static files via a CDN I can say that I am greatly looking forward to hooks in 3.1.

To save you all a little effort I’m gonna share the method I used below; I’m not going to go into great detail about template and theme issues, as those are a fairly straightforward matter of swaping the old local URL’s in your template/theme for the new public CDN URL’s and clearing the cache. But rather I will explain how to modify the core files to serve smilies, forum ranks, forum images and your imageset which is a tad more involved.

Continue reading →

_______________________________________________________________________________________________________________________

Amazon S3 batch editing metadata

I’ve recently had cause to start using S3 on a personal project, and while for the most part I couldn’t be happier, there is one thing that is irritated more than I thought it would. Namely, you can’t batch edit meta-data for files from within the native AWS console.

Continue reading →

Polyglot – A simple clientside i18n library

Polyglot is a very simple string replacement i18n library I built for a personal project and thought was self contained enough to warrant it’s own repo. It’s very simple to use, and does what it does very quicly indeed.

However, it is not a full i18n solution, it does not do any kind of: date; currency; time or any other i18n functions you might expect. It does one thing and does it well. It may do those things in the future however.

Gutenberg templating library

I wrote a small (10 lines) and simple templating library that is dependant on ES5 compatibility in the client for a mobile web app I’m building (more on that at a later date!). You can find the source on Github. Along with the usage and testing, as always feel free to contribute!

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

In it’s simplest form, with syntax highlighting it styles an embedded GitHub Gist thusly (note the code to use it is within the embedded Gist!):

Options

There are a couple of different options available for formatting and styling your Gists:

For more information and licensing, please consult the Github repo.

jQuery Github Widget

Ever wanted to throw up your Github repos on a site? But want a something that will “just work”? Well this is what you’re looking for. A jQuery powered, lightweight Github widget that displays your user information and most recent repos for the world to see.

Using the GitHub widget is super simple, you just need to include the script after the core jQuery library and then set it up in the following way within the <head> of your page and tell it which element on the page you want the widget to appended to.

Usage is super simple, just see the example below:

<link rel=”stylesheet” href=”github.css”>
<script src=”jquery.min.js”></script>
<script src=”jquery.github.min.js”></script>

<script type=”text/javascript”>
              $(document).ready(function(){
                               $(“#some-element”).github({
                                                user: “joepettersson”
                               });
                });
</script>

There are lots more options for configuring the widget, all of them are laid out below in a more full usage example:

<link rel=”stylesheet” href=”github.css”>
<script src=”jquery.min.js”></script>
<script src=”jquery.github.min.js”></script>

<script type=”text/javascript”>
                $(document).ready(function(){
                                  $(“#some-element”).github({
                                                  user: “joepettersson”,
                                                  show_extended_info: true,
                                                  show_follows: true,
                                                  width: “400px”,
                                                  show_repos: 10,
                                                  oldest_first: false
                                    });
                   });
</script>

These options are explained in more detail at the Github repo where there is also an FAQ about the widget’s usage.

Download | Simple demo | View on Github

Scripts

Polyglot – A simple clientside i18n library

Polyglot is a very simple string replacement i18n library I built for a personal project and thought was self contained enough to warrant it’s own repo. It’s very simple to use, and does what it does very quicly indeed.

However, it is not a full i18n solution, it does not do any kind of: date; currency; time or any other i18n functions you might expect. It does one thing and does it well. It may do those things in the future however.

Continue reading →

_______________________________________________________________________________________________________________________

Mondrian – Random Color Generation in JavaScript

A library I wrote for generating random colors in JavaScript, it supports rgba(a), HTML color names, hex and hsl(a). Check it out!

Continue reading →

_______________________________________________________________________________________________________________________

Gutenberg templating library

I wrote a small (10 lines) and simple templating library that is dependant on ES5 compatibility in the client for a mobile web app I’m building (more on that at a later date!). You can find the source on Github. Along with the usage and testing, as always feel free to contribute!

Continue reading →

_______________________________________________________________________________________________________________________

Pretty Gist

We all love Github, but the embedded Gists aren’t great: they’re drab and lack some functionality. Pretty Gist is a jQuery plugin to make prettier and more functional embedded Github Gists. It’s super simple to use, and can easily enhance Gists already embedded on your pages by just dropping it in.

Continue reading →

_______________________________________________________________________________________________________________________

jQuery Github Widget

Have you ever wanted to add a slick, clean and simple jQuery powered Github widget to your site? With this one you can get it going in a couple minutes! This Github jQuery plugin displays your user info and most recent repos in a simple clean and frankly kick-ass way.

Continue reading →

_______________________________________________________________________________________________________________________

An accessible and validated PHP/jQuery contact form

This is a really accessible and well validated contact form powered by PHP and jQuery. The design is based on Orman Clark’s ‘Clean and Simple Signup Form‘.

Using both serverside PHP and client-side input validation (powered by Jorn Zaefferer’s great jQuery Validation Plugin) this form is developed using ARIA accessibility standards, making it one of the most accessible and reliable contact forms available.

Continue reading →

_______________________________________________________________________________________________________________________

A jQuery and PHP RSS Feed Syndicator (with auto-reload!)

This simple jQuery and PHP feed loader is a dead simple and effective way of adding the contents of a news feed to any page you choose. Inserted into a page using only jQuery, it’ll allow you to keep your users up to date with whatever’s happening right now with it’s inline Ajax powered reload.

Continue reading →

Graphic Elements

A jQuery powered HTML5 navigation menu

I was recently asked to knock-up a semantically simple (but elegant) navigation bar for a new open-source project I’ve become involved with (more on that soon!). Having done so with a reasonable amount of success, I thought I would also share it here for everyone else to use as well!

Continue reading →
_______________________________________________________________________________________________________________________

A set of simple CSS3 buttons

Having searched around for a while, looking for a set of CSS3 ‘buttons’ and not finding anything exactly right for my needs, I decided to create a set from scratch. Being the generous kind of bloke I am, I though that I’d share them here in case any other frustrated web workers are in desperate need of a button fix.

Continue reading →
_______________________________________________________________________________________________________________________

A simple jQuery powered image slider

This is another quick implementation of one of Orman Clark’s designs from Premium Pixels. As with the last previous slider I shared, this is based on malsup’s awesome Cycle jQuery plugin.

Continue reading →
_______________________________________________________________________________________________________________________

Why the ‘outline’ CSS property is so important

There are a lot of designers and developers who (for whatever reason) choose to remove any styling from the outline property that highlights focused anchors. This is a short post about why you shouldn’t do it, or if you really need to; how you can make it look a little better than browser default outlines.

Continue reading →
_______________________________________________________________________________________________________________________

Simple and Minimalist Nav Bar (+ extra CSS3!)


Inspired by having a little free time, and the fun I had doing it yesterday; here is another implementation of one of Orman Clark’s designs, his ‘Clean and Simple Navigation Menu’. As you will see however, I made a couple of small changes: most noticeably to the font (due to browsers not rendering Helvetica Neue Bold nearly as well as Photoshop); and removing a couple drop shadows (just because I thought it looked a little better this way).

Continue reading →
_______________________________________________________________________________________________________________________

A Simple Thumbnail Slider

Premium Pixels has been in my RSS feed list for quite a while now, providing always high quality design elements from Orman Clark. Low and behold, on trawling through my RSS feeds this morning I come across a new post by Orman containing something that I had been literally about to start knocking up (probably not quite as well) in Photoshop, his Simple Thumbnail Slider.

Continue reading →

Sublime Text 2: 5 Plugins You Really Should Be Using

Sublime Text 2 has become mine, and many other people’s, editor of choice. Bringing features like multiple cursors and Vim bindings to a modern, good looking, lightweight and cross-platform editor. It rocks. Especially the plugins.

One of the things that really excites people about the app is the plugin eco-system (and support for Text Mate bundles, but that’s for another post!) but it can be a bit of a pain to find (and install) the best plugins that the app has to offer.

Package Control

Right at the core of the plugin eco-system is Will Bonds awesome Package Control plugin; which acts as a gatekeeper and organiser of most of the best plugins available for the app. There are a couple of exceptions, but as a general rule: if it ain’t available via Package Control, I ain’t interested.

So if there is just one plugin you take away from this post, let it be Package Control. The sooner it’s integrated into the core app the better, in my view.

1. BracketHighlighter

This great little plugin does one thing and does it well: it highlights the brackets within which the cursor is located.

2. Gist

Generate a public Github Gist with a simple key combo (Super + K). Lots of other options to like: creating private Gists; updating and opening Gists.

3. sublime-jslint

Does exactly what it says, by hitting Super + K the plugin will run your JavaScript through the JSLint4Java Java implementation of Dougles Crockford’s JSLint.

4. DocBlockr

This great plugin, makes writing DocBlock comments in JavaScript, Ruby and PHP a breeze. With autocompletion and prepopulation.

5. ZenCoding

Note: Not in Package Control.
This Sublime Text implementation of the frankly productivity engorging HTML authoring system is great, if you ever have to write HTML by hand you’ll instantly love this plugin.

Extra gravy

Package Control also offers extensions to Sublime Text 2′s core syntax highlighting, for instance: SASS; LESS; Jade; and Haml. This is also where the support for Text Mate bundles comes to the fore.

Demo Page

This is a simple HTML5 and jQuery powered navigation menu. It uses some simple CSS3 for some minor presentational enchancement (like border-radius and text-shadow).

The purpose behind it’s creation was to provide a semantic and easily implemented way of creating simple good-looking site navigation. In that spirit, it’s usage is incredibly simple. All you need to do is add (or edit) a class for the HTML5 nav element to change it’s colour, like this:

<nav class=”red”>

After that it’s just matter of creating a simple sematic set of lists (and nested lists for drop-downs), everything else is added and styled via jQuery. The following is a simple example:

<nav class="red">
	<ul class="clear">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a>
			<ul>
				<li><a href="#">Branding</a></li>
				<li><a href="#">Print</a></li>
				<li><a href="#">Web</a></li>
				<li><a href="#">Marketing</a></li>
			</ul>
		</li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Clients</a></li>
		<li><a href="#">Our blog</a></li>
		<li><a href="#">Downloads</a></li>
		<li><a href="#">Contact us</a></li>
	</ul>
</nav>