DEV Community: Summer Rizzo

Summer to Summer: Making the conscious pivot to having job offers just shy of a year

Summer Rizzo — Fri, 07 Aug 2020 19:53:13 +0000

Howdy, folks!

Last summer I committed to making a pivot in my career path from the film industry to software engineering. I received my first job offer a few weeks shy of the anniversary of that decision. I am but a single rat in the New York underground, but this is my story.

A Note on Privilege

** I added this after I first published this post. It's really something that should have been in the first edition and I apologize for that. **

It's imperative to recognize privilege, especially in situations that revolve around success in relation to candidacy. While I did put in a lot of hard work, there are a lot of aspects of my journey that worked in my favor.

Though I do have student loans from undergrad and now Flatiron, I was never at risk of severe financial danger. Some of that is because I worked and saved before attending. A lot of it is because if I were in a drastic situation, support is available from loved ones at an arm's reach.

Because I'm white, I'm on the receiving end of a lot of unconscious bias. This can play a part as early as the initial application and can carry through the duration of the interview process.

I'm able-bodied and remained physically healthy throughout the year. I do struggle with mental health issues, but they are manageable.

There are many deeper ways all of these aspects aided me along the way. I'm incredibly grateful that I had the opportunity to pursue a new career path - that's not something everyone can do without giving up a lot more than I had to.

The Beginning

Programming wasn't completely foreign to me. I had two best friends growing up who were always interested in coding as I was likewise interested in photography and film. I stood on the sidelines through college, occasionally getting my paws wet, but never fully committing. In college, I took a few computer science courses, but I had my place and I had my life-long pursuit in visual media - considering a switch felt like an unsustainable love affair. I'm not sure how much I understood it at the time, but I had always viewed computer science as a boy's game; an unconsciously locked door I didn't realize I had the keys to.

During and after college, I got a taste of the film & media industry and it was bitter. My nagging dissonance got the best of me shortly after moving to New York in July of 2019. I didn't want to do it. Too many unpaid internships, too many long, grinding hours, too personal of a passion to turn into a career. I felt loss. I still had my best friends in software along with others, including my boyfriend, and over drinks one night we threw around the idea of software being path for me. It felt silly to have spent so much time and effort only to drop film and photography, but just considering it gave me a secure sense of hope, and it was enough.

I started teaching myself JavaScript and eventually applied to attend Flatiron School in Brooklyn through their Access Labs program. I prepared diligently, and it payed off - I began attending in early December of 2019.

The Bootcamp

When I first considered the pivot, I was close to adamant about not attending an immersive bootcamp. It smelled like a scam and I knew they were the target of a lot of criticism of experienced developers. However, though I was making progress on my own, I was working full-time and the progress wasn't fast enough. One of my regulars at the coffee shop I worked at, who co-founded a successful ed-tech start-up in the area, recommended Flatiron to me and connected me with an alumni. After getting some validation and learning more about their Access Labs program, I felt secure enough to commit to it.

It was a unique experience and I loved every second of it. I was lucky to have an incredible cohort by my side and equally incredible instructors. The community at Access Labs was supportive, strong and diverse. Perhaps it was the perfect storm, but I knew I had fallen into the right place.

I want to be clear about my experience there - it was a lot of work. I came in with a strong foundation in fundamentals thanks to my classes in college, which helped immensely. Determination and diligence drove my work and learning, and it showed. I'm lucky to have that kind of environment work for me and to have grasped the material as quickly as I did. The material comes fast and hard - and you have to be ready. Of course, there are doubts along the way - you have to account for some struggling. I had a fantastic support system at each step, which I'm also endlessly grateful for. I do think there are multiple outcomes to attending a bootcamp - it's possible to come out of it unprepared for a position, which is a valid criticism from several angles. There are a lot of contributing factors, some of which are in an attendee's control, some are in the institution, and some are in the community. I was fortunate for what I couldn't control, but I was also prepared for what I could.

I found myself as a software engineer at Flatiron. Unlike how I felt in film, I had confidence and I felt whole. Both situations had a foundation in passion, but this was a different kind. This was something I could do with fervor and it felt good. It was strange to feel this way after so many years of supposed certainty in my life path, but there was no mistaking the distinction.

The Job Search

This was what I had been eagerly awaiting for. I was ready. I was going to secure a job and I was going to do it with the same vigor that drove me at Flatiron. Pandemic be damned!

...and it was a sore reminder that I am by no means invincible. The search was quick to bruise me. It was hard. It was more difficult than all of the bootcamp combined. I thought I was doing what I was supposed to do: networking, optimizing my resume with keywords, applying to many places every day. And to an extent, I was. But it still wasn't working.

The job search taught me that you can put in a lot of hard work and not get much out. You can do a lot of things for a long time but if it's off - even by just a few degrees - it may not work. I think this stumps a lot of people during their search; it's exhausting, emotionally taxing, and contradicts the world view many of us are taught that hard work pays off. It's easy to fall down and increasingly hard to get back up.

