What is a JSON feed? Learn more

JSON Feed Viewer

Browse through the showcased feeds, or enter a feed URL below.

Now supporting RSS and Atom feeds thanks to Andrew Chilton's feed2json.org service

CURRENT FEED

Alexander Blackman

JSON


A short story about the pitfalls of developing with CDNs

Permalink - Posted on 2019-08-31 23:00

During the week I was developing a checkout process. I’ve built a few before and using the same technology stack, so I duly copied previous code I knew worked.

Except it didn’t.

So what do you do when something that should work doesn’t? Well, you start checking things.

Now I like to think I’m pragmatic when doing this, but the reality is more like rapidly task-switching:

I checked for typos Googled the error message checked if the JavaScript files had loaded the order they loaded whether the data was being loaded compared this code with another version Eventually I realised that it was specific plugin — Vee Validate for Vue.js — that wasn’t working.

But it was confusing why. The code itself I was certain was fine. I had used more or less identical code on another project. And the dependencies were being loaded.

It was only when I checked in the other project, and found that it too was no longer working I suspected that something else was going on.

Cue more Googling and trawling through Vee Validate on GitHub and website.

Eventually I discovered that Vee Validate had changed from version 2 to version 3 a week before. The version change was a substantial rewrite and would break version 2 code.

In both projects we load dependencies like this using a CDN:

<script src=“https://unpkg.com/vee-validate@latest”></script>

The @latest means the most recent version will always be loaded to the web page.

So while Vee Validate was being loaded, the web page was developed using a previous version. This broke it completely.

A careless way to develop

While the fix was relatively simple — load a specific version not the latest version — the thought that stuck in my mind was, “what if that had been a live website?”.

One day a website would work fine, the next it would suddenly stop. Imagine having to explain it to a client.

I realised how little I knew about what was being loaded. Do I even know what all these dependencies do, let alone what version they are?

While using a CDN is convenient — no files to download, quicker development — is it good practice?

Do we even need to use one?

The answer I believe can be found in a post Self-Host Your Static Assets by Harry Roberts.

What caught my attention was the Network Negotiation Penalty. Harry demonstrates that using multiple CDNs even to popular resources, makes websites slower not faster.

In his own words:

If this isn’t already a compelling enough reason to self-host your static assets, I’m not sure what is!

I urge you to read it in full — I wish I had done so.


Typography book list

Permalink - Posted on 2019-05-18 23:00

I came across a list of recommended typography books by Chris Do this morning:


I checked out the list of recommendations, but I have to say I wasn’t enamoured by the choices.

It’s hard to judge as there’s no context provided why these books are recommended. But when the first book is $50 that’s not exactly accessible. Maybe it is the best book on the subject, but I hadn’t come across it before.

Anyway it prompted me to publish a list I drafted ages ago. So for what it’s worth here’s a list of six books I would recommend.

Practical Typography

Practical typography

by Matthew Butterick

My go to book for typography. I refer to it all the time and it truly embodies its title. The section Typography in ten minutes will alone make you a better designer.

practicaltypography.com

Thinking with Type

Thinking with type

by Ellen Lupton

Another favourite and one that deals with typography more broadly as design. It is an accessible overview of type covering technical aspects, history all with plenty of examples.

There is a follow up Type on Screen, but that is a bit of a difficult second album. An interesting read, but not as useful.

thinkingwithtype.com

The Elements of Typographic Style

The elements of typographic scale

by Robert Bringhurst

Often regarded as the book on typography and for good reason. This book covers everything and in detail. Robert Bringhurst’s real skill is writing. A book that is largely technical could be boring: it’s anything but. It is also beautiful.

It is perhaps not a book to start learning typography. You don’t really need a 100 page list of different typefaces and table of proportions. But if you get the bug for type then this is definitely one to read.

I couldn’t find a website so here’s a review on Typographica

Web Typography

Web typography

by Richard Rutter

Not to be confused with the On Web Typography which I found disappointing. A practical guide with a web design bent. A a criticism is that it perhaps treads familiar ground. But otherwise it is well written, lucid and concise.

book.webtypography.net

The New Typography

The new typography

by Jan Tschichold

If you get interested in the history and theory of typography, especially modernism, then this is essential reading. It is full of fascinating insight from the point of view of a practitioner.

I couldn’t find a website, so here’s a link to Good Reads

The Book

The book

by Keith Houston

Now this a bit off-topic as it is about a book rather than typography. I got it to learn about typographic terms used in books, but it is so much more. It is full of stories, anecdotes, historical insight and it is insanely thorough.

shadycharacters.co.uk/books


Collaboration not unicorns

Permalink - Posted on 2019-05-03 23:00

