Christian Shadis

As I transition into the final semester of my undergraduate degree, I plan to learn Javascript. In my Software Construction, Design, and Architecture class, we briefly explored and edited some frontend code in Node.js and Vue.js. Using my prior knowledge in Java, I was able to understand how most of the code was functioning. As Javascript continues to rise in popularity, it would be a valuable language to add to my skillset. One of the fundamental aspects of learning Javascript, or so it seems, is to understand the Document Object Model (DOM). Having used his book HTML & CSS: Design and Build Web Sites to supplement my knowledge in web design, I decided to consult the fifth chapter of Jon Duckett’s Javascript and JQuery: Interactive Front-End Web Development to learn more about the DOM.

Duckett first specifies the DOM as a set of rules, separate from the HTML and CSS of the website, which “specifies how browsers should create a model of an HTML page and how JavaScript can access and update the contents of a web page while it is in the browser window” (Duckett 184). In other words, the DOM acts analogously to an API in that it facilitates or enables real-time communication between JavaScript code and the HTML page. Duckett proceeds to describe the DOM tree, the benefits of caching DOM queries, and how to traverse the DOM tree. He also described how to access, update, add, and delete HTML content from the page using the DOM. The chapter included a bit of bonus information such as cross-site scripting attack prevention and how to view the DOM in each of the major web browsers.

Reading this chapter was useful in contextualizing how the different parts of a webpage interact with each other. In addition to learning the fundamentals of the DOM, I also gained experience reading JavaScript code, which is a great way to learn how a language works. What stood out to me most about the material was the parallels between the DOM nodes and the LinkedList data structure. Having coded an implementation of the data structure in a previous course, it was intuitive to see how traversal of the DOM tree worked.

I plan to continue to learn JavaScript, and plan to read the remainder of the book. Web design is becoming more ubiquitous by the day, and thus a more valuable tool for developers to have. I would highly recommend this book and others by Jon Duckett to developers – the design is pleasing, he provides sample code, and offers excellent simplistic explanations.

Duckett, J. (2014). Document Object Model. In JavaScript & JQuery: Interactive Front-end web development (pp. 183–242). essay, John Wiley & Sons.

From the blog CS@Worcester – Christian Shadis' Blog by ctshadis and used with permission of the author. All other rights reserved by the author.

Rest API are a common method for integrating applications in their services to provide more reliability and to be flexible where possible. I chose to use stackoverflow.blog as my blog because they are filled with information in regards to many programming languages, AI, databases, especially Rest Api and etc. The blogs also discuss and provide certain authors that give explained details on the processes and focus on implementing, as well as common problems that may erupt with certain solutions that can lead an aid to a professional career in software development world. As this website have given me a clearer perspective while in my Software Construction architecture class along the way working on our Food pantry project.

As for Rest Api, they are a common web service used in today’s technology. Allowing the client (person making the request) to communicate with the servers (receiving the client requests) with is the Rest Api that is connected to a database. To keep in mind, when creating an API, we use always separate the client from the server to made to interact on one way because due to fact that clients can make requests but not responses, while server can make response but not requests. We use HTTP methods as an action for the client wants to make. GET Method allows the clients to request the information from the backend. POST Method is creating or listing the information. PUT Method is editing the information. DELETE Method allows the deletion of information.

JSON (JavaScript Object Notation) is a basic format to help the programmer to easily read write out code for the computer to understand and generate the output and cache the responses. API endpoints are the end of the communication, which utilizes the services or the response. For example, when making a request on the API rom the browser or an application, the response will then be received that reaching that point will be the endpoint. 

After learning about REST API in my CS-343 class and working along the course. I start to begin to gain more confidence and gain more insight on how the process works. And designing the API which gave me complications for the backend and frontend as well. Realizing even the slightest misspelled command or wrong path can leave you clueless on fixing the problem but understood why the situation erupted. This material could’ve been useful for my database course I have taken previously to implement the databases on the server to be integrated along with providing the appropriate security from the client side with restrictions, while the backend is able to store, modify if allowed. 

From the blog cs@worcester – Dahwal Dev by Dahwal Charles and used with permission of the author. All other rights reserved by the author.

Docker is a program used to package applications and their dependencies into bundles that can run on any computer. A running instance of the bundle is a container. Docker containers help developers build software by isolating applications, sandboxing projects, and guaranteeing running software. To have a docker container, one needs to write a Dockerfile, build it into an image, and run the image. When I was learning the process, my instructor explained the process and terms by using only an analogy. He compared them to the process of how source files became executables, and then running processes.  Because analogies only help understand concepts (not define them), the goal of this post is to define Dockerfiles, images, and containers as well as their relationships. To achieve the goal, I will be using information from the article, “Differences Between Docker Images and Containers,” written by Eugen Baeldong, an author who has written about software development extensively. His article differentiates Docker images from containers.

The Dockerfile is a text file that contains instructions on how to find, install, and configure an application and its dependencies. In the same way an embryo is a baby at the first stage of development, a Dockerfile is a container at the first stage of development. Some commands that can be used to create instructions are RUN and COPY. RUN is used to install a package or application and COPY is used to copy files and directories from one location to another. With the commands, instructions are created. The set of instructions tell a computer how to find and install the applications and its dependencies.

