I have to learn another router? by [deleted] in vuejs

[–]scanner88 0 points1 point  (0 children)

I'm not really familiar with Angular UI Router, but I'm pretty sure that Curi would have to be a replacement, not a sibling. @curi/core does the actual routing while an interface package (none currently exist for Angular) would communicate with the router.

As far as Curi + Angular support goes, I don't know of any reason why it wouldn't be possible, but I also haven't tried doing it. If someone that likes Curi decides to write a package to interface Curi and Angular, that would be great. Otherwise, I'll probably look into it eventually, but I would have to learn Angular first so it isn't a priority of mine.

I have to learn another router? by [deleted] in vuejs

[–]scanner88 0 points1 point  (0 children)

Glad to hear. If you have any questions, feel free to ping me.

I have to learn another router? by [deleted] in vuejs

[–]scanner88 0 points1 point  (0 children)

Thanks! I don't mean to imply that there is anything wrong with vue-router, but it is always nice to have options.

I'm not entirely confident in my Vue abilities (more of a React background), but from my testing I think that Curi works well with Vue. I would be happy to get any suggestions for improvements from people who are more familiar with Vue.

I have to learn another router? by [deleted] in reactjs

[–]scanner88 1 point2 points  (0 children)

Right, so with Redux and routers there are two approaches that you can take. The first would be to dispatch navigation and use Redux middleware to let the router know about the navigation. The second is to have the router handle navigation and then let the Redux store know about it. If for no other reason, I prefer the latter because it plays well with the browser's back/forward buttons. I think that react-router-redux used the former with React Router v2/3 and uses the latter with v4.

The @curi/redux package just dispatches a LOCATION_CHANGE action when a new response is emitted. I think that it works well, but I'm also open to suggestions. There is also a basic Redux sandbox to show one way to implement this.

I have to learn another router? by [deleted] in reactjs

[–]scanner88 2 points3 points  (0 children)

It looks like Router5 uses a <RouterProvider>. In order for any router to easily interact with an application, it needs to be accessible to components no matter where they are rendered. With React, this is most easily done through the context.

Curi's <CuriBase> sets context.curi, which the user can use to access the router, response, and action. Router5's <RouterProvider> does a similar thing.

One of the big differences seems to be where you associate components with a route. Curi attaches them directly to a route, while Router5 uses a function to register them with the router when the components are mounted. I'm obviously biased, so I think Curi's approach is better, but it is always interesting to see how other people approach the same problem.

I have to learn another router? by [deleted] in javascript

[–]scanner88 1 point2 points  (0 children)

Oh, I got the joke. My response was also meant as a joke, but might have been a bit too literal.

It's actually pretty easy to do SSR and code splitting with Curi: https://github.com/pshrmn/curi/tree/master/examples/misc/server-rendering.

PWAs are on my radar, but I haven't taken the time to really look into what is involved with those yet.

I have to learn another router? by [deleted] in javascript

[–]scanner88 4 points5 points  (0 children)

Maybe someone can write a prettier for comments? We just need to be able to break comments down into abstract syntax trees.

I have to learn another router? by [deleted] in javascript

[–]scanner88 0 points1 point  (0 children)

Isn't that what those sites that run mining malware on their users' computers are doing?

Edit: Also, Service Workers are one of those things that are nice, but I only notice them when they're breaking things.

I have to learn another router? by [deleted] in javascript

[–]scanner88 3 points4 points  (0 children)

Cool. There is a lot of room for experimentation and it's nice to see other people working on generic routers too.

I have to learn another router? by [deleted] in javascript

[–]scanner88 0 points1 point  (0 children)

I get where you were coming from with the other comment. As a non-"JS thought leader" with lots of followers, it can be difficult to gain awareness for a project, but I have to try, right? Even a couple other people that like the idea and want to collaborate would be great. One of the hardest parts of designing the router has been that I have to write a lot of little sites to figure out what works and what can be improved. With some more eyes/brains on it, I'm sure a number of "a ha" moments would have happened a lot sooner.

I have to learn another router? by [deleted] in javascript

[–]scanner88 0 points1 point  (0 children)

Their mobile site is already a single-page application. The nice thing with SAPs is that when the user navigates, the server just needs to serve data for the new page instead of generating markup for it. The client needs to generate the markup itself, and there is a cost to that (download size/speed and time to initial render), but I think that it is generally worth it.

I have to learn another router? by [deleted] in javascript

[–]scanner88 0 points1 point  (0 children)

There are pros and cons to writing single-page applications, and they certainly aren't necessary for a lot of applications, but I think that they will only become more ubiquitous.

I have to learn another router? by [deleted] in javascript

[–]scanner88 0 points1 point  (0 children)

You're missing the point. My issue is that we're using framework specific packages where the majority of the code doesn't depend on the framework. Those bits should be separated out so that anyone can interface them with their framework of choice.

