FullStory

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(
    mapStateToProps,
    mapDispatchToProps
)(SomePage)

mapStateToProps

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 }
}

mapDispatchToProps

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
this.props.dispatch(loadCourses())
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) }
}

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

Presentational

  • 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!

Flux varies from Publish-Subscribe in a Couple Ways

I post on this blog less than I’d like to and it’s not because I don’t write things down. It’s because I overthink my writing. A quick thought turns into a major research project with interviews and citations, and I spend time reviewing and editing and, to be frank, slowing things down. Now, that’s not a bad thing – learning to teach is more than half the purpose of having a technical blog. However, my personal notes stash is getting long and I think I need to worry less and share more. With that in mind, I am challenging myself to post a daily  “Today I Learned (TIL)” micropost. I will share a few imperfect words, a screenshot, a code snippet, etc.

Starting…………. now!

Today I learned that the Flux pattern is very similar to the Publish-Subscribe pattern, with two key differences:

  1. In Flux, every payload is dispatched to all registered callbacks, whereas in Pub-Sub, payloads are dispatched only to subscribers.
  2. In Flux, callbacks can wait for other callbacks to complete. This doesn’t seem to be the case in Pub-Sub.

There you go! You get no more context than that. Yay microposts! Thanks for reading.