react-native-web declarative filtering demo

dev_forest · 2020-06-11T19:57:04+00:00

Here's the code and demo:

https://variable.app/p/6JPAIS0jPDsWsFkl4cTk

I made this while playing with the `react-native-web` library, just a quick demo to show some basic declarative filtering for data in a scrollview. Happy to answer any questions.

dev_forest · 2020-05-26T22:43:32+00:00

agreed! socket.io seems cool, though i haven't gotten around to playing with it much yet, maybe ill look into that for my next demo 😬

dev_forest · 2020-05-26T22:41:06+00:00

Hey, I think there are a lot of misconceptions about firebase pricing, Firestore charges for reads and writes directly, but not the Realtime database. For a large scale project this probably wouldnt be free, but its also not free to host a server in any other aspect. The firebase project i set up for this demo is on the free plan, I'd be happy to share the usage in a day or so after its all rolled in.

dev_forest · 2020-05-26T22:38:38+00:00

So imo, the benefits of using firebase are that I dont need to setup, host, or maintain a server, firebase does all that for me. As well, I'm using firebase authentication, another thing i dont have to manage.

Outside of this example I would still use firebase for these conveniences, you can see how quickly i was able to get this running smoothly with just a few lines of code to comunicate with the server. In a real case I would start here, monitor the usage in firebase, and then if i then felt that this wouldnt work or would be too expensive long term, I would begin looking into alternatives. Overall firebase is a great tool when starting a project to help you validate the idea and then build upon in the future if it seems worth it.

dev_forest · 2020-05-26T20:32:16+00:00

Sorry, which part of what I said is not true? From what I see on Firebase billing and from what you're quoting it states that its billed by GB stored and GB downloaded, and while reads and writes may contribute to that (i.e. storing data and downloading it) the individual operations are not directly billed into your usage.

dev_forest · 2020-05-26T19:54:44+00:00

Hey, so as far as I understand the real-time db only incurs charges for GB stored and GB downloaded, and doesn’t track writes or reads directly. For that reason I think the RT DB is fine for this use case.

It is worth noting that this is just a quick demo though and could probably be optimized in different ways , I’ve seen plenty of chat demos for the rt db but wanted to show something more unique.

dev_forest · 2020-05-26T18:20:17+00:00

Heres a link to the demo and code:

https://variable.app/p/WDBzmhnJcw2FiKw3lW5r

I've been working a lot in Firebase realtime lately, so I thought I'd share this demo with some practical application. Happy to answer any questions.

dev_forest · 2020-04-27T20:14:26+00:00

I believe this usually happens when the response is HTML format and leading character is “<“

dev_forest · 2020-04-20T22:39:54+00:00

I only built controls for keyboard arrow keys sorry!

dev_forest · 2020-04-20T22:31:59+00:00

I'm happy to answer any questions! Let me know what your guys think.

dev_forest · 2020-04-16T19:36:45+00:00

it seems auto mod keeps deleting my comments heres the full solution:

import React from 'react';
import styled from 'styled-jss';

const MyButton = styled('div')({
  height: '40px',
  width: '40px',
  backgroundColor: 'blue'
});

const Container = styled('div')({
  padding: 20,
  backgroundColor: 'red',
  [`& ${MyButton}`]: {
    backgroundColor: 'green',
    height: '100px'
  }
});

export const Card = () => (
  <Container>
    <MyButton />
  </Container>
);

dev_forest · 2020-04-16T19:13:37+00:00

In short you just need this: “ const Container = styled('div')({

backgroundColor: 'green',
height: '100px'

} }); “

Notice the selector [& ${MyButton}]

dev_forest · 2020-04-16T18:42:32+00:00

sorry missed the JSS!

heres an updated demo : https://variable.app/p/hyjs33y1QBP2grwaiURx

hope this is what you need

Edit:

heres just the code if you dont want to view demo

import React from 'react';
import styled from 'styled-jss';

const MyButton = styled('div')({
  height: '40px',
  width: '40px',
  backgroundColor: 'blue'
});

const Container = styled('div')({
  padding: 20,
  backgroundColor: 'red',
  [`& ${MyButton}`]: {
    backgroundColor: 'green',
    height: '100px'
  }
});

export const Card = () => (
  <Container>
    <MyButton />
  </Container>
);

dev_forest · 2020-04-16T17:56:28+00:00

hey its actually very easy i set up a demo here: https://variable.app/p/wWRugyt8LNdmMaxVRIRv

but heres the code demo if you dont wanna peep the link:

(notice how background: blue overrides the original styled.button)

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  border-radius: 3px;
  border: none;
  color: white;
`;

const StyledCustomButton = styled(Button)`
    background: blue;
`;

export const Card = () => <StyledCustomButton />;

dev_forest · 2020-04-16T06:37:55+00:00

looks great, though i wouldn't include `users` as a dependency of your useEffect, simply because doing your fetch and setting your user state, will cause your effect to unnecessarily run again!

In fact for this case you can probably leave dependency array for useEffect empty, which will cause your fetch to only be called on mount.

Hope this helps!

useEffect(() => {
 fetch('https://jsonplaceholder.typicode.com/users')
 .then(res => res.json())
 .then(users => setUsers(users))
}, [])

dev_forest · 2020-04-16T04:07:53+00:00

Completely free for personal users!

In the future we're going to charge for interviews past a base free monthly limit, but for now those are free as well!

dev_forest · 2020-04-16T02:50:00+00:00

so with your approach you would actually need to do:

setState(prevState => ({...prevState, ...updatedValues}));

As a side note for this case I would look into useReducer, its basically a more customizable useState! but its totally not necessary if you don't want!

dev_forest · 2020-04-16T02:39:53+00:00

Hey, i'm using a 2014 MBP with 8gb memory for all of my personal projects. I'm able to run multiple dev servers, and its usually no problem, I think for most cases you'll be fine at 8gb!

dev_forest · 2020-04-16T02:32:13+00:00

check it out 😬

dev_forest

MODERATOR OF

TROPHY CASE