Posts

Showing posts from August, 2018

Scope binding for react app

Class level function binding

If you write you code this way, this -> is class scoped. If you have defined username / password in your state, then you will be able to access it.



<ButtononPress={() => { this.authenticate(this.state.username, this.state.password); }} />


If you tend to write you code this way, it means a local binding function,


<ButtononPress={this.authenticate}title="Login" />

asyncauthenticate() {

username = this.state.username; //undefined password = this.state.password; // undefined }

html - applying file accepted for an upload operation

Let's say you would like to apply a filter for file using the following code.


type="file"accept=".xls,.xlsx"/>

Creating simple re-usable component with react native

Lets say we're trying to create a very simple activity busy spinner component. We can use the following code below :-

ActivitySpinner.js

importReact, {Component} from'react'; import { StyleSheet, ActivityIndicator, View } from'react-native';
exportconstActivitySpinner = ({isBusy}) => { return ( <View> <ActivityIndicatorstyle={{position :'absolute', left:0, right:0, top:0, bottom:0, alignItems:'center',justifyContent:'center'}} animating={isBusy}color = '#0a1640'size = "large"/> </View> ); };

In other classes we can import


import { ActivitySpinner } from'../shared/ActivitySpinner';

In render function :-



<ActivitySpinnerisBusy={this.state.loading}/>

Can't find variable: React

Got this message while trying to create a new component and doesn't seem to me how obvious the solution was.




import { StyleSheet, ActivityIndicator, View } from'react-native';
exportconstActivitySpinner = ({isBusy}) => { return ( <View> <ActivityIndicatorstyle={{position :'absolute', left:0, right:0, top:0, bottom:0, alignItems:'center',justifyContent:'center'}} animating={isBusy}color = '#0a1640'size = "large"/> </View> ); };
All i need to to was add


importReact, {Component} from'react';

react native remove header border

Whenever you create your react native app, sometimes you will get double border appearing on your page. To get rid of those you can using the following styling.




staticnavigationOptions = { title:'About', headerStyle: { elevation:0, shadowOpacity:0 }

react global variable - use case scenario - global user name

In react native, using global variables is simply declaring your variable as follows :-

global.myVariableName = 'something'

That's it! :)

Deploying nodejs to azure - things they didn't tell you about

If you deploying your nodejs app to Azure App Service, well it is actually using IIS Node.

You need to update your web.config accordingly, otherwise you will not going to deploy your app and it is not in azure documentation.

Your web.config might look like this :-






In my eample, my javascript file server.js (after it is compile by typescript)  is placed in a folder called "build' (line 6)

Also noticed that we have a custom configuration at line 31.


Sitecore - getting referenced or referencing to an item

Go to Content explorer -> Navigate -> Links

And you get a list of all the items that are related to an item.


Expressjs async router http functions

Awesome thing about expressjs when it comes to support async function is simply to have your code written this way to support async.

Noticed the async keyword after your HTTP Get request method implementation.  That's it!


router.get('/user/:id', async (req, res, next) => { try {
constuser = awaitgetMydataFromServer({ id:req.params.id }) res.json(user);
} catch (e) { next(e) } })

typescript error : es2015

Due to npm library called "@types/es6-shim" i have massive error and wasted 3 hours trying to figure out what went wrong. Luckily all the same error number and end with pretty much the same text - "must have identifical modifier".

Remove @types/es6-shim from your package.json and the folder in "node_modules/@types/es6-shim". Run tsc again Solved.


You might get these errors :-

 error TS2687: All declarations of 'size' must have identical modifiers.

error TS2687: All declarations of 'MIN_SAFE_INTEGER' must have identical modifiers.

error TS2687: All declarations of 'prototype' must have identical modifiers.

error TS2687: All declarations of 'EPSILON' must have identical modifiers.

typescript with azure/cosmo

The following are code snippet to use azure cosmos sql api kit in typescript :-


import { CosmosClient } from"@azure/cosmos"; constendpoint = "https://localhost:8081"; // Add your endpoint constmasterKey = "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw=="; // Add the masterkey of the endpoint
constclient = newCosmosClient({endpoint, auth: { masterKey }}); // Notice database variables are called one after another // asyncfunctionhelloCosmos() { constdbResponse = awaitclient.databases.createIfNotExists({ id :"TestDemo" });
letdatabase = dbResponse.database; constcoResponse = awaitdatabase.containers.createIfNotExists({ id:"DummyTestCollection" });
letcontainer = coResponse.container; console.log("Setting up the container...done!"); // add item to it // const { body : doc } = awaitcontainer.items.create({ 'name' :'jeremy', 'password' :'uGuessedit' }) }
h…

node azure/cosmo throwing exceptions

Bump into another one of these error while trying to use azure/cosmo db :-


{ Error: self signed certificate
    at TLSSocket.onConnectSecure (_tls_wrap.js:1048:34)
    at TLSSocket.emit (events.js:182:13)
    at TLSSocket._finishInit (_tls_wrap.js:628:8)
  code: 'DEPTH_ZERO_SELF_SIGNED_CERT',
  headers:
   { 'x-ms-throttle-retry-count': 0,
     'x-ms-throttle-retry-wait-time-ms': 0 } }



the solution is simply :-

set NODE_TLS_REJECT_UNAUTHORIZED=0




tsconfig.json: Build:No inputs were found in config file

Bump into this issue and the solution is relatively easy,  create an empty ts file in a folder or source directory, for example index.ts.



getting post parameters from expessjs

This is pretty straight forward. If you're using express 4.16, all you need to do is :-



app.use(express.json());
Then somewhere in your code :-



// create user router.post('/create', (req: Request, res: Response) => { console.log(req.body); // Greet the given name res.send(`create`); });

Getting helm to work in your local kubernetes cluster

Image
I assumed you already have helm installed. So let's run your helm charts

helm install --name my-release stable/grafana
Next run,
.\helm status my-release To retrieve your password run the following command :-

kubectl get secret --namespace default my-release-grafana  -o jsonpath="{.data.admin-password}"

And you will get something like this below :-

dU5YcUllZlBRcDdSNUJHYnJnNVFqQXp5NE9ZZ21KS0pMRnhHMTZYUQ==

Copy and paste this over to https://www.base64decode.org/ and decode it.

You probably gonna get this :-

uNXqIefPQp7R5BGbrg5QjAzy4OYgmJKJLFxG16XQ

Which i think is the standard password for Garfana - I could be wrong. :)

Forwarding it to a local port so you can access it using :- http://localhost:3000/login

kubectl --namespace default port-forward my-release-grafana-5657c7854d-m98sx 3000 And this is your login screen :-  And you will see grafana screen as shown below :-











nodejs + typescript + express

You can quickly setup your project by cloning this repo :- https://github.com/appcoreopc/node-typescript-express
Follow the instruction and run  "npm install"



Helm : Tiller not installed

Ran into this problem and you just need to run "helm init" to resolve this issue.

Try running other charts after this.


Unable to connect to the server: dial tcp [::1]:8080: connectex: No connection could be made because the target machine actively refused it.

Bump into this issue earlier and the reason for this is kubectl (kubernetes) is not able to find your config file through a system variable called KUBECONFIG.

Create this environment variable in powershell.  Ensure that you have it point to a user folder called ".\kube\config".

For example,

$KUBECONFIG = $HOME + "\.kube\config"


You might need to restart your Kubernetes cluster. I didn't and then i run "kubectl get nodes" to quickly test if it is working.
If you are trying to setup kubernetes, there is a docker version that comes with Kubernetes and you should use this version 

"Hyper-V PowerShell Module is not available" - when trying to run minikube (hyperV) on windows

Instead of using VirtualBox, you might want to take advantage of your hyperV. (I think using virtual box is probably easier) -

Please note, if you're trying to run kubernetes on a local cluster with docker hyperV, you should know that Docker for Windows supports Kubernetes directly. Please check out this post.

Anyways, should you come down this path, you need Docker-machine version 0.15.0. (v0.14.0) gives you hyperV module not found error".

Please download from here :-

1. Create a folder in C:\kubernetes (you need to place all files in C driver)

2  Please all your .exe file here (you need to download separately)

2.1 kubectl- kubernetes tool

2.2 docker-machine - version 0.15.0 that you can get from here    https://github.com/docker/machine/releases/download/v0.15.0/docker-machine-Windows-x86_64.exe
Rename this file to docker-machine.exe.

2.3 minikube.exe - https://github.com/kubernetes/minikube/releases/download/v0.28.2/minikube-windows-amd64. Rename to minikube.exe

If you insta…

Upgrading expo to latest version

There are some precaution to take care of when upgrading expo-cli to latest version. Somehow adb that resides in your directory C:\Users\username\AppData\Roaming\npm\node_modules\expo-cli might still be lock as it is being used by another process.

Please make sure you kill adb processes before running your upgrade.

Updating to the latest version is relatively easy - just run the following commands :



npm install expo-cli --global

react native - changing border color of list item or list

To ensure you have your top and bottom border color styled correctly, you have need to set List's containerStyle -> borderColor and ListeItem's containerStyle ->BorderBottomColor to your desired color.

This is what you should do (atleast for sdk 29 of expo), for some weird reason :-




exposdk requires expo to run

Image
In my case,  had to change to app.json to version 29.0.0. Then re-run "expo start" to run your app.





expo - metro bundle does not fire up correctly

Image
After upgrading my expo-cli, i can't seems to fire my metro bundler correctly.

Chrome seems to be complaining of invalid javascript MIME type. So i change my browser to Internet Explorer.




After switching, it seems like my Android Expo app are not able to connect to my app. Please make sure you have selected "Tunnel" options and then try again.









Simulating timeout for your redis server (Timeout performing EVAL)

I do not know why people would wanna do this .... .but i was tasked to do this. Maybe for tester to test it out. Here are some of the steps to reproduce this :

1. make sure you have installed redis. then go to C:\Program Files\Redis and run redis-cli
Assuming you are running your redis-server locally.

2. run the command "client pause" (this will pretty much stall your redis-server)

3. Hit into the page that uses redis-cache and you will get a time out similiar to the one below :-

Timeout performing EVAL, inst: 1, mgr: ExecuteSelect, err: never, queue: 2, qu: 0, qs: 2, qc: 0, wr: 0, wq: 0, in: 0, ar: 0, IOCP: (Busy=1,Free=999,Min=8,Max=1000), WORKER: (Busy=1,Free=32766,Min=8,Max=32767)

Normally you get this error when you redis server is running really slow.....




react native complete style properties

Complete list of properties for react native styles are given below :-

https://facebook.github.io/react-native/docs/layout-props

Selenium webdriver exits with error code 135

Bump into this error while trying to setup protractor to run locally on my machine. I do think protractor is awesome.

the problem here is that you need to make sure webdriver-manager is running. Start it using :-

webdriver-manager start