Pages - Menu

How to Install posh-git Behind Firewall


Trying to install posh-git following the installation note, but getting some error.


Powershell version 2 or above. Version 5 can be downloaded here.


Major  Minor  Build  Revision
-----  -----  -----  --------
5      0      10586  117

Script execution policy must be set to either RemoteSigned or Unrestricted.

$ Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Confirm


$ Get-PSRepository
WARNING: Unable to find module repositories.

These errors are indicating that there are no repository available. I have installed posh-git many times and this doesn't look normal to me, since I am also having some proxy issue with my new machine, I am suspecting it could be a firewall / network issue.

I tried some of this, but not much luck.

WARNINGS: Do not use npm install -g posh-git. It is a replica of the original posh-git but not the same package as the genuine one. Look at the package note, it stated that "This is a new project, it's currently working only on Linux..." and the author is not dahlbyk.

$ Install-PackageProvider -Name NuGet -MinimumVersion -Verbose -Force

VERBOSE: MSG:UnableToDownload «» «»
VERBOSE: Cannot download link '', retrying for '2' more times
VERBOSE: MSG:UnableToDownload «» «»
VERBOSE: Cannot download link '', retrying for '1' more times
VERBOSE: MSG:UnableToDownload «» «»
VERBOSE: Cannot download link '', retrying for '0' more times
WARNING: Unable to download the list of available providers. Check your internet connection.

$ choco install poshgit
# I cannot even get chocolatey to install because of the same proxy issue... so not an option

$ (new-object Net.WebClient).DownloadString("") | iex install-module posh-git

Exception calling "DownloadString" with "1" argument(s): "The remote server returned an error: (407) Proxy Authentication Required."


Finally, I went back to the basics, I bypassed the firewall but a direct git clone to the source code and solved the issue.

$ git clone
$ .\posh-git\install.ps1


I found the default color was a little too dark against the dark background color, so I made some changes in ~/.git/config to make it easier to read.

    ui = true 
[color "status"]
    changed = magenta bold
    untracked = yellow bold

Better contrast after changing the color

Google AMP Hackathon 2017

Google AMP Hackathon

Recently got invited by Google to join their AMP Hackathon at the Sydney HQ. Very exciting opportunity to get my hands dirty with the engineers from the Google AMP team. Here are some prerequisite courses that we have to do before the day.


The performance of AMP is very impressive, it is not hard to see pages loaded in under 2 seconds, and here is the trade off for the speed.
  • No external JS (aka no React / Angular etc)
  • No external CSS (no bootstrap)
  • Inline CSS limit to 50kb
As we can see immediately why the site can be loaded at such lightning speed. As their engineer described, "it is very hard to make amp page to load slow".

During the hackathon, I went for a harder piece of work. I was trying to build the sorting filter in the product listing page by using amp-bind and amp-list, similar to one of this.

This is what a product listing page looks like on our site.

My attempt of our product listing page by using AMP.

Using amp-bind and json to render the sorting options in amp-list.

<select on="change:AMP.setState({
  src: '/json/related_products'+event.value+'.json'

<amp-list class="items"

The last part is to assemble the json for the amp-list to consume and presented by amp-mustache. The json is exposed from our back end system.


In their presentations, we also briefly went over the PWA stuff. Seems like an interesting combo to use both AMP and PWA by using the amp-install-serviceworker component.

Additional Readings


Had a little guided tour in the office and snapped some photos with my mobile phone.

Corridor and lift area look like a train carriage.

Using redux-persist to Persist and Rehydrate


Our product listing page is async loaded by react ajax calls. We want to handle a 'browser back button' scenario that when the user click back, the ajax parameter will persist and the same products can be loaded on the page. A common problem when making ajax call that would change a page content after the page loaded.



Install redux-persist and follow the doc to setup the enhancer.

In order to achieve what we want, we need to first persist our state somewhere, then retrieve and rehydrate the state.


As opposed to the blacklisting example, we are doing it by whitelisting.

