Skip to content

Wordpress

A peek under the hood of the website revamp

Under the hood

_Image by riversidetransport under a CC-BY-NC-SA license

I am not a web developer. My HTML is rudimentary at best and you should be very afraid when I start poking at CSS and Javascript. Though things might be a bit prettier than they were, Iā€™m going to take this opportunity to highlight the tools I used to give my website a makeover.

Homepage

For 5 years, I left up a ā€œComing Soonā€ webpage with some links to Twitter, LinkedIn, etc. I am the definition of lazy!

BootstrapFor anyone looking to quickly get a webpage up, be it for a homepage or a project page for a personal project, I highly recommend Bootstrap. Originally created by Twitter to help them standardize, Twitter later made Bootstrap open source and itā€™s been widely adopted and extended. Bootstrap features the latest in web development ā€“ itā€™s grid based, responsive and uses a combination of HTML, CSS and Javascript to help you quickly build web pages.

JetstrapBeing even lazier, I used Jetstrap, a web based interface to build Bootstrap pages. Log in using your favorite service, pick from a couple of default page templates, customize them and Jestrap will take it from there. Pressing download, Jetstrap will give you the HTML, CSS and Javascript in one zip file. Quickly edit the text in the HTML files and youā€™re ready for deployment.

Bootswatch has created a number of themes for Bootstrap. The homepage is using the Spacelab theme. Pick a theme, save the CSS file, replace the Bootstrap CSS with the new CSS file, and done! Couldnā€™t be easier.

The social media icons are by Fairhead Creative. They use a combination of SVG icons and CSS to display and are available on Github.

Blog

WordpressWordPress has been powering this blog for almost 10 years. I started with the original b2/cafelog ten years ago, migrating to WordPress months later when WordPress was first released.

The blog theme is a WordPress Twitter Bootstrap theme by 320press. It features sub-themes built on the Bootswatch themes for Bootstrap and Iā€™m using the Spacelabs theme, similar to the homepage. The theme doesnā€™t feature a header image that Iā€™ve been able to find, so Iā€™ve turned off the hero feature, which allows you to get to the blog content faster. The theme, like the homepage, is responsive, so if youā€™re viewing on a tablet or a mobile phone, the page will scale to the device youā€™re viewing it on.

WordPress plugins that are being used:

Tools

GithubGithub is the magic that ties it all together. I try and do everything in Git using source control, making it easier to do development from any computer I might be using. Iā€™ve been using Git for a few years, but I barely scratch the surface with what Git can do. You can find my repositories on Github.

Iā€™ve been a very happy Linode customer for a few years. If youā€™re in the market for a new webhost, Linodeā€™s Linux virtual private servers are the way to go.

Last, and definitely not least, all of the code was written and edited in Panicā€™s Coda 2 web editor. A brilliant text / code editor, with a built-in FTP client, terminal, version control support and more, it makes it all too easy.

Blog updates

Iā€™m in the process of changing servers at my current host, and the last website I had to do was this one. Over the course of last weekend, I decided to finish it, and did a mysqldump of my WordPress database, in addition to updating to the latest version to avoid a security flaw. I about had a heart attack when I saw my database (not gzipped) was 3.3 gigabytes. Sure, Iā€™ve been blogging for 5 years (more on that later this month), but 3.3GB? My wife explained to me how it was possible, but I was still a bit stunned.

Iā€™ve had a database plugin, WP-DBManager, installed for some time to automate my database backup. It adds a Database tab to your WordPress admin panel. In addition to backing up your database, it can optimize, repair or drop tables. The default page it pulls up is a list of all tables in your database, with columns showing records, data usage, index usage, and overhead.

Sure enough, an old plugin I havenā€™t used in a long time, EZ Scrobbler for managing my Last.fm feed, had itā€™s cache table in the database taking up 2.9GB. I used WP-DBManagerā€™s tab to empty the table, and my database is down to a more manageable 300 MB. Iā€™m glad I now use Last.fmā€™s widget to show recent tracks played.

I just wish I had remembered to check that before I spent 10 hours this weekend watching 3 gigs transfer over the ā€˜net.

Lovin' Feedburner

About 6 months ago, I burned my blogā€™s RSS feed to Feedburner. I was using WP-Shortstat as a WordPress plugin, and the RSS feed subscribers didnā€™t look realistic (and they werenā€™t!) as it was over reporting on the number of subscribers. Iā€™ve been happy with Feedburner since, and it provided a very simple view to my feedā€™s statistics, and there was a plugin to view the statistics right in my WordPress dashboard.

When I was syndicated on Planet Foresight, I created a Linux feed on Feedburner so those users werenā€™t subject to my entertainment and copyright rants, and later I burned a feed of the Foresight Linux Newsletter as well.

