Showing posts from 2018

apollo server - getting started

To get started using apollo server to support graphql query that will expose all your data to a web client, you just need to install the following dependencies.

npm install --save apollo-server graphql
Now lets expose some  data in our server. 

const books =[{ title:'Harry Potter and the Chamber of Secrets', author:'J.K. Rowling',},{ title:'Jurassic Park', author:'Michael Crichton',},];// Type definitions define the "shape" of your data and specify// which ways the data can be fetched from the GraphQL server.const typeDefs = gql` # Comments in GraphQL are defined with the hash (#) symbol. # This "Book" type can be used in other type declarations. type Book { title: String author: String } # The "Query" type is the root of all GraphQL queries. # (A "Mutation" type will be covered later on.) type Query { books: [Book] } `;// Resolvers define the technique for fetching th…

Getting started with apollo client

$ npx create-react-app react-graphql $ cd react-graphql $ npm start

npminstall apollo-boost react-apollo graphql --save
Copy and paste this in your app.js and you're good to go.

importReact, { Component } from'react'; importlogofrom'./logo.svg'; import'./App.css'; import { ApolloProvider } from"react-apollo"; importApolloClientfrom"apollo-boost"; importgqlfrom"graphql-tag"
constclient = newApolloClient({ uri:"http://localhost:4000" });
client .query({ query:gql` { books { title author } } ` }) .then(result=>console.log(result));

