Fublo is a web development company based in London, England. We are code specialists and you're reading news about our business and programming learnings.
We’ve been playing a lot with our Fublo hosting in March and April. Previously we’ve hosted both Fublo and client WordPress sites on Rackspace Cloud Sites (RSC). However we’ve left their service and started experimenting with others for numerous reasons.
This has been the status of our main site fublo.net over the last two months:
Up until the end of February 2012: WordPress driven and running on RSC.
At the beginning of April, we rebuilt the site on a Django / Mezzanine backend and transferred everything to DjangoEurope.
These are the response times we’ve experienced during the last three months - thanks to a free account over on Pingdom.
Things we noticed:
RSC has a competitive response time. However, this does not show the whole picture - we found the full loadtimes on average much greater than 5,000ms and often suffered from unlogged “no nodes” issues and timed out page loads.
Webfusion appears to be very slow with a ~2,500ms response time. But again this does not give the whole picture - we found once their servers responded, our site loaded almost instantly and this gave a much better experience than RSC.
Although we’ve migrated onto a Django-based site with the move to DjangoEurope, we’ve had the best of both RSC and Webfusion worlds - a very quick response time and the addition of quick page load after that response is received.
Hopefully you’ll find these numbers helpful in your hosting decisions and in addition we’ll have more numbers, especially about loadtimes, to share soon.
Writing about the most frequent sources of infections, Tony writes:
By far, one of the worst culprits of infections today is the incredible number of Soup Kitchen servers. The lack of awareness and understanding of the potentials of cross-site contamination is jaw dropping.
“Soup kitchen servers” - I think there’s a better phrase for it, but the concept refers to running multiple versions of a website on a single server or hosting account. Those versions would then have different functions - development, testing environment and live public site - and almost always have different levels of security, maturity of code, backup processes. The main issue is that one site can contaminate another - leading to nightmares.
The “soup kitchen server” idea is something that we’re completely against at Fublo - we’ve seen enough projects where dev sites have been left open, often in a completely different and less polished state than the live site. I can even recall using Google to find a whole list of a web-development company’s development servers with just a crafted query - all live and open and listed on search engines.
During our time working with WordPress we’re lucky enough to have built up a great development structure that includes private servers in our offices, code repositories, site back-ups and publishing scripts. In addition, we work ensure we harden our clients’ WordPress installs before we deploy our code and put their sites live.
Finally I’m going to repeat the final thought from the Sucuri post here - it’s worth sharing directly…
The WordPress team is doing their part to ensure your security on the web, can you say the same thing?
At Fublo, we work on engineering the best websites possible for all sorts of businesses. Our attention to detail, quality code and intelligent solutions set us apart from the crowd.
Update April 2012: Thanks for checking out this post, developer positions are now closed.
Top quality WordPress themes are very useful for those times when you are looking for a theme for a new site or project. You may also be looking to refresh an existing project and a theme is a quick way of bringing a breath of fresh air to said project, too.
WordPress users know that when searching for a theme there are a multitude of options available to them. There are thousands of themes are available, both free and paid-for, premium ones. We’re interested in finding out what you look for in a theme?
What is the driving factor that makes you say “That’s definitely the one, I need that theme for my project” ?
Is it as simple as the theme’s colour scheme? Or its advanced functionality? Do you require an options panel where you can customise the look and feel of the project? Or is it something completely different?
Share your ideas for what you look for in a WordPress theme using the comments box below please.
Last week, Disqus published a blog post about Pseudonyms and their perceived effects on the volume and quality of comments received by the Disqus commenting system. The infographic presented in the post is rather interesting.
Disqus’s findings are that the volume of comments from “Real identities” is far less than those with Pseudonyms - the quality values seem to be about the same.
The real identity problem
IMO the real “problem” is that Disqus, and many other services, have not broken the connection between Authentication and profile. Why should it be that users on Disqus that sign in with Facebook should have to use that same identity to comment?
What about a type of account authorised with a Facebook ID, with the option of a pseudonym? That would create the benefit of easy sign in, combined with the perceived value of pseudonyms for commenting and it still works towards the “one person - one account” goal too banded around when this gets discussed.
Of course, with a system like Disqus there may be some issues under the hood that mean that a strategy like this may never be possible.
WordPress connections with Facebook
This week we’ve been planning a chunk of Fublo client work that will use Facebook for sign in to a client WordPress driven site. The designed code will populate the Member’s profile page with their Facebook information, however, the critical difference to Disqus’s system is that we will then allow the new members to change their name on the site if they desire… They will be able to pick their own pseudonym and also select how they wish that name to be published on the site.
Over all, we hope that that unpicking of the connection between Facebook for authentication and profile details will mean that the new members that join the site will be happy contributors with whatever name they choose, or leave as it is, to best reflect their online identity.
We’d love to hear your thoughts and comments and hopefully will also be able to share some metrics back here from that client project if the client allows!
If you have not heard of Tilt, this is how Mozilla’s article describes it.
Tilt is a Firefox addon that lets you visualize any web page in 3D.
You can download it via the Tilt Firefox addon. It allows you to see exactly what your site would look like if elements’ z-indexes actually changed their positions in 3D space. So you can see what is overlapping what and why things might be going wrong.
I ran our site through it and got a nice result with the logo. You can actually see the element hanging over the edge of the other elements.
So next time you are wondering just how your page is coming together, boot up this tool and have a look around. Or just run it over some other sites to see how they do things.
I went to access a private WordPress install yesterday, which is hosted on a Linux box in our office, and got a nasty surprise. The name resolution took around 15 seconds to complete with every request.
After a bit of digging we found this great article on all the new problems introduced in Lion that effect the hosts file. This article mentions that having multiple hosts per line in /etc/hosts can be problematic.
Sure enough, after changing my hosts file to use a new line for every entry, everything sped up back to its normal level. It really is quite simple to fix once you know what is wrong:
Another change to note is that Apple have changed the position in which the hosts file is used in a request. Now the actual DNS request is made before the hosts file check. So if you have a hosts file entry that is an existing URL it will not be overwritten by the hosts file.
As this year draws to a close, we’ve compiled a list of our favourite tools, websites, tips and tricks that we’ve used over the past 12 months.
A typical zeitgeist would include things from 2011 only, where as our list may contain things that have been around before, but have had a particular impact on our work and business throughout the year along with some fun ones we’ve been playing around with.
You can click on the titles, and images to go to the corresponding site for each items. In no particular order, here we go:
We’re in the business of designing and developing websites built on WordPress and so it was a natural choice to include the mighty WP in our list. Now on version 3.3 it’s grown from strength to strength and continues to help us make great sites for our clients.
This plugin allows you to create many-to-many relationships between posts of any type: post, page, custom posts types and is incredibly powerful for linking content on both the front and back end of WordPress.
WordPress is already technically pretty good for SEO in its “out of the box” state. Yoast’s plugin builds upon this, allowing you to write better content, improve the already existing SEO and optimise your WordPress site and its content.
If you’ve changed the sizes of images in your Media settings then you want to update the thumbnails that already exist on your site, right? The Regenerate Thumbnails plugin does this with ease! You can either regenerate the thumbnails for all image uploads, individual image uploads, or specific multiple image uploads.
Forms, the bane of many a designer/developer? We were tasked with creating some complex forms for the front side of a site in a recent project for a client. Having been recommended Gravity Forms, there was no looking back as it makes the task of form-building so easy. It’s a commercial plugin but seriously justifies its price tag.
GitHub has been a major player in enhancing our teamwork this year and it’s online project hosting has enabled us to work smoother, quicker and deploy sites with ease – in short, it’s been a godsend.
We’ve been using Nathan Smith’s 960 framework for quite a while now and although some may argue that as screen resolutions increase in size it’s time to move up to a larger framework, we still endeavour to use this in the majority of our projects. Simple, easy to dive in and get to grips with and still powerful enough to make great looking websites.
StripThis! is a Javascript/HTML/CSS3 engine that can create a simple comic from a set of structured sentences that, starting from a database of words, are natural as much as possible.
That means that you don’t need to code and draw anything particular for putting together a comic strip with StripThis!, except - obviously - if you’re going to extend the word database.
The comic is composed on-the-fly using HTML elements, CSS transformations, custom fonts combined together starting from the specified script and that’s why your webcomic is actually made with web. Since the comic is not rasterized, a lot of funny things can be done, like instant translations of your comic in different languages, thanks to Google Translate APIs (read “funny translated”) and tooltips on balloons and characters.
Subtle Patterns is a site and tool that does exactly what it says on the tin. Providing high quality, subtle patterns for use in your web projects, it’s an ever-expanding archive of some very tasteful and useful patterns which can be downloaded as image files or for the Photoshop people, as a pattern file, ready to add to your arsenal of tools.
LESS extends CSS with dynamic behaviour such as variables, mixins, operations and functions. You can run LESS client-side and also on the server side. We’ve been using LESS to speed up our front end work and it’s proving to be a valuable tool so far.
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. The creators researched the differences between default browser styles in order to precisely target only the styles that need normalizing. There’s a demo here.
Wunderlist is a beautiful looking, simple to use task management app that works across iOS, Android, OS X, Windows and web app. It’s incredibly easy to set up new daily tasks that sync across your devices and tools to collaborate with other people. Winner!
We’ve been fans of the Hype Machine since it started and this year was no different. Continuing to index some of the best, hottest tracks from the blogosphere, they expanded their offering to include great apps for iOS and Android and back in June we were the featured blog on their radio show, where we spoke about our Drum and Bass coverage, electronic music and how Friedmylittlebrain came to life.
Using a CSS gradient builder that has a very similar UI/interface to the one in Photoshop means you can focus on getting the right gradient for your design. We recently used this with our fancy tags for WordPress too.
What do you think to our list and what were you favourite tools, sites and web apps this year – pop a comment in the box below!
As you may have noticed, we recently upgraded this blog’s theme. During the transition we improved our tagging system and used a design from Orman Clark as visual inspiration. The goal was to create intuitive tags that looked great in new browsers and degraded gracefully in older ones.
How it looks
Here is how our 100% CSS tags look in all of the main browsers.
The IE section descends from IE9 to IE6 and looks blurry and strangely sized because of the screen resolution used to take the screen shots. The only thing that was impossible to recreate without images was the point on the end of the tag, everything else went brilliantly.
Two states
We’ve created two tag styles:
Active state - An anchor (<a>) with a class of tag is orange and links to the archive for that tag.
Dormant state - A span with a class of tag is grey and is for information purposes only.
We’ve used the dormant state when the viewed post is the only member of the tag - there’s no point clicking through to an archive that just contains the post you’re already looking at.
WordPress tag function
The following “fancy tag” function allows you to output the tags of your WordPress posts in the format to be used with the tag styles above. Tags with only one post come out as dormant spans, all the others are outputted as active links.
functions.php
CSS
Okay, there is quite a bit of this, mainly because all of those pesky vendor prefixes. The bulk of the code is made up of the gradient which was generated by the Ultimate CSS Gradient Generator (amazing tool). There are base styles for all spans and anchors with a class of ‘tag’. The ‘tag’ class adds the alignment, layout, borders and highlights. We then have individual colour styles for spans and anchors. Only the anchor has a hover style. We also utilise the :before pseudo selector to add the knock through circle.
You can change the colour of anything by overriding styles, obviously. You may want to change the knock through colour depending on the tags background to make it look more realistic. You can do that with the following selector: a.tag:before, span.tag:before { color: #XXXXXX; }
tags.css
See it in action
I have created a little example for you to play with on jsFiddle. Have a browse around and see what you can do with it.
Questions and comments always welcome - and here are the tags for this post… Enjoy!
On our latest client project, we created a Gravity Form which allowed logged in users to edit their public profiles, all done on the public side of the WordPress site, without visiting /wp-admin.
This post outlines the way in which we stitched all the code together to make use of Gravity Forms. It’s not a definitive solution, but hopefully will help some people that need profile editing functionality inside their theme. The components are:
A page template to hold the profile editing form and populate it with the existing profile information.
A Gravity form with the required fields set up and named correctly.
An additional hook and function call to process the received data and save it to the logged in use profile.
The code below updates the normal WP user’s first, last and display names, plus stores the additional data in a user meta field called “fublo_profile”, this can all be adapted as required.
Hook and function call
The following is the code that can be added to the functions file, or other included file in your theme. You will almost certainly need to edit this to fit with your requirements:
Adjust the ID number of your form on line 3.
Edit the fields in your form on line 13.
functions.php
Page template
The page template checks that the user is logged in, grabs their data and uses it to populate the form. All the data is stored in $fublo_current_user_data which is then passed to the form when it’s embedded in the template.
You should create a page in your wp-admin and set its template as “Edit profile” once this code is in place.
page-edit-profile.php
Gravity form
The Gravity form itself is now the simple bit. You should be able to see how it is loaded by the page template and how its fields are processed by the hook in the functions above.
You can use this export file which matches the function call above so it should fire the profile data back into the logged in user’s record. Profile edit form export data (XML file) - do right click, save as.
You will want to edit the confirmation action - one option is to point the user back to their newly updated profile page with a message saying its updated.
All done
That’s it - hopefully you’ll have a good starter profile editing form that you can expand and fit to your requirements. All the code can be viewed in this gist. Comments and questions always welcome.
