#100DaysOfCode: Week 6

Six??? Crazy to think how we’re halfway there already! (If my math serves me right: 100 days = ~12 work weeks)

Anyways, as I soak my feelings with awe and shock, let’s get back to our regular programming!

For work, I’d say things were eventful (well, relative to what you would consider as eventful). Remember how on last week’s post, I considered setting up our project locally without docker and how that would be a challenge? Well, it turned out to be a freakin’ mammoth of a challenge! It took 2 weeks! 2 weeks of tinkering around legacy gems, packages, and different builds for certain services; 2 weeks of googling, stack overflow, and foreign blogs to solve whatever problem was at hand, only to land upon another problem, and then the cycle repeats!

But as challenges come, we face them steadily! Alleged solutions from different sources were tried but all seemed lost and unsolvable. But like all problems, with the right perspective and thinking, some things can be solved — in a hacky way or not.

Refresher on why not just containerize the project and avoid this 2 week setup disaster: company bought a new mac but the resources were not enough to host all microservice’s containers.

So after we’ve tried all solutions with setting up locally, the team thought of a solution to simulate a container. To put all microservice containers inside one container would be a valid idea but that would hold ~10GB of memory.

How would you simulate that, then? With a hard disk backup! We backed up our team leads computer (without the secrets, histories, and all other private things) and used time machine to recover the state of his computer to mine.

Problem solved!

So we thought. Doing such implementation would copy his account, his home directory, the internal workings of his computer that is bound to his account name! Change it maybe? Wrong! That would cause the entire set up (and it’s interconnected micro services to recompile and may cause some ghastly bugs!)

Solution? Just use the work computer under the team lead’s home directory. It really isn’t that bad. Idk why I made it seem that way LOL.

SEE! That was eventful for me. The emotional rollercoaster of thinking that a “solution” found on the interweebz was the one to fix it all and then it turns out it isn’t, and when the actual solutions does work – sheer joy (or relief, really)

But from a reader’s perspective, yeah that may seem my week was meh.

But not to me! And I guess that’s what really matters.

Also, this week I finished my Gatsby course on @frontendmaters, and started creating mockups for my static portfolio site and eventually my blog (where all these posts would be transferred)

I also started coding the mockups today and hopefully will be deployed soon. So stay tuned!

As for my learnings this week, here are some of it:

• patience and empathy from the team (and myself!)
• gatsby greatness
• gatsby plugins!
• svg basics
• perseverance from failure!
• Design by context, audience, and purpose!

 

Haha, it may seem very non-tech related but most of these learnings are really helpful. Growth!

Also, remember the post were I started reading a book? Man, I haven’t covered half of it! I’m currently at chapther three but I did apply what I learned there on my mock ups! I’m currently (and still) reading Emotional Design by Donald Norman

I also got featured on @cassidoo’s newsletter, again! Haha little things!

Ughhh, What a week right? Enough challenges to grow from failure and the equal support from the team — I wouldn’t want it any other way!

That being said, I’m always thankful for the team for helping find solutions for the problem at hand. Hacky, but it worked! Well soon find a better way to containerize everything in a way that it wont eat up the entire resources of a well enough machine. But for now, this solution is golden amongst others.

Alright, enough of me. How was your week? Let me know on twitter! @carlojanea

As always, thanks for sticking by!

See you on the next one!

Going stingy, get fazed.

Alright, the title might be too aggressive but hear me out.

Some call it being thrifty, and some call it being stingy. They both boil down to the idea of having to save money deliberately, or of without choice.

I, for one, am in the middle. What does that being in the middle mean? I really want to save money so I can save up for the right things to spend on (so that’s the deliberate part), but coming from a background with so much financial problems, saving money and being stingy is actually the only option for me to spend money on the right things. (the no choice part).

So I’m in the middle, okay cool. I’m being stingy to save up for the right things. Got it.

But at what cost? What do I actually sacrifice by being stingy?

