Category Archives: CS-343

Stylin and Profilin

As I finished up the back end part of my project, I Knew I would need to figure out some HTML and CSS because I wanted my site to look good and I haven’t done HTML or CSS since a class I took in High school. Since most of my college coding has been back end stuff I needed a refresher and to look for things similar to what I wanted on my website and to figure out how to adapt them to work for me. Things that i wanted where to display different information at different places, create a better layout for the website, a search bar and, of course, stylish buttons. There was alot of helpful code examples for what I wanted to do for my website which made the process easier. One thing I knew i would need to do was create a border for the news posts since the pictures and text would scale and stretch to fit the whole screen. Once I created a margin for the posts the images and text looked alot better. I decided to bold and make the title font bigger than the description since I wanted to draw the user’s eyes when they read the posts.
I used material classes from angular to make the process of styling even easier and through css i created a better looking website by customize each individual class. I had a search bar and a button to search by source which looked a little to basic so i customized the buttons to be blue, have white text, and when you hoover on it, it places a shadow behind the button. I also made a reset button to return to the “home Page” after a search by source and made the button uniform with the search button.
Lastly I created a list of sources that were all interactive buttons that had the same style as all the other buttons on the website. I wanted to make this list a drop down menu or something that would only appear on the side if you clicked on another button instead of being constantly there, but I did not have enough time to implement this addition to the website. Overall this learning of CSS and HTML was really fun and helped me to realize that this is how I am going to be learning other coding languages in the future and applying them as needed.

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

The Key to Apis

I was searching for a good api that did not require a key to use since i had no idea how to use one or how long it would take to get one. I searched and searched but I was unsuccessful in my search and ended up looking for one that had a key and an easy process to get that key. when i found the newsApi and it said all you needed to do was give an email address and sign up to get a key, I was ecstatic at the simplicity. After I got the key, I needed to figure out how it worked and what I should do to make using it even easier. I decided like most people on the internet chose to do and save it as a string called api key and passed it at the end of each api request.
I assumed that api keys were used to log what people do with the api and at what times for both security and to keep track of the usage of the api and I was right. Api keys are important for any api to use to keep spam and other malicious users from constantly requesting from your api or server and causing a denial of service. since the people who made the api have access to the keys, they can shut a key off if it request too many times in a certain time frame. I noticed, in my search for an api, that many of the apis had strict rules about how many times you can request in a time frame. The api i was using had pricing plans for different number of requests and how far back you could request articles and how fast they would load. The one i was using was free and allowed me to request 500 times a day which was more than enough for me to show off what it does and test it. The other plans costed 449 dollars a month and 849 dollars a month. these kinds of api that are hosted and easily accessible have the ability to make a lot of money. The other thing I noticed was that they didn’t allow it to be used for commercial use which means if you pay for the larger plans you would be just pumping money into the service without getting anything back.

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

CS343 Final Project – Blog 3

In this blog I hope to show what a beast typescript animations can be. To do so I’ve isolated one animation in a set of ten that control the slide in animation for each page.

transition('HomePage <=> *', [
  style({ position: 'relative' }),
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%'
    })
  ]),
  query(':enter', [
    style({ left: '-100%'})
  ]),
  query(':leave', animateChild()),
  group([
    query(':leave', [
      animate('400ms ease-out', style({ left: '100%'}))
    ]),
    query(':enter', [
      animate('400ms ease-out', style({ left: '0%'}))
    ])
  ]),
  query(':enter', animateChild()),
])

On the first line you’ll notice I have the transitions from the element I currently am on, “HomePage”, representing the Home Page component, to a placeholder representing any other component. Next, there are queries which represent what to do when the animation is triggered. The components slide in from the left and send the old component out the same way, and that is what the left 0% and 100% would seem to represent; with of course a set time for the duration of the animation.

           The result of this is that the new component is placed virtually to the left of the current component, then the new component is slid in eventually having its left side arrive at the 0% mark as expected, while the old component has its left side shifted to 100%. This making it virtually placed to the right, where it presumably is then removed.

           When I first added these animations, they would not trigger correctly and often only in one direction. As mentioned, there are a total of ten, which is the total after added one to represent moving from any defined page to any random page, or vice versa. That way no matter what page you are on the correct animation triggers. However, the next problem I ran into was that adding a whole other element to the left of a page, essentially making the page 200% wide even for a split second, would cause the horizontal scroll bar to appear and the window would jitter. This was quickly remedied by turning off the x-overflow, or rather setting it to hidden, in the css properties for the div in the app component html that contains the router for all these elements. With that done, I had slick page animations and no nonsense!

           One last touch added was something I realized the webpage could use when testing the animations. I noticed that when the animations trigger it would slide in the other page but the viewport would remain at the same level as the last page. It didn’t make much sense to me that a page be loaded in with the user at the bottom of it. So I added an additional method to scroll the user to the top of page each time they clicked on a button and a new element slid in.

