Some Fullstack questions

A lot of tech job applications require you to pass a technical assessment at some stage during the application process, but not as much give you resources to help you prepare for the tests (or just for building upon your knowledge). I stumbled upon onramp through Flatiron School’s employer partnerships (a really helpful resource for alums) but saw something quite different than I was used to/expected — the opportunity to “train” before “applying” for the job opening.

source: therealtimereport

Being a curious learner , I jumped at the opportunity to brush up on my skills and even learn some more (esp. Go and AWS). It definitely took some time and conscious efforts on my part, but I believe it was well worth it.

Here I will answer some reflection questions asked on onramp’s “train before applying” for fullstack applications.

React

1. What is a Single Page Application (SPA)? A single page application is a web application that provides a seamless user experience by dynamically rewriting contents on the same page as opposed to loading new pages
2. What benefits does using React provide over using HTML, CSS, and vanilla JavaScript? There are many benefits of using React, some of them include: React automatically updates the DOM by re-rendering what’s necessary (of course based on the events you specify); React components make it easy to build complex applications in a modular way (i.e it gives us the ability to delegate a task to a component and put them together to achieve a group purpose, formally known as separation of concerns); React’s JSX helps us write less code than with Vanilla JS
3. What are some differences between React, Angular, and Vue? First difference — React is more popular! lol; Angular is a JS MVC framework that’s based on TypeScript, Vue is a standalone framework that separates concerns by keeping HTML, CSS, and JS distinct, and React is a lightweight JS UI library that can use JSX (HTML + JS with XML syntax) to mutate state in a virtual DOM and cause changes to the UI
4. Can you use React and jQuery in the same project? No… ok here’s why: React likes updating the VDOM its way — whenever the state/props change. Forced re-renders are generally discouraged in React, and using jquery to change the DOM is considered “un-react-ly”
5. What is the virtual DOM? AcCording to React docs, the VDOM is an ideal/virtual representation of the UI that is synced with the real dom. Simply put, the virtual DOM is React’s way of deciding what to actually update; its where React decides what to update on the real DOM
6. What are the differences between functional components and class components? Personally, I think functional components are more easy to write and use since they are like regular JS functions. That said, functional functions can use hooks and return react elements while class components can use lifecycle methods and render React elements

TypeScript

1. What is the difference between static typing and dynamic typing? Static typing is where you have to explicitly declare what type a variable can hold while dynamic typing is where the type is implicitly declared from the value of the variable; also, statically typed languages check to make sure that the variables hold the right type of values before compiling (aka compile-time) while dynamically typed languages type check at runtime
2. What are the benefits of using TypeScript? There are a handful! First off, Typescript’s static typing makes code easier to debug. In addition to that, it compiles code (and can point out compilation errors) and supports Object Oriented Programming. Nice IDE support as well.
3. What are the downsides to using TypeScript? ooo Me! First downside: more typing (as in literally) 😄. Typescript’s type-checking requires us to declare some types and model interfaces, which results in more typing for the programmer. Also, the type-checking only goes so far: since it’s compiled into JS, the error protection is only valid till it’s compiled; if any error slips through the compiler... welcome back to JS 😄; also, while it’s built on JS, there are some TS nuances that needs to be learnt, and that requires a conscious effort from the part of the developers that want to use it effectively
4. How do JavaScript and TypeScript differ? TS is compiled (into JS) while JS is interpreted; JS is dynamically typed while TS is statically typed, which makes TS support type-checking while JS doesn’t; TS is also known to be more OOP oriented than JS (a scripting language by original design)

Version Control

1. Does it make sense to use Git when you are programming by yourself? Why or why not? When you backup your system, it creates a snapshot of the current state of your system — what apps are installed, what settings were in place, etc — and when you “restore settings” (especially when your device has some issues), you are reverting to a previous working state of your device. Just so, it makes sense to use version control even when programming by oneself, mainly because of the possibility of reverting back to a previous working state, which might be helpful when we need to backtrack a little in our project. We also have the opportunity to explore without fear of breaking working code.
2. What are the dangers of not using something like Git when you develop software with a team? Version Control helps us mitigate lots of issues, some of which I’ll discuss. First issue is collaboration: it becomes really hard for people to work on different parts of an app with synced updates and without clashes if there isn’t a form of version controlling to manage their workflow. Also, creating new features would become risky for fear of breaking working code if there isn’t a valid way to revert back to a working state.
   There also won’t be a history for revisions and debugging, as well as limited CI/CD, among other costs of not using version control.

HTML & CSS