A lot, actually. A lot of things people who aren’t worried about saving money don’t get to handle and experience.

Scenario 1 and the only scenario I’m sharing with this post, which actually happened this morning is this. Context is I’m commuting from my house to work. In the Philippines, there are commute options and here are the most common with the prices I spend on a daily basis and the overall time (wait/hail + travel time) it takes:

• Jeepneys: cheap but with a longer travel time. (16 PHP or ~$0.30 and takes 1hr and 10 mins)
• Non-verified Motor Taxis: price is shaky depends on the driver but a range does exist on the correct price. This usually takes around 30 – 40 mins). Note on this as this is part of the following story below.
• Motor Taxis via Mobile App: price is 120 PHP or $2.40. Takes around 40-60 mins
• Taxi: price is around 180 – 200 PHP or ~$4 and takes the same amount of time as a jeepney (1hr)
• Taxi via Mobile App: price is around 200 – 250 PHP or ~$5 and time is around 1hr and 20mins
• Bus/E-Jeep: relatively cheaper than the above options except a jeep. Price is 20 –  25 PHP or ~$0.50. Takes longer time as waiting time is longer (1hr and 20mins)

As you see there are a lot of options. You may weigh in the one that suits your situation best like if you want comfort, speed, or the price.

But the story for this scenario starts with me choosing speed (since I was almost late to work and I hated waiting for jeeps under the molding sun in Southeast Asia) with the flexibility of adjusting the price of such commute (since we’re stingy, remember?)

So the route taken was with the Non-verified Motor Taxis.

I hailed one along the road near our house with a price in mind already. I have been riding non verified motor taxis for like, uhm, 1 year and more now? So I know the price range drivers usually ask for. The lowest is 100 PHP (~$2) and the highest is 150 PHP ($3)

So when this motor taxi driver stopped, he didn’t ask for my offered travel price, right? I was thinking oh cool he just accepts whatever the rider wants. Cool.

We travel under the heat of the sun, over the traffic brooding across the city, and finally reached the location where I work.

I hand him my thought out price (which is 100 PHP, the lowest I could go since we’re stingy right?) and this is where the fazing begins.

He complained, in the most complain-y way possible and even with the slightest tint of anger. He said, “100? Are you serious? It’s 150!”. I try to be calm as possible as I know if this proceeds to be a heated argument and possibly a fight, I would easily break.

I then told him, I’ve been riding motor taxis every morning and all I’ve given is 100 PHP. Drivers haven’t complained ever since.

This was a lie by the way. I don’t ride motor taxis every day to work. I do ride them everyday going home from work and I give 100 PHP to 120PHP most of the time.

He then replied, “If you would have told me you were only giving 100 PHP, I wouldn’t have traveled here!”, and then continued with, “Can you add 20PHP and let’s just call this off? This is just crazy. It’s supposed to be 150!”

I was standing my ground on only giving 100PHP and proceeded to reiterate that I’ve been always giving 100 PHP for 1 year and it’s always been that. I didn’t know why. I couldve easily given the 20 PHP but somehow I didn’t. Was it pride? Was it me being stingy? Or was it something else?

Also, I’m writing this experience down because I can’t get it out of my head. I’m fazed. Fazed by the experience, and fazed by my actions. Why did I do that? Why couldn’t I just give him the 20 PHP? Did I just put a target on my back? Am I gonna be targeted and killed soon?

Alright these might sound like extremes, but it is possible! He knows the road where I wait for jeepneys or motor taxis so it’s easily a ploy.

But as I was willing to die on that hill of only paying 100 PHP. He surrendered and let me go.

But did he? He’s still with me though. As I write this down, he’s still with me. His disappointment, his anger, his reasons, his reaction, and his possible actions.

Fazed. I’m fazed for being stingy. But should I be, though? 100PHP is a fair price, on the lowest range, but it is still fair. Was it my fault he didn’t ask my price before accepting the ride? Definitely not.