persistStore(store, {whitelist: ['myReducer1', 'myReducer2']}, () => {
  console.log('redux-persist rehydrated')

Redux-persist will raise an action called 'persist/REHYDRATE' and we need to create a reducer to handle this.

import {REHYDRATE} from 'redux-persist/constants'

const reduxPersist = (state, action) => {
  if (state == undefined)
    return Object.assign({}, state, null)

  switch (action.type) {
    case REHYDRATE:
      if (action.payload.myReducer1 && action.payload.myReducer2) {
        return Object.assign({}, state, {
          myReducer1: action.payload.myReducer1,
          myReducer2: action.payload.myReducer1
      return state
export default reduxPersist

This will persist our state in a state called reduxPersist. It is a preserved keyPrefix for the localstorage default key, so that autoRehydrate can retrieve the persisted state.

Only myReducers are persisted, others are not persisted.

Auto Rehydrate

We can rehydrate a state either by using autoRehydrate or manually doing it.

To setup autoRehydrate, we just need to add an enhancer to our store. Then our state tree is automatically rehydrated when we reload the page.

const store = createStore (
        applyMiddleware( thunk, logger ),

Manual Rehydrate

Who likes driving manual transmission these days? I do and it gives me more granular control over what I want to achieve.

To setup manual rehydrate is not as hard as it sound. We just need to pass in the reduxPersist payload in the action and utilize it in the reducer.

In the action,

return {
  myFields: somefields,
  payload: payload

In the reducer,

  var shouldReadCache; // some boolean custom logics
  if (shouldReadCache)
    return Object.assign({}, state, {
      myFields: action.payload.myReducer1.myFields
  else {
    return Object.assign({}, state, {
      myFields: action.myFields


Auto rehydrate works out of the box like a charm if implemented correctly, but manual rehydrate still has its place especially for more complicated scenarios. I did not run into race conditions like other people did, but our fetch calls are usually wrapped by using the promise.

Git Ignore Conflicts During Rebase


During a git rebase, I am getting conflicts on artifacts that I am not interested in merging.

For example, I am only interest in merging scss files but not the css, because the css is already minified and will be hard to merge via mergetool. A more sensible way is to ignore the merge and recompile the css at the end of the rebase.


On a typical git rebase master, you may get some conflicts like this.

According to advanced git article, this can be achieved by using skip.

$ git rebase --skip

Git will try to do an auto-merge on the files and leave dirty files in the folder. From this point, we can recompile our css and git add them.


If your code base require you to check in compiled artifacts, highly recommended to do that as a separate commit. That will make your life easier on merge and rebase.

Redux Form - How to Set Checkbox Initial Value


We have a very simple requirement that wants to conditionally default the checkbox to checked for our checkout page.


Since we use react/redux, so naturally we use redux-form (currently at v6.8.0) for our form fields.

For a checkbox, our code will be like this.

<Field name={this.props.fields.addToAddressBook}
 onChange={(e) => this.handleIsAddToAddressBook(e)}

My state has the isAddToAddressBook: true.

However, in my console, the value is null even when the checkbox is checked.

Arguably we can use the checked field instead of the value, but Demandware doesn't allow that, so let's fix the value.

Tried a few different ways and still getting empty value.


value={this.props.isAddToAddressBook ? 'true' : 'false'}

I also tried using defaultValue,


it sets the defaultValue but not the value.


<input className="form-indent label-inline"
 onChange={(e) => this.handleIsAddToAddressBook(e)}

Surprisingly and ironically, the solution is not to use redux-form field but normal redux binding.

Not an elegant solution if you need to write your own validation handler, but if validation is not required, this is actually cleaner. If it doesn't need to be in redux-form; then it shouldn't be in redux-form.



Setup a Tealium Tag by Data Layer and Extension


Tealium is a powerful tag management tool. Adding a tag is easy and straightforward, but things get a little complicated when I was trying to convert a tag to share between sites in our multi-tenant environment. 

I found some documentations but not examples on this topic, so I decided to make one and hope to serve well for those who maybe in need.



The simplest way to add a tag is by going to the Tags tab and click Add Tag. In this example, we are adding a Rakuten Linkshare tag with an example merchant id 12345.

Data Layer

Defining a variable in data layer is useful when we want to pass dynamic data to a tag.


In an extension, we can apply technical and business rule to assign different values to a variable, so we can share the same tag between multiple-tenant sites.

Instead of hard coding the merchant id 12345, I am now able to setup a rule to assign different ids to different sites base on different rules.

Data Mapping

Finally, we can map this variable to our tag. The destination should be the javascript query string variable name depending on the technical spec of the image tag.

<img src="">

For rakuten, it is the mid that we need.

Load Rules

Optionally, we can conditionally load the tag depending on business/technical requirements. For the rakuten tag, we only want to fire on the order confirmation page, so we will create a rule for the definition of order confirmation page.

Final Tag

Finally, the tag will look like this. Noticed now we can leave the merchant id empty, and the Tealium will do the magic by using the Data Layer and Extensions.

Migration from CSS to SASS and SMACSS


As part of our technical debt clearing exercise, we want to migrate our existing CSS to SASS and introduce a SMACSS / BEM pattern to the system. And here is my checklist.



Technically it is not a difficult exercise. SASS is backward compatible with CSS anyway. In my eyes, the difficult part is not just to get the job done but to get the job done right.

First and foremost, we changed the extensions from .css to .scss. and started compiling with compass. Previously, we did not have any lint tool for our CSS, so we picked up some syntax error or misspelling such as !impotrant, wasn't so important after all.


Next part is the refactoring. We opted for the SMACSS pattern because it was easy to follow and was not too much effort to implement as part of the refactoring. I would totally voted for BEM too, but it was more effort involved to change the DOM, so we left at that.

Multi Tenants

By using variables or mixins in SASS, multi-tenant projects that share the same code base or DOM elements will find that the ease of changing all base settings in one centralized _variable.scss can be very intuitive.

For example, base fonts can be changed easily without a big gun of find and replace.

$font-family-sans-serif:   'Gotham Book', Arial, Helvetica, sans-serif;
$font-family-serif:    Georgia, 'Times New Roman', serif;
$font-family-base:     $font-family-sans-serif;
And reference code will be the same across multi-tenants.
.btn { 
  font-family: $font-family-base;

Mobile First

We were using the older version of bootstrap and version 4 has been and still on alpha release, so we ditched bootstrap and had a fresh start using bourbon and neat.

Instead of using media queries to target mobile audience, we took the mobile-first approach and our CSS is built on mobile experience, then using media queries to target tablet and desktop where we see fit.

For example, our mobile design for the cart page looks like this. The COLLECT IN STORE button is full width and looks fine.

However, the button is too long on desktop.

We can change the styling by using media query.

@media (min-width: 768px) {
  #clickandcollect-button {
    display: inline-block;
    width: initial;

And the width will reset to initial depending on screen width.


If you are using any SCM, you will need to ignore the .sass-cache folder. We use git so in our .gitignore, we need to add one line.



Migrating from CSS to SASS can be value added to any type of projects. It fits both agile or waterfall teams because CSS can fallback as SASS during the compress compilation. The code will not look too ugly and still production-worthy while migration in progress.

As part of our refactoring process, we removed all the legacy !important in CSS which was very !important for me!