vasanthk

state-machine-component

A tiny (265 byte) utility to create state machine components using two pure functions.

Usage

The API is a single function that accepts 2 pure functions as arguments:

stateMachineComponent(reduce, render)

vasanthk

The Beginning

Yes...it's true...redux is smart....smarter than you even know. It really does want to help you. It strives to be sane and easy to reason about. With that being said, redux gives you optimizations for free that you probably were completely unaware of.

connect()

connect is the most important thing in redux land IMO. This is where you tie the not between redux and your underlying components. You usually take state and propogate it down your component hiearchy in the form of props. From there, presentational

vasanthk

{
  "name": "Area",
  "children": [
    {
      "name": "group3",
      "children": [
        {
          "name": "group0",
          "children": [
            {

vasanthk

This document outlines the proper way of using plugins in a hapi-based application. By "proper" I mean "as designed". Of course you can do whatever you want in your code and there are many other patterns you can choose or develop, but this is what I had in mind when I designed the plugin system and as I continue to evolve it.

This document is a work-in-progress and only half-way done. It should probably move to a page on the hapijs.com site if someone wants to do the proofing work and submit it. I got bored writing it so will probably never finish it.

When should I organize my code using plugins?

Always.

Every hapi application should be implemented inside a plugin. This provides an easy path for extensibility and isolates your code from other plugins you are likely to use (e.g. inert for services static files, vision for template rendering, etc.). It also allows you to use more advace tools such as [glue](https://github.com/hapijs/g

vasanthk

NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...

With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent function over and over again. (See here for an explanation how it works with webpack 1)

Example:

<Router history={history}>
  <Route
    path="/"

vasanthk

By the way, I'm available for tutoring and code review :)

Table of contents

1. What Promises library should I use?
2. How do I create a Promise myself?
3. How do I use new Promise?
4. How do I resolve a Promise?
5. But what if I want to resolve a synchronous result or error?
6. [But what if it's at the start of a chain, and I'm not in a .then callback yet?](https://gist.github.com/joepie91/4c3a10629a4263a522e3bc4839a28c83#6-but

vasanthk

I made a little styling lib called glam

(some features are in development)

one

let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

vasanthk

7 critical traits for a normal programmer

EARLY DRAFT FOR NEXT EPISODE, PLEASE PROVIDE FEEDBACK

This week I tweeted and tooted this question:

”What do you think are critical traits in a programmer? NOT to be super 10x or anything - just to feel good and function well professionally.”

Link to full threads here: [https://twitter.com/mpjme/status/855691565460848640]

vasanthk

Here is a checklist of all the things I need my CSS solution to handle.

I can explain any of the points. Leave a comment on the gist or tweet @DavidWells

Challenge: Take your favorite CSS solution and see how the checklist holds up.

• Has ability Localize classes
• Has ability to use global classes
• Has ability to write raw CSS
• Syntax highlighting and auto completion

vasanthk

class Counter extends Component {    
    componentWillMount() {
        let self = this;
        class IfEven extends Component {
            render() {
                let {children} = this.props;
                return !(self.props.value % 2) ? children : null;
            }
        }