<button mat-flat-button color="primary"
        routerLink="/about-me" (click)="returnToTop()"
        [ngStyle]="{'font-size': button_font_size + 'pt'}">
  About Me
</button>
returnToTop() {
  window.scrollTo({
    top: 261,
    left: 0,
    behavior: 'smooth'
  });
}

From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.

CS343 Final Project – Blog 2

On the last blog I had mentioned the painstaking process of getting my sticky header to function correctly and especially so when accounting for the top margin and mobile scaling. I have provided the code below for the sticky header.

 @HostListener('window:scroll', ['$event'])
 onWindowScroll(e) {
   if (window.pageYOffset > 251) {
     let element = document.getElementById('navbar');
     element.classList.add('sticky');
     element.classList.remove('non_sticky');
     if(window.innerWidth <= 850) {
       this.top_padding_var = 87;
     } else {
       this.top_padding_var = 43;
     }
   } else {
     let element = document.getElementById('navbar');
     element.classList.remove('sticky');
     element.classList.add('non_sticky');
     this.top_padding_var = 0;
   }
 }

What this is doing, essentially, is adding the sticky header to the document when past a certain point and removing the non-sticky variant. The toolbar is nested inside a non-sticky div, inside the sticky div, which is present at the top of the page below the header. When scrolling past a certain point the non-sticky version is “swapped” for the sticky variant which is fixed to the top of the page. Here below is the code for this sticky component where you can get a better idea of what I mean by nesting.

<header class="animated fadeInDown" id="navbar">
  <div class="non_sticky" [ngStyle]="{'height':header_height}">
    <app-toolbar></app-toolbar>
  </div>
</header>

You can see here as well that the height of the container for the toolbar is determined by the variable, header_height. I mentioned previously as well that considerations were made for mobile use and this is one. Below is the method that determines this variables value.

resize() {
  if(window.innerWidth <=850){
    this.header_height = 40;
  }
  else{
    this.header_height = 60;
  }
}

Increasing the height makes readability on mobile more effective as well as providing enough space for the buttons to fit in the bar. Some may have noticed a variable being assigned in addition to the sticky-header being added/removed, which highlights another challenge of this particular bit of styling. As mentioned, the sticky header simply swaps in a fixed version of the normal toolbar, but in doing so this new fixed element has a higher z-index and does not “touch” the other elements.

As a result, this new element naturally covers whatever was behind it just a moment ago. To remedy this, I added this variable to the method to dynamically add padding to push the elements on the page back down where they belong. Honestly, it feels like trickery the way everything works together but when it does its nearly seamless unless you know exactly what to look for. In the next blog I will discuss a part of this element that I did not include previously: animations.

From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.

Final Presentation Eve

With CS 343’s final presentation tomorrow, this will be the last post for this project. (Unless I choose to keep playing around with it later) The work on this project has really helped me learn HTML, CSS, and TS.

The newest feature I added to my Pokedex SPA was having the background colors linked to the selected pokemon’s typing.

This took a bit a time, figuring out how to dynamically link the HTML background color to the TS pokemon data. I eventually found the use of angular’s [ngStyle] to be very useful. This method injects a JSON object with CSS properties defined in it. With it, I simply used a method in the TS to grab the pokemon’s typing and return a created JSON object with the CSS property ‘background’ with either a solid color for single typing or a gradient for dual typing.

This project was a lot of fun and I’ve learned a lot. I am tentatively looking forward to tomorrow’s presentations.

From the blog CS@Worcester – D’s Comp Sci Blog by dlivengood and used with permission of the author. All other rights reserved by the author.

FINAL PROJECT Final BLOG

This week was so stressful, I was preparing for the finals and working on the final project for the CS-343, today we wrapped up everything in the project even the presentation slides. The good thing is I managed to change the buttons style, that was bothering me a lot, but I found out that I … Continue reading FINAL PROJECT Final BLOG →

