Viet Nguyen Blog RSS Feed

HoopSim Devlog #2: Daily Slate, Multiplayer, data wrangling

Thu, 08 Oct 2026 00:00:00 GMT

TL;DR: HoopSim has a second way to play now. Daily Slate drafts only from players whose NBA teams play on the current, sims that one night, and scores every fantasy team head to head against every other one (28 matchups if there are 8 teams and other math bits). Also added multiplayer, playing with friends is better. Also learning how to project the next season of players with college stats for rookies and previous seasons for current players. Welcome back Hali.

In the first devlog I talked about taking the grind out of fantasy basketball. No waiting on box scores, no long season, just strategy. Career mode does that by letting you draft once and sim a whole season in minutes. For the current features and stack, see my HoopSim project page.

I wanted to remix the standard fantasy formula a bit.

What Daily Slate is

You pick Daily Slate on /new-game (it’s the first card now, Career Season is second). Tonight’s real NBA games decide everything:

The pool is frozen to players on teams that play today. Nobody else is draftable. So if only the Heat play the Knicks, you are only drafting Heat and Knicks players.
The league is two fantasy teams per game on the slate, capped at 8.
No bench. Every player you draft gets scored.
One sim. You hit Sim the slate, the night’s games run once, and every fantasy team plays every other fantasy team with the same 9-category logic career uses. With 8 teams that’s 28 pairs. The results page ranks everyone by record.

Daily sim is free on every plan, guests included. Week sim, advance day and the season sims all reject daily leagues on the server.

Those two are from a QA run on my dev backend (a 6-team night, so 15 matchups instead of 28). The team names are generated, and yes, the QA team went 0-5.

Two small gotchas:

ESPN’s team abbreviations don’t all match the ones I been using in ConvexDB. GS is GSW, NY is NYK, SA is SAS, UTAH is UTA, and so on, so there’s a little mapping table.
Some schedule rows have a placeholder side like TBD or LON. Those games get dropped entirely, so a team never shows up as draftable on a night it doesn’t actually play.

The sim now runs the real matchups from the schedule (not a round-robin generator), so you’re scored on exactly the games your pool was drafted from. “Today” is the UTC date, which means on the East Coast it flips over at 8pm. That’s something I want to revisit.

Why it still couldn’t draft on a normal night

With ~6 players per team, a normal four-game night is 8 NBA teams, so roughly 48–56 players. The league is 8 fantasy teams × 8 rounds = 64 picks. It could never fill, so createLeague threw DAILY_SLATE_TOO_SMALL on most nights. A mode called “Daily” that doesn’t work most days isn’t really a mode.

So a short pool gets 8 teams × 6 rounds instead of an error, and every pick gets filled. Now it only rejects a slate where a team can’t even get one pick. The “next slate is…” hint uses the same math, so it doesn’t send you to a date that’ll fail too.

I also bumped the full-import cap from 750 to 800 so the 742-player bundle has some room. And I checked that career didn’t move: against the live dev pool of 742, the career top 175 are all players who meet the minimum games played, they’re spread across all 30 teams, and the cut lands at fantasy value 2.05 (the next player is 2.00).

Shorts get a daily version too

I already had a pipeline that records career runs for short-form video. Playwright drives the app and captures it, then Remotion composes the video. Daily is a different journey, so now SHORTS_MODE=daily records one: create a Daily Slate, draft (capped at 8 rounds), hit Sim the slate, wait for Final standings, and scrape your rank and record off the standings panel. If the standings text doesn’t parse, it fails loudly instead of rendering a broken video.

The copy changes with the mode: “Simming tonight’s slate…” for the interstitial, “SLATE RESULTS” over the recap, and a rank label like “3rd of 8”. Without the env var, career works exactly like before, and old props.json files still render.

Multiplayer Shenanigans

I am quite happy that I chose Convex as a backend as it came with all the bells and whistles to implement multiplayer into the draft rooms. First version of HoopSim was a single player experience. I was going for a roguelike experience (single player run based arcade-y adventure). Online though, its a whole network of people who just love drafting against people.

So I brought that to both the career mode and the daily slate mode.

Data

The projections algorithm is still very finicky. I have been just using numbers to crunch other numbers. How do statisticians do their jobs with computers or AI or spreadsheets in the 90s? I am still tweaking the algorithm to get rankings correct compared to the big dogs (Yahoo, ESPN, Sleeper, etc). I definitely will need some more data wrangling.

Can You Swap Your LLM for Jev?

Sun, 20 Sep 2026 00:00:00 GMT

TL;DR: I swapped three decision-shaped calls in my resume studio over to TypeSafe’s Jev and measured it. Against a cheap Gemini model, Jev came out about 3× faster (215 ms vs 713 ms), not 200×. The swap that mattered most replaced no LLM at all: it replaced a keyword matcher that labeled a Senior Nurse an operating room nurse, because “or nurse” sits inside ”senior nurse“.

The internet went abuzz this week when TypeSafe AI announced their new model, Jev. It’s definitely a bit different from text in, text out AI we have been using for the past year+.

From reading the docs and other materials, looks to be fast and cheap which I really am for so I tried using Jev as a replacement for some things in a product that uses AI.

What Jev is, briefly

For those who don’t know: Jev is what TypeSafe calls a System One model, named after the Kahneman thing, fast automatic judgment. It reads in English language but does not write any back. You hand it a state, meaning your context, plus typed questions, and you get typed answers back with probabilities attached. Questions come in three shapes: Choice for one-of-a-set, Score for a rubric, and Noul (their word for a yes/no question, which returns a probability between 0 and 1). Every question in a request shares the same state, so asking twenty-five things is one round trip.

So its not a clean change to use like changing a model in Cursor. Context moves into state, and the thing you were hoping to read out of the JSON becomes an explicit question with an explicit answer space. Input is $0.042 per million tokens. The API still reports output tokens but they are not billed. Their pitch is in the intro post and the docs.

How I measured

The product is the Resume Studio on Nurse Remotely. It takes a nurse’s resume, tailors it against a job description, and runs mock interviews (just released this feature as of this past weekend). I moved three calls over and benched them against the real production code paths, thirty samples each, on 2026-09-19. I describe the Resume Studio and its engineering stack on my work page.

Models were jev-1.13.0 and gemini-3.1-flash-lite, the cheap fast Gemini tier.

TypeSafe’s intro post publishes 70 to 500 ms typical latency, and a 193.6× faster homepage figure that the same post calls the high end of real world gains. Those are their numbers on their evals. Mine came out at about 3× against Gemini Flash-Lite.

Call	p50	p90	max
Jev, interview judgments	215 ms	294 ms	465 ms
Jev, role matrix fit	226 ms	321 ms	847 ms
Jev, bullet grounding	200 ms	258 ms	281 ms
Gemini, generative answer evaluation	713 ms	882 ms	892 ms

Note the role matrix row: great p50, 847 ms max. Quoting p50 alone would hide a fat tail.

Case 1: the mock interview

The old flow called Gemini on every answer. One request did two jobs: decide whether to follow up or advance, and write the follow-up. Every turn paid for a generation even when the answer was already complete.

Now Jev judges the answer instead. Eight judgments in one request, against the STAR shape interview coaches ask for, meaning situation, task, action, result.

Tokens went up. The judgment request carries the question, the answer, the resume, and the job description, exactly what the generative evaluation carried. Jev bills more input on a complete turn, 1,569 tokens against Gemini’s 1,246. I replaced a guaranteed generation every turn with a guaranteed judgment, plus a generation only when one is warranted.

Cost still went down against published paid Gemini prices, because Jev input is roughly six times cheaper per token and its output is not billed. On the published paid numbers: the old path was $0.000391 per turn, always. The new one is $0.000066 for the judgment plus the probe rate times $0.000373. Break-even sits near an 87% probe rate, and at 100% the new path is worse, $0.000438 vs $0.000391.

To get a probe rate I hand-wrote 34 nursing answers with deliberately mixed quality. 16 got probed, so 47%, which works out to about 38% cheaper per turn.

So somewhat good but its not clean.

Case 2: keywords versus Jev, which is the actual point

This one replaced no LLM at all. It replaced a local list of keyword aliases scoring which nursing specialties a resume claims, what I call the role matrix.

The alias "or nurse" substring-matches “senior nurse”. So a Senior Nurse at an outpatient primary care clinic, with no operating room experience anywhere in the document, came back as Operating Room at high confidence, ranked first. Not a near miss. The top answer was wrong.

The Jev version asks a yes/no per specialty, one request:

const fit = await client.systemOne({
  state: { resume: resumeText, jobDescription: jdText },
  questions: {
    specialty_or: noul("Does this nurse have operating room experience?"),
    specialty_icu: noul("Does this nurse have intensive care experience?"),
    // one Noul per specialty, all sharing the same state
  },
});

Live on that exact resume, specialty_or came back 0.03. My code keeps specialties at or above 0.6, so operating room got dropped, and Jev picked outpatient clinic primary care at 0.88 instead. The keyword matcher, still sitting right there in the codebase, still reports operating room first.

The alias list also missed CCU and IMCU entirely, and wanted every word of “Utilization Management” before matching a job description that just said UM reviewer.

Now the number that should end any speed argument. I timed the keyword matcher over two thousand local iterations: 233 microseconds, median, no network. Jev is 226 ms p50. About a thousand times slower, and it costs real money at $0.000224 a call where the old path cost nothing.

It was still the right call. Regexes are unbeatable on speed and hopeless at synonymy.

So, can you swap?

You can swap a call when what you actually needed was a decision. Advance or follow up. Does this resume claim ICU experience. Is this bullet supported.

For me, I don’t think I need Jev for these use cases.

Case 1 swap got faster, Case 2 swap got a thousand times slower.

If you want to poke at it: the JS SDK reference. I am going to keep doing research on it.

HoopSim Devlog

Mon, 02 Mar 2026 00:00:00 GMT

I first got the idea for this app while traveling to Asia this past winter. Being away from the computer let me actually rest the mind and let it wander for once. And I had time for writing. So I wrote, traveled, ate and just rested and came back rejuvenated.

How I learned to build with AI

The landscape of development changed with the seasons. I remember in the middle of summer last year (2025), I was attempting to one-shot prompts and ~~vibe code~~ and it just would not work out at all. Approaching winter of 2025 and with my vacation in sight, AI tools were actually getting better and better as more models came out and more tools came out as well. I was using Cursor for side projects and Augment at work. I always liked Cursor and it seemed to work within my workflow better than Augment. A few months at work and Augment had caught up to where Cursor was and even had some things that Cursor lacked (mainly the enhance prompt action worked wonders for dev work).

Enter plan mode in Cursor. This thing turned my prompts from vague shots in the dark and barely any context for the agent to fully fleshed out plans. AI definitely was able to actualize what I was describing. I also learned that I should be trying to one-shot an entire app. I learned to plan and become more detailed and learned how to prompt. I also learned how to break down complexity and use AI to brainstorm. Things were moving fast and the old ways of development were giving way.

The research phase

So when I got back from Asia, I started a long research phase. How did I want to structure the project, what technologies did I want to use, how much did I want to experiment with, costs, etc. I actually have never done this before for one of my projects. Which is quite weird because at work (I work as a software engineer at a startup), we would have sprints, ceremonies, organized tickets with requirements, just all the efficiencies afforded to get work done in the agile methodologies. Shouldn’t I use what I learned at work for my own side projects as well?

