codegrepper.com

I used to believe that this was a pro in my coding abilities but the further I go, the more I realize that is actually a con. When I first started coding in CS140, I realized that I have had a unique ability when it came to paying attention to detail. When I am absolutely lost or confused, I will hammer the nail all day. Meaning, I will read every single character in every line of code before I decide that I am completely lost. This is great, time and time again I have proven that no code is a match for me. I always seemed to outwork my failure. Before the deadline passed, I had made sure that I submitted something that makes sense and works.

Once I started working on our latest Javascript homeworks, I realized that this is not helpful to me. I have managed to get my codes to work. And I have managed to get them to do what I needed them to do. That being said, if you asked me to explain the code in plain english I would struggle to do so. That’s because I just spent hours and hours playing around with the code. Instead of researching basics and creating a great fundamental understanding for myself, I just went for it. I believe life would be alot easier if I had this fundamental understanding before I began coding rather than trying to grasp it during coding.

Codegrepper.com is something I found while researching these fundamentals. It seems that I have came across a gold mine. This link right here specifically helped me work on the get method within my javascript for the HTTP Get request.

https://www.codegrepper.com/code-examples/javascript/javascript+find+object+in+array+by+property+value

Immediately you have a code snippet of javascript which finds object in array by property value. And it begins to build up. It shows you how to find object by property. How to find ID in an array javascript. And so on. This website also has a search engine that allows you to search anything. It seems to be an incredible tool, especially when learning new languages. If you type “hello world”, it gives you the intro code snippets for any language you can think of. I will definitely take more use of codegrepper.com moving forward.

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.

Unified Modeling Language #6

Unified Modeling Language (UML) is a general-purpose modelling language. The main aim of UML is to define a standard way to visualize the way a system has been designed. UML is not a programming language, it is rather a visual language. We use UML diagrams to portray the behavior and structure of a system. UML helps software engineers, businessmen and system architects with modelling, design and analysis.

Why use UML?

  • Complex applications need collaboration and planning from multiple teams and hence require a clear and concise way to communicate amongst them.
  • Most clients do not understand code. So UML becomes essential to communicate with non-programmers essential requirements, functionalities and processes of the system.
  • A lot of time is saved down the line when teams are able to visualize processes, user interactions and static structure of the system.

Here are structural UML Diagrams :

  • Class Diagram – The most widely use UML diagram is the class diagram. It is the building block of all object-oriented software systems. We use class diagrams to depict the static structure of a system by showing system’s classes, their methods and attributes. Class diagrams also help us identify relationship between different classes or objects.
  • Composite Structure Diagram – We use composite structure diagrams to represent the internal structure of a class and its interaction points with other parts of the system. Itdiagram represents relationship between parts and their configuration which determine how the classifier (class, a component, or a deployment node) behaves.
  • Object Diagram – An Object Diagram can be referred to as a screenshot of the instances in a system and the relationship that exists between them. Since object diagrams depict behaviour when objects have been instantiated, we are able to study the behaviour of the system at a particular instant. An object diagram is similar to a class diagram except it shows the instances of classes in the system. We depict actual classifiers and their relationships making the use of class diagrams. On the other hand, an Object Diagram represents specific instances of classes and relationships between them at a point of time.
  • Component Diagram – Component diagrams are used to represent the how the physical components in a system have been organized. We use them for modelling implementation details. Component Diagrams become essential to use when we design and build complex systems. Interfaces are used by components of the system to communicate with each other.
  • Deployment Diagram – Deployment Diagrams are used to represent system hardware and its software. It tells us what hardware components exist and what software components run on them. They are primarily used when a software is being used, distributed or deployed over multiple machines with different configurations.
  • Package Diagram – We use Package Diagrams to depict how packages and their elements have been organized. A package diagram simply shows us the dependencies between different packages and internal composition of packages.

Sources:

What is Unified Modeling Language (UML)? (visual-paradigm.com)

What is UML? Everything You Need to Know About Unified Modeling Language | Gliffy by Perforce

What is Unified Modeling Language (UML)? – Definition from Techopedia

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

GRASP

Resource Link: http://www.kamilgrzybek.com/design/grasp-explained/

