Archive of: 2018
-
JS Oxford CSS Grid Lightning Presentation
(Updated 10th December to add the video)
Last night I took part in the final JS Oxford of the year, which consisted of a series of lightning talks on all manner of subjects, from lessons learned in Developer Relations, to an introduction to Kubernetes.
I gave a very brief talk on cat gifs… wait, I mean getting started with CSS Grid (It’s written in Reveal.js so you can view the speaker notes by pressing S). I started by explaining some of the terminology around Grid, and then ran through the case study of converting this site to a Grid layout.
As always, it was an absolute pleasure to present at JS Oxford. They’re always interested in new speakers, so if you’re thinking about giving it a go, they’re a lovely welcoming crowd.
As it was a lightning talk I didn’t get a chance to link out to further reading, but I can do that here.
- Rachel Andrew’s excellent Grid by Example is full of useful information, examples, patterns, and resources. She has literally written the book on Grid.
- Grid Garden is a fun way to get your head around some of the general concepts.
- Jen Simmons’ has been doing some amazing experiments with Grid, and has also collated a useful list of resources on her Learn CSS Grid page.
- I have a continually growing list of Grid resources on Pinboard.
-
IndieWebCamp Oxford Day 2
Unfortunately the weather gods were against us on day 2, with some pretty horrendous downpours first thing in the morning.
Although a few of us made it in, it was more difficult for others, so I classed it as a “work-from-home” exercise, and we kept in touch through the #indieweb channel in the Digital Oxford Slack. Despite this, everyone was still enthused and carried on with their projects.
A few of the participants wrote up their experiences:
- Beverley Newing - 2018 Oxford Indie Web Camp.
- Marcus Povey - #Indiewebcamp Oxford.
- Henry Blyth - IndieWeb is seriously cool.
As for myself, I’m very pleased with what I achieved over the last couple of days. My webmentions are a lot tidier now, and I did a lot of cleaning up behind the scenes, bits and pieces that have been on the to-do list for a while.
Overall it feels like the first IndieWebCamp Oxford went well and people got a lot out of it. It was good to hang out with a group all working on something personal. It’s got me thinking that maybe we need something more regular. An Oxford chapter of the Homebrew Website Club perhaps?
-
IndieWebCamp Oxford Day 1
I’m here at the first IndieWebCamp Oxford. I can’t quite believe it all came together!
Listening to @garrettc kick us off at @indiewebcamp #oxford! #indieweb pic.twitter.com/4Pn1yetifA
— Dan Q (@scatmandan) 22 September 2018After some introductory rambling from me, the group got down to planning and coding.
As I hoped, we have all levels of experience, with some implementing IndieWeb functionality for the first time, whereas others have larger scale projects in mind, including Ben’s epic “document all the things” in preparation for he and Sarah’s trip to New Zealand, and Dan Q moving his geocaching tools to a more POSSE model, with less reliance on outside services.
For my part, so far I’ve finished the webmention implementation I set up a few months ago, adding a Facepile for likes and reposts, and cleaning up the markup. Next up I think some improvements to the microformats around the site.
-
Oxford IndieWebCamp is go!
Save the dates folks!
On Saturday 22nd September and Sunday 23rd September we will be having the first ever Oxford IndieWebCamp!
It is a free event, but I would ask that you register on Eventbrite, so I can get an idea of numbers.
IndieWebCamp is a weekend gathering of web creators building & sharing their own websites to advance the independent web and empower ourselves and others to take control of our online identities and data.
It is open to all skill levels, from people who want to get started with a web site, through to experienced developers wanting to tackle a specific personal project.
I gave a little presentation about the Indieweb at JS Oxford earlier this year if you want to know more.
Huge thanks to our sponsors for the event, Haybrook IT and White October.
-
An analysis of A.I. in films
Christopher Noessel at the great Sci-fi Interfaces has been publishing a series of posts analysing Artificial Intelligence in film:
Sci-fi, my reasoning goes, plays an informal and largely unacknowledged role in setting public expectations and understanding about technology in general and AI in particular. That, in turn, affects public attitudes, conversations, behaviors at work, and votes. If we found that sci-fi was telling the public misleading stories over and over, we should make a giant call for the sci-fi creating community to consider telling new stories. It’s not that we want to change sci-fi from being entertainment to being propaganda, but rather to try and take its role as informal opinion-shaper more seriously.
Now that the series has come to end, Sebastian Sadowski has visualised the findings from the posts making it easier to explore the themes and relationships between films.
-
Pies
Pie fans ahoy! With over 600 pie reviews, Pierate is surely the web’s premier pie resource. We’ve been eating and rating pies according to the ‘Seven Cs’ since 2009.
I’ve found my people.
-
Going Offline
Over the last couple of weeks I’ve been reading Jeremy’s excellent book Going Offline. It’s a step by step exploration of Service Workers. If you’re not sure what a Service Worker is the Mozilla Developer Network has a series of articles to get you up to speed:
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to push notifications and background sync APIs.
I already had a service worker on this site that had been built with Google’s Workbox library, but it always felt a little like “magic” to me. I wasn’t entirely sure what was going on under the hood, and I only ever managed to get it to do some caching of static assets, nothing more interesting than that. It felt like I was learning how to use a library, not the underlying tool.
That all changed with Going Offline. With his typical self-effacing humour (chapter titles include Making Fetch Happen and Cache Me If You Can), and easy manner, Jeremy explains how Service Workers, uh, work, the clever things you can do with them, and most importantly, how to build your own. Not only that, but it also acts as a great introduction to asynchronous JavaScript, something I’ve had real problems getting my head around. I’m still a long way from being proficient, but thanks to this book, I feel like I “get” it now.
To that end, this site now has its own home-grown, organic, corn fed, Service Worker.
As well as the caching of static assets it now cleans up after itself by deleting old caches, and more importantly will serve an off-line page if the user’s connection goes down. That page isn’t anything special right now, but one of the techniques that Jeremy talks about is caching pages that the user has visited, so at least they can load something from the past. One for me to think about.
I highly recommend picking up a copy of Going Offline, it’s a brilliant read and a great introduction into the power of Service Workers.
-
Oops!... I Grid It Again!
Today I replaced the Skeleton based layout on this site with a CSS Grid based layout. I’ve been wanting to make the move for a while and finally found the time after waking up at stupid o’clock this morning.
I wanted to do a like-for-like replacement and stick with the 12 column layout. I’m not quite ready for a complete redesign just yet.
Based on this clever repeating column trick from the Mozilla Developer Network this is how I went about it.
First up, create a 12 column grid I can add to any container I want:
.layout { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-column-gap: 2rem; }Taking a small-screen first approach, set the immediate children to span 10 of the columns, offset by one:
.layout > * { /* All grid elements to span 10 cols offset by 1 */ grid-column: col-start 2 / span 10; }Adding my
.layoutclass to theheaderandfooterelements, and then wrappingmainandasidein a div with that class gave me my basic layout. Then as the viewport gets wider, I can just do this on the required breakpoints:@media screen and (min-width: 1000px) { .layout-main { grid-column: col-start 2 / span 5; } .layout-sidebar { grid-column: col-start 8 / span 4; } }I could have simplified the syntax and removed the line names by omitting
col-start, but named lines are very powerful and I might want to play with them later.The end result is my CSS payload has gone from around 20k to just under 6k, and my markup is a lot simpler.
It was ridiculously quick and painless. From branching my repository to deploying the final code took just over an hour, and I’m sure fifteen minutes of that was me double checking I hadn’t missed something. As Jeremy said :
I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.
(Thanks to Mat for pointing me towards to Pun Generator for the title)
-
Giftastic
Ethan wrote today about his gif repository and how he manages it. As some friends will know I also have a repository, which was entirely inspired by Ethan.
I say “inspired”, what I mean is “blatantly ripped off from”.
The repository sits in a subdirectory hanging off one of my domains. I can’t quite remember why it ended up in a subdirectory, it’s not like I’m running short of domains, but there it sits. One thing on my to-do list is moving it somewhere else.
Like Ethan there isn’t much technical going on behind the scenes, it’s a standard Apache directory listing which gives me simple ordering. It’s refreshing in an old school way, but I do sometimes get the itch to dig into Apache’s AutoIndex Formatting and fancy it up a bit.
Transferring files isn’t something I’ve spent a huge amount of time over. I’ve always been a bit of command line nerd, so interesting files get saved to my desktop, and then secure copied up to the server. It happens so often now that there are 75 entries in my history file for running that one command for the last 3 months alone.
This post came about from a little back and forth with Ethan where I said I would write something, and he’s good people, so I hate to let him down.
Plus it’s fun to write about little projects.
Go forth and create little projects!
-
User Interfaces that accidentally amass memories
A fascinating and poignant Twitter thread from Marcin Wichary, about user interfaces that accidentally collect memories, and tell a story about the past.
Fascinated by UIs that accidentally amass memories. One of them is the wi-fi “preferred networks” pane – unexpected reminders of business trips, vacations, accidental detours, once frequented and now closed cafés. pic.twitter.com/r137dZI0r8
— Marcin Wichary (@mwichary) 14 May 2018I wonder what I would see if I fired up any of the old social apps I don’t use any more, like Adium, or Textual.
Via this ongoing Metafilter post with more funny and sad stories of accidental memories.