classAppextendsComponent { render() { return ( <divclassName="App"> <ApolloProviderclient={client}> <headerclassName="App-header"> <imgsrc={logo}className="App-logo"alt="logo"/> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="…

Gatsbyjs Working with images

Let's say we have an image called 1.jpg located in our folder called "assets". We would normally display it using

Easy enough.

Why do you want to use gatsby image sharp plugin, that's because we want to 'size' our image for different screen resolution settings.  For example, you might want to target mobile devices or desktop, you don't have to create multiple images.

Now if you work with Gatsby, normally we use graphql.  First we need to install a plugin called "gatsby-source-filesystem".

resolve:"gatsby-source-filesystem", options: { name:"assets", path:`${__dirname}/static/assets/` }

Our image reside in this folder "static/assets". If you have a 1.jpg in here, go to http://localhost:8000/___graphql

Paste the following code :-

query {
  imageMain: file(relativePath: {eq: "1.jpg"}) {
    childImageSharp {
      fluid(maxWidth: 1000) {

Gatsbyjs - Getting data from external data sources

There are many ways you can do this. For this post, we will be using graphql approach.

Extend gatsby-node.js

Add the following code to gatsby-node.js

createPage({ path:`/allPokemon`, component:require.resolve("./src/templates/all-pokemon.js"), context: { allPokemon }, }
What is happening is that we are configuring any request that comes through /allPokemon, we will route this to a template called all-pokemon.js. Please make sure you have create following files in a template folder.


importReactfrom"react" import { Link } from"gatsby"

exportdefault ({ pageContext: { allPokemon } }) => ( <divstyle={{ width:960, margin:"4rem auto" }}> {allPokemon} <h1></h1> <h2>Abilities</h2> <ul> </ul> </div> )

Start gatsby is you haven't and navigate to http://localhost:8000/allpokemon.

riselab : ray - installing on windows is not supported

If you're thinking downloading and install ray on windows, it is not currently supported.

Best is to spin up a docker linux container and then try to install ray using the good old "pip install ray"

gatsby starters

gatsyjs starters can be access via this url.

Microservice pattern - build tool tooling infrastructure

Debuggable and tracabile. 

Build tools should be debuggable and traceable. It is often hard to figure out what's going on when an artifact is being built.

Configurable Task 

Build tools needs to be configurable and what i meant by configurable is these tools needs to be able to run more common task such as 'git clone', 'running build', 'removing folders and files'.  Other task could be docker task or even repository task.

Configurable tooling 

As we move to microservice oriented mindset, we need to have a build tool that allow us to specify which version of nuget package we would like to use.

Maybe one of the best way to do this is to have a folder called tools and then a configurable json file that specific which tools to download

resolving vscode thenable

vscode Thenable is a promise, we just need to return a promised of a type, as illustrated in code below :-

classCodeCompletionItemProviderimplementsCompletionItemProvider { publicprovideCompletionItems( document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken): Thenable<vscode.CompletionItem[]> {
letlinePrefix = document.lineAt(position).text.substr(0, position.character); if (linePrefix.endsWith('std.')) { console.log('great stuff!!!!');
// returning thenable // returnnewPromise<vscode.CompletionItem[]>((resolve, reject) => { constdockerRunTask = newvscode.CompletionItem('crapRun'); dockerRunTask.insertText = newvscode.SnippetString('\n{\n\t"task": "dockerRunTask", \n\t"desc": "${1}"\n}'); resolve([dockerRunTask]);                 });              } returnundefined } }

GitKraken throwing weird exception - unable determine remote when it comes to pull or push

Happen to be one of those weird things that's happening. Probably not GitKraken fault.

Whenever i tried to pull or push, I had had error message like :-

a) cannot determined remote

b) fullname is undefined

I suspect this is because I cloned my repo using Sourcetree and then try to push / pull using GitKraken.

To resolve this I abandon my repo and reclone using GitKraken. After that I don't faced any issues.

Vscode : Extension is not compatible with Code 1.17.0

Bump into this issue the other day and i wasn't able to fire up my 'Hello world' extension after running "Yo Code".

By going to "Help->Update and Restart" resolve it for me.

Hope this helps.

Docker - environment variable during build

Yes it is quite possible to set environment variable during build ,

Example snippet from Dockerfile,

RUN cd c:\app; .\some.install --version $($env:CLIVERSION)

If you notice code above, you can immediately tell that , $($env:VERSION)  is the variable. 

So when we  run it we do something like :-

docker build -t  netcorebuilder --build-arg VERSION=1.0.19

hadoop on docker as a single cluster

Start your instance by running the following command :-

docker run -it sequenceiq/hadoop-docker:2.7.0 /etc/ -bash

docker run -it -p 50070:50070 sequenceiq/hadoop-docker:2.7.0 /etc/ -bash

You can browse using the following url

Next, run the following commands :-

>docker run -it -p 50070:50070 -v c:/tmp/hive:/hive sequenceiq/hadoop-docker:2.7.0 /etc/ -bashFor docker toolbox you might need to run the following command :- docker run -it -p 50070:50070 -v /hive:/hive sequenceiq/hadoop-docker:2.7.0 /etc/ -bash To submit jobs $HADOOP_HOME/bin/hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.7.0.jar grep input output 'dfs[a-z.]+' $HADOOP_HOME/bin/hdfs dfs -cat output/* Turning on Hive (this step is optional)
To enable Hive, 

Please download and install Hive (basically extract it - :) to c:/tmp/hive (the command above already mounts it to a hive directory in your…

docker push - server gave HTTP response to HTTPS client

If  you're getting this when trying to push a docker image, most likely you need to enable insecure registry (in my case) or register a docker registry.

Goto Docker -> Settings and then under the Daemon tab, enter your insecure registry. In my case it is

And then you should be able to work your magic.

To build, run

~/Dev/emscripten/emcc -O2 lzip/lzip-full.bc -o lzma-full.raw.js

~/Dev/emscripten/emcc -O2 lzip/lzip-decoder.bc -o lzma-decoder.raw.js

getting started with enscripten

Please make sure you have python 2.7 above installed in your computer. And git too.

Next, type python to make sure you have it your path. 

cd emsdk



If you type emcc on your command prompt you should be able see some program running asking for file input. This file is located inside the following path :- emsdk\emscripten\1.38.20

Save the following into a file called test.c

/**Copyright2011TheEmscriptenAuthors.Allrightsreserved.*Emscriptenisavailableundertwoseparatelicenses,theMITlicenseandthe*UniversityofIllinois/NCSAOpenSourceLicense.Boththeselicensescanbe*foundintheLICENSEfile.*/#include intmain(){printf("hello, world!\n");return0;}
Next compile it using the following command :-

emcc test.c -o test\hello.html

Since we can't see html files from our browser directly, we can spin up an instance of a web server using python.

cd test

Some tutorial might ask you to run using python but you can dir…

setting up local docker registry

Normally i thought this is going to be difficult process. But turns out to be easy as,

docker run -d-p 5000:5000 --restart=always --name registry registry:2
From this point onward, your registry is already setup. So it is just working with docker images by pulling, tagging and pushing it.

docker tag ubuntu:16.04 localhost:5000/my-ubuntu
the only part you have to get it right is tagging with localhost:5000/

docker push localhost:5000/my-ubuntu
That's it, we're done. (your can try to browse your docker repo with a browser example, :- http://localhost:5000/v2/_catalog)

Testing it out 

Remove all our local images

$ docker image remove ubuntu:16.04 $ docker image remove localhost:5000/my-ubuntu

Lets try pulling it from our registry.

docker pull localhost:5000/my-ubuntu
That's ways easy.

c# 8 - new constructs

Nullable reference type 

String and other reference type can be assigned null value.

string? s = null; // Ok
New Switch statement 

I really like the switch statement. This is more compact

var area = figure switch { Line _ => 0, Rectangle r => r.Width * r.Height, Circle c => Math.PI * c.Radius * c.Radius, _ => thrownew UnknownFigureException(figure) };

Async streams

Working with streams of data used to be like this :-

async Task<int> GetBigResultAsync() { var result = await GetResultAsync(); if (result > 20) return result; elsereturn-1; }

Now, it supports full async

async IAsyncEnumerable<int> GetBigResultsAsync() { await foreach