by Alex Holt | Mar 17, 2013 | Dev, Web |
There is a definite lack in technology preventing responsive design from being the amazing revolution that it should be. The big issue is that as yet, there isn’t a good way to tap into the wider context of a use case – we just get to look at screen size.. The premise here is, if you’re viewing a site on your mobile phone, the use context is completely different to if you are viewing it from google, thus the content that you need front and centre may very well be different also. Imagine a fictional design studio – you’re heading to a meeting with the creative director and you’re running late. You realise that you’ve left the studio’s address on your desk at the office, you know which metro station you’re heading to but you can’t for the life of you remember what street their office is on. SO: you fire up Safari on your iPhone (or whatever browser / smartphone you use – you have a smartphone, right?) and you google the company. Upon hitting their website (we’re going to assume it’s *not* an old school flash site that probably wont work at all – rather, we’re going to assume that since you’re going to meet these guys, they’re on top of their game; their website is standards compliant and uses recent technologies).. So: what you really need in this use case is, ideally: their address details and a link to a google map showing where their office is OR alternatively, a quick link so you can phone through and ask their receptionist for the address. A desktop user... by Alex Holt | Nov 17, 2012 | Dev, Web |
I’m in the (very slow) process of porting a few of my more content heavy sites from their old CMS systems across to docpad and http://node.js. One of the things i’m doing is converting all my CSS to SCSS – which i’ve previously always done by hand. However i just found this:http://css2sass.heroku.com/, which allows me to paste in CSS and it will actually convert it to SCSS. This includes intelligent rule nesting... by Alex Holt | May 25, 2012 | Dev, Rants, Web |
So, this week I’ve been teaching web design at Shillington College in Sydney. Today we had an interesting discussion about <section> vs <div> for marking up regions on a page in HTML5 – in our case: particularly the main content region (which previously we style as <div id=”content”>. The debate stemmed from the (somewhat obsessive) idea that <div>’s are evil. The evil part of the <div> tag has more to do with the sloppy, messy usage that has become rife with the advent of WYSIWYG software that invariably writes terrible HTML. What people seem to not understand – or be reluctant to accept is that <div> is still a perfectly acceptable element in HTML5. Furthermore, I would suggest that there is no more semantic meaning in the use of <section> than <div>. As far as I see it, neither of them carries any intrinsic meaning. The other new HTML5 elements all have embedded meaning.. but section is really no more meaningful than <div> or <span> or any of our other un-semantic tags. The issue here stems from the seemingly conflicting messaging in the spec. on one hand we are being told to avoid the <div> tag, while on the other hand we are told to use it instead of section to markup a region: Note: The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline So, while I understand the... by Alex Holt | Dec 11, 2011 | Dev, Server |
My sites are hosted on a VPS (with very sparse memory allocation), so i’m looking to minimise memory usage wherever possible. I also had the joy of watching my Django FCGIs for http://the-hive-mind.com get completely annihilated by metafilter.org a few weeks ago – i think it stood up to the first 200-300 requests.. then completely died. Anyway, I have just launched a website for a friend in Nepal, who runs a trekking business (he comes highly recommended if you ever want to go hiking in that region). Basically, I decided to try and load test the Django instances on the site, to see how much traffic it could handle… i downloaded and installed siege.. which (as the name suggests) lays siege to your web server. My out of the box Django FCGI being called by a Nginx instance was only capable of reliably handling up to about 10 concurrent connections before it started dropping requests.. not really acceptable (caching, at this point.. was completely turned off). So I set about sorting out caching. I read the Django documentation.. and quickly decided that the built in caching wasn’t quite to my liking. I already knew a little about memcached, and wanted to use it to cache my generated responses, so the fact that Django supported it was nice. However the idea of using a the Django cache middleware doesn’t really cut it. Nginx supports memcached.. so why would i want to fire the request off to my (inherently bulky and inneficient) python FCGI instance? just to use python’s undoubtedly slower memcached library to return the cached content? I wouldn’t. The solution I’ve come up with is somewhat simplistic, however it DOES... by Alex Holt | Jun 15, 2011 | Dev, Web |
Something I’ve noticed recently which makes me wonder about people’s understanding of how web design works is the designer/developer obsession with validation. I’m definitely not the first to realise this (i’m pretty sure i read an article not so long ago at jeffcroft.com – where Jeff made the same point), but i’ve been surfing the web a bit this weekend, and noticed how rampant this issue really is. Validation of web sites is a good goal(a best practice), however it is not something that requires you to put a badge on your site.. or a link saying that you are CSS2.1 valid. Customers, clients etc don’t care… they care about whether or not your web site works (preferably in all browsers). Valid code is something all web designers ought to be producing, but you shouldn’t put a badge up on the site.. it’s like putting a badge that says “MY WEB SITE WORKS” – of course it does, the person reading your little badge is viewing the page. This site validated while I was building it, but i think now the CSS is technically invalid (i use the opacity: property a bit). But when a site i build is valid, I’m not screaming it from the rooftops, what if something I add breaks the validation later? Besides.. I take it as a given that a site I produce will validate (at least the XHTML – I sometimes use similar CSS hacks to save time.. shrug). It comes down to a question of pragmatics. In any real world project there comes a time where you have to sacrifice what you KNOW is... by Alex Holt | Aug 14, 2009 | Dev, Web |
So, suppose you want to embed the headlines from an RSS feed into your site. Assuming you’re not so fussed about SEO, but rather are looking for a useful piece of content for your users, you can use Jquery and Yahoo Pipes to easily embed the headlines (and summaries if you like) into your page. Step 1: Create a Yahoo Pipe for the RSS feed (or feeds) that you want to include. You need a Yahoo account to use pipes, so if you don’t have one, you’ll need to get one. Once you have it, just log into the pipes site here: http://pipes.yahoo.com You want to choose, Sources > Fetch Feed – this will add a Fetch Feed box into your pipe editor, now link this with the Pipe Output. That’s it (Pipes are extremely powerful, however this i all we need for this particular example). Here’s how the final pipe looks: Save the Pipe. Go “Back to My Pipes” and get the URL for the new pipe as JSON. Mine pipe URL is: http://pipes.yahoo.com/pipes/pipe.run?_id=b5c348713f1c84193acf3723d4d148a9&_render=json Now that you have the JSON url, we can use jquery to render these results into a useful widget on our page. Firstly, we need to make sure that Jquery is being included on our page. I do this using the google hosted solution, so basically it is loaded from google’s servers (and cached). So, in the head of your page (if jquery isn’t already there) we add this: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> Step 2: Set up our markup and CSS Now we create the necessary markup to hold our results. Where you want the widget to appear, we... 