Darragh ORiordan

I had an existing app that was scaffolded using create react app (CRA) and extended with craco. I needed to use PostCSS 8.0 today.

Unfortunately CRA doesn’t support PostCSS 8.0 and I would have needed to use shims.

I know Vite supports what I needed so I thought I’d give upgrading from CRA to Vite a go.

It actually wasn’t too bad! I’m going to update a couple of other apps I’m actively working on. Vite is much faster to work with.

Here are the steps to upgrade.

If you have multiple GitHub accounts like personal and work then it’s important to use the correct account for each repository. Each git client has built in ways to do this with http authentication but this authentication tends to only be set with the specific git client and applies to all repositories you have in the specific application.

It also often means that a different user will be used in shell git compared to your GUI client.

If you want to use the same connection authentication for a git repository from any git client like shell, source tree or the GitHub client then it’s worth setting up ssh for the GitHub account(s) and configuring the repositories to use it.

I use launch darkly to toggle features on an app. There is one third-party dependency that has regular scheduled maintenance and I need to toggle the feature on and off on schedule.

Launch Darkly has built in scheduling to handle this scenario but you have to be on the enterprise plan to use it. The enterprise plan is too expensive to upgrade to for scheduling alone so I needed to find a different way to automate this.

If you’re adding navlinks with react router because you want to set the active class you might find that it doesn’t work. These are the steps I had to take to make this work.

Integrating with an API where a boolean can only be undefined or true I needed to type it. It’s easy enough but I just wanted to jot it down in case any one else needs this in the future.

I needed to replace text that was a bit specific and to use vscode’s regex replace but had to figure out the syntax. Just making a note here for myself so it’s easy to lookup again!

I had to change some of my Git history because I had used the wrong Github user to push some changes to personal projects. I just needed to change the user that committed the code without changing any of the other history. I don’t use rebase very often so here are my notes on this.

I needed to run prettier on only the files changed in one branch of my git repo. This solution is a bit hacky but it did the trick!

If you have a react app you can use env vars like REACT_APP_MY_ENV_VAR in your application and React will automatically pull them in to your app when you build the production application.

This is very useful but if you have variables that change for each environment and your application build takes a long time, you might want to avoid building unnecessarily in CI. For example you might have a QA environment and a Staging environment that have different configuration.

We type-check our code on each build and that was taking 5 minutes+ to build each environment so we had to make it faster. We changed our app from using REACT_APP env vars to using a configuration file that we could quickly write to using CI.

Our CI system is Azure DevOops so the CI scripts here are specifically for Azure DevOps but they apply to most CI systems with small changes.

The real work happens in a node script that would work anywhere.

I had to save the exit code from one part of the script that runs a suite of tests, then run some cleanup and finally return the exit code received previously from the tests.

I haven’t used bash scripts too often in my work so when I had to do this recently I had to spend some time looking up syntax.

This will fail the tests correctly in our Azure Devops pipeline while still cleaning up the docker containers.

My team uses Jira as a project management tool and we use the “Releases” feature to audit our releases and to update our customers.

Atlassian provides a UI to create releases on Jira but we wanted to automate these types of things as much as possible to maintain our level of continuous delivery.

If you use Node and Azure devops you can use Semantic Release to create the release in Jira. I had some trouble figuring out the Jira key format and wanted to share that bit with you. Otherwise the plugin does all the work!

We save an estimated 1 hour per day depending on how many releases we create in a day. Usually 4-5 releases.

By automating a process like this you know it will always be accurate (and not forgotten about)!

Building a new product likely means you’re building as quickly and as scrappily as possible to get to market. For a web app this is usually a short push of 2-4 months and If you’re successful you now have a product that needs to transition to a more sustainable style of development.

Here are some of the things I’ve observed or implemented to make this transition deliberately. Hopefully there are some things here you can use to prepare yourself for transitioning your next successful project!

If you have an iterable filter on a property in typescript you might have a slightly different model coming out of the filter based on the filter condition.

By setting the types correctly you can potentially save having to add manual typing hints in whatever follows the filter.

It’s easier to show this with code so see below!

Thanks to one of my colleagues for suggesting this one in a code review.

