Web Dev

From Wednesday 21 October to the end of the weekend, I was patching an old VPS and moving a handful of sites onto a new one. PHP2Shell finally made the decision for me. This blog carried on regardless, because it’s just files. The sites I’d built with a CMS were another story.

I came across a catalogue of antiquated HTML snippets and artefacts, the kind of markup we just accepted as necessary in the <head> of every site. It got me thinking about the CSS side of that same period, the stylesheets rather than the markup. My first job in 2009 was building marketing campaign pages for an electronics distributor’s B2B storefront, where dropping IE6 was not a conversation anyone was going to have. Developers eventually landed on one clean way to target different IE versions, but getting there took a lot of less elegant detours.

In the old days of the web, animating between pages meant faking it with jQuery. Then came pjax, which used pushState to swap in fetched content and fake a full navigation without one, still relying on popState to stop the back button breaking. Every single-page app since has done some version of the same trick, intercept the link click, fetch the new content, swap it in, animate the swap yourself. It works, but it means every navigation runs through a JS router, even on a static blog that didn’t need one otherwise. Cross-document view transitions do the same job without any of that, and there’s no JavaScript API involved at all. It’s a single @view-transition rule in the CSS. No router, no fetch, no client-side history hijacking, the browser still does a real navigation to a real URL, it just captures the outgoing page as it leaves and lets CSS animate that against the incoming one.

While updating scores for AIWC26 this week I came across BBC Sport’s 3D World Cup viewer, which launched on 12 June for matches broadcast on the BBC. Every match played so far is sitting there to replay in full, not just the live ones. It’s UK-only, it’s a beta, and somehow this is my second football post in a row, despite still having zero interest in the sport itself. The engineering underneath it is another matter.

I’ve spent more time over the last 20 years working on front-end asset pipelines than I’d care to admit. One thing that kept coming up when inheriting older codebases was CSS full of vendor prefixes that hadn’t been necessary for years - -webkit-border-radius sitting above border-radius, -moz-box-shadow doubling up on box-shadow.

My daughter finds emoji hilarious. She’s 6 and will scroll through an emoji picker for ages. My wife and I started by letting her use WhatsApp’s emoji picker to send us messages, but that quickly polluted our chat history with emoji spam. We tried a few dedicated emoji-only apps like Emojichat, but there was this uncertainty about how they handled data. Most of them were also 1:1 only. I wanted the three of us in the same room.

I use Sass every day, both professionally and in my side projects. One thing that never seems to stick in my mind though is the correct way to use @for, @each or @while. I’m writing this up here for some cathartic release, and hopefully to be of use to somebody else.

There has been some talk lately about how iOS 8 has started to handle typography descenders when text is underlined. They’ve done away with the usual overlapping line intersect in favour of a more aesthetically pleasing line crop.

Another year, another jQuery UK conference. I wrote previously about the jQuery UK conferences that I attended in 2012 and 2013, now I’ve finally gotten around to writing up my notes from the 2014 conference.

I read an article recently that explained why a web design agency had stopped using CSS pre-processing as part of their development process, as a means to “optimise [their] internal workflow”. CSS pre-processors aren’t for everyone, but what I found particularly grating about this article was the mis-information, and the bad reasoning for ceasing to use a CSS pre-processor such as Sass.

In their simplest form, web pages are made of stacked rectangles. Every block-level element takes up as much vertical space as the content requires, and fills as much horizontal space as is available. Additionally, block-level elements can have their width/height specified. When you have absolutely positioned, or floated elements this changes a bit but the rule pretty much sticks.

Sass is a CSS-compatible preprocessor for CSS. It allows you to reduce the amount of duplication and complexity in your CSS by using variables, mixins (functions), nesting, and other cool things that should have existed in the CSS spec from the beginning.

I read an article on the subject of implementing a PSD design of a website perfectly in HTML/CSS, and without wanting to spend my time writing a lengthy response in the comment form of a blog for it to disappear in to the depths of a blog that I don’t visit very regularly, I figured I’d write my thoughts up as a blog post.

Yesterday I attended the second jQuery conference in the UK (the first being last year, which I blogged about here). I failed to get any nice pictures at the event myself, so this blog post uses a collection of crowd-sourced pictures from attendees that shared them via Twitter, Instagram and Flickr.

Recently I came across an interesting problem, fluidly scaling iframe/embed code on a responsive design. The problem surfaced because I was using a fluid width and a fixed height for my video embed, and so at some screen sizes the video would look fine, and at others it would have some black banding at the edges.

Lately I’ve been doing some work with responsive CSS and media queries. This bookmarklet has been very useful. It allows you to switch between four different browser widths (for iPad and iPhone in portrait/landscape orientations).

If you leave a trailing comma in your JavaScript code, you’re a terrible person. It’s right up there with omitting semicolons as far as I’m concerned.

This is just a short post about an unobtrusive CSS3 effect that I”ve used on some projects lately. Using the ::before and ::after CSS pseudo elements and some CSS3 styles you can make a simple HTML element look like a stack of paper sheets.

Making assumptions during web development is never a good idea – especially if your assumptions are about the way a new feature will behave across modern browsers. This is an issue because of two things:

In the process of rapid prototyping and trying out new CSS styles I often find myself making changes to styles within the inspector in Google Chrome. This works quite well, but I’ve always had a process like the following:

Recently Jenny asked me for a way to embed a YouTube video with a custom thumbnail that would play the video when clicked.

Yesterday I attended the first European jQuery conference, which was hosted here in Oxford at the Saïd Business School. This was the first big conference I’ve been to (though I’ve attended a couple of local ‘Geek nights’ and ‘design jams’).

