DEV Community: Zach

Alumni Panel

Zach — Thu, 09 Sep 2021 04:18:51 +0000

We had a panel of 4 alumni speak and answer our questions today. It was great - a lot of practical knowledge as we head into the job search.

Here are some of my takeaways:

Go deep rather than broad

Rather than pick up a bunch of new languages and frameworks post-HR, get better at the ones I list on my resume. Whatever I include there is fair game. Be strong with those.

Data structures and algorithms

One of the presenters said this was the most meaningful work he put in. Another mentioned continuing to meet with cohort-mates to practice and improve in this area after graduation.

Keep up the momentum

We heard how easy it was for these skills to atrophy without continued practice. If you don't use it you lose it. While it's tempting to take some time off post-HR for some rejuvenation, it's more productive to stay sharp, stay focused, and stay in a working groove.

Believe in Self

We have value. We are better than our imposter syndrome.

The right answer isn't everything

Sure you want to solve the toy problem. But it's not just about the solution. Can you have a productive interaction with the interviewer? Can you show strong, and flexible problem-solving process? Would they want to work with you?

It was a great panel! Seeing/hearing them makes believe in myself as an engineer.

Meet the New Computer -- Same as the Old Computer

Zach — Sun, 05 Sep 2021 20:51:42 +0000

In a recent post I discussed my thoughts around getting a new computer, thoughts that arose, quite naturally, from performance issues I've been experiencing with my current machine.

Refreshing the ol' computer

On of the options that I laid out was simply trying to resolve those issues and seeing how far I could extend the useful life of what has until recently been a great computer:

Keep current laptop but offload some files to free up storage space and hope that solves the performance issues. And then buy an external monitor.

That's what I set out to do yesterday. It has been a rewarding exercise in getting to my computer better.

Freeing-up HD space

My first step was to create some space on the hard drive. I've generally had 1-2.5 GBs of free storage, but I'd see notice that pretty often, that would crash down to fewer than 20 MBs (!).

What was going on? Well, apparently my OS may be, as is common, performing encryption on some files -- and the storage of those encrypted files isn't free. That might be the cause. Whatever the case is, the amount of available space isn't razor thin and just isn't cutting it. There's no surprise that when I get the dreaded system is out of application memory message, it's when I'm in the anemic sub-200 MB range of available HD space.

So I offloaded some files to external storage and have a whopping (not really) 3.82GBs available now.

What good does that do?

macOS stores data used for active processes in RAM. If space in RAM runs low, macOS starts storing data on your main boot drive and swapping it between there and RAM as it needs it. This is known as virtual memory. For this reason, you should always have a decent chunk of free space on your boot drive — 10% is a good rule of thumb. If you don’t have enough space on your boot drive for an application to store temporary files, you will see the error message telling you your system has run out of application memory.

Alright, I'm heading in the right direction.

Lessons and Tools

Next, I performed a search for fixes (and information) for getting closer to my goal or a hassle-free work computer. here are the two links that I've been working with:

https://macpaw.com/how-to/reduce-memory-usage-on-mac
https://setapp.com/how-to/reduce-memory-usage-on-mac#reduce-in-finder

Here are some cool things that I've found and learned.

First and foremost, is that I don't have to be, nor should I be, a passive passenger in managing the state and performance of my computer. No, it's not a cluster of opaque, esoteric, hardware issues and yes, there are easy-to-use built-in tools to help.

The Activity Monitor

This is the bread and butter right here: How much memory am I using (and how much is available)? Here's where to find out.

Chrome is a memory hog!

Both in the Mac Activity Monitor and in Chrome's own Task Manager, you can see that Chrome absolutely eats up memory. I'm not sure that each Chroe process is tied 1:1 with each tab open. But managing Chrome will go a long way to managing system performance.

Login Items

Postman was set to open upon system boot/log-in, and it eats up a ton of space. Why let an unused application degrade performance where you need it?

There are lots of other items that I can list - many of which I have yet to explore. Next on my list: cleaning up my desktop.

This tip always comes at the bottom of instructions and unfairly so as it is quite effective. Without even looking at your Desktop I would assume it’s cluttered with mountains of icons.

Guilty.

Finally, the internet being an endless repository of information, I found this reddit post when I was looking for info on what cache I could safely delete. There are two posts here, one of which answers the question directly, and another that mentions the 'Memory Pressure' meter of the Activity Monitor. Check out the link.

