#web-development

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.

Back in 2022 I added webmention support to this blog. The implementation worked but it was entirely client-side, so the page would load, JS would fire, fetch from webmention.io, and render the results into the DOM. With JS disabled or on a slow connection, the discussion section was just empty. It worked well enough that I didn’t touch it for three years, but the rate-limit situation had been silently catching visitors out and eventually I started pulling at the thread.

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’ve spent countless hours playing Balatro, and I’ve always wanted to create my own game with similar mechanics. When TrinketOS announced a game jam, it was the perfect excuse to make it happen.

I’ve added Webmention support to the posts on this blog. Webmentions are a method for websites to know that they’ve been linked to (or mentioned) from elsewhere on the web.

If you’ve used any framework or language for long enough, you might find that you’ve got parts of your code that are not using the language in it’s current state to it’s full potential.

I’ve recently been doing a lot of working designing an icon font that works well at small sizes for my day job. Here’s an overview of the process I’m using to go from a doodle on paper, to a functional icon font that can be used in most web browsers.

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.

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.

If you’re a returning visitor to blomg you might notice some changes to the design.

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:

Scrolling on the web is something that we take for granted when thinking about how users will interact with our website. There are two schools of thought on the subject: one that’s ingrained in how we interact with what we’re seeing on our screen, and the other ingrained in how we interact with the real world.

I decided it was time that I gave some attention to the design of my Jekyll-powered blog. I’ve been using a slightly modified version of the default Twitter Bootstrap theme since I moved to Jekyll, and that’s just not good enough. I’ve created the new theme from scratch, and I’ve thrown in some PJAX wizardry to make page-loading fancier. Gone are the old post-banners, and thumbnails (which to be honest I was adding just to make things look a bit less-boring), say hello to the new, larger hero banner for the latest post! You might notice some fancy effects on the homepage when you scroll, this is accomplished with a bit of jQuery and css3 to scale the title while parallaxing the hero banner. I’ve also made a forray in to a responsive layout, so if you’re viewing this on a screen smaller than 960px wide you will see some slight differences. But it’s not that different. Obviously the fancy stuff is dependant on your browser, but it should atleast look nice for anybody using Internet Explorer.

NB: This flurry of content might be shortlived, but for now I’m excited to be posting again so shush! Jekyll, as it turns out, is a really nice blogging platform static site generator. One of the nice things about it is the flexibility. In my current Jekyll set up I’ve added metadata to the YAML for posts, so that I can optionally define a post cover (or image, if you’d prefer) and a width for the cover.

The Smashing Book #2 is a book about web design and development from the folks over at smashingmagazine.com. As the name implies, it’s their second Smashing Book. When the first Smashing Book was released in 2009, I jumped to the chance of buying a copy. I’ve always been a fan of Smashing Magazine, and figured Smashing Magazine in print form couldn’t be a bad thing (and it would be a nice book for reading on my bus commute to/from work each day). The first book talked a lot about coding best practice, usability and optimisation but was riddled with issues, from layout/editing issues (the justified text was unbearable, and it had numerous mistakes), to issues with the binding and over-all quality. On their end of the release I believe Smashing Magazine also had production delays too. The second book is cut from a different cloth in terms of production quality, and article subjects, this time talking more about the philosophies of graphical design, user experience, user behaviour and typography (amongst other topics). The issues of the first book are now gone, with a lot more time gone into editing/layout, and now contained in hard backing, the book feels like it’s a lot higher quality. At the start of each section there are illustrations by Yiying Lu (the creator of the Twitter “fail whale” illustration), which provide a good graphical representation of the subject of each section. This book is less code-heavy than the first, but features a lot of good quality reading material. Page layouts seem a lot nicer and the articles contain colourful screenshots and representations of what is being discussed, which do a good job of breaking the pages up - though from time to time you will find yourself facing a wall of text, which makes it not ideal for commute-reading in chunks. Overall I would say this is a much better book than the first Smashing Book. It’s a steal at the same price as the first, and a great resource for any web designer to have on their desk or book shelf. I look forward to the next Smashing Book when/if it’s released and I hope that Smashing Magazine consider re-releasing their first Smashing Book as a hardback second edition.

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.

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’m finding myself with less and less time lately.. college, homework, work, it’s all eating at my time.. if and when i do (any of) it.

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.