Thursday, January 25, 2018

Toggle between Fish and Bash Shell

Love Fish Shell? But want to toggle between Fish and Bash? I know I do this at least a few times each time. I mainly need to do this as I copy-paste some script from the web and Fish complains it “does not like certain characters”

Well here is how you can toggle between the Fish and Bash Shells without leaving your command line.

In your Fish terminal, type “bash --login” to switch back to your Bash terminal

In your Bash terminal, type “fish” to switch back to your Fish terminal

You're Welcome :)

Thursday, January 11, 2018

Fixed a Dokku App that is "Locked" due to a Previously Interrupted Build or Deploy

Just got this new error when trying to deploy to a Dokku box:

remote: app is currently being deployed or locked. Waiting...

This can happen if a previous build and deploy was interrupted by you or the origin server or if the app crashes in a live box and Dokku is unaware for some reason.

With a little investigating and it appears Dokku locks by creating an empty hidden file:


// or it may be called

Deleting these files will fix your problem.

My Linux / Shell Cheat Cheat

Here is a list of Shell Commands that I find useful. I'm keeping a log here so I can refer back whenever needed - which happens a lot when I'm debugging live server issues :)

// Check disk space
df -h

// Show total folder size is human readable format - very useful to debug out-of-disk-space errors (to locate the problem)
du -bsh *

Update SWAP space (if you already have configured SWAP before)
1. Make all swap off

sudo swapoff -a

2. Resize the swapfile 

sudo dd if=/dev/zero of=/swapfile bs=1M count=1024

3. Make swapfile usable

sudo mkswap /swapfile

4. Make swapon again
sudo swapon /swapfile

Thursday, April 20, 2017

Move Working Code Changes to new GIT Branch without Stashing

If you are like me, you will probably find your self working on the "master" branch of your project most of the time (when you are the sole contributor on a project of course...). Often I start working on an issue that has been raised by my users confident that I can fix it quickly in one go. But I soon discover that it is far more complicated than initially thought and regret not creating a new "issue branch" to work off (so my master branch is clean and the commits are atomic to features/issues I'm working on)

I often face this workflow problem when I'm working on my open source project React Stepzilla for example.

Here is what I do now when I come across this GIT workflow problem:

  • Locally on my computer I've checked out "master" and I'm working on a new github issue with id 27 (for e.g)
  • I modify multiple files trying to fix the issue
  • I then discover that I'm not going to be able to complete the fix easily and regret not creating a new issue branch "issue-27"
  • Running "git status" shows me all my changes so far to the "master" branch
  • I then run "git checkout -b issue-27". This will create a new branch called issue-27 with all your local changes.
  • I'm now in a new local branch called "issue-27"
  • I continue my work and stop for the moment, I then add my code via "git add -A" and commit it using "git commit -m 'Working on #27'" (putting the #27 here makes the code change referenced in the github issue, which is nice...)
  • I then push the new branch to origin and track it "git push -u origin issue-27"
  • If you checkout master now and run "git status" you will notice that the changes are not longer "pending" here and your master is clean.
  • Once you are done with your work on the "issue-27" branch, then your can merge the changes into "master" via a github "pull request" or locally and then delete the "issue-27" branch.

Hope this helps you guys, also here is a good stackoverflow that tell your more.

Monday, April 3, 2017

React Stateless Components used for Routes don't work with Hot Module Replacement

This article is relevant for: 
- react 15.4.2
- react-router 3.0.0
- webpack 2.2.1
it may or may not work for other versions.

I've had this issue many times in the past and yet I cant seem to find a proper solution. I'm documenting it here so it may be of help to others who have hit this roadblock and drank themselves silly.

This Github issue seems to relate to this as well...

Say you are using React, React-Router and Hot Module Replacement via webpack.

You many have a combination of React components that inherit from React.Component and Pure Components.

So a React Class Component like so (e.g. ProfileComponent)

class Profile extends Component {
  render() {
    return (

And a "Pure" React components (e.g. DashboardComponent)

export default () => {
  return (

And let's say you configure React Router to expose these Components based of these routes.

const Routes = [
    path: '/',
    component: App,
    indexRoute: { component: HomeComponent },
    childRoutes: [
          path: '/profile',
          component: ProfileComponent
          path: '/dashboard',
          component: DashboardComponent

ReactDOM.render (
    <Provider store={store}>
      <Router routes={routes} history={history} />

In the above example, Hot Module Replace will NOT work for "DashboardComponent" but it will work fine for "ProfileComponent".

This seems to be well known issue actually with no obvious fix.

The issue seems to be related to the "first level" Route Component specified by a React Router Route and where this "first level" component cannot be a Pure Component!

But nested 2nd, 3rd or Nth lower level components for a Route can be Pure and Hot Module Replacement will work fine.

e.g let say this ProfileComponent actually nested a Pure Component called <Button>

class Profile extends Component {
  render() {
    return (
        <Button />

And Button was this:

export default () => {
  return (

You can update anything in <Button> and it will work with Hot Module Replacement.

So in summary, until this issue has been solved (if it has then please send me a comment) make sure that your "first level" Route Components are NOT Pure....

Annoying? Yes.... and I feel your pain. 

Wednesday, February 15, 2017

Atomic UI / API Pattern

One of the main issues that UI Products face when it deals with a MicroService backend is the need to coordinate API calls and successfully commit all changes (when made by the user) in a Atomic level. It's tricky to do this as individual API calls can fail or be slow to respond and the UI might will probably maintain an interim Data State/Store (basically an object in memory) which then needs to be remapped to the API schema and saved over REST.

Let's look at an example:
  • Our UI Screen needs to render something (trigged by a Client side Route Change on the Single Page App - SPA)
  • The screen requires data from multiple MicroServices as the Screen is composed of different object elements, it makes multiple MicroService calls to gather all data needed to generate the Screen Content and Input Forms
  • User interacts with the data (adds something, edits something etc) - the UI App has to maintain these changes locally using an interim, browser based Data State/Store
  • User commits to publishing the data in the screen (which they have edited via a form) and "Saves" it. Business Logic in the UI needs to coordinate and remap the local Data State/Store to the various MicroService endpoints and SAVE/PUT

There are multiple failure points to this approach:
  • If the local Data State/Store is not handled with immutability then there will possibly be side-effects to that data (caused by bad coding)
  • On saving, some API calls may fail whilst some may succeed. This will cause a disconnect in the UI level as to what the server knows to be the correct data and what the UI believes to be the correct data (as the local UI will be bound to the interim data state)

One approach around this is to follow an atomic API -> UI relationship.

Where ONE Screen gets all it's content from ONE API and saves back to ONE API.

I'm not sure if there is a term that describes this pattern (if there is please correct me in the comments), but I'm calling this the Atomic UI/API Pattern.

This seems to be a common practice followed by the large UI Products in the world (Netflix, Facebook etc) using tools such as GraphGL.

I'll write more on this soon...

Friday, December 16, 2016

Apple Mac Webcam Camera not working? Here is a Quick Fix

I had to take a urgent video call today on my Mac and at the last moment found that my built in webcam was not working. In the browser, the video plugin to display the webcam feed was showing "Camera not found" and in other programs like Skype the video webcam feed was just showing a black screen.

Seems a restart would fix it (based on my reading online) but I had to fix it quicker and didn't want to restart the machine as I had some tasks running which I could not stop. I then found this below command which fixed it immediately. 

sudo killall VDCAssistant

Just open your "terminal" and type that and hit enter (you will have to enter your admin password).

Hopefully that will fix it for you too! 
Fork me on GitHub