Monthly Archives: December 2021

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.

Object Oriented Programming vs Functional Programming

There is a strong usage of java programming for almost every computer science student I have encountered. Every one of my programming classes has been taught in java, with the exception of a free elective where I took a Matlab class. For most students, if they want experience working with a functional programming language they need to take an elective course or teach themselves in their free time. Some of the most common functions/procedural programming languages are C, SQL. Java, C++, and Ruby are examples of object oriented programming. For a while, I didn’t quite understand the differences between object oriented programming and functional programming languages. I wanted to take some time this week to revisit that idea and learn the pros and cons of each programming style and which one is preferred. 

I found this video to be a great basis for answering these questions. Starting with functional programming, there are three bases that need to be followed: functions only, no side effects, and fixed control flow. Functional programming generally has less temporary variables and thus less memory intensive, and the methods are shorter and to the point. A strict control flow means as you are writing your code, you are mapping a clear input and output flow. The basis of object oriented programming are classes containing methods and attributes and creating objects. Object oriented programming is a great option for when there is going to be a lot of similar code, or many working parts of your code operate on the same basis then branch outwards with variations. With functional programming, if you have similar pieces of code being reused and rewritten, bugs could be harder to narrow down if they are embedded throughout your program. With object oriented programming, fixing a bug in the base class will fix the solution in all extended classes and implementations of those methods. 

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

Week 13: 9 Best Practices for Optimizing Frontend Performance

https://blog.bitsrc.io/9-best-practices-for-optimizing-frontend-loading-time-763211621061

So last week I wrote a blog post on good practices for REST API design so naturally I had to follow it up with a blog post on good practices to follow on optimizing frontend performance since we’re working with frontend stuff this week.

This week’s blog post is about a blog post from bitsrc.io from Nethmi Wijesinghe titled “9 Best Practices for Optimizing Frontend Performance.” In this blog post, she writes about 9 best practices that will be useful to the reader to optimize frontend data loading. The 9 best practices she lists are: minify resources, reduce the number of server calls, remove unnecessary custom fonts, compress files, optimize images, apply lazy loading, caching, enable prefetching, and use a content delivery network.

To summarize the 9 practices:

  1. Minify Resources: remove unnecessary, redundant data from your HTML, CSS, and JavaScript that are not required to load, such as code comments and formatting, etc.
  2. Reduce the Number of Server Calls: More calls to server, more time to load. 3 ways to reduce the number of server calls include: using CSS sprites, reducing third party plugins, and preventing broken links.
  3. Remove Unnecessary Custom Fonts: Self explanatory, but also you can take these 3 actions when using fonts on your website like, converting fonts to most efficient format, subset fonts to remove unused characters, and preloading fonts explicitly required.
  4. Compress Files: Compress files to save loading time since larger files = longer loading time.
  5. Optimize the Images: Images improve user engagement but make sure they are optimized to save loading time.
  6. Apply Lazy Loading: Lazy loading allows web page to load required content first and then remaining content if needed
  7. Caching: Allow caching so browsers can store the files from your website in their local cache and avoid loading same assets when revisiting
  8. Enable Prefetching: Prefetching loads the resource in anticipation of their need to reduce the waiting time of the resource.
  9. Use a Content Delivery Network: Using a CDN (group of servers distributed across several geographical locations that store a cached version of the content to deliver fast to the end-user) allows you to optimize loading time as well.

I picked out this blog post because we were using frontend in class during Activity 15-16 and I wanted to follow up with practices to optimize your frontend. This was one I found that was interesting but also introduced new terminology to me. Things like lazy loading, prefetching, and CDNs I didn’t know about until this reading this post. Also, I haven’t had any web dev experience prior to this class and doing the in class activities made me more interested because it was something new to me I had never touched. I knew web dev things existed I just never knew how complex it can actually get and it’s actually made me more interested in possibly pursuing a web dev position instead.

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

Blog Post #6 – SQL VS NOSQL