Days and weeks passed with little hope and little progress. Every so often, there'd come a code challenge or screening, enough fuel for the fire that only burned me in quick succession with a rejection.

I kept trying and I kept changing. I made tweaks to what I could control - changing little things about my cover letter, resume, or networking style - and eventually things started to work in harmony. Suddenly, I had several prospects in the pipeline. I continued to apply. Some prospects dropped quickly while others continued on; a consistent ebb and flow.

Eventually, I got to a point where I was deep in the phase of several technical interviews. For about 25 minutes of the half hour before my first one with a company that eventually gave me an offer, I cried from anxiety and insecurity. It was yet another hurdle to overcome, but I approached it similarly to my former challenges in the search - keep going and keep changing until I found what works for me. I studied algorithms and their approaches, did many mock interviews, and received a lot of advice. It was not without difficulty or anxiety, but it worked.

The Offers

One of my interview processes had finally come to a close and I received my first verbal offer. I won't forget that feeling; everything felt surreal and it felt like I had electricity running through my veins. Of course, it wasn't over at that point - there was another company I was in final rounds with that I wouldn't know the outcome of for several weeks. I accelerated that process with the recruiter while keeping my diligence in technical interview prep, taking other interviews along the way to be safe and sharp. It would be a difficult interview, but I made it through and came out with an offer from them, too. From here, I'll refer to the former company as "Co. A" and the latter as "Co. B"

I had a difficult decision to make, and I had to make it before I had even completed all of the rounds for Co. B, as I had a decision deadline. Co. A was across the country at a promising, well-funded healthcare startup in the Valley. It was exciting and my work would surely be exciting and impactful there. It was also a start-up, which often comes with risk and, from the information I could gather, there was little diversity for under-represented groups in the engineering department. On the other hand, Co. B was large tech firm in my current city, New York, and though my work might be as exciting and my career may go just as far, there was a risk of being stunted or leaving my passion and vigor at the door - or at least some of it.

I ended up going with Co. B for several reasons - it felt like a better fit and I felt like I would be better supported early in my career. I start in 10 days and I could not be more thrilled and proud of myself.

The Takeaways

I feel as though my few months of job search have aged me several years. It was a lot of things to juggle at once, sometimes with little space in between. I'll condense a few of my meatiest takeaways here:

The job search is unpleasant.

I was really, really excited for the job search portion of my journey. However, from preparing the resume, being active on LinkedIn, writing cover letters, technical interviewing and even negotiating offers - it was anything but fun. I had a lot of anxiety each step of the way and a lot of depression, too. It was exhausting for my mental health and it took a lot out of me. It's incredibly easy to tie your self worth to your career and how the job search is playing out. Putting myself up there to perform and be judged for my strength as a candidate was scary and hard, especially coming in from a non-traditional background early in my career.

There were a lot of things that I didn't realize would hollow me out as much as they did. Hours spent on code challenges and interviews only for feedback-less rejection. Hundreds of applications with no response at all. Moving through many stages only to be told they were looking for someone with more experience. It is an immense amount of work and investment with no guarantees.

Hard work only pays off if it's the right work and you're fortunate.

I'll re-iterate a point I made earlier in the post - you can do a lot of work for a long time, but it might be the wrong work. Likewise, I'd like to say that you can even do it all right and still face rejection each step of the way. There are a lot of factors and unfortunately luck is one of them.

Find your voice and stick to it.

