Posts

Posted on

The spectrum of note taking options for software developers

All software developers should take notes. That’s a given. There’s far too much information we come across daily that it’s impossible to remember everything without taking notes.

Ok, so what approach should you take for your note taking? As software developers, building your own note taking app would be an interesting side project for learning a new language or framework. Before you jump to that extreme though, consider some of the simpler alternatives first.

Going from simpler to more complex, here’s some options:

  • A notebook
  • Index cards
  • Notes on loose sheets of paper, grouped by topic and filed in a folder, binder, or filing cabinet
  • Online note taking app: OneNote, EverNote
  • Note taking on a PDA (remember those?)
  • Hosted blog online (e.g. WordPress, Ghost)
  • Hosting your own blog online
  • Building your own blogging app
Posted on

Using Route 53 to create subdomain names for your projects

If you create and deploy your own software projects to the cloud, at some point you probably end up with a number of things deployed to various places and unless you spend time maintaining your bookmarks to all these projects, it becomes hard to keep track after a while.

One of the interesting things about Route 53 is that you can create A records that resolve to IP addresses either within AWS or hosted elsewhere. If you have you own domain setup in Route 53, you can easily create subdomains with A records pointing to where ever these projects are hosted. e.g.

example1.youdomain.com -> x.x.x.x

example2.yourdomain.com -> y.y.y.y

A while back I deployed my Sudoku Solver React app to an S3 bucket hosting the website, and I can never remember the S3 endpoint name. But using a Route 53 Alias to the S3 endpoint, you can create whatever subdomain you need to point to the target resource. Here’s what it looks like setting up an alias:

Notes:

  • when you click in the Alias Target box you should see your S3 bucket already listed (if not, check you’ve enabled Static Website Hosting)
  • the recordset name must be identical to the first part of your bucket name (e.g. ‘example’)
  • the S3 bucket name must be the subdomain name plus full domain, e.g. example.yourdomain.com

Posted on

React Redux cheatsheet

This is my summary of the bare minimum steps as a quick-ref cheatsheet for adding Redux to an existing React app. This is just some notes for future reference. If you’re looking for tutorials, take a look at:

Here’s my quickref:

npm install --save react-redux

Add Redux devtools for Chrome (see here):

npm install --save-dev redux-devtools-extension

Wrap <Provider> around root Component to share the Store with all child components:

import { Provider } from 'react-redux'
import store from './store'

<Provider store={store}>
  <App>
</Provider>

Implement mapStateToProps and mapDispatchToProps to pass store and dispatch() as props to each Component, and call connect() to connect each Component with your Redux Store:

const mapStateToProps = (state) => {
  return {
    yourcomponent: state.yourcomponent
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(YourComponent)

Create a Store:

import { createStore } from 'redux';
import { devToolsEnhancer } from 'redux-devtools-extension';
let store = createStore(yourReducer, devToolsEnhancer());
export default store;

Create reducers for Store – here’s an example that take the the value of a label from the passed action payload and sets it in the Store – remember the state of the store is always treated as immutable, so always create a new copy of the modified state, here using Object.assign():

function labelReducer(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_LABEL':
      return Object.assign( {},{ labelValue : action.payload 
    } );
    default:
      return state;
    }
}

Implement an action creator that builds an Action object that requests changes to the Store – each action has a type and a payload:

export function changeLabel(payload) {
  return { type: "LABLE_CHANGE", payload }
};

Implement mapDispatchToProps – you can either build the Action object yourself here, or call an Action creator like the above example:

function mapDispatchToProps(dispatch) {
return {
  changeLabel: labelValue => 
    dispatch(changeLabel(labelValue))
  };
}

Pass mapDispatchToProps to your connect() call shown earlier.

As a comparison, here’s a simple React app using Flux:

https://github.com/kevinhooke/SimpleReactFluxExample

… and here’s the same app converted to use Redux:

https://github.com/kevinhooke/SimpleReactReduxExample

Done!

Proudly powered by WordPress