The last couple of weeks have been pretty crazy. I’ve hardly been in the office due to the bank holidays, visiting clients and attending a UX workshop. That’s made it pretty tough to keep up with all the things I need to do in my new role. Now with the next bank holiday I’m looking forward to some well earnt time off.

Getting on top the work

As the newly appointed lead I’m responsible for all projects. So it falls to me to manage these projects and the team. But as a manager I’m conscious of not falling into the drive-by-management trap and a boss mentality.

I’ve had my fair share of these managers and to say it sucks is an understatement. In fact it was one of the main reasons I left a company was because of this behaviour.

So I made it my first task to setup regular check-ins with the team to discuss projects and their workload.

I had worried that the team might be struggling; we have a history of delivering projects late. But I was surprised by how organised individuals were. Even those who declared themselves as not very organised.

Experimenting with different types of prototypes

This week I created both an image based prototype and a code prototype for a discovery project.

My initial thoughts still lean towards code prototypes as a superior tool. I found the code prototype lead to more useful conversations both with the team and client.

It might be a bias or familiarity thing, but I have long found mockups to be limited.

Fixing problems together

From the check-in the team raised a longstanding development issue they had on a client project. We set aside time for myself and the senior developer to tackle the problem in the week.

I’m keen to encourage this type of collaboration as I think it makes everyone a better problem solver. When working together you have to externalise your thinking. It forces you to really think about the decisions you made. Not only with something you have already done, but also with how you might change or fix it.

It proved effective as we resolved most issues we could and determined the ones we couldn’t.


The four-day work week

Permalink - Posted on 2019-04-20 23:00

I love the idea of four-day work weeks. Our Monday to Friday, 9 to 5 culture is antiquated. But why is it when you get two four-day weeks in a row, it throws you completely?

Exploring new ways of working

I introduced the team to the design studio workshop. A collaborative exercise to generate ideas. It had concerned me for a while that entrusting an individual to design a solution on there own is limited. So I wanted to see what would happen if we did something together.

The design studio hinges around a problem statement. I made a mistake of providing the team with multiple problem statements. I did this because I wasn’t sure what type of statement to use — user story, five-whys or a contextual brief. I also wasn’t sure which would be most inspiring or useful for the team.

But what happened is that everyone latched onto different statements to design solutions for. We struggled to evaluate and consolidate ideas as they were completely different things.

Design studio consolidate ideas

While the output was perhaps a little weak, it was still helpful to go through the exercise. Sketching, talking about design and presenting are skills we’re a little out of practice with.

A new job role

I was unexpectedly promoted to a lead role following appraisals. For the agency it’s an entirely new role to manage and deliver web projects. There’s a lot for me to figure out, but I am looking forward to the challenges.

One thing I hope to bring to the team is more structure and clear processes. We’re in a habit of everyone managing their own projects and clients individually. The autonomy is welcome, but it doesn’t foster a supportive or collaborative way of working. When we have worked together in the past it has always been enjoyable and productive.


It’s good to share

Permalink - Posted on 2019-04-13 23:00

The last two weeks at work have been busy. But several positive things have happened that I hope will continue.

We launched a recruitment campaign for our biggest client

So far the campaign has gone better than expected. Up until launch everyone was a little apprehensive. There was a an amount of risk with the project. The client had never done this type of advertising before, and we had not done anything at this scale.

But the campaign in fact worked a little too well. The volume of enquiries was more than anyone anticipated.

Recruitment campaign

One thing that did not go so well was developing the application form for the campaign. An assumption was made that the client needed to know the applicant’s date of birth.

But when we submitted the work to the client for approval, they were clear that this was not required. In fact they were worried the question may put users off from applying.

Getting that feedback a couple of days before the deadline was a little frustrating. Especially when the team only had two weeks to devliery a fully working system.

Our first discovery retrospective slash presentation

As part of the push towards a better design process, I am keen to improve how we work as a team. It had concerned me for a while that we were reinforcing a heads down culture; doing the work, but not sharing.

So I presented the work we had been doing as part of our first discovery project. It went well, but a mistake I made was doing it a bit off the cuff without a clear agenda. At times the conversation veered into designing solutions.

But I think we will get better with practice. Taking the time to reflect is really important. It brings clarity, builds confidence and nurtures a supportive culture.

Presentation

We are still finding our feet when it comes to research

It’s been a lot of fun experimenting with different research techniques. on our first discovery project. In the past couple of weeks we tried:

  • Stakeholder interviews
  • SWOT analysis
  • Competitor research
  • Content design research
  • Website audits and site maps
  • Domain research
  • User stories

So far the most useful activity has been the stakeholder interview. We found doing interviews in the client’s environment had other benefits.

For example, we observed how their day-to-day tasks revolved around a single piece of software. We knew they used it, but had no indication how central it was. But being in the same room we could simply see it.