It's hard to figure out what works for you. In my experience, it's incredibly nuanced. I believe I had the most success once I created a consistent, unique personal narrative in all presentations of myself - the introduction email, my portfolio website, my posts on LinkedIn, my resume, my blogs, and so on. I think this is what it means to have a "personal brand" (though I've always been averse to that idea, for some reason).

There are a few reasons why I think this yielded success. First, it's rare that another applicant will have your nuanced voice that you've developed and presented. By nature, this will make you stand out. Another factor that I think plays a part in this is the efficiency of presenting yourself. This is important to optimize because if an interviewer or hiring manager can suss out who you are and what you’re about in very little time, it's much easier for them to give you attention and retain it. If they have to try to mentally put the pieces together to create a perception of you (which may or may not be accurate), it’s gonna be easier and faster for them to look the other way or simply forget. Please keep in mind that I am not a hiring manager, nor have I ever formally interviewed someone for a position - this is just what I assume.

Remember your well-being - you have worth and you deserve happiness.

You are so much more than your candidacy for a position. Please don't forget that!

If you are asked to spend more than 2 hours on a take home challenge, especially in the early stages, ask about being compensated. I made that mistake several times. Your time is worth it. Don't work for free - it's emotionally taxing and in my experience, I only ever received automated rejections with no feedback from companies who asked me for them.

Ghosting and automated rejections are inevitable. Follow up if you can - people do get busy, and especially with an ongoing pandemic, it's hard to keep track of everything. But, try not to take it personally in any case. There are so many factors in why you may not make the grade. Sometimes it's because someone performed better than you or had more experience. Sometimes it's a more arbitrary reason. All you can do is ask for feedback and try to keep going.

If you feel beat down, take a break. I had a very bad stretch of weeks after a lot of automated rejections, ghosting, and the dreaded "we are only looking for people with experience right now." (big oof to that one). Sometimes I had to take a day in my jammies with 8+ hours of television and internet feeling sorry for myself in a black hole of depression. It happens. If support is an option - from loved ones, therapy or other job seekers - try to reach out to them during these times. You can talk to me even if you never have before. It helps. In any case, try your best to get back up, and try not to feel bad for feeling bad - the job search is hard and your exhaustion is valid.

The Resources

Here are a few resources I used to help me

Kevin Naughton Jr.'s Algorithm Solutions

This was of massive help to me. I don't think I would have been able to perform nearly as well as I did without his videos. I studied them every day many times over. They truly helped me understand certain approaches and how to identify problem types.

Pramp

A free mock interviewing resource. It's bi-directional, so you interview someone as well. Practicing your communication skills in problem-solving is really important and this is a great tool for that.

TheCodingTrain - YouTube

I love, love, love this channel. A lot of the content surrounds creative coding, but Dan has some great algorithm-focused videos as well. He's enthusiastic and friendly and overall a joy to watch.

Women In Tech Slack Community

I joined this community a few months into my search and they were massively supportive. It's more of a social community than a professional networking one and I've gained some meaningful relationships there. For good measure, here is their statement on who is welcome to join:

You are welcome to join Women in Tech chat if you identify as a woman in any way that’s meaningful to you.

Dev.to

Good news - you're already here! I love this platform and community. It's a wonderful space to be in for any level of experience.

The End

Best of luck to anyone in the job search right now. I hope my story was in some way of aid to you.

With <3, happy coding!

Just a Little Bit

Summer Rizzo — Fri, 24 Jul 2020 18:41:29 +0000

There's a mighty high chance that most folks who have used a computer have heard of the "bit." It comes up a lot in quantizing - 8-bit music, 16-bit games, 32- or 64-bit processors, and so on. Those are all different objects that n-bit is a modifier of, but they do have one unifying base - and that's the computer.

So, what is a bit? What does it mean when something is 8, 16, 24, 32 or 64 "-bit"? And why are they all in multiples of 8?

I've always enjoyed the phrase "It's all a bunch of 1's and 0's" in reference to computing. Perhaps it's a little existentialist, but it's the meaning we apply to those 1's and 0's, right? Stay with me here. As a simple definition, a bit is a binary digit. Its value is either a 1 or a 0 and it's the smallest unit of measurement in computers. We group together bits in packs of 8. This is called a byte. There are other larger groupings you're probably familiar with - for instance, Kilobytes (1,024 bytes), Megabytes (1,024 KBs), Gigabytes (1,024 MBs) and so on. Those are often used to refer to the size, or the amount of information, that a file stores.

Although the concept of a binary digit is simple - it can only represent one of two things - they hold the potential to build some very complex systems. After all, they're the basic building block of computers! A byte can be used to store information such as a character or a number. Here's a simple example of binary representation of numbers:

0000 0001 // 1
0000 0010 // 2
0000 0011 // 3 (notice how it's a combination of 1 and 2? it's not a coincidence!)

The arithmetic looks a bit strange - but it works just like decimal numbers that we're used to seeing. The key difference is that it's in base-2 as opposed to base-10. Think about adding two numbers on paper - when one column sums to a number > 10, we "carry" the remainder over. Here, the limit is 2 instead of 10, which you can see at play above.

And those are just whole numbers! Binary can be used to represent all kinds of things - take a look into how floating point numbers are represented in binary. This is really useful for computer hardware, but obviously a little harder for us humans. There are other ways to represent information - like hexadecimal representation, for instance.

At this point, we understand that bits are a way to store information. If the computer you're reading this on is any indication, the complexity and potential of how that information is used scales to some pretty impressive depths. The nitty gritty of that is met with the same complexity - a lot of it deals with heavy topics such as computer architecture and electrical engineering. But, let's take a peak into how bit processing plays a part in the potential power of our computers.

At the beginning of this blog, I touched on how a computer's processing power can be referred to as n-bit. That refers to the register size in that computer's memory. Moreover, a computer's bit size refers to how many bits the CPU can access from memory at a time - a 16-bit computer can process 2 bytes at once, for instance. This is often referred to as the processor's word size. As we know from above, bits are used to store pieces of data. With that in mind, you might see why an 8-bit video game on NES looks and feels quite a bit different than a game on a 64-bit Nintendo Switch (made up of 8 64-bit processors in the CPU, along with a GPU).

Amount of bits matters a bit less than it did when they were more expensive. You might notice, for instance, that the "64" in N-64 refers to bits. Let's use ints as an example of how data scales with the word size of a processor. A byte can represent unique values from 0-255. 2 bytes, or 16-bits, can represent up to 65,535. And, for 64-bit - 18,446,744,073,709,551,616. That's a pretty big number! At this point, it's more pertinent to have more processors (multicore) than it is to have a bigger word size.

A bit may be simple, but just a little bit can contribute to a bunch of power.

Data Persistence / CMS options for personal blog?

Summer Rizzo — Fri, 10 Jul 2020 17:14:36 +0000

Hi!

I want to start a personal blogging site from scratch.

I'm using Svelte for the front-end. There needs to be some data persistence, however - I'll have "admin" rights to post my own blogs and persist them. Although a back-end isn't totally necessary, I would like to have one as an exercise.

Right now I think MongoDB would be a good choice (open to other options). Does anyone have any recommendations of headless CMS's or methods for a simple back-end? I don't want to use Rails, as I'm looking to learn something new. I would like to have routing - something like www.blog.com/post-title. There are a lot of options, so I'm open to suggestions and experience :) Here are some options I'm currently considering:

Laravel
Node/Express
Django
Lokijs
Sanity.io

Would love to have some folks weigh in!

It's my birthday!

Summer Rizzo — Fri, 03 Jul 2020 19:09:14 +0000

That's all! :)

Okay, maybe a lil more.

This time last year I was barely able to remember how to write a for loop, recalling from college courses I took long ago. Mid-July of 2019 I decided to make a switch into programming and started teaching myself JavaScript. And now I'm here! Programming! Building! Interviewing (fingers crossed ;P)! Writing about it all!

I'm gonna take today to be kind to myself and cherish how far I've come.

With <3, happy coding!

Programs! Processes! Threads!

Summer Rizzo — Thu, 02 Jul 2020 00:41:26 +0000

Our pal the computer is a real workhorse. It executes a lot of different instructions concurrently & in parallel, a lot of which is aided by how its operating system handles things. Let's take a second to understand a little bit about how some of moving parts fit together, specifically regarding programs, processes, and threads.

A program is a set of instructions.

A process is the execution of those instructions.

A thread is a single sequence execution of a process that is managed independently.

Let's map this to an analogy. Imagine a recipe for some very delicious bread.

The recipe itself is the program.

Preparing and baking the bread is the process.

An individual instance of baking the bread is a thread.

Now, consider this: a process can have multiple threads, just like two folks can independently work on different tasks to make the very delicious bread - one may be preparing the dough and the other might be pre-heating the oven. Maybe there are two loaves to be made, and they are both working on them independently at different stages. In any case, they are both executing from the same set instructions, perhaps with overlap.

This analogy and definition is very high-level, so let's drop it and move a little closer to the metal.

As mentioned earlier, programs are a sequence of instructions to be executed when the program actually runs. Sometimes this is referred to as a passive set of instructions. When the program is not currently running, it resides on disk space as opposed to in memory (RAM).

When the program starts running, it is loaded into memory and then begins one or more processes - an instance of the running program. This can range from background tasks - like a spell-checker - or an application such as a web browser or photo editor. It isn't always a one-to-one mapping between a program and a process. A program can have many processes just as a process can have many threads - and, if both are simple, they may only be one of each.

A process has its own maintained data structure - a process control block, or PCB. This contains information such as its process ID (PID), CPU registers, scheduling information, state, privileges, memory management and all that good stuff. The stack is a defined allocation of memory at compile time, whereas the heap is used for dynamic memory during execution. Each process independently has its own PCB. Information such as the counter and registers is used by the operating system to determine how everything is working together smoothly, both with other processes and independently. Here's a graphic representation of a multi-threaded process:

A thread exists within a process. It may be more accurate to say that is part of the process itself - a unit of its execution. A process very well may have multiple threads, but it can likewise only have one. In the case of a single threaded process, the thread and the process are one and the same. The process is the execution of a sequence of instruction, and the single thread is the only sequence being executed. So, what about multi-threaded processes? Well, in that case, each thread in an individual process will be executing their own sequence of instructions at (more or less) the same time.

How about memory? Well, as you may recall from above, each process has their own PCB that includes how its memory is managed. A thread generally has its own stack, but all threads within a process will share the memory heap in the PCB.

As the number of threads within a process grows, its complexity scales too. One must consider how threads are allocating a shared memory space, how their executions may affect each other at run time, each threads' lifecycle and so on. Concurrent programming can be difficult to write because it challenges our default linear style of thinking. But, of course, multi-threaded processes are at times necessary, or at least ideal for a process' execution. Since a program can also launch multiple processes, there's a lot to consider in terms of how one might want to architect their program. For instance, processes have their own PCB, meaning they have their own dynamic memory space. Threads share the dynamic memory space of the process they belong to, meaning sharing resources between two threads will be much faster than between two processes. But, it's all about trade-offs and need considerations. Individual memory spaces may be desirable to protect data from one another. This is also just one example of a trade-off to consider between the two, but it represents how operating systems and computer architecture play a part when designing software.

Sometimes it's easy to forget that there's a lot of moving parts abstracted away from us, tiny and otherwise. This is just a high-level overview of it all, but hopefully it provides a little insight for your curious minds!

Here are some good resources for further learning:

With <3, happy coding!

Matrices, What Are They Good For?

Summer Rizzo — Wed, 24 Jun 2020 17:21:41 +0000

