Category Archives: CS-343

Blog Post # 7: Review of software components used in our CS-343 Software Architecture class

While attempting to brush up on knowledge on Frontend Web development presented to me in my Software Architecture class at WSU, I found a YouTube video [1] that contained a stack of free software tools and apps that fit closely with the class architecture.

Our class has shown usage of the following tools to give us a real-world cutting-edge view of what is being used by software engineers primarily geared towards enterprise-level web application development. They are all Open-Source and free to use for all.

1. Docker – A containerization model being used to run software components in virtualized containers. It is more efficient and easier to use than either virtualization environments like VMWare, VirtualBox, as well as Microsoft’s Hyper-V, which will be a contender in the future, but is “too much tool” for most current business needs.

2. Visual Studio Code – An integrated development environment (IDE), which is free, lightweight, surprisingly usable and extensible. Its limitations imposed by its general size are more than made up for by the vast amount of 3rd party extension libraries that exist for it.

3. Operating Systems: Another huge advantage of this stack of products is that most if not all of them are available in some form on Windows 10/11, macOS, and many forms of Linux.

4. Design Tools: PlantUML – Fantastic in unison with Swagger Preview to produce useful design documents.

5. For Backend Development: Used by servers in association with databases to store and secure data.

  • Node.js – The most commonly used open-source backend JavaScript Framework.
  • MongoDB – A NOSQL database that uses JSON information embedded in non-relational data relationships.
  • Express – A really handy JavaScript Framework Extension.
  • Swagger Preview – A tool used to show JSON or YAML file formats in a mock UI format. It allowed us to test all of our JSON/REST database call from our back-end projects.  

6. For Frontend Development: Used to write websites (or mobile applications) to interact with users.

  • Vue.js – A JavaScript framework used to build UI’s and SPA’s (Single Page Applications). IMHO, it is at least as useful as Express is on the backend.
  • AXIOS: Integration of this package helps with controlling asynchronous HTTP requests to REST endpoints.
  • JavaScript: Of course, but with the help of Vue and Axios, not much actual barebones JS was really needed.

7. Source Code and CI/CD:

  • GIT – I have used git on a number of projects in the past and have had trouble with it at times because I had been used to more traditional non-distributed source control systems. The instruction in this class has shown me how amazing it really is, and it will remain my highest regarded VSC system.  
  • GITLAB:  – I have used GitHub in the past and am now more of a fan of GitLab. 3 cheers for the sole developers. 3 cheers for Dmitriy Zaporozhets and Valery Sizov. It is a web-based DevOps lifecycle tool supporting GIT, issue-tracking, and a continuous integration and deployment chain.

A few helpful hints I picked up from the YouTube video are:

  1. GUID Generator: UUIDV4 is a tool that can be downloaded using NPM (a Node Package Manager) which will generate Globally Unique ID’s for use with our application. [2]
  2. POSTMAN – This is a great tool for testing your API’s [3]
  3. JSON Formatter – Really useful when looking at complex JSON strings. It is usable in most modern browsers. [4]

As a final note, I think that although there are many other tools out there that could have been used to build the instructions for this class, and that software tends to live in an environment of competition from other companies, that this stack wins in my mind, because it is fully open source, completely cross-platform, and very leading-edge. Vue, as an example, would not have been pushed into the tool it is if it were not for competition from REACT and ANGULAR. Competition brings us all forward, but open source has the additional benefit of being altruistic.

References:

1. Building a REST API with NODE JS and Express

2. https://www.uuidgenerator.net/version4

3. https://www.postman.com/product/rest-client/

4. https://jsonformatter.org/

From the blog cs@worcester – (Twinstar Blogland) by Joe Barry and used with permission of the author. All other rights reserved by the author.

Tips on easing the learning process of JavaScript

After a long 2 and a half years of learning to code, there are many challenges I have come across that halted my process. Here I am going to sum some of the issues I may have come across during my journey. And some tips I have found to be incredibly useful to change the tides and direction of how I learn.  

                First things first, understand your distractions. Why you are distracted, and how to make “learning to code” the distraction for you. What I mean is, picture how you use your social media. You may think “I am just going to check Facebook for a few minutes before I get to coding”. Next thing you know, you are on Facebook for three hours. Where did the time go? Somehow, someway you just got sucked into what you decided to put in front of yourself. What if, you decided instead “I am going to just code for 10 minutes then play around on Facebook.”. Next thing you know, you got sucked into coding for hours instead of spending all your time on social media. It will always be better to leave yourself no time to look at social media than having no time to practice coding.

This is how you should structure all your priorities. Don’t treat yourself first in hopes that this will give you the motivation to start getting your responsibilities out of the way. There is a limited time in every single day. We all know, the longer the day goes on, the more tired and slow you become. Utilize your energy correctly. You should be treating yourself when you are already burnt out. That way when all your energy is dispensed, you are relaxing readying yourself to recharge rather than forcing yourself to continue working when you are exhausted. This will help with sleep issues too. Using your brain at maximum capacity is going to ultimately make it harder for you to fall asleep. Utilize your time correctly during the day.