After having listened to blogs and watched videos [1] on SQL VS NOSQL and having spent a number of years working as a SQL developer, my view is that this isn’t a battle. Each have their own uses in a given situation. There are times when you need a very strong, well organized, secure, database design, and this will usually fall to being a SQL database. This is usually, but not always done in a business or enterprise setting, but also works well on mobile and desktop friendly implementations.

NOSQL is really just a growth from other ways simple data formats have been carried around over the years. Starting with flat files, then to CSV (comma-separated values files), then to more formalized “strings” of data in the world of markup languages. This started with SQML/HTML, then to XML, then to JSON. These formats continue to evolve to worlds of XAML and others, but for our discussion, let’s use JSON.

It is easy to describe my lunch as “Name: Joe, Time: Noon, Food: Cheeseburger”.

There is no implied database in this text string. It clearly says my name is Joe and I eat burgers at noon. In SQL, there would be Students, Orders, Inventory tables, all with multiple links and schemas to describe the same line. ( The key/value pair Name/Joe is represented in JSON as Name: Joe,)

It is very important to determine what your requirements are before deciding on if or what technology to use for a given purpose.

There are times when writing and testing particularly sophisticated SQL stored procedures where I was frustrated with the complexity and rigidity of the data integrity requirements but was then rewarded with the benefits of the product. Very well encapsulated, easy to use once constructed, stable, secure, fault tolerant products were the goal.

On the other hand, it is easier to use JSON to describe simpler situations that don’t require the relational connection between components that SQL vertical databases do.

I think both the XAML and JSON markup formats are easier to read than XML or HTML. I am also a fan of CSV files when key/value pairing isn’t required.

The internet seems to have “wars” frequently on what is better A or B? This very frequently comes down to “Sometimes A, sometimes B”. This competition between ideas is the reason I am optimistic towards the future. Someone is always trying to reinvent a better way to do almost everything.

As a software developer, you are constantly learning, relearning, unlearning, reevaluating, and improving. This process is enjoyable to me, but I know some who hate their job because of this constant change. For me, the key when getting frustrated on a problem was in learning how to back away, take a walk, and come back with a fresh outlook.

References:

1. U.S. Financial services market

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

Refactoring

Hello everyone, hope you are all doing well. As this is the final week, I would like to wish you all Goodluck with your finals. In this week’s blog, I would like to talk about Refactoring as it is one of the important parts of programming. Refactoring is a process of restructuring code while making sure it does not change the original functionality of the code. The main goal of refactoring is to improve internal code by making small changes without altering the code’s external behavior.

Computer programmers and software developers refactor codes to improve the design, structure, and implementation of software. Refactoring improves code readability and reduces complexities. It also helps software developers find bugs or vulnerabilities hidden in their software. Refactoring improves codes by making them more efficient by addressing dependencies and complexities, becomes more maintainable and reusable by increasing efficiency, makes the code cleaner which then makes the whole code easier to read and understand, these are a few purposes of refactoring.

Refactoring can be performed after a product has been released, this should be done before adding updates and new features to the existing code or it should be done as a part of day-to-day programming. There are several benefits of refactoring like it makes the code easier to read, encourages a more in-depth understanding of code, improves maintainability. It also comes with various challenges like this process will take extra time if the development team is in the rush to finish the product and refactoring is not planned for, without clear objectives refactoring can lead to delays and extra work, Refactoring cannot address software flaws by itself, as it is made to clean code and make it less complex. There is various technique to refactor the code some of the examples include moving features between objects, Extracting, refactoring by abstraction, and composing. The best practices to follow for refactoring include Planning for refactoring when a project starts, Developers should refactor first before adding updates, refactor in small steps, Test often while refactoring, fix software defects separately, Understand the code before refactoring, focus on code deduplication, use of Automation tools make refactoring easier and faster.

I choose this article because it has a clear definition of refactoring and purpose of refactoring, benefits of it, explains different techniques to perform code refactoring, and gives best practices to follow for refactoring and since it is very helpful for software engineers, in the future these practices will help me do my job easier and help me do my job in an effective way.

Article: https://searchapparchitecture.techtarget.com/definition/refactoring

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