For this blog post I wanted to explore the GRASP principles. GRASP is an acronym for 9 principles that apply to object oriented design in programming, and it stands for General Responsibility Assignment Software Patterns. The 9 principles are: Information Expert, Creator, Controller, Low Coupling, High Cohesion, Indirection, Polymorphism, Pure Fabrication, and Protected Variations.

First, the Information Expert principle states that an object should have all the functionality and logic that pertains to it. For example, if a class has a list of objects, then it should also have all the logic for functions that pertain to that list, such as adding items, removing items, etc.

 Next, the Creator principle states that an object should be created within the scope where it’s used. This means that if a certain class A relies on another class B to function, and B is unique to A, then B should be created within class A.

Next, the Controller principle states that the first object behind the front end UI layer should control the backend operations. This helps to separate the front end functionality from the backend functionality.

Next, the Low Coupling principle states that objects should be designed in such a way to where they can be isolated and reused without changing many other components. This helps to avoid rewriting code that could be useful in multiple places, instead making it generic so that it can fit into many different applications.

Next, the High Cohesion principle states that objects should only contain data and functionality that pertains to their function. This helps to avoid overloading a class with extraneous information and logic that isn’t necessary and should be abstracted or put into another class.

Next, the Indirection principle states that instead of directly coupling two objects, an intermediary object should be used between the two to handle the coupling. This helps to avoid a direct dependence relationship between two objects, instead having them both rely on an in between class that handles the relationship, so that change can be localized to that one class.

Next, the Polymorphism principle states that objects should be generalized so that they can handle support for different object types. For example, an animal class would have functions that pertain to all animals, and then subclasses could have functions that are more specific to certain kinds of animals.

Next, the Pure Fabrication principle states that shared functionality between classes should be placed within a separate class rather than in a class that it only roughly fits into. This helps to abstract functionality that could be repeated among many classes, instead putting it into a single shared class.

Finally, the Protected Variations principle states that systems that are likely to change should be protected as to not affected other systems. This helps to avoid breaking systems that other systems rely on, instead making sure that systems which other systems have a dependence on are protected and not susceptible to change.

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

JavaScript

JavaScript is a scripting language for creating dynamic web page content. It creates elements for improving site visitors’ interaction with web pages, such as dropdown menus, animated graphics, and dynamic background colors. Developers generally use JavaScript alongside HTML and CSS to create a dynamic website. The scripting language works well with CSS in formatting HTML elements. However, it still maintains user interaction, something that CSS cannot do by itself.

JavaScript’s implementations within the web, mobile application, and game development make the scripting language worth learning. You can do so via learning platforms like BiteDegree or by exploring free JavaScript templates and applications on code hosting platforms like GitHub.  

What is the use of JavaScript?

JavaScript has continued to grow alongside new browsers like Mozilla Firefox and Google Chrome since then. The latter even started developing the first modern JavaScript engine, called V8, which compiles bytecode into native machine code. Today, JavaScript has plenty of frameworks and libraries to simplify complex projects, such as AngularJS, jQuery, and ReactJS. While it caters to web-based programs the most, JavaScript programming features have other implementations in different areas. The following are several basic uses of JavaScript.

The development of JavaScript frameworks, consisting of JavaScript code libraries, allows developers to use pre-written JavaScript code in their projects. It saves them time and effort from having to code programming features from scratch. Each JavaScript framework has features that aim to simplify the development and debugging process.

For example, front-end JavaScript frameworks like jQuery and ReactJS improve design efficiency. They allow developers to reuse and update code components without affecting each other, function or value-wise. The implementation of JavaScript code in Node.js also plays an important role in web development. Node.js can reduce server response time due to its single-threaded nature and non-blocking architecture and omit delays.

One of JavaScript’s core functions is adding dynamicity to web pages. This includes displaying animations, modifying text visibility, and creating dropdown menus.

While you can use only HTML and CSS code to build a website, it will only have a static display. With JavaScript, a user can interact with web pages and have a better browsing experience.

Additionally, JavaScript lets you change HTML content and attribute values without reloading the web page first. This is because JavaScript supports the following data types:

  • String ‒ consists of textual data written inside quotes. For example, “Hello world”, ‘Hello world’, and “Display ‘Hello world’ text”.
  • Number ‒ covers integer and floating-point numbers between (2^53 – 1) and -(2^53 – 1).
  • Boolean ‒ a logical data type with true and false values.
  • BigInt ‒ represents integer data of arbitrary length.
  • Null ‒ contains a null value.
  • Undefined ‒ includes declared but not assigned variables.
  • Symbol ‒ provides unique identifiers for objects.
  • Object ‒ for complex data structures written with curly braces. For example, {item:”Book”, information:”biography”}.

