Technically Feasible - Posts Feed

New site design live

2011-03-08T00:00:00Z

I'm happy to say that after buying my domain nearly four years ago, the site is now live. It's the first design that I am generally pleased with. Planned updates include adding support for mobile browsers, and the right sidebar needs some work, and comments lists have been left slightly neglected. There will be some QA tests of available mobile plug-ins at some stage, though I hope to avoid the "Instant iOS" styling that the popular ones provide.

The design is under technical review, so if anybody notices any rendering issues feedback would be appreciated. The theme is built from the ground up, loosely based upon the skeleton theme Bianco. There's some CSS3 sprinkled around; differences in older browsers are intentionally not addressed. Rendering bugs in IE6 won't be fixed, lets not go back to the mosaic browser either :).

Here's the list of versions for mainstream desktop browsers that we should look OK in:

Internet Explorer 8+
Firefox 3.5.x+
Google Chrome / Chromium 8.0+
Safari 4+
Opera 10+

The CSS that may be unsupported in these browsers depending on version:

Text Shadow
Box Shadow
Border Radius
Multiple Backgrounds
2D Transforms
Web Fonts
CSS Gradients

I won't be adding any shivs or poly-fills to the design, other than to add support for forward-looking technologies like HTML5 elements in up-to-date browsers only.

It's also worth noting that the Last.FM plug-in was non-functional in WordPress 3.1 (the admin area was broken). I converted the code to a class-based widget. After doing some cleaning up, I may provide the code for others to use.

Record and Wipe CDRW discs via CLI

2011-03-08T00:00:00Z

I find that the GUI tools in Ubuntu are buggy with some disks and drives that I use. The two lines that pretty much make "Brasero" redundant:

Record ISO to Disc #

cdrecord -v dev=/dev/cdwriter isofile.iso

Blank a CDRW #

sudo cdrecord blank=all -immed dev=/dev/cdrw

National No Smoking Day...

2011-03-09T00:00:00Z

I am always disappointed when No Smoking Day comes along. Each year I realize it's upon us, feeling guilty having just bought a pack earlier in the morning. This year was no exception. Unlike most years though I have been trying to give up, consistently failing to do so since February.

The difference this year is that I heard about the event from Twitter. It's a weird shift that I have noticed this year in particular, which started when I was following the coverage of the Egypt protests. One of the users I was following tweeted that Mubarak had fled the country, so I then tuned into the BBC's live coverage on my phone. I would probably have only heard about it in passing the following day whilst I caught up on the news. Obviously, this was a major international event, and generally you only find out about things which matter to whom you follow. I don't think I would ever rely on Twitter alone for news alerts, but it's good that we don't have to rely on an editorial process before we learn about events unfolding as they happen.

On the smoking bit, I hope that others have been more inspired by today than myself. I will prevail eventually; a spot of willpower, and maybe slap a patch on tomorrow.

Templated 410 Error Pages in WordPress

2011-03-10T00:00:00Z

The 4xx class of status code is intended for cases in which the client seems to have erred. Except when responding to a HEAD request, the server should include an entity containing an explanation of the error situation, and whether it is a temporary or permanent condition. These status codes are applicable to any request method. User agents should display any included entity to the user. These are typically the most common error codes encountered while online.

via Wikipedia

410 is a less common status code to encounter. Back in the days of static web-sites, a physical file was either found or wasn't. If it wasn't, then it had been deleted (or never existed), which resulted in a 404 Not Found. For 410 to work, there had to be a record of what had been there previously and then been subsequently removed. Content usually moves, so redirects are suitable, but when removed it's usually a 404 page you will find.

I just installed '410 for WordPress'. This handles the record of pages that are 'gone'. I added a link to the list, but was disappointed when I was presented by a white page exclaiming 'Sorry, the page you requested has been permanently removed.'. It's commonplace to template the 404 pages of sites (It's built into WordPress themeing), and a shame that WordPress just doesn't do the same when it encounters any other error code.

If you inspect the source code for the plug-in, it fires an action 'wp_410_response'. All we really need to do is hook into this action, so open up the functions.php and add the following code:

add_action('wp_410_response','load_410_template',1,0);
function load_410_template() {
require('410.php');
exit(0);
}

Then create the 410.php file. I simply copied my 404.php, and changed the wording to match the context. That's two error codes covered!

Enjoy :).

Update: The 0.5 release of the 410 for WordPress plug-in detects the 410.php file within the active template, so for this version and above there is no need to add the event hook into your template's functions.php. Just add the file and your covered.

Override core widget output in WordPress

2011-03-11T00:00:00Z

Another snippet for the WordPress theme developers out there. I decided that the category widget didn't display the post count in a very nice-looking way. So I found a nice support post that demonstrates the user of add_filter() to alter output of the category widget. Not the most ideal way to do things in my opinion, but it does the job.

add_filter('wp_list_categories', 'cat_count_span_inline');
function cat_count_span_inline($output) {
$output = str_replace(' (','',$output);
$output = str_replace(')','',$output);
return $output;
}

Via wordpress.org

Speeding up your page load times

2011-03-14T00:00:00Z

Just by configuring your site and server in the right way, you can get much faster and responsive load times out of your CMS. With mainstream open source CMS software, you are given the ability to add bolt-on functionality. It's common for each of these add-ons to provide their own set of CSS definitions, images and JavaScript. This makes these add-ons easy to implement for non-technical users. If you aren't careful though, you will end up with tens or even hundreds of CSS and JavaScript files. This has a performance penalty, which can affect your rankings in the SERPs.

For example, this site includes 44 requests for the home page (at the time of writing), which includes:

The page itself
Six external style-sheet links, Two included for the theme using @import
Two in-line styles
Four JavaScript files (jQuery and one plug-in, Modernizr, and one for the theme)
Three web font files
Images

Being the first time I had checked, I'm slightly disappointed with this. Two of the style-sheets are unnecessary (Last.FM feed widget), as I have completely overridden the styling in my template. I will remove those two redundant CSS files from Last.FM feed. When I release the updated plug-in some day I will offer a switch to disable default styling! I would have to configure caching in Apache, or add a caching plug-in for WordPress. Currently external resources will have to be requested with an If-modified-since header for each page load. That's not to mention images, web fonts, flash animations, Java applets or anything else I could include in a web page.

Over the next week, I hope to share with you some of the ways that you and I can get more out of our sites. Just by configuring your site and hosting settings, you can improve the browsing experience for your users. I will be using WordPress examples for the site configuration, but much of it will be relevant for other CMS software. I will also be referring to configuring Apache under a Linux-based operating system, though other operating systems and web server software will provide equivalent functionality.

Friday Update #1

2011-03-25T00:00:00Z

My ten visitors may have noticed it was quiet over here for the last week and a half. For the last fortnight, I have been moving home. We began sorting and packing our belongings 3 weeks prior to that, yet we were still moving things out at 10:30 the night before the deadline. Probably because there was so much to clean and fix at the old place. It's quite amazing how much shit you can stuff into one house. In total it's taken a full week just to move our stuff and fix the place up. This includes 3 1/2 hours to get a sofa through a door, which was ridiculous. I did feel guilty that Bob - our sole surviving goldfish - was one of the last to move. I missed a few important milestones with all the madness. Firefox 4 (finally) got it's final release three days ago. I've been using the Minefield dailies for months, but the final release seems much more stable. The UI looks well polished under Windows 7, though I am quite disappointed in the "Firefox" menu button under Linux. Although I do have a special attachment with Firefox, Chrome is still better for me. I get desktop notifications for my mail, and various social media, which Firefox can't currently deliver. Google seems to have pushed out it's refreshed Chrome/Chromium branding (on the dev channel at least?). It's logo has lost the glossy spherical ball appearance, but it still looks like a multicoloured Poké Ball to me. It just doesn't sit right with me, though I'm no 'expert' in logo design. IE9 final came out just before on 14th (enough said).

Those lucky Apple fans in the UK should by now have begun to receive their iPad 2 orders today. Nobody in my office has ordered one, though I know two of the guys have the first gen model. I don't know whether this is the exception or the trend, but I don't feel that Apple put enough effort into this one to justify upgrading. Not that I would be one to go out and buy an iPad anyway, I would much prefer a new Galaxy Tab (whatever the name ends up being) or Dell Streak 7 for the same purpose. I much prefer my 5" Dell Streak to an iOS device, it's screen is nicely sized, and not too big to hold to your face either!

A more regular schedule of updates will resume now that I am able to think, hopefully with some news from the pending Australian Grand Prix. The McLaren team was on form today! Time for soup and a sammich...

Brief History of Fonts on the Web

2011-03-28T00:00:00Z

For years, web designers have been yearning for custom fonts in web design. It's a real shame that web fonts didn't really take off with IE4 in 1997! The web was a different place back then, web design was a pretty new thing. Bandwidth was highly constrained at the time, so one could not imagine waiting for web fonts to load. Microsoft's container format of choice is also EOT, which is a Microsoft proprietary technology. Although everybody slates it's proprietary and closed nature, it was sort of a good idea. EOT provides domain locking, encryption, sub-setting and compression - all good things for convincing those behemoth font foundries to allow web embedding licenses.

Now is a better time than ever to move away from the standard web-safe fonts. Mainstream browsers have caught up with IE, over a decade later. Here is a short history lesson on the many techniques that Web Designers have been using to get beautiful type into their pages.

Fonts in Images #

With the introduction of high-speed internet, the web has become a much more multimedia oriented place. With lack of web fonts in anything other than IE, developers concentrated on alternative methods to get aesthetically pleasing fonts onto their pages. We began using images to display custom typefaces. This was great, as you could have the page look how your designer wanted it to. Not very accessible though, as people with screen-readers couldn't read any of your image-font headings.

Designers began using images as backgrounds using CSS, using various methods to hide the original text (with varying success). These methods make certain assumptions on how screen readers handle CSS and Flash content. Unfortunately, one of the more popular accessibility suites for Windows - JAWS - wouldn't read "hidden" text as everybody expected it to. This lead to the use of overflow: hidden and a negative text indent.

Licensing for this method is the least worrying. You just need to have the font on your machine and produce an image to then upload, which doesn't require a font embedding license. If you are generating images from a server, you may potentially require some form of extended license.

Fonts in Flash #

The other issue with using images was the effort involved. Unless you had a complex set of server code to dynamically generate images (and produced 24-bit transparent PNGs or solid-colour background), you would have to create the header image text each time you wanted to change the text. If you generated a lot of content, this was going to lead to a lot of extra work. This is where Flash Replacement techniques came about. These solutions use Adobe Flash .swf files, which have the ability to store font data embedded, and can then be sent text data as a parameter. This is then used to replace the text on the page with the desired font.

This solution had it's problems. Some web browsers / versions of flash under more exotic operating systems lacked support for the wmode=transparent feature, which renders the background of a flash element as transparent; letting the html content beneath the flash show through. Lacking support for wmode also breaks overlays in some cases, so Flash has to be hidden when an in-content overlay (e.g. a lightbox) is displayed on the page. There is also the issue of font licensing, as the flash file can be copied and re-used on other web sites in some cases. JavaScript is required to dynamically replace text. It also requires that Flash Player plug-in be installed an enabled on the system, though in most cases detection occurs before replacement is done. The same accessibility issues can arise as with images too, so text-indent would still be used as with image replacement.

Fonts in JavaScript #

More recent additions have been developed, in the wake of HTML5 canvas element support. These involve re-rendering the font into JavaScript code. Cufón and Typeface.js are two such solutions. Support is provided by canvas in fairly recent browsers - VML in IE - so coverage of browsers is relatively high. VML was added to IE from version 5. These solutions typically support sub-setting, and cufón includes domain locking, though not true encryption so reverse engineering is feasible (this lacks benefit in most cases, as the conversion process simplifies the font paths to lower file-sizes).

The drawbacks to these methods are that styling support is limited, even text selection is an issue that has to be worked around. JavaScript has to be enabled for replacement to work, too. Licensing issues are similar to that of Flash Techniques.

CSS3 Font Face Support #

The most favoured method for font embedding is through the use of CSS Fonts, which make up one of the modules of the CSS3 standard. It's considered a Working Draft over at the w3c, although it's usage in modern web design is on the increase and browsers are now backing it. The specification was included in CSS2 but removed from CSS2.1. Browsers support different font formats, as mentioned EOT is IE only. Chrome, Firefox, IE9 and Opera support the WOFF format, which is a step forward for open specification web font formats. SVG fonts are supported by Safari and Opera. TTF fonts are supported by Firefox, Chrome, Safari, Opera and IE9. A good compatibility list is provided at webfonts.info, though bare in mind that it's a wiki page.

The main drawbacks to font-face font embedding are unanimous format support. TTF is the most widely supported, though until very recently you were required to use SVG for supporting iPads and iPhones. Opera only added support for TTF fonts since version 10. So for each version of each browser you hope to support, you need to serve up the correct set of font formats.

For each font-style (bold, italic, oblique, etc.) you will need to provide a separate font file. Some web browsers will try to emulate these if they are missing, though support for this isn't unanimous.

There is also the potential to have the same font licensing issues for commercial fonts.

Why CSS Font Embedding is the Future #

A lot of the time, you can side-step the licensing issue simply by using fonts which are licensed for web embedding, and where applicable free to use for commercial purposes. Font Squirrel is a great resource for such fonts, though I would advise that you check over the licence for yourself before using the fonts. The fantastic feature of this site, is that they (in many cases) provide a font-face download kit for their fonts. This includes all the subsets and formats needed for browser support, and a CSS file ready for embedding. What makes this site really special is that you can provide your own font and upload it, and you get a font-face kit ready made for you. Always check that the font you wish to use supports the character set that you intend on using. The issue with free fonts is that they can quite often be incomplete, and quite often they lack the polish and effort put into commercial fonts.

You no longer need to host your own fonts, either. Typekit is just one 3rd party service which provides commercial web fonts, ready to embed, and you sidestep any licensing issues. Google also provides the Google Font Directory, which is basically a CDN for freely available web fonts. These services also only provide the supported font format to the requesting browser, whereas with home-brew solutions rely on multiple declarations and smiley faces.

