Week 13

We started to work in the front end I became more curious about front-end developers. They are often the key if someone will even use a website to begin with. You can have a fully functional site but if it isn’t engaging it can lose people. In the past, this wasn’t something you had to deal with but there are so many things taking people’s attention that just doing the bare minimum isn’t enough. There are things that we don’t even think about that are key to a successful website. A main common feature now is dark mode if a website doesn’t come with this theme it can scare away users. Even simple things like where the search bar is placed are key for the navigation through the site. This week I decided to find information about front-end developers and how they achieve success.

The article starts by explaining what a front-end developer does. They create the graphical layout of a website or application. Front-end workers are usually hired by someone looking to build a website. They can create a site layout to give the buyer an idea of what their website could look like. It can save people a lot of money and hassle if their vision can reasonably be imagined by a front-end developer. A front-end developer’s main focus should be to place everything to benefit the user it should be simple and intuitive for the user. There are several job opportunities in this field from working in industry or having the freedom to be a freelancer. This is a job that offers a lot of challenges but with critical thinking, a solution can always be found. Many big companies hire this position including Microsoft and Meta are always looking for new front-end developers.

Reading this article showed me a new field in this space. There are many fields in Coding there are so many I find a new one every year. This field uses different coding languages including HTML, CSS, and javascript to name a few. I liked how this was a problem-solving job that there has to be actual decision-making need to be successful. This is a job that is engaging while trying to engage others to use your product. The key for a great front-end developer would probably have to be to not forget about the little things. This article reassures that keeping a user-friendly UI is the key to having a successful website.

https://www.coursera.org/articles/front-end-developer

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

Week 14 Post

This week’s post will cover a powerful and popular frontend tool, Node.js, that enables developers to execute JavaScript code outside the browser. By allowing JavaScript to run on the server side, Node.js has transformed the way developers approach web development, enabling full-stack JavaScript applications. The blog by Matthew Clark highlights the common uses for Node.js, for example, Node.js is often used for building real-time applications, such as chat apps and collaborative tools. Additionally, Node.js is a popular choice for developing REST APIs and microservices, enabling efficient handling of API requests and data exchanges between client and server. Another common use case is single-page applications (SPAs). These applications rely on seamless interactions between the frontend and backend, and Node.js allows developers to use JavaScript across the entire stack.

The V8 Javascript engine compiles JavaScript into machine code, ensuring fast execution, making speed one of the primary advantages of Node. The speed of a platform is crucial to creating an enjoyable user experience. No one enjoys a slow program. Additionally, Node can handle large volumes of simultaneous connections efficiently. Arguably the most important advantage is scalability. Node.js is designed to scale horizontally, allowing applications to handle increasing workloads by adding additional resources without significant architectural changes. Developers can use JavaScript on both the client and server sides, reducing context switching and improving productivity. This consistency simplifies debugging and maintenance.

Node is used by major companies like Netflix and PayPal. Netflix is particular uses Node.js to improve application performance, specifically for the server-side rendering of their video streaming platform. Its lightweight nature has helped Netflix handle millions of user requests with reduced startup time and increased efficiency. PayPal made the switch to Node to unify their frontend and backend development. This shift resulted in a significant reduction in development time and improved application response times.

One drawback to this tool is the asynchronous programming model, this model relies heavily on callbacks and promises. While this enhances performance, it can increase the complexity of debugging and code maintenance.

I chose this topic of research because it’s one of the most popular connection tools for frontend and backend development, and for good reason. One other tool that I came across during my research was Deno, a modern runtime for JavaScript and TypeScript, created by Ryan Dahl, the original developer of Node. Unlike Node, Deno is secure out of the box. It runs scripts in a sandboxed environment, requiring explicit permission to access files, networks, or the environment. Additionally, Deno has native TypeScript support and doesn’t require additional package managers.

Blog Post: https://dev.to/mattclark1025/why-node-js-for-web-development-in-2020-2ebc

From the blog CS@Worcester – Computer Science Through a Senior by Winston Luu and used with permission of the author. All other rights reserved by the author.

Learning Git Part 1

CS-348, CS@Worcester

During the semester, it took me a while to understand git. I had to break down the concepts. Then, I started from there. I learn this way because I play games for my hobbies. These include fighting, MOBA, and card games. In these games, you learn how actions have trade-offs. You understand the actions you take or need to take.