Other activities we found harder to adopt. With user journey maps I found it hard to apply to a real project. I find myself making flow diagrams and not maps.

I think a reason for this is not having enough research on user needs. We gathered some, but few directly from users. But the good thing is that now we know that early on. We know there is a gap and we have time to address it.


Changing design process

Permalink - Posted on 2019-03-03 00:00

A couple of month’s ago I had a wake up call about design process. I applied for a role I really wanted, but got rejected largely because of design process. It highlighted that much of our work is mediocre and focused too much on aesthetics.

Part of the reason I applied was to work somewhere with a better approach. Somewhere that valued user needs and problem solving. Somewhere that got it.

For a while I had been frustrated with our process and our unwillingness to change. I blamed my boss for lack of leadership; colleagues for lack of ambition; freelancers for apathy. I told myself, why aren’t they as bothered about this as I am?

I begun to realise that if I wanted to work in another way, I really needed to start doing those things.

So this week I decided to do something and lead a workshop about our design process.

I wasn’t sure how well a workshop would go. It’s not something we have done before. But it had bothered me for some time that we simply did not talk about design. Sure we have had a few meetings. But one person’s opinion tended to dominate these conversations. Usually the meetings ended up with delegating projects, not discussion.

In the workshop I started by stating what we were going to discuss and some ground rules. I lead by mapping out our current design process. Then I identified where I felt we experienced problems. I then opened it out to everyone else to contribute.

While it took a little time to get going, my colleagues were receptive and began to engage in a more open way. That said the conversation wasn’t entirely smooth. It was at times messy, off-topic or repetitive. My boss in particular has a tendency to offer instant solutions. Although to his credit he started to check himself.

But the important thing is that we were talking.

Once we had exhausted all the problems we could think of, we took a photo of our map to document it.

Workshop current process

This is an important step as it provides a reference for future conversations. Documenting is such a useful tool precisely because it is so easy to forget what you have done.

In the next part of the workshop I wanted to discuss a possible solution to the problems we had identified.

I have been interested in agile development for a while, so I lead the this. Now that may not be the best approach, but I wanted to discuss something specific and tangible.

Again the conversation was messy and off-topic. But that’s ok when you’re discussing something that requires a substantial change. Transformation is not easy and there was a lot of new information for everyone to digest.

I too by no means had everything covered. In fact I was conscious not to. I wanted to involve my colleagues and for us to come up with ideas together, not to air my grand plan.

We spent a good hour coming up with the start of a new design process.

Workshop new process redacted

Going through this process together means we a clearer and shared understanding.

I couldn’t have been more wrong about my earlier frustrations. My colleagues and boss have an appetite to improve our design process. But what we lacked was a way to go about it.

I hope that we now have something we can collectively build on.


Working with Pantone colours

Permalink - Posted on 2018-08-24 23:00

One of the hardest things you can do as a designer is work with colour. But it is also one of the most critical. Along with a typeface it is often the only distinguishing characteristic of a design.

Defining brand colours is important. It is often used to develop more complex colour systems.

For example, a brand colour is often used as the background colour for a button. Tints or shades of that colour are then used to indicate interactive states: :focus, :hover, :active and so on.

A brand colour can also be used to derive a broader colour palette. Websites often need variety to indicate things like success, failure, error and so on. Using that single brand blue often isn’t enough!

So it is important to define the brand colour.

Check that document

In terms of workflow, often all you have to go on is a document. Sometimes it is some sort of a brand guide where the designer has listed colour values. Other times it’s literally just the logo.

As branding is intended for print, colours are invariably defined using a Pantone colour system. However for the web we need to know the RGB values.

But all too often these documents are not consistent. For example:

  • the brand guide will state Pantone 187 U, but the colour applied is actually Pantone 187 C, or
  • the RGB colour values stated do not match when you inspect using the colour picker, or
  • the RGB colours stated and colour picker match, but the artwork colour is CMYK and not a Pantone colour

The file format of the document can vary too. If you’re lucky you will get the source .ai document. The reason I say lucky is because you can inspect the colour values applied to the artwork itself.

When you work with a file like a .png or even a .jpg you are working with converted colours. These are not always reliable or consistent.

My default now is to double check colour values. That way I can build a de facto list of colours. I can also use this as a reference when checking colour values in dev tools.

Colour conversion: Adobe vs Pantone

A key thing to remember about Pantone colours is that they cannot be reproduced on screen. In Pantone’s own words:

On screen digital color simulations do not match the physical Pantone Color Standards. Refer to Pantone Color publications to obtain actual physical color standards.

What you see is always an approximation. After all the screen you are using is RGB.

If you inspect Pantone 187 C in Illustrator you get:

Colour Space Value
RGB 170 24 44
CMYK 23 100 88 15

