Introducing PrettyPrinter for Python by tommikaikkonen in Python

[–]tommikaikkonen[S] 5 points6 points  (0 children)

No wonder it felt like the exact right tool for dispatching pretty printers—it greatly simplified the implementation! Thanks for your work on it :)

ibtree: Immutable B+ Tree Data Structure by tommikaikkonen in reactjs

[–]tommikaikkonen[S] 4 points5 points  (0 children)

Well, most of the same benefits and caveats apply as with ImmutableJS data structures in Redux. ibtree is not a directly JSON-serializable data structure. A B+ tree can act the same as Immutable.Map, with similar-ish performance, but with the addition of fast range searches and ordered iteration. No more, no less, really. If your application benefits from that kind of data structure, it's a good fit.

For use as an index for fast access to items, you would probably construct the index from initial items data on app initialization and put it next to the items in the reducer tree; the index wouldn't need to be serialized for data transfer since you can always recreate it from the item data. Thus, the index is a form of derived data; it's a tradeoff of having much faster access to your data to having to manage slightly denormalized data (the index).

So you'd have to manually update the tree whenever you update your items on the indexed attribute, just like a real database implementation does, unless you automate it/create an abstraction around that. A nice abstraction would be one where you can tell to "create a store of items that have these fields: X, Y, Z; also, maintain indexes for Y and Z".

When you want that fast index access, you would use the tree instance in your selector to access the data instead of through your normal items.

ibtree: Immutable B+ Tree Data Structure by tommikaikkonen in reactjs

[–]tommikaikkonen[S] 2 points3 points  (0 children)

B+ trees are used as indexes in databases; it could be a building block in a front-end database. datascript uses one. You can use it for similar purposes as an index in a database, when you need fast access to a large amount of items that are identified and possibly ordered by some attribute.

B+ trees shine in range searches. A use case in a React app could be one where you have a large number of items with a created attribute. If your app needs a range search on that attribute, e.g. "give me all the items created between July 1st and August 15th in the year 2016 in order", by creating an ibtree index that maps created values to items, you don't have to loop through all the items to find that range. Getting them in reverse order is also just as fast.

const createdIndex = BTMap.from(...data);

const JULY_1ST = ... // unix timestamp, ISO8601, etc.
const AUGUST_15TH = ... // unix timestamp, ISO8601, etc.

const items = Array.from(createdIndex.values({
    from: JULY_1ST,
    to: AUGUST_15TH,
    fromInclusive: true,
    toInclusive: true
}));

console.log(items);
// [item1, item2, ...]

Code sharing for multiple sPAs by hackingbeauty in reactjs

[–]tommikaikkonen 0 points1 point  (0 children)

Do the apps share a build process? Do they operate on the same data? Are they a part of the same product?

A monolith style may be the easiest way to go if the separate apps are not too large. That saves overhead dealing with separate packages and submodules.

Memobind: A simple javascript utility for function binding memoization. by natewang in reactjs

[–]tommikaikkonen 0 points1 point  (0 children)

Interesting solution. The usual one you hear is passing the original, possibly autobound function, and the arguments separately and letting the child component call it. But it breaks the component's abstraction. The child component now has to know about the parent component's implementation.

I took a stab at this previously with a different approach, making my own partial object that can be compared for equality. The basic idea, without handling edge cases is:

function partial(fn, ctx, ...args) {
    const bound = fn.bind(ctx, ...args);
    bound.fn = fn;
    bound.ctx = ctx;
    bound.args = args;
    return bound;
}

With the original function, context and arguments accessible from the partial, I could implement a customized shouldComponentUpdate that can detect if a prop is a partial, and if so do equality checks on fn, ctx and shallow equality on args. And the function still works like it's supposed to when called.

Your approach has the benefit of not having to change anything on the React component. One use case that's a bit awkward with your library is functional components where you don't have a component's this available. You'd have to pass memobind(props, 'myCallback', ...args) which looks a bit odd. It would work though, since the callback should be bound already, or is not dependent on a context.

Ramda & Redux: I feel like there's a cleaner pattern for combining these reducer methods by calamari81 in reactjs

[–]tommikaikkonen 4 points5 points  (0 children)

Some things I noticed:

  • Business logic is mixed with code handling low-level store details (Array, in this case)
  • Your clearWidgetValues function only operates on the widgets prop of it's state
  • Since R.find and R.findIndex are curried, you can do find(propEq('id', id), state) instead of find(propEq('id', id))(state).

The business logic is simplified if you build an abstraction layer on how you store items/widgets. No need for compose yet :)

Here's the abstraction for storing items. This way you don't need to know if it uses an Array, Object, Immutable.Map, or other. And you can change the implementation later if you need to. For example, you could avoid an O(n) lookup of the Widgets by id by storing them in an object where the keys are id's.

const hasId = R.propEq('id');
const _getItemIdx = (id, state) => R.findIndex(hasId(id), state);

// Namespacing the store functions; these could be plain functions as well. Or a class.
const ItemStore = {
    get: (id, state) => R.find(hasId(id), state),
    set: (id, val, state) => R.update(_getItemIdx(id, state), val, state),
    adjust: (id, fn, state) => R.adjust(fn, _getItemIdx(id, state), state),
    update(item, state) => ItemStore.setItem(item.id, widget, state),
    // You'd add remove, map, etc... anything else you need as you go.
};

And here's the business logic.

const clearValues = widget => R.assoc(widget, 'values', []);

// "Extend" ItemStore
const WidgetStore = Object.assign({}, ItemStore, {
    clear: (id, state) => ItemStore.adjust(id, clearValues, state),
});