While I was learning git, I wanted to learn it differently. I aimed to approach it like how I would learn fighting games as a small experiment. 

In my personal time, I would try to learn the purpose of git. I want to understand why it is necessary for programmers. In my interpretation, git is used for programmers to share and change code. Git can also be used locally on your computer. This way, you can manipulate your version of the code without altering the main repository.

Then I would spend time trying to understand what are the core tools needed in git. I went from learning the concept of git to the primary tools. Understanding the building blocks of code is better with knowing what it does. 

I try to learn from my mistakes when I study coding or fighting games. I analyze why it was a mistake. In my opinion learning through mistakes, especially in coding, is because coding mistakes can happen constantly. If you know why then it will be easier to fix that mistake in the future. Just like learning in fighting games, people constantly make mistakes. Once they understand why they made those mistakes, they can focus on what to do differently. They can then avoid making the same mistake in the future. 

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

The Importance of Clean Code: Striking the Right Balance

Clean code is an important aspect of a software developer’s skill set. It means writing code that works well, and is easy to read, understand, and maintain. Three key principles of writing clean code are conciseness, reusability, and a clear flow of execution. Each principle in its own way contributes to the ease with which the software development process proceeds and the reliability of the end product.

1. Striking the Right Balance Between Conciseness and Clarity:

Finding the right balance between writing concise and clear code is very important. Concise code can make the codebase easier to read and it reduces the amount of time spent writing it. However, being too concise can make the code difficult to understand. The goal is to keep the code brief but also easy to read and understand without losing its purpose or logic.

2. Reusability

Another important principle of clean code is reusability. Writing code that can be reused in different parts of an application or across different projects saves time and reduces redundancy. Reusable code leads to a more modular structure, which makes the codebase easier to maintain and enhances its flexibility. It not only speeds up development but also makes it easier to fix bugs and make future updates.

3. Explicit Flow of Execution

A clear flow of execution is one of the critical characteristics of the code that guarantees its readability and ease of maintenance. A not well structured code leads to a condition where it is difficult to maintain a project. A logical and straightforward flow of code is easy to perceive by a developer, which is necessary for the code support during the whole life cycle.

4. The Single Responsibility Principle (SRP)

Every module or class should have only one responsibility. This decreases complexity, thereby making the code base manageable. Testing  and debugging, with development and improvements for future maintenance, are all greatly simplified, hence, the software becomes easier to use and much more understandable.

Conclusion

The balance between conciseness, reusability, clear execution, and following the Single Responsibility Principle will definitely allow developers to write clean code, benefiting the whole process of software development. Clean code is not simply error avoidance, but also it improves collaboration inside the team, makes life easier for new developers, and significantly increases the speed of code reviews. This will definitely result in efficient, maintainable software with easy adaptation to changes. Keeping these principles in mind allows me and other peers to create software that is functional, yet high quality and user-friendly. Even though we have done Clean code in Software process management class, reading this article helps as a reminder for writing code as best possible and also comes with examples which I did not include not to make this blog post too lengthy, but I suggest everyone to go and read it.

Citations:

https://www.freecodecamp.org/news/how-to-write-clean-code/

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

Git

Version control is a vital component of modern software design and git is the most popular version control system. Git is essential. It allows you to safely experiment, track changes, and it creates an organized workflow for something that can become chaotic fast. In this blog post, I will be going over some Git basics and some practical uses of git.

Git tracks changes in your code. This allows you to be able to go back to any version of your code and restore it if need be. This also allows you to see who’s done what work. this can help keep people accountable. Multiple people are also able to work at the same time without overwriting each other’s work. This makes collaboration much easier. Branching and merging allow anyone to be able to work with anyone whether they are in the same room or across the globe. Git also can allow you to experiment with your code. Branches allow you to manipulate and test code, without touching the source main code.

Basic git commands

Saving in git is called committing. If you commit you save the current state of all your files and folders. you would use git commit -m “message” This message should be a description of the changes made in this commit.

git clone is used to clone your current repository

git add is going to tell git that I would like to add this file as one to track the next time I make a commit.

Using the git add and git commit commands in conjunction allows you to only save/commit specific files.

Git status will tell you what is currently happening in your repository. You use this to help find where you are in git.

Git push sends the changes made up to Git Hub. This compresses all the information and sends it up to Git Hub.

