DEV Community: Sarit Chaet Hudis

More Code in Less Time

Sarit Chaet Hudis — Thu, 21 Jul 2022 16:15:56 +0000

Even if you're a morning person ☀️, you probably need some time in the morning to start being productive.

For me, the most time-consuming part until I actually start writing new code is "reloading" the context of what I'm doing and understanding what is the next step.
And the more this context and next step is clear to me- the faster (and less intimidating) it is for me to get going!

The Best Way to End Your Day

That's why I try to always end my days like this:

A hint about where I'm stopping, i.e a specific comment like //look at <component name> and create a similar version in <other place> or //test also for mobile
If I can end the day in a commit, that's best but if I don't have anything wrapped up enough- stash + a very readable name!

The Worst Way to End Your Day

In the middle of a pile of sh*t 💩- with lots of code commented out, console logs and not having any idea what's going on!
In this case, if my time's up (kids...) it's better to revert to a clean slate and start anew tomorrow, but again I leave myself a hint or specific task like: //Make this load only when needed.

What's your end-of-day routine like? Or, do you have any more tips to get the flow going? 😊 Leave your thoughts here!

Surviving Your First Month as a Front-End Developer

Sarit Chaet Hudis — Sat, 21 May 2022 16:20:24 +0000

As I've just finished my two first months in my first-ever programming job as a front-end developer for HoneyBook, I thought to capture some basic tools that I learned and helped me tremendously.
(For a version with a plot-line see this post)

Devtools is a Front-End Developer's Best Friend

Devtools in chrome is amazing. As someone who played around with html 10 years ago, I couldn't dream of most of what you can do today.

Cmd+Shift+C to inspect elements, then understand where they are in the components tree, reading all the Styles applied to them, can be 90% of understanding a front-end issue.
Writing new style rules directly in the devtools styles tab, or toggling off existing rules bring me closer to understanding the source of my troubles.
Also, if you see styling rules that have a strike-through that means they are overridden by another rule. Easy!

Into The Repo

Now - time to understand why things are as they are- which brings me to one of the skills that are paramount to this profession: reading other people's code.

What helped me the most is seeing how other people do it.
The one thing they all did was clicking on functions or variables names and going to see their origin, in a sort of drill-down. This takes time to master, but it's a basic, yet must-have skill.
The second thing, was to search cleverly.

Different Types of Searching

I learned you can search in specific ways, depending on what you need. I never needed this for my personal projects, but it's really useful when working on a large project or one that you don't know.

For a certain file you can search using Cmd+P in VScode.
For getting to a certain symbol (which can be a var or a function) you can use Cmd+T.
And if you want to see all places where a certain component is being rendered, you can use the general search (Cmd+Shift+F) and type <ComponentName - simple!

VScode has a lot more search options but those are most useful to me.

Gitlens Is the Bestttt 🔍

GitLens helps me see who lastly worked on some area of the code. I recently started using it to go specifically to the github commit from there, to see what that change was, and maybe there was an interesting comment during code review.

If the latest committer really did write something that can help me understand if my solution is a good idea, I consult them. Or the person that gave them a relevant comment.

Stress-Testing Your Solution

Now is the time to stress-test it. I see if the solution holds even when the div is bigger or smaller. I think of different scenarios like screen sizes, user states, different ways to get to this screen.
I search for all the places this div can appear (you know how to do that by now, right??).
I consult with QA sometimes about more conditions to check.

Even if you work at a place that has QA - do not skip this step! This is part of being an accountable owner of your code- which is what you should be.
Plus, as you are just beginning, most chances you WILL find things that you missed. Which is great because that's how you learn.

Check Yourself Again and Refactor

Just before I create the PR and ask for a code review, I check again in the diff between my file and the original one. Have I left any comments?
Can I use better names for my variables? Does the code make sense to me, or does it look complex and should be simplified?
For this stage I created a checklist of things that I know I should check + Add some if I got general comments in previous code reviews.
Take the time to present your best work and this will pay off!
Also, this will make your reviewer focused on improving or cleaning your code even more, instead of just finding obvious things you could have caught yourself.

Let me know if you have more tools that help you make those first months as a developer the best!! :)