From the blog CS@Worcester – Shams&#039;s Bits and Bytes by Shams Al Farees and used with permission of the author. All other rights reserved by the author.

Final Project pt.3

After starting work on our front end code we needed to create a method to allow users to search our database for a specific ‘artist’ name or by all artists that contain a specific letter or String entered by the user. For example, if the user input the letter “A” then they would be presented with a list of all artists whose names start with “A”. In order to create this function we needed to start with the backend.

In our Java rest api we needed a get method to search our database. The query in SQLite would be “select * from artists where name like ..%”. The “..%” is where the name of the artist we are searching for would go, but since we want the query to be unique to user input the “%” basically acts as a “don’t care”. This allows for whatever the string is that the rest of it doesn’t need to be specified and all artists will be returned that contain that string. To allow our users to input the string to be searched for we setup the query slightly differently in our backend. We use the query “select * from artists where name like ?”. The question mark acts as an operator to take user input. Then we use the statement:

statement.setString(1, name + ‘%’);

This statement sets the string we’re searching for to the first (and only) input from the user and then adds “%” after the string. Here’s a look at our full method: 

@GetMapping(“/artists/{name}”)

public ResponseEntity<Object> getArtistByName(@PathVariable String name) throws SQLException {

   PreparedStatement statement = 

conn.prepareStatement(“select * from artists where name like ?”);

   statement.setString(1, name + ‘%’);

   ResultSet rs = statement.executeQuery();

   ArrayList<Map<String, String>> results = new ArrayList<>();

   while (rs.next()) {

       Map<String, String> temp = new HashMap<>();

       temp.put(“ArtistId”, rs.getString(“ArtistId”));

       temp.put(“Name”, rs.getString(“Name”));

       results.add(temp);

   }

   return new ResponseEntity<>(results, HttpStatus.OK);

}

Then in our front end Typescript code we connect to the rest api backend with this method:

getArtistsByName(str: string): void {

 this.error = null;

 let tempStr = str.replace(” “, “%20”);

 this.http.get<Artists>(‘http://localhost:8080/artists/&#8217; + str)

   .subscribe(response => {

       this.searchArtist = response;

       console.log(response);

     },

     (error: HttpErrorResponse) => {

       this.error = error;

     }

   );

}

This method allows us to get all the results to the front end so that we can then print the results on our web page for the user to see. We continue to do this by implementing our html code to display these results in drop down lists for the user.

The idea of our project developed into a web page that allows users to search through a database of music artists and their albums and allow the user to select an album that they wish to download. They cannot truly download music from out web page but this is a framework for the idea of a web page with that purpose.

From the blog cs@worcester – Zac&#039;s Blog by zloureiro and used with permission of the author. All other rights reserved by the author.

Final Project

My final project has not been an easy task to deal with thus far. After going far in depth with one of my designs, I came to discover that the use of angular material alongside bootstrap which caused quite a few problems. I have decided to do a full overhaul into angular material. The reason I am choosing angular material is because there seems to be more typescript capabilities while bootstrap seems to be heavy on javascript and css. By going down this path I have been able to make steady progress with my current version of my application which at the time is mostly an interactive sidebar. The main concern I will have this week is being able to make the workouts appear on the home page. I would like to be able to use angular to create a visually appealing layout which will allow for the user to go through the different workouts and select the ones that they would like to use. If I was able to have more time on something like this my end goal would be to add in I/O devices such as being able to print your workout after it has been created. Due to time restraints I will have to remain with simply being able to select and track the wanted workouts on the app. Another large problem I will have to come up with a solution with is whether or not there will be a way to save workouts, or have the workouts appear and when the next desired workout regime is needed, to simply delete the old and then add to the new one. Another issue I have run into is being able to seamlessly add in new workouts to the app without having any effect on the previously existing workouts. This next week will be the time to grind out any and hopefully all of these problems. I have been diving deeper into angular material in order to get a better understanding. I have also been researching more html and css as I have not had much prior experience with these. This has caused me quite a bit of stress because very minute changes have broken the entire app, but I believe that by completing this I will have gained the necessary knowledge of what will be needed in the future. I am excited to complete this app but it is also been an extremely difficult time which will all pay off in the end.

From the blog CS@Worcester – Journey Through Technology by krothermich and used with permission of the author. All other rights reserved by the author.

CS-343 Final Project – Part 3

Over the past week, my work on my CS-343 Final Project has been focused on creating a more interesting layout for my components. I have not changed the function of the program or added any more features yet, but I think I have made some great progress towards making the GUI look more like I planned it to in my wireframe. The program currently looks like this:

I managed to create this layout by making use of Angular’s Grid List material. Using material.angular.io as a reference, I was able to figure out how to import this tool into my project and use it to arrange components with the <mat-grid-list> and <mat-grid-tile> tags in my app.component.html file. By combining this information with what I learned about CSS and HTML last week, I was able to create the layout pictured above.

In addition to working on the layout, I made some major changes to the project’s organization. One significant change was the creation of a new Angular component: the options-menu. Previously, the input forms for changing width and height were simply parts of the app.component.html file. I decided it would make more sense to create a new component so that these options and the new options I plan to add this week will stay organized in my new layout. Another major change I made was in the way data is passed between components. Before, I simply had the input forms in the app component update the size of the rectangle by searching for it by its id. Now, the forms actually pass data from the options-menu to the rectangle using a data service. I decided to implement this method of data sharing after reading about it in this article on angularfirebase.com (see the section on Unrelated Components). I had difficulty understanding how a data service works at first, but I eventually understood it by messing with my own. Creating a data service has definitely made passing data between components far simpler than it was before, and I plan to add more to it this week.

As I am due to present my completed project this Friday, I have less than a week to finish working on it. My plan for this week is to finish adding the features I planned for the project in the beginning. This includes making a simple puzzle game that can be played in the rectangle area, as well as more options to configure it besides the width and height. I would also like to work on cleaning up my layout to make it more visually appealing. Finally, if I have time, I would like to create a back-end server that will allow users to store their scores form playing the game. It seems like a lot to add, but making this layout and creating a data service have only made me more comfortable working with the Angular framework. I think I will be able to complete much of what I have planned in time for Friday.

From the blog CS@Worcester – Computer Science with Kyle Q by kylequad and used with permission of the author. All other rights reserved by the author.

CS343 Final Project – Blog 1

Since this semester began, I’ve known exactly what I wanted to do for my final project, and even before the semester I’ve had this project kicking around my head. Ever since I saw my good friends personal site years ago, I thought it may be exciting to create my own, even before I even considered doing computer science. So, it should be obvious then, when I found out we would be creating a web page for our final project I knew this was the perfect opportunity to finally begin this project.

I knew that this personal – or rather, professional – site would be an interactive resume of sorts, a really incredible showing of capability that I could link to on resumes and in online professional profiles (LinkedIn, Handshake, etc). Consider this exchange:

“Have you done any web development?” asks a potential employer.

“Well sir/madam/neither, if you simply navigate to [web address] you’ll see the extent of that experience”.

“My goodness, this website looks amazing! I have no choice but to make you the president”.

As such it has to look good, like really good, you don’t become the president for nothing (you get it for being related to someone important). So, if I wanted a website that would make someone important adopt me, I needed to perfect the aesthetics of the website. I would need interactive elements and animations, a pleasing color palette, a readable layout, and of course sections on who I am and what my accomplishments are. I will, of course, not be linking this blog to it considering the beginning of this paragraph.

The first element I knew I wanted was a sticky header, or a toolbar that would “stick” to the top of the page once you scrolled down far enough for the top of the toolbar to touch the top of the page. This would mean that users could change page even while far past the header of the site. Another element I wanted was large tiles representing each page that would expand to fit the whole screen when clicked. However, I realized that it was incredible difficult to implement and also redundant considering I already had a way to access any other page at any point a user may be on said page.

I would reach the previous conclusion long after I had already begun, starting with the sticky toolbar. Folks online have implemented similar designs, so I began with those that were most effective and simple as a template. The way it works is actually very clever: a typescript method is used to check the yOffset of the page and if it goes past the offset of top of toolbar the toolbar is changed from a regular element to one that is fixed at the top of the page. As such, the elements on the page below would normally be covered slightly by this bar, however I have it dynamically add to the top-margin of the page to shift the content down appropriately. When this happens, by painstakingly finding the exact right values, it all appears perfectly seamless.

This work took, no joke, 4 hours or more, as I added scaling for page width such that when the page is shrunk horizontally as it would be on mobile the header and toolbar grow in height to accommodate the text and buttons correctly. However, I’ve already gone long on this blog so I will continue in the next one!

From the blog CS@Worcester – Press Here for Worms by wurmpress and used with permission of the author. All other rights reserved by the author.