What is HoopSim?

This is something I came up with while trying my best to manage as commissioner a fantasy basketball league on the Yahoo Fantasy platform while 13 hours ahead due to timezone differences. What if we do away with time constraints in the fantasy platform? What if, also, we do away with injuries as well? The last pain point was what if we got rid of the long long season of the NBA, essentially the grind.

That led me to the idea of replacing all the pain points with algorithms/simulations. Basically taking the reality out of the fantasy. With simulations, we can turn injuries in the simulation off. With algorithms, we can simulate entire weeks, even seasons if we wanted to. No more grinding. No more waiting for boxscores. Just strategy uninterrupted and streamlined.

This idea stuck in my head and traveled with me to S. Korea and Japan and then back to the States. I told myself if I can build a quick version of it with AI, I would pursue this until its something that I am proud of. You can check it out at hoopsim.xyz. I keep a current overview of the features and technology on my HoopSim project page.

Tech stack

So tech stack I am working with is Vite/React/Typescript/TailwindCSS/DaisyUI for the front end and Convex for the backend. This is my first time working with Convex and what drew me to it was Convex was marketed as an AI first or AI Agent friendly backend. I was also intrigued by its sync engine capability. I have never worked with sync engines before but I believed it to be a good idea with all the data going back in forth from DB to FE.

UI and UX for now

I have been playing fantasy basketball for a number of years and the only UI I have really used a bunch and am used to is Yahoo’s. I am no designer and I am also not an expert of UX so the UI patterns of Yahoo will have to do before we get to user testing (done by me probably).

The big hurdle

The biggest test/hurdle will be tweaking and tuning player generation and the simulation algorithm of a basketball game. Do I need some time in data science or machine learning to crack any of this? I guess we will have to find out. Let’s keep moving forward.

The Day The World Turned Red

Mon, 12 Jan 2026 00:00:00 GMT

I have been keeping quiet about a big aspect of my life and I am sure some of my closer circle have noticed a few things have changed about/around me. This is that story.

After two bouts of COVID, I needed to get an overall picture of my health. Also I had a nagging pain on the left side of my abdomen that I wanted to get some insight into. So I found a PCP, and had her order some lab work (comprehensive blood work) to look into it. I also wanted to check out what was going on in my left side (pancreas) so asked to include that as well. I went and got the blood work. The results came back a few days later and they were definitely abnormal. So abnormal in fact, that my PCP recommended I go to the ER to get things checked out.

That absolutely scared me. So much so, that I doubted it a bit. I felt fine. More normal than fine. So I needed a second opinion, I knew nothing of ERs and their processes. Only what I saw and heard on TV shows and anecdotes from people. I contacted my sister (who’s been working in the healthcare field for a long while now), and gave her the rundown.

She also recommended a trip to the ER to get everything sorted. So a bit of panic set in, it was already late in the day (7ish pm) and I started get to ready for the ER.

So we (my wife and I) drove to a hospital that is a bit further away on my sister’s recommendation and got checked into the ER. Got into one of the patient rooms, explained what got us there in the first place to the attending PA, they ordered their own set of blood work labs to be done so they can have it in their records. I gave more blood for labs. We waited for the results. The PA also ordered an ultrasound of my abdomen to try and get to the bottom of the nagging pain I was experiencing.

Labs came back confirming what we already knew, that my liver was not doing so good as evidenced by the liver enzyme test results being abnormal. They needed to know why so they ordered up some MRIs and CAT scans to be done in the morning. I was to be admitted for an indefinite amount of time until they can figure out why my liver was doing so badly. I actually could not believe it but was in high spirits as this was my first ever ER/hospital anything ever. Optimistic view to everything, let’s see what happens, I thought to myself.

Now, I definitely had my fair share of alcohol in my life but I do not believe it to be the level of a raging alcoholic. Some specialists came to see me and try and diagnose why my liver is the way it is. Officially, my liver had deep scarring (cirrhosis). The liver can’t come back from something like this. They all asked me about my drinking habits. I do not drink nearly enough to qualify for alcoholic liver failure. The next one was about family history of leukemia. That’s a no from me (and my family) as well. We also ruled out hepatitis as well. So what could it be?

I had no idea and they (the doctors) had no idea so I was giving blood around the clock so they could test it and see if they can come to any conclusions while the GI doctor came around asking questions. This all happened in the span of 3 days.

I do have to mention the sporadic around-the-clock nurse schedule they had me on. Every few hours (maybe 3-4), I would be met with 2 nurses for blood draws and vital checks. It did not matter if it was in the middle of the night or if I was in the middle of eating. It was very odd like if they did not check on me, I would pass away or something. I wish I had the nerve to ask to space it out a bit as I could not get any proper rest in.

I came to realize that there is a big mental toll when it comes to being admitted in a hospital and there does not seem to be an end in sight. It really is a grind when you do not know when you will leave a place. It is fairly similar to being at an airport. The food is adequate, the walls and smells are non offensive but drab. The people (in this instance, nurses and doctors) are all just doing their jobs. And then there’s you, waiting for answers and basically under observation like a guinea pig.

It was exhausting. I thought I could handle a bit more but I was at the point where no answers were coming and I was still feeling pretty normal besides the fact I gave so much blood over a 3 day span. I finally asked if its alright for me to go home, I was racking up the bill and there does not seem to be an end to the number of tests and questions.

I was approved for home health care services. A nurse would come around the clock and check up on me as if I was still under observation. I was to have iPad appointments with a doctor so they can ask any questions. It was still better to be home than to be at the hospital. Thank goodness for that.

The blood tests that were ran ultimately found the problem. To be honest, I never expected this diagnosis. So the DNA in my blood had mutated some time ago (maybe in the last 3-5 years) and my body was starting to produce more blood than normal. That in turn increases the likelihood of blood clots. Another effect of more blood coursing through my blood was that my blood pressure was much higher. And that higher blood pressure caused hypertension throughout all my organs. The organ that was having the roughest time with the increased pressure was my liver.

My diagnosis is official. I was diagnosed with a rare blood cancer called Polycythemia Vera (PV). That blood cancer led to the portal hypertension in the main portal of the liver and that syndrome is called Budd-Chiari Syndrome. And my liver is beyond repair with severe cirrhosis.

All big time revelations that a couple of days in the hospital revealed. My life did a big 180 once I got this diagnosis. Since there is no cure (as of this writing) for PV, the hematologist says I will have to be on blood thinners for the rest of my life (to combat blood clots). Since my liver is in such a sorry state, the hepatologist gave me a 5 year window for a liver transplant. The bad news just keeps rolling.

In order to combat these diagnoses (even if I felt really normal at the time), I decided to switch up my diet, gave up alcohol for good and to try everything to improve my overall health. A rising tide lifts all boats, as the saying goes.

I changed my diet to be more protein heavy and adopted the Mediterranean diet, gave up red meat, tried to replace carbs with fruits and veggies. The diet change took a long while to get used to. I am a heavy snacker and lover of carbs. It took a while to embrace having protein as the main dish instead of the carbs. I also had to balance these restrictions with some doctor requests: less iron and less salt, no raw foods (goodbye sushi). Giving up red meat already lowers my iron intake but there was a sneaky source of iron that I had a hard time giving up: breakfast cereal. They add more iron in the cereal! Cereal was one of my go-tos at night when I was fiending for a midnight snack. That one was hard to give up.

It took a couple of months but I finally settled on some food that followed all the restrictions, was easy to cook and nutritious enough. The process along the way was rough. I had lost over 20 pounds trying to figure everything out and trying new things.

I believe now I am doing pretty well. Diet is good, health is holding steady. Doctor visits are less frequent. I will just need to continue on this path and adapt as things change.

Looking back at the sequence of events that brought me here was a good reflection on my health and the journey thus far. August 7, 2024 will be a day of remembrance. I know I am secretive in what I put out in the world and I don’t want a pity party whenever I tell this whole story. That’s the reason why I have kept this under wraps. I hope that this telling of this slice of life of mine encourages anyone to schedule that checkup that they have been putting off. You never know what you will find and how your life will change.

The Day The World Turned Grey

Sat, 06 Dec 2025 00:00:00 GMT

Decemeber 6th, 2023.

I will remember this day vividly.

I woke up. I started with a look at my phone. Like any other day.

She was in the ICU, my phone said. She was admitted the day before. Big medical terms that painted a bleak picture. My heart sank.

My sister asked if I wanted to drive with her to South Florida to be with her in the hospital.

I had to wait for the handymen that was going to fix a pipe thats been leaking on the roof and it really needed to be done before the big Asia trip. I got a call that they were delayed until the afternoon. So I had to wait. My heart raced with anxiety.

I was also juggling work and also speaking with a recruiter about a new role, a role I was ready to accept but had to iron a few details out.

I was pacing around the house. My heart was in my throat and also in my stomach. It was agony. Time went so slow. And I had to wait it out. Patience was a distant friend today. More updates came and went. She had stabilized. I let out a yell of encouragement in the air. The handymen came and fixed things up rather quickly. Great. I met up with my future boss and ironed out the final details. I accepted the offer right there and then. Excellent. Things were turning around.

Once I got off the call, I called my dad and started driving towards Daytona to pick him up since he was using my old car to go to work and that car would not survive the 4 hr drive to South Florida.

Tina prepared an overnight bag for me and had to stay behind for the cats. I had an hour drive ahead of me to pick up my dad. So I went. That was a long hour of uncertainty but I got to my parent’s house. No updates so far so I thought we were in the clear. No news is good news.

My dad had just got off work so he had to pack some stuff up. I waited around the house. I hadn’t eaten all day and it was already the afternoon so I had a bag of chips and some water. What was this feeling I was feeling? There were still no updates in a while.

My dad said he had a bad feeling since no updates. I didn’t want to hear that so I waited in the car to leave.

Now we were all packed up and started our drive to South Florida. Still no updates. I was driving. My dad asked for an update in the family group chat. I now wish he didn’t.

“She go in peace” was my mom’s reply back.

I was in the driver’s seat but I felt directionless. I felt hopeless. Sadness filled to the brim. I concentrated on the road with wet eyes. I felt my heart move to the back of my throat. I gripped the wheel tight. The sun was bright but it was greyed out. The roads were empty. We drove in silence for a long while.

My dad would get random phone calls from people I did not know but they were asking for updates. The vietnamese community runs on gossip and my dad was answering those questions. My vietnamese is not good but I understood what was asked and how my dad replied. “mất rồi”. Loosely translated, it meant “we lost her already” or “she’s gone”. The car ride was no longer quiet.

We made a driver switch and also to get gas. I was able to catch up on texts and was able to get in contact with my brother. He was actually in the middle of a work trip in Dallas and had to cut it short. We were designated to go pick him up at the airport. We drove further and picked him up and routed our way to the family house where everyone was gathered. We pulled up and there were already plenty of cars there. I did not know what to expect.

I did know that this was going to be hard. I just didn’t know how to handle it all.

