day 209 — code 365

Sun 10 Jul 2016

Git and SSH

Running into a LOT of problems trying to push to a branch from a repo that only allows SSH keys… I think I tried for 3 hours to get this to work, to no avail. Very frustrating. SSH / HTTPS is yet another area that I have little understanding about, and as much as it is interesting, I also want things to just work…

Redux

Continued with the second half of Dan Abramov’s video tutorial series. And then ran into HUGE problems refactoring my code into separate files. I ended up taking the plunge and subscribing to Egghead to get the code files, only to be told in the ‘Code’ section that they were on GitHub… Not cool. I also realised that I had forgotten a lot of things, like how connect and Provider work… I think I will go back to the beginning and create separate branches for each section, and take / improve my notes. As in: there’s not much point merely completing the tutorials; I need to understand. And on a deep level.

SASS

Found this really helpful style guide for writing SASS: the order of selectors, and so-on.

https://css-tricks.com/sass-style-guide/

I found out (again) that we can style other elements based on the state of another!!

This will cause each item-container to change background color and have a orange bar appear on its left… when the hover state is triggered!

.nav {
  &__item-container {
    height: $nav-item-height;
    cursor: pointer;

    &:hover {
      background: $gray-dark-extra;
      &::before {
        content: '';
        background: $gray-dark-extra;
        border-left: $orange 4px solid;
        height: $nav-item-height;
        display: inline-block;
        line-height: $nav-item-height;
        vertical-align: middle;
        position: absolute;
      }
    }
  }
}

Source Maps

I was really really really struggling to debug something in my Redux Todo app, in Dan Abramov’s tutorial. One of the (many) problems was that the console was showing an error like:

Uncaught Error: Expected the reducer to be a function. main.js:21101

And when I clicked on the link to main.js, it showed a line of compiled JS code that really didn’t make any sense.

Out of pure luck, I somehow ended up investigating that, and ended up with… source maps. SOURCE MAPS are amazing. It didn’t help that my initial attempt was adding this:

devtools: "#source-map",

to my webpack.config.js

… and nothing happened.

And I gave up on source maps.

And then I ended up back pursuing source maps, and going to the web pack documentation, where I found out (lucky!) that I was supposed to add this:

devtools: 'source-map',

(without the #)

And then I got a lovely error message (…right!) pointing me to the line in the file index.js — not compiled, and the actual line where the error was thrown.

This really really helped me.

It actually led me to the source of the problem: ES6 named imports.

ES6

export const Todo = {
// something
};

When we write:

import { Todo } from './components/Todo';

We are saying that there is a variable called Todo that has been designated as an export.

And that we are using that variable’s name (Todo).

However, if in Todo.js, we have this:

const Todo = { // something };
export default Todo;

We can do this:

import Todo from './components/Todo';

This means that we are importing what is specified as the default export, and naming that variable Todo.

In essence, we can write this:

import Hello from './components/Todo';

And we would end up with the same imported object, but assigning that object a different name.

So.

Named exports must be referenced with curly braces { }.

export const Todo = { // something };
import { Todo } from './components/Todo';

Default exports must not be referenced with curly braces, and any name can be assigned to the import

const Todo = { // something };
export default Todo;
import Hello from './components';

If, however, we write this:

export const Todo = { //something };
export default Todo;

We can do any of these(!!):

import Todo from './components/Todo';
import { Todo } from './components/Todo';
import Hello from './components/Todo';

That’s my basic understanding of the state of the nation. And, I finally have a working version of the Todo app, using separate files! (I’ve lost a lot in translation, or rather, not doing the translation myself, but I’m happy I have something to move forward with, to allow me to finish following through the second half of the tutorial!)

I think I will finish that second half, and then go back and do the first half again!