Anyway, I'm going to continue to monitor, de-clutter, and optimize where I can and hopefully get some extra life out of this computer that I like so much.

APIs and React

Zach — Sat, 04 Sep 2021 04:19:03 +0000

I used the Google Maps API for one of my two Blue Ocean assignments. To interface with the API I used a library to interface between the two. It allowed me to basically build react components that it then translated for the Maps API.

The primary reason that I used the library was because I didn't know how to insert the API script tag into the head of the html document. Perhaps I should have just done that - hardcode the tag right into our root index.html page. Perhaps I could have found a way to attach the tag dynamically.

That's what I'm writing about here.

So I've done a quick search and it looks like the answer is both A) Very easy to find and B) straightforward to implement.

This page of the API describes how to load the javascript API.

There are three different ways.

The one I was familiar with, and was circumspect about using -- **Inline Loading((:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Then there's Dynamic Loading (Manual):


// Create the script tag, set the appropriate attributes
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap';
script.async = true;

// Attach your callback function to the `window` object
window.initMap = function() {
  // JS API is loaded and available
};

// Append the 'script' element to 'head'
document.head.appendChild(script);

There's the appending-to-head that I mentioned. I noticed a great passage here relating to async:

async: Asks the browser to asynchronously download and execute the script. When the script is executed, it will call the function specified using the callback parameter.

This makes async easy to understand. I also remember hearing this about async earlier in my coding education. How we drop .js scripts toward the end of the body when we want them to have reference to DOM elements that have loaded. Wait no, I think what I remember is that the script earlier in the body will gold up any following DOM elements until it loads. So the way I'm remembering and interpreting this passage is that you can use async to prevent that hold-up and allow the script to fire when it's ready without holding up the page render. Cool.

Finally, there the Dynamic Loading (Package):

npm install @googlemaps/js-api-loader

import { Loader } from "@googlemaps/js-api-loader"

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});
loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

This looks super compatible with React. I'm not sure why I didn't apply this style off-the-bat with Blue Ocean. But I did find something that works, so it's no stress. And I have this now too -- even better. That's the thing about coding. There's a million ways to reach your goal and good reasons for for each of them. Sometimes that reason is it's the first one you found, ha.

Blue Ocean Wrap-Up and Post-HR Thoughts

Zach — Fri, 03 Sep 2021 04:06:45 +0000

Blue Ocean

I've more-or-less wrapped up my Blue Ocean Contribution. It feels good. I don't think I made any game-breaking contributions to this project, but I'm proud of my execution on the responsibilities I was tasked with - to animate our logo and then to build the map-display for the search results.

Tomorrow we present our project.

Post-HR Thoughts

Growing my skills

There's a lot to unpack here.

Something I've been thinking about in the past day or so is my tech debt list. There are so many topics I want to revisit, to explore, the understand deeply, to add to my repertoire.

How do I even approach this? A few ways have crossed my mind:

What skills are in demand?
What skills are the most impressive?
What projects should I build?
Toy problems - how much should I study?
What are other people doing?

There are probably a billion blog posts out there that answer these questions and maybe I'll read them. I definitely plan on canvassing my classmates and maybe even members of the previous cohort - the 'Seniors' to my classmates 'Juniors'.

I'm sure Career Services has answers to these and probably other staff members as well.

I certainly have my own list. Some of those things:

A CSS Framework the Material UI or Bootstrap, or maybe something like Chokra that's tied to React.
Another front-end framework like Angular or Vue. Maybe I should just go deeper on React. I'm not a huge fan of React. Maybe it was the first experience I had with it at HR (which was a very unpleasant experience), but I'm still not a fan. Maybe building my own light-weight framework would be something cool to try.
Project-wise, I still believe in the blog project and what it can bring to Bootcamp students and other coders.
Complex queries (joins, aggregate functions etc) in Mongo/Mongoose and PSQL.
Next is a strong contender for study/project use. We used it in Blue Ocean. It looks awesome, but I haven't really gotten to interact with or explore it beyond seeing its routing in action.
Client-Side vs Server-Side Rendering. I don't really get SSR and its advantages.
Front-End Optimization
Just setting up a better workstation. Second monitor, new computer possibly, maybe just fixing up my current laptop. A new desk chair?