This One Line of Code I Wrote Is Awesome

Sarit Chaet Hudis — Sat, 14 May 2022 17:53:14 +0000

Sometimes I feel like my journey to becoming a software developer is a story about how my ability to write code is shrinking in scope.
Why?

Well, when I first learned the fundamentals of computer science and some elegant algorithms I thought- this is great, one day maybe I can invent new algorithms! Those can change how whole systems work!

Later, in bootcamp, when I realized algorithms were not for me (right now anyways) I was amazed that I can create a whole app in one week - I can do anything with the tools I just learned!

Two months ago I was humbled to start my web development career in an amazing startup called Honeybook as a frontend engineer.
And in this post I'll tell you how I spent the better half of a day writing one line of code.
And how I'm actually proud of myself for that.

Most Code You Write as a Junior Is Incremental

The reality is, in 2022, so much code has already been written. Whether it is whole frameworks and libraries, open source projects, scripts and tools.
Even senior developers work most of the time on improving, fixing, refactoring, expanding existing code.

Even if you do start a project from scratch- as a junior, you will probably find a good example to start from (one you found or even wrote yourself in the past).

So, writing just a few lines of code will, and should happen to you. Especially when real people are using the product - which makes this a lot more scary/exciting!

So now I'll tell you about why I'm proud of that line.

The Div That Went Looking For Trouble

So, one day I got a jira ticket assigned to me. There was some div who's name I'll keep confidential as to not shame it, that was displayed when it wasn't supposed to.

Devtools is a Front-End Developer's Best Friend

The first thing I did, was to go see the problem myself.
Devtools in chrome is amazing. As someone who played around with html 10 years ago, I couldn't dream of most of what you can do today.

Into The Repo

Now - time to understand why things are as they are- which brings me to one of the skills that are paramount to this profession: reading other people's code.

This for me has been a big challenge, I have to admit. And getting to know my way around a codebase was pretty overwhelming at first. (Ok yeah it still is).
What helped me the most is seeing how other people do it.
The one thing they all did was clicking on functions or variables names and going to see their origin, in a sort of drill-down that was too fast for me, but I did get the general idea.
The second thing, was to search cleverly.

Different Types of Searching

I learned you can search in specific ways, depending on what you need. I never needed this for my personal projects, but it's really useful when working on a large project or one that you don't know.

VScode has a lot more search options but those are most useful to me.

After all that searching, I understood WHY this div has a z-index issue. What a Zillennial.

Thinking of Solutions

This is the part where I like to think of a possible solution - then, ideally, search the codebase for similar solutions. This can give me ideas about best practices of using specific syntax, or maybe finding out some util function already exists.
At this point, I prefer to stick to the way things are done "conventionally" since I don't feel like I know enough to say why everybody's wrong.. yet.
But really, I learn so much from reading other developer's code!

If I have some sort of solution in mind, especially one that will be longer to write, sometimes I like to consult with someone beforehand.

Gitlens Is the Bestttt 🔍

If the latest committer really did write something that can help me understand if my solution is a good idea, I consult them. Or the person that gave them a relevant comment. Anyways, GitLens is amazing, srsly.

Now You Draw the Rest of the F**Ing Owl

This is not the place to teach you how to code, so assume I know how to code and fix the thing.

Not Finished!

It worked!
My one line has put that div back to where it belongs HAHAHA!!
Now is the time to stress-test it. I see if the solution holds even when the div is bigger or smaller. I think of different scenarios like screen sizes, user states, different ways to get to this screen.
I search for all the places this div can appear (you know how to do that by now, right??).
I consult with QA sometimes about more conditions to check.

Yes, we have QA. No, it doesn't mean we don't check ourselves.

After that, I open the PR. I ask for a code review. I wait. Sometimes I get comments. I fix what's needed. I wait for some more things that need to happen for my code to reach production.
But then.. It finally happens.
My PR gets to production. Billions of users (roughly) are happy and will NOT see the div when they shouldn't.

Maybe it sounds small and insignificant.
For me it's one more win. I made a difference. UI issues are a big part of how users perceive the quality of software.. Ain't this the truth.

And I'm sure next time it won't take 5 hours. Next time it will be like 4.5 max.

