Posts

Domain Driven Design - Eric Evans book notes

  Domain Driven Design book - Eric Evans (2003) I love this book. So well written. Espouses good principals and practices which still apply today. Good examples to follow and learn from. (kindered spirit) Introduction domain - the subject area, area of interest e.g.  the domain of a restaurant system involves real people booking reservations at restaurants to create valuable software you need to understand the domain its for, models can help focus on what's important out of that large domain The domain model is not a particular diagram; it is the idea that the diagram is intended to convey. It is not just the knowledge in a domain expert’s head; it is a rigorously organized and selective abstraction of that knowledge.  The domain model is the idea that the diagram is intended to convey; loosely representing reality to a particular purpose.  Developers have to steep themselves in the domain to build up knowledge of the business. Three basic uses for domain model: 1. ...

React Prop drilling - Kent Dodds

A way of sharing state by passing state properties through components (which may not use the data themselves) to child components that need it. Kents article Prop drilling is appropriate in some circumstances and is explicit (which makes it easier to debug). Lifting state up to the closest common component and then passing it down to child components is a pattern that works for many cases and we use all the time.  But Prop drilling can come with problems if the shape/name of data properties change or child components change and no longer need the data We've seen this happens quite often as apps scale up in size: "hmmm what children components use those props? I dunno" or "why is this child component broken?" Kent says one way to avoid this is don't break out render into multiple components unnecessarily. Wait until you need to reuse.  Now this is interesting to me. Many times we break up components into separate components for reasons other than just reuse ...

cross origin and cors

The browser same origin policy is a security mechanism which restricts how a document loaded from one origin can interact with another origin For us engineers it means if you need to make (certain) kinds of requests to a different origin then you need to be aware of the restrictions and how to work around. See mdn docs here for explanation of what is and is not considered same origin. Some cross origin requests are allowed such as  embedding: images (img), stylesheets, scripts, fonts, iframe links, redirects and form submissions So what to do if you need to make cross origin requests which are restricted? You need to use  CORS (cross origin resource sharing). It is a http header mechanism which allows a server to configure origins (other than it's own) for which it allows requests. If mydomain.com wants to make a http request to yourdomain.com then unless yourdomain.com configures CORS that request will fail. Some http requests are considered "simple" e.g. Get and POST u...

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",   payloa...

Use Postman to execute protected endpoint

Image
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 In chrome Network tab, right click on the api request Choose Copy -> Copy as Curl Now go to Postman, click Import tab across the top In dialog presented choose "Paste Raw Text" and paste in the curl You should see a new endpoint created in Postman and you can run it

Creating a bower library

Inspired by Brian Fords bower post and using angularjs-library yeoman generator I created a simple angularjs component which can be installed using bower. My cheatsheet of steps: Make folder and run generator   mkdir dos-<library>   cd dos-<library>   yo angularjs-library init as git repo  git init Set & confirm commits email   git config user.email "deniskos@hotmail.com"   git config user.email Commit  git add .  git ci -m "inital commit" Add to remote Github   create a new github repo then use command below   git remote add origin https://github.com/DenisOS/dos-sequential-dates.git Verify   git remote -v Push to master   git push -u origin master Tag it and push tag (used by bower)   git tag v0.1.0   git push origin v0.1.0 Install a library dependency from Bower   bower install moment#2.5.0 --save-dev

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