The Matrix (1999) is a science fiction film that explores the idea of reality as we know it being a simulated experience.

Okay, now that that's out of the way, we can move onto the cream of the milk. What are matrices, why do we use them, and what do we use them for?

Many of our first introductions to matrices in programming have been related to algorithmic exercises, usually to test our comprehension of traversing nested data structures. And it may have stopped there. As such, sometimes when our only interaction to concepts is in an academic context, it can feel futile and pointlessly difficult to understand. So, I wanted to further explore their purpose, especially practically.

Most simply, a matrix is a way to represent data. The data is typically numerical in some way or another - it could be a set of numbers, symbols, or expressions. It's represented as a grid, or a 2D array, like this:



[ [ -1, -1, -1 ],
  [ -1,  9, -1 ],
  [ -1, -1, -1 ] ]

So, as you can see here, we have an array consisting of three arrays, each one being a row in the matrix, and each one consisting of three elements. A 3x3 grid, with 9 elements total. For good measure, let's go over some basics. If we wanted to access the top right element, we would access the first row (row = 0, using zero-indexing) and then the third and last element ( column = 2), or matrix[0][2] . If we wanted to access the center element - the 9 - we would access the second element in the second row, or matrix[1][1].

Essentially, a collection of some rows and some columns. What's so special about that? Well, as goes for any data structure, its power comes from how it's leveraged. Barring special types, matrices have fixed dimensions - so, while the data inside it may change, a matrix of size 3x3 like the one above will remain a 3x3 matrix. The containing data is also related in some way. Sure, if you are implementing the matrix yourself, you could remove a row or a column or throw in some random data. But it would kind of make it obsolete, right? Abstract as it may be, matrices are what they are because they are meant to serve a specific purpose - that's kind of the beauty of data structures in general.

One of the benefits of the matrix structure is its ability to apply linear transformations. I'm going to use the definition of a linear transformation found here:

"A linear transformation is a function from one vector space
to another that respects the underlying (linear) structure of each vector space"

There's a lot of math that surrounds this - specifically linear algebra - and I'll provide a few links for further reading below. That is, however, outside of the scope of this post. To keep it brief, operations that can be simplified to linear mapping are a perfect application for working with matrices. Consider this simple example:

Let's scale that idea up with some complexity and practicality. We have a digital image file, represented as pixels. Those pixels are represented in a grid - a matrix. We want all the pixels in the image to change by some amount - maybe we want the image to be brighter. Remember that pixels are often represented as the combination of red, blue, and green channels, each ranging form 0-255 in value. In the digital space, color is additive - so, the higher the value, the more saturated and brighter a color becomes. Brightness filters can be more complex, but for our sake, let's just say we want to increase each rgb value by 30. See where we're going, here? Each value needs the matrix needs to change by a fixed amount - 30. A linear mapping - a case of a matrix addition!

Matrices have a huge standing in graphics processing for cases like the above. It can be used for other operations, like image rotation, color filters, warping, scaling, convolution* and so on. They are not confined to 2D images - they are made just as useful in 3D graphics rendering as well. Though graphics are a major application of matrices, it doesn't stop there - they are, after all, a data structure, and as such can be useful in general transformation, analysis, and representation of data.

At the heart of it, the take-away is this: because of their structure, data that is represented in matrices can make otherwise complex operations very efficient. As Larry Hardesty notes in an MIT News article on matrix application:

"...that points to one of the reasons that matrices are so common in computer science: They allow computers to, in effect, do a lot of the computational heavy lifting in advance. Creating a matrix that yields useful computational results may be difficult, but performing matrix multiplication generally isn’t."

And that's the whipped cream and sprinkles. We humans do just as much Big Brain work as necessary and pass it onto the computer to do the real Beefy Barbarian work for us.

Of course, it's all about using the right tool for the job. You might not need to work with matrices very often, or you might make heavy use of them. When it's the latter, you'll sure be glad they exist.

Links:

Matrix Wiki
Linear Transformations - same link from my definition
Basic Matrix Operations + Resources Working with JS -- this is where I got the cover photo from!
3Blue1Brown Video Series: Essence of Linear Algebra - starts at first video in playlist
CodingTrain Video: Matrix Multiplication with 3D Graphics - s/out to Dan Shiffman!
MIT Article on Matrix Application
convolution* - Shameless self-plug for an image convolution example in p5.js that I ported over that uses a matrix!

With <3, happy coding!

My VSCode / C++ / OpenCV / MacOS Config!

Summer Rizzo — Tue, 16 Jun 2020 20:49:21 +0000

Hey folks!

If any of you have started configuring C++ in VSCode, you may know that it has a potential of being a pain in the ass. Configuring the use of other libraries only adds to that complexity!

I'm a total beginner with C/C++ so it was especially a challenge for me. It took a while before I found the set of configurations that worked with my environment, so I thought I would post mine.

Note: This is not a guide - I'm assuming you have all of the necessary parts installed. This is a good guide to start with the basic config for C/C++ with VSCode on a Mac.

Here's what I'm working with:

MacOS Catalinia 10.15.4
Homebrew
XCode
Clang
C++ 17
OpenCV 4
VSCode with C/C++ extensions installed

I used Homebrew to install OpenCV.

Here's my c_cpp_properties.json :

{
    "configurations": [
        {
            "name": "Mac",
            "includePath": [
                "${workspaceFolder}/**",
                "/usr/local/Cellar/opencv/4.3.0/include/opencv4/**",
                "/usr/local/Cellar/opencv/4.3.0/lib"
            ],
            "defines": [],
            "macFrameworkPath":  [
                "/Library/Developer/CommandLineTools/SDKs/MacOSX.sdk/System/Library/Frameworks"
              ],
            "compilerPath": "/usr/bin/clang",
            "cStandard": "c11",
            "cppStandard": "c++17",
            "intelliSenseMode": "clang-x64"
        }
    ],
    "version": 4
}

My tasks.json :

{
    "version": "2.0.0",
  "tasks": [
    {
      "type": "shell",
      "label": "clang++ build active file",
      "command": "/usr/bin/clang++",
      "args": [
        "-std=c++17",
        "-stdlib=libc++",
        "-g",
        "${workspaceFolder}/*.cpp",
        "-o",
        "${fileDirname}/${fileBasenameNoExtension}",
        "-I/usr/local/Cellar/opencv/4.3.0/include/opencv4/**",
        "-I/usr/local/Cellar/opencv/4.3.0/include/opencv4",
        "-L/usr/local/Cellar/opencv/4.3.0",
        "-lopencv_highgui",
        "-lopencv_core", 
        "-lopencv_imgcodecs", 
        "-lopencv_imgproc", 
        "-lopencv_photo"
      ],
      "options": {
        "cwd": "${workspaceFolder}"
      },
      "problemMatcher": ["$gcc"],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
    ]
}

As a note, everything after "-L/usr/local/Cellar/opencv/4.3.0", in args is specific to which OpenCV libraries I'm including.

And my launch.json :

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(lldb) Launch",
      "type": "cppdbg",
      "request": "launch",
      "program": "${workspaceFolder}/loopi.out",
      "args": [],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": false,
      "MIMode": "lldb"
    }
  ]
}

loopi is the name of my program.

I run the build task with Terminal > Run Build Task and in my terminal I run ./loopi with any other command line args needed (for instance, in my program takes a path to an image file - this is specific to your program and not the build task).

There ya go! Hope it saves someone some headaches and time.

I'm a beginner, so if anyone sees something uneccessary or awry, please do let me know!

With <3, happy coding!

Taking out the Trash: Garbage Collection in High-Level Languages

Summer Rizzo — Thu, 11 Jun 2020 01:44:50 +0000

Let's talk about trash. And no, I don't mean the code you just wrote. Only some of it.

Jokes aside, even if you haven't worked with low-level languages like C or Rust before, you may have heard of their need for manual memory management. This leaves the responsibility of memory allocation, deallocation, and reallocation in the hands of the programmer. Different types have a fixed amount of memory - for instance, an int is generally 4 bytes on a 32-bit system. In times when dynamic memory allocation is needed (like when you may not be sure of the memory needed at compile time, or it will be exceeded/change at run time), an appropriate amount of memory must be allocated beforehand. This might look something like this (in C):

// n being some variable that is determined at run time
// malloc is a function to allocate a given amount of memory
int *array = malloc(n * sizeof(int));

...

// after the array is no longer used, deallocate
free(array);

A naive example, but you get the idea. There's more to it than this - as you might imagine, memory allocation may get more complex as a program grows in complexity. There are different approaches to memory allocation as well, but I won't get into that now. I'll leave some resources for further reading at the end if you're interested.

There are a few possible problems that can occur in a program with manual memory management in regards to memory deallocation. It is more susceptible to memory leaks - a situation that occurs when memory isn't freed appropriately, thus causing memory to be used unnecessarily. On the other end, memory might be freed too quickly, preventing access to it later on resulting in a dangling pointer. One might attempt to free already freed memory again.

If you're used to programming in high-level languages, like Java, JavaScript or Python, you know that this is not something you have to consider as directly because they use automatic memory management (as a side note, memory allocation issues can still happen despite this). One of the features that contributes to this is garbage collection - the automatic deallocation & reallocation of memory.

For a brief introduction, garbage collection is a technique developed by John McCarthy in 1959 to more easily work with memory management in Lisp. Some low-level languages with manual memory management can make use of it through libraries, though it is not included in the spec. Different languages have different implementations of GC, but they all essentially perform the task of deallocating memory of objects that are no longer used and reallocating it elsewhere.

There are several different strategies to garbage collection. The most common of which is called tracing. Tracing revolves around deallocating memory by tracing which objects are "reachable" by at least one variable in the program. Within tracing, there are a few implementation and algorithm variances, but they are generally based on the "Mark & Sweep" idea. Mark & Sweep operates on two phases - "Mark" and "Sweep." It utilizes a linked-list as its data structure.

