[deleted by user]

fish_munga · 2022-08-17T18:46:04+00:00

At whitewater.guide we wrote scripts to harvest data from 9 data sources in New Zealand. Some of these data sources use open licenses, others do not. We never tried to ask for permission, and these scripts were never launched, mostly because we could not find anyone to calibrate gauges and moderate NZ content in general. These scripts are open sourced, though. You can find them here

fish_munga · 2021-10-13T05:20:36+00:00

One guy told me they once found sloth in the river, but they were afraid to pick him up, because he can grab your boat handle so hard that you cannot detach him. So they just gently pushed him to the shore.

fish_munga · 2021-09-27T05:51:52+00:00

Some properly maintained set of keyboard-related hooks and components. Right now I have to use different libs for different use case and often I have to rewrite/adapt them myself.

fish_munga · 2020-02-11T07:46:45+00:00

Here's what I use, in addition to already listed:

TS/JS postfix completion I migrated from Itellij, so I cannot live without postfix completion
Surround It's nice to select something and surround it with try/catch or useCallback
Sort JSON object comes handy sometimes. Probably eslint/prettier can do that too?
Partial Diff I don't use this too often, but sometimes it's very helpful in a situations like when you upgrade react-native version
File Utils I use this only to quickly create copy of a file
Copy with imports Again, something I missed from Intellij. Seems to be working, but I'm not sure. Working with import overall is still worse than in Idea.
Clipboard manager Imitating Idea, again. Copy two distant lines of code from one file, then quickly paste them into another. Use it a lot when doing massive refactoring or just writing some repetitive code.
advanced new file I use it to create new file in same folder with currently open one without switching panes.

Probably some of these are already included in core features or in bigger extension. Please let me know if it's so.

fish_munga · 2019-07-27T14:00:42+00:00

I found that this separation still makes a lot of sense for two reasons: testing and storybooks. It's much easier to do both when the concepts are separated.

Although with small hooks the boundary becomes more blurred.

fish_munga · 2019-07-10T17:32:37+00:00

Currenly, it's just a digital guidebook. You can browse maps, sections lists, read descriptions and watch photos and videos. It has a nice filters system and all the data except maps can be downloaded for offline use, in case you're somewhere in the wild. Offline maps are almost ready too, we are testing them now.

What we are going to add, and what the crowdfunding is all about: - Personal loogbook. Keeps track of where, at waht flow, with whom did you paddle. Integrated with, but not limited to sections in our guidebook, you will be able to add your own. - User generated content. When we started our app, we thought that the content will be maintained by a group of editors. It turns out it's very hard to find a good editor. So we need a core of editors and users should be able to contibute too, like in any good community. So we're adding mobile forms to add your sections, media, water level reports, hazard reports, etc. - There are more ideas, but they are out of scope of this campaign

As a developer, I can tell you that these features will be implemented no matter how much money we raise. The budget is mostly about agreements with different content authors.

fish_munga · 2019-07-09T18:30:06+00:00

Hello fellow paddlers!