Edit: Let's see if this turns into a running list. Here are some additional topics I consider important:

Testing
Websockets
Async

Free time and flexible schedules

What's the life of an engineer like? What kind of hours can I expect to put in? I'm sure that varies wildly depending on the company and team.

I want to ski this winter. Will I be able to create a two-hour gap in my schedule during the week?

I want to coach High School basketball - how involved can I be in that?

It also depends on the job location. Can I be remote? If I have to relocate for work, both of those things are off the table this year.

How I'm Feeling (Part 2)

Zach — Thu, 02 Sep 2021 04:58:20 +0000

In addition to my regular blog posts, I've kept a mini-journal of my day-to-day emotional journey during the HR experience. The point was to have a record to look back on if I chose, but also to have a blog post in the chamber for a day like today when I started thinking about the post way too late and I'm too tired to write anything worthwhile. So it's time for the payoff. This is Part 2. Part 1 is staying in the archives for now.

Dev.to was acting weirdly, not showing me the latest additions in edit mode. So I'm starting a second file.

8/5 6:57am Feeling alright. Tired this morning. Hope to have a productive day on blog and wrap-up of FEC. I'm actually gonna start the day just reading some React articles that I bookmarked. 8

8/5 10:39pm Not the best day. Got tied up with git - lost some data and am generally experiencing some weirdness. But I've done enough work to be in a goos spot. 7.

8/6 8:02am 7 Had some problems with git last night and hoping they don't carry over to today. Will present out FEC to cohort. Hope to work on blog in evening.

8/6 pm (writing this next morning) - a good reminder that i should write these posts when i remember to. i had the page cued up for a post but thought id do more work before writing the entry. Anyway, after doing out team FEC presentation, I was pretty exhausted. It was a long day shaping up the final pieces and then a team scramble at the end to get all of our components in harmony. But we pulled it off in the end. I started working on the blog project after a day of not working on it and was so tired it was hard to think straight. It took most of the time just to remember where I left off only two days before. 7/8

8/7 8:20am - We have the FEC (mostly) behind us. There's a lot of time today for 'polishing' - I wonder if that's in the interest of making this a portfolio project. But I feel like I have a blank slate again moving into a new project (SDC) next week. I hope to make a lot of good progress on the blog this weekend. 8

8/7 pm - Writing this monday morning wrapped up the day with a conversation on entrepreneurship with Corey. We each talked about our current project and I asked him if he would lend his assistance and code a feature. I get fired up thinking and talking about this stuff.

8/9 6:42am - I have a lot to do today. I have to finish up the SA. I think I'll submit the SEIR application, so I have to get that done by 9am. We're starting SDC today. I'm giving my first student presentation and want to prepare for that. A meeting with Zabrian to discuss my idea for the jr-sr partnership resource. And of course, I'd like to make blog progress. 7/8

8/9 9:52pm - Feeling alright. Didn't finish the SA, but planning to do that before 9am tomorrow. Met with Zabrian - he was very receptive to the 'peer resource/subject experts' idea and I was lifted by his response. got started on deployment for the blog and did some redesigning. 7/8.

8/10 1:29pm - Morning has been ok. Didn't finish the SA but did spend a few minutes re-starting it. Realized my list wasn't returning because I wasn't returning from .map() 🤦. Anyway, would've given this morning a 7/8.

8/10 10:07pm - Spent a bunch of time tonight trying to run the project on an aws instance but couldn't connect via the ip address. bummer. i'll try tonight. 7/8

8/11 6:22am - 7/8 I have a bunch to do but I think I have the time to do it without being stressed. SDC is going fine. I would really like to get my blog project live. And just add some needed features to the project.

8/11 9:35pm - 7/8 Man enough of these 7/8 days haha. I've gotten a bit stuck again on deployment. Bummer. But I eased into tonight without being preoccupied (ahem excessively preoccupied) about what's on my slate. I'm calling it a night. And looking forward to a good, productive day tomorrow.

8/12 6:37am - I think today will be a good, productive day. I do a presentation this afternoon on git workflow - excited for that. Gonna make sure my blog is live on AWS today as well.

8/13 6:51am - Feeling good this morning. 8
8/13 pm - Was a blah day. Had meetings that interrupted my workflow and then got hung up on SSH. Resolved the problem, but it took forever.
7.

