Sass – the irresponsible loops

As Uncle Ben says

With great power comes great responsibility

Pre-processors are pretty popular these days for writing CSS, the enhancements they bring to CSS authoring is a great addition even if it’s just for variables (yes I know of CSS variables). There are also a ton of other features available in such tools.

One such great item is the ability to write loops, for those not familiar with loops in programming they provide the ability to write code that repeats the block of code within the loop multiple times based on a set of conditions. That’s a pretty basic explanation, and loops can provide great power for repeated tasks.

With that last point, “great power for repeated task” – With Sass this can also mean extra outputted CSS. Which can lead to increased CSS file size. In the grand scheme of things may not seem to be that big of a deal but this can lead to extra bandwidth being used by end users, less performant websites, etc.

Example with output within a loop

Here we have a two font variables that we are generating helper classes for using a simple loop. Seems simple enough. But when you look at the output. It may simple obvious on what it may be – we get an output for each loop item.

Loop with placeholder and @extend

By utilising a couple more of Sass feature (yes we write more Sass for less CSS) we can update the code to reduce the complied CSS. By using Sass placeholder selectors and the @extend at-rule we can update the loop to just extend a placeholder. By default the Sass placeholder selector will not output itself, you have to use the @extend at-rule to. For each time you use the @extend inside a selector it reuses the placeholder styles and adds the selector to the list as shown below


With any pre-processors or tool you are using to generate the items you are serving to you end users. You should, You must pay attention to the generated output. Something that may seem inconspicuous could turn out to be doing more than you expected.

Valid ALT text?

This tweet the other day from Addy Osmani showing some CSS on how to highlight images on a page with no alt attribute got me thinking. Addy’s tip is great and shows how developers can provide guidance within the apps/sites they are building to editors/admins on missing attributes that are required for accessibility. The part I was stuck on was this only shows what I would call error states, there is also the state where the alt attribute can be present meaning the red border isn’t shown, this can provide false positives as even though a blank alt attribute is valid. It is only valid for decorative image. For frameworks like React or others it’s possible to put yourself outside of the error state easily without knowing it, and it appears like you are valid. A much better tip would be to highlight the “decorative” state image with a warning – using an orange or so forth. This then allows the user to quickly check the images that are present and have an alt attribute but not value and gives them the opportunity to confirm if that’s the correct state for the given image.

For example in a web application where a developer is using a utility function to display and image/graphic and assumes the alt text is being set based on them passing a value, or even if they are just passing an object of data from a API or other datasource. Example of a CMS, where the UI is built in React and you just pass the image data from the API into your component – the issue here is you are hoping the admin/editor added the alt text in the photo/media library tool.

Having images that are non decorative with a blank/null alt text fails accessibility for WCAG 1.1.1 Non-text Content – H67: Using null alt text and no title attribute on img elements for images that AT should ignore.

