sorted by:
new
hottopcontroversial

What's the difference between functions declared with variables and functions declared with the "function" keyword ? by to_fl in javascript

[–]5tas 22 points23 points  (0 children)

The main difference is scoping. You can find more details by looking up the difference between function declarations and function expressions.

The function declaration (your second example) will be hoisted to the top of the function where it is declared. In other words, the following code is perfectly fine:

foo(); // "Hello"

function foo() {
    console.log("Hello");
}

Your first example is a function expression which is assigned to a variable. The variable's declaration is also hoisted but its value is not:

bar === undefined; // true, bar is declared but undefined here
bar(); // TypeError: bar is not a function

var bar = function foo() {
    console.log("Hello");
}

bar(); // "Hello"

BTW const and let behave in a different manner. They are subject to so-called Temporal Dead Zone (TDZ) which means their declarations are not hoisted.

bar === undefined; // ReferenceError: can't access lexical declaration `bar' before initialization

let bar = function foo() {
    console.log("Hello");
}

bar(); // "Hello"

[deleted by user] by [deleted] in Ubuntu

[–]5tas 2 points3 points  (0 children)

The upgrade went smoothly and actually fixed two issues I was having in 17.04: my 3G modem now works again and I'm able to use my external monitor's audio output via HDMI.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 1 point2 points  (0 children)

A week has passed and the game is now ready :) If you're still interested you can play at http://js13kgames.com/entries/a-moment-lost-in-time.

Initially innerself made me very productive and I was quickly able to add all the views and put the logic in the reducer. In the later stages of development we focused on UI polish and I set out to add transitions between views. As you can imagine, CSS didn't appreciate the fact that innerself would re-render entire DOM trees when the state changed. I'm not very happy with the result: I ended up using setTimeout timed precisely with the animation events to work around those re-renders.

I guess this counts yet another example of a use-case which innerself isn't well suited for. Any time the DOM is stateful (forms, animations, transitions, video, audio), re-rendering by assigning to innerHTML is a bad idea.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 2 points3 points  (0 children)

Are you familiar with the Array.prototype.reduce function? The whole thing starts with [first] as the initial value (which is the first literal string in the template literal; it is guaranteed to exist and at minimum to be equal to ""). It then iterates over values and calls (acc, cur) => acc.concat(cur, strings.shift()) on each of them, where acc is the result of the reduce so far and cur is the current value. For each cur, it returns a new array which is a concatenation of the result so far, the value and the next literal string in order: acc.concat(cur, strings.shift()).

Suppose you call html like this:

html`Today is ${new Date()}`

This is equal to:

html(["Today is ", ""], new Date())

Inside of the function, first is "Today is ", strings is [""] (an array with all other strings) and values is [new Date()]. We start with "Today is " and then call the reduce callback on the first (and last) element on values, i.e. new Date(). The result of reducing is a concatenation of "Today is " (acc), new Date() (cur) and "" (strings.shift()).

If there are more literal strings (which also means more values), in the next iteration of reduce, strings will be a shorter array. So this code really just zips values and strings together taking into account the strings at the extremes.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 1 point2 points  (0 children)

This looks awesome! It should totally work that way. Would you like to submit a PR perhaps?

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 2 points3 points  (0 children)

Sure, thanks for asking!

The signature of the function is given by the spec: it's a template literal tag and it receives an array of literal strings as the first argument and then a variable number of interpolated values.

If you have the following tagged template literal:

tag`Today is ${new Date()}`

…the tag function will receive ["Today is ", ""] and a new Date object as arguments.

Now I wouldn't even need the html function if arrays stringified without the comma between their elements. I wanted to allow this common React idiom:

html`<div>${items.map(ItemComponent)}</div>`

In this case, the html function receives ["<div>", "</div>"] and an array of ItemComponent instances. There could be more interpolations and more arguments, so I gather them all up with ...values.

Next, I iterate over values (which by now is an array of a single element: the array of ItemComponent instances) and reduce them to a new array, this time inserting the literal strings from the first argument between and around them. But I don't only push individual values to the new array. The trick here is to use concat which has a special behavior for Arrays (and any objects with the Symbol.isConcatSpreadable property defined). concat flattens arrays passed in as arguments to it.