8/14 7:25am - Glad it's Saturday. 7/8
8/14 9:41 pm - My afternoon wasn't productive. But keeping it in perspective, I'm doing fine with the blog project. I'll be able to get good stuff done tomorrow (Sunday). I hate to do another 7/8 but here we are. This one's closer to an 8 tho.

8/16 6:36am - On my agenda. Work this morning on blog project. Then focus through the day on SDC. I might have an SDC assignment to complete first actually - midpoint conversation - so I'll take a look at that. 8.

8/16 pm - Writing this the next morning. I was too wired from the presentation to remember this. Didn't get any non-presentation work done after 4:30pm. Feel good about the presentation but behind on SDC. 7

8/17 6:33am - Need to cover a lot of ground today. But I can do it. 7/8

8/17 pm - Missed this post. Did a presentation today on 'Peer Resources'. Went great. Curious to see what will become of the initiative, and hopeful to cultivate it.

8/18 am - Well, writing this one at 2:06pm. Took it easy this morning. Went to Hugo with Kate for lattes and pastries. It's been a nice and even day. Rainy/stormy all day which has been nice.

8/18pm - Writing this the next morning. I'm a bit out of the groove with these entries. Anyway, feeling better about where I am with SDC. I can see where things are headed with stress testing. If I can do that on the servers and then do load-balancing + horizontal scaling, I'm basically there. Then tweaking (my queries) and (possibly) testing. Oh, and hooking up with the front-end. The actual 'goal' of this project. 7/8

8/19 6:36am - Hoping to move forward a bunch on the above list. Haven't done any blog project in. couple days and hoping I can knock out some code tonight. 7/8

8/19 pm - Another entry missed last night. I've been a 7, and 8, or a 7/8 for each entry. Maybe the consistency there takes away the interest in keeping up the log. If it was more interesting - less predictable, with greater swings in emotion, maybe I'd be more compelled to log. Anyway, yesterday was fine. I didn't work on my blog. But I feel like I'm in a good place moving into the last few days of SDC. 7/8

8/19 am - Feel good. 8.

8/19 am - Delivered a quick presentation last night (this is written morning 8/20). Went well. Easy one on maintaining an eng journal. 8

8/20 9:54am - Last official day of SDC. Hoping to tighten things up on this project and would really like to pick back up with the blog project. I'd like to introduce it in a pres next week and also just work on it in my MVP. 8

8/25 7:29am - Well I missed the last two days completely. As a recap, we spent essentially all of Monday on the Resume sprint - two lectures and two working blocks. Tuesday was day 1 (of two) of the MVP project, but a lot of my attention was diverted to prepping for the final conversation. That went fine, and I got great feedback. But I only got like a third of the way through my talking points in the three minutes we were given. I don't know if that super-succinct three-minute story fits my interview style. Maybe I should change to make it fit. Again, I got great feedback - some good points to chew on.

Today I hope to just grind away at the MVP. I wrote about it in a post last night. 8.

8/25 11:30pm - Haven't been up this late working in a while. Did some good work on MVP today and will be ready for the presentation. I think it's been helpful in shaping my ideas for what the questions-answers section of the project might end up looking like. More responsive, SPA style, and less routing around to different pages. 8

8/26 7:39am - Feel good. MVP is in a good place, so just refining+adding now. 8

8/26 9:43pm
Took off early tonight. Went out to dinner with Kate and Jon and jsut got back. Needed the time. Have some things on my plate like toy problems to ctch up on and some google form response I need to submit. Starting Blue Ocean also. Looking forward to that. Anyway, like a 7.

8/27 8:58am - Just finished the form response that put us in the role of a consultant tasked with redesigning the backend of two hypothetical companies. Was more fun than I thought it would be. Glad to have that out of the way. 8.

8/27 pm - Writing this the next day. Got assigned my initial Blue Ocean responsibility -- the animated logo. Did some research and have a rough draft. Was good progress. 8

8/28 pm - 10:45am - Got up early today (earlier than this post) to continue work on logo. Have it in a great place. Need to put finishing touches on it and mount it to the loading screen. Hope/expect to be done with that today. 8

8/31 7:32am - I missed yesterday. That's ok. I'm leaving it.
Today is a 7/8. 7 for the catch-up work I have to do (resume, toy problems). 8 for where I'm at with blue ocean.

