slider

Undesired rc-slider onAfterChange Event

Tech: javascript, npm rc-slider, react

Challenge: The webapp designer choose to have both the rc-slider’s initial state (null), and the lowest actual value (1), be represented in the lowest/left-most node. If the User simply clicks the left-most node, the null value updates to 1 through the RcSlider onAfterChange API. The problem is whenever the next click occurs… anywhere on the page OR on any element… onAfterChange fires again, which is undesired!

Code:

The rc-slider is wrapped with a custom element. We want the rc-slider onAfterChange event to bubble up, so we pass down our “onClick” function. (Note: these elements & functions have been stripped for ease of explanation.)

onClick function:

onSliderClick = (factorIndex, value) => {

if (value === 0) {

this.props.sliderClickedFromDefault(factorIndex, 0)

}

}

React elements:

parent: <Slider onSliderClick={() => onSliderClick(factorIndex, value)} />

child: <RcSlider onAfterChange={onSliderClick} />

 

The initial click of the rc-slider works great! During troubleshooting, we capture the document.activeElement:

document_active_element_1

 

It is the second click, anywhere on the page OR on any element, that causes the issue. Here is the Redux Inspector Action Event Log:

react_log

 

After reading through known rc-slider issues, and speaking with the Great Google, I have not yet found a solid solution or explanation as to why this is happening. My workaround…

Let’s check the activeElement the second time onAfterChange fires. If it is not my desired element (the slider!), do not dispatch an action!

onSliderClick = (factorIndex, value) => {

const activeClass = document.activeElement.className

if (value === 0 && activeClass === 'rc-slider-handle rc-slider-handle-click-focused') {

this.props.sliderClickedFromDefault(factorIndex, 0)

}

}

 

Takeaway: I do not love this solution and am convinced something else is going on here. Although the workaround is effective, I am writing this post in hopes of coming back to it with a real solution & understanding.

 

References:

https://www.npmjs.com/package/rc-slider

{{ng}} Fork & Deploy

Tech: Angular, Kinvey, AWS S3, NPM, Gulp, CLI, Git

Challenge: take an existing Angular 1.5 repo (with Kinvey Data Store, hosted by AWS S3), fork it, and deploy! Luckily, I forked this project approximately 10 months ago. Some of the work will just be a memory jog. The challenge here is connecting the fork to Kinvey & AWS, which was previously done by another developer.

Code:

First, we use git and create a branch (git checkout -B new_app_instance master)  for the new project instance. I used the term ‘fork’ above incorrectly. In order to simplify the maintenance of multiple live, hosted instances of this “To Do List” application, we branch off of master and deploy the various instances separately to unique AWS S3 buckets.

Once on the new branch, let’s add in environment files. Three in this instance: local, dev, prod. Here is the sample format env.local.js.example:

ng_fork_deploy_env_file_ex

The local file allows localhost to connect to whatever instance you’d like, without having to muddle with official dev or prod files.

 

For dynamic elements, we use env variables and conditionals in Angular to display the appropriate text/div per instance.

ENV Variable:

<span flex>{{$ctrl.$state.current.data.title}}</span>

Conditional:

<div ng-if="$ctrl.envConfig.env == 'appInstance2' || $ctrl.envConfig.env == 'appInstance3'">

 

Next, we setup the AWS S3 bucket. Pretty simple because we clone an existing instance. The key here is to turn on static hosting! The S3 bucket will look for Angular’s index.html file as the entry point and Angular will take over.

ng_fork_deploy_static_hosting

 

Ok, the env variables, Kinvey credentials, and AWS instance are in place. Let’s add an npm command to our package.json file for easier deployment (and for this specific app instance):

"deploy:prod": "gulp build --environment prod && pushd dist && aws s3 cp --recursive . s3://to-do-app --acl public-read && popd"

 

Ready to deploy from the cli… npm run deploy:prod … aaaannnndddd error!

ng_fork_deploy_aws_error

 

Looks like there is a region mismatch. I want to check with region I am trying to deploy to:

aws s3api get-bucket-location --bucket to-do-app

 

And the same error rolls in! Something is amiss… time for some googling… I think I have to upgrade my aws version:

aws --version

pip install awscli --upgrade --user

 

Ok, once the awscli is updated, I rerun my bucket location command and realize I am trying to deploy to the wrong branch. Location:

{ "LocationConstraint": "us-east-2" } (and I want to deploy to 1)

 

So, I need to VIM into the aws config file and make an update. Since I have never done this before, I wonder where the file is!

find '.aws'

 

Vi into the .aws file, make the region update, and deploooooooooooooyy!

 

Note: spinning the instance up took 2-3 hours, and this post attempts to hit the highlights for easier fork & deploy in the future. 

react_logo

react-new-project

Tech: React, Node, npm

Challenge: recreating an old Rails project (Skittle Flavor Smasher) by following along to React Up & Running. The book may be a little dated (July 2016 edition), but there is something about working from a tangible book instead of Google searches! (It also serves to add to my science & tech library.)

react_book

 

Code:

With node/npm already installed, let’s navigate to the installation how-to, and:

npm install -g create-react-app

 

Which outputs the setup tree and:

react_upgrade

 

Let’s update:

npm i -g npm

 

And then create our first React app!

create-react-app skittle-smash

 

Setup complete, along with this notice:

You are using Node v5.12.0 so the project will be boostrapped with an old unsupported version of tools.

Please update to Node 6 or higher for a better, fully supported experience.

 

To update… navigate into app directory, and:

nvm ls

nvm use -version- (in this case nvm use v6.10.1)

 

All set! And some helpful output from node/npm:

react_commands

piano

Angular2 Quick Start

Tech: Angular2, TypeScript, Javascript (ES6), Babel, Webpack, Node (npm)

Code:

mkdir ng2

cd ng2

node -v

npm -v

touch package.json

packageJson

 

npm install webpack -g

npm install

touch webpack.config.js

webPackConfig

EDIT: add ‘watch: true‘ to webpack.config.js … this parameter plus running webpack and npm start in separate terminal tabs allows real-time updating of js

 

create file structure (and follow tutorial for files app.component.js, main.js, index.js, index.html)

fileTree

webpack –progress

npm start

 

Note: I will be using this quick start to create a interactive calendar tracking app for piano practice.

Reference:

https://medium.com/angular-2-with-es6/angular-2-with-es6-the-5-minute-quickstart-a9e4eb0bffcc#.w5ylwc5rs

https://angular.io/docs/js/latest/quickstart.html