In Buddhism and maybe in general, there is a lot of talk about energy and its manifestation in feelings and in people. The energy in the house when we arrived was absolutely grey. First person I saw was her oldest sister and she bawled when she saw us. All her young nieces and nephews were gathered on the couch, somber looks on their faces. I really can’t put into words all the feelings in that house that night but this was the moment I finally felt it. She was no longer with us.

My heart was already broken into pieces but it further broke being in that house that night.

The she that I was writing about was my cousin Trang Van.

She made my childhood bright. I feel like I had a very standard millenial childhood, not dominated by social media and technology but one that had a lot of outdoors and MTV and weird 2000s-ness. She was the bit of whimsy in much of my life. She got me into writing, anime and music. She had a hand in shaping alot of my interests today. I am not sure who I would be without her.

Most of what was written above was done on January 11, 2024. I really did not have the heart to finish writing it as I had just got back from Asia and wanted to keep what I had in my head and my heart but I needed to put it somewhere and come back when I was ready.

I am still not ready but I am more willing now. Today is the second anniversary of her death. I still remember a lot of the details written above vividly. What really stayed with me was that first walk into the house, her family house. There was just a density of sad energy that beared down on everyone in the house. It was heavy and overbearing like a torrential rainfall that would not quit and we were all standing in it.

This was the second major loss that I have experienced, first one being my cat Loki. I always thought losing someone in my more immediate life would have happened in my old age (not sure when that starts). This grief felt different. It was piercing, it made me reexamine things in my life.

One thing I remember from that day is how powerless I felt. There was literally nothing I could do to improve her chances. No amount of money, no amount of good will, no amount of good karma. When I was pacing around the house waiting for updates, waiting for the handymen, just waiting, I started praying. Pleading with whoever would hear, “Please let her pull through! Please!“. That fell on deaf ears. I had no power in this. The only thing left was loss and grief.

In the movies, when characters deal with grief, maybe while at the bar or in the family house after the funeral (not sure why but Brooklyn 99 comes to mind), they would say things like “He was one of the good ones, I was always happy when he came into the room.” Something to that effect. I somewhat get that now but I am still overcome with grief any time I think of her and that day. So it looks like I am still grieving to this day but I hope one day I can celebrate her life and thank her for everything.

Update 2023

Fri, 14 Jul 2023 00:00:00 GMT

Welcome Again!

It’s good to be back here although I wish it was on better terms. Nonetheless, need to push forward and not look back. We all carry baggage, I just have more of it now.

I want to get back to writing and learning in public again. I am paying for this domain so mind as well put it to good use.

To make myself accountable, I would like to make a post comparing all the different state management tools we have available to use in the frontend. I have already explored Xstate but it definitely needs an update.

Another post I want to make is to explore Prisma. After going deep into Django, I now know the power of ORMs. I always thought it harder to keep another mental model on top of the DB but not needing to jump between SQL language and your backend language of choice is quite neat.

That’s all the ideas I had for now. We will see where we are at in a few.

The Move

Mon, 31 Aug 2020 00:00:00 GMT

Moving. Must look forward.

In another sense, I have just completed my first out of state move into a relatively unknown place with no contacts in the immediate vicinity. It is both fresh and daunting.

It all started with a LinkedIn message from a recruiter whom I have had previously said no to about two years prior. In February of this year(2020), the recruiter messaged me if I was on the market for a new position. Since LinkedIn keeps conversation history, it showed our previous conversation about the same topic. I was surprised the recruiter still remembered me and also was still recruiting with the same company.

At that time, I might have felt a bit stagnant at my (at the time) current place of work and just said yes to their inquiry and jump started the ‘let us get to know each other’ of the recruitment process.

February 2020 feels like a very distant and faraway time. At that time, the whole world was just getting to know the deadly virus know as COVID-19. At that time, I was still able to go into the office but was slowly shifting into a remote state partially due to the stagnation and my laziness surrounding commuting (it wasn’t even that bad though lol).

So me and the company got to ‘know each other’ (screening call and preliminary questions) and on the surface, I liked what I heard, and they liked what I was dishing out (by this time, I was well adept at recruiter-speak) so we were heading to an on-site interview arrangement.

The interview was scheduled in the middle of March 2020 and a few weeks before that, I was trying my hardest to get myself and my wife to get an all-expenses-paid trip up to Charlotte, NC, so we can tour the area on the company’s dime. If booking flights was easier (there was a third party service choosing which flights and hotels the company can accommodate), it would have been a nice trip. Since there was a little of difficulty trying to arrange for me and my wife, that was enough time for COVID to have cases start popping up in Orlando which made me wary.

I brought that up to the company, and they understood immediately and switched my on-site interview into a remote interview. I had mixed feelings about this. On one hand, I do not have to endure an early morning/late night flight into unfamiliar territory. On the other, I lose a personal edge by establishing a rapport with the interviewers in person as opposed to through a screen or a phone. So remote interview it is then.

Aside: Not sure if I told many people but I had an onsite interview in Austin in Winter 2019. Lets just say that I did not have the most favorable experience and that has led me to believe that out-of-state onsite interviews are basically my ‘Away’ game with a division rival. The unfamiliar-ness plus the flying-to day of really puts me off my game. Just showing the one side of my uneasiness with onsites. I have also had unfavorable experiences with remote interviews through Zoom/other streaming apps. Especially the portion where you have to code in front of them. I feel like I am talking to a wall and I actually don’t usually verbalize my thoughts while coding so it feels like am streaming to one viewer and that viewer has the power to yes/no my interview. It is mucho nerve-wracking.

Come the day of the remote interview, I put on my best button-up and just wear shorts because they are not going to see the other half of me (hopefully). Get ready and jump onto the Zoom call. After 4 grueling hours with seven different engineers and product managers, my interview is done and honestly I recall that it did not suck. I had a good time asking and answering questions and there was no coding portion which was great.

Feeling good about my interview, I went about my day. A few weeks later, I received an offer. This part terrified me.

Big time change is hard to undergo willingly. They gave me a week to think about the offer. At the end of that week, I still did not know whether to take it or not. I asked for and receieved an extension of a week. Another agonizing week went by. What ifs and unknowns circled around my thoughts. It was a great opportunity but to leave comfort and support was scary. I talked it over with my wife. I paced around a lot and sighed a lot. I thought of people who have done a move of this magnitude and pondered whether to reach out and ask ‘hey, why did you do it?’

Ultimately, I think I just crave new experiences and I talked it over and over with my wife and over and over in my head. So I was like ‘What the hell, lets do it!’ And now, after countless hours of packing, lots of stress with the storage pods (another story for another time) and a stressful eight-hour car ride with a stressed out cat, I am finally in my new place in Charlotte, North Carolina.

It has been quite the journey from acceptance of the offer, to telling all the friends and family of the news, to packing and getting rid of belongings, to saying goodbyes and see-you-laters to our loved ones but I believe this choice and this move will be new life experience to look back and smile.

Getting Started with XState

Wed, 09 Oct 2019 00:00:00 GMT

TL;DR State machines are an interesting topic that I have not been properly introduced to even though I probably, unintentionally, use it in alot of my programming tasks/projects. I am still a bit inexperienced with modeling my UI to a state machine but I hope these links that I used will help you in using state machines in JS, particularly with the xstate library and react.

So State Machines…

I am not so sure how to start to explain it but I do know it can help organize what your UI elements will do in certain states. The best way to show this is just give you the code but it gets more complex as more states are added so I will try to go step by step.

I used my NextJs boilerplate and added xstate with a few other libraries.

npm i -s xstate @xstate/react @rebass/forms

I went through the tutorial on how to make a login form using react and xstate but I found myself doing more copying and pasting than actually understanding how xstate works.

So I decided to just make a simple search input and with a submit button and I will use the Rick and Morty API to just search for a name and bring back a character from the popular Adult Swim TV show, Rick and Morty.

So XState is a configuration based library in that you will pass a configuration object into your ‘machine’ and it will monitor your state based on transistion actions that you pass into.

Starting with your config object:

const config = {
  id: 'charSearch',
  context: {
    name: '',
    results: []
  },
  initial: 'ready',
  states: {}
}

id denotes the id of the state machine because you might use multiple state machines. context is basically a React State object where you can store data. initial denotes what the first state the machine is in and state is where all your states that you declare are going to be.

So let us add some states:

const config = {
  ...
  states: {
    ready: {},
    error: {},
    searching: {},
    success: {}
  }
}

ready is the first state, error will be when something breaks or does not go as planned, searching will be when fire up an API request and are waiting for a response and success denotes that API request returned with something. I am sure I am missing a few states or can break them down further but for simpilicity (and laziness), we will use these four for now.

Next we will add transistions. These will be in CAPS and it is what we will be using to send to the machine in order to do things.

import { assign } from 'xstate'
const config = {
  ...
  states: {
    ready: {
      on: {
        INPUT_NAME: {
          actions: assign((ctx, evt) => ({
            name: evt.name
          }))
        },
        SUBMIT: {
          target: 'searching'
        }
      }
    },
    ...
  }
}

Using the on property name, we can define our transistions within the ready state. INPUT_NAME and SUBMIT will be the name sent from the UI to make a transistion to another state or to do something. target denotes what the next state to go to is. So for example, if you send the SUBMIT event, the state machine will transistion from ready -> searching. Now if we want to do something when a particular transistion is sent in, we can use the actions property.

In order to set things in your context, you will need to use the assign function provided to you by xstate. It works the same as setState in React except if given a function for a property, the function takes two arguments, the ctx (context) and evt (event). Context is your context that was declared in the config and the event is whatever you passed in with your transistion.

Forgot to touch on one other thing, these transistions that you are declaring in the ready state will only work in the ready state. If a transistion is passed in and the state is different, nothing will happen and you will get a warning in your console. The inverse is also true, if a different transistion is sent in on ready state, warning in the console and nothing will happen.

Here is some UI code to see what sending a transistion looks like:

import { useMachine } from '@xstate/react'
import { Machine } from 'xstate'
...
const rickAndMortyMachine = Machine(config)
const [ current, send ] = useMachine(ramMachine)
...
<Input
  id='email'
  name='email'
  defaultValue=''
  onChange={(e) => send({ type:'INPUT_NAME', name: e.target.value })}
/>
...
<Button
  variant="grey"
  onClick={() => send({ type: 'SUBMIT' })}
>
  Search
</Button>

I am using a custom React Hook useMachine for the XState machine and send is the function we will use to send transistions to our machine.

Now lets add our searching state information for when we send an API request to the Rick and Morty API. We are going to invoke a service to do API calls.

const config = {
  ...
  states: {
    ...
    searching: {
      invoke: {
        id: 'getChar',
        src: (ctx, evt) => {
          const url = `https://rickandmortyapi.com/api/character/?name=${ctx.name}`
          return fetch(url).then(res => res.json())
        },
        onDone: {
          target: 'success',
          actions:  assign({
            results: (ctx, evt) => evt.data.results
          })
        },
        onError: {
          target: 'error',
          actions: assign({ msg: 'error' })
        },
      }
    },
    ...
  }
}

You can invoke Promises, Callbacks, Observables or even other Machines. Here we are just using a Promise using the Fetch Web API. So once we get into the searching state, it immediately invokes our getChar service. Once the Promise resolves it goes to the onDone transistion and there you can assign it to your context and then pick a target state to go to. If the Promise rejects, you go to the onError transisition and ther you can also assign and pick another target state.