9/1 9:52pm - Guess I've been pretty sporadic with these posts. I'm exhausted. It's basically the end of tech learning at HR. Next week is career week and graduation. Blue Ocean has been great. Need to finish up tomorrow and integrate with main branch. 8.

New Computer

Zach — Wed, 01 Sep 2021 04:40:51 +0000

I'm in the market for a new computer. A mac.

They're priced high, but I think they're generally worth what you pay for. Few operating system hiccups, simple and well-designed (and familiar) UI/UX, they've performed well for me, and have high build quality. I'm on a 2017 13" MacBook Pro with these specs:

Processor: 2.3 GHz Intel Core i5
Memory: 8 GB 2133 MHz LPDDR3
Graphics: Intel Iris Plus Graphics 640 1536 MB
Storage: 121 GB HD

First, I'll point out the comically small hard drive. It's actually been one of my biggest issues - I've run out of space. And I believe that degrades performance as I think the hard drive is used by memory in some cases to offload some work and I've gotten an awful (and persistent) message at times that I've run out of application memory.

The other main issue is that the letter 'p' doesn't work. That's the result of spilling some liquid on the keyboard shortly before the bootcamp started. P is the only key that never regained functionality. I've been using a wireless external keyboard. And while it's a solution - it's a pain. A lap doesn't really have room for a keyboard and a laptop.

Other than those two issues, I really like this computer. Well there is something else -- I've been working solely on this small laptop screen without an external monitor. I'm ready to upgrade to an external and take advantage of all the benefits of more screen real estate.

So my options appear to be these:

Keep current laptop but offload some files to free up storage space and hope that solves the performance issues. And then buy an external monitor.

Buy an iMac (desktop) with a nice big screen - move some of my laptop's files to the desktop and then have two computers: one laptop one desktop.

Buy a new MacBook and an external monitor. This is the most expensive option. But probably the best from a performance standpoint. A strong workstation (including screen space) that I can take anywhere.

What's stopping me from pulling the trigger now? I think Apple might be dropping new MacBook and iMac models soon. So I feel like I'm kind of in limbo. How long am I willing to wait? I don't know.

Blue Ocean

Zach — Tue, 31 Aug 2021 04:00:35 +0000

We're now deep into the Blue Ocean.

My assignment was the logo, and as I write over the last couple of posts, that's pretty much tied up now.

I joined our group today unsure of what was coming next for me. It was a little unsettling feeling so detached from the rest of the group. From my perspective, I was working on a pretty siloed part of the project (svgs and animations) while my teammates were working on parts of the project that were more inter-related.

I felt like I was floating. I spent some time asking around and getting a sense of what others were up to and where I could contribute. It's a tough question -- and kind of weird. I'm a big believe that sometimes there are just too many cooks in the kitchen. Two people doing the work of one can be less efficient than just the one. I've also come to appreciate that that's not always the case. But I want to avoid a situation where just getting up to speed on some part of the project impedes that work.

Well, I started think about the extras. I have a strong team of solid communicators. They're getting things squared away _ I trust that. So what are some of our stretch goals?

It was a good lead and it ultimately led me to my new assignment: displaying the search results in an embedded google map. It's one of our client's asks and our team has the bandwidth for it. And it's great practice for me - working out of a teammates code and integrating a third-party API.

Animations Pt. 2

Zach — Sun, 29 Aug 2021 04:35:31 +0000

I learned a ton about creating animations over the last two days.

First, here's the fruit of my labor - the animation of our client's logo:

While imperfect, I'm happy with how it turned out. It was a learning experience, and in that regard it was a total success. I've learned the fundamentals of animating html elements (simple structural elements elements like <p>s but also <img>s and <svg>s) and have also seen some of the wild possibilities that exist to create attractive, compelling, and beautiful experiences for users and viewers.

This was pretty simple to put together. Here's the code that represents the horizontal left-right movement of the 'U';


#u {
  position: relative;
  margin:0px;
  padding:0px;
  animation: u-xAxis 5s 1 forwards;
}

@keyframes u-xAxis {
  0% {
    transform: translateX(.8em);
   }
  100%{
    transform: translateX(0em);
  }
}

The first code block is standard css. We're interested in the animation value. Here we specify properties of the animation including the animation name (the name of the keyframes that define the time values for our animation sequence), the duration, number of repeats, and the direction.

There are other options too, but those are the ones I used in this project.

