Skip to content

Dev Projects

Projects that are experimental or in active development, and which may not ever be Live sites.

Password field UX woes

TL;DR

How do I know my keyboard is dropping characters on a password field?

The Long

A power cut took out my home server–a Mac Mini running macOS High Sierra. It (sensibly?) has a boot password and encrypted SSD. I brought the system back online to be prompted with the usual login screen. No matter what I did, it would not accept my password.

The Good

After 3 attempts, macOS prompted me with a “reminder” (and suggested I could use a recovery key).

The Bad

The rarely-typed password is pretty hard to enter correctly (that’s on me). But you cannot use a password manager this early in the boot process. There is also no feedback other than the masked characters in the input field, no way to visibly validate the characters being entered into the password field.

There’s a good pattern used in web for assisting here: put the visibility of unmasked password fields in the hand of the user. In my case, the Bluetooth keyboard was misbehaving: it apparently was dropping keypresses (a desperate keyboard swap accidentally fixed the problem).

The UX

Arguably this was all an edge case. I mean how often do you have a broken keyboard? But then you’d be ignoring an accessibility red flag: the input fails due to physical device awkwardness with no user feedback what so ever (other than “try again”). So what about users with alternative input devices?

Apple solved this on iOS. When you tap a key on any field (including password fields) you can get brief flash of that key. Elsewhere on web, a field can toggled between text/password visually, giving the user control of when the field is exposed.

Here’s a demo I put together a while back with progressively enhance password toggling for web:

Screenshot of form with regular password field
Password field (open to see on CodePen)

The question is why this sort of toggle hasn’t made it into macOS.

Personal site refresh and BrowserSync gotcha

This sketch never made it into Sketch App…

After the experiments with branding earlier this week, it was about time I gave my ‘business card’ site at shellbryson.com a lick of paint. Didn’t want anything showy. Just a nice landing page for my main domain that leads off to various places I squirrel stuff.

It’s hand-crafted with no frameworks with SCSS, and a custom grunt job to glue it all together. While grunt has been somewhat superseded by other (“better”) task runners, it’s still dirt simple to put something together that’ll compile your SCSS on the fly and give a live-view (via BrowserSync) in a browser as you’re building. The latter I find essential when building more traditional projects.

The code for this project can be found in github.

Screenshot of shellbryson.com version 1.0
I guess I’m happy with this as a version 1.0.

Dev notes: BrowserSync failing to do anything via Grunt.

Had an interesting issue with BrowserSync and Watch tasks. BrowserSync was refusing to refresh (or even load). Turns out that the task order in Grunt matters a lot when it comes to BrowserSync. Any watch tasks must happen after BrowserSync or it can just silently fail.

Working example:

grunt.registerTask('default', [], () => {
 grunt.loadNpmTasks('grunt-browser-sync');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.task.run('browserSync', 'version', 'styles', 'watch');
});

Personal branding experiments

I’m having a lot of fun working on a personal brand at the moment. Part in due for being back on the market for a new front end role, but also because it has been ages since I got to dig into some design work for me.

But then again, I’m my own worst client. I knew I wanted something tactile, something that hinted at development, design and my nickname (origins decades old, don’t ask), something that would work well online and print. Tough getting all that into something simple.

After much sketching, pondering Pinterest boards, and staring bleakly at empty PhotoShop artboards, it was folding a paper plane for my daughter that inspired the design I’m happiest with.

An image of tiles demonstrating different logo treatments
I think “4b” works best

Then came the iterations, testing out business card and web layouts, but I’m pretty pleased with the results so far.

A stylised letter S

  • A chevron (think </> code)
  • A hint of an “S”.
  • Could be a physical foldable thing
  • Simple and geometric, lending itself for fun animations
  • …and lots of reusable elements.

 

 

 

Which is all fine on paper (uh, in Sketch app), but it needs to work online. Given the nice geometric nature of the elements of the logo, it’s not too hard. This would’ve been a nightmare if I’d started out in PhotoShop, and I’m a big fan of doing as much as possible in Sketch these days.

  • Sketch app (Mac)
  • Sketch ‘edit’ symbols to get corner coordinates for each triangle >
  • Manually enter coordinates as clip masks in CSS (CodePen)

And finally, we can play with it in CodePen. This gives me loads of room for adding nice folding animations (a task for another evening).

React: WordStack (part 1)

This is the first part of a series of blogs as I explore building a small web app in React, with a modern workflow.