Upon initialization, an object is set to "unmarked" - false. In the mark phase, using a depth-first traversal approach, each reachable object's "marked" value is set to true. In the sweep phase, all unreachable objects - those whose "marked" value is false - are cleared from the memory heap. So, memory of an object that is no longer used is not freed immediately, rather it and all other unused objects are cleared at once in a given sweep phase. The GC may be triggered at a time when memory is beginning to run low. One disadvantage to this approach is that processes are generally halted while the GC is running. There have been innovations to this idea - such as tri-color marking - that help solve some of this and other disadvantages.

Another common strategy is reference counting. The idea behind reference counting is evocative of its name - a count of references to an object is initialized, incremented and decremented appropriately, and once the count reaches 0 the object is freed. Unlike tracing, objects are kept track of continuously and thus deallocated as soon as they are no longer used. There are several disadvantages - one of the most notable being its inability to reclaim memory when two objects reference each other, which can lead to a memory leak. Another is the overhead it introduces - for each object, memory must be allocate to keep track of its references.

There are a few other garbage collection methods, and even more nuanced implementations to each one mentioned above. As I mentioned earlier, different languages and compilers have different approaches to garbage collection, even though they may use the same basic technique. In any case, thanks to garbage collection, those of us using high-level languages or GC libraries don't have to worry as much about missing trash day (and our code smells less because of it!).

As promised, here are some links for further reading:

With <3, happy coding!

A Peek Under The Hood of How Modern JavaScript Runs

Summer Rizzo — Wed, 03 Jun 2020 21:36:54 +0000

You write some JavaScript code. You open the browser. You see what you wrote come to life. Seems like magic, right?

But, of course, we know magic doesn't truly exist - behind every framework, library, array method et cetera are the gears that turn the wheel. Let's take a look into the inner workings of how JavaScript is executed in modern browsers.

First, let's understand the difference between a compiled language and an interpreted one. In both cases, the goal is to take a human-readable language and translate it into machine language. Keep in mind that these are simplified, general distinctions. There are more nuanced differences, even within distinctions themselves. It's worth noting that a compiler can be written for any language.

Before being executed, a compiled language goes through a preliminary step - a "build" step. All of the code is translated at once and then it can be run on the target machine. For this reason, a compiled program can only be run on the machine it was compiled for - the translation for MacOS ≠ the one for Windows. Although this seems like a downside, compiled languages often result in a faster program and a lot of trivial bugs can be caught at compile time as opposed to run time. A few examples of compiled languages are Java, C, and C++.

Interpreted languages, on the other hand, are interpreted line-by-line at run time by an interpreter. This allows for a little more flexibility - as long as the machine has an interpreter for the language installed, it'll be able to run. As a downside, programs in interpreted languages can be less performant and more susceptible to bugs. A reason for the former is that in compiled languages, some re-used code (such as a function) only needs to be translated once whereas an interpreter will re-translate. Some examples of interpreted languages are Python, Ruby, and our old pal JavaScript.

JavaScript, our little web workhorse, uses a hybrid method in modern JS engines. I know what you may be thinking — didn't I just list it as an interpreted language? Well, it still is, but we programmers like our efficiency. As mentioned above, a compiler can be written for any language. In comes the JIT.

Please note that these explanations are very simplified. I highly recommend further reading if you want to learn more about what happens under the hood (sources listed below).

JIT stands for just-in-time compilation. In a similar vein as being interpreted line-by-line on the fly, the code is compiled as the program is running, rather than going through a full compilation step before being executed. To go further, as opposed to the all source code being translated & optimized into the target's machine code, JIT compilation goes through several steps to optimize the code as needed, resulting in programs that are fast to start and retain optimization as they run. Code is first simply interpreted and, during execution, "warm" segments that are run several times are sent to a base compiler and "hot" segments that are run a significant number of times are sent to an optimized compiler.

While that is the basic idea, the nitty gritty of JavaScript engines are more advance and utilize different concepts in different places. I'm going to use Chrome's V8 engine (post 5.9 with Ignition & Turbofan) as a baseline, but keep in mind that other browsers' engines have slight differences in implementation. For a brief introduction, V8 is an open-source JavaScript engine written in C++ that compiles JavaScript to optimized machine code.