But are these values accurate? Well one way you can check is to use the Pantone Colour Finder. Here they state that Pantone 187 C is:

Colour Space Value
RGB 166 25 46
CMYK 7 100 82 26

Spot the difference? It is slight but perceptible.

Is one of these wrong? Well no. The values are different due to how the colours are converted. Pantone do it one way, Adobe another.

Incidentally Affinity Designer matches what Pantone say:

Colour Space Value
RGB 170 24 44
CMYK 23 100 88 15

Does it matter which one you use? Again no. My preference is to go with what Pantone say. It’s their colour after all. But what does matter is that you are consistent.


Stop Being Anal

Permalink - Posted on 2018-05-04 23:00

Today I removed Google Analytics from my website. I realised that I had no real intention of doing anything with the data that I was collecting.

Google Analytics may be a useful tool; if you want evidence for things like “what browsers do people use?” or other technical information.

For this website I have no intention of doing this. I don’t care what the bounce rate is. I don’t care which of my pages gets the most traffic. This website is a vanity project. It’s not a service for people, just something I wanted to do.

Do I need to gather my own evidence that people use mobile devices and different browsers? I already know that people do, so what insight am I gaining?

I had been thinking about doing this for a while. Privacy is probably the biggest issue for the web to address.

I get why agencies and designers include analytics on websites. The idea of the feedback loop is a staple of design thinking.

Services like Google Analytics allow us to do this anonymously; without interruption for the user. This seems like a good idea with no downside.

But scandals like Cambridge Analytica and Facebook we see analysis turn into surveillance. Along with the existence of bodies like GCHQ who monitor everything, people are rightly concerned.

The problem for many – myself included – is that we use these companies all the time. I have multiple Google accounts, use iCloud, Dropbox, Facebook, Twitter and so on. Simply “not using” them is difficult.

For instance at work we setup Google Analytics on every project. Clients even ask for it.

But here’s the rub: we never look at it. And I’m pretty sure the clients don’t either.

That beggars the question, why bother?

I think it goes back to intent and, to put it simply, whether you have one or not. We sell analytics on the perceived benefit of real data. But gathering data on it’s own is a pointless exercise.

If you have a reason then, by all means, consider using analytics. Otherwise you’re probably better off without.

I have no reason so I’ve gone with the latter.


It’s a trap!

Permalink - Posted on 2018-04-27 23:00

UX Planet recently published The Hidden Trap in Design Systems by Brian McKenna. In it he positions that design systems “can make designers lazy” that “risk[s] losing our users in … sameness”.

I have a bone to pick with characterising anyone as lazy, but that is a moot point. Instead what I want to do is highlight some underlying assumptions about creativity.

To begin with Brian’s thoughts are somewhat mixed.

On the one hand he is stating that using design systems is a problem. On the other he states “design systems are a benefit to the design process”.

The “hidden trap” that Brian refers to is an impulse to not think critically. Supposedly the mere use of a design system is all it takes.

But I don’t think Brian meant to be didactic. Jim Ramsden points out that the trap isn’t the design system itself, but being prescriptive in its use.

If you treat the system as a set of rules and not guide lines you run into trouble.

Quite how much of a problem this is, I’m not sure. There are other reasons why you might use something as is – it’s not simply laziness.

For example, I worked on a client project where they would have benefitted from bespoke icons and illustrations.

But they had no budget for it. So I used Font Awesome instead.

Does that make me a bad designer? Perhaps. But I also think I was being professional and responsible.

It is a pervasive myth that being unique and creative go hand in hand.

We’re told sameness is to be avoided; uniqueness sought out. Turn on the TV and watch any advert and you will find examples where this plays out.

Thing is I sit here as a white middle-class male, writing a blog about design, on an iMac sitting on top of IKEA furniture. How unique am I?

The rally against uniformity is not the special preserve of design, but it is common in web design.

I think Audrey Hacq makes a useful distinction. Being consistent does not mean being uniform. And this is surely what a design system is for: to be consistent.

If we are going to be critical of design systems, then there is an irony using Medium – a platform that is evidently designed to homogenise – and concluding:

We don’t want a product that is page after page of basically the same thing

Perhaps this is the real trap.


My Sublime Text setup

Permalink - Posted on 2017-11-17 00:00

I use Sublime Text everyday as my text editor of choice. I have used several over the years including Coda, Atom and even DreamWeaver. Atom I felt was the closest competitor to Sublime Text, but I did not like things like the 2 GB install.

The main reason I keep using Sublime Text is speed. It opens quickly and pretty much every other text editor I have used doesn’t.

A second reason is that I use both Mac and Windows, so can share the same settings between both.

A third is customisation. Initially this meant nothing to me, but I’ve slowly learnt to tweak various things to help me work.

Essential packages

Package Control