I think of the keyframes as the engine of the animation. It defines the time intervals over which elements change. And it's easy. Well, the theory is easy. Defining rulesets to achieve your vision - less easy.

What I've got going here is that at 0% elapsed-time (before any time has passed), I'd like to apply the translateX css property to any elements that is assigned this ruleset. And at 100% elapsed-time (at the end) I want those elements to have the property assigned at that point. You can set intervals at any point along the way and even combine them to achieve the effects you want.

There's a sea of creative, imaginative css animations out there. Explore, learn, and be inspired!

Animations

Zach — Sat, 28 Aug 2021 04:08:46 +0000

We've started the Blue Ocean project. My team's client is building a website called Unlocking Wellness:

Unlocking Wellness is a health-care web and mobile app that allows patients to find and assemble a team of providers who are specially trained to care for marginalized communities and people groups.

My role is to execute the animation of the site's logo, which is composed of three elements:

The letter 'U', which starts out inverted to represent the loop of the lock.
A square block that represents the body of the lock.
The letter 'W' which resides within the body of the block.

The animation consists of flipping the U and moving it into position off to the side of the lock body. And the W will bounce in place.

Research

Animation is new to me. So this a great opportunity to flex my lean-and-apply skills.

The first step is to find some strategies or frameworks for creating animations. A teammate suggested looking at React Spring and another similar tool. I took a look and - cool stuff. I didn't know tools like these existed (although of course they do).

But I felt like the docs there were light on examples -- and I like examples. So I kept looking around for something a little closer to what I'm looking for. I ended up finding these two cool resources:

https://tobiasahlin.com/blog/curved-path-animations-in-css/
https://blog.fullstackdigital.com/how-to-create-an-animated-logo-with-svg-and-css-animations-dbf0802a47a1

These make me feel like my goals are achievable without a framework. These are some of the pertinent terms, which I need to explore: keyframes, transform, translate. SVGs also look like they're in the mix.

.then()

Zach — Thu, 26 Aug 2021 06:30:17 +0000

This is going to be an embarrassingly basic post - basic in that it's about some basics: promises and callbacks.

You want to talk about tech debt? My list is a mile long, but somewhere near the bottom (like buried at the bottom) is the world of asynchronous functions and tools/topics like:

promises
async/await
callbacks
and more

Things move quickly at HR and it's difficult to set aside time for pure study or review. So my understanding of promises, for instance, hasn't progressed beyond the bare minimum. I mean the real minimum - can I throw some code near it to get what I want to happen.

