Thursday, February 15, 2018

Understanding Typescript-fsa


Consider:

const createAction = actionCreatorFactory('WIDGET');
export const fetchData = createAction.async<{ tld: string }, WidgetDTO>('FETCH');

createAction.async() takes 3 param types as follows and also a namespace (at end):
  params type
  success type
  error type

createAction.async() returns an object with type and 3 functions:
{
  type: "WIDGET/FETCH",
  started: ƒ,
  done: ƒ,
  failed: ƒ
}

Now if you call object.started() like so:
  fetchData.started({input: 'my param'})

...it will return an action as follows. Note the type value
{
  type: "WIDGET/FETCH_STARTED",
  payload: { input: "my param" }
}

If you call done() like so
  fetchData.done({
    params: { tld: 'param passed' },
    result: {
      publicUrl: 'string',
      tld: 'string',
    }}));

...it will return an action as follows. Note the type value
{
  type: "WIDGET/FETCH_DONE",
  payload: {
    params: {},
    result: {
}

Payload is always present but meaning is different by context, for started() versus done(). For started() payload is the input you passed, for done payload includes result.

You have to pass params for all started(), done(), error() calls.

Friday, January 26, 2018

Use Postman to execute protected endpoint

You want to call an api that is protected by access layer with token identity in cookie.
You can see the requests in Browsers network tab
But when hit api in Postman you get "unauthorized" error

You need the cookies.

The easiest way is
  1. In chrome Network tab, right click on the api request
  2. Choose Copy -> Copy as Curl

  1. Now go to Postman, click Import tab across the top
  2. In dialog presented choose "Paste Raw Text" and paste in the curl
  3. You should see a new endpoint created in Postman and you can run it

Sunday, November 6, 2016

FlexBox recap

Following along egghead.io flexbox tutorials
Bootstrap framework v4 using Flexbox for grid layout

Flexbox
make container display: flex
can set children row or column
 column: flows top to bottom
order: can set order in which children are displayed
 all children have 0 for order by default and are laid out as in the dom
 changing order high moves it after lower orders in flow
 can also set to negative number to move higher
justify-content: affets way children are aligned along the way the content is flowing
 defaults to flex-start which means they bunch near start
 center: can center vertically
 flex-end
 space-between
align-items: affects space perpindicular to the flex direction
 defaults to stretch
align-self: sam as align-items but only applied to specific individual children

Sunday, July 17, 2016

Arduino uno and nodejs Johnny-Five

Last fall at the HTML Developers conference I attended a talk about IoT and programming using an Arduino Uno board with a node library "Johnny-Five" which sent updates to Firebase.

Wow

It was cool. So end of last year I bought an Ardunio kit from Sunfounder with the purpose of learning myself but also teach programming and electronics to kids.
Finally after much procrastination, I started this weekend with my son.
We completed the basic hello world exercise.

Tonight we wired and programmed a button to turn on and off an Led.
It took two goes at wiring the board but we got it working. Hold down the button and the light comes on, release it and it turns off.
Example here

I think combining electronics and software programming could be an interesting way for kids to learn. Having the feedback of an Led blink on and off will hopefully stop kids from getting bored.
I'd love to do some kind of tutorial for kids in his school, would be fun.

Tonight I had to bribe my son to participate and he mostly wanted to press the button and and off a lot but he's learning and I'm learning. Hopefully he'll look back in some future time and think about where things started for programming and electronics.

In the meantime we'll work on exercises, I'm hopeful motors and rotors will capture his attention next.


Note: I had to install firmware as outlined here: https://github.com/rwaldron/johnny-five/wiki/Getting-Started#trouble-shooting
When I tried to upload the firmware, I got an error so I changed the port using the Arduino IDE menu Tools -> Port (to the port available), retried upload and upload worked (nice)

Wednesday, March 23, 2016

Mac testing IE using Virtual Box

To test on IE on Mac I use Virtual Box and an IE image (which Microsoft provides). Setup as follows.

  1. download virtualbox from Oracle
  2. download an IE image from Microsoft (mac page); choose VirtualBox as Platform
  3. unarchive the IE image (I had to download TheUnarchiver) as recommended by Microsoft; right click and choose the unarchiver to open; should unpack a .ova file
  4. start virtual box
  5. choose File -> Import Appliance and choose the .ova file you unarchived
  6. it should create an entry in the BV list which you can run
  7. should startup and you can run IE

To access localhost I use my machines IP name instead of "localhost"
10.0.2.2 also works for localhost
(don't forget ur port number if you have one)

Links
Import ova files to VB: https://www.maketecheasier.com/import-export-ova-files-in-virtualbox/

Saturday, January 16, 2016

Angular 2.0 learnings

This contains links and project related to my learning of Angular 2.0.

Building a new Angular2.0 app
I followed this youtube vid and built a basic to do app. See the plunker here for what I built. Its interesting because its a good guide and written in es5 not typescript.

But I think its out of date (using alpha angular js library and component syntax seems to have evolved) so next I'll follow the quickstart guide on angulars site.

...and here's my implementation of angulars quickStart implementation (still ES5). I included a basic DI of a service which is used.
It works but I know there's more elegant ways to accomplish DI.

Next up, I built the Tour of Heroes tutorial on the angular 2.0 site. Its here in my github. The tutorial on the angular2 site does not include routing but John Papas github implementation does. So next is to add some routing to this app.




Strategies for upgrading existing apps
Some useful links I came across for dealing with 1.x apps:



Useful angular 2.0 learning links:



Key points

  • A Decorator is a function that adds metadata to a class, its members (properties, methods) and function arguments. 
    • Implemented in typescript and proposed for ES7. 
    • e.g. @Component, @Input, @RouteConfig
    • position immediately above the thing it decorates

Typescript
I built the Tour of Heroes tutorial using typescript (you could also use es5 or es6). For some dev orgs it will be some matter of debate if they will use es6 or typescript. Angularjs 2 is written in typescript, most tutorials, examples will likewise so adoptions will be easier.
Here are my key notes about typescript.

  • is a superset of es6, adds some new types, annotations, interfaces
  • allows you to annotate variables and functions with type parameters "Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable"
  • types: boolean, number, string, array, enum, any, void
    • enum, any and void are new to typescript; any represents any type
  • Interfaces; typescript supports defining an Interface e.g. interface Person { first: string } and you can then expect that as a param into a function. As long as the object passed has those properties then its accepted: "In TypeScript, two types are compatible if their internal structure is compatible." ie "duck typing" 
    • can declare properties and functions both
    • can declare interfaces for classes but also functions, arrays, objects
    • e.g. I could define an interface for an array and then define a variable of that interface type
    • classes can implement interfaces (just like java) where the interface could define properties/functions the class must implement; but only the public api of the class (not private)
    • interfaces can extend interfaces and use multiple inheritence
    • classes can implement multiple interfaces
  • functions: typescript can check
    • if params should should not be passed
    • if params are of correct type e.g. string vs int
  • classes;
    • can add property annotations to indicate public (default) or private properties as well as parameters
    • accessing private props illegally results in error
    • can "implements" one or more interfaces (as well as ES6 extend)





Thursday, December 3, 2015

React learnings

My links and notes as I learn more about React

"React is a library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time."
"React is all about building reusable components. In fact, with React the only thing you do is build components."

I'm finding the React docs are pretty good for a beginner
I worked on this tutorial and built it out. Nice touch that they include all you need including simple server in the starter kit. Allows me to build something straight away.

  • ReactDOM.render() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument
  • The ReactDOM module exposes DOM-specific methods, while React has the core tools shared by React on different platforms
  • props are immutable: they are passed from the parent and are "owned" by the parent.
  • To implement interactions, we introduce mutable state to the component. this.state is private to the component and can be changed by calling this.setState(). When the state updates, the component re-renders itself.
  • render() methods are written declaratively as functions of this.props and this.state. The framework guarantees the UI is always consistent with the inputs.
  • In React, components should always represent the state of the view and not only at the point of initialization.


"When your data changes, the render method is called again. In order to perform updates as efficiently as possible, we diff the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM." The data returned from render is neither a string nor a DOM node -- it's a lightweight description of what the DOM should look like."


"Introduction to React book" notes:

I'm reading the Introduction to React book (free from Safari thanks to SF library! nice). Some chapter notes.

Chapter 1

React is a js framework for developing complex UI with data that changes over time.
React built to deal with displaying data in a UI, specifically large scale UIs with data that changes over time.
Describe a user interface and a mechanism to change that over time.
Build from multile components. In world of React often better to make things more modular.
Challenges way we develop js apps
JSX (javascript xml transpiler) usage is optional
render() required for all React components
React is a global

Terms

  • components: core of React and view to your application; created using React.createClass({})
  • virtual dom: React creates a virtual dom to calculate the set of changes
  • JSX transform layer which transforms XML syntax into syntax to render; can take React classes or plain html
  • properties: set of options a component holds; immutable
  • state: property of a component; set at start and can change over time
  • Flux: sister project to React. How to get data to interact with React. Flux is not MVC because its one way, uni directional data flow.
  • add ons e.g. react router


Chapter 3

JSX is a custom templating engine for React components.
A simple precompiler converts it into javascript i.e. React.createElement() calls.





Denis Impressions

  • including JSX in js code feels very strange, as in an anti-pattern; that does challenge my mindset which is to keep markup out of the js
  • making components and reusing them elsewhere, makes me think of angular directives 
  • React components appear to be much faster to write than Angularjs directives..and much simpler to understand how to use React to create components (unlike angular directive which even Misko apologized for)
  • I like Reacts emphasis and support for fine grained components
  • creating a lot of components, I wonder what kind of component library you build up over time and how to discover components, as well as extend them?
  • having some backbonejs flashbacks with React
  • "React is a library", angularjs is a framework. As a framework Angularjs want to provide the "whole enchilada" in one serving: modules, dependency injection, service layer/models, routing, markup, components/directives, unit test framework and e2e test tool etc.