Forem: Joe

Aahh Firebase

Joe — Thu, 15 Oct 2020 17:01:56 +0000

Many developers around the web and mobile have probably tried this BAAS thing called "firebase". Also many have said that it's nice, easy, it's developer focus yada, yada, yada... A lot of very optimistic feedback.

So here is my one takeaway/feedback after using firebase for 2 months.

Firebase is painful!

They have this thing called data denormalization which is a fancy term for duplicating your data.

So I did that. But the painful part comes when you need to keep your data consistent across collections & subcollections.

Look, I'm relatively new to firebase and I'm dying to find a better solution to this tedious process of updating each document in every collection & subcollection affected.

I've been hanging around StackOverflow for hours and found some workarounds like batch & transactions but I still feel unsatisfied with these types of solutions.

If you're planning to use firebase for your future apps... Why? And if you're already using firebase... Why?

If we're sharing the same pain. I would love to know if you have found a way around it or if you've just stopped using firebase as you've learned helplessness.

component #10 - Audio Player

Joe — Fri, 26 Jul 2019 13:45:32 +0000

What I have learned?

How to make a custom Audio Player.
How to enjoy making a custom Audio Player by keeping it simple. :D

What are the main challenges?

Converting the audio current time (seconds) into 00:00. I was really having this silly thought of installing momentjs just to have my desired format. 😂😂 So instead of doing that I'd decided to pull out my primary lifeline (stackoverflow) yep, I even put the link to the solution below.

Overall this is a great experience of making a custom Audio player.

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Format Audio Current Time
HTMLMediaElement
component #3 Video Player

Salamat.

component #9 - Radio

Joe — Wed, 24 Jul 2019 11:26:44 +0000

What I have learned?

How to make custom Radio Input :D
Finally applied @jer advice on using a css sibling selector.

Jer • Jul 18 '19

Nice work @oieeaaaa !

On thing you might want to keep in mind is that anything set to display: none is not available to screen readers or via the tab order -- so for those people that need a screen reader or navigate via keyboard can't interact with your switch. visibility:hidden will do the same thing.

For some unsolicited advice: One of the ways I've made this work (in a switch component in fact) is to give the label position:relative, then position your switch UI (that is, the track, knob etc) as a child of the label (and thus a direct sibling of the input). Then apply a relative position to both the input and switch ui, and position the input beneath the switch UI.

<label class="switch-container">
   <input type="checkbox" value="is_dark" />
   <div class="switch-ui">...</div>
</label>

This structure enables some seriously cool CSS using the adjacent sibling selector. A partial example:

input[type="checkbox"]:checked + .switch-ui {
  // your checked styles here...
}

input[type="checkbox"]:focus + .switch-ui {
  // your focused styles here...
}

Those two selectors effectively say "When the input checkbox is checked, give the adjacent sibling of the input that has the class switch-ui these styles." The second statement does the same when the checkbox is focused.

The benefit is that this is much less work for both you and your javascript. You just define a few states as classes and all the browser handles the rest. All your React class has to do is maintain the checked state of the input itself.

Again, this is nice work. Keep it up!

What are the main challenges?

Hmmm... :/

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
How To Create a Custom Radio Button

Salamat.

component #8 - Accordion

Joe — Tue, 23 Jul 2019 23:05:13 +0000

What I have learned?

How to make a simple accordion.

What are the main challenges?

animation. So I removed it instead. LOL

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Component #7 Tabs

Salamat.

component #7 - Tabs

Joe — Mon, 22 Jul 2019 20:10:46 +0000

What I have learned?

How to make a simple tabs using React :D

What are the main challenges?

Making it complex later... 🤔🤔

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
IMDB

Salamat.

component #6 - Scroll Table

Joe — Mon, 22 Jul 2019 19:24:49 +0000

What I have learned?

Improve the UX for table using react-infinite-scroller.

What are the main challenges?

Can't set the height directly to the table element so I try to search in stackoverflow for answers and I've found that you can use a wrapper for the table and add the max-height to that wrapper not the table itself.

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Set Max-Height in HTML Table
react-infinite-scroller

Salamat.

component #5 - Switch

Joe — Thu, 18 Jul 2019 13:25:34 +0000

What I have learned?

That we can also use css vars instead of react context when only trying to theme a component.
That you can still trigger the onChange event handler of an input even though it has a display: none style. But you have to wrap that input inside of a <label>[input goes here]</label> tag and use the htmlFor props.

What are the main challenges?

That switch component seems not to be enough. So I've had to come up with an example on which to apply that switch component.

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Using CSS custom properties
CSS Variables

Salamat.

component #4 - Modal

Joe — Wed, 17 Jul 2019 11:16:07 +0000

What I have learned?

How to animate modal.

What are the main challenges?

Aligning div to center. 😂😂

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Material Design box-shadow
Lorem Ipsum
UI Gradient
Animista

Salamat.

component #3 - Video Player

Joe — Tue, 16 Jul 2019 20:23:58 +0000

What I have learned?

That it's not easy to customize the controls of a video player.
Support cross browser platforms with the ultimate || logical operator.
Use the mind-blowing <progress></progress> html tag.

What are the main challenges?

I haven't tried doing this before.
So this is my first time making a custom video player and I really enjoy doing it and having fun playing around with their Media Api. It's coooool!

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
Video player styling basics
Media Api

Salamat.

component #2 - Card

Joe — Thu, 11 Jul 2019 13:42:39 +0000

What I have learned?

CSS can be simply complex.
How to make a wave effect.
Using the *:not(:last-child) selector.

I feel like I'm a CSS pro here! LOL

What are the main challenges?

Different way of styling to the same element. I've tried to put a background as an inline style to the element so I can make the background dynamic since I have to pass a url link to that background rule and after that I create a class called .card and put it into that element and I've added some more rules such as background-size, background-cover and background-position to maintain the aspect ratio of the image regardless of the container width and height. And this is what happens when I try to inspect the problem using Chrome Devtools.

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
React Today and Tomorrow and 90% Cleaner React With Hooks
Hooks Reference

Salamat.

component #1 - Carousel

Joe — Wed, 10 Jul 2019 13:52:50 +0000

What I have learned?

How to useState.
Coding with react for several months and dealing with classes I now find that using state inside a function is just amazing. 😌
How to useEffect.
Handling side effects inside the useEffect and clean up when necessary.
And telling to that effect when and when not to run to optimize the performance. This is made possible by passing the second argument for useEffect.
Using keys to have a unique element or component.
Before I thought that keys are only meant for making a unique item when mapping a list to remove the intimidating warning message from console.

What are the main challenges?

As I develop this component I'm kinda doubtful for each solution that I'm going to try, knowing that it has the chance to solve the problem. I still get very uncomfortable doing it.

Why am I doing this anyway?

To learn.
To have fun.
To future Joimee (for reference).

Resources:
React Today and Tomorrow and 90% Cleaner React With Hooks
Hooks Reference

Salamat.

30 components / month

Joe — Tue, 09 Jul 2019 13:48:03 +0000

I'm going to challenge my self to write one component a day for 30 days consistently.

Rules:

It doesn't need to work.
It doesn't need to look great.
I must learn something.

Wish me luck guys... :)

Salamat.