Now your coding, great job! Only problem is, you may find yourself being over-confident now. Just because you have solved something and moved along with almost no hiccups, doesn’t mean you have that solidified it in your knowledge. Learning something quickly is the worst thing that can happen. This sets you up to forget very quickly. The most memorable thing for a person is when they struggled hard, overcame their adversity, and accomplished their goal. You forget a cakewalk the minute it’s over. Limit the number of things you are learning at one time. And practice it in code. That way, you won’t forget. The key point is to make your work memorable for the next time it comes up.

I found this site, which is somewhat a journal. That gives tips on how to learn JavaScript Faster. It touches on a lot of the things I just described.

Link: https://www.sitepoint.com/mind-tricks-to-learn-javascript-faster/

From the blog CS-WSU – Andrew Sychtysz Software Developer by Andrew Sychtysz and used with permission of the author. All other rights reserved by the author.

Importance of JavaScript in Web Development

JavaScript has become the most popular programming language for web development in the last two decades. The fact that JavaScript is used by more than 94 percent of all websites, according to recent studies, demonstrates the importance of JavaScript as a web development language. Since part of our course is to work with frontend and backend, we work with a mix of JavaScript, HTML, and CSS. This blog will focus only on the importance of JavaScript for developers to build a frontend.
What is JavaScript?
JavaScript is a client-side programming language that enables web developers to create dynamic and interactive websites by allowing them to integrate bespoke client-side scripts. Developers can also develop server-side code in JavaScript using cross-platform runtime engines like Node.js. Combining JavaScript, HTML5, and CSS3 allows developers to create web pages that function across multiple browsers, platforms, and devices as already mentioned in the previous paragraph.

Many JavaScript frameworks, such as AngularJS, ReactJS, and NodeJS, are available on the web. Developers utilize JavaScript extensively to construct diverse web applications and add interactive elements to them. JavaScript is supported by the majority of online browsers, allowing dynamic content to be displayed beautifully on websites. WordPress is the most popular content management system (CMS) today, and JavaScript is used extensively in its development. A web developer who is well-versed in JavaScript may create a variety of applications that are both stable and scalable. If you want to be a professional WordPress developer, you’ll need to understand JavaScript so you can make informed decisions right away.

The role of a front-end web developer is to write the code and mark-up that a web browser renders when you visit a website 
When it comes to front-end development, there are three key components: HTML, CSS, and JavaScript. Each is necessary for a webpage to function properly. HTML is responsible for the site’s structure and content, CSS is responsible for its aesthetics, and JavaScript is responsible for its interaction. When it comes to developing websites, they all operate together, but the focus of this blog post is on JavaScript and how it’s employed.
JavaScript is a versatile programming language that may be used to do a variety of tasks on a website. For starters, it is responsible for the site’s overall interactivity. Image sliders, pop-ups, site navigation mega menus, form validations, tabs, accordions, and other complex UI components are all feasible with JavaScript.

It can also perform more subtle operations. For example, you might click a checkbox on a form, and a pop-up appears asking you another question, depending on which checkbox you picked. It adds capabilities to the site that would otherwise be impossible to provide with just HTML and CSS. JavaScript enables websites to respond to user action and dynamically update their content without requiring a page reload.
For a front-end web developer, JavaScript is an essential tool. Websites would not have evolved into the dynamic web apps that they are today without it.

From the blog CS@Worcester – Site Title by proctech21 and used with permission of the author. All other rights reserved by the author.

Rest API

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: The Differences Between a Dockerfile, Image, and Container

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.

A Very Small Introduction to JavaScript

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 are1:

  • 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 => {}”2.

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 anytime3:

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.

DRY PRINCIPLES

The DRY meaning “Don’t repeat yourself” principle is a best practice in software development that recommends software engineers to do something once, and only once. The concept, which is often credited to Andrew Hunt and David Thomas, authors of “The Pragmatic Programmer”, is the tongue-in-cheek opposite of the WET principle, which stands for “write everything twice”.

According to the DRY principle, every discrete chunk of knowledge should have one, unambiguous, authoritative within a system. The goal of the DRY principles is to lower technical best by eliminating redundancies in process and logic whenever possible.

Redundancies in logic

To prevent redundancies in logic (code), followers of the DRY principle use abstraction to minimize repetition. Abstraction is the process of removing characteristics until only the most essential characteristics remain.

Redundancies in process

To prevent redundancies in processes (actions required to achieve a result), followers of the DRY principle seek to ensure that there is only one way to complete a particular process. Automating the steps wherever possible also reduces redundancy, as well as the number of actions required to complete a task.

An important goal of the DRY principle is to improve the maintainability of code during all phases of its lifecycle. When the DRY principle is followed, for example, a software developer should be able to change code in one place and have the change automatically applied to every instance of the code in question.

