Byron Buckley

Web Developer; Sometimes I take photos.

Read this first

Triggering Vue UI Updates from Electron’s Main Process

Solution to a problem I encountered while building Notifyer

Download Notifyer

One of the main features of Notifyer is the ability to schedule quotes (or really any message) to be triggered once daily. In addition to being scheduled, users can trigger a random quote with a shortcut key. As I implemented this feature, I discovered that though the OS’s notification would popup, the application interface was not updated with the new quote.

Download Notifyer

Why wasn’t it working?!?! The scheduling and shortcut key functionality lives in the main process, while just about everything that the user sees and interacts with lives in the render process. The renderer listened to my message from the main process, and called handleRandomNote as instructed but would only run the OS’s native stuff, like notifications.

ipc.png

Source: http://jlord.us/essential-electron/#stay-in-touch

So I sought another solution; if clicking the

Continue reading →


How to schedule a daily task in an Electron app

Solution to a problem I encountered while building Notifyer

diligent_notification.gif

One of the main features of Notifyer is the ability to schedule quotes (or really any message) to be triggered once daily. The thing is I couldn’t get the schedule to work overnight or even a few hours later. I’d suspend my computer, wake it later, stare at the clock as the scheduled time passed and nothing would happen.

After adding some logging, re-reading node-schedule documentation, and filing an issue, I finally stumbled upon a solution.

electron.powerMonitor.on('resume', () => {
    log.info(`computer awake: refresh schedule for ${scheduledFor}`)
    rescheduleRandomNote(scheduledFor)
})

Schedule

It occurred to me, probably after reading through old node-schedule issues, that perhaps the problem is with suspending the computer. If node-schedule somehow forgot my instructions when it sleeps, then maybe I need to help it

Continue reading →


What I learned when gh-pages wouldn’t work

  • gulp deploy hmm, that was fast, did it update anything?
  • *checks Sourcetree*, nope nothing.
  • Maybe it’s a fluke, try gulp deploy again, checks GitHub still nothing, aargh! whats happening!?!?
  • Checks gh-pages docs, hmm it has a command line utility, lets try that.
  • Wait where do I put that string? oooh package.json, gee I never knew that.
  • npm run deploy, still nothing.
  • *checks docs again*, “This module requires Git >=1.7.6”.
  • I wonder if the latest version of gh-pages needs a newer Git? git -v.
  • Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.
  • Hmm, The app store did update Xcode yesterday.
  • Run Xcode, accept terms (that I never read).
  • npm run deploy *yaaay! it works!*
  • Which means gulp deploy should be fine as well, and it is.

 TLDR

  • If gh-pages doesn’t work, I should check Xcode, as it seems to be tied to Git.
  • I can set up a

Continue reading →


#a11y-ing up byronbuckley.com

Making byronbuckley.com a little more accessible with WAI-ARIA and progressive enhancement.

From textbooks to #a11y, accessibility is a topic I was aware of but never tried to learn. Recently, I decided to change that by reading Apps for All, an informative introduction to coding accessible web applications.
I was already rebuilding my website around the @DevTipsShow Artists Theme, so I decided to put this new accessibility knowledge to use.

This involved two broad steps:

  1. Fix the issues identified by WAVE.
  2. Fix the voice over issues identified when using a screen reader like ChromeVox.

 Stage 1: Make changes to static areas

Resolving WAVE’s structural findings was fairly easy; all it took was using the requisite HTML tags, ARIA roles and attributes as advised by the book and relevant documentation.
WAVE Findings.png

Getting ChromeVox to narrate nicely typically involves strategic

Continue reading →


Front-end Dev Tools

I recently came across a web tools list1 and decided to compile a similar list of tools that have been making my life easier as front-end dev.

 Tools

As far as tools go, there’s always new stuff and sites like Product Hunt2 ensure folks are in the know for every product under the sun. Nevertheless there are always a few main stays or daily drivers, here are mine.

 Prepros

As the name suggests, Prepros is a bundle of drag n’ drop preprocessing goodness. I primarily use it for SASS, JS Concat and LiveReload support during solo development; but you can throw LESS, Jade and a bunch of other stuff at it. The latest version adds/refines a slew of features that make it a one stop shop for common dev tasks. Get Prepros.

 Harp