First, the source JS code goes through a parsing step that creates an Abstract-Syntax-Tree (AST) representation of the code. The AST is then interpreted into unoptimized bytecode (Ignition's responsibility) and executed. This allows programs to get up and running quickly. The bytecode is then selectively optimized by Turbofan based on feedback from Ignition. The specifics of how the optimizations are made can be difficult to explain succinctly. However, as with all optimization, at the heart it aims to reduce unnecessary repeated actions and generally improve efficiency of tasks.

Gaining a deeper knowledge of JavaScript engines can lend to better program design and practices to optimize efficiency. For further reading, take a look at these resources:

Again, a lot of this explanation simplified for sake of brevity. Let me know if there are any concepts that could benefit from being more in-depth!

A Simple Way to Render Tabs/Navigation in React!

Summer Rizzo — Wed, 27 May 2020 19:32:58 +0000

Hi!

So, I've used this method in a few web apps so far and I've found it to be very straight-forward and easy to implement, esp. considering that no libraries are needed. Just core React concepts!

The general idea is to use an object with the keys pointing to whichever component you want to render. The key will be held in the parents' state.

Let's say you have a file structure that looks like this (emitting the React boilerplate structure and looking only at src):

src
│   app.jsx
│   index.html
│   index.js    
│
└─── components
   │   navbar.jsx
   │   about.jsx
   │   product.jsx
   │   contact.jsx

In this case, app.jsx will be in charge of rendering the overall structure of the page (the parent). It will look something like this (excluding imports and using React hooks):

const TABS = {
  'about': <About />,
  'product': <Product />,
  'contact': <Contact />
}

export default function App () {

  const [selectedTab, setSelectedTab] = useState('about');

  return(
    <div>
      <NavBar 
        setSelectedTab={setSelectedTab}
      />
      {/* this is the main content of the page */}
      {TABS[selectedTab]}
    </div>
  )
}

So, the selected tab in state will determine which component is rendered to the page. The setState function is passed down as a prop to the navigation bar, which will set the state appropriately when a user clicks on a tab.

Here's what NavBar might look like (simplified, of course):

export default function NavBar ({setSelectedTab}) {

  return(
    <div>
      <div onClick={() => setSelectedTab('about')}>About</div>
      <div onClick={() => setSelectedTab('product')}>Product</div>
      <div onClick={() => setSelectedTab('contact')}>Contact</div>
    </div>
  )
}

And that's pretty much all there is to it! Obviously, it may get more complicated depending on the complexity of your website, but the basic idea should remain the same.

With <3, happy coding!

Accessibility Tip: Toggling Focus on or off for Keyboard Accessibility

Summer Rizzo — Fri, 10 Apr 2020 18:55:31 +0000

Hey folks! I wanted to share a quick tip regarding keyboard control accessibility.

It goes without saying that as web developers, our websites and apps should be accessible to everyone! Sometimes, though, it can be an oversight to remove something like focus outlines that seems unattractive to those of us who don't require it. When I first started out, removing focus outlines on buttons was often the first thing I did. Of course, once I realized they were for keyboard accessibility, I left it on - but I recently found out about a solution that allows us to have our cake and eat it too :)

In your root JS file, add the following lines:

// Adds keyboard-accessible class to the <body> of the page in CSS
document.addEventListener('keydown', (e) => {
    if (e.key === 'Tab') {
        document.body.classList.add(styles.keyboardAccessible);
    }
});

// Removes class from body in CSS
document.addEventListener('mousedown', () => {
    document.body.classList.remove(styles.keyboardAccessible);
});

For some explanation, the former event listener reacts to someone pressing the "Tab" key, which activates the keyboard accessible class. Tab is the key that those who need keyboard accessibility use to navigate the page.

The second one turns it off. It uses "mouse down" as the event because it's an event that, obviously, has no relation to the keyboard - usually people who need keyboard accessibility need it because they are unable to easily use a mouse. And, in the case that someone needed to navigate with the keyboard again after turning it off, pressing Tab will reactivate the class.

Now, head on over to your root CSS File and add these rules:

body.keyboardAccessible *:focus {
    outline: 2px solid red; 
}

body:not(.keyboardAccessible) *:focus {
    outline: 0;
}

These are the classes that are activated/de-activated when pressing the Tab key or mouse respectively. The outline doesn't have to red, but it does need to have adequate contrast with the elements it is against (WCAG recommends a contrast ratio of at least 3.1 for graphical user interfaces).

Voila! As another benefit, checking to make sure this works appropriately after you implement it is a good way to see how someone using keyboard controls navigates through your page. It may help when considering an accessible layout for your site or web app.

With <3, happy coding!

Announcing my portfolio site!

Summer Rizzo — Wed, 08 Apr 2020 20:16:00 +0000

UPDATE: She's mobile-friendly now, folks! :)

Hello everyone!

I am at the beginning of my job search, which inspired the need for a portfolio website. As I've been learning web development, I've always day-dreamed about what my portfolio may look like and have been eager to make it throughout my process.

You can visit it live here.

A few weeks back I had the idea to make the layout inspired by the Fibonacci spiral. It is both an ode to both my first love of photography and my current love of programming. I first learned of the "golden ratio" while studying composition in photography, and writing a program to compute the Fibonacci sequence was coincidentally one of the first exercises I did when I first began coding.

Building this website was a wonderful learning experience. For the first time, I:

built a React toolchain from scratch (and in turn wrote my own Webpack config)
used a CSS Grid layout
used CSS Modules
created an SVG animation
used a transition library
used relative units for font, image, and icon sizes
made a set of custom icons
deployed via Travis CI

... and it feels really good! I am so proud to have something out there that feels like it comes purely from me.

~~The next step is making it mobile-friendly, which I will also be doing for the first time.~~ [see update]

And, of course, I am open to suggestions if you notice anything awry.

Wish me luck! With <3, happy coding!