The first thing you should install. It allows you add install other packages including themes and colour schemes. Use the website useful for more information on each package. Within Sublime Text itself you can only see the title.

Color Highlighter

Displays the actual colour of a colour value. Works with everything from hexadecimal colours to RGBa.

SASS variables that are colours also inherit, but only within the same file. If you use the variable in another file the highlighting does nothing.

The highlighting is very handy if you ever have to work with someone else’s code.

SideBarEnancements

Adds several functions when you right-click items in the side bar. But only when you use the Projects feature.

SASS

A syntax highlighter for, well, SASS. I was using the SCSS syntax highlighter as recommended in the CSS Tricks article Sublime Text for Front-end Developers, but I could not tell much difference between the two.

I think at one time the SASS syntax highlighter did not support .scss files, but as far as I can tell it does.

Other packages

ApacheConf.tmLanguage

Adds syntax highlighting for Apache .htaccess files.

WordCount

Adds word count and character count info in the footer bar. It also works contextually, so if you highlight a block of text and check the character count.

CodeKit Commands

Mac OSX only. This package does two things:

  1. Opens CodeKit when Sublime Text opens
  2. Pauses CodeKit automatically if I switch to another application vis-a-vis Git

I didn’t have many problems using CodeKit and Git before, but you can get conflicts. This automates everything so it will never be an issue.

Markdown Preview

I use this at work as I have no other software that can interpret Markdown. This package parses Markdown into HTML and displays in the browser.

Settings

I have grown to really like that settings in Sublime Text are just text files. Once you know where to look maintaining precise settings is very useful. For example this is my current settings:

    {
     "bold_folder_labels": "true",
     "color_scheme": "Packages/User/Espresso Soda.tmTheme",
        "detect_indentation": false,
        "draw_white_space": "all",
        "font_size": 15,
        "highlight_line": "true",
     "highlight_modified_tabs": true,
        "ignored_packages":
     [
     "CSS",
        "Markdown",
     "Vintage"
     ],
        "indent_to_bracket": true,
        "indent_guide_options":
     [
         "draw_normal",
            "draw_active"
     ],
        "line_padding_bottom": 5,
     "line_padding_top": 2,
        "tab_size": 2,
        "theme": "Soda Light 3.sublime-theme",
        "trim_trailing_white_space_on_save": true,
        "word_wrap": "true"
 }

Most settings are self-contained, but some work in tandem.

I would recommend adding more padding. I found the default to be too small, but obviously it is a personal preference.

The "detect_indentation" and "indent_to_bracket" help force documents to indent with two spaces and not tabs.

With indent_guide_options I added draw_active to highlight the parent of the element you have selected. If you nest several elements being able to see where that element closes is really useful. The effect is admittedly too subtle when also using the Espresso colour scheme, but at least it is there.

I do sit on the fence when it comes to spaces versus tabs for indentation. I have noticed formatting issues in Markdown files when using spaces. But this in part because I also use iA Writer.

Keybindings

I only use this for Markdown Preview.

[
     { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }
    ]

Themes and Colour Schemes

I still find themes and colour schemes a little confusing as there is some cross over in what each of these do.

A theme changes the appearance of the application. Things like the side bar, the shape of tabs and the find and replace bar.

Colour Schemes change the appearance of files. Essentially the syntax highlighting.

The two are independent; however changing a light theme to a dark theme will often change the colour scheme as well.

I prefer light themes and light colour schemes, so I use the popular Soda theme and their Espresso Soda colour scheme.

Something to note is that installing the Soda theme does not install the colour scheme. You have to download them separately then copy and paste into the Packages/User folder.

The theme is great, but the colour scheme isn’t perfect. Light colour schemes tend to have too little contrast, or be garish.

Projects

A top feature that saves settings for each project you work on. What I like is that I can effectively bookmark folders to appear in the sidebar. It doesn’t sound like much, but in practice it is very useful.

When using projects Sublime Text actually creates two files:

  1. sublime-project which contains the project settings
  2. sublime-workspace which contains user data such as which file are currently open. This file does not need editing, it works a bit like a temp file

You can edit the sublime-project file and do some handy things like hide folders and files based on regex patterns. For example you can hide the .sass-cache folder or the sublime-workspace file.


On white space

Permalink - Posted on 2016-05-26 23:00

I was reminded of a what I think is a common issue with spacing between blocks of text when reading the latest Agilebits newsletter.

1Password for iOS, Mac, and Android

Not to be out done, our other platform teams have been busy and have released updates of their own.

Rick and his Mac team had a great update that improved Large Type and VoiceOver, along with a fix to a slowness issue that was causing some of you grief:

1Password 6.3 for Mac: The Passion Project