And from there you go and display your results in the success state. Thats the very gist of it. I passed over guards (transistion will only go thru if certain conditions are met) and probably other important things but this is a small introduction into state machines using XState.

The code used in this post is here. I am hoping to get more use out of state machines moving forward as I can see the benefit of mapping out state before you moving to building your UI. Hope this helps you out.

Getting Started With GraphQL

Tue, 30 Jul 2019 00:00:00 GMT

So if you haven’t heard, GraphQL is the newest kid on the block (I might just be late, it’s the newest kid on MY block anyway).

So for those who do not know, GraphQL is a specification for building APIs just like REST (more familiar with this) and SOAP (no idea what this is). Whereas in REST you are using CRUD methods (HTTP GET, POST, PUT, DELETE), for GraphQL, you are using a query language to do your CRUD methods.

The reason I wanted to try GraphQL was because this very blog that you are looking at is running using GraphQL queries to serve this content. I wanted to understand the underlying parts.

I really just dove in and grabbed a tutorial (pretty good tutorial as there are videos and github code examples) and just started seeing what the code looked like and how it all works. It is a fairly different experience and paradigm to get used to.

I wrote some code in JS to mess around with GraphQL so lets break it down a little.

We will be using ApolloServer because it includes the Apollo Playground (where you can enter queries) which is pretty awesome to test your API and it is well documented.

To create a server in Apollo Server is super simple:

const { ApolloServer } = require('apollo-server')
const server = new ApolloServer({
    typeDefs, // will get to these in a second
    resolvers
})
server.listen().then(data => console.log(`server started at port ${data.port}`))

So first off, you have to type everything in GraphQL. The API will probably break if this is not done and not done properly. So setting up and understanding your schemas is pretty key. The typeDefs and resolvers will define a schema and methods to query your data.

To define your types, you will have to write in gql (graph query language) and luckily it’s bundled with ApolloServer.

const { ApolloServer, gql } = require('apollo-server')

const typeDefs = gql`
    type House {
        houseName: String!,
        members: [Member!]!
    }
    type Member {
        # member name
        name: String!,
        # whether they are the leader or not
        leader: Boolean,
        # to show how to add properties that are not in the info
        favorite: Boolean,
    }
    type Query {
        allHousesInfo: [House],
        member(name: String!): Member,
        getLeaders: [Member]
    }
`

It is seemingly like object notation in JS but you need to use the word type before each definition. The default scalar types you can use in GraphQL is String, Int, Float, Boolean, and ID.

To define an array, you can just wrap a scalar or a type in a [] (i.e. [String]).

The ! you see defines that the property is non-nullable which means that a value will return that is not null and it is required in the schema.

So that is a little primer into the very basics of type definitions but looking through the docs, I haven’t even touched the surface (interfaces, enums, inputs!?!?!).

After setting the type definitions, we will move onto the resolvers which are basically our methods to grab our data.

const resolvers = {
    Query: {
        allHousesInfo: () => threeHouses,
        member: (parent, params, ctx) => {
            if (params.name) {
                const member = threeHouses.map(house => {
                    return house.members.filter(member => {
                        return member.name.includes(params.name)
                    })
                }).flat()[0]
                if (!member) return 'member'
                if (member) return member
            }
        },
        getLeaders: () => {
            return threeHouses.map(house => {
                return house.members.filter(member => {
                    return member.leader
                })
            }).flat()
        },
    },
}

So the threeHouses data is imported from another source but its an array of objects that contain an array of objects.

So the resolvers is just an object of functions that return the data that you want. The cool thing about Apollo Server or maybe other tooling around GraphQL does this as well, but you never call these functions. What you do instead is you pass a query object to specify which function you are going to use and then you further have to specify what fields of the schema that you want from the data that you want.

Here is an example query:

query {
    allHousesInfo {
        houseName,
        members {
            name,
            leader
        }
    }
}

So you choose the function and then you specify the fields you want. So houseName is not necessary in this query but if you want it, you can have it. The query above is probably synonymous to sending a GET request to /api/allHousesInfo and returning a json of all the houses. What GraphQL can do is return only the data you are requesting. For example, if you only wanted the member’s names of each house, the query object you would send is:

query {
    allHousesInfo {
        members {
            name,
        }
    }
}

In REST, you would have to write some another route and another function to achieve this so therein lies the power of GraphQL.

The second function member returns a member by name and the query you would send is this:

query {
    member(name: "Claude von Riegan") {
        name,
        leader
    }
}

Again, you can specify the fields you want to see.

So those are the very basics of getting a GraphQL server up and running and how to write the queries to get your data. It is a very interesting way to build APIs in my opinion as I have only had experience build REST APIs.

I did not get too far in yet as I have not touched on how to connect to databases or other APIs, how to POST or PUT data or even how to consume the API in the frontend space. Probably articles for another time as I build out this test API further to include those.

So for this particular mess-around of code, I wanted to use the newest Fire Emblem game as data because I have been playing it nonstop and it is the only thing on my mind as of right now. For those who do not know, Fire Emblem is a Nintendo strategy role-playing video game series with an emphasis on medieval fantasy with themes of war. I will playing around and updating this repo as time goes along with more data and more functions.

Failing Fast

Mon, 10 Jun 2019 00:00:00 GMT

So in programming, there is a concept called failing fast. It usually deals with testing the code and figuring out what doesn’t work first until you get to your desired result. For instance, a login form. In order to check if your password has the proper protections on it (special chars, uppercase/lowercase chars, numbers, etc.), you would try all the sequences of password without those protections first and then keep inputting it with more and more protections until the password finally passes through and you have logged in.

You essentially found out all the failures first and you were able to achieve your desired result after finding out what was wrong. This concept of failing fast is a pretty essential tool in programming in that it makes your code more secure and easily testable. You have navigated all routes and all possibilities (hopefully) and your users are better for it.

So I have gotten the concept of failing fast down pat in the programming sense, but I wish I also had a way to use the same concept in life. This is probably going to turn into my own rambling or a rant of sorts, so bear with me.

So failing fast in life doesn’t make sense in the slightest but if there were a way to CTRL+Z a situation and redo it with a better result, I would probably want that to be my super power if I ever was granted one.

Better result is a little subjective though. I do know that time is linear and you only get one choice at one point in time at any time and place so who knows if the result is actually better if done a different way.

Last sentence was a bit confusing so I’ll help with a little example (might not be a good example). Say, you have a choice of picking what route you want to take to work. There are three routes with small changes between each of them. You consult Google Maps to tell you how long each route will take and it tells you that all three are about the same considering traffic and such.

So you pick route A today because its the first one and you don’t particularly care which one you take. Well, you take route A and you hit all the red lights and almost get into an accident. On that day, at that particular moment, perhaps route B or C would be better but how could you have known that?

In life, there is no way to “fail fast” and reset and pick the right choice.

And that sucks.

But I think I finally have come around to not being able to “fail fast” in life. I have learned to accept the choices I make in life. If it ends in failure, it becomes a lesson, however hard and hurtful it was to face it.

So I’ll leave the “failing fast” to my day job and let life take its course.

Integrating Another Cat into the Family

Wed, 29 May 2019 00:00:00 GMT

So my wife and I recieved Loki from the breeder and made the long trek back home to start the integration into our house, our family, our lives. You see, as we have read online and heard from friends, it’s a process to introduce a new cat to an already existing cat. Our mainstay and docile of a black cat had unchallenged rule in our household for the last (at the time of this writing) 5 years.

She (Hades, the black fury; nightfury if you like How to train your dragon) has not taken a liking to any other animals in or around her vicinity at all. Dogs or cats, even humans. A hard to please, must-earn-her-affection kind of breed. Must be the upbringing of the streets and the hard knock childhood that did this to her.

So we finally arrived home and unleashed the playful cat that we have got. Instant regret as Hades started hissing and unleashing fury swipes at the small white kitten that was invading her space. We had bought a playpen tent in order to keep Loki in and tried that immediately. It was a bit small but would have to do while we gameplanned on how to handle this situation. All while Hades was circling the playpen menacingly like a shark and going in for quick jabs like a nimble boxer when me or my wife would take our eyes off of them.

We finally came to the idea of walling off the kitchen and keeping Loki there in order to give me a little more space. To give you an idea of what the kitchen is like, its like an L shape and the entrance and exit are the same with no door. We have cabinets that face each other and the fridge sits at the right angle of the L.

Since there is no door to deter Loki from leaving the kitchen, we had the bright idea of walling the kitchen off with our dining table. Essentially we laid the table down on its side, object-that-acts-as-cover-in-action-movies style. Set up a temporary litter box and had two bowls for food and water. It was a good plan for a few hours.

And then it wasn’t a good plan anymore. Loki found out he can jump over the table that was walling off the kitchen. This cat has got some hoppers on him. When he found out he could, he did with consitency and conviction. He wanted to explore the outside-of-the-kitchen world, other-cat-lying-in-wait-to-kill-him be damned.

So back to the playpen tent he goes so we can figure out what’s the next plan to keep this little hyper cat safe from harm.

Our next plan was to use our guest bathroom as his spot until Hades is familiar enough (we hoped it would take a month) with his smell to just tolerate him. There was no way she was okay with this and we can only hope for a co-existence between one another. Originally, we thought Hades needed a companion to soften her cold exterior. We were so wrong and so naive.

Anyway, the guest bathroom was now Loki’s home base and protection from Hades. It was decided. Except my wife wanted to try and have Loki sleep with us in our room for the first night. For that first night, he would not stay still and still wanted to explore his surroundings. For him to be the exploring cat that he is, he would need a closed door away from Hades so he could have free reign in our room. And unbeknownst to his child-like mind (he still has this), Hades has a no-closed-door policy.

So began the first battle of Hades vs. Loki to assert their dominance of us, their owners. The setting: our bedroom, closed door with Loki and us sleeping and Hades on their other side of the door, free range of the house. The time: way too early for this (5 or 6 am). Hades launches the first strike by clawing at the door and crying just right outside.

Loki counters by running up to the door, curiously trying to figure out why his new roommate is crying. He foolishly tries to stick his paws under the door to offer assistance to his new roommate (bless his heart). I stare in horror and try to react to his friendly but foolish behavior but I know in my hearts of hearts that Hades is the type to fight in a flight-or-fight situation. His small, little chicken tender-like paws would not stand a chance against Hades.

No one is going to win this standoff (in actuality, Hades always wins), so I decide to sacrifice myself. I pull Loki off the door and open the door. Loki is going to stay in the room while I fend Hades off the closed door any way I can. I put the playpen tent in the way of the door to cover the area where Loki can put his paws through. It doesn’t work and Hades just uses her head to force her way past the tent and to the door. I needed to add weight to the tent to keep it’s place in front of the door.

So next are pillows and other objects I find around the house. I’m tired and desparate. Hades is persistent and knows she will get her way eventually. It was basically an infinite loop of me placing another object in her way, she finds a way through or cries loudly enough that it did not make a difference, I scold her and go back to the couch to try to sleep and repeat. Eventually daylight breaks and the battle is won in favor of Hades.