Confused? Thankful? Or still have questions? Let me know in the comments! ☺️👇

Make Your Github Profile Stand Out

Sarit Chaet Hudis — Sat, 19 Feb 2022 15:01:19 +0000

Github is awesome, that's known.
But, did you ever think how to make yours more attractive for potential employers or other visitors? Even non-tech ones like recruiters!

So take a couple of hours and show your best side as a person - and a programmer.

This article is based on a talk I gave in our fullstack course.

Your profile image

Not everyone likes to put a photo of themselves. However, if you are looking for a job- get over yourself and do it.
The best advice I can give to you, apart from getting a professional photo, is to ask a close person to take your photo.

Find a well-lit room with an uncluttered background. Outdoors is also great, but avoid being in direct sunlight.
Have fun with it! Laugh about how embarrassing it is, make faces, whatever gets you to look more like you and less staged - will do the trick.
Ask them to take many photos in some variations- close or far, smiling/serious etc.
Later, choose the ones you both think are the most flattering. Ask honest people that you know to choose The One.

Yes, it's embarrassing and awkward, I know. But hey, after you start your new job you can always delete it.. :)

Profile Readme

Github has a special readme feature - use it.

It is your place to say hello and present yourself.
You can make do with a short paragraph about yourself, or completely kill it- but have one.
It's almost rude not to 😉

Pinned Repos

You can pin upto 6 repos. Use them wisely.
Remember that github is like inviting strangers to your study- It's ok to have lots of stuff lying around, but make it easier for them to know what is the work you consider your finest.

Contributions and the Big Green

Github automatically generates a visual representation of your contributions. It's shallow and does not distinguish between removing a comment and reinventing google, yes. But it's easily readable by tech and non-tech people alike.
I'm not saying you should make commits just to make the green greener, but.. I'm a bit saying that, yeah.

Commit messages

Commit messages are a window into your soul. They help you -and others- see your thought and work process.
Short and descriptive comments are best, and give a sense that you are able to focus on tasks and easily explain what have you been working on.

I use the built-in diff tree in VSCode before every push to make sure I can describe what is the major change in the commit.
But read wiser people than me about it.

Project Readme: Window Dress your Code

Whether it's a weekend project or something it took you weeks to built, increase the odds that others will appreciate it by adding a descriptive readme file.

Use the readme markdown to have nice titles, bullets etc.

In the projects I choose to showcase, I try to at least have 4-5 out of these:

A simple description of the project- what is it about? Why did you do it?
1-3 screenshots
Link to live version if you deployed it to netlify/ heroku
Tech specs- stack, components scheme, libraries etc.
Known issues and todo's - it looks a lot better if you know you have a bug, or have thought of a missing feature.
Link to other projects you used- be a part of the community and give credit to those who made your project possible!

Here's a small example from one of my repos.

Now your turn

Even if you only implement some of these tips, you will have a more inviting github profile.

If you have any questions or thoughts, please leave a comment!
And if you think this can help someone you know - sharing is caring 🤓

Working With Complex Objects in Javascript - The Friendly Beginner’s Guide

Sarit Chaet Hudis — Mon, 29 Nov 2021 12:42:27 +0000

When I first started working with more and more complex objects in JavaScript (such as API data), I noticed something that makes me work considerably slower. I did not take the time to understand the structure of the object and the data inside it.

I study in a full-stack bootcamp, so I saw this happen to a lot of us, especially beginner coders:
We love to jump right in and try out stuff, write and see what happens. This is fun! And can be a good approach sometimes.
But in the case of complex objects and newbie coders.. not so much.

If you have the same problem, hopefully this will help you.

Making sense of our object