git pull is the opposite of git pull. This allows you to bring the latest version of the project to your workspace.

Forking allows you to create a copy of someone else’s repository onto your own account.

Merge conflicts: this happens when changes coming from different locations conflict.

The Video I used as a source Is an amazing resource. It takes all the basic concepts of git and boils it down in a very simple and effective manner. It also shows examples of everything being used and talked about in a practical setting. I am a visual learner so I found this extremely helpful. The video is 50 minutes long, but if you are able to, you can watch this in 25 minutes at 2x speed with captions. I recommend anyone who is interested in git to watch this video. Even if you are experienced, it is an amazing refresher and I will be using it to study git concepts for this class alongside our material. I watched this video before attempting a git-related homework assignment and it felt like I was using git differently. I felt confident when using the commands. Before there was much more trial and error and I second-guessed myself a lot. Although the resource I chose doesn’t have much new information, I found it extremely helpful and encouraged anyone taking software processes management to check out this video.

Referance: https://www.youtube.com/watch?v=NcoBAfJ6l2Q&t=15s

tags: Week-14 , CS@Worcester, CS-343

From the blog CS@Worcester – SPM blog by Aaron Nano and used with permission of the author. All other rights reserved by the author.

The problem with old GPU supply

CS-343, CS@Worcester

As we all know, graphic cards have been getting more expensive over the years. This is because of tariffs and product costs. As a result, gpu manufacturers need to increase prices. They do this to break even from the costs of production. We also have to consider that many graphic card chips originate from TSMC. This company is a semiconductor manufacturer. It supplies Nvidia and AMD gpu chips. These gpu chips are being made in Taiwan. They are finished being built in other factories around the world. Consequently, tariffs would apply to these products due to the tariffs on China’s products being exported to the U.S.

The next issue with these products is the increased cost in prices. It just becomes not worth it for average consumers to purchase these products. Currently, Nvidia, AMD, and Intel want to sell their newer products. These products are better than the current graphic cards in the market. They offer a performance increase ranging from 10%-20%. Living expenses are high, so many consumers have not being able to buy the current gpu’s in the market. During the holidays, they aimed to cut prices significantly. Their goal was to sell as many units as possible before launching the new products. 

According to the rumors AMD is going to try to sell the new gpu’s in different quarters in 2025. While Nvidia is trying to sell their new gpu’s separated time between the next low tier product. I believe they will not try to change this. It has worked by lowering stocks in the market. Consumers would either have to wait for the product they want or get the best one initially. 

For AMD new gpu’s are apparently going to have improved FSR by significant margins in comparison to RDNA 3. Let me explain further FSR is called FidelityFX Super Resolution. It is a program that will render games at higher quality frames. Additionally, it boosts the performance of the graphic card. AMD uses software like this to compete with Nvidia’s DLSS (Deep Learning Super Sampling). DLSS does the same thing for Nvidia graphic cards but performs way better. In some cases, it achieves around 30% better performance and image quality in frames. There is a gap between them because Nvidia created a gpu with DLSS first. It was able to refine DLSS more and more since the rtx 2000 series cards. 

Currently Nvidia gpu’s are more expensive due to using DLSS as the main feature to sell their gpu’s. Nvidia does not want to sell increased performance. If they did, it would cost too much to produce enough gpu’s to meet market demand. They increase the performance of cards by 10% to save on production costs. They improve DLSS by 20%-30%. This makes consumers not consider the base performance difference between previous generations gpu’s.

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

What is Vue and Why is it Popular?

Link to blog: https://medium.com/js-dojo/how-is-vue-js-making-the-javascript-world-a-better-place-b3dc39ba4fe7

It’s the end of the semester, and the last thing we covered in class was a bit of front-end structure and how things work. Of course, there’s your HTML and CSS, and I understood that. But we were using Vue in our examples, and I got curious. I’ve heard of Vue before but never used it, so I was interested in its purpose. Such curiosity led me to Fotis Adamakis’ blog post How is Vue.js making the Javascript world a better place. We’ll be discussing the contents of this article today.

Adamakis’ blog post is quite in-depth compared to past articles we have covered. He believes Vue is quite beginner-friendly, as learning how it works and beginning to write code could only take a couple of days to a week (as long as you have some knowledge of Javascript, HTML, and CSS). Adamakis dives into some interesting parts about Javascript frameworks and how Vue approaches them.

