Week 9 (Exploration week)
HI. Starting to pick up the technical skills that is needed
This week (Week 9) is exploration week, we will not be having any lecture classes. I personally planned out a schedule for me to go through crash courses on YouTube to have an idea on the technical execution of my microsite.
Monday - 19/07/2021
On Monday, I started with a beginners crash course on React.js.
Objective: To understand how React.js works and what to expect
Duration: 2:25:26
Time spent: Approximately 6 hours (9:30am - 4:30pm)
Outcome: Through this short course, I was able to learn:-
the use of npm, and how I could see changes through a localhost port
the files system of React.js, which uses .jsx to create individual components
able to understand the working flow of React.js -- build UI components individually as .jsx files and combine them together later is the main App.js
there were a lot of JavaScript terms that I do not quite understand (which I will need to go through it one by one)
Concerns:
After going through this 2++ hours crash course, I realized my knowledge in JavaScript is not strong enough. There were terms that I do not really understand the functionality of it and some terms are native terms in React.js that I will have to look into too.
Because everything was very new to me, I spent a lot more time that I had expected to try and process and understand as much as possible. To be honest, at this stage, I am starting to feel anxious on my technical execution for the project.
Tuesday - 20/07/2021
On Tuesday, I decided to go back to basics, and review back the basics of certain JavaScript terms and React.js terms. For this session, I watched several videos.
Objective: To understand the fundamentals of JavaScript and React.js that were primarily used in the crash course on Monday
Videos:-
- Introduction on React.js -- https://bit.ly/3kLrlqO
- ES6 Modern JavaScript -- https://bit.ly/3x1yxl4
- React Hooks -- https://bit.ly/3iEDWJO
- Object-oriented Programming in JS -- https://bit.ly/3ruxHMF
Duration:-
- Introduction on React.js -- 4:32
- ES6 Modern JavaScript -- 50:04
- React Hooks -- 13:14
- Object-oriented Programming in JS -- 1:02:48
Time spent: Approximately 6 hours (10:30am - 5:30pm)
Outcome:-
Deeper understanding on React and how it will help in my project
Understanding how certain JavaScript terms works and how to implement it
Know the different React hooks that can be used in React.js to speed things up
Learn about OOP in JavaScript to understand the flow of JavaScript
Concerns:-
Even after going through the basics, there were still parts that I do not quite understand or how to implement it myself
Because I am new to React.js, the React hooks are definitely not something that I could pick up in just a day
I understand that it is not possible for me to fully understand how everything works in just 2 days time, but this is definitely stressing me out in terms of my project's technical execution
I feel like I would need to learn and pick up things along the way when I am starting to execute my project. This is the most viable way I could think of now to be able to catch up with things quickly. However, because my project is still at a planning phase, I have yet to prepare assets to be able to start executing my website.
Wednesday - 21/07/2021
On Wednesday, I decided to proceed with a Three.js crash course according to plan
Objective: To understand how Three.js works and what to expect
Duration: 57:02
Time spent: Approximately 6 hours (10:30am - 5:30pm)
Outcome:-
able to learn the overall concept of how Three.js works
how things are implemented to set up a scene with 3D objects, cameras, lightings, etc.
able to learn certain important components that are common and necessary
Concerns:-
the video covers the basics in Three.js, and I am starting to wonder the possibilities of importing our own 3D objects and whether the textures/materials will still remain
I am also unsure on how the UI components could be added to the 3D space
I am also worried about how the animation works in Three.js if I would like my 3D objects to be animated
I will also need to set up a camera movement that is suitable for my scene
Compared to React.js, Three.js was easier for me to understand, maybe because the terms that were used are similar to Unity3D. And because I have a certain level on 3D software, some terms were relatable and easy to understand. However, I am not fully confident and there are still certain parts where I have doubts.
Thursday - 22/07/2021
On Thursday, I decided to proceed with another Three.js crash course according to plan
Objective: To understand how interaction works in Three.js works and what to expect
Duration: 2:35:25
Time spent: Approximately 6 hours (10:30am - 5:30pm)
Outcome:-
how to implement interactions on 3D mesh in Three.js
how to implement event listeners
the use of vertices to make the hover effect more interesting
Concerns:-
use of personal 3D objects
camera set up
animations on 3D objects
Compared to the previous Three.js crash course, this one has more interaction and complication. Because it uses a hover effect not only on the mesh itself but on the vertices of the mesh. There were some parts that I could not catch up with and was quite confused but I guess that is normal for a beginner like me.
Friday to Sunday - 23/07/2021 - 25/07/2021
After 4 days of technical crash course, my brain was basically "fried". I spent the remaining days of the week to wrap things up. I went through different articles that might be helpful for future reference and review back the crash courses to refresh my mind again.
I am aware that I could implement React.js and Three.js together with something called React Three Fibre. I went through a short demo in CodeSandbox to see how things are implemented together. I sort of understand how it works but again, I am not totally confident with how everything could be implemented to my project itself.
I decided to have a Plan A, B and C for my technical execution, just in case I can't make things to work.
Plan A is to execute with React Three Fibre, but because everything is very new to me, I cannot confidently say that I am going to be able to successfully deliver my project.
Plan B is to execute using plain HTML and Three.js, because my knowledge on HTML is still stronger than React.js, I might feel more comfortable.
Plan C is to execute everything in Unity3D, because I have more experience in this software compared to JavaScript.
Among these 3 plans, Plan A is the one that I want to implement the most but it also worries me the most because of my inexperience. Plan C would be the final choice and also something that I am trying to avoid because my future aspiration is towards UI/UX industry and I feel like learning JavaScript compared to Unity3D would be more useful to me in the future.
My next step would be having a more solid idea on the experience of the website to plan out the technical implementations required in different areas of the website. I will also go through the confusing parts in JavaScript that I would need clarification on and hopefully approach my advisor (Ron) to have a better understanding.
These are so far the technical enquiries I gather throughout the week, I must admit it was pretty heavy to continuously go through different codes for the past few days, but I do not want to give up just yet, I still want to try out the different possibilities.
That's all for now, in the next blog I will be sharing my progress on the ideation and planning of the website during the exploration week.
コメント