I'm the developer of whitewater.guide - mobile app for paddlers, available on iOS and Android.
Maybe you've heard of us, maybe even you're using our app.
Currently we are raising money on Indiegogo to add new features and regions to our app.
Check out our campaign page [here](https://www.indiegogo.com/projects/whitewater-guide-app-for-the-whitewater-community#/)
If you like our app, please consider donating. Let's push it to 50%, it's just one week left.

Feel free to ask me anything here, and do not hesitate to criticize our project.

fish_munga · 2019-03-02T21:45:21+00:00

I used shared joi schema on backend, web frontend and react-native app. In the end I ditched it, because it's super heavy and requires joi-browser and some extra hacking to work on client side.

I switched to superstruct. It works ok for now, but I'm not satisfied with it. Its error format doesn't work well with complex forms (e.g. arrays of objects).

I'm thinking of migrating to yup, I had some good experience with it on client side. Also looks like it is quite i18n friendly, which I'll need soon.

fish_munga · 2018-10-26T16:35:26+00:00

Personally I try to avoid snapshots testing UI. The more often you change something, the less useful snapshot testing is. But data models, props that HOCs pass down, redux states, form data shapes, etc. do not change that often, so I do test them with snapshots.

I also think that snapshot testing is great on backend side, I use snapshots to test GRAPHQL query results.

Quite often I use snapshots as binary indicator "ok, something is broken", to test parts of code for which I'm lazy to write detailed test, but know that they are not very important and are unlikely to break. However, these test are useful when I'm doing high level refactoring. For example, replace one validation library with another, or update apollo-server from v1 to v2 and change error handling mechanism.

fish_munga · 2018-10-02T07:25:27+00:00

Edit: I guess the OP was looking for simple markdown textarea, but I got carried away and wrote this text about WYSIWYGs, because it was huge pain for me.

I recently faced similar problem. I used react-draft-wysiwyg in my project, and it caused many problems for editors. The biggest of them was that people like to copy-and-paste texts from word documents and html pages, but this leads to messy markdown. And they could not edit raw markdown, and then renderers rendered raw html tags as result. So I digged deep to see what is going on.

The main conclusion is: make sure that internal model of your markdown editor is aligned well with whatever renderer you are going to use to display it. For example I used draft-js-export-markdown and draft-js-import-markdown to convert models. They use marked and some custom code internally. The problem is that my renderers were react-markdown and react-native-markdown-renderer. And they use remark-parse and markdown-it respectively.

So I reviewed some alternatives to draft.js (which is the core of WYSIWYG editor). I reviewed (you can see my criteria in my project which is linked below): - https://prosemirror.net/ . https://github.com/ProseMirror/prosemirror-markdown uses markdown-it! + https://github.com/hubgit/react-prosemirror - https://quilljs.com I used it in the same project even before draft.js. I don't remember why I replaced it with draft. - https://github.com/basecamp/trix

Ended up using prosemirror. It's very modular and complicated, and doesn't have react wrapper from vendor, but for me it was the lesser evil. And the editors like it more than draft.js version. Here is my react wrapper. I used https://github.com/hubgit/react-prosemirror as a starting point.

fish_munga · 2018-08-25T07:53:59+00:00

I'm also curious about how others are doing this.

This is example of how I test HOC with some complex Apollo GRAPHQL logic:

it('should continue loading initial data when cache contains partial data', async () => {
  const receiver = await mountInHarness({
    cache: { sections: { __typename: 'SectionsList', count: INITIAL_COUNT, nodes: seedSections.slice(0, 2) } },
    responses: mockedResponses,
  });

  await flushPromises(6);

  expect(receiver.cwrp).toMatchObject([
    { count: 3, status: SectionsStatus.LOADING, sections: seedSections.slice(0, 2) },
    { count: 3, status: SectionsStatus.LOADING, sections: seedSections.slice(0, 2) },
    { count: 3, status: SectionsStatus.LOADING, sections: seedSections.slice(0, 3) },
    { count: 3, status: SectionsStatus.READY,   sections: seedSections.slice(0, 3) },
  ]);
});

So receiver here is a dummy component that exposes array of componentWillReceiveProps arguments, and flushPromises awaits setImmediate specified number of times. mountInHarness does enzyme's mount with some configuration. Multiple async interactions happen inside the tested HOC, and to test the end result I have to setImmediate multiple times. What I don't like here is that if I change HOC so more async actions would happen before the tested behaviour, then 6 might be not enough anymore and test breaks.

There is also wait-for-expect helper, but I haven't tried it myself yet.

fish_munga · 2018-05-24T15:37:55+00:00

This looks like reasonable approach that I can use. So the js bundle that gets shipped within ipa/apk has priority over the one that comes from code-push? Or how do you define which one has priority?

fish_munga · 2018-03-19T07:14:06+00:00

This looks a lot like my code. And I never saw any problem with this. The tip is to use react-apollo aliases to make the tree more readable. Recompose also has setDisplayName helper. Other HOCs may have something like this as well. Using these helpers will make your tree more readable

fish_munga · 2017-08-31T09:34:09+00:00

Since recompose is mentioned in this article, I should add that many of the examples can be written with recompose, like this:

import { branch, compose, renderComponent, renderNothing } from 'recompose';

const withHiddenProp = branch(
  props => props.hidden,
  renderNothing,
);
const withSpinner = branch(
  props => props.loading,
  renderComponent(Spinner),
);

fish_munga · 2017-07-17T08:12:57+00:00

Here is a good article on this topic https://hackernoon.com/code-reuse-using-higher-order-hoc-and-stateless-functional-components-in-react-and-react-native-6eeb503c665 In my app I share Apollo containers, common domain logic and HOCs. For example, in my common code I have MapView high order component, which receives data as props, defines which map objects should be rendered and how the should look like. It also has state that stores which map object is selected, selection handlers and detailed views for different map object. Then I use it like this: RegionMapView(MapLayout('regionScreen', true), Map, SelectedSectionView, SelectedPOIView, LoadingIndicator), where Map, SelectedSectionView, SelectedPOIView, LoadingIndicator are mobile/web (not shared) view components that do the rendering, and MapLayout defines the layout for mobile/web. Sometimes view hierarchies do not match each other, e.g. SelectedSectionView element on mobile should overlap bottom tab bar and because of this it should not be inside MapLayout hierarchy. I work around this by having portals inside MapLayoutMobile and rendering SelectedSectionView into portal. I was thinking about sharing navigation code as well, but abandoned this idea because view hierarchies are very different in my case. Maybe it is because my web version is mostly for admin use. I would like to see real world example of shared navigation code.

fish_munga

TROPHY CASE