Loki goes back to his bathroom sanctuary and does not sleep with us in the room for another 2 months.

So basically, those type of things happened in the house for Loki’s first few months. And those were just the troubles with just having to introduce Loki to Hades.

In his first week with us, we actually had to bring the little guy to the pet ER. At the time, I was working from home so I could watch over him. It was just any other day to me and I had noticed that he was not his playful self when I went in to his safe haven in the bathroom. No running around, he did not want to eat or drink anything. He was just huddled in a corner and just looked relatively faint.

I was quite fearful that the new changes in his environment (new home) caused this reaction and was super grateful that on that day, I already set up an appointment with a vet to just check him out.

I took Loki in and they discovered he had a fever and told me that fevers in kittens and young cats can turn dangerous if left unnoticed and untreated. He had to be admitted to the pet hospital for IV fluid to keep him hydrated and to monitor him. This particular hospital did not have an overnight staff so we had to pick him up and bring him to an overnight pet hospital for extra IV fluids and monitoring because he was still not stable when we picked him up at the end of the day.

That sleep the night Loki stayed overnight at the pet hospital was not a pleasant one. I readied himself for bad news but I was hopeful because as I can tell from the past few days with Loki, he was a fighter. We got the good news at like 7am the next day that we was stable and ready for pick up. They still told us to go back to his regular care provider for a quick check up and when we got there, they told us he should still be held for a bit longer and more IVs just in case.

In the end, he was discharged with a clean bill of health but the whole episode was soooo stressful and also soooo expensive. I am just very glad and grateful that I was working from home at that time and had that appointment on the day he fell sick. Not sure how it would have turned out otherwise.

That really does not tell the whole troublesome story of Loki though. I will end with this last story that can sum up how much of a troublemaker we have on our hands.

It was in the dead of night, probably around midnight or 1 am. All the lights were off and I was just surfing the web on the couch in the darkness. Behind our couch, was a huge mirror. About 8 ft tall and 3 ft wide with about a 3 inch thickness for a base and it was a heavy mirror. To hold up such a mirror, we just leaned it against the wall and used a 35 lb dumbbell to keep it from moving.

We also saw Loki running behind the mirror from time to time to hide or just because cats like small enclosed spaces but we never thought nothing of it because he was small.

And that’s when we were wrong.

I am not sure how but in the dead of night with the lights off and me just minding my own business, I hear the mirror slowly tip over the dumbbell and then and super loud bang and smash on the floor. Glass flung everywhere. I jump out of my seat and fumble around for my flashlight on my cell phone. I at once have to confirm that Loki is not under the glass. I go and fetch some towels to lift the glass up at once while yelling for my wife to get up and help.

The whole time I was dumbfounded. My mind was racing thinking about Loki’s shortlived life with us.

Fortunately, he was not under the mirror but my next thought was how. Just how did a 5 lb kitty cat push over a giant mirror like that?

He’s trouble for sure but we are glad to have him.

Music I'm Listening To (April 2019)

Mon, 29 Apr 2019 00:00:00 GMT

I will list the albums I am listening to and then dive into which songs stand out to me.

Anderson .Paak - Ventura

Listen

Standout Tracks - Come Home, Winner's Circle, Jet Black, Twilight

If you want an easy listening album filled with soul, funk, jazz and R n B, Anderson .Paak got you. Some tracks will even make you sing along or get up out your to groove to.

Come Home is the first track of the album and definitely sets the whole album up with a lush opening filled with a harmony of piano and background vocals and then when Anderson finally comes in, his crooning is offset with some light guitar and bass (my music terminology sucks lol). The opening song also comes with a feature from the great feature-killer Andre 3000. It warrants a listen just from his presence alone.

My other favorite track is Winner's Circle. It starts with a great quote (not sure where it comes from) and I usually don’t like these type of interjections in music but it works. I really like the production on this track and super love the scat-scat (right term, I hope) in the chorus. Since this album dropped, I been trying to get the scatting to mimic but always fail when I get back to listening to this track.

As I was looking through the producing credits, I saw that Winner's Circle was co-produced by Vicky Farewell Nguyen. Though I do not know her, I think it is super awesome that there is a Vietnamese producer out there and I will now start following her work closely.

Little Simz - GREY Area

Listen

Standout Tracks - Selfish, Venom, Pressure

First time listening to a female MC from UK but she blew me away with this album.

Selfish was my first introduction and it hooked me. The simple drum and bass beat layered with soft piano and the chorus really drew me in.

I think Venom is a clearer introduction to who Little Simz is as an artist. She has bars and a nasty flow on this track. A menacing violin starts the track off while Little Simz just launches into a tirade against her non-believers. When the drums finally drop, it sounds like this song could fit right into the semi-recent Marvel movie of the same name as this track.

PNTHN - Potluck

Listen

Standout Tracks - CHUMBUCKET, CHROME

Pronounced ‘pantheon’, I stumbled upon this 8 man group and immediately took to their sound. Imagine Bun B’s, Chamillionaire’s, or Paul Wall’s sound brought to this era of innovation. The Potluck EP actually sounds like they took Rich Boy’s “Throw Some D’s” and extended its infectious sound into six songs.

CHUMBUCKET is a great introduction to this group and even samples Bun B in the beginning and the beat is so smooth. The members take turns flowing and really bringing back old 2008 vibes with each bar. I am looking forward to what PNTHN has in store for the future.

Anonymuz - There is No Threat

Listen

Standout Tracks - Sun Down, Feel So Good Pt2, Smoke, Rxdical Forever, No Threat

I first found out about Anonymuz when he released an EP and it was called Urameshi and had Yusuke on the cover (from the anime, Yu Yu Hakusho). Instantly intrigued. To my surprise, the music was just as good as the anime that it was using, really good.

This latest EP features excellent production and a lyrical prowess that I really enjoy. Feel So Good Pt2 actually has Anonymuz trying his hand at some crooning.

This EP is one where you can listen from front to back and will not find a bad song and I encourage everyone to give Anonymuz a listen.

Ta-ku - 25 Nights for Nujabes

Listen

Producer Ta-ku does some good work and is a master of atmospheric and moody backdrops for artist to sing/rap to. This compilation/tribute to Nujabes has got me through many a day at work or late at night when I am doing some writing or coding.

Alina Baraz - Urban Flora

Listen

Standout Tracks - Show Me, Pretty Thoughts

Before Alina was on her breakout hit Electric with Khalid, I found her with this EP and was mesmerized by the spacey production and her excellent vocals that accompany. Each song feels like you are just floating through.

Loosies

Single songs that I just happened upon, no album or EP accompanied.

Billie Eilish - bad guy

Listen

I like this song. Beat makes me move. Singing is not bad (can it be called singing on this one?). Song was stuck in my head for a little while so I keep on coming back.

Joey Bada$$ - TEMPTATION

Listen

Joey really surprised me with this one as most of his previous offerings was 90s boom-bap NY hip-hop. This one is more soulful and feels impactful. Also very catchy guitar riffs and hook.

Masayuki Suzuki - Love Dramatic ft. Rikka Ihara

Listen

Way out of left field, I know. This J-pop (not even sure if this categorizes as such) song is so catchy that I just randomly start blurting out ‘Love is War, love is war, love is war’ at odd times when I am alone. It feels so oldies but it really works for me.

Vince Staples - Big Fish

Listen

Back to your regular scheduled music, you really feel the west coast on this song. A hook that you can just scream to your boss when you are feeling it. A bass line that can rattle a few trunks. It’s perfect.

Jaden Smith - B , L , U , E

Listen

This is probably going to be the only time I recommend a Jaden Smith listen because he really blew me away with this one.

It’s actually four tracks but I am going to treat them as one because the tracks have continuity. The lyrics are very subpar (almost kills the vibe) but the musicality, melody, harmony and production value just outclasses any thing he does.

Getting Started with TypeScript and NextJs

Tue, 23 Apr 2019 00:00:00 GMT

TL;DR I am an amateur when it comes to type systems as I came from a JavaScript and PHP background, so this new must-type-everything-before-running is tedious and new to me. Learned a few things and made a small guide to Typescript as it pertains to writing React code.

So I was always curious about TypeScript and I wanted to make something with it to see all the gains I can make to my coding if I were to add it in to a project. Typescript is a typed superset of Javascript and it compiles to plain Javascript. So prior knowledge of Javascript is required, first and foremost.

On top of the javascript that you are coding, you have to declare a type for everything. At first, this was super tedious to me. Things like:

const str = 'hello world'
let num = 8
let isClicked = true
let dontWantToType = 'whatever'
let things = [ 'ball', 'string', 'wool' ]
let numList = [ 1, 2, 3, 4 ]
let notSameThings = [ 'ball', 5, true ]
let obj = { stuff: 'stuff' }
const doThis = (things) => calculateStuff() + things

turn into

const str:string = 'hello world'
let num:number = 8
let isClicked:boolean = true
let dontWantToType:any = 'whatever'
let things:string[] = [ 'ball', 'string', 'wool' ]
let numList:number[] = [ 1, 2, 3, 4 ]
let notSameThings:[string, number, boolean] = [ 'ball', 5, true ]
let obj:object = { stuff: 'stuff' }
const doThis = (things:string):string => calculateStuff() + things

TypeScript won’t yell at you for missing a type declaration though (unless you made your IDE yell at you). No type declaration means no type checking and all the good stuff Typescript comes with so it would benefit you to type everything.

Some of the type declarations are pretty straightforward for your variable declarations. Basically, after declaring the variable you just follow the variable name with a colon and the type that the variable is going to be.

The any type is your get-out-of-jail-free card but you should only use it if you have no idea what the type is going to be. This is probably the type you will be using the most if adding TypeScript to an existing project (for API requests and the like).

The notSameThings variable is typed as a Tuple. A tuple type is a way to type an array that has a fixed number of elements that are all not the same type.

For functions, if there are arguments, you have to declare a type for each argument. If the argument returns a value, you also have to declare a type for the return value.

If you have a long list of arguments, it can become too cumbersome to declare types. You can use interfaces for that. Interfaces are like objects that declare types for multiple things. For instance:

interface Things {
    ball: string
    wool: string
    id: string
}

and then you can use it as so:

const doThis = (things:Things):string => calculateStuff() + things.ball

You can also denote if a property in an interface is optional by adding a ? to the property name right before the colon. Like so:

interface Things {
    ball: string
    wool?: string
    id?: string
}

This is as deep as I got into TypeScript in order to start integrating or building stuff. You can look at the official docs here.

Let’s jump into seeing if our new-found prowess in typing can help us with React.

I started with the boilerplate I made. Next, you should install TypeScript and the types that the other libraries would require. Luckily, since we are arriving to the TypeScript movement late, there have been type libraries already written for each library we are using. If you are using the boilerplate, you need to do this:

npm install --save @types/next @types/react @types/rebass @types/styled-components @zeit/next-typescript typescript

Make a new file at the root of the project and call it next.config.js

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

Make another new file at the root of the project and call it tsconfig.json

{
    "compilerOptions": {
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "preserve",
        "lib": ["dom", "es2017"],
        "module": "esnext",
        "moduleResolution": "node",
        "noEmit": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "preserveConstEnums": true,
        "removeComments": false,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "target": "esnext"
    },
    "include": [
        "components",
        "pages"
    ],
    "exclude": [
        "node_modules"
    ]
}

