Boyleing Point

Webdev posts

Sitemaps for Next.js static sites with dynamic routes

Posted by Luke Boyle on the

Filed under technology, webdev

I recently re-built my website in Next.js, and I needed to write a script to generate a sitemap with dynamic static routes.

Github Actions for web apps

Posted by Luke Boyle on the

Filed under technology, webdev

Arguably, the key feature that made Gitlab a market leading platform was their decision to build the platform as an end-to-end application delivery service including version control, CI, Infrastructure, community engagement, and so on. The simplicity that comes with this centralisation made Gitlab really stand out when compared to the Atlassian suite of Bitbucket, Jira, Bamboo. Even more when compared to Github at the time, since their market offering pretty much started and ended at git (with some other things like gh-pages, marketplace, etc).

Converting a WordPress site to a React static site

Posted by Luke Boyle on the

Filed under technology, webdev

The last iteration of this website was a truly insane infinite scrolling carousel that was very overwhelming to anyone who dare behold it, so with this version (which recently had its first birthday) I decided to go with a much more content focused design since I actually wanted to start writing more publicly. There's also something to be said about not confusing people or forcing them into epileptic fits.

Project estimations made easy

Posted by Luke Boyle on the

Filed under technology, webdev

I recently published a post on the Stak Digital engineering blog about our new app Guesstimate and project estimation in general. To read the post, head on over to the post here: https://stak.digital/blog/project-estimations-made-easy

CSS Variables: A Case Study

Posted by Luke Boyle on the

Filed under technology, webdev

In Agander, I made my first forays into colour themes. In a very simple approach, I have two colour schemes (light and dark) which are displayed on the body as a class (scheme-light and scheme-dark) respectively. The general approach for styling a component is as such: _button.scss

CSS Buttons: Solved with Flexbox

Posted by Luke Boyle on the

Filed under technology, webdev

There are two commonly accepted approaches to making buttons with CSS, but both of them are a little bit shit. What if I told you there was another way? (morpheus.wav)

Functional Form Validation in JavaScript (aka: Inheriting bad JavaScript)

Posted by Luke Boyle on the

Filed under technology, webdev

I was recently given the job of rebuilding a particularly bad landing page from an external company. Apart from class names, styles and markup being all over the place, there was a particularly obnoxious form validation script sitting in the middle of the page. An excerpt of the script can be seen below, and this documents the process I took when reviving the JS side of things.

Automating CSS regression testing with Argus Eyes (PhantomJS)

Posted by Luke Boyle on the

Filed under technology, webdev

I have had my eyes on Argus Eyes (http://arguseyes.io/) for quite some time and now I have the time to implement it at work. The interface is rather simple. You define your browser breakpoints, the pages, and the parts of the pages you wish to capture. All components are defined with a name and a selector. For example, ".site-nav" or "body". You define all components in the components array, but then you can cherry pick which ones are used on each page. Such as, homepage may use the hero component, but about may not.

Local Storage Manager version 2.1 is out now

Posted by Luke Boyle on the

Filed under technology, webdev

The latest version of local-storage-manager has had the internal interface greatly improved for tidiness and best practice, and now has the new Namespace feature. Traditionally, you would have to store your data like so:

Running Karma tests for Chrome in Travis CI

Posted by Luke Boyle on the

Filed under technology, webdev

A quick-start guide for running Karma tests for Chrome in Travis CI. When you run Travis on a Node.js project, Travis will - by default - run npm install and then npm test. I first ran into the issue in an Angular project that had tests triggered in the prepublish command. My CI build failed and I decided to remove the prepublish hook and change the name of my test script until I had the time to come back. For months I've been avoiding the issue, but I have finally solved it. The Karma docs suggest that you can run the tests in Firefox with the --browsers flag (see https://karma-runner.github.io/0.8/plus/Travis-CI.html). Travis has since updated so that Chrome can be loaded into the environment. For this to work, you'll need to make changes to your travis.yml file and your karma config file.

JSX in Vue.JS

Posted by Luke Boyle on the

Filed under technology, webdev

I've recently been experimenting with using jsx in Vue, the Vue jsx plugin for babel and using that instead of the standard template pattern. Since there are really not any official docs for the plugin, I'm going to run through a quick usage guide.

React Material-UI touch events not firing

Posted by Luke Boyle on the

Filed under technology, webdev

After much frustration with this issue, I found this section in the react material-ui documentation - React-Tap-Event-Plugin. The custom components like the select field don't work well with the traditional onClick listener, so as a temporary fix, the react-tap-event-plugin must be included in your react project. The dependency is supposedly a temporary fix. See the repo here: https://github.com/zilverline/react-tap-event-plugin

Publishing React components to npm

Posted by Luke Boyle on the

Filed under technology, webdev

Having built and published a few React components to npm, in keeping with the plug-n-play spirit of npm, I have what I believe to be a very simple implementation for both the development and installation of components. I published a boilerplate project to Git/npm and this is now my go-to whenever I need to put together an external component. https://www.npmjs.com/package/@lukeboyle/react-component-boilerplate The basic concept is that you have an index.jsx in a 'src' folder. This should be transpiled to ES5 and output to the root directory called 'index.js'. In this instance, index.js is the "main" in your package.json. You may notice the entry "jsnext:main" in the package which points to the jsx file. This convention was established by rollup (https://github.com/rollup/rollup/wiki/jsnext:main) as an entry point for ES6 modules. The idea is that when you bundle using Rollup (and the ES6 import/export syntax), your ES6 module will be used instead of the ES5 one. Given that we're still largely in the ES5 age, the rollup config

Dynamic Product Filtering in Shopify

Posted by Luke Boyle on the

Filed under technology, webdev

Disclaimer: Shopify is not good. I recommend steering clear and opting for one of many alternatives. It's an extremely closed platform that doesn't encourage innovation and naturally leans towards bad practice. Given this, if you still have to use it, read on.

Agander 2.0 is now out.

Posted by Luke Boyle on the

Filed under technology, webdev

It's been about 2 and a half months since the first official full release of Agander went live, and it's out with the old in with the new.

Google Calendar API - ColorId

Posted by Luke Boyle on the

Filed under technology, webdev

When you request a Google Calendar event it will come with a colorId which is either undefined if user didn't select a colour, or between one and 11 if they did. Since I needed these for Agander, I decided to collate these for the curious. These are the corresponding colours used in the Google Calendar app.

Agander 1.0 is now out.

Posted by Luke Boyle on the

Filed under technology, webdev

Agander started in November 2015 with a vision to unify several of the productivity services I use. With Agander I could now have one tab where previously I had four or five. This post is fairly overdue, but I think it's worth taking the time to appreciate how far the project has come. While I did start in November, the biggest progress didn't start until January 2016. Working a 9-5 job and then coming home to work on Agander until 1AM has been a struggle, but the outcome is the true reward. As of Version 0.1 in December (with vaporware calendar) As of Version 1.0 on March 19th - Agander has now entered a brief period of refactoring and optimisation, after which point, the next set of integrations will be developed to create a more comprehensive

Google Task Javascript API - Invalid Value 400 Error

Posted by Luke Boyle on the

Filed under technology, webdev

After a long battle with the weird Google Task Javascript API I've established a module for Agander that has the ability to: