QREATE???

QREATE? “What happened to ‘Suburbia’?”

You may notice things have changed a wee bit on my website, nothing major really but I decided to switch to another domain name that I’ve had for quite a few years. Whilst ‘suburbia.org.uk’ has been my website url for about 13 years I felt it was time to mix it up a little bit.

I’ve been experimenting more recently with trying to post some short-form content such as interesting links, videos etc, onto my site first and foremost and having this content share out to social media channels. I’ve only got it automated out to Twitter and Micro.blog at the moment but I’ll look into Facebook, Instagram etc as well.

Generally I’m just experimenting with sharing content here initially and trying to get back to writing and blogging a bit more. So hopefully there should be a bit more activity going on here on the site at the new url of qreate.co.uk :)

I’ve still got all of the same content as before so take a look around my Projects page to see some of the things I’ve been working on. I’m also going to add a bit more about some of the freelance work I’ve been doing recently, in particular working with Ryan and Lyall at Agency of None on several things for Dundee Design Festival which was particularly fun and interesting to work on.

A work-around for aspect-ratio percentage padding issues on flex items in older versions of Firefox and Edge

Whilst working on a recent project I needed to enforce a fixed ratio on some elements in the layout. In this case I used the ‘Aspect Ratio’ method which uses a ‘0’ height element with a percentage-based ‘padding-top’ value (More info about that in this CSS Tricks article).

The problem I ran into was that I was also using Flexbox for layout so each element was a Flex item, all of this was fine in Chrome and Safari and also in recent versions of Firefox and Microsoft Edge 17, 18 and in the upcoming 19.

But when testing in Edge 15 and 16 I found that the elements with the aspect ratio method applied to them were just completely invisible. Looking into it further I came across a Stackoverflow post and discovered that the issue was that in these versions of Edge they were supporting an earlier version of the Flexbox specification which meant that the percentage-based padding-top had no effect, basically rendering these elements with a ‘0’ height so they didn’t show up. It seems that the Flexbox specification was updated circa 2018 and basically brought it in line with the way Chrome and Safari have always behaved.

An alternative way of specifying the padding-top value is to use the ‘vw’ viewport-width units instead of percentages, whilst I found this did work to some extent it was harder to keep the ratios exactly how I wanted, but at least it was a way that would get these elements working in older version of Edge. Rather than having to completely redo my markup and CSS just to support these older browsers I wanted to see if there was a way to target only these earlier versions of Edge and use ‘vw’ units for Edge 15 & 16 but keep percentages for all other browsers.

As it happens I was also using “Variable Fonts” on this site which are only supported in Edge 17+, as such as I was already testing for Variable Font support by using ‘@supports (font-variation-settings: normal)’, so combining this with another parameter ‘(-ms-ime-align: auto)’ which allowed me to target Edge I came up with a workaround.

Here’s an example of how it would be used, in this case it is a 3-up layout so each element is 1/3rd of the page width so set at 33.33333% of the width and then a padding-top set to the same percentage. The first CSS block sets the main styles and the second block adds the ‘@supports’ check which overrides the first for matching Edge versions:

.aspect-block {
    padding: 0;
    position: relative;
    flex: 0 0 33.33333%;
    height: 0;
    overflow: hidden;
   padding-top: 33.33333%;
}
@supports (-ms-ime-align: auto) and (not (font-variation-settings: normal) ) {
    .aspect-block  {
        padding-top: 33.33333vw;
    }
}

“Vague but exciting.”

In 1989 I was just about to finish High School and start my post-secondary school education path. At that time I really didn’t have much of an idea about what I wanted to do, other than going skateboarding I was only really interested in art and design, so off to college to study art and design I went.

Elsewhere in the world in 1989 Tim Berners-Lee submitted a document called “Information Management: A Proposal”* which proposed a large hypertext database that enabled the sharing of information between multiple computers, and from this the World Wide Web was born.

A few years later in 1993 I got my first taste of the internet, cheekily using a friend’s login details at University! Initially I used Gopher to browse through archives of NASA space photos, but soon after came the release of NCSA Mosaic, the first popular web browser, and I started accessing this “new thing” called the World Wide Web.