I’m not totally at fault here. Probably no fault at all! But my inner overthinking ass, anxiety, and  conscience is fucking kill me man.

Let me know what you think on twitter (@carlojanea), and I’ll let you know if I’m still fazed by the experience.

Okay, that’s it.

Thanks for hearing me out.

Stingy man out. Peacez

#100DaysOfCode: Week 3

It’s a trilogy! Well if this was a movie then it would have been a trilogy, but this is more than a movie! These are my experiences and we need like infinite amounts of trilogies!

Okay movie goer, calm down. 😅 Today marks week three (3) of my probationary period at my current company, which by the way I appreciate very much as you’ve seen from previous posts, and a lot of things went down!

Confession time! The day I started working at my current company, I overheard my team talking about a previous probationary employee and how he didn’t qualify to be regularized. I didn’t get the full story as that would just seem nosy and insensitive to the guy who was not regularized. By the way we got to the topic because we were talking about college friends/acquaintances and he (the guy) was a common connection. Just to put it out there that we didn’t talk about people’s qualification out of nowhere 😂

Anyway, having to know that an acquaintance didn’t make the cut, these past few weeks have been gut wrenching as I, an overly overthinking human, could not stop thinking about it.

I couldn’t stop thinking about it because I really wanted to stay there and it would suck to leave as everything I’ve wanted from a company — culture, mentorship, attitude, and talent — is present. I told myself that if I wanted to be here then I will have to do everything in my power to not fuck this opportunity up.

But this didn’t stop the idea of not being there creep into my head every once in a while.

So, I decided to talk it out with our team lead. I casually sneaked the conversation about the qualifications needed to be regularized during ‘pantry’ talk.

I told him that I’m really worried about fucking things up and end up leaving this amazing company I really wanted to stay in (well not the ‘amazing’ part as that would just seem too on the nose 😝). I asked what are the qualifications and who gets to evaluate who.

He answered the basics of the questions (who gets to evaluate who and the basic criteria/qualifications needed to be passed) but proceeded to this amazing conversation which I really needed. This team lead (which I also talked to in the previous post), for some reason, has the uncanny ability to just know what I’m really feeling behind these questions and then responds with the most assuring and empathetic responses ever.

He basically said that I don’t have to worry about anything since I’m doing a pretty good job at work. Just keep doing what I’m doing and that he believes in me. He believes that I’ll be a regularized employee in no time.

That might have been the most anti-climactic story telling you’ve ever read, but to me? that moment helped me move forward with whatever it was that I was feeling. It pushed me forward without having to feel additional pressure on my shoulders. The part where I know someone believes in me and my work, it just motivates me to be better. It’s not even an ego boost, it’s just pure reassurance that someone supports me in my endeavors and someone understands the struggle.

I might be looking way too deep into that conversation but that happened last Friday (today’s a Thursday the following week) and it really did help. A lot.

Anyway! That was the highlight for my trilogy week. As usual, I’ve learned a lot even when I’m working less (relative to my previous job where I usually overtime). Here are most of the things I’ve learned this week:

• React.memo()
• underscore.js and recompose
• more docker/container things
• server and cache mutations with Apollo
• React and Apollo dev tools
• useEffect and useCallback with event handlers
• Framer Motion funsies!

As you can see, I get to handle tickets regarding Apollo GraphQL now! And update from Week 1’s commit number to master, I probably have a total of 6 to 7 commits now! I know I really shouldn’t measure productivity or accomplishment with number of commits but I gotta tell you I love the process achieving 1 commit to master. Our lead reviews our code thoroughly and gives feedback so great that I get to learn so much things with daily tickets! That’s usually where I learn all the things I’m listing above.

Also, did I mention I found the library section of the company? It’s filled with great resources for learning almost anything! Programming languages, design, software architecture and etc!

This week I’m reading: The Design of Everyday Things by Don Norman. As I’ve read, it’s mostly about how to design things that are functional, visceral, and reflective. It’s a great book to channel inspiration on how to create things. I haven’t finished it yet so I can’t talk more about it 😆