// Error - missing alt
img:not([alt]) {
    border: 5px solid rgb(255, 0, 0);

// Warning - Has alt attribute but no text value
img[alt=''] {
    border: 5px solid rgb(255, 165, 0);

The following CSS is used to produce the output you see in the image below. I also put together a quick demo over to provide a working example:


Demo of highlight alt missing and alt blank


Another year goes by… and as I think back on the year there were some ups and downs.

We went on our first “proper” family holiday – We went to Disneyland Paris for 4 days during the summer. Would not of been my first pick, but with two young children it made sense and it was actually very good. It was a very busy and VERY hot 4 days and we didn’t go in the height of summer (thankfully) either. Overall it was an amazing experience, that each of us all had something fun to take away from it.. (Le’ts not mention the birthday cake singing for myself organized by my wife – note for future don’t go on holiday to somewhere like Disneyland over my birthday).

The biggest item of year for me was completing the 3 peaks during the summer, something I’ll not forget for a while. But also something I would recommend to do.

The training for the 3 peaks made up for the limit access I was getting at the gym due to me being little stupid and fracturing my radial head. It didn’t stop the walking too much, putting a backpack on wasn’t very simply, neither is it to do still. I managed to make it 33 years before properly breaking a bone, and for doing something very silly and not needed. There was a fence involved that I didn’t quite manage to fully jump over. The most annoying thing of the whole fracture is I still have limited movement and some pain. Off to see a specialist in early 2020 to see if there is anything that’s able to be done.

At the end of the year I joined The Washington Post, after spending just over 3 years with my previous company a new adventure and change was needed, and having just completed my first month all has been going very well, making good progress and contributing within the team very well I am looking forward to diving in deeper next year and beyond and see what challenges lie ahead.

HTML, CSS and netlify

Netlify is everything you need to build fast, modern websites: continuous deployment, serverless functions, and so much more.

I’ve been looking for a small project/excuse to use netlify for a little while now, and then something came along this week that seemed like the perfect place to be able at least try it without and fallout.

For some reason I’ve always thought netlify was for all the “modern” JAMStack style build – where you have a static site generator that needs to execute some build steps before it can be deployed. But as I found out this week I was pretty wrong.

I was building out some prototypes for something at work and wanted to get it online somewhere so I could show a few people. Normally I would use AWS S3 or upload to my own domain on a shared web host. There are many steps involved in either of those options that I wasn’t keen on having to set up or wait for DNS and so forth.

Here comes netlify – the prototype I was building was using no libraries or frameworks, using just HTML and CSS. I already had the prototype set up as a Git repository (I highly recommend always using source control, it’s a great “undo” tool and many other benefits).

With my Git repository setup (I am using a private repository for my prototype, I have made a demo one for this article), and my netlify account waiting. You just connect the two together and netlify will make a new build each time you commit. As I am committing directly to master the domain that netlify gives you for the project will always have the latest master commit deployed to it.


  1. Have a Git repository set up with you code (my example is here:
  2. Have a netlfiy account – You can sign up with oAuth and use your Github account if you like
  3. Choose “New site from Git”
  4. Continuous deployment – Choose Github, it will run through some steps and ask how you want to connect your account
  5. Choose the repository you want to use for this project/site
  6. Deploy settings – make sure the branch is your main branch – in my case I am using master. Don’t enter anything in the build section
  7.  Click “Deploy site”

You will then get taken to the overview screen for your site. First it will show as in progress, once it’s finished doing it’s thing you will have a link you can view your deployed code at. Netlify will auto generate a name for the site and a URL for you to view it at, for me it gave me the URL –

If you look at the code ( and the deployed site – You can see there is nothing specific to netlify – it’s deployed the repo as a static site, I have no build steps or any tools or frameworks in place. This allows me to quickly push my code up and have it available for others to view and interactive with. Just having an index.html in the root of the repository is enough.

For local development I am using npx to run a local server using the node module http-server.

netlify site overview

For each commit you make the branch you set as the main branch netlify will make a build for that commit. The URL for the site will always show you the most recent deploy.

You can view all the deploys that have happened in netlify and even view what that build looks like, Each build has it’s own URL you can view at – For example when I connected my repo it only had a readme file you can preview that build here – https://5d6a3e7e0c2e32cbcfc25ddf–

I then added some HTML and CSS files, after pushing to Github netlify picked up the commit and triggered another build. You can see my two builds in the deploys tab of the site.

netlify site deploys

Photo taken at: Disneyland Paris

Subscribing to RSS

I was a big fan of Google Reader then it got shutdown in 2013 (6 years ago!). After Google Reader shut down the RSS Reader world was limited, I even built my own to settle my needs for consuming sites via RSS, that lasted for a few years before I shut it down. After shutting down my RSS Reader I sort of just gave up on the idea of consuming content via RSS and started to rely more on social networks and the rise of email newsletters, the amount of content I was consuming felt like it increased but I felt like I was still missing content from more original sources, especially as if you are not on Twitter at a certain time it’s likely you miss a tweet or retweet of an article.

Over the past couple of years I’ve been using as an alternative to Twitter. is like an RSS reader for personal blogs built on the IndieWeb, with some added benefits, it’s a cross between Twitter and an RSS reader.

The last couple of months I’ve switched back to using an RSS reader as a way to consume content again. I follow a lot of personal blogs over larger outlet news/tech sites, it appears more and more people are back to writing on their own sites again and this is great!

When I started using an RSS reader recently I went into it with an open slate and decided I would build up my list of sites I would follow organically, which has led me to steadily build up a collection of sites I follow and actively read their content. I continue to add feeds on a regular basis as I discover new blogs to follow. Finding new blogs and sites to follow is rewarding, someone mentioning another article or person in their post leads me to another site which in turn I then add to my subscription list.

The more I consume content from personal blogs, it has now sparked me to use mine more.

National Three Peaks Challenge

Towards the start of the year, Mark the owner of the gym I go to mentioned he was planning to do the Three Peaks Challenge for charity and was wondering if I and a couple of the other people from the gym would do it too. I wasn’t 100% sure at first, a little bit of research and having looked at the calendar turns out we had about 4 to 5 months depending on the date we would set for it so I thought why not.

Well, the weekend just gone (Saturday 20th July 2019) was the day we started the 24 hour challenge, and we finished it within 24hours on Sunday morning.

Everything you read about doing the Three Peaks Challenge talks about starting at Ben Nevis and finishing at Snowdon, but we decided to do it the other way around, mainly because we all live in Scotland and it’s about the same distance home if not a few minutes quicker.

Three Peaks Challenge results

Peak 1 – Snowdon

Distance: 12.49 km
Time: 3hours 16minutes 40seconds

We started Snowdon at 09:52 on Saturday morning, we planned to start at 10am but we were ready to go and the weather wasn’t very pleasant so we just got going. To start with the weather was dry but very low cloud. We took the Pyg Track up from Pen-y-pass, reaching the summit just around 11:30 where visibility was next to nothing a quick picture at the top to mark the achievement and then started making our descent. From the top to the junction on the ridge for the Pyg Track was full wind and rain due to the weather we opted to return on the Miners track as most of the Pyg Track path up was rock and lots of  rnning water. Having stated the hostel across the road from the car park at Pen-y-pass upon return to the van we grab a quick shower to warm back and before heading north to Scafell.


Peak 2 – Scafell

Distance: 9 km
Time: 3hours 3minutes 42seconds

After the roughly 4 and half hour drive with a stop for some food and fuel we arrived at Wasdale Head car park around 6:15pm, and begun our walk at 6:24pm. Having walked Scafell Peak just over a month ago we knew was was in store and to say the second time up it wasn’t any easier. Scafell is much different to Snowdon, it’s shorter and steeper which means you get straight into it and start climbing – Once you’ve walked up and across a grass field you are straight into the rocky path that’s just keeps on going. We decided to go up the shorter route which means taking the path to the right when you reach Hollow Stones, this involves a bit of a scramble up a steep loose rocky section. We summited the peak just after 8pm, quick snack and drink then made our way back down the other path to be safer. After doing Snowdon in the rain, tackling Scafell in the early evening setting sun was a completely different walk and it provided some amazing views that made the walk so much more enjoyable.


Peak 3 – Ben Nevis

Distance: 16.63 km
Time: 5hours 41minutes 22seconds

We arrived at the car park at the bottom of Ben Nevis just after 3am Sunday morning to tackle the last of the three peaks after a night drive from Scafell, a few hours sleep for myself, and not much for any one else is appears we decided to take a little breather and set off a 4am to give us a bit more natural light and to time our arrival back to the car park for after 9am so that all the people who had come up to congratulate us would be there. We decided to walk Ben Nevis starting at the Ben Nevis Inn.

With our head torches on we set of at a steady pace from the car park, knowing this one was the longest and likely to the be the hardest after the other two – how wrong were we! 10 miles round trip for Ben Nevis and boy you felt it, it felt so much longer. The ascent was hard going some times you felt like you had walked half a mile to check the track and only a hundred meters or so. The weather wasn’t in our favour, but for the first half of the way up it was foggy, little bits of rain here and there but generally not bad for walking, the second half was a whole other story visibility was down to around 20 meters, there was wind and rain and it was much colder than the lower slopes.

Eventually we arrived at the summit just after 7am the ascent was just over 3hours. At the summit there was a small rescue shelter we took some cover in from the elements added another layer of clothing for the descent and made some phone calls and messages to loved one to tell the world we made it. Amazing that there was 4G at the top in that weather. A 10 minute stop and refuel before we tackled the descent. Descending was quicker than the ascent but not any easier. The legs were feeling it now, the knees where starting to ache from the impacts of the descent. The descent seemed to take forever and as we thought we were getting closer to the end there always seemed to be “another” corner, looking at the clock we had to start to pick the pace up a little if we were to complete it within the 24 hours. Then we came around another corner and there was the carpark with a small group of friends and family waiting for us.

09:42 we arrived at the start of the Ben Nevis climb! 23hours 50minutes after we started Snowdon we had completed the Three Peaks Challenge.



2018 was a big year for some personal items most notably purchasing our first house, a little late getting on to the property ladder, the last decade or more it’s been increasing hard for first time buyers, finally we managed to do it and it’s been amazing to really call a place home, and put our mark (where possible it’s a new build) on it, next year we will be able to add some more marks most notably do some painting to brighten it up — with new builds they recommend waiting at least twelve months before plaiting to let the house settle and dry out.

Owning our own house gave us the opportunity to finally add another addition to the family, that of the four legged kind. We have always talked of getting a dog (cat’s seem to be more accepted within the rental market), and during the summer we added Einstein to the family, a fox red Labrador who is amazing, and both children adore him — still not convinced Fred (the cat) has taken to him yet but there’s still plenty of time for them to finally allow me to get some pictures of them cuddled up together sleeping like best buddies.

Couple of months after moving into our home I joined a gym, not your typical gym. I wasn’t after a membership to a room full of equipment for me to eventually stop going. This gym has a focus on functional fitness, lots of classes during the week which is a big focus. As my work schedule is a little different to the normal, I work an offset day to provide more overlap with the East coast of the US I was finding that I was working too much — trying to make up time in the mornings when the US was asleep but then also feeling guilty for not being online during their afternoon hours. This was leading to me not getting out much, getting exercise and starting to mentally struggle to keep up with everything. By joining the gym that has morning sessions four days a week it provided me a way to enforce I wasn’t working too much, getting me back into shape and making new friends. In the eight months of attending the gym I am a jean size smaller (only a few kilo’s lighter) and much stronger physically and mentally.

The finally thing of 2018 that was a huge achievement was me and my wife celebrated our 10 year wedding anniversary which I’ve wrote about in a separate post.


Looking ahead to 2019 I am planning to make the year about Focus.

My primary focus will be on my family and health, professionally I am putting focus into areas that really excite me and try not to spread myself across all areas. With some recent changes this is heading in the right direction, the start of the year will provide the time to ensure steps are in place to move it towards where I want it to be.

10 Years

10 years ago, December 19th 2008 — I married the love of my life, and I promised her I would take her to New York one day. As the years passed by it started to feel a lot like Carl and Ellie’s story, an adventure that kept us both going. Next year we will go… Life carried on always with a trip to New York in the back of our minds, it would come up from time to time, life would get in the way. Three years ago we had another child and it just felt so far away this allusive trip to New York City. That was until the start of the year where we put a plan together to ensure we made it to the Big Apple this year! The plan to save and book early to ensure we did make it this year.

April 2018 we booked our flights to Stewart International, we jumped on the early release tickets for Norwegian Air’s new destination this year of non-stop flights from Edinburgh to Stewart International (requires a 90minutes shuttle to Manhattan at $20 each for each way).

With the flights booked, we were half way there to a half organized week in NYC, we kept and eye on hotel prices and waited a few months before booking them. Given we had booked our flights and were looking around for hotels, and all the tourist things we would want to do in the 5.5 days we would be in NYC I started to think to myself what could I do that would be super special for our 10 year anniversary which would happen on the Wednesday of our trip (middle of the trip). I am not sure what exactly made it jump to my mind but once I thought of it I knew I had to do all I could to ensure it happened. The plan was for me to arrange for us to renew our vow’s in Central Park. What better way to surprise Pamela and mark our 10 years together, with all life’s thrown at us through thick and thin, I knew this would be the best thing I could do for my wife, show her what she means to me and show her that I am here to stay by committing myself again to her for life!

The idea of doing a vow renewal came to me around the middle of May, and for the next couple of weeks I did all the research I could do. I thought that it shouldn’t be too hard too organise, opposed to a full on wedding where you need to get all sorts of paper work organised, and not least it being in a different country to add in to the mix. With it not being a marriage it should be less hoops to jump through. Upon my research it was apparent I wasn’t the first and not the last to think of this, and there were tons of companies you could pay to organise all the parts for you. This seemed to be the simplest and slightly more expensive option, even the most convenient and less stressful way of organising such an event. After some emailing between a few different companies to get prices and information on what’s involved with such a ceremony I decided to use Simply Eloped, after having a good feeling with the initial communications and with them being very open and forth coming, I never got the feeling I was asking to much of them, they would respond with answers to all my questions not matter how simple they seemed.

By the end of May I had it all booked up and ready, date saved, permit organised and communication with the officiant and photographer had begun. May! 7 months before the big day! How am I supposed to keep this a secret… Well that I managed to do until about 2 minutes before we began the ceremony. A couple of months out from December I had to give some details to Pamela around a possible “event” I had organised, the details I provided were that she would need to be a “Smart Casual” dress and then about a month before we were due to fly out I then told her she should look at getting her hair down in the morning, with the event being around lunch time, all the time being very careful as to not give away to many details but trying to ensure I gave her enough details to ensure she wouldn’t be annoyed to not have been prepared for getting photo’s taken.

As the big day arrived I was pretty nervous, as it was a big surprise for Pamela, and I wasn’t 100% sure how it would go down, the morning started with us going to a salon to have Pamela’s hair done, then a big a brunch as the ceremony was at 1pm which made it a little awkward to do a proper lunch, get ready and get to the location. Trying to pass time was hard, and I was trying not to say anything, I wanted to go for the big reveal and leave it to the last minute. After getting ready and heading to the subway to make our way north and into Central Park, I was sure Pamela would figure out what was going on, but turns out I was wrong. We arrived at the Ladies Pavilion which is on the West Side of central park roughly half way up the West side, not too awkward to get to on foot from a subway, thankfully the weather was good a little on the cold side but bearable. Upon approaching the Ladies Pavilion, there was someone sat in the pavilion reading which as we soon found out was our officiant – Who thought I was going to pop the question, she was surprised how young we were. I gave it a couple of moments before I asked if she was who I thought she was, someone from Simply Eloped, by replying she was Sarah our officiant I let her know Pamela still didn’t know why we were here, it was at this point I let Pamela know what we were doing in the middle of Central Park in the middle of the day on out 10 year wedding anniversary, and minutes later we stood in front of each other while Sarah out officiant gave a beautiful reading and we renewed our vows, and exchanged rings again pleading our love for each other and making the commitment once again to be husband and wife, till death do us part.

After the reading a vows renewed we spent the next hour getting photo’s taking around Central Park.

Logitech Unsubscribe “at any time”

When making a purchase recently from Logitech directly I encountered some bad auto subscribing to their marketing emails, that did not allow the user to un-subscribe at the time of making the purchase, but they did have some text telling you that you could un-subscribe at any time… Appears it means anytime just not right now.

What appears to be a valid checkbox as the Terms of Sale checkbox works perfectly, you could select and deselect that. By default that was unselected, forcing you to select it to be able to make a purchase.

This is bad marketing for logitech, I should know because I just did a marketing campaign the last month and used the best content calendar, check out to know what I’m talking about.

Being the developer I am, I thought that maybe they were just showing a checked checkbox to the user in the same manner as the terms of sale one was output. Upon inspecting their checkout page using developer tools, I found that they just never added an id attribute to the checkbox input or for attribute to the label and made the label element cover the input thus stopping me from being able to unselect the option. I removed the checked attribute from the input and continued with my purchase. I believe it saved my unchecked preference as I have yet to receive any marketing type emails as of yet.