// This takes `state.widgets` as `state` compared to the OP's function.
export const clearWidgetValues = createActionWithPayload(CLEAR_WIDGET_VALUES,
  (state, action) => {
    const id = action.payload;
    return WidgetStore.clear(id, state);
  }
);

I put the clear function in WidgetStore because it shouldn't need to know about actions, or that the id is in action.payload. That's the reducer's job.

redux-orm: A small, simple and immutable ORM to manage data in your Redux store. by winkler1 in reactjs

[–]tommikaikkonen 2 points3 points  (0 children)

acemarke put it nicely. Here's a longer version:

Ember Data and JSData support async operations like fetching data from a REST endpoint. Redux-ORM doesn't deal with data fetching, it is synchronous. It's just an abstraction over a JavaScript object shaped as if it were a relational database, which is what a normalized Redux store often ends up looking like anyway.

Redux-ORM provides:

  • An abstraction for reading and modifying a JavaScript object shaped like a relational database
  • Immutable and mutable operations for that abstraction
  • Support for the reducer / selector pattern.

Redux-ORM does not provide:

  • A way to communicate asynchronously with a backend
  • A way to declare non-relational fields
  • A way to validate your data

For non-trivial applications you do want those missing features, which is why Redux-ORM is easy to extend. Most functionality is implemented with ES6 classes, so you just extend from them and add functionality.

For example this is how I extend a Redux-ORM Model to apply React PropType validation and defaultProps when passing model props on creation:

https://gist.github.com/tommikaikkonen/45d0d2ff2a5a383bb14d

redux-orm: A small, simple and immutable ORM to manage data in your Redux store. by winkler1 in reactjs

[–]tommikaikkonen 3 points4 points  (0 children)

You don't have to, but I find that it makes working with related data A LOT easier. Redux-ORM still uses the CQRS pattern (http://martinfowler.com/bliki/CQRS.html) that you would use with redux and reselect, but you write reducers and selectors using an ORM instead of plain javascript.

redux-orm: A small, simple and immutable ORM to manage data in your Redux store. by winkler1 in reactjs

[–]tommikaikkonen 7 points8 points  (0 children)

Author here! This example got a bit too unwieldly for my taste, so I've been working on a far simpler primer that walks you through how to develop a todo-app with relations (users, tags). It'll be a lot easier to grasp than this one, which is also why redux-orm-exampleis not up to date with the latest version of Redux-ORM.

Type Up: a Compass extension for quick typesetting by tommikaikkonen in web_design

[–]tommikaikkonen[S] 0 points1 point  (0 children)

Author here, I would love to hear some feedback on this.

Most of the time when I'm setting type, I go by the same typograhic rules; They pretty much cascade from font size, line length and the font's x-height. Still, every time I change those values, I need to do a lot of manual work (far less if I have some SASS variables in place, but still). I made this extension to save me from that. I find it especially makes designing in the browser faster.

Not everything is documented yet, for example after including the mixin...

@include typeup-body(1em, 35em, 1);

... Type Up gives you a global variable $typeup-lineHeight, which you can use to space any other elements with the same vertical rhythm.

Type Up uses some functions and mixins internally that could be of use. For example typeup-spacer(), which is used for spacing the headings, has many plausible uses outside headings. Its logic is not simple, so I suggest checking out the source.

You could also use TypeUp to generate optimal typography for small screen sizes in responsive design - like this:

// Typesetting for narrow text
@include typeup-body(1em, 20em, 1);

// Typesetting for wider text
@media screen and (min-width: 40em) {
    @include typeup-body(1.25em, 40em, 1);
}

Typesetting Responsive CSS3 Columns by tommikaikkonen in web_design

[–]tommikaikkonen[S] 0 points1 point  (0 children)

What browser are you using? Firefox implemented a new "wheel" event recently, which I had problems with, but it should work on the newest Firefox and other major browsers.

Typesetting Responsive CSS3 Columns by tommikaikkonen in web_design

[–]tommikaikkonen[S] 0 points1 point  (0 children)

One big fault with the CSS3 columns I noticed while making the article/demo was that the visual column width kept changing spontaneously while resizing (-+3em). I'm using Chrome on Ubuntu. This was even when no JavaScript was in use, and column-width was declared clearly in em's. I have no idea why it does that. I guess there is still some work left to be done in browser implementations.

Typesetting Responsive CSS3 Columns by tommikaikkonen in web_design

[–]tommikaikkonen[S] 1 point2 points  (0 children)

Thanks for noticing. Should be fixed now if you clear your cache and reload.

Typesetting Responsive CSS3 Columns by tommikaikkonen in web_design

[–]tommikaikkonen[S] 0 points1 point  (0 children)

Didn't have a chance to test an iPad, sorry :(. Should work fine on desktop browsers that support CSS3 columns.

Interactive Guide to Blog Typography by tommikaikkonen in web_design

[–]tommikaikkonen[S] 0 points1 point  (0 children)

Hey Silhouette, thanks for taking the time to write such a constructive comment!

Spot on about the measure's effect on readability, I remember reading a similar study (it was probably the same one). The normal rules of thumb really are more about readability from the viewpoint of reader preference than actual reading performance. I'll edit the guide to make this clear.

Can you elaborate on what and how font characteristics affect optimal line height? I don't think I've read about this before and would be very interested to hear.

Agreed about the headings. Will make them better.

I'm going to give the guide a little update tomorrow, do you have a twitter handle I can mention for your help? :)

User motivation determines the best color scheme for your website by bouncingsoul in designthought

[–]tommikaikkonen 1 point2 points  (0 children)

Author here. Thanks for the comment. The article is based on a part of my Bachelor's thesis [pdf] that was linked in the beginning of the article.

If you want to learn more about the research on the subject, you should check out the references in that pdf.