I looked at Posterous but I don't like the idea of putting my posts on a service which could, potentially, disappear from the face of the Web overnight. I'm sure it isn't the case, but it's just that niggling doubt that makes me uncomfortable. Octopress, on the other hand, gives me the power to self host and distribute copies of my source in a flexible manner. I've been recently teaching myself Ruby so Octopress had a certain appeal; I also love Markdown and the combination of the two made it a win win for me. I've tweaked it a little (I’m not a fan of how rubypants encodes characters instead of just using UTF-8) and it now obeys my commands.
I think the most appealing feature is that I keep my posts in Markdown and I am able to publish to a variety of platforms (not just Github) with ease. Meaning that I can progress from Github at any time but still keep absolute control of the content that I produce.
]]>I just wanted to vouch for all those great free services out there that make your life better, easier, smoother, less stressful and amazing.
Two such services are Zoneedit and GitHub
Obviously Firesheep has been big news this last week or so. Somebody is sitting in a pub right now waiting for you to access Facebook, Twitter or your webmail account so that they can get in and play with all the shinies. Scary stuff; and yet most news outlets haven't really discussed the issue in detail, they haven't discussed where the issue will commonly take place (public places like pubs, cafes, restaurants, libraries with open wifi), and they don't really discuss how SSL on a few major scapegoats will actually solve a worldwide security issue.
I mean, come on! This is the biggest problem; just because someone has an extension that no longer works doesn't mean that somebody else doesn't just have some custom build of Wireshark running that does far more than steal cookies for your favourite social sites. We're talking about the potential for identity theft by people getting far more than a feed of your recent photos and activities. Some sites may encrypt your password on submit but other forums won't. And what are the chances that somebody on an open hotspot doesn't have the same password for a couple of other sites?
Also, people may now be smugly sitting on an open hotspot not going on Twitter and Facebook. But their favourite news site has a like button on it. Is that a problem? Has anyone asked or addressed this in a news article too?
The geek solution is to have a VPN or a SSH socks proxy and to always use it as an interface between open sites; the firefox buff solution is to get one of the many extensions that forces SSL for sites that allow it (and it isn't all of them;) the scapegoat solution is to tell big social networking sites to go SSL so that it's no longer a problem (they should be using SSL anyway the lazy slackers.
None of these ideas really close up the ultimate truth that not everyone gets security. Not everyone will be able to buy a VPN for that rare occasion that they're on an open hotspot; the fact that VPNs are a bloody pain to set up just compounds the problem. Very few know what SSH is.
The real solution needs to have all of these plus: Closed public wifi. There are a couple of ways with various issues for security but will offer a modicum of privacy for people without the ability to take security measures by themselves. For starters, cafes and libraries could simply stick the network key on the notice board for visitors. Change it daily and keep it inside for patrons only. Alternatively, for situations where the business has a rented device, have 2 hotspots. The first hotspot is open and, when you connect, it takes your browser to a login page with instructions and today's network key. Then you disconnect, sign in to the closed wifi, and use the key you just pasted to your clipboard.
Not really. Computer security is about an ongoing awareness of the fact that everyone wants your bank details and identity. But reporting on an issue and calling social networking sites to use SSL is just scapegoating and avoiding a real world problem with security. Get it sorted pubs, clubs and cafes.
I just posted an article on the Bakery called Minify and gzip plugin for your Javascript. It’s regarding one of my latest Github projects called minify and is up there waiting to be dropped into any of your Cake applications.
Blog post is a work in progress while I actually do the research. Posting it here now anyway because I’m at the stage that I want to get it up on Github and so it allows me to link to some form of Readme here that will give you a clue to what’s going on…
A small jQuery plugin–called Media Queries–caught my attention around 2 months ago that I decided would be really useful for creating adaptive layouts for various desktop (and mobile) resolutions. I liked the plugin a lot but I didn’t always want to stick jQuery in every site I created that I’d want to support some sort of adaptive layout.
7 late nights later, I rolled up my sleeves and started hacking away. The script was a mishmash of DOM functions and jQuery DOM functions so I spent some time learning the script and rewriting it. At this stage, I’d like to thank Paul Irish for reminding me that there was nothing wrong in seeing how others did it, in his video on 10 Things I Learned from the jQuery Source, as I had a look at some other sources to pull together some ideas that would make the conversion a little smoother. It really shocked me that I didn’t actually have to do any debugging when I finally ran it in a page the first time. Of course I ran it in Safari 5 and it didn’t actually need to run most of the code. I digress
Debugging had to start—for me—in IE6. I had this big vision that my name would be blasted into the stars and that I would become the new big name on Twitter, Digg and all my favourite bloggers out there. And then that bubble burst. Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip.
To elaborate, allow me to show you a brief snippet of output:
BODY{ PADDING-LEFT: 0px; PADDING-TOP: 0px; PADDING-RIGHT: 0px; PADDING-BOTTOM: 0px }
@media Unknown{P{ DISPLAY: none }}Parrrrrrrrppppppphhhhhhhsplplpplplpllplplplpip
It’s pretty clear that IE6 has absolutely no clue what to do with your sexy CSS. Please note that this issue only really presents itself when you use inline @media declarations. If you keep all your CSS in separate files, as I do currently, then you’re probably fine; it’s a world of pain otherwise as IE6 has issues with @media.
At least I can get it to function in older versions of Firefox and Safari… Right? No. Gecko 1.9.1 represents the birth of inline @media support in Firefox. However, there are issues with older versions of Firefox. I couldn’t actually get a copy of Firefox 1.0 running on the virtual machine I had so I decided to jump ahead to 1.5 (I hope you don’t mind.)
Either way it wouldn’t have mattered. Firefox 1.5 (Gecko 1.8.1ish) and below don’t really have much love for complex media attributes on the link element. So, 2 days in to my little research project, and I already don’t really want to continue rewriting this little script. I’ve been coding while I research so I’ve already got some functions in place to do some sexy work on inline @media queries. It’s just a shame that the various browsers remove it all from the DOM or mingle it into uselessness.
More sexy blogness to come once I’ve done some more on that day job thing…
There have been a number of articles recently talking about how to use media queries of late by Hicks, Colly and others; it has even had some air time on Dan Benjamin's 5by5 network. I remember playing with the idea of it during a stint of research on Apple's website so, when I spotted what Jon Hicks managed to get out of it, I had to give it a try.
NB. This is hopefully going to be an article that gets a number of redrafts over the next few weeks until it's perfect. I'm using my freelance site as the testing ground for it so dig in to my site to see. I would like some help from device owners who can test some of these layouts on their iPads/Androids/etc. Tweet me if you want to offer any help.
As part of trying to be a tidier coder I wanted to look at splitting this all out in to multiple CSS files so as to keep it easier to update and manage. My first draft process went like this:
At the end of it I had 4 gigantic CSS files with various declarations of varying complexity, !important at the end of a lot of lines, many resets for paddings and I was really unhappy with it. Ultimately, to give visitors a helping hand with their smaller devices (or legacy browsers) you'd need to add large portions of CSS just to hack it down to render well. I decided a progressive enhancement made more sense than graceful degradation.
Before taking it any further we need to make sure we have <meta name="viewport" content="width=device-width"> in the <head> or else live testing is going to produce strange results on an iPhone/iPod Touch.
Next you need to decide upon a range of display widths for your layout. It will very much depend entirely upon the particular design, as to whether you need to offer more than 2 or 3 varieties. I wanted to use 4 columns at a higher resolution and allow it to reduce sensibly for netbooks, iPads, and mobiles respectively.
At this stage I've only been able to research Apple devices so anyone able to offer me some help with perfecting this with Android and other mobile browsers (@ppk wink wink) will really be of great help.
To get this to work correctly, you need to have the base stylesheet with the bare minimum needed for a plain layout and then have additional stylesheets to enhance the layout as display width increases:
<body id="home"><div id="main">
<header id="header"><h1>Foo</h1></header>
<nav id="menu">
<ul><li><a href="#">Lorem</a><li><a href="#">Lorem</a><li><a href="#">Lorem</a><li><a href="#">Lorem</a></ul>
</nav>
<section id="showcase">
<article><h2>Lorem</h2><p>Lorem ipsum</article>
<article><h2>Lorem</h2><p>Lorem ipsum</article>
<article><h2>Lorem</h2><p>Lorem ipsum</article>
</section>
<div id="content">
<div class="c_primary"></div>
<div class="c_ancillary"></div>
</div>
<div id="sidebar">
<div class="s_primary"></div>
<div class="s_ancillary"></div>
</div>
</div></body>
</html>
This is your default stylesheet. A simple one column layout with some standard colours. Centre aligned header and navigation but other than that it's pretty plain. I've used media="all" but it's unnecessary.
I regret naming this 640.css as that is the upper bound before the next stylesheet activates but I'll continue like this for now and fix it soon.
This one activates at 480 pixels in width. I chose 480 pixels as it's the width of the iPhone in landscape mode. There are two media query statements here because the iPhone device width doesn't alter when the orientation is altered but it does recognise orientation.
#sidebar {
display: table-cell;
width: 240px !important;
}
#content {
display: table-cell;
border-collapse: collapse;
border-spacing: 0px;
}
This turns the 2 divs (with display:block) into a 2 column layout with the right hand sidebar only taking up 240px
Now we cater for netbook/iPad owners. At this stage we aren't catering to the smaller mobile devices so we can get away with one media statement. This will apply further enhancements to the CSS until the display width exceeds 1024 pixels.
#menu ul {
text-align: left;
}
header#header h1 {
text-align: left;
}
#showcase {
display: table;
border-collapse: separate;
border-spacing: 24px;
padding: 0;
}
#showcase > article {
display: table-cell;
width: 33%;
position: relative;
text-align: left;
}
#showcase > article h2 {
display: block;
}
#showcase p {
display: block;
}
#showcase > article h2 a {
padding: 0;
}
This time we've kept the main content layout at 2 columns but created a 3 column layout for the web app showcase at the top of the site. As the layout is wide enough I've unhidden the paragraphs that were hidden (display:none) at the lower resolutions. T'would be contestable as a waste of bandwidth but I find it makes sense to reduce the page clutter. Visitors on smaller devices could have clicked/pushed their way through to the pages that they link to.
This is the last stage. Big screen layout. I add all the declarations to create a 4 column layout
#main {
position: relative;
}
#menu ul {
position: absolute;
font-size: 200%;
right: 12px;
top: 0;
}
#menu a {
padding: 2em 12px 0.5em;
}
#menu a:hover {
padding-top: 1.75em;
border-top: 0.25em solid #1f8199;
}
#sidebar {
width: 480px !important;
}
#sidebar div.s_primary, #sidebar div.s_ancillary {
display: table-cell;
width: 50%;
padding: 0 12px 0 0;
margin: 0;
}
#content div.c_primary, #content div.c_ancillary {
display: table-cell;
width: 50%;
padding: 0 12px 0 0;
margin: 0;
}
Here I've made the 4 divs (c_primary, c_ancillary, s_primary, s_ancillary) into table cells and thereby created the final 4 column layout. The fact that this will only truly work within the more advanced-CSS3 capable browsers means that I don't need to worry about hacks. In fact IE6-IE8 are still only displaying the default.css; you can remedy the IE6-IE8 situation quite easily with some conditional comments at the final stages of your project.
This is a piece about thinking out of the box and how, sometimes, you really do need to get an outsider to look in to a system. I have learnt to take some serious input from my work colleagues and also to listen to advice written on various blogs and web articles
For a long time I have considered my opinion to be well-read and I have become enflamed by some very well written articles. Luckily for me, I am the type to hide such emotion until such time as I can construct a response coherently.
One of my projects, a while back, was the redesign of my website. My personal blog was in need of a major overhaul. Both the interior and the exterior needed redesigning and stream-lining.
Most of my internals were a leftover from a very early implementation of the web-site and, to be completely honest, were designed without any thought about good coding practice or room for expansion. So, for the first time in a while, I opened up our company programming policy and set about redesigning.
Throughout my early learning stage within web design, I have held on to the ideal that font sizes were something to be decided by the web designer. If someone couldn't read properly any text then it would surely be because they didn't have a good enough browser. How naïve I was to think like this. A tiny sacrifice it is to make, that the visitor can view your information with ease. After a while of thinking and creating like this, you realise that it isn't really a sacrifice but a good method. What really fascinates me is how, once you begin producing designs based upon the visitors' font size, you can really free how you design layouts. Fluid styles truly become more than just fluid.
Ultimately, we all have to begin thinking outside of the limits of our own minds and allow a little flexibility. Design for your audience; if you don't know who your audience is, be flexible.
For a few months I’ve been getting headaches at weekends; they’ll usually manifest in the morning but occasionally continue throughout the day. I thought I was just getting old but after a while I realised that it was because I’d started taking a drug at work that I didn’t take at home over the weekend. I was getting caffeine withdrawal at weekends because I didn’t have the habitual routine at home that I had 'in the office.'
After deciding that I’d had enough, I went cold turkey. And let me tell you that it was hardcore. At first, I did some in-depth research (Google) on the subject of detoxing and found it all pretty scary. Terms like mind fog, drowsiness, brain blur, severe headaches, severe fatigue and the rest gave me pause for thought: Should I bother with this or should I just maintain this addiction for the rest of my life?
No way; I wanted out. I hate the idea of a dependency on something to make me who I am. I don’t mind the idea of having a perk like that but the dependency is a turnoff.
A couple of hours later I let my wife know and then strapped myself down (not really) and just stopped with tea, coffee, chocolate, cola, Sprite, 7up, Lucozade and quite a lot more. It’s absolutely insane how much stuff they stick caffeine into; I actually struggled to find a non-alcoholic non-caffeine drink that I actually felt comfortable drinking when I went to the pub a few days later.
The next morning I woke up preparing for a horrendous headache and was thoroughly overjoyed when I felt fine. 3 weeks of migraines my shoe! I must confess to being a little tired and grumpy in the morning but I kept my nerves in check and got through it.
I woke up with the worst headache ever and that wasn’t the worst of it. The headache paled into insignificance alongside what I’ll forever think of as the brain fog. The brain fog is a range of symptoms like an inability to focus on a conversation; an overwhelming magnetic attraction applied to your eyes from the ground when attempting to make eye contact; memory loss and short term memory trimmed down to minutes; and a general feeling that your ears no longer understand your native language.
This was my lowest day; I nearly went to the kitchen to make the strongest brew ever. I resisted, went to buy some ibuprofen and got through the day
Day 3 was surprising. I still had a headache but the fog already began to dissipate. Partially thanks to some pain relief, I was able to actually do some work. Result.
Throughout the next 24 days I talked a lot about how I was going to enjoy a nice brew at the end of it all. As the days progressed I lost the desire to have that trophy cuppa. In fact, at day 28 (last Saturday) I didn’t bother. I wish that I could say more about caffeine cold turkey but the mind fog was the easiest thing I ever beat.
I don’t think I’ll be bothering with tea at all. I had a cup of tea yesterday and it didn’t blow my mind and I didn’t descend into craving caffeine either. I like the idea of it being a weekly treat be it a bar of chocolate or a cappuccino at a café.
Give it a try at some point. I think that the detox itself is quite revealing and, while I don’t think it’s something that everyone need endure, if you’re one of the small number of people who just did it for the routine then I you’ll benefit; try replacing it with something healthy like a fresh fruit juice.
Alcohol? Been there done that you weaklings. Fatty food? Internet? Hah. Cordials? Who knows ;)
Liquid Lunch!
Beer,
Golden beer out in the sun and eyes squinting at life going by.
Old sun-baked wooden benches with parasols and big dirty glass ashtrays,
The cold breeze and scantily clad women, the smell of too much perfume and of life passing by.
Oh yes.
Sometimes the simplest times are the best.
TTDSPUXNAJKQ Hello Technorati
First things first: KISS.
As a developer who (in the early stages of CakePHP’s development) constantly reinvented the wheel with features already available through the framework itself, I am now so cautious of doing so it’s almost an abhorrence rather than a discipline. However, I feel that this particular obvious solution to a problem is worth sharing:
I've got an admin prefix set up in my Cake application and I have a custom layout that I want to use instead of the default layout. I don't really want to specify it in all the admin functions within each controller, is there a way to do it within app_controller.php?
Yes:
function beforeRender() {
if(!empty($this->params['prefix']) && $this->params['prefix']=='admin') {
$this->layoutPath = 'admin';
}
}
It's really simple. $this->action is the current action—lower case underscore (eg. the_current_action)— as a string. For a single word prefixed route (admin, manage, moderate, etc.) it is easily searched. You could opt for $this->layout = 'admin_layout' if you like, but I find that using $this->layoutPath affords a bit of freedom in future should i want to have multiple admin layouts and then I can have a specific controller function line that doesn't need to worry about the beforeRender function overriding anything.
I just wanted to link to the article I wrote on overlinking on social networking feeds to the extent that you don't enjoy……
BOOM!
SYSTEM ERROR
RETURN WITHOUT GOSUB
Please reboot life and try againIt seems almost full circle in a way as Blogger was one of my earliest (although Livejournal was the absolute first) blog services and I never thought I'd return officially. I was agonising over Wordpress.com as it is a really great system and the packages available are so completely full of goodies. The problem is that I know that I can be fickle, I know that I also like control over what I publish too.
It comes down to the mortality of my blog. I look at Google and know that here's a company that's going to last; and, on the back of this super massive search engine, Blogger is going to last too. I want my ramblings to live on and the Blogger service affords me that. Wordpress would allow it too, but I really decided the only real thing that I wanted was the immortality of a blog. Nothing else was important. Once I'd agonised enough, and narrowed it down to one thing, I realised that the free Blogger was the obvious choice.
So I integrated Disqus for the comments system, prepped up some widgets for the sidebar that I'll add soon, whipped up some semi retro CSS and renamed my blog as an amalgamation of all the blog names before it.
I'm currently working on an entry over on my business' blog to really talk about how social networking has moulded and changed me. It's probably the reason I'm coming back to this blog after such a long time.
Anyway. Here's to a new decade of blogging. My blogging career has so far managed to span 3 decades and 2 millennia and this time it's here to stay ]]>