The Caveena Solutions Blog

Sometimes well-meaning security tweaks to your website can actually inhibit, or even outright kill, intended functionality. It is imperative web developers understand what they are trying to achieve and the different ways to get there.

Read more »

A lot about building websites involves using third-party code in your own projects. Whether that means an existing WordPress theme to build a Child Theme, a library like jQuery or one of many Lightbox modules standing on the shoulder of giants helps to get your work out there faster.

But sometimes you’ll be in a situation that momentarily leaves you scratching your head wondering “Now where did that come from?” only to realize it originated from code you did not write.

Thank goodness for Search and Replace. Some OSes have this feature built into their command-line but folks like me prefer having a GUI. You are probably capable enough to do an Internet Search and find your own but being on Windows my preference currently lies with TextCrawler.

textcrawler

It supports searching folders & subfolder, Regular Expressions, and File Filters. That’s pretty much all I need but it also sports other functions including Fuzzy Search, Batch Commands and inserting content either before or after your search string.

Nifty.

To test your CSS font stacks. Seriously.

So maybe you use @font-face or maybe you link to an external font like this:

<!-- Linking to Source Sans Pro hosted at Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic,700italic' rel='stylesheet' type='text/css'>

And your CSS has code like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you type that font name correctly? Are you sure? Why not test it like this:

body {
  font-family: "Source Sans Pro", SourceSansPro-Regular, "Comic Sans MS", Helvetica, Arial, 'Liberation Sans', sans-serif;
}

Did you catch that? I added “Comic Sans MS” to the font stack. So if your intended font doesn’t show up, the visually distinct Comic Sans MS will alerting you to the problem.

Just remember to remove it from your production code. You wouldn’t want to be embarrassed, would you?

Or, you know, you could just type it into your website inspector of choice to double-check the font stack works. Just saying…

When I was studying in the National University of Singapore our lecturers were eager to raise us not merely as “Programmers” but as Software Architects. Where the Programmer lays bricks, the Software Architect is thinking about higher-level design: where do those walls go in the first place?

In recent years, something similar has been happening with CSS — people started thinking about CSS architecture to ensure that styles were reusable and the website itself could scale. I don’t know who kicked off the discussion but my first exposure to a formalized, higher-level technique of writing CSS was Object Oriented CSS (OOCSS). The name threw many off and I found myself comparing it to the Object Oriented Programming Methodology from my days learning Java.

Read more »

We’ve heard it before: Sans-serif fonts are more legible on screens blah blah blah.

I always got excited anytime a new free Sans-serif typeface was released that contained what I consider the required four variations: Regular/Roman, Bold, Italics and Bold Italics. And thanks to @font-face allowing font embeds on websites, collection sites such as Font Squirrel and hosting solutions including Google Fonts, the web designer is more spoiled for choice than ever before.

I present below four Sans-serif fonts provided by four different sources that, erm, kinda look the same. All contain my required four variants and they all even have thin versions of themselves. Best of all, they are free for use on websites.

Open Sans

Open Sans

Source Sans Pro

Source Sans Pro

Fira Sans

Fira Sans

Clear Sans

Clear Sans

Serif VS Sans-serif: no longer a question of legibility?

Interestingly, with the advent of monitors possessing higher pixel densities, usability proponent and aficionado Jakob Nielsen has revisited and somewhat overturned the common wisdom that Sans-serif fonts are more legible. Truth is they were back when monitors weren’t so capable. On moderns screens, when it comes to choosing between Sans-serif and Serif fonts for legibility:

there’s no strong usability guideline in favor of using one or the other, so you can make the choice based on other considerations — such as branding or the mood communicated by a particular typographical style.

Well if that don’t just beat all.

I’m not a huge fan of Under Construction style landing pages — I rank them just below websites that make me Click here to enter — but that doesn’t mean we can’t have some fun building them (and perhaps learn a thing or two).

Read more »

Congratulations to Royal Brunei Airlines for receiving the 2014 REBRAND 100 Distinction for their rebranding efforts! I like the new look but then again I’ve always been a fan of simplicity & clean designs.

Read more »

Yet another major social network changes its user interface. Torches are on your right, pitchforks on your left.

In all seriousness though, the redesign is predominantly cosmetic to unify the experience over different devices. And although it adopts influences from Flat Design it doesn’t fully embrace it — *meh* fonts and all.

I always appreciate a simpler, cleaner design. So no arguments from me.

I ran a test update on a client’s WordPress website using our test environment and was surprised to see that updating to WordPress 3.8.1 killed all permalinks. Not good. The website used WooCommerce and after some investigation I managed to find a work-around: completely delete WooCommerce and re-install it. This will require you to reconfigure WooCommerce in the back-end Administration. None of my products appeared to have been touched so that’s a plus.

As of writing, WooCommerce is officially compatible with WordPress up to 3.7.1 with 4 people saying the plugin is broken in 3.8.1. That ought to be sufficient warning but the support forum only has a couple complaints. One thread even identified the issue as a conflict with Yoast SEO.

I figure there must have been some conflict with the page routing because not only were WooCommerce pages throwing a 404 but ordinary WordPress pages were as well. When I fell back on WordPress’ default hyperlink structure, everything was hunky-dory. Since Yoast SEO also has options affecting permalink structure, I wouldn’t be surprised if this and plugins like it would further complicate the issue.

If your WordPress website is using permalinks and you find that updating to 3.8.1 causes pages to throw 404 errors, I hope this helps you.

I’ve long felt that designs you see around Brunei are dated. Heck, I’m one to talk — I only recently flattened the design of this here website! So I think the Ministry of Health should be applauded for the design of their posters promoting Bru-HIMS and the Health Promotion Centre.

Read more »