Routing can be a potential challenge when it comes to tasks such as custom scroll behavior, nested route view mapping, and more. Vue has its own Router, and it configures the routes before any components are rendered. 

Vue’s approach to the architecture of a site supports component-building. To be more efficient, it includes single-file components. This is a beneficial feature of Vue, as it can contain HTML, CSS, and Javascript all in a single file. Adamakis also mentions Vue’s high satisfaction rating, with the majority of developers wanting to use it again! 

Adamakis mentions that Vue is great for testing too, as it has built-in support for Mocha and Jest unit testing or end-to-end testing with Cypress or Nightwatch. 

Adamakis concludes by stating that he feels Vue has combined all great parts of other Javascript frameworks into one, being easy to use with great documentation.

I selected this resource because it educates me more on why Vue is so popular and what it does well. It also has example videos to highlight the reasons and is well-written and easy to understand.

I found this to be a solid article for learning more about Vue and why it’s preferred. I also learned how Vue’s state management works. It’s interesting that with Vue, you can incorporate HTML, CSS, and Javascript into a single file. Perhaps it’s beneficial for the simplicity or organization of different web pages/parts of a page? Having all of the pieces of a component on one file is probably quite helpful. I hope to apply this to new web pages I might try and build (I would like to get more into building websites!).

From the blog CS@Worcester – Josh's Coding Journey by joshuafife and used with permission of the author. All other rights reserved by the author.

Backend Architecture

Back-end architecture serves as the backbone of modern web applications, enabling ideal and flawless user interactions and efficient data management. The Codecademy article “Back-End Architecture” provides an insightful overview of the fundamental components and design principles that make up the back end of web systems. It summarizes the key takeaways from the article, reflects on its relevance to software development practices, and outlines its implications for aspiring software engineers.

The article begins by explaining the primary purpose of back-end architecture to manage the behind-the-scenes functionality of web applications that the user can’t see. It underlines the importance of servers, databases, and APIs in creating a solid infrastructure. This is what the article key topics covered:

  • Servers: These handle requests from the front end and deliver the necessary responses. The article discusses server setups like dedicated, shared, and cloud servers.
  • Databases: Central to storing and retrieving data, the article explores relational databases (SQL) and non-relational databases (NoSQL), emphasizing their use cases and advantages.
  • APIs: Acting as the glue between the front end and back end, APIs enable seamless communication between various components of an application.
  • Scalability and Security: The article addresses the importance of designing scalable systems and implementing robust security measures to safeguard user data and maintain application performance.

One reason I chose this article is that we are currently learning about REST APIs in class. I wanted to deepen my understanding of how APIs are used in developing web applications and their role in back-end systems. As a Computer Science student, I aspire to build more complex projects in the future where I can apply this knowledge. The article’s clarity and engaging presentation made it both interesting and easy to understand, which further motivated me to select it as a resource.

Reading this article deepened my understanding of how back-end systems operate and how they connect with front-end components. One key takeaway was the example it provided about how a client makes a request to the server. The article gave a detailed yet digestible explanation of this process, which was different from the visual and interactive activities we did in class. For instance, the explanation of what happens during a client’s GET request clarified the flow of communication between the client and the server, making the concept more relatable and easier to grasp.

What I learned from this article will help me approach back-end development with confidence. For my upcoming project, I plan to focus on designing a system that effectively integrates APIs and databases. Ensuring scalability and security will be a priority to make the application robust and user-friendly. These insights will serve as a foundation for building more complex projects in the future.

Source:
https://www.codecademy.com/article/back-end-architecture

Citation:
Codecademy. (n.d.). Back-end web architecture. https://www.codecademy.com/article/back-end-architecture 

From the blog CS@Worcester – CodedBear by donna abayon and used with permission of the author. All other rights reserved by the author.

Enhancing Development with Software Design Patterns

“Design patterns represent common software design problems and well-tested solutions to those problems.” This is a line from my class’s first exercise introducing us to design patterns. In it we learned that in order to have scalable code, certain types of solutions, design patterns, are used. They are the culmination of previous developers’ struggle adding functionality to already existing code.