If you try to use JSON.stringify() on a NodeJS object you will get an error “Converting circular structure to JSON”. This is because NodeJS objects have circular references.

The way to stringify NodeJS objects is to use util.inspect().

If you build your nodeJS project using typescript, it’s important to know that the typescript compiler tsc will only include files that are .js or .ts.

If you have an issue where you deploy or build a typescript project and you get a file not found issue or similar, it’s probably because you missed that typescript does not process these kinds of files for you.

If you need to include files like XML (.xml) or images in your typescript project build output, you will have to copy them manually before or after the build process.

This is one way to copy assets in a typescript build.

Many organizations use an anonymous feedback mechanism to get feedback from their employees.

However, if you only emphasize an anonymous feedback mechanism or your team is asking for an anonymous feedback mechanism take it as a HUGE red flag around trust.

The people don’t have any safety to talk about their issues with the organization or colleagues in a transparent way. You should do everything you can to provide trust and safety for transparent feedback.

The “Spotify model” is an incredibly popular organizational methodology for managing work across teams. Personally it’s been present in some form in the last 4 places I’ve worked since 2014.

The Spotify model is a matrix organisational model that highly values team autonomy with servant leadership.

Now the critical thing is that you have to enable the team to be autonomous! You need to support the team members at their various levels of experience on how to be autonomous and effective. If you do this you will also get higher engagement in your culture and the actual work.

Sometimes I forget what the best use of the various for loops are in javascript or typescript. This is a short one to remind myself when to use each one. Coming from C# where foreach .. in is the statement for iterables it’s important to remember the equivalent in javascript is for .. of.

Note for myself on how to create guid or uuid on the command line in mac osx.

Converts to lowercase.

I got caught out with Microsoft recently setting the default version of Node.js from 12 to 14 on Azure pipelines linux build agent images (ubuntu-latest). Here are some tips for ensuring node versions are set correctly in some of the popular Azure PaaS offerings.

I received an interesting question yesterday that highlighted how some parts of environment variables in Azure devops are not clear. Here are some things to check if your environment variables aren’t working in azure pipelines.

I find it useful to be able to debug my node application in vscode. It saves you having to write console.log statements to figure out why something isn’t working. I sometimes use the debugger to check my tests too. This is the configuration I use to setup debugging for the main application and the tests.

Short reminder for myself on how to password protect a zip file on Mac OSX command line.

Azure app service ssl certificates do not have a password but other Azure services only allow importing of certificates with passwords set. So this is the openssl snippet required to export the certificate and add a password

At the end of a project or when a person is leaving a team or project, it’s nice to show the impact that they had on the software visually. Git has some built in statistics that will show you tables listing additions and deletions, commit counts and that kind of thing. But you can use gource to create a cool time series visualisation showing the changes over time.

It’s well worth checking out this tool.

I’ve been writing lots of node apps on Azure recently. Azure provides an instrumentation product called Application Insights. The App Insights client hooks in to node requests and other popular parts of the node ecosystem like postgres with almost no configuration.

However If you want to use the performance measurement api you have to actually call the app insights node client api method. I figured since this was measuring some wrapped code anyway it would be a great candidate for an es6 decorator.

I’ve always preferred using a real notebook for jotting stuff down while working at a computer.

I started out using no-name notebooks but I’ve slowly moved to using better quality notebooks.

Here are my notes on some popular decent notebooks!

I’ve been working with jest every day for the past month or so. I had to learn a few tricks as I went. I was mocking, using async, upgrading versions and working in vscode. Here are five things I learned.

A friend asked me to create a tool for logging when one of his staff enters a room to turn on and off machine jobs. It needed to be on the cloud and run on an ipad. He wanted it to be simple and have an MVP fast.

I wanted to see if i could build the tool using no-code or similar. I got it built in around 2 hours using airtable! Though I found that I needed a tiny bit of code to make it more professional by having it on its own url.

Using semantic versioning allows you to completely automate updating versions in package.json and remove any arguments in your team about versioning. Here is how I use it in my node apps.

If you are deploying a node app to Azure App Services you can deploy the node_modules folder as part of the deploy, or you can reinstall the runtime node modules on the host each time. There are some advantages and disadvantages to taking either option.