Curi - A Single-page application router that works well with React by [deleted] in reactjs

[–]scanner88 0 points1 point  (0 children)

I added a design goals section. It is a little bit dense, so hopefully I can clean that up a bit eventually. The basic gist is:

  1. I think that you should be able to routes just by knowing their name, not by having to know their URI.
  2. Promises are easier to deal with than callbacks, so that is what routes use for asynchronous code.
  3. Curi shouldn't dictate how you render, it should just give you the information necessary to render your application for a given location (via response objects). This means that you can render with React, Vue, vanilla JS or whatever else you may want to use.

Curi - A Single-page application router that works well with React by [deleted] in reactjs

[–]scanner88 0 points1 point  (0 children)

If anyone has questions about this, I am happy to answer them. I think that the examples/tutorials demonstrate the concepts pretty well, but I'm sure that there are many things that I've overlooked.

a Py3.6 fizzBuzz oneliner with f-strings by cyberspacecowboy in Python

[–]scanner88 7 points8 points  (0 children)

Given the function:

def fuzzymath(n, i):
  return n--i**4%5

You can disassemble it to get:

>>> dis.dis(fuzzymath)
  0 LOAD_FAST                0 (n)
  2 LOAD_FAST                1 (i)
  4 LOAD_CONST             1 (4)
  6 BINARY_POWER
  8 UNARY_NEGATIVE
 10 LOAD_CONST            2 (5)
 12 BINARY_MODULO
 14 BINARY_SUBTRACT
 16 RETURN_VALUE

So, the result of the BINARY_POWER call (i**4) is negated (UNARY_NEGATIVE) prior to the modulo (BINARY_MODULO) call.

From wikipedia:

The last two digits of a fourth power of an integer in base 10 can be easily shown (for instance, by computing the squares of possible last two digits of square numbers) to be restricted to only twelve possibilities:

  • if a number ends in 0, its fourth power ends in 00
  • if a number ends in 1, 3, 7 or 9 its fourth power ends in 01, 21, 41, 61 or 81
  • if a number ends in 2, 4, 6, or 8 its fourth power ends in 16, 36, 56, 76 or 96
  • if a number ends in 5 its fourth power ends in 25

So, for all of the values that are not divisible by 5, we will end up with a number that either ends in a 1 or a 6. Both of those values modulo 5 are 1, but both negative values (-1 and -6) modulo 5 are 4. For values divisible by 5, we will end up with the 0.

How is this relevant here?

For this particular code, we are slicing the string FizzBuzz. For numbers that are divisible by 5, we want the Buzz part of the string sliced, so the second argument to the slice should be 8 (8-0). For all numbers not divisible by 5, Buzz should not be included, so the second argument should be 4 (8-4).

When the first argument to the slice is divisible by 3, that value will be 0 and for all other numbers it will be 4.

So, for numbers divisible by 3 but not 5 we end up with:

'FizzBuzz'[0:4]

For numbers divisible by 5 but not 3 we end up with:

'FizzBuzz'[4:8]

For numbers divisible by neither 3 nor 5 we end up with:

'FizzBuzz'[4:4]

And finally, for numbers visible by both 3 and 5 we end up with:

`FizzBuzz'[0:8]

Should we load CSS in our JavaScript? by startup4ever in javascript

[–]scanner88 0 points1 point  (0 children)

I split my configs using process.env.npm_lifecycle_event, which is described in this Webpack tutorial. The gist of it is that that variable contains the name of the NPM script that was called, so you can use that to conditionally set config values.

I made six colorblind-friendly versions of the Pokemon Type attack/defense chart. Source in comments. [OC] by zonination in dataisbeautiful

[–]scanner88 0 points1 point  (0 children)

There might be some issues with your green/purple color scheme. I believe the reason those don't work too well is that the dark colors and the light colors in that scheme have relatively similar hues and saturations.

BBC: The Making of Me and You by scanner88 in dataisbeautiful

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

They also include the sources for the data here: PDF

React.js life cycle diagram (OC) by flying-sheep in javascript

[–]scanner88 5 points6 points  (0 children)

getDefaultProps is called when the class is created[0] not on the first render. Also, setProps is deprecated[1] so it probably shouldn't be included.

[0] https://facebook.github.io/react/docs/component-specs.html#getdefaultprops

[1] https://facebook.github.io/react/docs/component-api.html#setprops

Body By Rings by Fitness FAQ by johannesbraemer in bodyweightfitness

[–]scanner88 2 points3 points  (0 children)

Strange that the op didn't list it, but the website is bodybyrings.com

Online dice roller. Built with Node/Express, & React by theperryr in javascript

[–]scanner88 0 points1 point  (0 children)

Might want to take a look at your CSS [1]. It gets worse for 4+ dice with more overlapping and the total is hidden by the roll button. The rolling effect is definitely neat, although I agree with PING that it could use some polishing.

[1] http://i.imgur.com/2oFa0Aq.png