This site is using the League Gothic kit from Font Squirrel (as I couldn't find a CDN for it), and Droid Sans via the Google Font CDN. My chosen fallbacks for League Gothic look awful, so I think that some more alterations could be in the pipeline.

WordPress Post Formats made easy

2011-03-30T00:00:00Z

http://www.netmagazine.com/features/wordpress-post-formats-made-easy

Filter a category from your WordPress Blog

2011-04-05T00:00:00Z

I'm pretty new to working with the internals of WordPress. It seems very easy to settle for installing hundreds of plug-ins to achieve the simplest of tasks. Plug-ins are awkward for me, as they have the tendancy to not quite do what I want them to. I end up messing with them in some way which breaks updates.

A few days ago, I decided that I would like to replicate my Twitter content onto my site. I added a plug-in which facilitated the import, but I was finding that my main page was being swamped by Tweets. This was drowning out the actual post content (which coincidently I take a lot more effort to write!).

I did a little research, and found what on the surface seems like a good idea. The problem with this method is that it occurs in "the loop". Once you are in "the loop", the post query has been performed - and paginated. So you can only exclude results, and for each excluded result you have one less post on the page. For example: if there were 10 excluded posts on a page and a post limit per page of 10, the home page would be blank.

The solution was to formulate a little post query filter which does the task. The post query filters are great; they allow us to alter the post query prior to getting the post list and applying pagination. The function is currently hard-coded to the category I wanted to filter out; just copy-paste into functions.php of your theme, changing the number '30' for the ID of your category:

The function adds an additional WHERE clause to the query, in the form of a sub-query. This SELECTs a list of post id's from the term_relationships table (which contains the object_id, which is basically post_id for our use case), joined to the term_taxonomy table (for term_id, which is essentially category_id). Any post ID returned by the sub query will be excluded in the post list.

This isn't just limited to Categories. You can filter on any taxonomy data, such as tag, post formats, etc. It would be simple to tweak the query to apply multiple taxonomy exclusions in one pass too. I have been working on some form of admin area, which I am adding to the theme, so I hope to follow up with that once it's in place.

The only thing I noticed is that it doesn't filter the category from /feed, whereas it does filter /feed/atom and /feed/rss. I don't know if this is intentional or a bug. It's something I plan to investigate a little more. I haven't tried this where the home page has been overridden as a static page, either.

Playing with Incarna in EVE Online

2011-04-21T00:00:00Z

Although my online gaming time has been sparse recently, I thought it would be good to take some time out and look at the new features coming to EVE Online this year. After reading the devlog post that Incarna functionality was being tested on Duality, I decided to take a peek. After spending quite a lot of time crafting my character, I was quite happy to wait an hour to grab the Duality client (4GB+) and take my avatar for a spin.

Interface #

You have access to most of the game windows through physical objects within the Captain's Quarters. There is a small screen on the "coffee table", and a weird ship-like object which allows you to access the fitting and ship hangar. I'm sure that the tutorials will clarify what you can interact with (and how), but I didn't initially realise how you interacted with these objects. You right-click to access a context menu.

Tutorials #

I haven't had a chance to preview the new user tutorials yet, so I can't really comment on them. These are available to try in the Emrayur system, read the devlog post for more details.

Performance #

I was quite surprised how well it rendered on my ageing hardware. I usually average around 25-40 FPS in and out of stations with everything on high and 2x anti-aliasing and no bloom, though that's across dual wide monitors. I can't compare this as you have to turn of AA to test Incarna, though I was getting around 25 FPS with the required settings.

I don't have my machine spec's to hand so I'll have to update with these.

Interaction Issues #

As advertised, the experience is a little clunky. I got stuck on two occasions; once on the steps leading down the the lowered floor section leading to the "screens", and again outside the captains quarters leading to what seems to be the docking area. If you make your character walk to an inaccessible area (such as behind the central screen), they will continue the walking animation on the spot. The only other thing I found was that when you "sit" on the couch, you squat in front of it.

Whether you love or hate the idea of the Ambulation / Walking in Stations / Incarna functionality coming to EVE online, it will provide an extra level of interaction with the game once it's introduced. I'm quite excited by the idea of it and can't wait to see what's coming down the line, though I am on the fence regarding how much it will add to the overall player experience for the majority of subscribers. It's got to be more interesting than ship spinning though, surely?

Bear in mind that it's not complete, and that CCP have been kind enough to give access to the test server in the first place. The best thing you can do is to provide feedback on issues if you decide to test any pre-release software.

Incarna on the Duality Test Server #

https://www.youtube.com/watch?v=Nvp8PXncuNA

This isn't my video, just one recommended by a friend :).

File validation with jQuery and HTML5

2011-10-12T00:00:00Z

I have been dealing with file uploads a lot recently, and I stumbled upon a few different methods for validating files which provide both basic file-type checking and file size checking before uploading.

The web app was already making use of jQuery with the excellent jQuery validation plugin; so I wrote a couple of extended validators.

File type validation (via file extension) #

This defines an regular expression of valid file extensions, which we currently define as gif, jpeg/jpg and png.

This form of validation is quite widely supported; the file input exposes a file path (sometimes a fake path) along with the filename of the original file.

/**
* Basic file type validation support for common web-safe image formats.
*
* @date 2011-09-22
* @author Michael Oldroyd
* @version 1.0
*/
$.validator.addMethod(
"image",
function(value, element) {
if ($(element).attr('type') == "file"
&& ($(element).hasClass('required')
|| $(element).get(0).value.length > 0))
return value.match(/\.([png|gif|jpg|jpeg])$/i);
else
return true;
},
"Invalid file type. Only PNG, JPEG and GIF formats are supported"
);

File size validation #

This validator makes use of some of the HTML5 file APIs.This means that it won't work with browsers which haven't implemented the HTML5 File API module. The two methods we are interested with are window.File and window.FileList. We check for these first, and automatically "pass" the validator if they aren't available so that it gracefully degrades.

The validator supports multiple files per input, and multiple file inputs per form. So each time the validator fires, we find all file inputs in the form; iterating over each, accessing the files property and iterating this too. Each time we increment the total size (in bytes) with the size of the file in the list.

If the files attached exceed the MAX_FILE_SIZE input element's value, the validator fails; otherwise it passes. If no element named MAX_FILE_SIZE is found, the validator also passes as we have no basis for comparison.

/**
* Provides file upload limit validation, according to server rules (i.e.
* MAX_UPLOAD_FILESIZE). This validator uses a MAX_FILE_SIZE input element
* and checks the total size of selected file(s) against this value.
*
* @date 2011-09-23
* @author Michael Oldroyd
* @version 1.0
*/
$.validator.addMethod(
"filesize",
function(value, element) {
if (window.File && window.FileList) {
   if ($(element).attr('type') == "file"
    && ($(element).hasClass('required')
    || element.files.length > 0)) {
    var size = 0;
    var $form = $(element).parents('form').first();
    var $fel = $form.find('input[type=file]');
    var $max = $form.find('input[name=MAX_FILE_SIZE]').first();
    if ($max) {
     for (var j=0, fo; fo=$fel[j]; j++) {
      files = fo.files;
      for (var i=0, f; f=files[i]; i++) {
       size += f.size;
      }
     }
     return size <= $max.val();
    }
   }
}
return true;
},
"The file(s) selected exceed the file size limit. Please choose another file."
);

Click here for the demo

The code for this example was in part inspired by the work of Eric Bidelman at HTML5 Rocks.

It's also worth noting that I don't claim that these implementations are perfect, so I would welcome any improvements or suggestions to improve the validators above.

Understanding SEF routing for Joomla Components

2011-10-19T00:00:00Z

Developing bespoke components for Joomla can be quite daunting. There are a lot of resources, books, dev articles and the API documentation; these try to give you a basic understanding of how things should be laid out. A lot of these work on the premise of learning by doing. Many of the documented examples from the API point developers to look at the core components to see how it works.

Configuring an effective component router can be quite tricky, as it depends on how complex your component is. This article serves as a reference for how routing works in Joomla, why it's important, and how you could make better use of component routing in your projects.

Routing Modes #

There three different implementations of SEF that Joomla supports;

Rewrites via Apache mod_rewrite or IIS URL rewriter. (e.g. http://www.example.com/component/name/view/layout.html)
Rewrites via php implementation. (e.g. http://www.example.com/index.php/component/name/view/layout.html)
Rewrites disabled. (e.g. http://www.example.com/index.php?option=com\_name&view=view&layout=layout)

Options 1 & 2 would use your router to build and parse the route. The third would not require parsing, as we have the request variables in a raw form anyway. As far as I am aware, your routes won't be built either when SEF URLs are disabled. Without specifying menu item ids in your routes you won't be getting menu item matching. The ".html" suffix on the end of the link in the first two is an optional setting in the Joomla configuration. Find out more about enabling these options here

For the purposes of SEF URIs, there are two levels of support which you need to be aware of:

SEF URIs without a menu item (e.g. http://www.example.com/component/name/view/layout.html)
SEF URIs with a menu item. (e.g. http://www.example.com/any/sub/menu/item.html)

For basic routing, such as supporting menu item links, you can use a really basic 'build route' and ignore the 'parse route' function altogether. This means that you need to write some code which checks the route query string against a list of menu items for your component. If there is a successful match, the query string will be replaced with the menu link. Your router should remove the matched query items from the request array, which is passed in by reference. Any unmatched variables should be left untouched, and will be appended to the URI.

Why is this important? #

There are several reasons why you should ensure that your component properly integrates with menu items.

Modules are assigned directly to menu items. If your router doesn't match match up to a menu item then the end user can't assign modules to the layout.
Menu items can be configured with access levels. If Joomla can't match a menu item, then the access restriction that was applied to the menu item won't apply.
You can set up your router to match custom, application specific variables. This allows your component to have finer grained menu items of the same type. One example of this is the content core component, which allows you to link to specific content items.

Special Variables #

You can include any GET variables in your query, however there are some which get special treatment from Joomla:

option points to a component, and uses the full name (such as com_name)
view points to a view folder within the component, the default is typically default
layout points to a layout within a view, the default is typically default
task points to a function within a view (e.g. view.html.php), the default is typically display
tmpl allows you to choose the display mode. You can choose tmpl=component to capture just the component output without your template.
Itemid is the menu item id from the menu table.

The good thing about this is that it's down to you how you use variables. When you construct menu items in the Joomla, they will be created as links to view folders and layout files. Menu items will include the option name of your component, for internal routing. They will include a view, unless the link is to a view named default in which case it will be omitted. The layout name will similarly be included unless it is named default.

Outputting component routes #

As you application grows, you will inevitably want to create links (or HTML redirects) to other areas of your application. This is where we use the JRoute::_() static method. This method basically acts as a URI renderer, and it will output relative URIs according to your site configuration. Here are a few examples:

JRoute::_('index.php?view=cheese');

This would be used internally to link to the default layout of the cheese view within the component. In Joomla 1.5, you had to specify the option for every call, but from 1.6+ this can be omitted for internal component links.

JRoute::_('index.php?view=cheese&layout=stilton');

This would again internally link to the cheese view, but instead would invoke the stilton layout file.

JRoute::_('index.php?option=com_content&view=article&id=5');

This would be used to create a link to the core content component, and would link to the single article display page. It should also load and display article with id number 5 from the database. When linking to external components, that component's route functions are used to determine the correct route.

JRoute::_() includes a second parameter, which is a switch for html encoding. By default, the method will html encode it's output. This doesn't work with HTTP redirects, because any ampersands will be converted to & which breaks your variable names. So when using this function outside of output to a HTML page, this needs to be set to false.

If you would like to see some examples in action, there are some in this wiki entry on the Joomla documentation wiki. I'll be following up with a couple of practical techniques that I have put together in due course.

Quantity vs Quality

2011-11-03T00:00:00Z

As my reader may have noticed, I took a hiatus from posting on here until recently. I came back a couple of weeks ago to try and get back into the habit of writing posts, and I set myself the target of publishing a post every Wednesday. I spend around about 12 hours a day on the web, or coding for it. Being able to share some of the fruits of that time ought to come naturally.

I suffer from a lack of confidence in my writing. My last post was just over two weeks ago — it's not for a lack of ideas that I missed my self-imposed schedule. I ended up sitting here on the netbook thinking of how to construct a post about responsive design techniques. It's something that gets me quite excited; a plethora of different techniques; a load of different frameworks and even more discussion on the web to reference. I just simply could not get it out into a post. I instead chose to watch the TV.

The second problem I have is that I am a border-line perfectionist. A lot of effort goes into producing quality content. I also try to produce high quality code in my work, but code comes a lot more naturally to me than writing. I can spend an hour staring at a paragraph because it doesn't seem to be worded right, whole posts get discarded because the topic or content feel forced; It's frustrating to say the least.

Trying to write a quality article a week is just not feasible for me. There are simply not enough hours in the day! So there will be no unrealistic, defeatist schedule. I'm going to aim to write something decent about once a month; a piece of work that I put a lot of effort into over an extended period of time.

That's not to say that you should check in once a month, my faithful reader.

One of my aims is to make this space a little more personal. I plan to share a lot more snippets of code and techniques that I pick up, and try to share a little more about who I am along the way too. My social media profiles have been gathering dust recently — Let's face it though, there are only so many sites one man can actively engage with regularly without fear of getting fired. So i'll probably end up choosing the core ones that I actually enjoy using (of which there are quote a few) and duplicate content to the rest.

The last thing I am aiming for is a new design. I do like the existing theme to a point, but this is also where I want to put into practice some of the ideas that I don't get to put into practice at work. It's not going to be rushed, but the timeline is going to be less than it took me for the first design. We will hope for a release before the new year. I'm starting from the fundamentals, drawing up ideas in my gorgeous new Moleskine® notebook. The plan is to integrate the responsive design fundamentals that I have been researching and lose some of the crud that has crept into the current design.

A basic date_diff for PHP 5.2

2011-11-04T00:00:00Z

I came across a problem having developed a site with a PHP 5.3 environment, when moving the site to the live environment the server was running PHP 5.2. Whilst the server gets upgraded I looked into getting the code to work in some form in the meantime. The main issues are the functions lcfirst() and date_diff(). The former is a simple fix, a function which lower-cases the first letter of a string — I was surprised this was only introduced in 5.3!

if(function_exists('lcfirst') === false) {
function lcfirst($str) {
$str[0] = strtolower($str[0]);
return $str;
}
}

The issue with date_diff is it's reliance on the DateInterval class, which as the name suggests is a native object introduced in 5.3 to represent the interval between two dates. The function ought to be functionally equivalent between both PHP 5.2 and 5.3, otherwise it would be useless. I found something that I am fairly happy with, in that it accepts the same inputs and outputs as the native 5.3 version. The calculations aren't correct though, unfortunately, and it's an incomplete implementation. I corrected the "invert" data type values returned, and also added support for "days" as these are the main things I am using.

/**
* Workaround for PHP < 5.3.0
*/
if(!function_exists('date_diff')) {
class DateInterval {
public $y;
public $m;
public $d;
public $h;
public $i;
public $s;
public $invert;
public $days;

public function format($format) {
$format = str_replace('%R%y',
($this->invert ? '-' : '+') . $this->y, $format);
$format = str_replace('%R%m',
($this->invert ? '-' : '+') . $this->m, $format);
$format = str_replace('%R%d',
($this->invert ? '-' : '+') . $this->d, $format);
$format = str_replace('%R%h',
($this->invert ? '-' : '+') . $this->h, $format);
$format = str_replace('%R%i',
($this->invert ? '-' : '+') . $this->i, $format);
$format = str_replace('%R%s',
($this->invert ? '-' : '+') . $this->s, $format);

$format = str_replace('%y', $this->y, $format);
$format = str_replace('%m', $this->m, $format);
$format = str_replace('%d', $this->d, $format);
$format = str_replace('%h', $this->h, $format);
$format = str_replace('%i', $this->i, $format);
$format = str_replace('%s', $this->s, $format);

return $format;
}
}

function date_diff(DateTime $date1, DateTime $date2) {

$diff = new DateInterval();

if($date1 > $date2) {
$tmp = $date1;
$date1 = $date2;
$date2 = $tmp;
$diff->invert = 1;
} else {
$diff->invert = 0;
}

$diff->y = ((int) $date2->format('Y')) - ((int) $date1->format('Y'));
$diff->m = ((int) $date2->format('n')) - ((int) $date1->format('n'));
if($diff->m < 0) {
$diff->y -= 1;
$diff->m = $diff->m + 12;
}
$diff->d = ((int) $date2->format('j')) - ((int) $date1->format('j'));
if($diff->d < 0) {
$diff->m -= 1;
$diff->d = $diff->d + ((int) $date1->format('t'));
}
$diff->h = ((int) $date2->format('G')) - ((int) $date1->format('G'));
if($diff->h < 0) {
$diff->d -= 1;
$diff->h = $diff->h + 24;
}
$diff->i = ((int) $date2->format('i')) - ((int) $date1->format('i'));
if($diff->i < 0) {
$diff->h -= 1;
$diff->i = $diff->i + 60;
}
$diff->s = ((int) $date2->format('s')) - ((int) $date1->format('s'));
if($diff->s < 0) {
$diff->i -= 1;
$diff->s = $diff->s + 60;
}

$start_ts = $date1->format('U');
$end_ts = $date2->format('U');
$days = $end_ts - $start_ts;
$diff->days = round($days / 86400);

if (($diff->h > 0 || $diff->i > 0 || $diff->s > 0))
$diff->days += ((bool) $diff->invert)
? 1
: -1;

return $diff;

}

It works pretty well (bar the inaccuracies), and hopefully I won't have a use for it again anyway.

Optimising WordPress: Caching

2011-12-27T00:00:00Z

Making your site as cache-able as possible is vital to ensure a smooth browsing experience. WordPress in it's basic form is quite efficient, when you compare it to code-bases such as Magento. Adding functionality such as plug-ins, media, themes and widgets all have a negative effect on performance. As part of the process of making this domain as efficient as possible, a number of caching techniques have been considered and employed.

Client Cache #

The first, easiest and probably most important aspect of caching is setting up your web server to serve sensible Expires and Cache-control headers on a file-type basis. This allows your visitor to have their browser cache large files upon subsequent page requests, and decreases the number of requests per visitor. It also cuts down on load times; if you set a lifetime for a resource, a browser (with a standard configuration) won't request the resource at all.

You could use something like this for configuring Apache; the answer provides insight into why these headers need to be set.

Output Caching #

As with anything WordPress related, there are many tools to perform a single task. The first is WP Super Cache, which I have configured to serve static HTML files. Load times are improved after the first visitor, as subsequent visitors will be served a pre-generated file from cache storage.

Static caching is a trade-off though. Any dynamically generated content and widgets will also be cached. I use a relatively low cache lifetime, so that widgets still update quite often (such as the Last.fm, Lifestream and Twitter widgets). You could also have the widgets update via AJAX calls to a non-cached script, though this depends on the Widget supporting this. Its also worth noting that the first user hitting the page will wait longer than subsequent visitors; the cache must be generated and served, which has a negative effect on load times on the first visit. WP Super Cache also invalidates a cache file when a post is updated or a comment posted, which causes a cache refresh.

Page Optimisation #

The second tool called Autoptimize. This works from a different angle, in that it aims to make the page served as efficient as possible. It performs actions such as merging and minifying CSS / JavaScript resources, in-lining CSS background images (using data URIs), and optimising HTML output by removing white-space. It performs a similar task to Google's mod_pagespeed, but I recently removed this as an update caused issues.

There are downsides to optimising output, as it is quite easy to over-optimise and impact on user experience. For example; Enabling conversion of background images in CSS to data URIs caused load times to spike to around 20-30 seconds (for non-cached page requests). Static caching fixes the issue on subsequent visits, but each invalidation causes an unacceptable load time for the visitor. This could possibly be resolved in the plug-in, though for the time being I have the feature disabled.

I encountered yet another issue with data URI images; malformed style-sheet parsing in Firefox Desktop and Mobile releases. This caused the stylesheet processing to end prematurely, as not only were background images missing but also basic style rules. This could be caused by the CSS implemented in my theme causing an incompatibility, though with the load time problem I haven't seen much point in debugging.

Looking Forward #

I'm looking to integrate a caching server in the future, and it's looking like Varnish is a likely candidate. Varnish will act as a proxy to the web server, and there will be some in-depth configuration required for optimal operation. Varnish may replace WP Super Cache, as it's cache will be in memory via memcached. I have also found a suitable Varnish WordPress integration, which should ease the process of migration.

The problem with integrating Varnish is that it acts as a proxy to the application (web) server. The application server would also have to be reconfigured with this in mind. It also introduces additional administration, as you may need to alter the ruleset to support specific plug-ins, widgets and core WordPress updates.

Disabling Apache Server Signature

2012-01-26T00:00:00Z

I have been trying to disable the server signature for a while, but I found that turning off the ServerSignature directive didn't work for all servers. The signature might read something like:

Apache/2.2.X (Ubuntu) mod_ssl/2.X.X OpenSSL/0.X.X

If your server exposes this information, it's easier for an attacker to compromise a system based on flaws in a particular server software version (especially if your server software is allowed to become outdated, or your distribution is slow to release security updates). By default, it will display this on error pages in plain text, and also present it as a Server header on every request.

To disable completely, you should set the following directives in your Apache configuration:

ServerSignature Off
ServerTokens Prod

via Nixtechnica

Blueberry Slider with slideToggle workaround

2012-03-31T00:00:00Z

I recently worked on a responsive design which required an image slider, with a toggle to "minimise" the block. Blueberry is a great responsive jQuery slider, keeping everything scaled correctly at any resolution I threw at it.

I needed to assign a slideToggle to the slider block, allowing the slider to be 'minimised'. Unfortunately this exposes an issue where if you first minimise the slider, resize the browser window (causing 'onresize' to recalculate the slider dimensions), then slideToggle it back open, it will have calculated a zero height for the slider and will refuse to maximize until you resize the browser window again.

To trigger the slider's size calculation, you need to trigger the 'onresize' event in the callback for slideToggle.

jQuery(button).click(function (e) {
$this = jQuery(this);
$this.toggleClass('slider-open');
jQuery('.slides',$this.parent())
.slideToggle(250,function() {
jQuery(window).trigger('resize');
}
);
});

This solution makes the transition noticeably less-smooth in the 'opening' toggle. It's most likely down to the fact that the slider has zero height until after the transition, after which the resize kicks in and restores the slider to full size.

Installing XHProf on Debian Squeeze

2012-04-17T00:00:00Z

I was working on a project which was randomly failing to load certain views outside the development environment. It turns out that the system was running out of memory. After searching some of the error messages output by the script, I stumbled upon the xhprof PHP module. It was originally created by Facebook, and released under an open source license.

xhprof provides profiling information, down to the function call. This includes execution time, CPU and memory usage for each operation. The module allows you to find and optimise bottlenecks in your application. The library includes a GUI output, you just use the classes provided to create the reports.

I installed using PECL on a Debian Squeeze development server, and the first things you need are php5-dev and make;

apt-get install php5-dev make

However, when you try to run the PECL install, we fail because the package is beta. We therefore need to set PECL to install beta packages. Configure PECL to install beta packages:

pecl config-set preferred_state beta
pecl install xhprof

PECL will correctly fetch the source files, but fail to start compiling.

[...]
11 source files, building
running: phpize
Cannot find config.m4.
Make sure that you run '/usr/bin/phpize' in the top level source directory of the module

ERROR: 'phpize' failed

This error is caused by a bug in the PEAR library installed on the system. The bug was fixed in PEAR 1.9.3, but as of the time of writing PEAR 1.9.4 is the latest stable version. Updating PEAR fixes the issue and allows the module to be compiled correctly.

pear install PEAR-1.9.4

After installing 1.9.4 you can then compile and install xhprof on Debian Squeeze. To add the module to PHP, you need to add it to your configuration.

The last thing to do is check the module is correctly loaded, check your phpinfo() output for an xhprof section. Then you can start profiling your projects.

For more information on setting up and using xhprof, head over to this ibuildings techportal article.

API Callback URLs and HTTP Authentication

2012-06-22T00:00:00Z

When developing web applications that use APIs, it is usually necessary to have the development site accessible for API callback URLs. A good example would be when working with payment gateway systems, which typically post back success or failure of transactions. In this event it is convenient to use HTTP authorisation to prevent outside access (users, crawlers, etc.). The issue with this is that API systems don't always work with the http://[user]@[password]:[url] method of manually passing through this authentication method.

If this case, and you are using Apache, you can always bypass HTTP authentication altogether;

Order deny,allow
Deny from all
AuthUserFile "/path/to/htusers"
AuthType Basic
AuthName "Dev"
require valid-user
allow from 192.168.1.0/24 # Allow traffic from example internal network addresses
allow from 127 # Allow all traffic on loopback address
allow from X.X.X.0/24 # Allow all traffic from External IP address range
Satisfy Any

The key here is the "Satisfy Any" directive. This instructs Apache to allow a connection to authenticate if any of the conditions are true. Traffic from the specified IP addresses will now bypass authentication, meaning that any API callbacks can poll the application endpoints you have set up. This method does rely on the callbacks coming from a specific IP address or IP range. It may not be a workable solution if the callbacks can originate from multiple unknown addresses, such as cloud services.

The other thing to note; if placed directly into a VirtualHost directive, this gives full access to the site / virtual domain to these IP addresses. This could potentially be an issue, which can be resolved by placing them within Location or Directory directives. This allows you to restrict access to specific directories or URLs within the application. Which you require depends purely upon how your API callbacks are implemented.

Responsive Layout for Wordpress

2013-01-28T00:00:00Z

I've been working on a few tweaks to improve accessibility on mobile devices. Since obtaining a shiny new Samsung Galaxy Note 2, I'm finding myself using my mobile device more than ever. The redesign earlier last year allowed me to introduce some initial steps toward a responsive layout, but it was and still is an unfinished product.

I have finally got round to implementing sidebar folding at low resolution. I'm the using adjacent sibling selector (+), the :checked pseudo-selector, and HTML hacks (, radio and check-box elements). This technique also works great for folding the main navigation at low resolution using a check-box.

Implementing the Responsive Layout Elements #

The folding technique is derived from this CSS accordion technique. I find the lack of reliance on JavaScript to be attractive; it remains to be seen whether this improves browser support due to the use of :checked and sibling selectors.

The HTML structure below provides the basis for the sidebar. As is standard with Wordpress' sidebar output, each widget is wrapped within an

. A element wraps the heading, which will target the hidden element through the for attribute. The element's id must match the for attribute value to allow the to interact with it. You can implement either check-box or radio type s, which will provide different interactions. Radio buttons allow just one section to be toggled; give them the same name to group them. Check-boxes allow multiple items to display simultaneously.


 
  
   
    Widget Title

The input element will be hidden using CSS as we don't want them to be displayed. I only wanted the accordion functionality to apply when in single-column mode, so I wrapped the two selectors in a @media query. I've stripped it down to the bare minimum for sake of clarity;

.sidebar .accordion-selector {
 display: none;
}
@media screen and (max-width: 960px) {
 .sidebar .widget-content {
  display: none;
 }
 .sidebar input.accordion-selector:checked + .widget-content {
  display: block;
 }
}

The difficult part is getting the HTML structure in place, within the confines of Wordpress' template and widget system. You have to include a unique ID for the input as mentioned, so the can include this in it's for attribute to activate the hidden . This mark-up needs to be included in the before_title and after_title parameter of the register_sidebar function call. Unfortunately though, the Wordpress API doesn't perform variable substitution on these attributes.

register_sidebar(
  array(
    'name'       => __('Sidebar'),
    'id'      => 'sidebar',
    'description'   => __('Sidebar'),
    'before_title'  => '',
    'after_title'  => '',
    'before_widget' => '',
    'after_widget'  => '',
  )
);

As we need some substitutions performing on the before_title sidebar attribute, allowing us to hook into widget generation to force some values. We need to hook the dynamic_sidebar_params filter to alter this output. My implementation is far from complete but it allows the widget ID to be included in the "title chrome":

function filter_sidebar_params($params) {
  
  $id     = $params[0]['id'];
  $the_id = $params[0]['widget_id'];
  $title  = $params[0]['before_title'];
  $after  = $params[0]['after_title'];
  
  $params[0]['before_title']  = sprintf($title,$the_id,$id);
  $params[0]['after_title']   = sprintf($after,$the_id,$id);
  
  return $params;
}

add_filter('dynamic_sidebar_params','filter_sidebar_params');

Implementing a folding navigation bar is a simpler task; we simply need to embed a clickable and hidden check-box input into the template directly before the navigation container.

The functionality is the same here as it is with the sidebar; the will toggle the , in turn toggling the

It may not be the most semantic implementation, but anything must be little better than navigation by

Next Steps #

I'm not sure on the next evolution for the drop-down navigation. I'm not a fan of the horizontal navigation links as they are when in the "low profile" mode. When I figure out what's best I'll follow up if it's noteworthy.

Client Showcase - Qualitick Ltd - Juicy Media

2013-06-11T00:00:00Z

http://www.juicymedia.co.uk/news/item/client-showcase-qualitick.html

I had the pleasure of writing up an overview of one of our clients at Juicy Media.

Twitter Widget for Wordpress

2013-06-27T00:00:00Z

I switched to the Jetpack Twitter Widget a year or so ago. Since Twitter fully switched to API version 1.1, as many developers know they now require OAuth for integration. This means that the Jetpack Twitter Widget is no longer supported. I'm not a fan of the "official" JavaScript Twitter widget, for a few reasons;

It requires JavaScript
It's ugly as hell
It's everywhere

There is also the timeline widget, which is also implemented as the successor to the original in Jetpack, but this isn't a 1:1 replacement either. So I wondered how easily an OAuth-enabled version would be to both manage and implement.

Integrating OAuth #

It turned out to be a reasonably simple task. I based it off the Wickett Twitter Widget, which I had available from before switching to the Jetpack version.

The OAuth integration requires you create a Twitter Application; You can do that here. Twitter have been kind enough to provide all the necessary public and private keys, without implementing a full OAuth handshake with the service. The widget implements the simple to use twitteroauth library for PHP; This facilitates the OAuth calls, and is available on GitHub.

Authorising against your account #

This initial version simply covers adding the 4 different OAuth keys from your developer application directly into the widget. I'm considering other options, such as a standalone options page, attaching data to authors—including a full OAuth handshake—, or application only authentication, but it's working as it stands.

A Word of Caution #

The API keys you generate should be kept secret. If others have access to your installation and can manage widgets, they will be able to access these keys. As this is a personal blog this isn't an issue, but it is something that you may need to consider. The keys can be regenerated at any time, but of course you will need to update the new keys into the widget settings otherwise it will stop working. The application you create only requires read permissions to operate, so there's no need to allow write access.

UI Considerations #

Another caveat Twitter have thrown in; they insist that any integration must adhere to their developer display requirements when integrating the API. I have at least tried to interpret and adhere to the rules they have laid out in the widget. Basically they want anything that is a tweet to look and behave just like it would in their application. This includes the ability to Reply, Re-tweet and Favourite Tweets, follow a Twitter user, and navigate to the original tweet amongst other things.

It is technically possible to just upgrade a widget that was using the v1.0 API to use v1.1 with minimal changes. I would have to advise against this though, as you run the risk of having your API access cut off. I guess that means no more status update tickers?

Web intents #

Web intents facilitate actions on tweets, and they can work with or without JavaScript. Twitter provide some hosted JavaScript that automatically enhances the web intents in your HTML. You don't have to add any classes or attributes, it works based on the link target. There are privacy concerns, as Twitter are can track users when this code is included. There is a method to opt-out of this, but I haven't yet implemented this option.

Download the zip or clone the GitHub repository and install the plugin as normal. You may need to tweak the CSS, as I have tested this on just one WordPress theme (this one). If you have an improvement, feel free to send a pull request. Questions and suggestions are always appreciated, if you have any post an issue.

Installable Webapps: Extend the Sandbox | Boris Smus

2013-07-18T00:00:00Z

http://smus.com/installable-webapps/

RECESS - Twitter's CSS Hinter

2013-08-01T00:00:00Z

http://twitter.github.io/recess

The slippery slope | 90 Percent Of Everything

2013-08-05T00:00:00Z

http://www.90percentofeverything.com/2013/07/23/the-slippery-slope/

An interesting read; I've visited Dark Patterns a few times over the years and not much has changed!

Essential considerations for crafting quality media queries

2013-08-07T00:00:00Z

http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Make the most of ARIA landmark roles

2013-08-08T00:00:00Z

http://www.netmagazine.com/tutorials/make-most-aria-landmark-roles

Understanding the Zend Framework 2 event manager – Un blog sur tout et rien

2013-08-08T00:00:00Z

http://www.michaelgallego.fr/blog/2013/05/12/understanding-the-zend-framework-2-event-manager/

Varnish Edge Side Includes and Wordpress

2013-08-08T00:00:00Z

http://timbroder.com/2012/12/getting-started-with-varnish-edge-side-includes-and-wordpress.html

Flatstrap by Littlesparkvt.com

2013-08-20T00:00:00Z

http://flatstrap.org/index.html

Fluid Width YouTube Videos

2013-08-20T00:00:00Z

http://css-tricks.com/fluid-width-youtube-videos/

Please stop embedding Bootstrap classes in your HTML!

2013-08-20T00:00:00Z

http://ruby.bvision.com/blog/please-stop-embedding-bootstrap-classes-in-your-html

squashing commits with rebase

2013-08-21T00:00:00Z

http://gitready.com/advanced/2009/02/10/squashing-commits-with-rebase.html

Developing Backbone.js Applications

2013-09-02T00:00:00Z

http://addyosmani.github.io/backbone-fundamentals/

git - the simple guide - no deep shit!

2013-09-02T00:00:00Z

http://rogerdudler.github.io/git-guide/

Learn Backbone.js Completely

2013-09-02T00:00:00Z

http://javascriptissexy.com/learn-backbone-js-completely/

Quick Tip: Avoid FOUT by Adding a Web Font Preloader | Webdesigntuts+

2013-09-05T00:00:00Z

http://webdesign.tutsplus.com/tutorials/ux-tutorials/quick-tip-avoid-fout-by-adding-a-web-font-preloader/

Backbone.js able to do rest and localstorage?

2013-09-10T00:00:00Z

http://stackoverflow.com/questions/5761349/backbone-js-able-to-do-rest-and-localstorage

Pure

2013-09-11T00:00:00Z

http://purecss.io/ A set of small, responsive CSS modules that you can use in every web project.

Responsive Data Table Roundup

2013-09-11T00:00:00Z

http://css-tricks.com/responsive-data-table-roundup/

What is a router? - Backbone.js

2013-09-11T00:00:00Z

http://backbonetutorials.com/what-is-a-router/

Zombies! RUN! (Managing Page Transitions In Backbone Apps)

2013-09-12T00:00:00Z

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

Are you a sucker? — How to use the internet

2013-09-14T00:00:00Z

https://medium.com/how-to-use-the-internet/a495dfb58367

how to blog about code and give zero fucks

2013-09-14T00:00:00Z

http://www.garann.com/dev/2013/how-to-blog-about-code-and-give-zero-fucks/

AirPrint on Debian GNU/Linux

2013-09-18T00:00:00Z

http://pierre.baudu.in/airprint/

Pingback implementation for Zend Framework Applications

2013-09-18T00:00:00Z

http://pastebin.com/f64e59367

Thinking Inside The Box With Vanilla JavaScript

2013-10-07T00:00:00Z

http://coding.smashingmagazine.com/2013/10/06/inside-the-box-with-vanilla-javascript/

A simple Debian based dev environment

2013-10-08T00:00:00Z

http://www.phpfreaks.com/tutorial/a-simple-debian-based-dev-environment

How to install/setup latest version of PHP 5.5 on Debian Wheezy 7.0/7.1

2013-10-08T00:00:00Z

http://www.dev-metal.com/setup-latest-version-php-5-5-debian-wheezy-7-07-1-fix-gpg-key-error/

WordPress function to add the TinyMCE WYSIWYG editor to any custom field of type 'Textarea'

2013-10-08T00:00:00Z

https://gist.github.com/pragmatic-web/1885364

A Rebase Workflow for Git

2013-10-18T00:00:00Z

http://www.randyfay.com/node/91

Avoiding Git Disasters: A Gory Story

2013-10-18T00:00:00Z

http://www.randyfay.com/node/89

gajus/xhprof.io

2013-10-22T00:00:00Z

https://github.com/gajus/xhprof.io

Can I set up system mail to use an external SMTP server?

2013-11-01T00:00:00Z

http://unix.stackexchange.com/questions/36982/can-i-set-up-system-mail-to-use-an-external-smtp-server

Disconnecting EGit from a Project in Eclipse

2013-11-01T00:00:00Z

I have been using Git a lot more recently. Eclipse PDT is my editor of choice, and EGit has eased the transition to a version control centric workflow. Some of my project development environments are accessed via a Samba network share; unfortunately Git over Samba is sub-optimal at best. For a larger project I have been working on, a full repository refresh could take up to 30 minutes. This is obviously unacceptable, especially if you hope to commit often or create / switch feature branches.

Disconnect Eclipse Team Providers #

The problem I was having is that EGit detects and refreshes the repository from the project at import time, and each time Eclipse started up. It is possible to fix the problem without losing the Git functionality of the IDE completely, as it can be helpful. The EGit functionality is provided by the Git Team Provider. This can be disconnected on a project basis by right-clicking the project, in the team section labelled "Disconnect". After doing this we now have to manage this repository directly within the development environment (i.e. via SSH). Alternately you could operate the Git command line using the Samba network mount, but the same problems will occur without any benefit (just not causing issues in the IDE).

Disable Automatic Registration of the Team Provider #

Additionally, you can configure Eclipse to not register new projects with the team provider. This means that you won't have to waste time waiting for EGit to initialise itself just to disconnect the functionality afterwards. This can be toggled in Preferences > Team > Git > Projects, by un-checking "Auto share projects located in a git repository". Now for any project where you wish to use EGit, you have to right-click, under the team section labelled "Share Project" and follow the Share Project wizard.

Part-UUID - Debian Wiki

2013-11-01T00:00:00Z

https://wiki.debian.org/Part-UUID

javascript css check if overflow

2013-11-03T00:00:00Z

http://stackoverflow.com/questions/9333379/javascript-css-check-if-overflow

I'm Taking Part in Movember 2013

2013-11-05T00:00:00Z

This year I am participating in Movember. I know a few people who have done so in the past, however it's a team effort with everybody at Juicy Media taking part. Participation is not at all difficult, I don't have to run (or walk) a marathon, so there was no excuse but to sign up and get on with it. The only downside is taking those awful "selfie" photos; vanity aside my front-facing camera seems to be awful for the purpose.

Isn't it Movember every day for you? #

Not any more! Being a (former) proud owner of decent volume of facial hair, day one has proven to be the most difficult. It was almost like looking at someone else in the mirror. The feeling of harsh cold on my lower face was difficult to bear, as should be apparent in the post-shave mugshot. At least I didn't get asked for ID at the local.

My Movember facial growth is progressing quickly, though I wish it would grow faster. It's all for a good cause, and I hope my participation in some way helps, regardless of what we raise in terms of donations. Cancer in particular has affected many members of my family. It was awareness of the problem that helped them get the screening, advice and treatment they needed to ensure they would have the best chance of a full and healthy life.

So if you feel the need spend money with nothing in return*, the team and I would be happy to solicit your generous donations through the relevant Movember pages. Here's my personal progress at the end of day four:

* Other than that warm, fuzzy feeling you get for doing something to help others, and my gratitude

Apache Cordova

2013-11-07T00:00:00Z

http://cordova.apache.org/

Copy to clipboard using JavaScript and Flash

2013-11-18T00:00:00Z

https://github.com/mojombo/clippy

CSS Regions Considered Harmful

2014-01-23T00:00:00Z

http://alistapart.com/blog/post/css-regions-considered-harmful

GitLab CE 6.5 released

2014-01-23T00:00:00Z

http://blog.gitlab.org/gitlab-ce-6-dot-5-released/

PHP 5.6 alpha

2014-01-26T00:00:00Z

http://php.net/index.php#id2014-01-23-1

Why is Progressive Enhancement so unpopular?

2014-01-28T00:00:00Z

http://allinthehead.com/retro/367/why-is-progressive-enhancement-so-unpopular

How I lost my $50,000 Twitter username

2014-01-29T00:00:00Z

http://thenextweb.com/socialmedia/2014/01/29/lost-50000-twitter-username/#!tMwKa

Magento Checklist for Design Elements

2014-01-29T00:00:00Z

https://www.sonassi.com/knowledge-base/magento-checklist-for-design-elements/

Security vulnerability in gitlab (CVE-2013-7316)

2014-02-02T00:00:00Z

http://blog.gitlab.org/xss-vulnerability-in-gitlab/

Footage from the Titanic Struggle of B-R

2014-02-03T00:00:00Z

http://www.youtube.com/watch?v=RCK-E5AopVI

Making Time for Side Projects

2014-02-03T00:00:00Z

http://alistapart.com/column/making-time-for-side-projects

Qualys SSL Labs - Projects / SSL Server Test

2014-02-03T00:00:00Z

https://www.ssllabs.com/ssltest/

7 Days to Die - Alpha 6.3 Patch Is Out!

2014-02-04T00:00:00Z

http://7daystodie.com/alpha-6-3-patch-is-out/

Adactio: Journal—Writing from home

2014-02-05T00:00:00Z

http://adactio.com/journal/6632/

Of excellence and reputation — Joschi Kuphal

2014-02-05T00:00:00Z

http://jkphl.is/articles/of-excellence-and-reputation/

The Better Way to Modify Magento Layouts

2014-02-06T00:00:00Z

http://www.classyllama.com/development/magento-development/the-better-way-to-modify-magento-layout

Working With LESS and the Chrome DevTools

2014-02-06T00:00:00Z

http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

Applying Transformations To Responsive Web Design

2014-02-07T00:00:00Z

http://mobile.smashingmagazine.com/2014/02/06/applying-xsl-transformations-to-responsive-web-design/

Really simple responsive HTML email template

2014-02-07T00:00:00Z

http://www.leemunroe.com/responsive-html-email-template/

Mapping Relational Databases and SQL to MongoDB

2014-02-09T00:00:00Z

http://code.tutsplus.com/articles/mapping-relational-databases-and-sql-to-mongodb--net-35650

PhpStorm - Top Productivity Hacks and Shortcuts

2014-02-09T00:00:00Z

http://www.sitepoint.com/phpstorm-top-productivity-hacks-shortcuts/

Mounting Windows Shares with cifs in Debian Squeeze

2014-02-10T00:00:00Z

I run Debian Squeeze with Gnome 3 on a laptop. I mainly use this to offload my e-mail from the main machine, where I can concentrate my workflow across two screens without the constant need to ALT-Tab. This means that there is a need to share files between the Windows desktop machine and Laptop, using regular windows file shares.

I had a series of "bookmarks" that allowed me to access various Samba shares. These bookmarks (GVFS mounts) are configured in Nautilus, and really simple to set up. Unfortunately, they are not so easy to use; you can't drag and drop a file from a GVFS share into a non-supporting application (such as Google Chrome), and they don't usually generate file previews in nautilus either. This could be due to the fact that they use protocol addresses (e.g. smb://)? That means that I was having to copy files—from the shares to a local directory—before being able to work with them.

Configuring CIFS shares to mount on boot #

An alternative to GVFS is to mount shares via CIFS. This method allows you to specify your mounts in your /etc/fstab file. In my case, I had to install the cifs mount utilities first (assuming you have installed and configured sudo);

sudo apt-get install cifs-utils

Then you just need to configure the shares, adding them to the /etc/fstab file. Caution is required here of course; altering this file incorrectly can stop your system from booting. You will need to add new entries into the file that look like the following (substitute all according to your configuration):

/// cifs username=,password=,uid=,gid= 0 0

/// cifs credentials=,uid=,gid= 0 0

Finally, you need to create your mount point(s) and test that your shares work. You can do this by trying to mount them with -v for verbose output:

sudo mount -v

In testing this configuration, I am able to access network shares using this method as if I was working with local directories; there is just a bit more overhead to set up new shares. The mounts fail gracefully (the system still boots!) when the network locations aren't available. You would need to manually remount them with root privileges (or add the users option) if they become available after booting. There are a plethora of further mount options for cifs depending upon your configuration.

Choosing Vanilla JavaScript

2014-02-11T00:00:00Z

http://alistapart.com/blog/post/choosing-vanilla-javascript

Reinstalling Magento Modules

2014-02-11T00:00:00Z

http://alanstorm.com/reinstalling_magento_modules

Learn How to Code For Free Without Leaving Your Browser

2014-02-12T00:00:00Z

http://www.myasmine.com/free-sites-learn-how-to-code-without-leaving-your-browser/

Solving a Pound HTTPS Redirect Issue

2014-02-12T00:00:00Z

I recently had a problem where a Magento store would infinitely redirect, from TLD to sub-domain (i.e. non-www to www). The server was configured behind a reverse proxy, which was handled by Pound (acting as a load balancer and SSL wrapper). Pound is great for handling hand-overs between a caching proxy and application servers, in addition to load balancing multiple servers and wrapping SSL connections to the client. The issue was quite difficult to track down; redirects can be issued at any point in the application stack. We tested adding redirection at each level of the stack in isolation; web server, caching proxy and within the application. All exhibited the same problem, no matter where the redirect was executed from. The redirect loop didn't present itself when redirects were removed either.

Configuring a Solution #

The solution was found by testing each back-end. As we were able to access each back-end independently, we were able to determine that redirection was in fact working. Pound must have been causing the redirects to loop, but we didn't see any reason why it should be doing so.

After some research, Pound does in fact rewrite location headers returned from the server, under certain circumstances. This depends on the aptly named configuration option RewriteLocation 0|1|2. The default setting is 1 when not specified, which means that any Location headers that seem to point to the application server (instead of pound) are rewritten to point to pound. In this case RewriteLocation 0 needed to be set, which fixed the redirection to Magento.

This is necessary where Pound is handling SSL—which it needs to do to function—and application server is configured with SSL offloaded. Pound communicates with the application server via HTTP, and translates any responses from the web server according to the protocol and server address that was initially requested.

The problem with CSS pre-processors

2014-02-12T00:00:00Z

http://blog.millermedeiros.com/the-problem-with-css-pre-processors/

HHVM and Hack - Can We Expect Them to Replace PHP?

2014-02-14T00:00:00Z

http://www.sitepoint.com/hhvm-hack-part-1/

localForage: Offline Storage, Improved

2014-02-14T00:00:00Z

https://hacks.mozilla.org/2014/02/localforage-offline-storage-improved/

Protecting Against Link Rot While Embracing the Future

2014-02-14T00:00:00Z

http://alistapart.com/blog/post/protecting-against-link-rot-while-embracing-the-future

How SVG Line Animation Works

2014-02-18T00:00:00Z

http://css-tricks.com/svg-line-animation-works/

Live Editing Sass and Less in the Firefox Developer Tools

2014-02-18T00:00:00Z

https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/

Useful Learning Resources For Web Designers

2014-02-18T00:00:00Z

http://www.smashingmagazine.com/2014/02/14/learning-resources-roundup/

Magmi Wiki

2014-02-19T00:00:00Z

http://sourceforge.net/apps/mediawiki/magmi/index.php?title=Main\_Page

Responsive Design Frameworks: Just Because You Can, Should You?

2014-02-20T00:00:00Z

http://mobile.smashingmagazine.com/2014/02/19/responsive-design-frameworks-just-because-you-can-should-you/

Tips for Public Speaking

2014-02-20T00:00:00Z

http://speaking.io/

GitLab CE 6.6 released

2014-02-22T00:00:00Z

http://blog.gitlab.org/gitlab-6-dot-6-released/

Kickstart Your Project With INIT And Grunt

2014-02-23T00:00:00Z

http://coding.smashingmagazine.com/2014/02/20/kickstart-your-project-with-init-and-grunt/

Deploying an Update Server

2014-02-24T00:00:00Z

http://docs.joomla.org/Deploying_an_Update_Server

Float Labels with CSS

2014-02-24T00:00:00Z

http://css-tricks.com/float-labels-css/

Medium-Style Page Transition

2014-02-24T00:00:00Z

http://tympanus.net/codrops/2013/10/30/medium-style-page-transition/

Complaint-Driven Development

2014-02-25T00:00:00Z

http://www.codinghorror.com/blog/2014/02/complaint-driven-development.html

CSS polyfills from the future

2014-02-26T00:00:00Z

http://gridstylesheets.org/

Protect Against Humans.txt Query-String Scans

2014-02-27T00:00:00Z

http://perishablepress.com/protect-against-humans-txt-query-string-scans/

Stackicons - Icon Fonts for Web Designers

2014-02-27T00:00:00Z

http://stackicons.com/

Atom

2014-03-02T00:00:00Z

https://atom.io/

The Battle for the Body Field

2014-03-02T00:00:00Z

http://alistapart.com/article/battle-for-the-body-field

Continuum

2014-03-02T00:00:00Z

http://adactio.com/journal/6692/

Only 90s Web Developers Remember This

2014-03-04T00:00:00Z

http://zachholman.com/posts/only-90s-developers/

Aerotwist - My Performance Audit Workflow

2014-03-05T00:00:00Z

http://aerotwist.com/blog/my-performance-audit-workflow/

Flexbox Bar Navigation Demo

2014-03-05T00:00:00Z

http://css-tricks.com/flexbox-bar-navigation/

Better Dependency Management In Team-Based WordPress Projects With Composer

2014-03-07T00:00:00Z

http://wp.smashingmagazine.com/2014/03/07/better-dependency-management-team-based-wordpress-projects-composer/

Protect Against Malicious POST Requests

2014-03-07T00:00:00Z

http://perishablepress.com/protect-post-requests/

What We Mean When We Say “responsive”

2014-03-09T00:00:00Z

http://alistapart.com/column/what-we-mean-when-we-say-responsive

The Art of HTML Semantics: Part 1

2014-03-10T00:00:00Z

http://kevinsuttle.com/posts/the-art-of-html-semantics-pt1/

Compile LESS Files with Grunt

2014-03-10T00:00:00Z

http://ericnishio.com/blog/compile-less-files-with-grunt

Using Sass To Semantically @extend Bootstrap

2014-03-11T00:00:00Z

http://www.sitepoint.com/sass-semantically-extend-bootstrap/

Device-Agnostic

2014-03-12T00:00:00Z

http://trentwalton.com/2014/03/10/device-agnostic/

How to Make an Awesome Maintenance Mode Screen for WordPress

2014-03-12T00:00:00Z

http://xtremelysocial.com/2010/how-to-make-an-awesome-maintenance-mode-screen-for-wordpress/

How to upgrade Magento to version 1.8

2014-03-12T00:00:00Z

http://www.mageplace.com/news-blog/how-to-upgrade-your-magento-to-1-8-0-0-version.html

Using Your Terminal From The DevTools

2014-03-12T00:00:00Z

http://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/

WordPress Maintenance Mode Without a Plugin

2014-03-12T00:00:00Z

http://sivel.net/2009/06/wordpress-maintenance-mode-without-a-plugin/

Improving Magento Maintenance Mode

2014-03-17T00:00:00Z

http://www.demacmedia.com/magento-commerce/mini-tutorial-improving-magento%E2%80%99s-maintenance-mode-for-store-view-specific-use/

classyllama/Wiz

2014-03-18T00:00:00Z

https://github.com/classyllama/Wiz

Avoiding Optional Dependencies

2014-03-19T00:00:00Z

http://richardmiller.co.uk/2014/03/17/avoiding-optional-dependencies/

How To Create An Admin-Manageable Magento Entity For Brands

2014-03-19T00:00:00Z

http://coding.smashingmagazine.com/2014/03/13/tutorial-create-admin-manageable-magento-entity-brands/

Install Apache Solr 4.4 on Ubuntu 12.04 with Tomcat 7 and MySql Data Import

2014-03-19T00:00:00Z

http://gregsomers.com/blog/2013/07/30/install-apache-solr-44-on-ubuntu-1204-with-tomcat-7-and-mysql-data-import

Better integration for open web apps on Android

2014-03-20T00:00:00Z

https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/

HTTPS Mixed Content: Still the Easiest Way to Break SSL

2014-03-20T00:00:00Z

https://community.qualys.com/blogs/securitylabs/2014/03/19/https-mixed-content-still-the-easiest-way-to-break-ssl

Brand Basics: The Importance of Having a Brand Platform

2014-03-21T00:00:00Z

http://justcreative.com/2014/03/18/branding-basics/

Refactoring Legacy Code: Part 1 - The Golden Master

2014-03-23T00:00:00Z

http://code.tutsplus.com/tutorials/refactoring-legacy-code-part-1-the-golden-master--cms-20331

In Depth Magento Dispatch: Rewrites

2014-03-26T00:00:00Z

http://alanstorm.com/magento_dispatch_rewrites_intro

Creating Custom Shipping Methods In Magento

2014-03-28T00:00:00Z

http://coding.smashingmagazine.com/2014/01/15/create-custom-shipping-methods-magento/

Magento Cachebuster

2014-03-28T00:00:00Z

https://github.com/gknoppe-guidance/magento-cachebuster

FIX - Customer cannot login to magento 1.8.1

2014-04-07T00:00:00Z

http://blueclawecommerce.co.uk/blog/fix-customer-cannot-login-to-magento-1-8-1/

Optimal Techniques for Strategically Displaying Web Forms

2014-04-07T00:00:00Z

http://sixrevisions.com/user-interface/optimal-techniques-for-strategically-displaying-web-forms/

Web Components and the Three Unsexy Pillars

2014-04-07T00:00:00Z

http://aerotwist.com/blog/web-components-and-three-unsexy-pillars/

Creating Style Guides

2014-04-11T00:00:00Z

http://alistapart.com/article/creating-style-guides

HTML5 Video Player | Video.js

2014-04-11T00:00:00Z

http://www.videojs.com/

xkcd: Heartbleed Explanation

2014-04-11T00:00:00Z

http://xkcd.com/1354/

Writing to vagrant synced folders

2014-04-13T00:00:00Z

http://akrabat.com/computing/writing-to-vagrant-synced-folders/

drewhunter/EmptyHandles

2014-04-14T00:00:00Z

https://github.com/drewhunter/EmptyHandles

How to Deal with Merge Conflicts in Git

2014-04-17T00:00:00Z

http://css-tricks.com/deal-merge-conflicts-git/

12 Little-Known CSS Facts

2014-04-20T00:00:00Z

http://www.sitepoint.com/12-little-known-css-facts/

The Ebb of the Web

2014-04-21T00:00:00Z

http://smus.com/ebb-of-the-web/

Improve the payment experience with animations

2014-04-22T00:00:00Z

https://medium.com/p/3d1b0a9b810e

netz98/n98-magerun

2014-04-29T00:00:00Z

https://github.com/netz98/n98-magerun

Joomla! 3.3.0 Released

2014-04-30T00:00:00Z

http://www.joomla.org/announcements/release-news/5546-joomla-3-3-0-released.html

Rewriting a Block Class

2014-05-09T00:00:00Z

http://codegento.com/2011/02/rewriting-a-block-class/

Magento – display root category products with filters

2014-05-12T00:00:00Z

http://www.techdilate.com/code/magento-display-root-category-products-with-filters/

Using Lucene and MoreLikeThis to show Related Content

2014-05-23T00:00:00Z

http://cephas.net/blog/2006/11/14/using-lucene-and-morelikethis-to-show-related-content/

Using an external SMTP server with GitLab

2014-05-29T00:00:00Z

http://elijahpaul.co.uk/using-an-smtp-server-with-gitlab/

Phabricator

2014-05-31T00:00:00Z

http://phabricator.org/

How to Create a .pem File for SSL Certificate Installations

2014-06-04T00:00:00Z

http://www.digicert.com/ssl-support/pem-ssl-creation.htm

Javascript: encode(decode) html text into html entity

2014-06-05T00:00:00Z

https://gist.github.com/CatTail/4174511

A More Modern Scale for Web Typography

2014-06-17T00:00:00Z

http://typecast.com/blog/a-more-modern-scale-for-web-typography

5 More Killer Firefox Addons for Designers

2014-06-28T00:00:00Z

http://www.sitepoint.com/5-killer-firefox-addons-designers/

The `time` Element

2014-06-30T00:00:00Z

http://css-tricks.com/time-element/

Move Magento Private Files Outside the Docroot

2014-07-21T00:00:00Z

http://www.fontis.com.au/blog/magento/move-magento-private-files-outside-docroot

Git: changed files between two commits

2014-08-07T00:00:00Z

If you need a list of all modified files between two commits, you can use the following command;

git diff --name-only SHA1 SHA2

You can also pipe the output to a file (in the parent directory) as follows;

git diff --name-only SHA1 SHA2 > ../filename.txt

Via http://stackoverflow.com/a/1552353

Our Magento Git Guide and Work Flow

2014-08-12T00:00:00Z

https://www.sonassi.com/knowledge-base/our-magento-git-guide-and-work-flow/

addAttributeToFilter Conditionals In Magento

2014-09-02T00:00:00Z

http://fishpig.co.uk/magento/tutorials/addattributetofilter/

Editing Magento Translate.csv File

2014-09-02T00:00:00Z

http://blog.belvg.com/editing-magento-translate-csv-file.html

Favicon to PNG with convert and streams

2014-09-09T00:00:00Z

I have WordPress set up to load, parse and cache the favicons for sites added as bookmarks. The PHP class I was using struggled with certain ICO files, such as alistapart.com and sitepoint.com.

In the below example, we load a favicon from the filesystem into memory. For my use-case, the favicon has been loaded directly from the external site. Wanting to avoid unnecessary temporary files, I found that you can pipe data to and from the convert program from ImageMagick using streams in PHP. Assuming that you have determined that the favicon is an ico file;

convert ico:- -thumbnail 16x16 -alpha on -background none -flatten png:-

The command reads left to right, ico:- instructs convert to receive an ico formatted string from STDIN. png:- then instructs convert to output a png string to STDOUT. Below is a working example;

$file = dirname(__FILE__);
$icon = file_get_contents("{$file}/favicon.ico");

$descriptorspec = array(
0 => array("pipe", "r"), // stdin is a pipe that the child will read from
1 => array("pipe", "w"), // stdout is a pipe that the child will write to
2 => array("file", "/tmp/error-output.txt", "a") // stderr is a file to write to
);

$process = proc_open('convert ico:- -thumbnail 16x16 -alpha on -background none -flatten png:-', $descriptorspec, $pipes);

if (is_resource($process)) {
// $pipes now looks like this:
// 0 => writeable handle connected to child stdin
// 1 => readable handle connected to child stdout
// Any error output will be appended to /tmp/error-output.txt

fwrite($pipes[0], $icon);
fclose($pipes[0]);

$conv = stream_get_contents($pipes[1]);
fclose($pipes[1]);

$err = $pipes[2];
fclose($pipes[2]);

// It is important that you close any pipes before calling
// proc_close in order to avoid a deadlock
$return_value = proc_close($process);

if ($return_value == 0) {
header('Content-Type: image/png');
echo $conv;
} else {
echo $err;
echo "command returned $return_value\n";
}

}

You can view a demo using convert here

I can't take credit for the stream code; it is for the most part just the example code from the PHP manual.

The Dark Corners of Your UI

2014-09-09T00:00:00Z

http://blog.capwatkins.com/dark-corners

CSS character escape sequences

2014-09-10T00:00:00Z

https://mathiasbynens.be/notes/css-escapes

Recent Exploit using Fake Magento Extensions

2014-09-18T00:00:00Z

http://blog.nexcess.net/2014/07/25/recent-exploit-using-fake-magento-extensions/

How To Configure Virtual Memory Swap File on a VPS

2014-09-23T00:00:00Z

https://www.digitalocean.com/community/tutorials/how-to-configure-virtual-memory-swap-file-on-a-vps

PHP shell scripts for Magento

2014-09-26T00:00:00Z

http://inchoo.net/magento/php-shell-scripts-for-magento/

HTML5 WordPress Starter Theme

2014-09-28T00:00:00Z

http://roots.io/starter-theme/

A Framework for deploying WordPress sites with Capistrano 3

2014-09-29T00:00:00Z

http://www.mixd.co.uk/blog/a-framework-for-deploying-wordpress-sites-with-capistrano-3/

iOS fix for position fixed elements on input focus

2014-10-02T00:00:00Z

http://dansajin.com/2012/12/07/fix-position-fixed/

Search within a search in SOLR

2014-10-07T00:00:00Z

http://stackoverflow.com/questions/9205592/search-within-a-search-in-solr

Magento: Remove auto breaks “br/” from product description

2014-10-28T00:00:00Z

http://www.njcmedia.com/2011/04/magento-remove-auto-breaks-br-from-product-description/

Build Automation with Composer Scripts

2014-11-21T00:00:00Z

http://www.sitepoint.com/build-automation-with-composer-scripts/

Busted: A WordPress Plugin to Force Cache Busting

2014-11-27T00:00:00Z

http://wptavern.com/busted-a-wordpress-plugin-to-force-cache-busting

The Best Laravel and PHP Screencasts

2014-11-29T00:00:00Z

https://laracasts.com/

Install and Config Fail2Ban in Debian 7 Wheezy

2014-12-08T00:00:00Z

http://www.pontikis.net/blog/fail2ban-install-config-debian-wheezy

Permanently Ban Repeat Offenders With fail2ban

2014-12-09T00:00:00Z

http://stuffphilwrites.com/2013/03/permanently-ban-repeat-offenders-fail2ban/

Laravel 4 Quick Tip: Custom Error Pages

2014-12-15T00:00:00Z

http://driesvints.com/blog/laravel-4-quick-tip-custom-error-pages

thomaswelton/laravel-gravatar · GitHub

2014-12-15T00:00:00Z

https://github.com/thomaswelton/laravel-gravatar

Exim, DKIM and Debian Configuration

2014-12-16T00:00:00Z

http://www.iodigitalsec.com/exim-dkim-and-debian-configuration/

How to Create a Facade in Laravel 4

2014-12-16T00:00:00Z

http://fideloper.com/create-facade-laravel-4

Laravel 4 Authentication

2014-12-16T00:00:00Z

https://medium.com/laravel-4/laravel-4-authentication-e8d93c9ce0e2

Laravel Administrator Documentation

2014-12-16T00:00:00Z

http://administrator.frozennode.com/docs/introduction

How to redirect local root mail to an external email address on Linux

2014-12-16T00:00:00Z

http://blog.bobbyallen.me/2013/02/03/how-to-redirect-local-root-mail-to-an-external-email-address-on-linux/

Using syslog for your php applications

2014-12-16T00:00:00Z

https://www.adayinthelifeof.nl/2011/01/12/using-syslog-for-your-php-applications/

A Simplified Laravel ACL

2014-12-18T00:00:00Z

http://ollieread.com/blog/2014/03/18/a-simplified-laravel-acl/

Creating Customizable Packages With Routing

2015-01-03T00:00:00Z

http://ryantablada.com/post/creating-customizable-packages-with-routing

Command line interface for WordPress

2015-01-06T00:00:00Z

http://wp-cli.org/

Managing Databases with Migrations

2015-01-06T00:00:00Z

http://laravelbook.com/laravel-migrations-managing-databases/

An Introduction to Content Security Policy

2015-01-07T00:00:00Z

http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Scaling CloudFlare's Massive WAF

2015-01-09T00:00:00Z

http://www.scalescale.com/scaling-cloudflares-massive-waf/

Updating a Debian package with a new upstream release

2015-01-09T00:00:00Z

http://blog.fili.nl/updating-a-debian-package-with-a-new-upstream-release/

Installing Magento 2 with Composer

2015-01-12T00:00:00Z

http://magenticians.com/installing-magento-2-composer

Data Validation in Laravel: The Right Way

2015-01-14T00:00:00Z

http://www.sitepoint.com/data-validation-laravel-right-way/

What’s new in Laravel 5

2015-02-15T00:00:00Z

http://martinbean.co.uk/blog/2014/09/08/whats-new-in-laravel-5/

Build ngx_pagespeed From Source

2015-02-25T00:00:00Z

https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

Improving Laravel 5’s registrar service

2015-03-06T00:00:00Z

http://martinbean.co.uk/blog/2015/02/18/improving-laravel-5s-registrar-service/

Pluralization for JavaScript

2015-03-17T00:00:00Z

http://alistapart.com/article/pluralization-for-javascript

PHP 7 Feature Freeze

2015-04-05T00:00:00Z

https://philsturgeon.uk/php/2015/03/15/php-7-feature-freeze/

Laravel Forge - Hosting on AWS

2015-04-20T00:00:00Z

https://mattstauffer.co/blog/laravel-forge-hosting-on-aws

Strong SSL Security on nginx

2015-05-07T00:00:00Z

https://raymii.org/s/tutorials/Strong\_SSL\_Security\_On\_nginx.html

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box – Smashing Magazine

2015-05-11T00:00:00Z

http://www.smashingmagazine.com/2015/05/11/creating-responsive-shapes-with-clip-path/

Installation — Mockery

2015-05-11T00:00:00Z

http://docs.mockery.io/en/latest/getting\_started/installation.html

OCSP Stapling with HAProxy

2015-05-21T00:00:00Z

http://www.jinnko.org/2015/03/ocsp-stapling-with-haproxy.html

Nginx + WordPress + fastcgi_cache with conditional purging

2015-05-29T00:00:00Z

https://rtcamp.com/wordpress-nginx/tutorials/single-site/fastcgi-cache-with-purging/

On HTTP, Middleware, and PSR-7

2015-06-03T00:00:00Z

https://mwop.net/blog/2015-01-08-on-http-middleware-and-psr-7.html

How To Use Docker To Run PHPUnit Tests In Parallel

2015-06-05T00:00:00Z

http://marmelab.com/blog/2013/11/04/how-to-use-docker-to-run-phpunit-tests-in-parallel.html

Pre-compile your Handlebars templates

2015-06-10T00:00:00Z

http://danburzo.ro/grunt/chapters/handlebars/

PHP7 beta1 build process for Debian Wheezy

2015-07-24T00:00:00Z

Last weekend I decided to give PHP7 a try. Given it's beta, I had to compile from source. As I already run a stable package version, this guide doesn't cover the Debian packaging process. Instead we concentrate on installing PHP to an alternate directory.

Building PHP7 #

Firstly, install the build dependencies;

sudo apt-get -y build-dep php5
sudo apt-get -y install bison autoconf automake libtool pkg-config build-essential

I decided to download PHP from version control, and checkout the php-7.0.0beta1 tag;

git clone https://github.com/php/php-src.git
cd php-src/
git checkout php-7.0.0beta1
./buildconf --force

You have to force buildconf, as by default it believes itself to be a release package. Next, I saved my configure options to a shell script for replay;

./configure \
--prefix=/opt/php7 \
--enable-fpm \
--enable-mysqlnd \
--enable-opcache \
--with-mysqli=mysqlnd \
--with-pdo-mysql=mysqlnd \
--with-openssl \
--with-gd \
--with-iconv \
--with-curl \
--with-mcrypt \
--enable-mbstring \
--enable-intl \
--enable-memcache \
--enable-zip \
--with-zlib

This will compile PHP7 with some basic options, including php-fpm and php-mysqlnd. Finally, we can kick off the build process;

make

Installing PHP7 / PHP-FPM #

sudo make install

Now PHP7 should be installed to /opt/php7. We need to add PHP-FPM service management into Debian's init.d folder. PHP ships a init.d script which works fine, except you need to make a slight change;

sudo cp ./sapi/fpm/init.d.php-fpm /etc/init.d/php7-fpm
sudo chmod +x /etc/init.d/php7-fpm
sudo sed -e 's/# Provides:$\s*$php-fpm/# Provides:\1php7-fpm/' -i /etc/init.d/php7-fpm
sudo update-rc.d php7-fpm defaults

Debian will trip up on the LSB Provides: line if you already run the php5-fpm package version. We need to switch the name to something different (i.e. php7-fpm). Above we use sed to change this value, which allows the update-rc.d command to run successfully.

Finally, I copy the php.ini-production example from the source distribution;

cp ./php.ini-production /opt/php7/lib/php.ini

Installing PHP7 Extensions #

This is where it gets interesting; we configured PHP to install to the /opt/php7 prefix, which leaves the Debian packaged version untouched. This does however complicate matters, as configure will use the package version of php-config. You will need to download packages manually, and configure them using the correct php-config. I required the imagick extension, which hasn't yet got a PHP7 compatible version in PECL;

sudo apt-get -y install libmagick++-dev
git clone https://github.com/mkoppanen/imagick.git
cd imagick
git checkout phpseven
/opt/php7/bin/phpize
./configure --with-php-config=/opt/php7/bin/php-config
make
sudo make install

Finally, add the extension to php.ini;

sudo sh -c "echo extension=imagick.so >> /opt/php7/lib/php.ini"

It's worth noting that the PECL extensions I checked don't seem yet to have been updated to facilitate the changes in the underlying Zend Engine.

Cattle vs Kittens - On Cloud Platforms No One Hears the Kittens Dying

2015-07-29T00:00:00Z

http://etherealmind.com/cattle-vs-kittens-on-cloud-platforms-no-one-hears-the-kittens-dying/

Vagrant LAMP Stack with Debian Jessie

2015-08-17T00:00:00Z

I thought it was about time I chucked my Vagrant LAMP stack into VCM, before I lost or broke it. For those unfamiliar with Vagrant, go do some reading!

It's based upon a not-so-current version of Laravel Homestead. I switched it to the debian/jessie64 base box, and added an init shell script. The init script will run every time you run vagrant provision, so I have carefully crafted the script to ensure it will not break things when run multiple times.

You can configure individual VirtualHosts in the sites section, within the sites.yaml file. First of all, you can define a shared folder to map from your host machine into the guest;

folders:
- map: ~/Projects
to: /var/www/

The above maps the Projects folder in my desktop's "home" folder into debian at /var/www.

Configure VirtualHosts #

You can now map folders within the share to Apache VirtualHosts. Add one per line, such as;

sites:
- { map: projects.dev, to: "/var/www/projects/public" }
- { map: another.dev, to: "/var/www/another/public" }

Note that indentation is important here; the dashes are indented with four spaces, not a single tab character. The map keyword will map a domain to a folder from the Virtualbox shared folder (/var/www) to a VirtualHost definition in Apache. You will of course need to add your development domains to host file.

You can mount folders in the same way as you define sites (i.e. multiple shares).

Limitations #

Currently the configuration doesn't handle database provisioning or persistence. The persistence aspect can be solved with a plug-in; bootstraping database creation would need to be added to the site provisioning script. It's simple enough to navigate to 127.0.0.1:8000/adminer and create whatever databases are required.

Unit Testing - Introduction to PHPUnit

2015-10-13T00:00:00Z

https://jtreminio.com/2013/03/unit-testing-tutorial-introduction-to-phpunit/

Using Doctrine 2 in Zend Framework 2

2016-03-14T00:00:00Z

http://www.jasongrimes.org/2012/01/using-doctrine-2-in-zend-framework-2/

Comic Book FX Lettering with SVG Filters

2016-03-18T00:00:00Z

http://thenewcode.com/633/Boom-Wham-Pow-Comic-Book-FX-Lettering-with-SVG-Filters

Mockery: A Better Way

2016-03-18T00:00:00Z

http://code.tutsplus.com/tutorials/mockery-a-better-way--net-28097

Getting Started · Spring Boot with Docker

2016-03-30T00:00:00Z

https://spring.io/guides/gs/spring-boot-docker/

Paying Technical Debt - How To Rescue Legacy Code through Refactoring

2016-04-11T00:00:00Z

http://marketing.intracto.com/paying-technical-debt-how-to-rescue-legacy-code-through-refactoring

Faker is a PHP library that generates fake data for you

2016-04-12T00:00:00Z

https://github.com/fzaninotto/Faker

Thoughts on Continuous Delivery and Agile development.

2016-04-12T00:00:00Z

http://www.davefarley.net/

Readability / Html Content / Article Extractor & Web Scrapping library written in PHP

2016-04-13T00:00:00Z

https://github.com/scotteh/php-goose/

How to implement SRI in your build process

2016-04-20T00:00:00Z

http://hacks.mozilla.org/2016/04/how-to-implement-sri-into-your-build-process/

Set Up Zend Framework 2 With Behat And Twig

2016-04-22T00:00:00Z

http://neverstopbuilding.com/set-up-zend-framework-2-with-behat-and-twig

Building Domain Model

2016-05-04T00:00:00Z

http://docs.behat.org/en/v3.0/quick\_intro\_pt1.html

A library of Phing targets for Behat

2016-05-13T00:00:00Z

https://github.com/previousnext/phing-behat

Mock HTTP requests on the server side in your PHP unit tests

2016-05-13T00:00:00Z

https://github.com/InterNations/http-mock

Simple logging of ZF2 exceptions

2016-05-13T00:00:00Z

https://akrabat.com/simple-logging-of-zf2-exceptions/

Standalone Doctrine Migrations redux

2016-07-11T00:00:00Z

https://akrabat.com/standalone-doctrine-migrations-redux/

How to replace the "Action" helper in ZF 2

2016-07-28T00:00:00Z

http://www.michaelgallego.fr/blog/2012/10/06/how-to-replace-the-action-helper-in-zf-2-and-make-great-widgetized-content/

On Deprecating ServiceLocatorAware

2016-07-28T00:00:00Z

https://mwop.net/blog/2016-04-26-on-locators.html

Zend Framework 2 : Getting Closer with PluginManager

2016-07-28T00:00:00Z

https://samsonasik.wordpress.com/2014/01/29/zend-framework-2-getting-closer-with-pluginmanager/

Decoupling the Framework

2016-09-15T00:00:00Z

http://kristopherwilson.com/2013/11/27/decoupling-the-framework/

phpspec/prophecy: Highly opinionated mocking framework for PHP 5.3+

2016-10-19T00:00:00Z

https://github.com/phpspec/prophecy

Gatling Project, Stress Tool

2017-02-03T00:00:00Z

http://gatling.io/

Story Mapping, Visual Way of Building Product Backlog

2017-02-03T00:00:00Z

https://www.thoughtworks.com/insights/blog/story-mapping-visual-way-building-product-backlog

Cucumber Spring Integration

2017-02-17T00:00:00Z

http://www.baeldung.com/cucumber-spring-integration

Envoy: C++ L7 proxy and communication bus

2017-02-17T00:00:00Z

https://lyft.github.io/envoy/

Field Dependency Injection Considered Harmful

2017-02-17T00:00:00Z

http://vojtechruzicka.com/field-dependency-injection-considered-harmful/

Happy Releases with Maven and Bamboo

2017-02-17T00:00:00Z

http://marcobrandizi.info/mysite/node/146

Maven Versioning Strategy

2017-02-17T00:00:00Z

http://kylelieber.com/2012/06/maven-versioning-strategy/

Redirect stdout from child processes to supervisord

2017-02-17T00:00:00Z

http://veithen.github.io/2015/01/08/supervisord-redirecting-stdout.html

REST API testing with Cucumber

2017-02-17T00:00:00Z

http://www.baeldung.com/cucumber-rest-api-testing

Understanding The Tomcat Classpath

2017-02-17T00:00:00Z

https://www.mulesoft.com/tcat/tomcat-classpath

Docker error starting userland proxy

2017-09-05T00:00:00Z

https://github.com/docker/for-win/issues/573#issuecomment-301513210

An introduction to immutable infrastructure

2017-11-15T00:00:00Z

https://www.oreilly.com/ideas/an-introduction-to-immutable-infrastructure

Automating Server Setup with Ansible

2017-12-20T00:00:00Z

https://deliciousbrains.com/automating-server-setup-ansible/

We're http/2 and ipv6 compatible!

2018-02-01T00:00:00Z

Well, it seems that way anyway. Unfortunately both my residential broadband and mobile connections lack ipv6 connectivity, so I'm relying on the Qualys SSL Test and various other on-line tools to assure me of the ipv6 compatibility. http/2 was easy to test; firefox developer tools tells you which protocol was used for each downloaded asset. Please let me know if I have gotten something obviously wrong!

Enabling http/2 #

Enabling http/2 was quite simple, given that I recently upgraded to Debian 9 and Apache 2.4. I've got both apache and nginx in use in different debian-based environments. I managed to add AAAA records to the relevant domains, and add the necessary http/2 configuration changes on the morning commute. Obviously the main prerequisite to doing so is having your web server configured for TLS connectivity (h2 requires TLS). For my sites, I have chosen to deploy Let's Encrypt X3 signed certificates. I migrated this blog after the controversy with Startcom's offering.

Apache 2.4 #

For Apache, it was a case of enabling the mod_http2 and adding a line of configuration;

$ a2enmod http2
$ service apache2 restart

<VirtualHost localhost:443>
  Protocols h2 http/1.1
  […]
</VirtualHost>

Nginx 1.10 #

It's even easier with nginx; the web server already has the http/2 support module included. You simply have to have a TLS-enabled virtualhost, and add the following;

listen 443 ssl http2;
listen [::]:443 ssl http2;

I've not yet experimented with h2c for the TLS redirections on port 80 with either environment. That's a job for another day 😁. It's been a while since I posted here — a very long while. I've been concentrating on honing my craft and continuous improvement. I hope to start sharing some of my learning here once again.

… and we're DNSSEC signed too 👏

2018-02-02T00:00:00Z

So enabling DNSSEC was easier than I thought. All I had to do was transfer my domains to a new registrar! So i'm now registered with gandi.net — the transfer process was painless, and luckily I wasn't charged for the privilege. I think the most gruelling part was entering the IPS tag for my 10-year old domain, and having it disappear from the dashboard. The on-boarding process took ten minutes or less, but if felt like a lifetime.

In fairness, 123-reg have been mostly okay for the last 10 years. They never lost my domains or anything like that. Unfortunately they haven't evolved much in that time either. They still don't offer two factor authentication, which I dislike, but I've also previously tried and failed to get a DS record added by their support team. Gandi support both OTP and UTF devices, and there's a simple form to enter the DS public key. Oh and no security questions and answers!

I have hosted my DNS with cloudflare for a few years now, and all I had to do was copy-paste the public key. Behold!

> dig michaeloldroyd.co.uk +dnssec +multi

; <<>> DiG 9.10.3-P4-Debian <<>> michaeloldroyd.co.uk +dnssec +multi
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 28889
;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags: do; udp: 512
;; QUESTION SECTION:
;michaeloldroyd.co.uk. IN A

;; ANSWER SECTION:
michaeloldroyd.co.uk. 299 IN A 46.101.29.189
michaeloldroyd.co.uk. 299 IN RRSIG A 13 3 300 (
20180203225447 20180201205447 35273 michaeloldroyd.co.uk.
56Q8v9fn+7/I5dQ2PTbco22BubILf8bFlg2qaqkfzcR0
V53LT7G9K2LpYaWMjgQYwFrZYmBZG1wD5mB1Mgw+Dg== )

Now let's see if I lose all my domains, and I rue the day I transferred them in the name of shiny signed DNS records 🙄

Splitting Read & Writes using Replication Driver in Spring Boot

2018-02-17T00:00:00Z

My team has recently been working on a new Spring Boot application. One of the many best practice requirements—see non-functional requirements—is that we separate our read and write layers when utilising RDBMS (such as MySQL). As a newbie to this particular problem in Java, it seems that the easiest way is to use the official replication driver provided by the com.mysql package.

Note: We had some interesting issues with this method. I would not recommend ReplicationDriver for use in a spring boot application.

Enabling the Replication Driver #

In Spring this is as simple as adding the following to your properties file;

spring.datasource.driverClassName=com.mysql.jdbc.ReplicationDriver

The replicaton driver assumes that the credentials on the write layer are the same as those for the read layer. To use the slave connection, you can annotate any repository method with @Transactional like so;

@Transactional(readOnly = true)

Testing Replicated Reads #

To test the solution, I created a replicated cluster launched with docker compose and a pair of bitnami/mysql containers. This supports master-slave replication using environment variables. The following configuration worked;

version: '2'

Bootstrapping the database using flyway, the application should now work and have a replicated slave. What did we used to do without docker 😍? However, you won't be able to easily tell if you are reading from the master or the slave! I ended up bashing into each container, enabling query logging, and tailing the logs whilst firing CRUD requests at the API. I'm pretty sure it's possible through application logs, though, but this was definitive proof that the correct database layer was receiving the queries as we expect.

Final Thoughts #

This solution is far from ideal. The problem lies with the fact that the application and connection pool are unaware of the underlying separation. As far as the application is concerned all the connections are the same. The driver simply directs to one server or another based upon the readOnly flag above—the driver is handling the master / slave connections. You are unable to control the pool sizes between master and slave connections, which is handled automatically. If this functionality is desired then I would recommend a code-based solution.

Aspect Oriented Programming with AspectJ and Spring AOP

2018-07-31T00:00:00Z

Recently I have been experimenting with aspect oriented programming, and the ease with which you can handle cross-cutting concerns. It's an extremely powerful tool, allowing you to insert pointcuts throughout your code, and inject bytecode around code without polluting your source code. AspectJ provides a great deal of flexibility in the methods through which you can instrument your code.

For a live demo, take a look at the example repository over at github. The examples are using the dynamic proxy generation provided by spring. This library provides support for processing the AspectJ annotations as well as an xml-based DSL. Using this method, it is possible to easily collect arbitrary metrics, or inject logging. It can be achieved simply by adding an annotation, or a point-cut around a method.

Spring Aspect Examples #

We will define an aspect which defines two sets of advice. One instruments an execution, which in this case is bound to a specific method. You are able to use interfaces here, or concrete classes. The other applies instrumentation to an annotation. This allows you to attach an annotation to any spring-managed bean, and all calls to the advised methods will be instrumented. The following code demonstrates a spring @Aspect.


@Aspect
@Component
public class ExampleAspect {
    private Logger log;

    public ExampleAspect(Logger log) {
        this.log = log;
    }

    @Around("execution(* uk.co.michaeloldroyd.example.ExampleController.exampleRequest(..))")
    public Object aspectAroundMethod(ProceedingJoinPoint pjp) throws Throwable {
        log.info("Entering {}", pjp.getClass());
        Object result = pjp.proceed();
        log.info("After {}", pjp.getClass());
        return result;
    }

    @Around("@annotation(exampleAnnotation)")
    public Object aspectAroundAnnotation(ProceedingJoinPoint pjp, ExampleAnnotation exampleAnnotation) throws Throwable {
        log.info("Entering {}", pjp.getClass());
        Object result = pjp.proceed();
        log.info("After {}", pjp.getClass());
        return result;
    }
}

Annotation-based Aspect #

Component scanning the controller below, the call to SomeClassWithAspectedMethodCall.aspectedMethodCall() will be instrumented during object construction;


@Controller
class ExampleController {
  SomeClassWithAspectedMethodCall thing;
  public ExampleController(SomeClassWithAspectedMethodCall thing) {
    thing.aspectedMethodCall(); // This would work
  }
}

@Component
class SomeClassWithAspectedMethodCall {
  @ExampleAnnotation
  public boolean aspectedMethodCall() {
    return true;
  }
}

Execution-based Aspect #

Assuming a web endpoint is hit, the call from the servlet to the mapped method below would be instrumented;


@Component
class ExampleController {
  @RequestMapping("/")
  public void exampleRequest(SomeClassWithAspectedMethodCall thing) {
    return; // This would work
  }
}

Internal method calls #

Spring AOP support requires that that aspected instances are spring beans managed by the IoC container. Demonstrated below is a limitation to this approach;


@Component
class SomeComponent {
  public SomeComponent() {
    annotatedMethodCall(); // This won't work
  }
  @ExampleAnnotation
  public boolean annotatedMethodCall() {
    return true;
  }
}

As you can see from the examples, aspect oriented programming can provide clean way to decouple your cross-cutting concerns from implementation. I find this approach to be a great tool in any programmer's toolkit, and look forward to exploring AspectJ further.

Handling local certificates with mkcert

2018-08-13T00:00:00Z

https://github.com/FiloSottile/mkcert

Using Servlet Filter and Spring Web with Jetty

2018-08-20T00:00:00Z

I've been experimenting with servlet filter, along the same lines as my experimentation with aspects. Aspects are quite an interesting topic, however for the request instrumention task it seems that filters are much more suitable. Realising your approach is wrong and pivoting is, I feel, an important skill to learn in software development.

I must point out something up-front. In writing the example for this article, I came to the realisation that spring boot takes care of a lot. I decided to write these examples without using spring boot, in hope that I would learn more about how servlets and containers work — I wasn't disappointed. It handles all the complexities of servlet initialisation, filter registration, embedded servlet containers and so much more.

Registering Servlet Filters with Spring #

With Spring Boot, you may define an implementation of Filter as a @Bean. A Spring Boot application will—by default—register this as a servlet filter. Alternately, you can define a FilterRegistrationBean which allows you to modify the filter configuration, such as path matching and execution ordering. If you do both, spring seems to automatically register the FilterRegistrationBean over the Filter, giving you a great deal of flexibility.

@Bean
public FilterRegistrationBean getExampleFilter(ExampleServletFilter exampleServletFilter){
  FilterRegistrationBean registrationBean
    = new FilterRegistrationBean<>();
  registrationBean.setFilter(exampleServletFilter);
  registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
  return registrationBean;
}

With Spring Web, you must register a filter before a ContextLoaderListener initializes the context. The servlet context must become read-only after being initialised, except as dictated by the Servlet 3 specification section 4.4. WebApplicationInitializer::onStartup is typically used to initialize both the application and servlet contexts, so filters must be registered during this process. Normally, this would stop you from registering bean instances as filters from the spring IoC container. Spring provides DelegatingFilterProxy to allow spring-managed beans be used as filters, as demonstrated below;

DelegatingFilterProxy exampleServletFilter = new DelegatingFilterProxy("exampleServletFilter");
servletContext.addFilter("exampleServletFilter", exampleServletFilter)
  .addMappingForUrlPatterns(
    EnumSet.of(DispatcherType.REQUEST),
    true,
    "/example-filtered/*",
    "/example-exception/*"
  );

You must refer to your bean by a defined name, rather than it's Class<>. The initialization is the main difference. Your application code must set up any Filter up front, whereas with Spring Boot this can be wired up in configuration or external dependencies.

A note on Servlet Filter Ordering #

Spring Boot's FilterRegistrationBean and @Bean support explicit ordering. This is demonstrated above, using FilterRegistrationBean::setOrder, or alternately the @Order annotation. Servlet filters don't support ordering when using Java-based servlet configuration, which means that there's no explicit way to order filters in our example.

Designing robust and predictable APIs with idempotency

2019-04-24T00:00:00Z

https://stripe.com/en-US/blog/idempotency

Getting started with a Static Site Generator

2019-10-08T00:00:00Z

Finding a Framework #

There are a plethora of options when it comes to static site generators. There's even a website to find one best suited to you. A few options were considered, based on stumbling around and trying a few out;

Jekyll #

Jekyll was one of the first to come to mind. Sadly, if I need to learn a new programming language to make changes then that's a non-starter for me.

So that's a nope.

GatsbyJS #

Gatsby is feature rich and widely supported, with a plethora of community created plugins. It was very simple to get a starter blog up and running in a relatively short time, using the gatsby blog starter.

Unfortunately, I don't want to have to learn ReactJS and GraphQL to make basic changes. The sites generated are also JS heavy, and I have always been a progressive enhancement type.

So again, nope.

Orchid #

I looked for a toolchain which may map closer to my current skillset, in the Java / Maven / Groovy toolchains. This lead to Orchid, which is billed as a promising documentation framework and SSG. Orchid is written in Kotlin, and so supports any JDK language. The toolchain is based upon gradle.

Whilst it uses familiar technologies, there are not many community developed extensions or tutorials available. My love of learning aside, handcrafting every single feature myself is counter-productive to my goal. This project looks quite promising, and may well be revisited in the future.

But again, nope.

Eleventy (11ty) #

I stumbled across this framework whilst looking for help with Gatsby. It's JavaScript-based, and supports a lot of the same plug-ins that you would use for a Gatsby site.

The learning curve here is much lower, in my opinion, but you get much less to begin with. I may have to dust off my front-end a little sooner than I hoped 😁

Eleventy - Sorting

2019-10-18T00:00:00Z

I'm learning Eleventy. Coming from writing (mostly) strictly typed code, JS is really frustrating. It's possibly because I'm using VS Code instead of Intellij, but I don't know how method or type hinting could work. I'll try it out at some point.

I figured out a basic method to sort Eleventy collections;

// Sort with `Array.sort`
eleventyConfig.addCollection("sortedNav", function(collection) {
    return collection.getFilteredByTag("nav").sort(function(a, b) {
        return a.data.priority - b.data.priority;
    });
});

I'm using this to sort the nav collection, which is the main navigation at the top of the page. You simply add a frontmatter item named priority;

title: Some Page
tags:
- nav
priority: 1

Finally, you need to switch whatever code is loading the nav collection to use the new sortedNav collection instead;

<ul class="nav page-header__nav">
    {%- for nav in collections.sortedNav -%}
    <li class="nav-item{% if nav.url == page.url %} nav-item-active{% endif %}"><a href="{{ nav.url | url }}">{{ nav.data.navtitle }}</a></li>
    {%- endfor -%}
</ul>

Working with Gradle Modules

2019-10-21T00:00:00Z

Since my adventures with Java began, I have always used Maven as a build and dependency management tool. I had an awareness and even used gradle as a consumer, but never used it for anything but simple use-cases. Whilst building an example application the need arose to migrate a simple gradle app to a multi-module build.

Why use Gradle Modules? #

Moving to a modular design helps to keep your code cleaner. Whilst it can seem simpler to maintain a monolithic project, over time changing requirements and developers often lead to a tangle developing within a project. Modules can help maintain clear boundaries within a project, and to aid better understand the intentions of the design. Not only that, your dependencies become explicit rather than implicit.

Bootstraping Gradle Modules #

Declare dependency on sibling project #

// project/example-app/settings.gradle
rootProject.name = 'example-app'
import(':example-library')

When declaring the dependency on the library, we need to ensure that the library is compiled before attempting to compile our application. We declare this requirement using evaluationDependsOn.

// project/example-app/build.gradle
evaluationDependsOn(":example-library")

dependencies {
    compile project(path: ':example-library')
}

Deploying Eleventy to IPFS

2019-10-30T00:00:00Z

Today saw an milestone achievement made with this blog! We completed our first automated deployment 😎. Naturally the only way to celebrate such an achievement is to share how it was done.

IPFS? #

IPFS is a p2p network, which acts as a distributed file system. It is developed by protocol labs. It is one of several products that form part of the decentralized web movement.

Hosting Content on IPFS #

The initial choice was to host an IPFS node. It's rather simple to bootstrap your own node, and publish to it. You can even do so on your local machine. There is a caveat if you take this approach; your content is only available when your local machine is online and connected to the network. Therefore I chose to set up an IPFS daemon, running on a low cost VPS. I installed the go-ipfs binary and set up as a systemd service^[1] to keep it running.

The alternative is a third-party "pinning" service. There are a number available. They provide you with the IPFS hosting, and you upload your content using a web interface or API. I have now opted to switch from self-hosting to a service called Pinata. This means that you don't have to maintain an IPFS node, or pay a hosting bill to maintain it. If the site grows, you have to pay for storage.

Accessing IPFS Content #

IPFS is a file system. So how do our users gain access to the content that is being posted? In truth, I have no idea how people discover content published on IPFS alone. There is of course a search engine, but I wasn't able to find much of relevance on it at the time of writing.

Cloudflare IPFS gateway allows the site to operate from the domain root. This allows an IPFS deployed site to operate just like a regular website. The site only works on a top level domain, so it won't display properly on an IPFS HTTP gateway at present (try cloudflare-ipfs.com).

$ dig -t A alpha.oldr.uk
;; ANSWER SECTION:
alpha.oldr.uk.		68	IN	CNAME	cloudflare-ipfs.com.
cloudflare-ipfs.com.	300	IN	A	104.18.253.167
cloudflare-ipfs.com.	300	IN	A	104.18.254.167
cloudflare-ipfs.com.	300	IN	A	104.18.255.167
cloudflare-ipfs.com.	300	IN	A	104.18.64.168
cloudflare-ipfs.com.	300	IN	A	104.18.252.167

IPFS supports a mutable linking system called IPNS (Interplanetary Naming Service). This allows you to create a "permanent" link to a resource which can be changed.

Deploying to IPFS #

As mentioned above, you can host on your own node or pin directly (or both).

Using a Node #

Deployment involves uploading to an IPFS node (or cluster). Using the command-line, you can deploy a directory and save it to IPNS using the following commands;

# Assuming your site is in a folder called "site" in the current working directory
$ ipfs add -r site
added Qmb4MR6U6Vxk28xDJVc1vxpsGAKpH7Rwt7HF9aaxG9vTzD site/index.htm
added QmWEpPCPzNJMMeGgvFb4sNx642ZoJowBwAtSr3sTeYeN3v site
 22 B / 22 B [==============================================] 100.00%

Now it's possible to publish your pin to your IPFS node;

$ ipfs name publish QmWEpPCPzNJMMeGgvFb4sNx642ZoJowBwAtSr3sTeYeN3v
Published to QmdND4XcS6aYcTZxogeJMmVBxqDar4H1wh7AKwf2E1SYzn: /ipfs/QmWEpPCPzNJMMeGgvFb4sNx642ZoJowBwAtSr3sTeYeN3v

Which you can possibly view on the cloudflare gateway;

cloudflare-ipfs.com/ipns/QmdND4XcS6aYcTZxogeJMmVBxqDar4H1wh7AKwf2E1SYzn

Using a Pinning Service #

A popular tool for automated pinning is ipfs-deploy. It is a JavaScript zero-configuration tool, which will attempt to locate your site, pin it and update your DNS provider;

# Install ipfs globally
$ npm -g install ipfs-deploy

# then deploy your generated site
$ npx ipfs-deploy -p pinata site -d cloudflare

The documentation for the tool is pretty straight forward, but I plan on covering deployment in more detailed in a follow-up.

IPNS #

IPNS in turn supports a technology called DNSLink. This feature allows you to create a DNS TXT record linking to an IPFS URL, allowing IPNS to link a domain to a IPFS resource.

$ dig -t TXT _dnslink.alpha.oldr.uk
;; ANSWER SECTION:
_dnslink.alpha.oldr.uk.	120	IN	TXT	"dnslink=/ipfs/QmZ6R943z1QhNaeLrAM4QjftDRLgsyNBQwSGZe32AQfHYC"

Allows you to access a resource through an IPFS gateway like this;

cloudflare-ipfs.com/ipns/alpha.oldr.uk

Which you can try here. It may or may not load, depending on how distributed the current hash is in the network.

Why I won't be using IPFS yet #

Initial loading of the site after deployment is too slow in my opinion. This is due to the need to distribute and cache through the network. Sadly the HTTP gateway doesn't serve old content, so as soon as the dnslink record is updated the site can be inaccessible for a while afterward. The above is not a huge problem if you are using /ipfs links directly.

You may also want to provide a mutable IPNS pointer to keep a consistent URL between deployments. This is currently slow to the point of being unusable. With DNSLink, you can either point to an immutable IPFS hash or a mutable IPNS hash.

I'm considering a second deployment target. This could allow the site to work both on IPFS gateway services and classical hosting.

Please don't use root, set up a dedicated service user] ↩︎

Gitlab CI from Scratch

2019-11-05T00:00:00Z

I only recently discovered how useful Gitlab CI is. Gitlab is an open source Github competitor. I've used it quite a lot over the years. After signing up for a gitlab.com account, you gain access to 2000 free build minutes per month for private projects. You can also run your own private CI runner if you are so inclined.

Creating a Basic CI Build #

We're going to configure Gitlab to create our Eleventy static site, and deploy it to Gitlab pages. Create a .gitlab-ci.yml^[1] file in the project's root.

image: "node:12"

before_script:
  - npm install

site:
  script:
    - npx eleventy
  artifacts:
    paths:
      - _site

This will instruct the CI runner to obtain the latest node 12 docker image. before_script is a setup stage to run before all other tasks — in this case we are runing npm install, after which the steps in the site task will execute. artifacts defines a path which will be persisted from the build result, and can be downloaded from the UI.

Deploying to Gitlab Pages #

The build process now includes the command to build eleventy. That was easy 😃. If all you need is to build the artifact, then you are done. Our stated goal is deployment to Gitlab Pages, so we have a little more work to do. You will need to enable pages for your project.

image: "node:12"

before_script:
  - npm install

pages:
	stage: deploy
  environment:
    name: production
    url: https://oldr.uk
  script:
    - npx eleventy --output=public
  cache:
    paths:
      - node_modules/
  artifacts:
    paths:
      - public
  only:
    - master

There is quite a lot going on here.

We have changed our build task to pages, which is specifically used by Gitlab Pages. We have updated the output directory to be public, because pages requires it. Eleventy output directory is easily configurable using --output=public, and we can then just change the artifact directory to public.

Resource Caching #

cache:
    paths:
      - node_modules/

We have also enabled caching. This aims to reduce the build time, as the node_modules folder will be loaded from previous builds—and updated if necessary—and re-cached after a successful build.

Pipeline filter #

only:
    - master

You can define one of more branches for which the pipeline task will execute. Our build will only run if the change was committed to the master branch.

Bring Your Own Domain #

environment:
    name: production
    url: https://oldr.uk

Finally, we can configure Gitlab pages to work with your own domain, supporting TLS. You will need to configure your domain in the CI script; You will also need to configure your DNS records for your domain.

Have fun!

Whats a yaml? ↩︎

Using POSIX Access Control Lists

2019-11-28T00:00:00Z

For most unix-based filesystems, file permissions are baked into the filesystem itself. Each file has an owner, a group-level and public access levels, with the ability to restrict read, write and execute for each level. This is sufficient flexibility for most use-cases.

There might be some situations where you would like a separate user or group to maintain a different level of access to certain parts of the filesystem.

On debian, install the command-line tools;

$ apt-get install facl

Imaginary convoluted scenario! #

Now you have access to apply ACLs. Enter our first actor paula, who works on a shared environment with steve. She has some important files that she wishes to allow steve full access, without providing access to all of her other files. Here are the top-level folder contents;

$ ls -alh
total 20K
drwxr-xr-x  3 paula paula 4.0K Nov 25 17:59 .
drwxr-xr-x 16 paula paula 4.0K Nov 25 10:05 ..
drwxr-xr-x  2 paula paula 4.0K Nov 25 10:05 .dat
-rw-r--r--  1 paula paula  131 Nov 25 10:05 dat.json
-rw-r--r--  1 paula paula   64 Nov 25 17:59 index.html

We can check the current ACL settings of the current directory;

$ getfacl .
# file: .
# owner: paula
# group: paula
user::rwx
group::r-x
other::r-x

The directory has no ACLs configured. paula would like steve to have write access to everything. She don't want steve to be able to read or modify other files she owns, so ACLs could be an appropriate choice in this case;

$ setfacl -Rm u:steve:rwx,d:u:steve:rwx .
$ getfacl .
# file: .
# owner: paula
# group: paula
user::rwx
user:steve:rwx
group::r-x
mask::rwx
other::r-x

As you can now see, user:steve:rwx now has rwx permissions on the directory.

-R requests permissions be applied recursively
-m appends this ACL to existing ACLs, as opposed to replacing.
u:steve:rwx applies the ACL to all existing files ^[1]
d:u:steve:rwx applies the default ACL for new files and folders added.
. is the path, which in this case is the current working directory.

Steve is now able to modify and create new files within Paula's directory.

ACL Masking #

It's worth noting that an ACL may never exceed the access level granted to the actual owner and group;

$ getfacl test.md
# file: test.md
# owner: paula
# group: paula
user::rw-
user:steve:rwx                  #effective:rw-
group::r-x                      #effective:r--
mask::rw-
other::r--

So as you can see above, although the ACL user:steve:rwx grants rwx, the user default grant provides only rw- as demonstrated by the #effective:rw-.

Thanks, StackOverflow ↩︎

Install Tools in Alpine Linux

2019-12-25T00:00:00Z

Alpine Linux is a lightweight, secure linux distribution. It's very popular for container-based application deployments.

$ apk add [package]

Useful Packages #

I'll possibly update this page if it's useful. Ive been hopping into our dev cluster to test connectivity recently. You can install packages to containers using the apk command. You would normally do so during the creation of the container image.

`telnet` #

$ apk add busybox-extras

Run tools using the busybox-extras command, e.g.

$ busybox-extras telnet localhost 8080

`curl` #

$ apk add curl

`host` #

$ apk add bind-tools

`mysql` #

$ apk add mysql-client

I think this one actually installs mariadb-client

Goodbye Wordpress

2020-06-30T00:00:00Z

After nearly a decade, I have made the switch from WordPress to a static site generator. When I first fired up my personal blog, I had such high hopes for the possibilities it afforded. My hope is that this reboot breathes new life into my technical blogging.

Background #

I could build a CMS in PHP, or so I imagined. Then one day in 2011, I decided WordPress would be good enough for me. For a time, it was. I managed to optimise the death out of it over the years; adding reverse proxy caching, backend caching, opcode caching. I managed to get sub-200ms responses for the entire site. Sadly that stuff is all a nightmare to manage. Varnish needs memory for cache storage, and didn't support TLS connections^[1]. That necessitated another reverse-proxy to terminate TLS, which was initially Pound and later HAProxy. These are all worthwhile technologies to learn. I've used a lot of the knowledge I learned at work. For a simple technical blog though, it's way outside of the realms of simple. After ripping most of that out, we are left with mostly sub-second latency — which I was okay with.

The next problem is with WordPress itself. It's a piece of relatively complex software which executes on a server. Whatever your opinions on the underlying codebase, this is a risk. At least it is maintained, and the updates can be completely automated. Plugins however are not always so well supported, and sometimes carry security risks of their own. I am lucky that my blog was never caught up in any automated exploits — to my knowledge.

Finally—and I feel most importantly—I didn't enjoy the experience of editing in the WordPress UI. It has changed somewhat over the years, including the switch to the Gutenberg page editor. I think I used it a couple of times in the end. I just want to be able to write some words about some code; a new research topic. Markdown is perfect for this pursuit, in my humble opinion.

Compromises #

Naturally, moving from a dynamically generated CMS to a statically generated one exposes some limitations. You can overcome these using client-side rendering, or just don't do the things in the first place. I mean, did anybody really care what Steam games I was playing or music I listened to at any given time? I very much doubt it, other than maybe the people selling the games or streaming the music.

IPv6 Support ✅ #

Gitlab Pages doesn't support IPv6^[2]. Though to be fair, neither does Github Pages. The site employs Cloudflare for DNS; after enabling their proxy, the site is now available to end-users on both IPv4 and IPv6 networks. I may have to keep an eye on caching issues with pages though now, for the time being.

Content management ❗️ #

Moving to a static generator, the whole system relies on a CI/CD pipeline to generate and deploy new content to the site. There's no CMS interface to edit content, it's all Markdown in a git repository. This presents a barrier to content publishing; whilst welcomed in some respects, I consider it a bit inconvenient. Thankfully there is a W3C standard for that. I am researching methods to implement a micropub endpoint, which will allow a standards-based approach to content management. More on this soon, hopefully.

Search ❗️ #

I have yet to implement a client-side search solution for the blog. Of course, the site is public and should maintain rankings in SERPs from the old website. I put a lot of effort into the migration of content, particularly in maintaining archive-content permalink structure.

A potential solution comes in the way of Lunr. It's a simplistic weighted search based upon Solr, and relies on a pre-generated index. I plan on adding a search result page to incorporate this, as the index may become quite heavy.

Bookmark Favicon Support ❗️ #

One of the small things which I put loads of effort into; Dynamically loading and caching favicons from link-type posts. These would be included anywhere the link post was displayed, such as the link widget or Links category. It was a nice touch, in my opinion. I'm looking at options for how this functionality could be incorporated in a performance-tolerant manner. Possibly using a file-based database like sqlite.

Examples ❗️ #

Some of my older posts included PHP examples which were deployed to a directory on the host I shut down yesterday. These will now be broken. Soz m8. I may push them to a repository somewhere...

Comments / Pingback / Trackback / Webmention ❗️ #

I've dropped comments from the site. They have not been migrated, and they are not planned to make a comeback in the near future. Whilst I appreciate feedback, I'll find a better way to incorporate it in a more indieweb fashion. None of the above are incorporated into the workflow at this point.

To-dos #

I've set up a hit-list in the form of Gitlab issues, the top of which are Accessibility and Metadata. This was released as an MVP, once I thought that I had done just enough to ensure that content was migrated well enough to be passable.

Accessibility changes; whilst it's quite simple in nature, I need to undertake an accessibility review to ensure that my content is accessible to all.
Metadata improvements; I haven't added twitter card or opengraph tags, amongst other things that I probably should have.
Mobile / desktop improvements; the site was built mobile-first, but very little has been done to ensure an optimal experience other than spot checks.

I'm quite happy with the results so far, and there is so much that could be done. I'm happy with where it is right now, which is great progress.

It does now ↩︎
but it is close ↩︎

Webmention & WebSub

2020-07-09T08:00:00Z

Webmention Support #

I've added webmention support through webmention.io. The service is configured to receive webmention requests and store them. They won't yet be displayed in any way, but I will at least be aware of any conversations around the content I publish from compatible web citizens.

How could we store and implement webmention into the 11ty workflow? As this site is statically generated, it doesn't have a database. I guess commentary could be progressively enhanced, or we could consider some form of datastore. Another option is json data files. If each post is contained within it's own folder, you can drop in a file with the name of the folder;

.
└── posts
    └── a-great-post
        ├── a-great-post.json
        └── index.md

We can then populate this file with some webmention data;

{
    "webmentions": [
        {
            […]
        }
    ]
}

The payload would need to be atomic to avoid performance concerns. I'm not entirely sure how you go about removing content yet, other than deleting from the JSON file. Also not sure how we go about populating the webmention data into the data file. This may well be re-imagined once things become clearer.

Limited WebSub Support #

I have added support for WebSub through the superfeedr.com service. This is limited as I had to hard-code update notifications on the RSS feeds within the CI pipeline. This was added by modifying the feed output;

<feed xmlns="http://www.w3.org/2005/Atom">
	<!--[…]-->
    <link href="[https://oldruk.superfeedr.com/](https://oldruk.superfeedr.com/)" rel="hub" />

It also required updates to the GitLab CI pipeline;

websub:
  stage: notify
  script: 
    - curl -d 'hub.mode=publish&hub.url=https://www.michaeloldroyd.co.uk/feed/feed.xml' https://oldruk.superfeedr.com/

This allows subscribers to receive update notifications in near real-time, rather than polling the feed.

Implementing and Testing Delayed Processing in Java

2020-09-30T00:00:00Z

A common pattern for event driven programs is a delay and retry mechanism. A recent problem I encountered involved delayed processing of messages from a kafka stream. The approach explored was through use of ScheduledExecutorService, which is one of the parts of Java's concurrency package. One concrete implementation is ScheduledThreadPoolExecutor. This implementation manages a thread pool, as the name suggests.

To start, you will need an instance of the ScheduledThreadPoolExecutor for use in your application. You set the minimum idle threads for the thread pool during construction.

public ScheduledExecutorService scheduledThreadPoolExecutor() {
    return new ScheduledThreadPoolExecutor(4);
}

Approaching the problem from a test-driven perspective meant finding a method to reliably test that the processing was in fact delayed. This can be achieved using a CountDownLatch.

class BasicScheduledThreadExecutorTest {
    private static final long DELAY_TIME = 1_000_000L;

    ScheduledExecutorService scheduledThreadPoolExecutor = new ScheduledThreadPoolExecutor(1);

    @Test
    void testADelayedExecution() throws InterruptedException {
        CountDownLatch countDownLatch = new CountDownLatch(1);

        scheduledThreadPoolExecutor.schedule(
                countDownLatch::countDown,
                DELAY_TIME,
                TimeUnit.NANOSECONDS
        );

        LocalDateTime start = LocalDateTime.now();
        countDownLatch.await(2L, TimeUnit.SECONDS);
        LocalDateTime finish = LocalDateTime.now();

        long duration = Duration.between(start, finish).toNanos();

        MatcherAssert.assertThat(duration, Matchers.greaterThanOrEqualTo(DELAY_TIME));
        System.out.println(duration);
    }
}

Essentially, the test will wait until the countdown has been exceeded or the latch times out. If it takes longer than 2 seconds the latch throws an InterruptedException, failing the test.

Problems with conversions #

The above code works well, and provides a fairly stable outcome. When I was experimenting with millisecond durations, I was seeing results which were almost always failing. It seemed like the execution of the task was supposedly always earlier than the delay time defined in the test;

java.lang.AssertionError: 
Expected: a value equal to or greater than <1000L>
     but: <996L> was less than <1000L>

Using nanoseconds fixed this problem. Just something to bear in mind 😉.

Test Double with Mockito #

Obviously this is a toy example. You would likely distribute the executor within your production code, and trigger countDownLatch.countDown() with a test double. If you use Mockito, you can use a spy for this purpose. The syntax is a bit fiddly;

doAnswer((Answer<Void>) invocation -> {
    countDownLatch.countDown();
    return null;
}).when(someMockedInterface).someMethodThatGetsCalled();

Essentially, our test double invokes the latch when it is invoked as part of the test harness instead of the production implementation.

Example Project #

Example code for this article can be found over at gitlab.com

Adding Route53 Inbound Resolver to MacOS

2023-08-27T20:00:00Z

I've been working on creating an MSK Serverless (kafka) cluster. The serverless product is relatively new, but the documentation for it is confusing; the operating model of "serverless" is fundamentally different from MSK proper. Both are part of the same product family, so when searching it's difficult to separate the two. As you would expect with a "serverless" product, the whole software stack needed to run kafka is abstracted away and managed by AWS. It all gets deployed into a managed VPC that you can't access, and a bootstrap broker is exposed to a number of your VPCs using VPC endpoints.

I could not get my head around how the routing worked. It turned out to be much simpler than I had blown it up to be. The bootstrap host and all the broker hostnames will resolve within the VPCs that the cluster is attached to. The hostnames are subdomains of c3.kafka-serverless.{region}.amazonaws.com. If you have multiple linked networks, then the broker hostnames won't resolve because their DNS records are private. In this configuration, you have to expose your VPC DNS to the other networks, and configure those other networks or devices to forward requests to your resolver. The product that enables this is Route 53 inbound resolver. There's also an outbound resolver which allows forwarding DNS requests from your VPC to other DNS resolvers within other networks.

You can link VPCs and networks together using lots of different strategies. How you link your networks and VPCs together is out of the scope of this article; the assumption is that you have completed the work to make your VPC accessible to your device somehow. You can find the private IP address of your bootstrap broker and connect to it from your machine (check your VPC Endpoints). Finally, this also assumes you have set up the Route 53 inbound resolvers for your VPC.

It took a bit of digging and luck to find a solution that didn't require installing dnsmasq or configuring bind. I really didn't want to screw around with the DNS on my machine more than I had to. The system configuration utility scutil allows you to change your network configuration, including to add additional resolvers. The utility documentation isn't particularly easy to find or digest, but I found an example that was close enough to get it to do what I needed it to do.

Assuming you have deployed resolvers in three subnets in us-east-1, and the IP addresses assigned to them are 192.1.0.1, 192.2.0.1 and 192.3.0.1:

sudo esutil
> open
> d.init
> d.add ServerAddresses * 192.1.0.1 192.2.0.1 192.3.0.1
> d.add SupplementalMatchDomains * kafka-serverless.us-east-1.amazonaws.com
> set State:/Network/Service/kafka-serverless.us-east-1.amazonaws.com/DNS
> quit

You should then be able to see the resolver listed when you run esutil --dns. You should also be able to resolve the bootstrap host, which is the only hostname that AWS gives you, along with all the kafka brokers that form the cluster. I've not yet attempted to add multiple resolvers (i.e. multiple VPC + resolver + cluster combinations), but the name of the key needs to be unique. You could change the above command to VPC+region, whatever makes it clear.

set State:/Network/Service/vpc-0123456789.us-west-2/DNS

You may also wish to add multiple space-separated SupplementalMatchDomains to map more service endpoints if you have other use-cases to cover.

Technically Feasible - Posts Feed

New site design live

Record and Wipe CDRW discs via CLI

Record ISO to Disc #

Blank a CDRW #

National No Smoking Day...

Templated 410 Error Pages in WordPress

Override core widget output in WordPress

Speeding up your page load times

Friday Update #1

Brief History of Fonts on the Web

Fonts in Images #

Fonts in Flash #

Fonts in JavaScript #

CSS3 Font Face Support #

Why CSS Font Embedding is the Future #

WordPress Post Formats made easy

Filter a category from your WordPress Blog

Playing with Incarna in EVE Online

Interface #

Tutorials #

Performance #

Interaction Issues #

Incarna on the Duality Test Server #

File validation with jQuery and HTML5

File type validation (via file extension) #

File size validation #

Understanding SEF routing for Joomla Components

Routing Modes #

Integrating with Menu Items #

Why is this important? #

Special Variables #

Outputting component routes #

Quantity vs Quality

A basic date_diff for PHP 5.2

Optimising WordPress: Caching

Client Cache #

Output Caching #

Page Optimisation #

Looking Forward #

Disabling Apache Server Signature

Blueberry Slider with slideToggle workaround

Installing XHProf on Debian Squeeze

API Callback URLs and HTTP Authentication

Responsive Layout for Wordpress

Implementing the Responsive Layout Elements #

Implementing the Markup in a Sidebar #

Implementing for Navigation #

Next Steps #

Client Showcase - Qualitick Ltd - Juicy Media

Twitter Widget for Wordpress

Integrating OAuth #

Authorising against your account #

A Word of Caution #

UI Considerations #

Web intents #

Download the OAuth Twitter Widget for WordPress #

Installable Webapps: Extend the Sandbox | Boris Smus

RECESS - Twitter's CSS Hinter

The slippery slope | 90 Percent Of Everything

Essential considerations for crafting quality media queries

Make the most of ARIA landmark roles

Understanding the Zend Framework 2 event manager – Un blog sur tout et rien

Varnish Edge Side Includes and Wordpress

Flatstrap by Littlesparkvt.com

Fluid Width YouTube Videos

Please stop embedding Bootstrap classes in your HTML!

squashing commits with rebase

Developing Backbone.js Applications

git - the simple guide - no deep shit!

Learn Backbone.js Completely

Quick Tip: Avoid FOUT by Adding a Web Font Preloader | Webdesigntuts+

Backbone.js able to do rest and localstorage?

Pure

Responsive Data Table Roundup

What is a router? - Backbone.js

Zombies! RUN! (Managing Page Transitions In Backbone Apps)

Are you a sucker? — How to use the internet

how to blog about code and give zero fucks

AirPrint on Debian GNU/Linux