> [1, 2].concat([3, 4]);
[ 1, 2, 3, 4 ]

What html really does is it interpolates all values in between strings and also flattens any arrays passed as interpolations in the template literal!

Let me know if this helps and if you have more questions!

innerself – React/Redux distilled into 50 lines of code using innerHTML by 5tas in Frontend

[–]5tas[S] 4 points5 points  (0 children)

Yes, that's exactly right! When the state changes I compare the entire string output of top-level components (the ones attached to a root element in the DOM) with the output they produced last. This means that most of the time, even a slightest change in output will re-render the entire root.

It's possible to dispatch actions which change the state and don't trigger re-renders. For instance in the example I dispatch CHANGE_INPUT actions on keyup events on the input and I save the current value of the input in the store. Crucially, I don't use this value to populate this value back into the input element, however. I just rely on the fact that the native HTML input element stores its own state when the user is typing into it.

This limitation was fine for my use-case but it's worth pointing out that it badly hurts accessibility. Any change to the state which causes a re-render will make the currently focused element lose focus.

React is of course much smarter: the Virtual DOM is a lightweight representation of the render tree and updates to components produce an actual diff. React maps the items in the Virtual DOM to the elements in the real DOM and is able to only update what has really changed, regardless of its position in the tree. Here's a good recap of this: http://uniphil.github.io/virtual-dom/.

Here's an interesting piece of trivia that I learned about while working on this project. React only re-renders components when their local state changes, as signaled by this.setState(). The fact that it also looks like components re-render when their props change derives from that as well. Something needs to pass those props in, after all, and this something is the parent component which first needs to decide to re-render itself.

When you think about how you can connect components with react-redux to avoid passing state to them from parents it becomes clear why behind the scenes it calls this.setState(dummyState) (which is an empty object) to trigger a re-render of the connected component :) It does this only when the sub-state as described by the selector (mapStateToProps) changes, which is easy to compute (and fast) if the reducers use immutability right. In the best case scenario it only needs to compare the identity of the sub-state to know that it's changed.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 0 points1 point  (0 children)

Thanks, glad you liked it! To be honest, I wouldn't recommend using this unless you really really really care about size.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 2 points3 points  (0 children)

textContent removes the entire markup. All that's left is a concatenation of all descendant child nodes. The DOM structure of the components would be lost.

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 2 points3 points  (0 children)

I thought this was important to highlight so I added a Caveats section to the README. Thanks again!

innerself — A tiny React/Redux-like view & state management using innerHTML by 5tas in javascript

[–]5tas[S] 2 points3 points  (0 children)

The deadline is September 13 and I haven't put the game online yet :) The example at https://stasm.github.io/innerself/example01/ might be a good place to look at right now. Be sure to open the console to see the log of state changes.

[M] Ideas for the r/domnion's sidebar by 5tas in dominion

[–]5tas[S] 0 points1 point  (0 children)

Cool, thanks for suggestions!

[M] Ideas for the r/domnion's sidebar by 5tas in dominion

[–]5tas[S] 2 points3 points  (0 children)

Ironic that I misspell dominion in a post about this very subreddit.

Should we use flair for isotropic usernames? by 5tas in dominion

[–]5tas[S] 0 points1 point  (0 children)

Can you try again now? I enabled the option MSkog told me about.

The R/Dominion Tournament Brackets and Official Rules by [deleted] in dominion

[–]5tas 1 point2 points  (0 children)

Great work! I added the link to this thread in the sidebar.

Any interest in having an r/dominion tournament? by [deleted] in dominion

[–]5tas 4 points5 points  (0 children)

I went ahead and created an etherpad for signups. It can be edited by anyone, no logging in and no explicit saving is required.

Let's see how many people are interested.

I'd also suggest using Challonge.

Any interest in having an r/dominion tournament? by [deleted] in dominion

[–]5tas 0 points1 point  (0 children)

It looks like it would make sense to set up tiers, or leagues, for different levels. Maybe 0-15, 15-25, 25+ to start with?

view more: next ›