I was debugging a problem with the Help Desk the other day. I was having a hard time redirecting my page after a form submission (the problem ended up being that I wasn't using preventDefault() in the event handler) and we were working on resolving that. Somewhere along that path, my interlocutor paused to point out an anti-pattern in some of the code we were investigating. The code was functional, but deficient.

I had been making http requests using helper functions like this:


const helper = (some_param, callback) => {

axios.post('http://url.com')
 .then(res => callback(null, res.data))
 .catch(err=> callback(err, null))

}

Yikes.

Why had I been building functions like this? Well, for one, it worked. And that's really the whole list.

Back when I was first getting started with async, I had been making http requests using jQuery's .ajax tools and was getting comfortable using callbacks in that context.

Shortly after - I mean like the next day, if that - promises entered the mix. I never got to sit down with them for some semi-deep study before I joined a team that preferred .axios to .ajax. .axios returns prmoises, and being new to them, I asked a classmate how he'd handle the challenge I was facing converting an ajax call to axios. He suggested the model I demoed in code above. And it worked. So I'd been using it since.

I'm turning this into a long story.

Here's what the Help Desk helper had me do, and I've been using it pretty easily since:


const helper = (some_param) => {
  return axios.post('http://url.com')
}

and then in the function that calls the helper:


reactEventHandler(param) => {
  helper(param)
   .this(res => setStatePerhaps(res.data)
   .catch(err=> callback(err, null))
}

This is really surface-level stuff. But I'll call it a small win. And a win is a win.

MongoDB: One-to-Few

Zach — Wed, 25 Aug 2021 16:56:07 +0000

Following up on my last post, I'm sharing here my approach to relating answers to questions in that section of my blog project (and what I'm building for my HR 'MVP' project).

I'm anticipating relatively few answers for each question. Taking an example from the excellent official Mongo Schema Design guide, I could have gone with a design that embedded answers within each question.

It would have looked similar to this:

> db.person.findOne()
{
  name: 'Kate Monster',
  ssn: '123-456-7890',
  addresses : [
     { street: '123 Sesame St', city: 'Anytown', cc: 'USA' },
     { street: '123 Avenue Q', city: 'New York', cc: 'USA' }
  ]
}

The problem with this is that accessing those addresses outside of the context of the question involves searching first by person. That wouldn't work for what I'm trying to do. So Instead, I'm going with a child-referencing one-to-few schema.

Something like:

{
    name : 'left-handed smoke shifter',
    manufacturer : 'Acme Corp',
    catalog_number: 1234,
    parts : [     // array of references to Part documents
        ObjectID('AAAA'),    // reference to the #4 grommet above
        ObjectID('F17C'),    // reference to a different Part
        ObjectID('D2AA'),
        // etc
    ]

To be able to have a quick reference for the question associated with each answer, I utilized two-way referencing by adding the question id to each answer.

Here are my models:

let questionsSchema = new mongoose.Schema({
  title: {type: String, required: true, unique: true},
  text: {type: String, required: true},
  date: { type: Date, default: Date.now },
  author: mongoose.ObjectId,
  answers: []
})

let answersSchema = new mongoose.Schema({
  text: {type: String, required: true},
  date: { type: Date, default: Date.now },
  author: mongoose.ObjectId,
  question: mongoose.ObjectId
})

Alright, so first: What's the deal with ObjectIds?

ObjectIds appear to be a special type of Mongo/Mongoose object whose critical information is a unique string id associated with each object.

I like to play with the models a bit before committing them to code, so to practice creating answers (which need an ObjectId) I found this way of manually creating ObjectIds:

let q_Id = "6125b4b858dd643905644abc"
q_Id = mongoose.Types.ObjectId(q_Id)

In the real application, I won't need to do this, because the question id will be known to the app when creating a new answer.

The trick is pushing each answer's id into the Question's answer array upon creating the answer.

To do that, I followed [this example]:(https://www.bezkoder.com/mongoose-one-to-many-relationship/):


const createImage = function(tutorialId, image) {
  console.log("\n>> Add Image:\n", image);
  return db.Tutorial.findByIdAndUpdate(
    tutorialId,
    {
      $push: {
        images: {
          url: image.url,
          caption: image.caption
        }
      }
    },
    { new: true, useFindAndModify: false }
  );
};

To come up with this process of answer-creation and question-updating:

const createA = function(){
  let answer = new QA.answersModel({
    text: 'xthtAnswer',
    author: idToQuery,
    question: q_Id
  })
  return answer.save()
  .then(answer => {
    console.log(answer)
    return QA.questionsModel.findByIdAndUpdate(
      q_Id,
      {
        $push:{
          answers: answer._id
        }
      },
      {new:true}
    )
    .then(doc => {
      console.log(doc)
    })
  })
  .catch(err => {
    console.log(err)
  })
}

createA()

I'm not happy with the way that promises work here. I'm going to come back around and clean it up, maybe using Promise.all() as described here and here.

MVP Project

Zach — Wed, 25 Aug 2021 04:19:13 +0000

It's the end of day 1 on the MVP project. Our assignment is to complete a full-stack mini-app in two working days. I like the energy of a project like this: bang-bang, what can you think up and execute on with a super quick turnaround.

When the assignment was introduced, I asked our Tech Mentor whether I could just continue on with my side-project and kill two birds with one stone. He suggested an alternative. Make something that could serve as a stand-alone version of the feature I'd like to create -- something that I could later improve upon in the full project. That's what I intend to do.

What feature will I build?

I've started work on the Question/Answers section of the blog project. You can think of it as a Stack Overflow wannabe.

I had to do a little re-reading on Mongo schema design and two options fell under the scope of the one-to-many relationship that describes the one-question-to-many-answers dynamic.

The two options:

Embed the answers in each question...or
Reference the child answer in each parent

I decided to do the latter.

It requires more work if you want to reassign the question to a different asker - but when would I need that?

More commonly, I'd need to relate the answer with the answer-er - like to list the answers they've provided in their profile. In this case, it'd be a lot easier to look up the answer by its author than to go through the every question for every answer, and then search by user.

In my next post I'll show how I implement that design in a schema that contains ObjectID references.