Roo is always competing with Rick so his iOS team released version 6.4 to 1-up the Mac team. To add salt to Rick’s wounds they even named their release “The 1-Up Edition” to make sure he would notice:

1Password 6.4 for iOS: The 1-Up Edition

And last but certainly not least, Michael and his Android team have been on fire with 3 big updates since 1Password 6.0 was released:

1Password 6.3 for Android: Seek and Ye Shall Find

With all these new releases things have been busy around here, so much so that we’d love to have your help…

I find when all blocks of text – heading, paragraph, links – are spaced exactly the same it is difficult to associate which link belongs to which paragraph.

More often you see this with the spacing between headings and paragraphs, but really it can between any two types of content.

When the vertical rhythm is monotone, I often find myself having to check what goes with what and the general flow of reading is disrupted.

I also think this gets exasperated when scrolling on smaller screens, as you lose reference to other visual markers.

Even the presence of a colon in the preceding paragraph is easy to miss.

A solution is to actually reduce the space between all text blocks and, in this case, increase the space after the link.

1Password for iOS, Mac, and Android

Not to be out done, our other platform teams have been busy and have released updates of their own.

Rick and his Mac team had a great update that improved Large Type and VoiceOver, along with a fix to a slowness issue that was causing some of you grief:

1Password 6.3 for Mac: The Passion Project

Roo is always competing with Rick so his iOS team released version 6.4 to 1-up the Mac team. To add salt to Rick’s wounds they even named their release “The 1-Up Edition” to make sure he would notice:

1Password 6.4 for iOS: The 1-Up Edition

And last but certainly not least, Michael and his Android team have been on fire with 3 big updates since 1Password 6.0 was released:

1Password 6.3 for Android: Seek and Ye Shall Find

With all these new releases things have been busy around here, so much so that we’d love to have your help…

This goes against a prevalent school of thought that promotes maintaining an exact baseline based on line-height.

In most cases I think it is better to use font-size to space blocks of text.

This echoes Matthew Butterick’s recommendation of using “a space equal to 50-100% of the font-size” as it avoids paragraphs seeming disconnected.

But even doing this, the links still don’t look quite right.

Being separated from the preceding text block they look like headings, so you’re inclined to associate them with the text below instead of the text above.

A remedy for this could be to incorporate the link directly into the text block.

1Password for iOS, Mac, and Android

Not to be out done, our other platform teams have been busy and have released updates of their own.

Rick and his Mac team had a great update that improved Large Type and VoiceOver, along with a fix to a slowness issue that was causing some of you grief: 1Password 6.3 for Mac: The Passion Project

Roo is always competing with Rick so his iOS team released version 6.4 to 1-up the Mac team. To add salt to Rick’s wounds they even named their release “The 1-Up Edition” to make sure he would notice: 1Password 6.4 for iOS: The 1-Up Edition

And last but certainly not least, Michael and his Android team have been on fire with 3 big updates since 1Password 6.0 was released: 1Password 6.3 for Android: Seek and Ye Shall Find

With all these new releases things have been busy around here, so much so that we’d love to have your help…

Tacking a link onto the end of a paragraph I think often comes across as an after thought. Perhaps a better approach is to make the whole thing simpler.

1Password for iOS, Mac, and Android

Not to be out done, our other platform teams have been busy and have released updates of their own.

Roo is always competing with Rick so his iOS team released version 6.4 to 1-up the Mac team. To add salt to Rick’s wounds they even named their release “The 1-Up Edition” to make sure he would notice:

1Password 6.3 for Mac: The Passion Project

1Password 6.4 for iOS: The 1-Up Edition

1Password 6.3 for Android: Seek and Ye Shall Find

With all these new releases things have been busy around here, so much so that we’d love to have your help…


Uses

Permalink - Posted on 2016-04-17 23:00

I always want to know what software other people use when making websites, so I thought I would share the ones I use. I’ve not listed things like web font services as what gets used tends to be per project.

ia writer

I have been using iA Writer since version one and it is my go-to app for everything. I plan, make notes, write lists and articles all in Markdown. I have the iOS version on my iPhone and iPad too, so everything is in sync. I’m also getting into the #tag feature.

sublime text

I have tried many text editors including Coda, Atom and DreamWeaver, but I really do think Sublime Text is the best. It’s quick and has a small footprint of 36.9 mb. Atom by contrast installed over 2 gb of stuff.

codekit

I got CodeKit to do sass for me because I cannot be bothered with the command line. At work I use Koala as we use Windows.

hemingwayapp

You can use it for free online, but I have the paid for version. I use it to edit things I am going to publish, rather than as a tool for writing.

kraken.io

For image optimisation. I use Kraken.io as a step after producing graphics in say Photoshop. I find it can often shave off a few extra kb.

perch

This website uses Perch for managing content. It’s simplicity and price is great!

mamp pro