I was implementing a search REST API and was thinking about the no results status. There are a couple of options that are somewhat valid. There is no perfectly “right” answer and the discussion exposes care for API design, knowledge of http and care for developers who will be consuming the api.

I recently had to add open api extensions for an AWS gateway to the output of Nest’s swagger/openAPI tool. This is how I did it and what I learned.

I needed to cache some data in a NestJS application. Nest provides an awesome module for caching responses from nest http or microservice responses from controllers. But this Nest caching module doesn’t easily allow you to cache from any method using the decorators.

class MyService {
  // I wanted this: Cache whatever the output of the method is based on the key (id in this case)
	@Cacheable((args: any[]) => args[0], ttl:TtlSeconds.ONE_MINUTE)
	public get(id:number): SomeModel{
  }
}

I recently upgraded a typescript project from TSLint to ESLint. I started with the migration tool but ended up just doing it manually. Here’s why and how it went…

UPDATE 10/10/2020: Tslint is being deprecated. You should consider changing to Eslint. I have a guide for that here: TSLint is deprecated: How to upgrade to ESlint.

TSLint will help us identify potential issues in our code by examining how we use language features.

Prettier will format code consistently but needs some configuration to work with TSLint.

Together they make code-reviews easier and faster because if you run both of them you will identify many common code review errors before pushing your code.

There needs to be some configuration to have both work together. Here is my cheatsheet for setting this up on a project.

When you’re reviewing RFP (Request for proposal) responses you make sure that the provider has met all your specified requirements. A provider missing a requirement on the proposal is a bad signal. Then you weigh the response details against each other and finally the price gets calculated and you choose.

But here are 10 specific signals outside of the standard stuff above that I look for.

According to research by Professor Steven Rogelberg 50% of meetings are seen as engaging - of course this means that 50% are not.

From my own experience I would have to agree that many meetings are not very useful. There are too many organisations having meetings that would be better as an email or a wiki document.

I was asked for some advice recently - “Should I apply for this open team lead role if I am not technical?”

In this case I found out that “technical” meant “is a software engineer”.

If you’re employed in a software product development organisation already then the short answer is yes, you absolutely should.

I’m a lazy team lead. I like to ‘free up’ as much time as possible at work. I run away from ‘busy work’ like it’s on fire. Here are four rules of thumb I use to decrease the amount of time I spend doing some management stuff so I have time to think and work on more valuable things.

Code reviews and PRs are deservedly known as a fantastic way to improve code and product quality.

I find that having a checklist is super handy for remembering all the checks to perform and the context to give a reviewer.

There’s always more work to do than time available to do it. Effective prioritisation is very important to provide the focus to be successful at work.

In general prioritisation is some product of effort x cost x time or value x complexity applied to possible tasks. The tasks should be aligned to your strategy.

There are some well known frameworks for prioritisation that I find useful. I’ll describe them here and talk about how to choose one with your team.

I was refactoring some legacy JavaScript recently and saw some things I needed to improve.

Here are the things I noticed with some descriptions.

I’m doing some work on a legacy code base and there are some common refactorings I do over and over. One of my favourite improvements is making long lists of conditionals easier to read and especially test.

I use the common refactor-to-strategies pattern from Martin Fowler to deal with these.

Is testing “slow” in your team? Do tickets pile up in the “ready to test” column every sprint?

If you think that the testers on your team need to fix this you’re wrong!

In a cross-functional product development team balancing the cadence and handover between development and testing is often a pain point. Read on as to why this is team problem and it’s best resolved by getting developers to thoroughly test their own work.

I recently needed to trigger the chrome debugger on a mouse click from an element that gets popped up based on a previous mouse click. The problem was that the code is old jQuery code that manually set handlers and it was all a bit spaghetti. I didn’t know where the click was registered to a handler or which parts of the code ran afterwards so adding a debugger; call wasn’t a great approach this time.

I wanted to send a slack message when a deployment completed on Azure. It’s fairly straightforward but there are a couple of things I had to pull together from documentation on slack, PowerShell and azure.

Here is the script I finished with.

If you try to deploy a static React app to an Azure static site on a storage account that’s behind a firewall you need to allow all the IPs that will be connecting to the storage.

