I chose the blog post, “Designing for the Unexpected” by Cathy Dutton because it addresses how one can create designs that can combat unexpected content changes. The blog shows us strategies that we can use so we don’t get stuck in situations like this. On my own time, I have been learning how to create in the web design space so that was one of the main factors when choosing this blog. This is what led me to choose this blog post, so I can learn how to not make mistakes and so I can follow the strategies laid out to design in the most efficient way possible.

In the blog, Dutton explores strategies for creating adaptable web designs that accommodate unforeseen content changes and evolving device landscapes. She reflected on the evolution from fixed-width designs to responsive layouts, emphasizing the necessity of planning for flexibility from the outset. Dutton recounts her early experiences with web design, and  highlights the challenges of transitioning to responsive design, noting that it requires comprehensive planning during the design phase rather than being an afterthought. To implement responsive designs, Dutton initially utilized percentage-based layouts with native CSS and utility classes, later incorporating Sass for reusable code and more semantic markup. Media queries played a crucial role in this process, allowing designs to adapt at specific breakpoints to maintain readability across different screen sizes. However, she observed that this method often necessitated complex markup, posing challenges for content management, especially for users without extensive HTML knowledge. Dutton introduces the concept of intrinsic design, a term coined by Jen Simmons, which leverages new and existing CSS features to create layouts that respond organically to content and available space. This approach employs the ‘fr’ unit to distribute space flexibly without compromising content legibility, enabling designs to adapt dynamically to varying content and container sizes. Intrinsic design moves beyond predefined breakpoints, fostering components that are inherently responsive. The article also discusses the limitations of relying solely on frameworks like Bootstrap for responsive design. Dutton emphasizes the importance of designing for diverse user contexts, acknowledging that users interact with websites across various environments and devices. By adopting flexible design principles and focusing on content adaptability, designers can create resilient and future-proof web experiences that cater to unforeseen changes and diverse user needs. The blog advocates for a shift towards intrinsic design methodologies that prioritize content flexibility and responsiveness. By embracing CSS advancements and moving beyond rigid frameworks, designers can craft web experiences that gracefully adapt to the unpredictable nature of content and device evolution.

From the blog, I was able to learn the best strategies when it comes to designing an adaptable web interface. Going forward, I plan to incorporate these strategies as I continue to learn more about designing web pages. After reading, I feel like I will be able to increase my learning in this area as well as be able to share these strategies with my peers.

https://alistapart.com/article/designing-for-the-unexpected/

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

I’m very unfamiliar with REST API’s but throughout most of our classes I’ve learned that they are very important especially in moving forward with development as a career. Since I was not very familiar with the topic I wanted to look up the basics of the API’s functionality, this is the site that gave me that information https://www.redhat.com/en/topics/api/what-is-a-rest-api. This site is basically documentation describing an API, REST API and REST all in their own individual categories.

The documentation covers the basics of REST such as the client-server architecture and communication, the representation of the requester and endpoints and the format the data is actually transferred through and the guidelines of the REST functionality as well. This post also covers the topic of what an API has to include to be considered a RESTful API, disregarding the aforementioned topics it covers the specifics of how the resources that are used by the client and modified on the server should react. Cacheable data that is transferred between both the client and server is also a topic brought up which I think is actually the most important since any data lost between actions would result in a broken / useless API.

Since I’m very uninformed on the topic of REST and I haven’t setup any personal development environments to work with such a thing, so I won’t be putting much of this newly gained knowledge to use as of this moment, but learning about it for future reference will definitely help me in the long run. I’ll most likely setup the development environments needed and study up more on the internals and all of the languages that work best for this type of development since understanding server and client architecture does not only represent working with REST. It also represents working with pretty much any application that multiple of your clients will use depending on what they ask for. This also gets more into the request part of the communication which I have never really looked into in depth, so being able to see how it functions will also help my understanding of most other server-client / client-server communication.

Honestly when we first discussed REST in our classes I still didn’t really understand the entire process of what exactly was happening. Reading through this post again though, definitely clarified some of the topics we went over and more, especially more into the back-end side of the API. Going forward I will continue to research more into REST, it seems very interesting to me and again, will be very helpful in understanding more about architecture in bigger programs.

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

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.

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.

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.

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.