The include section is for folders that will have TypeScript that you wanna compile down to javascript. The exclude is for what you want to exclude for compilation.

Last new file at the root of the project and call it .babelrc

{
    "presets": [
        "next/babel",
        "@zeit/next-typescript/babel"
    ]
}

and now you are ready to integrate TypeScript into your react code.

Here is an example of what a component that’s using styled components could look like.

import { Flex as Base } from 'rebass'
import styled from 'styled-components'

interface FlexProps {
    boxShadow?: string
    height?: string
    center?: boolean
    border?: string
}

const Flex = styled(Base)<FlexProps>`
    ${props => (props.boxShadow ? `box-shadow: ${props.boxShadow};` : null)}
    ${props => (props.height ? `height: ${props.height};` : null)}
    ${props => (props.center ? `justify-content: center; align-items: center;` : null)}
    ${props => (props.border ? `border: ${props.border};` : null)}
`

export default (props:any) => (
    <Flex {...props}>
        {props.children}
    </Flex>
)

Pretty simple. Adding an interface will make sure that the props coming in will only be those props. As for why I added the any type to the props on the export function, Rebass has more props that can be added to the Flex component that will allow it to be do more (i.e. m for margin, p for padding) and I have yet to account for that, so get-out-of-jail-free AKA the any type.

Here is an example of using async/await with TypeScript:

const fetchStuff = async (url:string):Promise<object> => {
    const res:any = await fetch(url)
    const data:object = await res.json()
    return data
}

Declaring a function to be an async function will in turn make the function into a Promise so we can declare that a promise will be returned and since we are returning a value back we can type the returned promise as an object when it resolves.

I am sure I am just scratching the surface of TypeScript but I am enjoying the process and learning as I go. You can look at a recent (at the time of this writing) project that I was able to incorporate Typescript into.

Japan Preparation and Other Information

Sun, 14 Apr 2019 00:00:00 GMT

First Things to Do After Landing in Japan

Congratulations, you have just landed in the fine country of Japan! First things first, definitely stretch your legs and whole body. No matter where you came from, sitting for that period of time is really bad for your body.

Depending on what airport you landed in, you could be heading to the luggage pick up or perhaps you could find yourself heading to a customs checkpoint. After that, you will find yourself in an area where you can purchase transit stuff and there are information booths that cater to english speakers. You can even exchange your money here.

I highly recommend purchasing a portable WIFI hotspot or maybe even exploring the option of getting an international SIM card. Traveling around without the use of Google Maps on your phone will be a nightmare. There should be a place in the area that you can rent out the hotspots or SIM cards.

Lodging

I have had no problems using Airbnb for lodging in Japan and all the places that I have used have been great. Most of the listings in Airbnb in Japan have hosts that generally have english descriptions. Also, you can chat with them in english as well which is a super plus.

In the past, I have used Airbnb to ask our hosts about recommendations around the area we are staying as well as directions from the airport. Generally, they have been super polite (as are most if not all of the Japanese people you come across) and super helpful.

Airbnb is good for booking with large groups (small groups too, I guess, basically all groups all sizes) but you can also try out the capsule hotels (or regular hotels for that matter).

Capsule hotels are hotels that give you a smaller space instead of entire room for your group. It is relatively cheaper than hotels and maybe even some Airbnb places but you are sacrificing some comfort for it. They basically give you a space (think a little smaller than a twin size bed and sometimes you have to climb into it with a ladder) to sleep and the bathroom/showers are public and communal but separate (one separate bathroom/shower area for males and one for females).

It is a very interesting experience and it works if you are doing a day trip to a city and need a quick place to book and stay.

Transit

The Japan subway is the best! Clean, on time, signs are informative, and easy to use (once you know what’s going on at least). First things first is you will need to purchase a Pasmo or Suica card. These are smart train cards that will allow you to use the subway system (you can also buy individual paper tickets but the convenience of these cards just beats paper tickets by a lot).

The card itself works like a debit card and by tapping certain spots that are marked with a symbol that looks like a IC, the system automatically deducts money from your account and you are on your way to the platform to board your train. More info on how to use the pasmo here.

Most train stations have overhead signs that show you where to go and they are written in english and also denoted by a color as well. Something like this:

Above is a google maps search (super MUST-HAVE app for traveling in Japan) between two places you will probably visit in Tokyo. Lots of helpful information here like price and which lines to take, even how many minutes of walking you have to do between transfers.

Those colors will also show up in the station when you are busy trying to get on the train. Since the trains all run on a schedule, missing one means you probably have to re-do your google maps search.

I know the Pasmo and Suica cards also allow you to take the buses but I have not tried to use those. I have heard that they are also an inexpensive way to get around as well and using them is easy as just tapping your card and away you go.

Another thing you should look into if you plan on traveling between cities across large distances is the JR Rail Pass. The JR Rail Pass can be used with the JR line of trains for free within a certain time period. It even lets you get shinkansen (bullet train) tickets within that certain time period as well.

It is pretty pricey (around 250USD at the time of this writing for the 7 day pass), but it will pay for itself if you take a few bullet trains (one way bullet train tickets go for around 120USD if I remember correctly).

Money

Japan is a country where cash is king.

There are a few places that will take card but make sure you have a card that does not charge an international fee. With cash being used almost everywhere, it is a good idea to either exchange at the airport or just bring your debit card to one of the 7/11 convenience stores where they have international ATMs and do exchanges there.

Make sure you have placed a travel notice on your credit/debit cards so you are not stranded in another country with no way to pay for anything.

Paper bills start at 1000 yen so anything under is coins (the denomination of coins is 500, 100, 50, 10, 5, 1 yen). You will be racking up a lot of the 1 yen coins. They feel like board game money and accumulate so fast.

I would highly recommend a coin purse (weird thing to recommend but do you really want to walk around with that much change in your pockets?).

In shops and restaurants, they do not give you the check at your seat like in the US. You will have to approach the counter/register to pay. There will usually be a small tray that you place your bills and coins in. This is customarily the way money is handled especially in smaller shops/restaurants. Also, Japan is a country where tipping for service is not necessary.

Useful Apps

Google Maps and Google Translate are going to be your most used apps. Google Maps will load up bus and train schedules and estimate how much and all your transfers for you all while directing you. Google Translate is a no-brainer and try to have it activated on your camera for the real-time translations.

You may want to look into messaging apps that can use WIFI to message if you do not have an international SIM card installed into your phone. A few that I have used are WhatsApp, GroupMe, Facebook Messenger and LINE.

Useful Phrases

konnichiwa こんにちわ

hello

sumimasen すみません

excuse me

onegai shimas[u] おねがいします

please

hai はい

yes

arigatou gozaimas[u] ありがとうございます

thank you

gomen nasai ごめんなさい

I’m sorry

wakari-mas[u] わかります

I understand

wakari-masen わかりません

I don’t understand

Food

My favorite topic!

If you did not come to Japan to eat, you are totally missing out. There is a large variety of food with a large range of prices. It is very possible to go the cheap route and still enjoy many of the cultural dishes in Japan.

Japan has many konbini (convenience stores) that offer super cheap snacks and actual food. I really enjoy the packaged onigiri (rice balls, around 2USD) and they even have lunch sets that range anywhere from 4-10 USD.

There are also a lot of ramen shops, gyudon (meat bowl) shops, sushi places, and other places that you can get a meal for under 10 USD. There is no need to break the bank to eat good in Japan.

My favorite ramen spot has to be Ichiran. It is a ramen chain all around Japan and it is the ramen spot that sports the “concentrate on your food” vibe. Well it literally makes you concentrate on your food.

To order, there is a vending machine that you place money into and press what broth and size you want. The vending machine dispenses a ticket and you bring that to the place where you will be eating. So the spot is like a small cubby with an opening for them to serve food to you and you hand the ticket to me and you fill out a form with your ramen specifications (firmness of noodles, saltiness of broth, etc.) and then you wait for you meal.

The ramen is rich and flavorful (depending on what you chose) and since the spot where you are eating is sort of isolated, it makes you focus more on your food. It’s great.

If sushi is more your jam, you are definitely not going to be disappointed. There is the famous Tsukiji Fish Market (which I heard was moved into another area from its previous location), which is a market where most sushi chefs get their ingredients from and there are a bunch of vendors there that do the farm-to-table bit with their stuff you can get some of the freshest sushi right there.

Since its super famous, its probably going to be super crowded, so if you want to avoid the crowds, there are many sushi shops around all over (which, I mean, why wouldn’t there be). I definitely recommend trying the conveyor belt sushi spots, the sushi’s quality does not drop because its on a conveyor.

I have to give a shout out to two items that I went into glutton mode for over in Japan: ice cream and vending machine coffees. The ice cream over there is amazing. Its soft and creamy and not super sweet. Also, its cheap and they are everywhere. I think all those adjectives that describe ice cream in japan, can also apply to vending machine coffee. Its only around 1USD, its not too sweet, and they have heated cans inside the vending machine. Super fast hot coffee on the go that’s cheap. Revolutionary.

All in all, try everything, you won’t regret it.

Shrines

Shrines are plentiful all throughout Japan. They are a big change of pace from the big city skyscrapers and subways and city streets. The shrines are still going to be crowded probably but if you go to the lesser known ones, it is a serene and calming experience.

So at most shrines, you can make a small prayer for good fortune at the temple, or buy good luck charms or talisman at the small shops or just marvel at the japanese traditional architecture.

Japan Quirks

From an American going to Japan.

When riding the escalator, there is a side where people stand and there is a side where people walk.
When entering a department store or maybe a small to medium size restaurant, some of the staff will scream out SUMIMASEN (supposedly means excuse me but I am guessing its a welcoming gesture?) in a long loud tone.
While walking around in the city streets and maybe even in the suburbs walkways, you will encounter close to zero trash cans. Explains the clean streets and sidewalks.
When riding the subway, barely anyone speaks.
When walking in the park, you may encounter a group of old people doing tai chi.
In some restaurants, they encourage and sometimes enforce a no-shoe policy (locker for shoes, and everyone is given slippers).
In some restrooms, they still have the squatty potty installed.
In some restrooms, they have more features than just a toilet (bidet, heated seats, sounds).
Most bathrooms do not carry paper towels.
In some restaurants, they serve DIY green tea instead of water. Also in some restaurants, they do not ask you what you want to drink as the first thing the server asks.
In some stores/shops, after purchasing something, the staff sometimes ties up the purchased item neatly for you. If it is raining outside, they might go the extra mile and try to rainproof the purchased item.
Probably a circumstance of the season that I have been visiting Japan, but I have yet to see sandals or flip-flops in Japan.
It is frowned upon to eat or drink while walking.
Tattoos are frowned upon perhaps because of the Yakuza.
Some cities have you walking on one side of the walkway (Tokyo, you walk on your right hand side) and then in a different city, it’s the inverse.

Getting Started with NextJS, Styled Components and Rebass

Wed, 10 Apr 2019 00:00:00 GMT

TL;DR I made a starter pack for someone who wants to get started with a server rendered React framework with the power of Styled Components and a standard component library in Rebass to work with. You can fork or download this boilerplate here and jump right in and start coding.