Background: WordStack is based on a really simple user story: Tracking daily writing progress via writing sprints. The idea of writing sprints comes from NaNoWriMo—the annual writing challenge where writers across the world attempt to first-draft an entire novel (each) in a month. It sounds like madness. It is (I’m one of those writers). To hit the goal (50,000 words, 1 month) you need to write 1600 words a day, or more if you skip days or miss targets.

One great way to achieve these is to set micro-targets and write in sprint. That is, set a small arbitrary time and write uninterrupted until that time expires. Tracking this is somewhat random. Via FaceBook chat, or the NaNoWriMo forums, or Slack. Many writers use a similar process outside the intensity of November. There is a very simple tracking tool on the NaNoWriMo web site, but it’s only really useful during the competition. This led me to thinking:

Wouldn’t it be cool if there was a tool to help with this?

Wires

First pass of this app needs to be really simple. First, because it’s part a experiment in learning to build production-level React code, part because I want to follow good agile practice and release small and often (MVP).

Screenshot of wireframe for initial application
Early wires in Sketch

I’m not too worried about the desktop layout for this version, so here we have the most basic process: Select your sprint style > visualise the sprint countdown > complete sprint > view progress. I’m not concerned with storing this yet.

Workflow

As this is much an experiment with workflow as React, I’m tracking progress of the project through a GitHub Project.

Screenshot of Kanban tracking for project on GitHub
GitHub project Kanban

The project itself follows standard Gitflow practice (develop branch with feature and release branches) and committed to GitHub.

Screenshot of GitHub
GitHub

IDE

To go with the new technology stack, I’ve switched out my usual dev tools for a fresher, more modern stack set: Atom (with some customisation, plus plugins), Hyper (a very nice, customisable terminal) and Chrome. As I’m focused on mobile for the prototype, it all fits nicely on a MacBook screen.

Screenshot of development environment
Atom, Chrome and Hyper, a great dev combination.

Getting started

Screenshot of directory structure
Directory structure

To get out the door, I started with Create React App and followed the basic setup. It was great for getting a bare-bones React app running. I quickly adapted this to use SCSS (via node-sass) and implemented a folder structure for components that more closely matched the in-house pattern library at my day-job.

Well, it doesn’t look great right now. But that’s not the point. Start small, see what works (and how it could work), iterate:

Screenshot of WordStack

Dev Notes

I’ve been spending a little time with React, and I like it. I’m not a fan of jsx… Mixing JS and markup and CSS into an unholy pot of mystery code just didn’t feel right. Surely this thing would taste awful. I persisted. It tastes pretty good.

Monitoring a site with UptimeRobot

I’m late to this one, but there is a fantastic service called UptimeRobot for monitoring site uptime. A killer feature is the ability to add a simple status page via a subdomain to your site. Example: status.sheru.uk.

First, head over to UptimeRobot and sign up.

Uptime Robot sign-up page

  • There are no sites configured initially, so we need to add one

Adding a site

  • Now you need to decide what site(s) to monitor.

Adding a site to UptimeRobot

  • Once you’ve done this, you can create a custom status page. This can be accessed from clicking My Settings at the top of the page and scrolling down until you find the option for Add Public Status Page.

Adding a custom status Page

  • If you don’t want your public status page to be public, you can enter a password. I left mine blank.

Setup public status page

  • We want this status page to be available on a subdomain of an existing site (status.sheru.uk). Once the form is complete, we need to edit our DNS record (this will be either where you registered your domain, or your server host) and add a new CNAME record. We point this at stats.uptimerobot.com.

Updating DNS record

  • This should be available almost instantly. Visit the subdomain you created and you’ll see your new status page.

Example public status page

You can continue to add as many sites as you like to this status page, or go back and edit the settings if you decide you don’t want this information to be public. You can also create different status pages, with their own privacy settings –but you’ll need to use a different subdomain for each.

Animated CSS reveal on page load

I’m still playing with animations on page load and put together a little demo and some notes.

What do we want to animate?


@keyframes fadeinanimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

Now we can apply the animation to our elements (the .fadein class):


  .fadedin {
    opacity: 0;
    animation: fadeinanimation ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: .2s;
 }

See it in action:

http://codepen.io/shellbryson/pen/pRJqxj

Community site

With the migration to my new development server well under way, I was mulling over what to do with a place-holder page for the building I live in (because, buildings need sites too?)–then yesterday a notice board appeared in the shared hall. No excuses. So I replaced the site on the newly minted server with a hand-spun single page.

Features played with:

  • CSS animation on load
  • Google Maps API

NorthLeithMill.com (+git source)

Screenshot of NorthLeithMill.com
Updated community placeholder site