In 1994 I started my first year at Art College which gave me legitimate access to the internet (without having to use a friend’s login details!). “View source” became my teacher, and I spent hours telnet-ing into the main web server and learning how to write HTML. I didn’t realise it at the time but these were skills that were going to lead me in a career trajectory for the next 2 or 3 decades up to the present time.

Anyway, all this is to say “Happy 30th Birthday” to the World Wide Web and thanks to Tim Berners-Lee for inventing it!

This NeXT workstation was used by Tim Berners-Lee to run the first ever web-server.

If you want to see what it was like to use the first web browser then go and check out the “CERN 2019 WorldWideWeb Rebuild” project which rebuilt the original browser running inside a modern browser (inception!):

https://worldwideweb.cern.ch

* The proposal elicited the “Vague but exciting” response from Tim’s boss, which sounds a bit how I saw my future in 1989 ;)

Painted into a Touch Bar corner?

Back in April 2017 Apple invited a few select members of the tech press to a special event to discuss the situation with the Mac Pro line of computers. At that time the Mac Pro had gone about 4 years without any updates causing a lot of speculation about Apple’s commitment to its pro-level Mac users.

At the event Craig Federighi was quoted as saying:

“I think we designed ourselves into a bit of a thermal corner, if you will. We designed a system with the kind of GPUs that at the time we thought we needed, and that we thought we could well serve with a two GPU architecture. That that was the thermal limit we needed, or the thermal capacity we needed. But workloads didn’t materialize to fit that as broadly as we hoped.”

“The Mac Pro Lives”, DaringFireball.net, 4th April 2017
The 2013 Mac Pro

So whilst they didn’t provide an immediate fix to the problem it was a clear admission that the limits of the Mac Pro design had been reached and that there was no way they could upgrade that design to use newer, faster components. The only way forward was to scrap that design and redesign it completely.

Recently I had a purchase decision to make about a new Mac, I really wanted a good jump in performance over the 2014 13” MacBook Pro I’ve been using and ultimately I opted for a 6-core Mac Mini. 

After looking at all the options within the current MacBook Pro line I knew I wanted at least a quad-core CPU so it was going to have to be at least the high end 13” MacBook Pro, I also wanted 16Gb of RAM and at least a 512Gb SSD, so £2129 for this and an additional £249 to get AppleCare+ cover on top of this, plus the cost of a few dongles to connect non-USB-C devices to it and also my Thunderbolt display. All in all it was going to cost close to £2600 to get something to suit my needs.

In the end however I decided I couldn’t justify purchasing that machine. The reason I decided not to go for the MacBook Pro was that despite spending that amount of money I was buying a machine that had no future upgrade path. It’s not possible to upgrade the RAM or SSD storage so it means having to buy the highest configuration you can afford hoping that this is good enough for your future needs, rather than buying what you can afford now and adding upgrades later if needed. 

Additionally all of the higher-end MacBook Pro laptops come with the Touch Bar whether you want it or not so this adds to the cost, given that I work most of the time using an external display and keyboard it means the Touch Bar has limited usage potential. 

Having not owned a Touch Bar MacBook Pro I’m perhaps not in a position to judge how successful or beneficial the Touch Bar is, but my impression from articles etc online and friends who own one is that it’s not a must-have or key selling feature for many people. I know I would certainly rather have the ability to upgrade RAM and SSD storage down the line than have the Touch Bar.

Combine the Touch Bar with the lack of upgradability and you have to pay a lot of money up front to try and future proof your purchase. Ultimately I realised this wasn’t going to spark joy* and I would resent spending that amount of money to get something I wasn’t completely happy with and didn’t represent good value for money to me. In the end I opted for a 6-core Mac Mini purchased through Apple’s refurb store, the balance of price / features was much better and additionally the current models were released last year so they’re using the latest CPUs and aren’t likely to be superseded anytime soon.

So the question I’m asking is: Has the hardware choices in the MacBook Pro line resulted in a similar situation to the Mac Pro, only this time Apple has painted themselves into a Touch Bar corner? 

Personally, I think it’s time for Apple to consider what changes they need to make in the MacBook Pro line to get out of this corner they’ve painted themselves into.

* Yes, this is a token Mari Kondo reference :)

Mental note: Set ‘register_meta’s ‘single’ parameter appropriately or you end up with data across multiple custom fields