As programmers, we collect, organize, maintain, and harness knowledge. We document knowledge in specifications, we make it come alive in running code, and we use it to provide the checks needed during testing.

Violations of DRY

“We enjoy typing” (or, “Wasting everyone’s time”.): “We enjoy typing”, means writing the same code or logic again and again. It will be difficult to manage the code and if the logic changes, then we have to make changes in all the places where we have written the code, thereby wasting everyone’s time.

How to Avoid DRY

To avoid violating the DRY principle, divide your system into pieces. Divide your code and logic into smaller reusable units and use that code by calling it where you want. Don’t write lengthy methods, but divide logic and try to use the existing piece in your method.

DRY Benefits

Less code is good: It saves time and effort, is easy to maintain, and also reduces the chances of bugs. One good example of the DRY principle is the helper class in enterprise libraries, in which every piece of code is unique in the libraries and helper classes. I chose this topic because as a programmer, it is always important to know why design principles are useful for us, what and how to implement them in our programming.

Software Design Principles DRY and KISS – DZone Java

The DRY Principle: Benefits and Costs with Examples (thevaluable.dev)

What is DRY principle? – Definition from WhatIs.com (techtarget.com)

From the blog CS@Worcester – Software Intellect by rkitenge91 and used with permission of the author. All other rights reserved by the author.

Week 13: Why You Need a CSS Developer

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.

API Design – Getting Started—Alen Pokos

The speaker in this podcast is Alen Pokos, a deputy chief technology officer at Trikodor, a software development company specializing in UX (user experience) and natural language processing for computers, think Siri/Cortana. He spends this hour discussing API design and ideas on how to approach designing web APIs as well as giving personal accounts of his time in the industry and the solutions for common problems he’s encountered.

He begins the presentation defining API as something that enables applications to communicate with one another, it should reflect the goals of the business it is designed to serve, as well as giving a brief description of REST. Pokos goes on to explain common scenarios where Web APIs are usually built; being for other web servers or client consumers such as a web browser or mobile application.

The topic covered in the video that I found most compelling, and really where a lot of the value I gleaned was, was API design. This is primarily what his company presents itself as being experts in. He very poignantly states that “When people disagree on design, it is often they do not agree on the goals.” I’ve run into this situation when designing other things, be it in woodworking, Information Security, Hardware deployment, you name it. It’s something that should really be agreed upon before a project begins which is why software process management strategies all have some form of a task list where goals of development are clearly stated and agreed upon prior to actual development. It is important that before you decide on how a project accomplishes its task, you know what the task is.

I chose this episode because we are currently studying API, frontend, and backend development for the Libre Food Pantry. Understanding the context of what we’re doing and how it may relate to the industry is important for maintaining a firm perspective of how I could potentially translate the skills I’m cultivating into a professional workplace.

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

To-may-to : To-mah-to; Po-tay-to : Po-tah-to ; Framework : Library?

At the end of my previous blog post, I incorrectly referred to React.js as a framework. It is actually a JavaScript library. Although the two can be used to achieve a common goal, the two terms are not exactly interchangeable. Allow me to use the following analogy to explain my understanding of the two.

The main difference is when you’re using a library, you’re asking for it to assist you with completing your code. Frameworks on the other hand can be used to write your code but require you to “relinquish ownership” and abide by its rules. To discern the two, let’s look at the code to be written in terms of sharing information with one another. 

Scenario A.

You’re browsing StackOverflow and you come across a user who is asking a question about how to use various functions/methods in a particular programming language. You, being a well-seasoned programmer and active user in the StackOverflow community, wish to give this user a bit of assistance. So you decide to do some research on said programming language and functions/methods. Once you’ve gotten a firm understanding of the concepts, you give a friendly and in-depth response to the user, which helps to solve their problem. 

Scenario B. 

You’ve been assigned to write a paper explaining how to use various functions/methods in a particular programming language by your professor. They require the paper to be written in an accepted formatting style (MLA/APA) of your choosing. You, being a top student of your class, do some research to produce a high quality paper that reflects your standing. As you write your paper, to adhere with formatting guidelines, you use in-text citations. Once your paper has been completed you also cite your sources on your works cited page. Your professor gives you perfect marks on your paper due to the accuracy and proper formatting of your paper. 

In both of these scenarios, we were able to relay the information (write our code) in different ways. While the method of finding the information was roughly the same the end product is what differed. 

In scenario A the user was able to answer the question in any manner that suited their needs with no restriction. In scenario B, however, the student was not granted the same leisure and was required to structure their response according to a specific set of guidelines. Scenario A represents the usage of a library in your code, while scenario B represents the use of a framework. While the tools used were essentially the same, the control over the end product was not. The correlation to be made here is the control over the code that highlights one of the main differences between how libraries and frameworks operate.

From the blog CS@Worcester – You have reached the upper bound by cloudtech360 and used with permission of the author. All other rights reserved by the author.