When we learned about design patterns in class and the homework, we handled singleton, strategy, simple factory design patterns. This GeeksforGeeks article adds onto the classwork by first separating their list into Creational, Structural, and Behavioral types. Creational patterns address when objects are made by separating how the object is formed from how it is implemented. Included in this type are the Factory and Singleton patterns we had already seen as well as new patterns called the Prototype, Builder, and Abstract Factory patterns. Under the Structural category are methods that handle class/object composition, so they utilize inheritance and help to structure efficient interfaces or implementations. Here they included the Adapter, Bridge, Composite, Decorator, Facade, Proxy, and Flyweight patterns all brand new to me. Finally came the Behavioral patterns that at first brush sounded like it was primarily focused on solely on the responsibility of objects and classes but actual include how these objects and classes communicate with each other. In this section returned the strategy design pattern along with Observer, State, Command, Chain of Responsibility, Template, Interpreter, Visitor, Mediator, and Memento patterns. At the end of this article is an FAQ section where they explain things such as how you can compare algorithmic solutions to design patterns in terms of computational solutions and structural solutions.

I chose this article because it showed me an entire new category of design patterns that tackle interface creation, something that I personally find to be a weak point in my understanding of OOP design. I actually clicked into the Bridge design pattern because it allows for abstraction and implementation to be developed separately. So when you have multiple subclasses of subclasses, their example used ProduceBus and AssemblyBus under the Bus class under the Vehicle class, you have an issue any time you wish to modify the middle level (Bus) class. The Bridge pattern says to separate the Produce and Assembly bus implementations into their own subclass of an interpreter called Workshop that works on objects of the Vehicle class. This way changing the Bus class doesn’t directly change how the Produce and Assembly portions work, which thus saves time.

I have thus bookmarked this page so that until I can pull these patterns from memory I can make use of these numerous proven solutions. It is an amazing resource since it has links to more in depth explanations of each design pattern so that readers can truly grasp just how these tricks work in practice.

Link:
https://www.geeksforgeeks.org/software-design-patterns/

From the blog CS@Worcester – Coder's First Steps by amoulton2 and used with permission of the author. All other rights reserved by the author.

Code Smells

In software development, creating high-quality apps requires keeping code neat and effective. The blog “What is Code Smell & How to Avoid It” provides a thorough review of code smells, which are signs of more serious problems in a codebase that may hinder readability, performance, and maintainability despite the fact they are not errors. The blog carefully explains the definition of code smells, their most prevalent kinds, and practical solutions. It is a great resource for learning how to maintain high-quality code because of its structured approach.

Code smells are indicators of design flaws in a program, which might result in technical debt and vulnerabilities down the road. Tight timelines, inadequate evaluations, or insufficient experience are frequently the causes of them. Typical examples include excessive parameter lists, overly long functions, incorrect naming standards, and duplicate code, all of which make the codebase challenging to maintain. Along with highlighting smells like middle-man classes, data clumps, and primitive obsession, the site provides practical guidance on how to spot and address each. In order to prevent code smells, the blog highlights techniques such as using automated code review tools, implementing continuous integration/deployment (CI/CD) workflows, and regularly refactoring.

I chose this blog because it breaks down the concept of code smells into digestible pieces, discussing each type in depth while linking them to actual solutions. Additionally, the topic strongly reflects our course, Software Construction, Design, and Architecture, which stresses developing maintainable, scalable systems. This objective is directly supported by knowing code smells, which also serve to reinforce the fundamental ideas covered in the syllabus.

As I thought back on the blog and what we’ve learned in class, I realized how crucial it is to proactively find and fix code smells throughout the development process. The emphasis on techniques like refactoring caught my attention since it can be easy to overlook their wider importance beyond tackling immediate issues. Recognizing certain scents like “feature envy” and “primitive obsession,” brought to light how small problems may turn into big ones, affecting collaboration and a project’s ability to grow. For instance, I intend to use the strategy of condensing lengthy parameter lists into objects by grouping related data together. This will make the code in my upcoming projects cleaner, easier to maintain, and easier to read.

This blog improved my knowledge of software architecture and design by relating theory to real-world development issues and helped cement the content we went over in class. By putting the knowledge I’ve received to use, I hope to create software that is more reliable and maintainable, laying a solid basis for my future work in software engineering.

From the blog CS@Worcester – Live Laugh Code by Shamarah Ramirez and used with permission of the author. All other rights reserved by the author.