Harp is a Node app I came across when I did a web search for “static site builder with simple authentication.” Its sell for our team was built-in authentication, LESS

Continue reading →


Imagine doing user testing on clocks

You know that decades are a recent invention? Decades are hardly a century old. Not the concept of having ten years of course, but the concept of the decade as a sort of major cultural unit, like when I say “the 90s” and you think of flannel shirts and grunge music and great R&B music, or when I say “the 80s” and you think of people with big hair using floppy disks. You need a lot of change for a decade to be a meaningful demarcation. Back in the 1600s they didn’t really talk about centuries as much either. It was all about the life of the king, the reign (of King James and so forth), or the era.

And then they invent clocks and clocks get cheaper and cheaper. Clocks are an amazing experience, right? Two hands, and a bell. This sense of relentless forward motion and they go in only one direction. Imagine doing user testing on clocks.

Clock? That’s the single stupidest thing I’ve

Continue reading →


Using the theme-color meta tag to set the mood on your website

By now many of you might have come across tutorials on how to use the theme-color meta tag to set the toolbar color in Chrome 39 on Android. The instructions are simple enough, and so far I’ve come across a few websites utilizing the feature for consistent branding; [Neowin.net](Neowin.net) for example, clothes the toolbar in the same blue color used in their logo and across their website.

What I haven’t seen in action is dynamic toggling of the theme-color across various pages or sections of a site, so I decided to try it out.

theme-color.gif

My personal website uses a different background color for each section of the page, I wanted to extend this color to the toolbar as well. The process is pretty simple:

First I set the default theme-color to the body text color.

<meta name="theme-color" content="#f2ede3">

Then I “cached” some variables for future use.

var $themeColor =

Continue reading →


SourceTree - the tool that gives me fuzzies

On the SourceTree website, Atlassian makes an audacious claim about their tool; get all the power of Git, without the command line.

Say goodbye to the command line - use the full capability of Git in the SourceTree desktop app. – [SourceTree](www.sourcetreeapp.com)

I have no intention of trying to validate their claim, instead I want to share two moment’s when using SourceTree made me feel warm and fuzzy inside.

 Scenario 1 - Gitflow

The project team decided to use the Gitflow Workflow pattern to manage our repository. Following this decision was a set of instructions for us to install a Gitflow tool at the command line to make things easier for us. As it would turn out, the instructions required Homebrew, so that’s two (hassle-free) installs. Just as I was about to start my feature I noticed something I hadn’t seen before, despite how many times I’ve clicked the “Terminal” icon

Continue reading →


Should I be denied functionality if I don’t use your app the way you expected?

Never miss an important tweet ever again; that’s what I thought when Twitter introduced mobile notifications. This quickly became overwhelming. Often times I’d take up my phone and be greeted with 10+ notifications, these notifications pushed all other notifications off the screen. Each notification lit up the screen, which in turn increased battery usage. I resorted to enabling iOS’s do not disturb feature to temporarily disable all mobile notifications; but I what I really wanted was a better way to manage Twitter notifications. Regular usage was also impacted with frequent banner notifications, interrupting games and other activities.

The notifications had become far too pervasive, so I sought a way to opt-in to tweet notifications when I saw fit. The solution? Allow Twitter notifications to be displayed only in the notifications tray. Using Settings.app, I tweaked the Twitter

Continue reading →


Deciding how to Prototype

In my last post, I shared my process for Designing for Persons with Down Syndrome. I was tasked with researching and designing a budgeting application for an under-served user group. The findings of this research would fuel a prototype to be presented to my graduate class. Having completed my research I had to decide how to prototype the project; should I utilize applications like Axure RP, InVision etc, or should I go straight to HTML? There are arguments and specific contexts where either approach excels. There are also countless articles outlining the wastefulness of static mockups and the ineffectiveness of wireframes, contrasted against designing in the browser where opportunities for code reuse and easy iteration are touted as advantages. So how did I choose?

My initial instinct was to use Axure RP a rapid protyping tool that I had used on previous projects. But Axure had its

Continue reading →