Alright that’s it for this weeks #100DaysOfCode.

Hope you had a great one, too! (Or if not, then that’s fine too! we gotta appreciate the downs in being a dev! and I hope it gets better 💓 )

Let me know how it went on twitter! @carlojanea

Okiedokie, thanks for catching up with me! See you on the next one!

 

Responsive Text Area w/ React and CSS

This is my first tech blog post ever! So here goes nothing.

Context. So I was making a comment section for my work project and busted my hairs and brows when handling the responsive aspect of the text area (input) of the comment section.

Textarea elements in general have a default height and width, are resizable manually, and has a visible scrollbar. And to “mimic” an input area for a comment box, I had to modify all of these.

Here’s a typical text area for you!

And we don’t want that. We don’t want the user to have to scroll to their input and have them adjust it manually. We want to take care of that!

So here’s what we want! (for a responsive textarea element!)

 

Let’s code it!

We start by creating a text area of course!

Then, we do some CSS alterations to make it look like how we want it! You can alter it however you want (CSS-in-JS libraries, css modules, external css files, and others!)

For me, our project was structured with React and RoR and the styles were used by both the rendering ERB of RoR and the front end React src files. So it’s external!

The whole page was designed with CSS Grid and this particular section was designed with flex. To focus more on the text-area element, let me just describe the structure of the section in words.

the parent has display flex;

10% of the section space for the image, with a fixed length and width of 40px so it doesnt drag down when the height of the parent changes

70% for the input

20% for the button, with align-item (a flex property) set to flex-end so it always drags down to the bottom as the height increases/decreases!

Here’s the textarea element style modifications!

line 195 – 197 (box-sizing) are helpful when adjusting box padding and we dont want the overall width and height of the textarea to change!

line 198 – your usual border radius preference for a more curvy input. we love a curve!

line 199 – to make sure that the textarea always takes the the entire width of the space.

line 200 – remember that textarea element has this default width and height? we modify it to look like an input! but it’s actually a textarea!

line 201 – (resize: none) removes the scrolly thingy that allows the user to adjust the size of the textarea

line 202 – (overflow: hidden) removes the scrollbar within the textarea when the content is growing. but we have to remedy this to not result to something like this. (horrible)

line 203 – padding to somewhat center the placeholder. you can probably do something better than this tbh.

And that’s that! Now we handle the dynamic resize of the textarea depending on it’s content.

First, we need to create a handler every time the user inputs something. We use the  onChange (to handle overall change like paste, cut, basic input, etc.) attribute the textarea element provides for us. (with React, and probs other frameworks too!)

we use the rows property of the textarea element to make sure that there will always be atleast one line of visible content within the text area. not setting this will let the textarea element to default the amount of content displayed depending on its height.

now to onChange, heres our function

So first we receive an event object from the onChange handler of the textarea element, we then reference the actual element with event.target (e.target) and then its stylig with event.target.styles

this will allow us to get and set all the distinct styling properties of the element (depending on which you or any ancestor has set)

We set the element’s style to auto so we get the new scrollHeight value. Not doing so results to incorrect calculation of the element’s scrollHeight due to its behavior with overflow: hidden. (removing the scrolling)

we then set the height of the element to either 45 (my default textarea height) or the current new calculated scrollHeight dependent on the content. Whichever is greater sets the height. It’s just to make sure that whenever scrollheight is less than my textarea element’s height (45px) it set that.

And that’s that! You have a completely responsive (to its content) textarea!

If you have some questions or some advices for me regarding this, hit me up! @carlojanea twitter and instagram.

Resources used!

flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

css grid https://css-tricks.com/snippets/css/complete-guide-grid/

lorem picsum (for images) https://picsum.photos/

 

I am a junior React developer and would gladly appreciate it if you have some corrections or like insights about this. Thank you!