I chose to talk about JavaScript because it’s one of the most fundamental in programming and as computer science, I am supposed to know about JavaScript because it’s mostly used and also very important.

What is JavaScript used for? | Hack Reactor

What Is JavaScript? A Basic Introduction to JS for Beginners (hostinger.com)

From the blog CS@Worcester – Gracia's Blog (Computer Science Major) by gkitenge and used with permission of the author. All other rights reserved by the author.

Blog post 6 – What is the difference between front end and back end development?

Front end and back end development get thrown around a lot, but I never really understood the difference. Therefore, I decided to do some research and figure out what front end development and back end development are, and what the difference between them is.

Let’s start with front end development. Front end development, also known client side development, deals with the user interface. The user interface, or UI for short, is what the user gets to see and interact with. Front end developers are responsible for designing and creating the user experience elements in a program. Front end developers may find themselves using technologies like Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript to implement features such as buttons, menus, pages, and so on. The goal of front end development is to create attractive, simple, and easy to follow interfaces for users. However, achieving this goal can get quite complicated due to a major challenge. This major challenge is the sheer amount of variance in devices. Not all devices are the same. There are devices that are big and small, fast and slow, and new and old. Guaranteeing a consistent experience across all devices and platforms is a very difficult task but is an essential one. This gets further complicated with the rapidly evolving technologies, standards, and practices.

Now, back end development, as you might have guessed is the complement of the front end development. If front end development deals with things that the user can’t see then back end development deals with things that a user cannot see. Back end development, also known as server side development, deals with servers that provide data on request, the applications which channel those requests, and the databases which organize the information. Back end developers might find themselves using databases such as IBM DB2, MySQL, and NoSQL as well as a bunch of programming languages and frameworks such as Java, Python, and C++. The goal of back end development is to design and create applications that can accurately locate and deliver data to the front end as smoothly as possible.

While developers usually just specialize in either front end development or back end development, sometimes employers need developers who are proficient on both ends. This is known as full stack development, and these highly specialized developers are known as full stack developers. Their job is to use their deep knowledge to suggest ways to make the development process more efficient.

https://www.conceptatech.com/blog/difference-front-end-back-end-development

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

An Introduction to React and Components

In class, we’ve been using vue.js. Vue.js seems to have many similarities to React, so I thought it would be informative to briefly discuss how to implement React components. Vue.js seems to also use components, so I thought it would be helpful to explain a common concept that seems to exist between the two.

I open visual studio code, and open the terminal. To create a react app, I typed the following commands:

  • npx create-react-app reactapp
  • cd reactapp
  • npm start

After React finished installing, I changed my App.js to this:

This component’s render() function will display the content on the webpage using JSX1. There is currently nothing but an empty screen. Instead of writing everything inside a component, we should segregate the information into separate components, that would then be called in this central component.

For this example, we’ll create a webpage with four parts: a header, a navbar, a side pane, and a main pane. Each component will contain its own js file. Since we’re making a very simple web page, the header will be a simply designed bar. I created a blue bar in Paint, and I imported it using CSS. The header will contain a title, and compose the top of the web page.

Below the header should be the navigation bar. For the sake of example, the navbar here will just display the formatted text on it. The navbar would in practice function as a transition between web pages.

Next is the side pane. This side component on a website could function as a way to automate section traversal, as is done on a wikipedia page. If the main section has a title such as “Lorem Ipsum”, it would list “Lorem Ipsum” with the ability for a user to highlight and click on it. Like the navbar, we’ll only create a very simple display.

The final component is the main component. This component will be where we put our text. I created a title called “Lorem Ipsum”, with some body text.

We now need to add our components into our previous App.js file. The top will contain the header and the navbar, and the body will contain the side pane and the main pane.

Finally, we need to create the CSS. For my design, I am using this inside of the App.css file, which is then imported into App.js.

For our product, we get this (the bottom part was cut in the screenshot for space):

While it’s not winning any awards, it’s a draft of a simple website design. This illustrates how components work together, in a library like React, and I hope this helps with understanding vue.js too.