Since then, I continue to learn more about Feedburner and its features, in no particular order:

  • Feedburner takes over Steve Smithā€™s WordPress plugin for Feedburner stats, renames it Feedsmith.
  • Rick @ Feedburner recaps why partial feeds are a bad thing. I couldnā€™t agree more ā€“ Iā€™m too lazy to follow links out of my feedreader just because a site wants hits. Iā€™ll usually end up unsubscribing after a while unless the site has really, really good content, like TV Squad.
  • It might be fun to create a Headline Animator ā€“ if I could do a non-cheesy looking one, might be a good way to market the Foresight newsletter
  • I canā€™t believe I didnā€™t know about FeedFlares until today ā€“ what a great concept. Add little tags to the end of your posts, such as ā€œadd to del.icio.usā€, ā€œemail authorā€ etc. See the whole list here. Iā€™ve already updated my feed. And the have an open FeedFlare API to create your own.

I also use Feedburner as tool combined with the Foresight Wiki based on Confluence. Confluence gives you the ability to build a feed right from the dashboard, but itā€™s really only useful for tracking a whole space, and not independent pages.

The first feed I built was the Foresight Linux Newsletter. Using Confluence, I created a RSS 2 feed based on any news post in the Newsletter space. Confluence gave me me a feed that looks like this:

<br /> http://issues.foresightlinux.org/confluence/createrssfeed.action?types=blogpost&statuses=created<br /> &spaces=newsletter&labelString=&rssType=rss2&maxResults=10&timeSpan=180<br /> &publicFeed=true&title=Foresight+Linux+Newsletter+RSS+Feed

Not necessarily human readable, or easy for a subscribe to type in to their feedreader, though possible using cut and paste.

I took that feed, and burned it in Feedburner, and got this:

http://feeds.feedburner.com/foresightnewsletter

Much better, and now I have statistics tracking for our subscribers (Which we need more of!)

The second feed I created in Confluence, was for the Package Request page on the Wiki. On this page, users can request software packages to be added to the Foresight repository, so they can install them via Conary, instead of building and compiling the software by hand.

Confluence doesnā€™t give you an option, at least that I could find, to build a feed for a specific page. First, I gave the the wiki page a specific label, ā€œpackage-requestsā€. I then went to the Feed Builder, and chose to build a feed in the Developer space, with a label ā€œpackage-requestsā€ and to show all new edits and comments on the page. Confluence gave me the feed:

http://issues.foresightlinux.org/confluence/createrssfeed.action?types=page&types=comment<br /> &statuses=created&statuses=modified&spaces=kitchen&labelString=package-requests<br /> &rssType=rss2&maxResults=10&timeSpan=5&publicFeed=true&title=Foresight+Linux+Package+Requests+RSS+Feed<br />

I burned that in Feedburner and came up with:

http://feeds.feedburner.com/fl-packagerequests

So if you want to add that to your feedreader, you will see all requests and comments for new packages, as well as edits to the page when someone marks a package as added to the repository.

Iā€™m really starting to dig the power of Feedburner.

Website Updates

I updated the blog to WordPress 2.1 last night, which has a lots of little updates. The upgrade went perfectly, and my theme and plugins seem to work without any errors.

I finally found the option in WordPress to update the feed to full posts instead of the summaries, which makes the blog much more friendly to RSS readers. A bonus effect is that it fixes the Daily Links post to post in bullet summaries in feedreaders instead of mashing the post in to one paragraph.

In addition, I switched feed management to Feedburner last month, so there should be one clean feed for everyone who subscribes, and gives me some nice statistics on whoā€™s reading.

If anything appears out of the ordinary, let me know!

Flock

Iā€™ve downloaded Flock the new browser for Web 2.0 based on Firefox.

More to come ā€“ itā€™s very interesting but I donā€™t think I quite have the hang of it yet ā€“ though I am posting this blog post from Flock!

Spam Karma 2

I continue to be impressed with Spam Karma 2 for WordPress since I installed in a couple weeks ago.

I was getting about 50 spam comments a day in the blog, and Spam Karma 2 has cut that down to nothing. Zero. Zilch. I think Iā€™ve had to moderate 3 comments so far it wasnā€™t sure of (which were spam), but thatā€™s nothing compared to the daily maintenance hell I used to go through in deleting comments.

Kudos to the developers.

Theme Upgraded

Upgraded to the latest and greatest K2 theme ā€“ and now comes with the Vader style. Back to a black theme, yay!

Even better, comes with AJAX commenting. Sweet.

Mike and Chris are writing some rockinā€™ code.

Ubuntu Blog

I was taking a peek at WordPress.com (more on that in a minute) and it showed one of the top hosted blogs there is the Ubuntu weblog.

It already has some nice tips and tricks posted (like the bash command append). Iā€™ll definitely be adding that to my blogroll.

WordPress.com is similar to Movable Type ā€“ hosted blog solution for users who donā€™t want or have a server to host their own blog on.

Misc. Stuff

Iā€™m back from California, and getting caught up on misc. stuff.

Iā€™ve updated the theme to K2 Alpha 3, added a new Flickr badge, and still donā€™t care that it doesnā€™t work in Internet Explorer. Go get Firefox already.

I mentioned the Burn It Club a while back. The summer Burn It session is now on if any of my three readers want to do it with me. I have to say Iā€™m struggling with the theme, but I really want to participate.

I have a ton of stuff do this weekend, more as my muse wills later.