Today I learned that this tool exists. FullStory is a tool that helps you understand errors from a customer perspective.

I heard about it because my husband is using it at work and when he described it, I thought it was ridiculous. You’re going to screen record every customer’s flow through your site and save it. That’s just dumb, I thought.

But then he explained that it only saves flows that have errors, and I realized that it is brilliant. This probably seems like a paid product feature or something, a particularly weird one because this is a product I haven’t used, but nobody has given me any money. I just think this is cool and since I’m trying to share more of what I learn about more often, here you are. You’re welcome.


Redux: the Connect Function

The connect function creates container components with Redux. It takes two functions as arguments. The first is mapStateToProps, which, as you may have already guessed, maps the state to the props. In other words, it exposes the application state to the component via props. The second argument is mapDispatchToProps. It determines which actions to expose to props.
export default connect(


Again mapStateToProps, makes the state available to the component via props. It is a function that takes state and props as arguments and returns the state.

function mapStateToProps(state, props){
    return { appState: state.someReducer }


While MapDispatchToProps  is an optional argument, it is quite useful. It is a function that takes dispatch as an argument and returns the available actions. It determines which actions to expose to props and you can go about this three ways:
1. Ignore it and use dispatch directly in your component
2. Manually wrap dispatch for each action..
function mapDispatchToProps(dispatch){
    return {
         loadCourses: () => { dispatch(loadCourses }
3. Use bindActionsCreators
This is a convenience method that wraps all of your actions with dispatch.
function mapDispatchToProps(dispatch){
    return { actions: bindActionCreators(actions, dispatch) }

Design Driven Design (1/x) – Crunching Knowledge

Domain Driven Design has caught my attention recently.


Via Wikipedia


Domain-driven design (DDD) is an approach to software development for complex needs by connecting the implementation to an evolving model. The premise of domain-driven design is the following:

  • placing the project’s primary focus on the core domain and domain logic;
  • basing complex designs on a model of the domain;
  • initiating a creative collaboration between technical and domain experts to iteratively refine a conceptual model that addresses particular domain problems.

Continue reading Design Driven Design (1/x) – Crunching Knowledge

React: Container vs Presentational Components

I’ve been relearning React and, starting from the basics, I learned a fun(damental) React fact: there are two core types of React components.

Container vs Presentational Components

Container Components

  • Manage behavior, marshalling data,  and actions
  • Are “smart”
  • Have little to no markup
  • Don’t emit DOM
  • Pass data and actions down to children
  • Are stateful
  • Are created using Redux’s `connect` function at the bottom of file
  • Know about Redux


  • Nearly all markup
  • Are ‘dumb”
  • Have no logic
  • Receive data/actions via props
  • Don’t know about Redux

Six Primitives to be Turing Complete

I’m going through a free online CS program (OSSU) and Im currently reviewing the basics in a CS 101 class. I’m sure I’ve heard this before, but it caught my attention the second time around.

Alan Turing mimicked human “computing” with the idea that a computer could also “compute” anything with six primitive actions:

1. Go left
2. Go right
3. Scan
4. Read
5. Write
6. Do nothing

Of course, if you Google this idea, you will find that there is debate about how complete this set of actions is for computing any calculation, but the principle here is the foundation of executing a computer program.

Logpoints in VSC

I suppose a lot of people learned about this one recently – because it’s new, but Visual Studio Code has released this cool new functionality called logpoints.

They are a way of adding console.logs to your code during development, without actually adding the line console.log(). Basically, they allow you to do quick check-ins on your code and they ensure that you don’t accidentally forget to adjust your code afterward – since you never change it to begin with. The downside is that they currently only work in VSC’s built-in Node console. However, I get the impression that other plugins will expand it to the node and browser consoles soon.

More info here.

PRPL Pattern

The PRPL pattern is for developing Progressive Web Apps (PWAs).

It stands for:

  • Push critical resources for the initial URL route.
  • Render initial route.
  • Pre-cache remaining routes.
  • Lazy-load and create remaining routes on demand.

I’ve been doing this without knowing about the pattern name, just by using Angular’s best practices lately, but I like lists and easy to remember acronyms and it’s something that I learned about today!