The problem is that the range of possible IPs the devops agents use is huge and changes regularly.

I was trying to deploying a node app to azure app service recently but it kept timing out trying to download all the required modules.

I was able to fix this by specifying an explicit network timeout for the npm install in my azure-pipelines.yaml file

Here is some of the jest configuration I have for a node application in typescript that builds on a CI system.

If you run yarn update on a package, yarn will update the package and your yarn.lock file. This is totally fine. As long as you check in your lock file, your developers and team will all have the correct versions of libraries when they run yarn install.

However it will not update the package.json with the new semver for the package. I kind of found this annoying, if only for aesthetic reasons I wanted to quickly see which minimum versions of packages I was using in package.json.

If you’re publishing a node app on Azure pipelines you will want to publish the output of your tests. The publish tests task on Azure has limited format support so you have to convert the test results to XML for processing.

I need to automate deploys on Azure Devops for a project I’m working on. I want it to work as cheaply as possible so serverless or PaaS was desirable. Read on to see the azure-pipelines.yaml file I used to make this work.

I’ve found this happens sometimes if I manually change the package config. Simple fix.

yarn cache clean
yarn install

Here is what I had to do on windows to make this work

Null is not a GraphQL type so to return null from a GraphQL mutation you have to return a GraphQL type that is nullable. All GraphQL types are nullable by default so you can just return a bool in the schema but return void from the implementation.

It shouldn’t be too common to have a null response though, even for a mutation it could be better to return a state of the created item.

If you get an error when trying to use InstanceType from typegoose as a parameter to a method in typescript make sure you are importing it from typegoose explicitly.

There is a thing called InstanceType defined in JavaScript already. Typescript will use this by default and that’s where the error is coming from.

I have to sort a bunch of work items in to organisational areas so I needed to know what were the distinct categories of objects in an array. In C#/Linq there is a nice IEnumerable.Distinct(f(x)) method available but JavaScript doesn’t have something like this yet. I didn’t want to install a helper like lodash if I could avoid it. Luckily my list was simple strings so I was able to use ‘Set()‘.

I was posting messages to a slack webhook recently and I wanted to post a list of messages in the correct order. I had to await each one before calling the next. I tried a few different methods but only one worked the way I expected it to.

I’m exploring the Azure Devops API at the moment and I find logging out the API responses is far better than trying to understand the documentation.

It seems super obvious now but it took me some messing around to figure out that you need to supply the object as meta data to the winston logger!

I’m currently building a little app that talks to the Azure Devops API and I had to check a bitwise operator in typescript today. I hardly ever do this these days so it took me a bit of time to get it right!

You need to add a gitignore file to your katalon directory or you will have lots of compiled files in your repository and it will be harder to compare changes in diffs when reviewing pull requests. Here is a suitable git ignore file for Katalon projects.

This post describes automatically logging in to a webpage to get a session cookie and subsequently using the cookie for API authentication in Katalon. It shows how you can pass the cookie through a global variable to make authenticated API calls.

I had a deploy on Heroku fail because of a database issue. The code deployed but a dependancy meant that the application couldn’t start. If you try to run git push heroku master you just get “Everything is up-to-date”.

My code didn’t need to change but I wanted the “deploy” to be re run WITHOUT pushing a new commit.

Late last year I had the pleasure of helping a team of students build a prototype for a non-profit here in Auckland. The non-profit needed a prototype to raise more funds and get feedback on their plan.

I’ve helped run teams and mentor junior developers in large organisations. It’s much easier because the support, tools, frameworks, systems of the organisation are already available. For this project the student teams had a blank slate and had to decide on everything from how they would communicate with the sponsors to how they would host the software.

I wanted to write down what I learned and note some of the mistakes I made so that I have a framework for the next time I help new developers!

I use a Windows PC for development and I had a problem where some of my mocha tests were not running on my CI server. The issue was that I use GitLab’s CI system which uses a Linux docker image to run the tests so the difference was the OS. This would also affect teams with developers on both Windows machines and Macs. Here’s how I fixed it…

I had to import a JavaScript in to my React project with typescript and typescript gave me an error. It wasn’t causing my build to fail but it was annoying seeing it in the console. Here’s how I got rid of the error.