This write up is going to be targeted at people who have experience already using React and want to write server-side rendered apps in React while using the styled components system of writing css-in-js and also using a primitive UI component library as a base for all components. I just word-vomited all the buzzwords and trends in the intro alone, so if I have not scared you off already, let’s continue.

Why Server Side Rendering

I learned about server side rendering when I first started learning to use the Express library in NodeJS. So I will try to put in my own words what I think it is from my own experience but everyone is welcome to google it and find out themselves.

Server side rendering is when the server that you are communicating with actually sends you the HTML and its fully rendered already, no need for the browser that you are using to do anything to get what it needs to show you. For example, when you get to your Facebook feed (first page after you login), you get the navigation bar at the top and some other navigation menus on the side before you even see any of your friends’ post or ads that Facebook has targeted you with. The navigation stuff has been rendered on the server and sent to you first and that is why its the first for you to see and then the browser takes care of grabbing your friends’ post for you to see.

So server side rendering helps with speed of delivering the content you want your users to see quickly. Another reason to use server side rendering is search engine optimization. Server side rendered sites are more easily crawlable by search engines like Google so your search rank should be a little higher (although I need to learn more about SEO to confirm this).

Why Styled Components

Before React and the componentization of the web, I was doing CSS the old-fashioned way: writing all my css in one separate file for entire web applications. I did not know how much it sucked until I started implementing SASS in my application. What a game-changer! Separate files can be imported into one file, mixins, nesting, variables. SASS made CSS so much more fun to write and solved the monolith of CSS in monolithic projects. And then came React and ways to write CSS in JS. Sure, there was a whole battle of inline-styles in JS vs. separate file of CSS vs. splitting out the CSS in the same file of the component but I really enjoy that there are all these different ways to style your application. Many more ways than just writing all your css into one file. So now we get to use another nuanced way to write css in your application: Styled Components. I enjoy this way of styling the most right now because you basically build in the styling into the component itself. No .css files needed. Here is an example:

import styled from 'styled-components'

const Flex = styled(div)`
    display: flex;
    ${props => (props.boxShadow ? `box-shadow: ${props.boxShadow};` : null)}
    ${props => (props.height ? `height: ${props.height};` : null)}
    ${props => (props.center ? `justify-content: center; align-items: center;` : null)}
    ${props => (props.border ? `border: ${props.border};` : null)}
`

export default props => (
    <Flex {...props}>
        {props.children}
    </Flex>
)

Above, we have a customized div that can take props of height or box shadow or border and can be reused throughout your entire application if you wanted. You can add more conditionals to add more customizability to your div and basically eliminate writing css and just add the prop that you need. The pitfalls of styled components that I can see (so far in my experience), is with the use of pseudo selectors like :last and :nth. Not sure how to implement those just yet in styled components but by using javascript, that can be mitigated with some creativity. I am sure there are other pitfalls but I really like how styled components fits in with the react ecosystem.

Why Rebass

There are many component libraries that you can go with (i.e Material, Semantic, React Bootstrap to name a few), but I like Rebass because of its small filesize and how well it works with Styled Components in order to extend its foundational components. Here is an example of using a Rebass component and extending it with Styled Components.

import { Card as Base } from 'rebass'
import styled from 'styled-components'

const Card = styled(Base)`
    ${props => (props.border ? `border: ${props.border};` : null)}
    minHeight: 200px
`

export default props => (
    <Card {...props}>
        {props.children}
    </Card>
)

Using the Rebass Card component as a base, we can add more conditionals or css that we want on the Card component and make it our own.

Awesome NextJS features I Like

One of my favorite features of NextJS is the file-system routing. There is a directory in your project called pages and each file in there is a pathname matching the filename (i.e. /pages/blog.js is served as whateveryoursiteiscalled.com/blog). This makes routing so simple and it comes right out of the box. The file-system routing also comes with automatic code splitting for each of your pages in the pages directory. What this means is the page will only come bundled with whatever you imported into your js file. This keeps the bundles that are served up to the browser smaller and other packages that you are not using on that actually file will not be served alongside saving you more space and increasing load speed.

Another feature that I really like in NextJS is the way it handles fetching data for pages from the server. Instead of doing this:

componentDidMount() {
    api.fetch(url).then(res => this.setState({ data: res }))
}

and letting the browser handle the data fetch, NextJS comes with a method that you can use to offload the data fetch onto the server and pass it into your page as props. Here is the code for that:

static async getInitialProps() {
    const res = await api.fetch(url)
    const data = await res.json()

    return { data }
}

constructor(props) {
    super(props)
    this.state = {
        data: props.data
    }
}

Now your page can have server loaded data already before the browser needs to do any data fetching.

Hope you enjoyed this write up and think about exploring all of these technologies whether together (which they all do so really well together) or separately. Again, you can fork or download this boilerplate here and jump right in and start coding.

My Cats and My Start as a Pet Owner

Thu, 04 Apr 2019 00:00:00 GMT

TL;DR Cat pics and the internet have to go together so incoming cat picture post with sappy story: My journey to owning two furry animals was a very rewarding albeit stress-inducing adventure. The decision to even be a pet owner was like a knee-jerk choice but it has really humbled me and furthered my growth as a person. Pets can really enrich your life and I would super recommend one to anyone.

So I own two cats but I really feel like they own me. They sleep all day and play all night. My first cat’s name is Hades (the King of the Underworld in Greek mythology) and she is almost 5 human years old at the time of this writing. She is a black domestic long haired cat. No idea what her breed is but I would say a mix of hellcat and angry fury would best describe her personality. Basically, she’s an ice queen.

My other cat’s name is Loki (Norse God of Mischief, see a running theme here?) and he is a one human year old (at the time of this writing) white long-hair Scottish Fold Chinchilla. He is definitely appropriately named because of all the trouble he has caused on his first successful rotation of the planet Earth around the sun. Whereas Hades is icy and edgy, Loki is a small ball of warm playful energy.

I never would have guess that I would be a cat owner in my younger years. My elementary, middle and high school self did not know the first thing about cats, never have petted one, nor hardly ever came into contact with their kind. Did not have much association with dogs either (my dad was allergic to pet hair and dander, the deadly kind I would guess from his ninja like avoidance of them). My first interaction with our smaller furry friends was when I was in high school and I was tasked with walking my cousin’s dog (I stayed at their place my senior year in high school) at night. His name was Porkchop and he was a small Yorkshire Terrier. He was one of those dogs who would cuddle with anyone that would give him attention and loved pets and rubs. He also loved trying to pick fights with any other dog ever (when I mean any, I mean any thing with four legs and in a 10 feet radius of him).

Porkchop was my first “Hey, maybe I’ll get a dog one day” type of thought way back when. See, no cat thoughts or anything.

Let’s fast forward to the year 2014 when I was well into college and my then-girlfriend (now wife) were sort of living together. My now-brother-in-law was working at a car dealership which had a cat colony situated relatively nearby to him and he would feed the cats of the colony (colony might imply that there was like a Lion King-esque unity between felines, but really it was just a bunch of stray cats). Maybe through sympathy, empathy or pity, he would hit up the family group chat with pics and ask if anyone would want one. He was insistent on an orange one.

I am still not sure or maybe I don’t remember, but we went to his car dealership to see this orange cat. I remember distinctly that it was a dreary, rainy, wet day. In some cover, the cats were fed hard food on the ground. That was the first time I have seen so many cats. We saw the orange cat and thought “How cute”. Out of the corner of both of our eyes, we saw a small black furball in the corner of the building hiding under a picnic table just staring at the pile of hard food that the other cats were eating but never moving towards it. When all the other cats were done eating was when little small black furball would make its move. By then, my wife had her mind made up and chose this little loner of a cat. She was fast, ferocious and very hard to capture but fate had other plans for this loner cat.

On the storming night of the eve of Friday the 13th with a full moon looming, we got a notification that our new addition was on its way over. She was hiding out in the car dealership’s storage unit, trying to get away from the rain. With the small space and the help of coworkers, they were able to secure little loner cat in a a blue bin that they poked a hole into (Thank you Tuan). Right when I opened the box, a little black lightning shot out and went into a frenzy trying to find a safe spot. The cat went into the farthest corner of the laundry room and decided to pee in fear of its new aggressors.

Let me tell you, you never forget the first time you smell cat pee especially the smell of it when it belongs to your first cat. I picked up the cat (first time handling a cat), cleaned up the pee and with the help of my wife and her two youngest siblings (Thank you Emily and Lilian), we all gave the cat a sink bath (first time for everyone, cat included). Dirt, grime, mud and probably a few (disgusting) bugs came off. The cat was clean. We got a cage for her and fresh food and water, and a warm water bottle wrapped in a towel that would act as a mother cat’s warmth. She was not going to be the loner cat at feeding time anymore. That day she became our Hades.

Fast forward a few years and a slow melting of Hades’s first layer of her icy exterior, and we came to the conclusion that maybe another one of her species being around could lead to another layer slowly dissipating. By this time, I learned of other cat breeds, stared intently at all the cat pics the internet had to offer, and ooohhhhh’d and ahhhhhh’d at all the disgustingly cute kitten pictures on IG. We decided we were ready for another cat without Hades’s consent.

We got Loki through a breeder (no dramatic story here, it was a very cut and dry hand off) and we were pleasantly surprised that a cat can be this warm and loving towards humans. Big smiles as we came home with him. Finally, Loki might be the last piece of the puzzle to unlock Hades’s icy heart.

Nope. Big time NOPE.

If anything, Hades became a blizzard, Elsa-from-Frozen levels distant and cold and we had a whole new set of problems to deal with. The adjustment period for the two cats alone is an entire story for another time. After said adjustment period, we come to the present with me, my wife, and our yin and yang cats.

And that is how I came to have two troublesome cats but this is the life I chose and I do not have any regrets about it.

You can find more pictures of Hades and Loki here.

Case Study - Web Scrapers

Mon, 01 Apr 2019 00:00:00 GMT

TL;DR: I made a bunch of web scraper scripts in different languages to see which one I liked and for experimentation purposes. NodeJs was easy to work with since I worked with it in the past, PHP was easy to start up, easy to code, and low barrier for entry and Python was the hardest to get started as well as code but most fun because it was a new experience. Also as a highlight to Dwyane Wade, greatest Heat Player of all Time.

Just an experiment to see if I can do this and also to explore different languages that I have not used before for web scraping and see how fast I can adapt to them.

Web Scraping, for those who don’t know, is going to a web page/site and grabbing some sort of data from the web page/site. Then you can use the data however you want. There are some unethical aspects but for this little project, we are just doing it for experimentation.

So I will be looking at ease of starting up (how much setup before I can do something cool), available libraries or packages to use (installs and such), ease of language tools (Fun Factor) and anything else I can think of in the process.

The webpage we will be scraping is:

We will be grabbing the Summary Stat box. Let’s get started!!!!

NodeJs

We will first start with the language that I am super familiar with: Javascript. Here is the scorecard for my look into web scraping with Javascript:

As Javascript is the first language that I used in my professional career, it has been a constant throughout all my jobs. I have gone through jQuery all the way up to React/NodeJs.

Ease of Starting Up