The main reason I use mamp is to manage the virtual hosts. You can do this manually, but it is bit of a pain. The pro version gives you better controls.

bitbucket

Stores all my code for personal projects and lets me work on my iMac or MacBook Air.

sourcetree

Version control client for managing code on BitBucket. The interface is a little clunky, but it’s free and available on both Mac and Windows.

deploybot

A fancy way to ftp changes to a server but infinitely more robust.

filezilla

For anything else I use ftp on both Mac and Windows. It’s not sexy but it is miles better than DreamWeaver’s built in ftp.

affinity designer

At Blue House Design with use the Adobe Creative Suite, but I loathe their pricing model.

affinity photo

I’ll admit I’ve yet to really use this app as I mostly get by editing in Aperture.

aperture

Despite the fact you can longer buy this app I still manage all my photos with it.

ember

Like Aperture this app is no longer supported. I only really use this for personal projects as mostly as archive of interesting websites. I also had the predecessor LittleSnapper.

pinboard

I’ve used several save for later type services such as Pocket, the now defunct Readability and even Evernote. I love the minimal interface. It’s quick. What I like is that with the paid plan the bookmark is archived, so is accessible if the site is no longer current.

arthur

Arthur adds a prefence pane to the Systems Preferences to toggle hidden MacOS settings. The most useful is to enable hidden files. I use to do this from the command line but always had to Google the right code. This just saves so much time.

imac

Home: 21.5-inch model which I use with a wired keyboard for the number pad. When I bought it the shop assistant looked at me sideways.

Work: 27-inch model which we use to run Windows. No idea why, but there you go.

elevation stand

A special mention for the stand I use at home. I think this is a product Apple should really make, the Elevation Stand raises my iMac up to a much more comfortable height. It’s a shame that it’s only available in one size, but the height is spot on. If you can get hold of one it’s worth the expense.

macbook air

A 13-inch model, the best thing about it is the solid state harddrive. I will never buy any computer without one. It’s blazzingly fast.

apple time capsule

Backs up both my machines and I use it as my Wi-Fi router. You can get quicker drafts these days, but I don’t own any devices that would benefit.

ipad air 2

I use this for reading and testing.

iphone 5s

I’m not a fan of the ever increasing size of mobile phones. I’ve had this model for years and it’s still going strong.

b&w mm1 speakers

The sound from the iMac is pretty good, but these things are wonderful.

sony α6300

I only tend to take photographs when I travel, so for me this is the perfect combination of slr quality and point-and-shoot ease. I use two prime lenses:

  • 38 mm Sony F1.8 lens
  • 19 mm Sigma F2.8 DN lens


Superiors and inferiors

Permalink - Posted on 2015-03-24 00:00

If like me you are a tad compulsive you get hung up over details like using genuine small caps and correct dashes.

I was looking at some superscript and subscript text in my style guide and wasn’t sure whether I was using genuine super/subscript characters.

Sub subscripts close up

On this website I use Cloud.typography by Hoefler & Co. to provide web fonts. I had a few reasons for this:

  • their solution does not use Javascript
  • the overall high quality of their typefaces, and
  • better typographic control

I discovered that instead of using <sup> and <sub> elements to wrap around a string of text, Hoefler and Co. themselves use character references.

Somewhat annoyingly they don’t tell you this or make it clear, but if you look at the page source all is revealed:

Hoefler and co html entities

I think this is actually better, as <sup> and <sub> take normal sized text and just shrinks them down.

For example the popular Normalize.css includes the following rules:

 sub,
    sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
 }

    sup {
     top: -0.5em;
    }

 sub {
     bottom: -0.25em;
    }

True superscript and subscript glyphs are quite different from their shrunken counterparts. Here you can see a comparison between the two:

Unicode html comparison

Notice for example how the number one has an extra pair of serifs and the zero is more vertical.

The Unicode characters also sit more snuggly with the rest of the text – especially the subscripts.

Using character references

The real trick is what glyphs does the typeface you want to use actually have? Also, what happens if you use a character reference that is not in your font of choice?

In theory, the browser will substitute from another font, but the reality can be more complicated.

If your typeface does have the glyphs you need, then using them is easy. Use either:

  • a named character reference (HTML entity), for example &
  • a decimal number, for example &
  • or a hexadecimal number, for example &

It makes no difference which you use, but hexadecimal numbers are preferred because not all glyphs have a named character reference.

Are character references better or worse than sup and sub elements?

It is a legitimate concern whether a string of text wrapped by a <sup> or <sub> is more semantic, or more accessible than a character reference.

I believe on a technical level the answer is no as both are valid markup.

Some will argue that a character reference is not as clear when looking at the source. On the other hand, you can argue that using <sup> and <sub> elements is more verbose and uses more bytes.

