October Round-up

A lot of October has been spent dealing with requests from our early adopters and upgrading the build system for code development. The two main feature releases that have come out are:

Now, you have the ability to add as many authorisers as you wish for each of your contractors. Some contractors have more than one authoriser at the client they work for, but, most obviously, it is useful to have at least a second authoriser to approve timesheets when the primary authoriser is on holiday. This was a feature request that was bumped up the priority list as several agencies requested it asap. You can learn how to add multiple authorisers here.

One limitation in previous versions has been that the only user with administrative privileges has been the user who signed up to the system. Often an agency will want two or more users to have these rights- especially where the agency is a partnership! You can now add as many admins as you like to the agency by request. Unfortunately with the workload of the technical upgrades explained below, the delivery of the functionality to do this yourself has slipped to the next release- we’ll update the blog when this happens.

The two upgrades outlined below relate to how we develop code internally within SaveTrees and don’t obviously show up to our end-users. However, we feel it is critical that we stay on the cutting-edge of web technology to ensure we bring the latest benefits to our users as quickly as possible. In the world of the web, if you’re not staying at the front of the field, you’re already at the back. We’ve put a lot of time and work into backend improvements this month, particularly the Webpack upgrade, the Vue CLI 3 implementation and a range of API updates which has limited our customer-facing updates. Nonetheless, these changes are necessary to ensure that we continue to deliver new features quickly and evolve SaveTrees Timesheets to be the best product on the market as quickly as possible.

During October we upgraded to the new version of Webpack, which provides a range of benefits to us as developers. The most significant is that the new version builds the code we ship in about half the time, which speeds up our development process considerably, as rebuilding the code is a constant part of the daily process of writing code. Basically, every time we save a change and want to see that change in the browser, the code has to be rebuilt, which happens up to hundreds of times a day- so even a second saved in building can add up quickly. Furthermore, the less time a developer has to wait to check their code, the less opportunity there is for something to break their concentration while they are waiting. It may seem trivial, but staying ‘in the zone’ is essential to being a productive developer.

Most of the other benefits are highly technical, but include: reduced configuration requirements, more in-built features, better support for new web standards and features … and, of course, many, many bug fixes.

The SaveTrees front-end web code is built on top of Vue, a very popular web front-end framework (similar to React (developed by Facebook) and the older Angular (developed by Google)). This provides a lot of the plumbing we need to take care of the basics like how to handle events (e.g. what to do when a user clicks a button), or how to ensure that the CSS (colors, fonts, padding/margin etc.) is tied up with the right bit of code.
Previously, we used a custom-developed template for handling the Vue build and configuration. However, this rapidly gets out of date, as javascript development moves forward at a lightning pace. it also means that we can’t easily take advantage of all the work done by hundreds of experienced users around the globe to fix bugs, provide new features etc. Therefore, we took the opportunity while upgrading Webpack to switch to using the new Vue CLI 3 framework as the basis for our code builds.

This has given us a huge increase in productivity already, with an improved developer dashboard, faster build times, a common plug-in structure and a future upgrade path. We now have a strong, independent system to keep our fundamental building-blocks up to date.

A particular benefit to end users of the CLI framework is that we now produce separate builds for modern browsers and legacy ones. This essentially splits between one set of files for IE9/IE10/IE11 (‘legacy’ browsers) and another set for modern (basically every other browser (Chrome, Firefox, Safari, Edge, Opera etc.)). Due to the more advanced features in modern browsers, providing a separate build means we can drop such things as ‘polyfills’ (these fill-in missing features where possible in legacy browsers) , reducing the size of the file downloads and therefore improving response times for the site.

• Date pickers now don’t display dates that you don’t want your contractors to select (see header image). For example, when entering a new timesheet, one cannot select a date before the start of the contract, or after the end of the contract (if there is an end-date). Likewise, when setting up a new contractor, the contractor start date cannot be before the contract start date, nor can the contractor end date be after the contract end date.The improved date-picker now handles the various combinations of which dates are valid, simplifying the date selection process for the user.Obviously, invalid dates were not accepted in previous releases, however, this is now much easier for the user, as the visual date-picker lets you know in advance what’s allowable and what isn’t.

• Numerous fixes to legacy IE versions, mostly around layout.
• We have removed the placeholder example password from the ‘Set Password’ input box, as users found this hint confusing.
• We have improved the consistency of colourisation of icons etc. in preparation for agencies to be able to set their own primary colour scheme as part of the upcoming ‘Branding’ feature.
• We have replaced the spinner (which provides feedback that an action is ongoing) on certain buttons with a new component.
• We have added more feedback via ‘toasts’, which pops out of the side after completing an action (e.g. creating a new contract). This helps the user know that an action succeeded or failed with minimal impact on experience.
• Tables now are ‘striped’ and change colour when hovered over, to provide user feedback
• The authoriser timesheet view now hides columns relevant only to hourly contracts when all the timesheets are for day-rate contracts, reducing clutter. This will be rolled-out across the other roles for the next release.
• There have been many other improvements in the code design, particularly better source code layout of components and better code reuse.