NodeJs was pretty easy to start up with because I already had all the dependencies installed to use NodeJs. For a beginner, you would have to install NodeJS and NPM and then after that install the individual packages. Even before that you will need a bit of knowledge surrounding the command line/terminal. Not very hard but a few steps before you can get started.

Available Libraries/Packages

Since Javascript is so popular, the number of tools available to get started are numerous and there are also many tutorials out there on web scraping.

Fun Factor

I am glad the Basketball Reference web site we are using is somewhat proper when it comes to HTML as I have seen some crazy websites with auto-generated HTML classes that make it a pain to scrape. I only had some trouble setting up the async operations of requesting the website and then scraping the response coming back. Still a blast to write javascript.

For web scraping, I chose the Cheerio library (server-side jQuery) and Axios (http library) library to grab the HTML to parse through. You can easily go with a lesser known library called X-ray which does both of what axios and cheerio does though. For the API routing, I chose Hapi but you can easily use Express (far more popular but I wanted to try something new) instead.

Here is the scraping code in 4 lines:


const url = 'https://www.basketball-reference.com/players/w/wadedw01.html'
const response = await axios.get(url)
const $ = cheerio.load(response.data)
return $('.stats_pullout').html()

You can take a look at the rest of the code here.

PHP

The second programming language I learned after Javascript is PHP and I almost forgot to try web scraping with it.

Ease of Starting Up

Since I have a MacBook, PHP 7 is already installed which is really nice. I believe on other OS, you would have to download it (probably just Windows). The only thing you need to install afterwards is composer for package management. PHP even has a built in web server on the command line which makes it super easy to get started.

Available Libraries/Packages

I had to do a little research into different web scraping packages and I was surprised that there were a lot of to choose from. I chose Goutte simply because it was the first one that showed up on google search (the power of SEO!). Since there is a built in web server for PHP, we technically do not need a package for that.

Fun Factor

I will probably never get used to using dollar signs to denote variables but PHP is also not a strongly typed language similarly to Javascript so I can go about coding in PHP the same way I go about coding in Javascript (Spaghetti code FTW). As an aside, I have noticed the rise in strongly typed languages and even TypeScript is growing in popularity at the time of this writing. Anyway, PHP is fairly easy to get up and running and I did not have any trouble at all. Probably the fastest from start to finish for me to write.

Here is the scraping code in 4 lines:

$url = "https://www.basketball-reference.com/players/w/wadedw01.html";
$client = new Client();
$crawler = $client->request('GET', $url);
$output = $crawler->filter(".stats_pullout")->extract("_text");

You can take a look at the rest of the code here.

Python

I always had an interest in learning Python due to the supposed ease of making games and also its ties to the Data Science and Big Data movements. Lets see how it fares with a simple webpage scrape.

Ease of Starting Up

Just like PHP, Python is already installed on my MacBook but only Python 2 and not the latest one which is 3. So I had to go through the process of installing Python 3 and dealing with having two versions of Python installed. I also had to install Pip which is the package manager for python I suppose. After that, I was ready to install packages and start writing code.

Available Libraries/Packages

Python also had a bunch of libraries that are useful for web scraping and many useful tutorials around web scraping. I had a hard time choosing which one to use as I wanted to use the one that had the most stars on GitHub and landing on BeautifulSoup. It uses a jQuery-lite look up so that is what sold it for me.

Fun Factor

It was a change of pace to ditch curly brackets (a JS staple) and instead use spaces to denote scope. After the initial startup, writing code was very easy even though I had to look up some JS to python equivalents (console.log equivalent in python was my first search). Since it was my first foray into the language, this took me the longest but since it was the most unknown to me, I had the most fun in using python. Kind of like getting a new car and driving it for the first time. By driving it, you discover some kinks and little flaws but you still know how to drive it since it is a car. I hope to do more little projects in python soon.

Here is the scraping code in 4 lines:

url = 'https://www.basketball-reference.com/players/w/wadedw01.html'
response = get(url)
soup = BeautifulSoup(response.text, 'html.parser')
print(soup.findAll('div', class_='stats_pullout'))

You can take a look at the rest of the code here.

My Career Thus Far

Wed, 20 Mar 2019 00:00:00 GMT

I have often thought about the ‘what if’ about multiple things in my life but my career seems to be one that I think about the most. For those who don’t know, I graduated with a degree in Electrical Engineering (took me about 6 years, I know all about slacking) but I do software for my day job. Before graduating at all and maybe even before entering college, I did not have the faintest idea of what I wanted to do in regards to my career or finding a way to earn money to survive. I was quite stupid back then. ~~I had a ton of interest in making video games but did not do any research into that career field.~~

The greatest driving force that brought me into programming and software development was my Senior Design Course. This class was like the final boss at the end of the tunnel, but you didn’t have to slay the boss, more like present a culmination of all that you have learned into a small tidy project with a group of your peers and hope you smile big enough and have enough pages of big words in your research paper/thesis that you hand over and pray a year plus of work does not get thrown down the dumpster and you can finally graduate. High pressure makes diamonds, they say.

See, that course taught me that working with others is fun, if they are super capable and know their role in the project well. I was put in the programming lead of the project and it basically was the first real world experience of making things and breaking things to see if they worked. And you weren’t penalized for breaking the thing, you learned from it. No failing a whole course because your program did not run on the twentieth try or you fried a capacitor because you ran a crapton of voltage through and did not do the math first. Consequence-free learning was pretty blissful.

So why was I not an electrical engineer right now? Well, programming on my own was fun and also not a danger to my physical being. I finally learned how to learn and also how to Google (writing the perfect search query is a skill). I also found out that websites can be made through programming. I always had an interest in design or artsy stuff but did not have the creative chops to make/draw/design things from pure nothing. So making code into artsy stuff, amazed me quite a bit.

To keep the software movement I had going, I looked around job boards for something, anything that can keep this going. ~~Should have been looking for EE jobs lol~~ I implemented the shotgun-resume method of job application. After a week, I had an interview request, my first as a prospective programmer, for an internship position at Riptide Software. The interview was nerve-wracking. I finally realized what I was experiencing back then was anxiety, my heart was beating so fast that I thought it was going to jump out of my body and run a marathon outside. I remember they asked me questions about what coursework I did, if I knew some of the technologies they were using and some other standard interview stuff I got to hear over the years. I lied my ass off. I said ‘yes’ to everything. I probably heard of some of the technology they used (JavaScript, HTML, databases) but look, I was fresh off graduating from Electrical Engineering courses that taught nothing close to those technologies.

To this day, I am still not sure why I was hired. It could have been my enthusiasm for programming (I was honest in saying that I liked how code turned words into artsy stuff). It could have been that I was a convincing liar. Who knows? I am eternally grateful that they gave me a chance and I learned a whole bunch and it started me down the path that leads to my here and now.

So after Riptide Software (I was let go), I scrambled because no one plans on being let go. Shotgun all the resumes into all the job boards. I got an interview with BookIt.com. I went through a grueling (at the time, I thought it was long and arduous, but it was standard for the software industry) three hour interview complete with online quiz, whiteboard programming questions and grilling from three developers. First time doing something like that, but by then I had some experience in the field and could lie better and be even more convincing. To my surprise (really big imposter syndrome stuff right here), I got the job.

So BookIt taught me a lot of the principles that go into software development. BookIt also had some of the most awesome people that I had the pleasure of working with. I took on some of the more difficult tasks (for me at the time) and finally felt comfortable experimenting with some side projects. BookIt also had a good work culture. It was a great time and I had planned to stay there a while but there were other plans in store. I was one of the couple of people that had to be let go because of budget cuts. It was pretty unfortunate, and the day they delivered the news was pretty upsetting (the whole scene as you would imagine it in the movies: called into superior’s office, told the news, rushed to desk to pack things up, said goodbyes and left the building forever). At the time, I tried to rationalize their decision, probably a mix of “It’s a business” and I was probably an easy cut because I was last one in (no seniority).

Alright so back to scrambling because no one plans to be the victim of budget cuts. Shotgun all the resumes into all the job boards once again. For whatever reason, I caught the eye of a startup by the name of Listing Power Tools (LPT). Interview was not to industry standard so I got through just fine. Since LPT was in its early days, there were a lot of open positions and I was able to refer some people * cough * cough * ~~from early budget cuts company~~ * cough * cough * and it was like I was back at BookIt again. Startup life was nice but different. LPT was where I expanded my knowledge base immensely and wore many different hats. Basically a level up. It was all going so well. And then one day, we were all rounded up for an impromptu meeting in the morning by our HR person and we were all told that operations have been shut down and we were all out of the job. This one was a heartbreaker. There were signs but no immediate red flags so the blindside was a tsunami. At least some scathing Glassdoor reviews were made in the aftermath.

And on cue once again was scrambling and shotgunning resumes because no one plans to be at a failed startup when it actually goes down. This one took a while to come back from. I cast a wide net. I had many interviews at many different companies and not one offer for a while. It was disheartening. Finally, I accepted an offer from a company called Veristream. The company was almost fully remote and that was a first for me. No commuting for the first time in my career was truly awesome. My poor 12 year old car can take a break. It was nice for a while.

Even though I was employed by Veristream, I was still accepting interviews. The wide net worked a little too well. One company that just had an insanely long process (probably due to startup reasons) was eMindful. I had to go through a few separate interviews and a take home project in the span of 2 months. The take home project was nerve wracking because it was in a new technology that I wasn’t too familiar with but I worked at it hard because eMindful had a former LPT alumni at the helm and I was super interested in working with him again. By a miracle, I was offered a position at eMindful.

For the first time, I did not have to scramble or grab my resume shotgun. I actually had a choice and a plan. I decided to leave Veristream (first time putting in a two week notice, that conversation was awkward) for eMindful. Similar to LPT, eMindful was a startup that was just starting to build out their software development department. No referrals this time though but I did end up working with someone else from my BookIt days. Also, another similarity to LPT, I was tasked with building a product from scratch and delivering it on a deadline. I have to say that this final product that me and the dev team built is one of my crowning achievements as I wrote a lot of the code in a crunch and it works (this matters the most) and it looks good (matters second most).

So after said crowning achievement has been achieved, comes my present job. A rather pesky recruiter presented a rather lucrative opportunity that I could not pass up. Here is where I had my second time putting in my 2 week notice and the conversation was the same amount of awkward (at least for me, I think). I said my farewells to eMindful and went over to Fortress Information Security. Still getting a feel for this new job but I think I am going to like it.

And that is my career thus far. A lot of scrambling and resume shotgunning to mask all the scrambling. The ups and downs has taught me a lot and I am looking forward to what else my career will throw at me (hoping for no more surprises, please!). Now ‘what if’ that first opportunity never accepted me, where would I be? Electrical engineering for the government or NASA or an electric company? I’m just glad someone took a chance on me.

My First Post

Mon, 18 Mar 2019 00:00:00 GMT

Welcome!

My first ever blog and I am not sure where this will take me but I have a lot of thoughts that I want to put into words. Probably going to write about a bunch of things, whatever is on my mind at the moment or something I always wanted to write about, we will see. Topics will probably include tech, sports (basketball and fantasy sports), video games, anime, music, life in general, etc. Yup, its a broad spectrum. Hope you find something that you like.