Link:

  1. https://www.youtube.com/watch?v=w7ejDZ8SWv8 (For discussing how components and JSX work, so I could make this guide!)
  2. https://reactjs.org/tutorial/tutorial.html (ditto)

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.

MongoDB database #5

MongoDB is a source-available cross-platform document-oriented database program, classified as a NoSQL database. The data objects are stored as separate documents inside a collection instead of storing the data into the columns and rows of a traditional relational database.     

NoSQL databases like MongoDB are a good choice when your data is document-centric and doesn’t fit well into the schema of a relational database, when you need to accommodate massive scale, when you are rapidly prototyping, and a few other use cases. The motivation of the MongoDB language is to implement a data store that provides high performance, high availability, and automatic scaling. Documents hold semi structured data, usually represented in a format like JSON or XML, and each document is associated with a unique key. Key values are typically a path or a URI that can be used to retrieve the associated document from the database. The keys are indexed, making it efficient to retrieve the associated documents.  

Key Components of MongoDB Architecture:

1. _id: This is a field required in every MongoDB document it represents a unique value in the MongoDB document. If you create a new document without an _id field, MongoDB will automatically create the field.

2. Collection: This is a grouping of MongoDB documents. A collection is the equivalent of a table which is created in any other RDMS such as Oracle or MS SQL. Collections don’t enforce any sort of structure.

3. Cursor: This is a pointer to the result set of a query. Clients can iterate through a cursor to retrieve results.

4. Database: This is a container for collections like in RDMS wherein it is a container for tables. Each database gets its own set of files on the file system. A MongoDB server can store multiple databases.

5.  Document: A record in a MongoDB collection is basically called a document. The document, in turn, will consist of field name and values.

6. Field: A name-value pair in a document. A document has zero or more fields. Fields are analogous to columns in relational databases.

7. JSON: This is known as JavaScript Object Notation. This is a human-readable, plain text format for expressing structured data. JSON is currently supported in many programming languages.

Difference between MongoDB & RDBMS

In RDBMS, the table contains the columns and rows which are used to store the data whereas, in MongoDB, this same structure is known as a collection. The collection contains documents which in turn contains Fields, which in turn are key-value pairs.

In RDBMS, the row represents a single, implicitly structured data item in a table. In MongoDB, the data is stored in documents.

In RDBMS, the column denotes a set of data values. These in MongoDB are known as Fields.

In RDBMS, data is sometimes spread across various tables and in order to show a complete view of all data, a join is sometimes formed across tables to get the data. In MongoDB, the data is normally stored in a single collection, but separated by using Embedded documents. So there is no concept of joins in MongoDB.

Sources:

When to Use (and Not to Use) MongoDB – DZone Database

MongoDB – WikipediaWhen to Use NoSQL and MongoDB | Blog | Fivetran

MongoDB – Wikipedia

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

HTML

What is HTML?

HTML meaning Hypertext Markup Language is used to create electronic documents that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks. It’s a form of computer language that’s used to make Web pages on the Internet viewable. It’s the fundamental technology behind everything you see in a web browser, and it’s used to build everything from simple web pages to complex web applications and services. HTML is easy to learn and understand. It’s the first and foremost language that the person will go through for the one who is learning web development.

What is the purpose and importance of HTML ?

HTML is the foundation of a website it contains the information that tells the browser what is on the page in terms of text, links, where to find images. We can also style individual words in HTML to make them bold, Italic, underline, etc. HTML allows images and objects to be embedded and can be used to create interactive forms.

HTML can embed scripts written in languages such as JavaScript which affect the behavior of HTML web pages. Web browsers can also refer to Cascading Style Sheets (CSS) to define the look and layout of text and other material. The World Wide Web Consortium (W3C), a maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentational HTML since 1997.

One of the biggest advantages of HTML is that it is free of cost, and there is no need to purchase specific software. HTML supports almost all browsers around the globe. So there is no need to worry about the website written in HTML for the browser support as the website would easily show up in all the browsers if the program keeps in mind to optimize the website for the different browsers. Another big advantage of HTML is that one can see the changes instantly just by saving it and reloading the previous HTML page. Unlike other programming languages, there is no need to run the whole code and find out where the error is. For example, if you have made the word italic, it will show up instantly on the page once saved and reload.