Recently decided to give coffeescript a go, it’s nice and syntactically similar to other languages such as Python. From the coffeescript developers: CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way. Here’s my first test with it, first of all a golfjs solution I wrote, using obfuscated (read: in as few bytes as possible) JavaScript: i=input,v=i.match(/[aeiou]/gi),y=i.match(/y/gi), output=(v?v.length:0)+(y?y.length/2:0) And here’s the same code in coffeescript: v = /[AEIOU]{1}/gi y = /Y{1}/gi a = if input.match(vow) then input.match(vow).length else 0 b = if input.match(y) then input.match(y).length*0.5 else 0 output = a+b And the JavaScript coffeescript compiles to: var a, b, output, v, y; v = /[AEIOU]{1}/gi; y = /Y{1}/gi; a = input.match(vow) ? input.match(vow).length : 0; b = input.match(y) ? input.match(y).length * 0.5 : 0; output = a + b;

Okay so this solution is a bit later than I planned, but a busy working week and lack of motivation toward the end kind of got the better of me. Anyway, here’s my solution to the challenge. I’m sure Tomas will post his up soon.

Something that took a little while to pull of well while working on the JS challenge this week, thought I’d throw it up here as it has its uses practically for grouping like array values with totals:

Okay well this is something Tomas and I have been planning to do for ages, and in fact we did something like this a year ago, but it didn’t amount to a lot.

Bit of idea ping-pong with Tomas this evening, to provide a solution to something he is working on. He had some text in a table cell that needed to be split and put into an array, separating each line into two parts.

Over the weekend I relaunched Dingoonity.org. I launched the site back in November 2009, a bit of a rush job as far as the design of the boards was concerned — it coincided with me getting a full-time web design job at RS Components, so while giving the paid job my 100%, Dingoonity’s design got neglected.

I’m probably stating something very obvious to everybody, but this is something that caused me a couple of hours of confusion. When creating a new slightly-fancier page to be displayed on omgmog.net I had a problem in that after a certain amount of time the browser would become unresponsive (or in Google Chrome the page would die - but I love how Google Chrome handles this). The problem I soon realised was in my animation loop. I’ve got a couple of lines of jQuery that move some elements on the page around randomly, to give a floating effect. The original code was as follows: $("h1 span").not("#h1p3").everyTime(0,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()}); }); It turns out the problem with this code is that the animation was looping before it had completed, so the browser presumably is stacking up all of these $().animate(); functions, which in turn caused the browser to become unresponsive. To remedy this, I specified a time for the $().animation(); function, and set the $().everyTime(); timeout to slightly longer than this: $("h1 span").not("#h1p3").everyTime(500,function(){ $(this).animate({'margin-left':rand_no(),'margin-top':rand_no()},490); }); With these small changes in place, it seems my problem is solved! I don’t have any “lessons learned” speech to close the post with, it’s just something that I found interesting :)

This is a repost of a solution I provided over at the smashing magazine forums. I’m posting it here as it’s a pretty useful solution in itself. The original question is as follows: I’m building a new website and on this one page I need to use a huge form, instead of using labels I want to enter the “label” text in the value attribute and then use JS to clear the field on mouseclick. The problem is that every field needs to be filled out. I don’t want users hitting the submit button with some of the standard values still in place (easy to miss certain stuff) because this will mess things up. I can ofcourse check for empty fields but to do this I need to somehow check if all the fields have been changed on form submit. So I whipped up a quick implementation of how I would do it using jQuery.

Styling form elements with CSS is never a fun task. Cross browser differences in how form elements are rendered, coupled with changes in font size and browser capabilities, makes predicting how a form will look, after you’ve applied a style to it, a hard job. When working on the design for moanlog (and the Wordpress theme for moanblog) the search bar was one of the areas that took the most deliberation. Unable to recover the image :( The search form as it looks in its finished style maintains the unified style of the soft salmon colours in the moanlog design.

So i was playing with some css ideas the other day, during a random spur of boredom (ok, well it wasn’t that random, infact i could have probably avoided it on account of i knew i would be bored.. but regardless..) i came up with some nice css tabs, using dave shea’s css sprite slicing technique, and douglas bowman’s sliding doors technique.

i was fortunate enough to get today off from college - it’s not as if i missed anything.. i had a diabetes clinic check-up this afternoon, which was thankfully set during the hours i was meant to be in college today, 1:30pm - 5:00pm. it’s safe to say i couldn’t have missed anthing, had i been there - it was a webdesign lesson, and frankly, its the only thing on the course im not enjoying yet - oh, it sounds odd i know, but for me, sitting through one of those classes, at the moment, is like sitting in on a first year english class, in a kids school. I spent last night, from about 11pm, until 5am, messing with an idea for a new, yep, A NEW, website design- almost finished as it is, tonight, after working on it for the last 2 hours, 12am - 2am .. got some neat css tricks in it when i choose to move it onto here, the main site, and not my locally hosted server, ( <3 apache, php5 ) it will hopefully be a really smooth process. the hardest part will be recreating the pixel art page, or as it will be.. pages. and adding new sections, such as “css ideas” where i will put online various css things i do/make, and also putting up a wider portfolio of the webdesigns i have made, am making, and make for people. sounds like fun, eh.

Microsoft.com got a redesign the other day.. glad to see theyre losing some of their tables in the new design.. glad to see that theyre incorporating CSS more.. it’s a shame that a blind monkey could write better valid webcode than them though. i can’t write much about this without sounding too much like Doug from Stopdesign.com - so you may aswell go and read what he has to say.. its interesting, statistically.