When a computer executes the instructions in a Dockerfile, an image is built. According to Baeldong, an image is a template for creating the environment one wants. In other words, it is a snapshot of a system one wants. Returning to the baby analogy, an image is a container at the second stage of development in the same way a fetus is a baby at the second stage of development.  I imagine an image as one’s desktop environment. The icons in the environment represent the application and its dependencies in a dormant state. The application is not running yet in the same way desktop applications do not run until one double-clicks their icons.

When a computer runs an image, a container is created. A container is an environment where an application and its dependencies are running. The application in the container is independent from the applications on the computer. In other words, the contents inside a container and one’s computer are unaffected by one another. I imagine it as a computer inside a computer; however, the second computer will not have a graphical interface because it is not necessary for an application to run.

https://www.baeldung.com/ops/docker-images-vs-containers

From the blog CS@WORCESTER – Andy Truong's Blog by atruong1 and used with permission of the author. All other rights reserved by the author.

Since we’ve been using JavaScript for the past several weeks in class and in homework, I thought it would be beneficial to help run through some elements of JavaScript I found weird or difficult at first. I’ve noticed some people have a harder time understanding JavaScript’s syntax or how its variables work, so I wanted to make this as a sort of reference.

Types

JavaScript contains primitive and non-primitive types. A variable can be declared with “var”, “let”, or “const”, more on const later. The main primitive types are¹:

• Boolean: true, false
• Null: null
• Undefined
• Number: 72, -174.21
• String: “Hello, ”, ‘world’

For an object type, objects are very loose and can for the most part be defined with relative ease. 

Let’s take a simple object, named “car”.

This object has three properties, wheels, year, and color. When declaring or assigning properties, the syntax shifts from the typical use of “var num =”, to “num: ”. These properties in an object are pairs: “wheels” and “4” are a pair, specifically a key-value pair as well as an object. This means that there is more than one way to access an object’s properties. 

The second one looks suspiciously similar to a map, specifically one in C++. Objects may be iterated through using a for-loop directly.

Functions

Functions may be defined in a few ways. If inside of an object, the function would be defined as:

Else, it may be defined as the following:

The bottom function declaration is known as arrow notation. A function with arrow notation is not bound to an inherited constructor or the keyword “this”, and its usage with scopes may be troublesome. Its parentheses may be dropped if there does not exist any parameters, such as “getProps => {}”².

JSDoc

JSDoc is a markup language used to comment JavaScript code, and is similar to JSDoc in many ways. JSDoc may be created by typing “/**”, then pressing enter upon this pop up:

JSDoc is, in my opinion, very useful in declaring classes, functions, objects, types, or declaring types. This is especially important with JavaScript, since types are handled dynamically.

JSDocs can use the following my pressing “@” inside of the comment, revealing a large list of descriptors, with users being able to make any and anytime³:

Upon creating a simple JSDoc annotation:

Hovering over the object “car” will read:

For our function getValue:

This is rendered as: 

Hopefully, this post can be helpful. JavaScript was odd for me when I first started, with these topics being some of the things that took me a while to get used to. The sources contain a wealth of information that I have and will continue to refer to and learn from, and hopefully they can help you too.

Links:

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures (Types)
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions (Arrow Functions)
3. https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html (JSDoc)

From the blog CS@Worcester – Chris's CS Blog by Chris and used with permission of the author. All other rights reserved by the author.

https://www.toptal.com/css/why-you-need-a-css-developer

Keeping in line with my front-end blog posts, I wanted to read another blog post on front-end stuff so I decided to pick this blog post from toptal.com on CSS developers. I also decided to choose this blog post because I think CSS is the first programming language I was aware of, I only knew that it was part of web design but I was always confused looking at it’s syntax. In this blog post from Silvestar Bistrović, he runs over what CSS developers do and why we need one.

He introduces the reader with CSS developers and what they are. They’re web professionals whose primary responsibility is to deliver a polished and styled product to the visitor’s browser. Practically every website uses CSS, but CSS is often not considered an “equal” in the modern web development stack. This has led to CSS being taken for granted, sometimes even overlooked. He then goes on to explain why CSS developers are a necessary good and to have a dedicated CSS developer instead of someone who isn’t.

The blog post is sectioned into 3 sections: What Do CSS Developers Do, Why Do You Need a CSS Developer, and Wrapping Up with every section having subsections explaining further on the section. What Do CSS Developers Do covers what they do, CSS tools, techniques, and principles, CSS, the fact Javascript is everywhere, and that writing tidy HTML always matters. Why Do You Need a CSS Developer covers CSS coding standards, CSS design implementation, organizing your CSS code, CSS code in production, and what CSS developers can do for you. Wrapping Up is self explanatory, it’s a conclusion.

As mentioned earlier, CSS was the first programming language I stumbled upon. I stumbled upon it as a kid playing online games and trying to customize my profiles for sites. I didn’t know what it was at the time and just took CSS code from others and used that to format my profile for those online games. It wasn’t until now that I would stumble upon it again in class during In-class activity 15-16 and realize how important it actually is. CSS is one of the forefronts of frontend design and that was something I didn’t know until now because I haven’t dipped my toes in web dev stuff yet. At first I thought front-end web developers were supposed to be jack of all trades for front-end development but after reading this I think having someone who specializes in CSS is essential to your team and as the author says, “do you want to leave your product in the hands of a specialized professional that could polish it to perfection, or would you settle for good enough?”

From the blog CS@Worcester – Brendan Lai by Brendan Lai and used with permission of the author. All other rights reserved by the author.