For the programmer to be either a frontend or backend developer, one must have knowledge of HTML as it is the basic language and all the other languages integrate with it while coding like JavaScript, JSP, Php, etc. In this class, we are using HTML and I was curious to learn more about HTML know why is it so important. I chose to talk about this because since I am doing a double major and learning more about software development. HTML is a tool that is mostly used in software and wanted to do my own research to learn more about it.

https://qsstudy.com/technology/html-and-its-importance

https://qsstudy.com/technology/html-and-its-importance https://www.sololearn.com/Discuss/1489610/what-is-the-importance-of-html

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

Code Smells And Looking Through Old Code

Earlier in the semester, we learned about different design patterns as well as different code smells, which means various issues or dysfunctions you can have in your code. I wrote one previous blog about code refactoring in regards to one of my projects, this time I wanted to look through all of my code throughout my computer science degree. I have all of my old assignments and personal projects on my GitHub page. One of my assignments for process Management was to pick an old piece of code and rewrite it using principles from the clean code textbook. One of the biggest issues I had in some of my older code was fragility. Before learning about G-Unit testing and other debugging methods, if my code worked with the input I wanted to use that was enough to finish the project. For example, if my code needed to take in an integer and I typed in a string instead, the program would simply crash. As programmers, we need to anticipate beyond what it takes for the code to function, our programs need to be able to handle various inputs and be able to redirect.

I found this video to be helpful, because one of my main issues since I began programming was writing incredibly long functions, oftentimes in my old code the entire file was one large function where each while loop performed a different task. I still fall into this habit when writing code, so I’ve been trying to follow the 20 to 30 lines long rule for function. I have also been trying to keep in mind that one function should only do one thing, and that thing should be stated in the name of the function. Code that is made of multiple small working parts is much more stable and easier to read than one long code monologue. Writing long functions also Leeds to code rigidity, which is another object oriented design smell. When you have one large function, changing one thing can drastically alter how the function works. Having an error in just one part will result in the entire code collapsing, whereas if you have multiple independent functions serving a different purpose, the rest of your code will remain stable aside from one method that is causing issues.

As I elaborated before in my previous blog post, we are at the point in our computer science degree where we are learning how to write good code, not just code that works. Taking the time to learn design patterns when building your code and looking for code smells when refactoring are a great combination for writing stable code.

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

JavaScript and Classes

In my previous post I linked an article I read about some basic things that I should know about JavaScript in my attempt to get more familiar with the programming language for my computer science course this semester. This post is a continuation of the last and necessary to getting me up to speed with JavaScript and how my course is using it. So far I have only programmed in languages like C, C++, Java and not a typescript based language. The languages I used were more object oriented and I came across this article below that caught my attention. That you shouldn’t use classes in JavaScript.

https://javascript.plainenglish.io/why-you-should-not-use-classes-in-javascript-ca960d13c625

Funnily enough the article starts off with a mention to Scheme, the first programming language I learned in a college education setting and a language I never touched again after that semester. It turns out according to the article that JavaScript itself was supposed to be based on Scheme. So, here’s hoping some of what I learned from Scheme will be beneficial down the line when I learn more about JavaScript.

One of the main issues described in the article relate to binding. That with JavaScript even referring to an object that was class defined requires the exact context in relation to it’s call. In his example it shows ‘this’ being used three times just inside the constructor method for creating the function. I haven’t really ever seen a class defined yet in JavaScript so all the humorous jokes about the language I have seen so far are starting to make a bit more sense (like an endless chain of this.myfunction.this.myclass etc etc).

Another Issue raised in the article is the fact that you apparently cannot create private variables in JavaScript. In the example shown it makes it pretty clear. I was honestly kind of shocked considering it is such a common thing used in every other language I have learned. This is definitely something I need to remember about JavaScript to avoid future errors if I ever have to create a class and intend to use encapsulation.

This article ends on the note that the author has a preference for factory functions, a topic I had only heard of and learned during this semester. While the list of reasons to not use a class are I feel minimally an issue it does help me understand that JavaScript is generally less focused on class based structures and more focused on just using objects to avoid some issues from JavaScript and issues from OOP in general.

From the blog CS@Worcester – A Boolean Not An Or by Julion DeVincentis and used with permission of the author. All other rights reserved by the author.