1. What did you like about working with HTML and CSS? What did you find confusing? Personally, I like the fact that I can make as many mistakes as I can, especially when I started learning how to code, without it yelling at me. Ironically, that’s also the thing I find confusing: when I mix things up, rather than give me a stack trace to follow, it gives me semantic errors, which means I have to manually go through the file to detect where something might have gone wrong.
2. What are some best practices for writing quality CSS? Use the right selectors! Learn where to use which selector, for example, where to use an id (#) as opposed to a classname (.), and where you need to concatenate classnames vs using !important. Other tips include keeping things consistent, commenting your code, formatting readable css, keeping styles in logical sections and breaking up large stylesheets into smaller ones
3. What is the order of priority for class and id selectors in CSS? 🧐 hmmm… sounds deja vu-i. 💡h yeah! I just talked about it 😄. Many elements can belong to a class, but an element has a unique id. That being said, if an element should have some unique feature, the id is used to apply those settings, therefore it takes preference over class settings

Javascript

1. If JavaScript is your first language, what were the biggest challenges in starting? JS isn’t my first language, python is. Anyways, jumping into JS right after learning Ruby, where methods only see what is passed into them, I got quite confused with JS’s lexical scoping and closures at first, but later got the eurek💡!
2. What features of JavaScript are most similar to a language you already know? What features are different? Apart from the basics across all languages — conditionals, data types, loops, etc — JS’s this keyword is a nice familiarity with Ruby’s self keyword. In fact, my previous knowledge of Ruby’s self helped me gain a better understanding of JS’s this. A difference between JS and Ruby, apart from the scoping mentioned above, is that JS is primarily a scripting language while ruby is an object-oriented language
3. What do you like about building applications with JavaScript, and what do you find frustrating or confusing? Right off the bat, JS makes our apps alive! To create a truly engaging user experience where the user can change make changes and see live results, we’ll need to add JS to our site. It also has a lot of great frameworks like Angular and libraries like React that work really well in providing a simplified yet powerful user interface. Apart from those, the consumer base is as huge as it gets, and you can most likely find a post on an issue within a couple searches. One of my qualms about JS is its Client-Side Security. As someone with cybersecurity background, I worry a lot about the extent of damage that can be done from an experienced hacker armed with devtools. Changing the values of some cookies/just clearing them can give you unauthorized access to resources. No wonder a lot of hacking incidents happen online.
4. My question: What’s the difference between types and interface in TS? A basic difference is that types are used to define specific types or values that a variable can have while Interfaces are used to describe data shapes, e.g type LockStatus = "locked" | "unlocked"; means an element of type LockStatus can only contain the values “locked” or “unlocked” and any other value would yield an error, while interface LockStatus { status: string, locked:boolean } defines an element belonging to LockStatus as having two elements that contain a string and a boolean value respectively.
5. If TypeScript is your first language, what were the biggest challenges in starting? If Typescript were my first language, having to learn another language, JS, to fully understand the current one would be quite challenging. I would have also spent some time understanding the nuances, e.g interfaces vs types, and how structural type checking would handle different valid variables for different types.
6. What features of TypeScript are most similar to a language you already know? What features are different? Since typescript is built on regular JS, I didn’t even feel like I was programming in a different language when practicing some coding challenges on checkio. The main difference between JS and TS is the type checking.

Essays

In 300 words or less, what is the most interesting or surprising thing you learned about the way you learn as you studied software engineering? How do you think this new self-knowledge will help you in your career?

January 15, 2021, and I was looking for video tutorials explaining how to map through an array in Ruby because I didn’t want to go through the “boring, long” docs. Fast forward to January 27th, just a week after, and I was browsing through the ruby docs like I wrote it. That transformation is something I always look forward to in a new learning experience: me being able to overcome my ignorance and fear of the unknown and interact with it comfortably.

Whether it’s learning a new language or cooking a new meal, seeing myself perform a task I once couldn’t do is a delight for me. To be honest, it makes me feel like I have superpowers! This is not to say I don’t sometimes find myself seeking an alternative to learning something new, especially if the new skill requires a huge upfront commitment, but just like my experience described above, I found that with just a little push and perseverance, coupled with my love of learning, I can scale heights never before even thought of.

This new self-knowledge has been helpful when I come across new technologies: rather than get intimidated by what I don’t know, I can take steps towards getting familiar with it so I understand it better the next time I encounter it.

Read this article about GraphQL and REST. What did you know about it before? How could you have used it/have you used it before?

To be honest, I didn’t know a lot about GraphQL before reading this topic; it is a very good intro to GraphQL though and has stirred my interest in learning more about it.

I think GraphQL would work really well for my capstone project — SCart, an eCommerce platform that allows users to shop multiple stores all from one tab. For example, to get all stores that have a specific item with my current RESTful (Rails) setup, I had my items controller return the associated stores (and their details) when a specific item is looked up. So I had my inventory_item/:id controller setup with:

options = {
  include: {
    stores: {
      except: [:created_at, :updated_at]
    }
  },
  except: [:created_at, :updated_at]
}

to return an item structured this way:

inventory_item: {
    ...,
    stores: [
        0: {name: shop1},
        ....
   ]
}

This required a lot of nesting and traversing which, thankfully, the serializer made easier, but it required effort and time that could have been spent elsewhere in the app if I had used GraphQL.

To summarize, I had numerous endpoints and custom routes that would be unnecessary if I had used GraphQL, and my next step in learning GraphQL would be to go through the docs to learn more about how to set it up, especially how to integrate into a project that’s already setup with REST.

Thanks for reading this far, and I hope this was helpful for brushing up your skills or helping you prepare for your next coding interview!