Before going through the object itself, make sure you are familiar with the difference between values and references in JavaScript (if this is new to you, here's a good place to catch up.

This is because many times we want to get a nested object or array and change a part of it, and we need to feel confident when we ask ourselves: "Did I just change the actual object in my data? Or did I just change a copy I created?"

Now. How do I approach a new complex object?
Let's say we want to look at data of an online store selling NFTs.
Here's our object:

const NFTStore = {
  artPieces: [
    {
      pieceName: "Emo Flamingos",
      price: 30,
      ownerList: [
        {
          name: "Fida Ernest",
          userID: 23849,
          purchaseDate: "09/13/2021",
        },
        {
          name: "Eric Karger",
          userID: 23510,
          purchaseDate: "09/13/2021",
        },
      ],
    },
    {
      pieceName: "Where is my bit wallet",
      price: 100,
      ownerList: [],
    },
  ],
  storeCredits: 1000,
};

let's say we want to add a new buyer to the owners list of a piece that was just purchased.
How will we approach this?
This is the place to take the time and Read the Object.
Try and extract its structure, even in a small comment in your code, for example:

// NFTStore {...}
// artPieces [piece1, piece2..]
//      piece1 {pieceName, price, ownerList}
//          ownerList [ owner1, owner2..]
//              owner {name, userID, purchaseDate}
// storeCredits (number)

This is easier said than done, I know, but I guarantee every minute you put into this will save you at least 10 times when writing code.
And who doesn't want to be a 10X programmer, right? 😜

Reaching Inside, but Knowingly

Now that we are familiar with our data object, we can reach inside it better.
Let's for example get the price of the first piece in our store, the famous "Emo Flamingo"🦩.

We'll do it hard-coded for now.
We need to get into our NFTStore, and inside the first piece.
let's look back at the structure we saw, and see that the pieces are inside an array that's inside the store object.
This means we can start with:

const EmoFlamingoPrice = NFTStore.artPieces[0].price;

the first dot is because artPieces is a key inside the NFTStore object.
the array index is because artPieces' value is .. an array. and the 0 is just for now.
and the last dot is because price is the key we want inside the object "artPieces[0]".
console logging that will give you the price value:

console.log(EmoFlamingoPrice); //30

Great job for following through!
Now We can take it a step or two further.

Changing an object's content

Let's say we have a new buyer for this piece.

const buyer = {
  name: "Rose Daniel",
  userID: 23849,
  purchaseDate: "11/29/2021",
};

To add her as the new buyer, we need to push the buyer object to the owners array, and add the piece's price to the NFTStore credits.
The owner array of the piece we want is available here:

NFTStore.artPieces[0].ownerList

so we can simply push the new buyer:

NFTStore.artPieces[0].ownerList.push(buyer);
//see the list with new buyer :
console.log(NFTStore.artPieces[0].ownerList);

Great! Now we only need to get the piece's price and add it to the NFTStore credits. We already know the price, so let's focus on reaching the store's credits.
Look back on the structure and try to see how to do that.
.
.
.
.
Easy- it's just a key inside the NFTStore object!

NFTStore.storeCredits += NFTStore.artPieces[0].price;
console.log(NFTStore.storeCredits); //new credit is 1030

Refactoring

Now we can generalize and write a function that gets a buyer and a piece name, and adds the buyer to the owner's list, as well as its price to the store credits.
See if all is clear, and if not, write me a comment and I'll clarify 😁

function buyPiece(NFTStore, buyer, pieceName) {
  // get the piece using its name
  const piece = NFTStore.artPieces.find(
    (piece) => piece.pieceName === pieceName
  );
  // add buyer to owner list
  piece.ownerList.push(buyer);
  // add piece price to store credit
  NFTStore.storeCredits += piece.price;
}

The '.find' Method

The '.find' method receives a callback function that tells it how to find its target. 'find' iterates over the array, in this case the art pieces, and for each (piece) it checks whether the current piece name equals the name that the function buyPiece was given.
"find" returns the first result that passes the callback function test, so it's meant for unique values such as IDs - I used the piece's name instead but notice it might not be unique! So in reality you should use '.find' to search using an ID .

That's it folks, hope I helped to clarify this somewhat confusing topic for you.

I'm more than happy to receive comments, suggestions, and anything else in the comments!

prepping for bootcamp

Sarit Chaet Hudis — Thu, 16 Sep 2021 18:31:35 +0000

In two weeks' time, I'll be a student again, for the first time in some long years.
Like a lot of people today, I never stopped learning, but this time I'm talking about not-doing-anything-but sort of studying.
I'm starting a 6-month bootcamp in the aim of starting a new career as a developer.

As a naturally anxious person, this time now is used to prep myself in many ways I thought to share here.

Family prep

I'm a 37 yo married mother of two. That means taking some months for 10-12 daily hours of studying+weekends is kind of a big deal.

Long before I decided to go for this, I consulted Nurit, a charming former colleage who is also a career-change consultant (one of the perks of not being 18..) and she helped me realise that I have concerns about how my husband will accept this decision. And that means having an open conversation with him, reflecting why I want to fo this and how our daily lives will change at least for the duration of studying.
I decided to talk to him and offer that 3 out of 5 days a week will be my responsibilty for picking up the kids (which is pretty much like now) - and I will solve whether it be me, my mom, or paid help that gets them home. Evenings and weekends will be tough, yes, but in the long run I suggested that things will be better- money-wise if not hours-wise. And kids, well, they grow up.

Honestly I think I was more worried about that conversation than anything else (maybe apart than quitting my job).
But it went well. And took a huge weight off my shoulders.
One thing that helped I think (apart from coming very prepared for this) is understanding the other side has a big change to get used to- and letting him hear that in stages. Giving him time to dygest and get back to me with questions.

Social prep

One concern I raised with my Nurit is how will it be percieved that from being an experienced professional and manager in my field (e-learning) I'll become a complete novice, not to say rookie/noob etc. How will that look like to others? She gave me a very good advice: To find my narrative - a story telling my angel to this change in my life.
Actually I haven't fully written it untill a post I wrote on facebook letting people know I'm quitting my job.
It was all too naturall when I simply wrote Im pursuing an old dream. That was it. Once it was written, repeating it in various situations was easy, felt right and framed the whole move not as starting at the bottom again, but as purusing an ambition of mine.
Framing is everything.

Mental prep

I did a LOT of research about differend available bootcamps in Israel. Participated in workshops. Explored tasks and pre-courses (including completing one that cost me too much but really focused me and helped me realise I need something more challenging that filters participants better. Ruling out options is precious!!)

Once I found my place (appleseeds) and completed most of the screening process, I made sure to talk to two graduates of the bootcamp, to get as much clarity as to what lies ahead.
Really helped me understand how the day-to-day routine will actually look like. Also helped me manage some unrealistic expectations/hopes (like finishing all the tasks early so that I have many weekends off..)

This one thing - ** talking to graduates that you found yourself** - is the ONE TAKEHOME MESSAGE I can give.

Physical- Ergonomic prep

I didn't want to spend much but knew I needed to upgrade my work environment.

I have a decent chair (including arm rests)+desk setting to start with.

Used an old laptop stand so that the monitor would be at eyes' height (5$). Then I needed a detached keyboard+mouse, which at first I thought could be just about any type. Ordered a stylish but really not comfi set. 80$ wasted, new set ordered and is on its way, went for the logitech MX keys.

Brought in a second monitor that was lying unused somewhere, it's quite flimsically connected (microHDMI to HDMI, then HDMI to VGA. Not ideal). Hope will last long enough to decide whether to get another connector or maybe a more serious laptop that actually has more connectivity options..

Software- f.lux + workrave keep me covered for now to prevent upper body and eye strain.

Is that enough? For injury prevention, hopefull yes. But ideally keeping some sort of shape and not becoming a full-blown potato - what I'd really like is to get is some sort of treadmill for using while watching\ listening to lectures.
Because of the costs and space needed- considering a rental first. Hopefully will update on that later!

Study prep

What should I study in advance? Should I alreay start or continue exploring things I know for sure will come in handy? Yes - it can be helpful in easing the initiall shock. However- after I talked to graduates I know that relatively I come with quite a bit of experience from self-learning for months now. So, instead, I decided to use the little tiime I have in trying out cool stuff I'm curious about. For example, building a small scraper using Puppeteer. Or reading a lot about blockchain. Or designing my room just a little bit because soon- I won't have time for that.
I know myself well enough to know that when the heat will be on, I'll do whatever I can. Knowing that + knowing my base level isn't bad, helps me enjoy my last two weeks of relative-free time (did I mention I have two kids + a pandemic to live in? haha)

Hoping some of what I've written will be somehow useful to someone!
It was helpful at least for me to write.

Sarit.