This is a mental note for my own future reference after spending several hours trying to debug why some data was getting magically broken apart into multiple meta data fields.

In this case I was submitting a string of JSON data (created using JSON.stringify) via $.ajax in jQuery to create a ‘user_meta’ field via the WP Rest API. I could see from the response after successfully posting that the data was breaking up into multiple parts and was showing up as an array in the Ajax response, sure enough looking at the data in the WordPress ‘user_meta’ table I could see that there were a whole load of entries created from pieces of the single string I had sent.

After searching online for solutions and trying quite a few things I managed to narrow it down to which bit of code might be the cause, I was struggling to figure out whether it was happening during the AJAX request or on the server within WordPress.

However, I was aware that when rendering meta data using ‘get_user_meta‘ or ‘get_post_meta‘ that it will bring up an array as the default format as it is possible to have multiple meta fields with the same name, so when requesting a meta field you can set the ‘$single’ parameter to ‘true’ and this will return only a single value.

However, I hadn’t realised that you can actually specify that the fields are only to ever have a single instance when you register them using ‘register_meta‘, after setting this parameter my submitted JSON string happily went into a single user_meta field!

You can set the meta field to use a single parameter when registering like so:

register_meta( 'user', 'my_meta_fieldname', array( 'type' => 'string', 'single' => true ) );

Hopefully this will stay in my head now and I’ll remember if this happens again!


RaD: A definitive history of Skateboarding in the UK from 1978–1995

Growing up as a BMX obsessed then skateboarding crazy kid in the 1980’s “RaD” (short for Read and Destroy) magazine was THE major source of everything about skateboarding.

Every month, every issue, I would read it from cover to cover. From the cover, contents page, articles, letter’s page*, photos to the small ads at the back I would consume everything about it and so much of it is forever burned into my brain to be recalled at random times! In the times way before the internet, instagram, youtube and social media the printed skateboard magazine was the only window into the wider realms of skateboarding in the UK and beyond.

A small sample of my personal RaD magazine archive :)

RaD had several key photographers who contributed to the magazine: Vernon ‘Jay Podesta’ Adams, Tony ‘Dobie’ Campbell, ‘Mad’ Mike John, Tim Leighton-Boyce, Paul Sunman and Wig Worland. I once stayed over at Tim Leighton-Boyce’s flat in London many years ago and spent hours looking through boxes of photos, some which had been in print and some that never saw the light of day.

Since the late 1990’s all of Tim’s and other contributor’s photos and all the materials from the production of RaD – much of which predates fully digital workflows of graphic design and print production – has been in storage in various places. But in recent years massive efforts have been taken to sort through all of the remnants of the RaD magazine archives and has resulted in a Kickstarter campaign to document the history of skateboarding in the UK and the role and influence that RaD magazine had and the effect it continues to have to this day.

“Skateboarding History. RaD. The book of the magazine.”

The Kickstarter project is titled: “Skateboarding History. RaD. The book of the magazine.” and has the sub-title “A definitive history of Skateboarding in the UK from 1978–1995
The Read and Destroy archive book project.”. The plan is for a two-volume book and is summarised on Kickstarter:

This two-volume book revisits the seminal independent magazine RaD (Read and Destroy), first published over 30 years ago – and still with a global following today. It is an inside view on skateboarding and youth culture from the 1970s, 80s and 90s, told primarily through the archives of 6 British skate photographers at the core of the magazine’s original editorial team.

https://www.kickstarter.com/projects/322122905/rad-the-book-of-the-magazine/description
This is what the finished two-volume book should look like.

There are only about 8 days to go as I type this so if RaD magazine is something that had a similar influence on yourself as it did to me, or your keen to see this aspect of skateboarding-related social history be brought to the surface, or if you love photography or graphic design then I’d strongly encourage you to go and back the project as the resulting book is going to be something special in all those aspects. Do it, go back it now and help make it happen!

View the Kickstarter project here: https://www.kickstarter.com/projects/322122905/rad-the-book-of-the-magazine

You can also find more about RaD on their website and social media sites at:

https://www.youtube.com/watch?v=VQsQoUZ4b-w
https://www.youtube.com/watch?v=3mSWrgHp0CU
*My own letters made it to the letters page once or twice ;)