Docker on Windows 10 sometimes breaks after an upgrade. When you try to list containers or use docker-compose you’ll get an error on the command line. Here is an easy way to fix this issue.

I’ve been researching using node as a back end for a few months now and SO MANY node articles, courses and project “starters” on GitHub suggest using JWT on your client facing API as a session token.

I think there’s way too much hype around it and people are using JWT because it’s shiny!

Some of us like to make things for the web but everyone finds it super hard to find time to start and finish any side projects. If you’ve been thinking about something for a year but haven’t even started, here are some tips to help you start and finish more stuff!

Bulma is a popular CSS library like bootstrap. It’s not too difficult to add to Gatsby but there are some tricky bits where you need some plugins and the CSS classes can conflict.

Cors protection is a recommended security configuration for any api. It protects your customers from unexpected attacks by blocking websites you haven’t approved.

If you have a devOps team they will handle this for you. But if you are a single maker with an application on Heroku and front end on Netlify you need to implement this yourself.

This is the guide I wish I had when I was researching how to convert a 2013 Giant Defy road bike in to an electric bicycle using a Bafang centre drive kit.

Hi, thanks for signing up to the newsletter.

Mary Meeker (Kleiner Perkins) has released the state of the internet report for 2018 - 294 pages of awesome . Personalised shopping and mobile advertising are growing like CRAZY!

I recently got a macbook at work and I’m doing only web development these days so no Visual Studio. I had to do a bit of reading to get things set up and I don’t want to do it again so here is a post for me!

I lead a team of developers that work on one of the busiest New Zealand websites. We have ~4 million members and ~850,000 unique users every day. Working at this kind of scale means the real people who buy and use our products can get lost behind user personas or Jira ticket numbers.

If you’re selling your teams on some form of agile but the reality they work in is completely different, you are damaging and demotivating your teams through confusion and an impossible to achieve vision. If you’ve adopted ‘agile’ do yourself a favor and check the health of the adoption right now.

A.k.a. how to get the truth from your direct reports while you sit back and eat cake.

You’ve been a manager for a year and you’re not sure it’s all going OK? You don’t know if you’re providing maximum value to your team or which specific aspects of your people leadership to improve?

Here is a quick one. One of my colleagues was trying to figure out how to get the stunning windows lock screen images. They are hidden away in a folder on windows but this script will get them, rename them to .jpg and place them in a folder on your desktop.

Last week I offered to give a workshop on machine learning to share some of what I’ve learned so far. I had 2 goals for my workshop – first, I wanted to show everyone that they shouldn’t be afraid of machine learning. Second, I wanted to get people set up with anaconda so they can continue to learn themselves.

Wow, it’s a week after Startup Weekend Auckland. I’ve had time to get my thoughts straight about the whole experience. I learned a hell of a lot of positive lessons about idea validation, about myself and about working in teams.

Last week I had an amazing opportunity to present about machine learning and innovation to 110 people leaders at my company. It was a mixed audience of technical and non technical people.

I’ve been putting together a React app and I needed cheap, fast hosting so I went to put it on Heroku.

Three weeks ago I discovered the fast.ai course. They offer a practical deep learning course for coders where you get straight in to building neural networks. They provide a huge amount of support through wikis, forums, aws scripts and tooling, videos and book recommendations.

From lunch to acquisition, how Atlassian bought Trello .

Success stories from developers who started at age 35,40,45 .

Web Stock is tech conference like no other, held in Wellington, New Zealand. Once again I left feeling energized and impassioned after listening to all the speakers on such a wide range of subjects.

Web Stock is tech conference like no other, held in Wellington, New Zealand. Once again I left feeling energized and impassioned after listening to all the speakers on such a wide range of subjects.

Seth Godin wants us to stop calling them soft-skills.

A beautiful photo story of Faberge and his eggs.

I recently had a problem where our test analysts use Ready API software from Smart bear but our API authentication does a custom hashing function on the content. For tests to work we had to hash the entire request and apply headers for each test step.

Last year I launched a new API for an integration project. It’s using Microsoft’s WebApi framework. I was looking for a fast way to document the API so I wouldn’t have to do much work and clients could use the API easily. After some research it was obvious that I needed Swagger.