Course log - lennartdeknikker/frontend-applications GitHub Wiki
DAY 1. Tuesday, October 15th 2019
Course Subjects
The program started with a recap course JavaScript and later that day we had an introductory course on building tools.
Taken steps
- initialisation of a git repository for this course
- SCSS research, I want to use SCSS this time for styling variables, so I researched how to work with that.
- Installed the Angular CLI
- Refreshed my memory on the angular tutorial I did some time ago.
- The Hero editor
- Displaying a list
- Master/Detail Components
- Services
- Routing
- Brainstormed for a concept with 'Keti Koti' as a result. 'Keti Koti' means "breaking the chains". Keti Koti marks the date when slavery was abolished in Suriname and the Dutch Antilles in 1863. At the Tropenmuseum I saw mentioned that there should be more national attention for the celebration of that moment. I thought it might be interesting to try and find a way to use an application for that purpose.
- Researched Observables (rxjs)
- Researched Dependency Injection (DI)
DAY 2. Wednesday, October 16th 2019
Course Subjects
- We pitched our ideas for the Museum to get a little feedback and show what plans we have.
- Ivo gave us a workshop for using SPARQL Queries to get the data we need.
Taken Steps
- I worked out my concept. It's not gonna be about 'keti koti', but about Indonesian ancestor statues. I went to the Museum Library to do research on this topic. I found out there's a lot of information on those statues and that they might differ in visual characteristics depending on their origins.(Excerpts with general information on Indonesian ancestor statues) I asked Cindy to confirm this and she will get back to me as soon as she's spoken to someone who's an expert on ancestor figurines. I asked her because it might be nice to give some additional information about the statues and/or maybe add a game to the application where users can try and match the statues with the right origins
- I also worked out a few sketches of the application interface in InDesign and added the design to my wiki-pages.
- I tried to work with SPARQL and make a start on the queries I might need.
DAY 3. Thursday, October 17th 2019
Taken Steps
- I wrote some queries for
- getting names, locations, descriptions and imaglinks of ancestor statues
- getting a list of origin locations of ancestor statues, showing how much statues in the collection are found at that specific location By doing that, I found out that there's a lot of double entries for most statues. Each entry has a different description and seems to be a different object on account of all properties except for the image link.
- That's why I then wrote a query to find out how many objects make use of the same image link. The query gives back all different image links and the amount of objects that use it. I could use this to filter on double objects, but I chose not to since the doubles have different descriptions and namings and a lot of information would not be included. Instead I'll just treat them all as different objects neglecting the fact that some use the same picture.
- As you can see below, I exported the list of locations and corresponding amounts of statues as a .csv file, so I could plot them in Google MyMaps and get an idea of what the map should look like and how the different statues are spread based on their origin locations. (map link)
DAY 4. Friday, October 17th 2019
Today I started on building the actual application. After doing the tutorial I got a better idea of how the application should work and what components I'm going to need.
Taken steps
- Remove the remaining files from the tutorial
- Created a class for the statues.
- Initialized all the necessary components
- Created mock data in the same format as I'll get from my queries. This made it easy to make changes to my application without having to wait on my application as it obtains data from another server.
- Populated the list view with the mock data
DAY 5. Monday, October 28th 2019
Taken steps
- Made it possible to select different objects and pass their information to the detail view.
- Passed the needed variables to the corresponding components.
- Added CSS for the page header
- Added CSS to make the components look like the design I made earlier.
- update the readme
DAY 6. Tuesday, October 29th 2019
Course Subjects
- Guest lecture about frameworks by Voorhoede
Taken Steps
- I loaded all the queries into the application
- Removed the mock data and made the application use the obtained data.
- Instead of making a clickable map to have users pick locations, it seemed better to start with a location listing and make an issue to convert this to a clickable map later. This makes it possible to get a working prototype of the application sooner. Since the application is divided in different components, it shouldn't be too hard to change the menu later on.
- Loaded the obtained list of statue locations into the menu.
- made the list view obtain all statues and filter the shown objects based on selected locations. The list view will not load before the user selects a location.
- After that, it was easy to similarly pass a selected object to the detail view and have it show the corresponding description, extent etc.
- Then I had to update my CSS files to change the positioning of the different components and make it look like the design I made earlier. I had to make some changes in the design, since I will not be using the clickable map. I'm not really happy with the component structure after making these changes, so I made an issue to review and change how these are embedded.
DAY 7. Wednesday, October 30th 2019
Course Subjects
- Build and deployment instructions
- Github workflow
- Vanilla javascript and working with different frameworks
Taken steps
- I started reviewing my documentation. After we had a peer review on each others readme files and wiki's, Marissa added an issue to my repository, giving some guidelines on what I could change to make it better.
- I did some research on what elements should be part of a readme and added some headings that seemed necessary.
- I worked on my documentation, changed my wiki structure and worked out the bullet lists of the steps I took each day.
- Made issues for all the changes I want to make and added them as cards to the project to have a better view on what I still want to have done.
DAY 8. Thursday, October 31st 2019
Taken Steps
- Finished the documentation changes I started yesterday.
- Removed redundant API calls
- deployed the application on netlify
- changed dns settings to connect netlify deploy to my own domain
- created a seperate branch voor deployments
- Changed the class for statue variables to comply with query results
- Until now I used CSS to hide the statues from different locations than the selected one. I changed that and used a callback to loop through the statues instead of loading them all when making a selection.