The reason I favour character references is that they use glyphs designed specifically for a context. They are not a CSS modified version of another glyph.

As with most web technologies there are some support issues. It is worth checking how well a given character reference performs.

A note about screen readers

I was amazed that screen readers may not announce common characters like the minus symbol (−) or the multiply (×) symbol.

While they should have no problems with superiors and inferiors, it is a concern that well formatted text can become garbage.

List of common character references

The numeric references are somewhat unintuitive. Certain characters were available in earlier encodings – superscript 1, 2 and 3 – whereas other characters were added later.

Glyph Character Reference Rendered
Subscript 0
Subscript 1
Subscript 2
Subscript 3
Subscript 4
Subscript 5
Subscript 6
Subscript 7
Subscript 8
Subscript 9
Superscript 0
Superscript 1 ¹ ¹
Superscript 2 ² ²
Superscript 3 ³ ³
Superscript 4
Superscript 5
Superscript 6
Superscript 7
Superscript 8
Superscript 9
Greater than > >
Less than < <
Non-breaking space    
Ampersand & &
Degree &#B0; °
Degree celsius
Minus
Times × ×
Divide ÷ ÷


Previous and next post links in Perch

Permalink - Posted on 2014-09-28 23:00

For my blog I wanted to have a simple link to navigate between the next or previous post. I went searching for solutions, trawling through the Perch support forum and even looking at things like the 24 Ways code on GitHub.

I came across a solution by Marc Sanders so I grabbed the code and pasted it in.

Success.

It worked beautifully all the way until I got to the first or last post, then something went wrong.

Damn.

After some experimenting, I began to realise that there was an issue with the way the $prev and $next functions were working.

In Marc’s version, the code relied on there always being a previous or next post. As soon as there wasn’t (as with the first and last posts), the function would be empty.

While there was fall back code, because the function was empty the HTML templates never made it. No template meant no markup, so the code would break.

I was also not sure which version of Perch Marc’s code was intended to work with. But as the rest of the code did work, I decided to tweak Marc’s version and came up with the following:

Post.php

<?php

$slug = perch_get('s'); // sets slug to equal postSlug

$html = perch_blog_post($slug, True);  // stores post in variable to use later

$data = perch_blog_custom(array(
    'filter'=>'postSlug',
    'match'=>'eq',
    'value'=>$slug,
    'skip-template'=>true, 
)); // grabs data of current post

$data = $data[0]; // not sure why this is required, but code breaks without it

$date = $data['postDateTime']; // sets the date variable to the posts published date

$prev = perch_blog_custom(array(
    'count'=>1,
    'filter'=>'postDateTime',
    'match'=>'lt',
    'sort'=>'postDateTime',
    'sort-order'=>'DESC',
    'value'=>$date,
    'template'=>'blog/post_prev.html'
), true); // stores post in a variable to use later

$next = perch_blog_custom(array(
    'count'=>1,
    'filter'=>'postDateTime',
    'match'=>'gt',
    'sort'=>'postDateTime',
    'sort-order'=>'ASC',
    'value'=>$date,
    'template'=>'blog/post_next.html'
), true); // stores post in a variable to use later

?>

<?php
    if ($html) {
        echo $html; // display post
    }

    if (empty($prev)){
        echo '<div class="blog-nav"><a class="disabled">Prev</a>';
    } else {
        echo $prev;
}

if (empty($next)){
    echo '<a class="disabled">Next</a></div>';
} else {
    echo $next;
}

?>

Post_prev.html

<div class="blog-nav">
    <a href="/articles/<perch:blog id="postSlug" />" class="prev">Prev</a>

Post_next.html

<a href="/articles/<perch:blog id="postSlug" />" class="next">Next</a>
</div>

How it works. Sort of

What makes this code work is that the first php block is just getting the relevant data and storing it within variables. The second block then uses those variables to display the post and the links.

The clever bit for generating the URLs for the previous and next posts is in the $prev and $next variables.

Here, the database is being queried relative to the postDateTime of the post you happen to be looking at.

The $prev variable is then filtering records that are “less than” the current post’s postDateTime. That is, posts which were published before the current post.

The $next variable works the other way, filtering records that were published after (greater than) the current post.

The template in each of these variables then receives the relevant postSlug to generate the link URL.

Once all the data for the current post ($html), previous post ($prev) and the next post ($next) has been retrieved, the second php block displays the content.

The if/else statement ensures the markup is always complete, even if the $prev or $next variables happen to be empty.

While this code works, I would be lying if I said I knew exactly how.

In particular I’m not sure about $data = $data[0]; or why it is needed; however the code breaks without it.

Also if you need to filter posts by more than one criteria – such as categories or tags – I do not know if it will work at all.

I have posted this solution to the Perch forum and it is also available via GitHub.