Forem: Ririio

Starchart: 1.0a

Ririio — Wed, 19 Apr 2023 22:17:17 +0000

We're nearing the end of the project development life cycle. We're simply adding changes based on customer feedback, and other important features that we still haven't implemented.

For this week I focused fixing small bugs and changes, to ensure that we get to release 1.0.0 with as little issue as possible.

Certificate

I had to create an information page for what a certificate is, and why it is important. Another piece I had to consider when creating the page is to ensure that it would make it easier for new developers to understand how everything works. Simply providing them with information wouldn't cut it, I need to ensure that it's less technical as possible.

What I have noticed with information pages is that they are meant for people who have an understanding of the concept that they want to work with. It makes it so that there are new information piled up on top of the one they want to learn, which can be a hassle.

Conclusion

This week has been a "boring" week, at least according to the professor. There aren't as many issues as expected, and everyone is working on areas that need patching. Overall, the road to the release doesn't seem as rocky as we had foresaw.

Starchart: Release 0.9

Ririio — Mon, 10 Apr 2023 16:44:49 +0000

Starchart: Milestone 0.9

This week has been more productive and smoother than previous ones. I focused on improving the certificate section of our project, and gathered valuable user feedback to identify potential areas for enhancement. Also,

Working with a partner

For this week's milestone, I paired up with one of my fellow contributors to work on an issue that touches both our area of expertise. I have always held my fellow contributors in a high standard (doesn't meant I don't right now), and always push myself down as someone who is beneath all of them.

Of course in a sense, they are better than me in regards to their knowledge, but it did fill me with comfort knowing that I can still contribute to the project even by the smallest thing.

There are benefits of working with someone on fixing an issue. One of the main benefits is to foresee oncoming issues quicker and more efficient. When I was writing my code, he told me of bugs I did not even noticed, and probably would have wasted a lot of my time resolving.

By the end of our session, we published a PR, and although usually I tend to overlook a bunch of things, and my reviewers points it out, for this week there wasn't much.

User Feed Back

I was tasked to have someone who has no connection with the project to test the website, and write notes on any issues they found, and any improvements that we can work on.

Aside from minor suggestions like using "Create" instead of "Manage" for the button name of the card

Most of issued stemmed from "Create New DNS Record" page. There aren't enough information for him to actually know what he's suppose to be doing. The labels provided and tooltip aren't good enough to actually understand anything. Although, I like the idea of a tooltip, but the user seems to ignore this valuable tool.

Conclusion

It was fun working with another person on an issue, and I would want to do it again if given an opportunity. Having to have someone review your project feels nice to have, and an outsider's perspective on teh code does come a long way.

Where laziness is destructive

Ririio — Mon, 03 Apr 2023 03:26:07 +0000

I've been noticing recently that I lack the understanding of the framework I'm working on. I've been realizing it for quite some time, but I never actually fully come to learn until I landed a PR on our repo.

The Problem

It was a simple download icon that is currently non-functional. I thought it would be simple, but I hit a wall immediately right after. I recall that I used fs to write or readFile from my repo, I used it, and it wasn't working. After searching for a while I realized that remix run is a "client-side" web application, meaning that access of the local file system is restricted by default due to security reasons. I learned that I can bypass this issue by using a blob.

Once my PR was up, my professor told me that I could actually make a much cleaner and better approach by using a concept developed by remix called resource routes. He simply made a recommendation, and still approved of my PR, but it made me realized that I am lacking knowledge with how things in the repo work that is not part of the UI. I decided to c

Never Charge Blind First

When working with an area you are not familiar with, never try to charge in first, and learn along the way. It might sound simple enough, and you might find it ridiculous that I would bring up such an obvious topic, but I've noticed that some of of my fellow junior peers would head straight through a code, with the thought that their knowledge of programming would help them along the way.

They will view the code, and if they slightly understand it, they'll pick from there and move along. I find this destructive, because you aren't building a stable foundation. When I worked with the UI, I already have an understanding on how I want things to be built, simply because I read through the docs and understood what I'm using.

It's like solving a jigsaw puzzle; you always start building the outline, before you even move onto the actual picture.

Conclusion

It might be obvious that we should always be prepared for what we are working on, but we tend to ignore the fact due to our own pride/laziness. That we can pick up on things later on, and we don't need to learn everything as of right now.

Starchart: Certificate back-end integration

Ririio — Sun, 26 Mar 2023 22:14:55 +0000

Starchart: Certificate back-end integration

The progress this week hasn't been ideal when it comes to contributing to our open source project starchart. Learning how the back-end function works took an entire's day of work. Partner it up with my other project for my other course, and it just feels overwhelming. Of course, the fault can be mainly attributed to my irresponsibility of handling the time I spend with individual courses.

Learning how the function works

Looking through the code presented by the certificate queue function, it can be a bit confusing, when looking through it the first time. When first looking through the code, sweat and a sense of panic engulfs me as I usually do. When it was me at the start of the course, I would just suck this up, and try to learn everything by myself, which can lead to more confusion, and time wasted. However, that wasn't the case this time around. I asked my peers on how things works, which increased the speed of my progress.

ChatGPT

One thing I did that other people may considered as "taboo", is the used of ChatGPT. I would never suggest this to anyone who just wants an easy answer. The benefits of AI for us developers is not that it can write us what we want (at least for now...), but that it provides us with information that can help us better our knowledge. I will provide you with an example from how I tackled my issue.

When starting my issue I tend to look at what other contributors has done in the area I will be working on. In this case I'm looking at the UI. Thankfully enough, a fellow contributor had already merged a PR with DNS-Records. I messaged them, and asked how they did their code, but unfortunately they didn't respond(Not their fault, it is a busy semester), then I went to ask another who developed the function that I will be using. Unfortunately, they have a class that day, and couldn't answer my question at the moment-- another few hours spent figuring things out

Do you notice a pattern? People are busy, and there's nothing you can do. You can figure things out yourself, but more than likely you would not find an answer. I do recall being mentioned from the previous meeting about a file that does the function step by step that being dev.tsx. There I noticed another similar pattern from the DNS-Record, and that is the "action". Thus I asked ChatGPT...

What condition can cause "action" to run?

Of which it provided me with the information that I wanted

That is when everything clicked to me. I finally understood how he handles the connection, and I managed to finally start making progress. By the end of the day, I finally managed to create a certificate, and although it wasn't perfect it did provide me with a sense of ease that I may actually complete this by the end of this milestone. I forgot to mention that after knowing this, I figured out that action is actually a remix route module, which boosted my understanding of it.

Conclusion

This week has been quite stressful, but thankfully it made me realize the importance of information. ChatGPT speeds up our ability to learn things, by providing us fast and accurate answers. It may not have given me the answer I "wanted", but it did provide me with information that I "needed".

Working with playwright

Ririio — Sun, 19 Mar 2023 03:52:17 +0000

Testing has always been a major part of creating a stable project. Having a way to test major components of your work, ensures a stable development. For this week I learned writing tests using playwright. It's a testing tool design for an e2e testing with modern web application.

Changing it up a bit

For the past several weeks, I've been working on the front-end side of the project. Working with the Figma design, and then moving on to header and certificate implementations. This week however, I decided to go through the issue I was tasked on by one of my peers after each successful PR.

Testing was something I was quite afraid of tackling. I had some experience with my previous courses, but I never got to understand how it actually works in terms of E2E-- it turns out it was much more interesting that I thought.

Benefits of using playwright

Playwright provides developer a myriad of tools on how they create a test. What made me like it is the extension that it has for VSCode users. Of course not everyone would be using it, but hear me out for a second.

When creating your tests, unless you are fairly knowledgeable with what you are doing, you will consistently re-run them after each change, and hope that the next run would be a success. Of course a proper testing tool provides you with a reason as to why it fails, but the thing about playwright is that it allows you to visually see where the error occurs through the use of trace.

Trace allow us to view all the calls you make in the test, and show you where an error has occurs, whilst providing you with a visual presentation.

Another great tool is a video presentation that shows where an error has occurred. These tools are great to have for a much easier testing environment.

Another thing I want to address are specifically targeted towards VsCode developers. When working with playwright, they actually have an extension you can use to make testing much easier.

The extension allows you to run all or individual tests. It's a great tool to have when you're on the creating process

Pick a Locator - It's a great tool to have to allow you to see how to call a specific element on the test file as shown in the image below

Record New - It's a great tool when creating new files, because it records what you do on the page, and records it

Record at cursor - It's a water down version of record new, specifically used to do design to add new lines depending on what you do on the website

Those tools are mere addons that you can get when you install the extension. They are never perfect and may not give you the output you might need, but they are a great tool to help you ease the strain of creating a test.

Conclusion

Testing was and still is a fairly difficult portion when developing, but having great tools like playwright can help lessen the burden of writing a test.

It's never wrong to ask

Ririio — Sat, 11 Mar 2023 04:23:00 +0000

Working with other people can be daunting. You are always afraid of what to say; thinking that if you are wrong, you'll be looked down upon by everyone. While, it might happen, and let's be honest not everyone you will work with will be a saint, you shouldn't let that prevent you from saying what's on your mind.

When you're on a meeting, asking your peers to explain a topic you have no understanding of isn't a bad idea. You might not be the only one who feels the same way. By asking a question, you are allowing everyone to be on the same page, and not just those who are talking.

Never ask to "know", alway ask to "understand"

Let's put you on a scenario. You are new to coding, and in this week's lecture your professor talks about switch case. By the end of the lecture you were confused, you asked your professor, "what does switch do?" they provide you with a detailed answer, and be done with it.

A few days later you came across a problem when writing an assignment, when you wrote your switch, you had problems with your code continuously going through all condition even after it went through the first one. Now you're in a predicament, and confused again as to what to do. You asked your professor again, and he explained that you are meant to add a break at the end of each case. The entire problem could have been avoided if you simply ask "how does switch work"? Of which you will be provided with multiple scenarios, and how the entire process goes about.

Of course with a question regarding "switch" it is very unlikely for anyone who has a low-mid level of understanding of programming to not even mention something as small as "break". However, if you consider topics that are much more complex, and require deeper understanding, the impact of your question can drastically affect how the information is going to be provided.

Questions leads to even more questions

During a meeting this week in regards to a project. We were discussing about admin's ability to control a student's account.

While everyone was discussing a myriad of things in regards to UI and logic I noticed a problem. I recall they mention that the deletion of an account follows a sequential order dns-records -> certificates -> user, that's when a question popped into my mind "what would happen when the user creates a new records just as they are being deleted by the admin?"

I was afraid of asking it at first. "What if I'm just overthinking? The likeliness of that scenario occurring is close to 0, and I'll probably look dumb," I thought to myself. But I swallowed up my fear, and waited for an opportunity to ask my question. It turns out that we didn't even considered the possibility, and such problems did occur in past projects according to our leader, so now we are developing a deterrent. It wasn't a huge issue, but it did provide me with an insight as to the importance of asking questions.

Conclusion

Always ask questions with the mindset of wanting to learn; it helps you deeper your understanding of the work instead of simply knowing the answer to it. When you have a question, it is never bad to ask. If it's simple, then the answer would take only a few seconds(not a lot to deter the entire discussion). At the end of the day, us developers are in a constant state of learning, questions help us deeper our understanding of the digital world we dipped our toe in.

Be more organized

Ririio — Sun, 26 Feb 2023 04:40:26 +0000

While working with the project, I realized how unorganized I was.
My components are all over the place in the directory, and the logic are all at random location.
I never realized this as much when I do my coding, but as I was reading reviews for my pr, it was pointed out to me
by the owner of the repo.

If it works, don't bother

I have formed a habit; if the code works as intended, and there are no ongoing issues nor bugs, that it's a "good" code.
However, that is far from the truth... a code might work right now, but it doesn't make it good. I tend to forget that technology grows, and so will any project I make that are user oriented.
Especially, when this repo is open source, and many contributors will be wanting to try their hands on it. When they want to fix a bug that may occur in the future, or some that I have overlooked during the development process; they won't be able to, or they will have a hard time just trying to understand.

Consider the area

Throughout the review process of my previous PR. The owner of the repo was providing me with insights in regards to fixing my habits.

When all logic are spread across multiple components. Never add logic to all of them, only do so towards the parent components, and pass the output as a props that can be used by the child.
If the code looks long, read through it all over again and see if you are able to split the code into smaller components. It might require for you to create more files, but if you group them all together it won't be an issue (sometimes quantity can lead to better readability). Of course, it doesn't mean that you should always have multiple files. However, just like how I was taught from my previous courses, if you have to repeat a logic, it's best to write a function to condense it, which in my case a bunch of components.

Learning Experience

This week has been more insightful than my previous week working on this project. I realized how to ensure that future developers and peers alike can access through my code without any issues. I also started to get better at handling conflicts with my PR.

Working with the Basics

Ririio — Sun, 19 Feb 2023 05:30:55 +0000

What I have come to realized as I work with the repo is my lack of understanding of what I'm even doing.
I write code base on the research I've done, but it seems that I don't try to understand them, and just look at the code and implement it based on what I need. I realized that this type of thinking is flawed and can never work.

Copy and Paste

I've always researched my issue, and go directly into the code, and just copy and paste what they have, only changing a bit to fit the code that I am writing. The code works perfectly, but I learn nothing from it. New developers tend to simply just copy whatever they see, and forget about its functionality later on, but I find that mindset destructive.

I have a peer that I am working on with a project, and during one of our weekly meetup, they were stuck on a piece of code. I told them to show me the problem, and I realized immediately what they were doing wrong (they were using map for a non-array object). I told them to check the console, and it literally shows them what the error was, but it never came across their mind. I wouldn't have had any problems with it, but it's a repetitive issue I had working with them.

I'm New

When the information you need is given to you directly. You never even bothered asking yourself how it works, you go straight to the answer. I noticed that junior developers such as myself, don't bother understanding what they are doing. We tell ourselves that "I'll learn about this later on" or that "It's not important". We mask our lack of knowledge with our experience. We tell ourselves that we are new, but never tried to take a stride to get better.

Of course, not everyone will have such a thorough understanding of their job. Regardless of your experience, you are bound to not know something, and the beauty of programming is that you are constantly learning-- there is never an end in sight.

Conclusion

This week has been an eye opener for me. It made me realize that I should try to understand the code I'm writing, even when I think I know it already. Never forget the basics, and continue working to gain experience. There is no developer who knows everything, only those who strive to learn.

Working With Chakra

Ririio — Sat, 11 Feb 2023 22:39:54 +0000

This week I worked with Chakra in creating our repo's login and header's UI. It was fairly difficult working at the start, because I wasn't too sure as to what I'm suppose to be doing. It would have also been much more difficult if we didn't have a template to follow in terms of designing those two components.

Difficulties

It was fairly difficult to create the website exactly as what the template has shown. A lot of the UI's are mere designs that are easy to make online, but fairly difficult to code. It took a bit when it comes to aligning the contents perfectly, or having a font size that doesn't cause you stress for not being the right size.

Another portion that I struggled with is my lack of understanding of how the back end works. Calling the user required me to ask for my peer's help, because I didn't quite understand how everything was going (shows my lack of experience/knowledge).

What I learned

What I learned from this week is that it's not a bad thing to ask for help when you really need too. A lot of your peers started from where you are right now, and they have met people whom had helped them get through difficult situations. Unless, you don't learn from the mistakes you make or the teachings you receive, then you shouldn't think you're a bother to people.

Rebase is confusing

Ririio — Fri, 03 Feb 2023 23:10:38 +0000

It was engraved into my mind the importance of doing a rebase. Having all commits compiled together into a singular one sounds amazing, and clean when sending out a pr.

Rebasing didn't sound bad, the steps were actually quite simple

Push a commit everytime you completed a section of your overall task
Once all is done, do a rebase interactive to main from your working branch and squash all of them together
Checkout to your working branch and push it

The Problem

The problem occurs when someone reviews the code, and I wanted to pass my newly added code. The rebase interactive doesn't seem to contain anymore values. That's a problem, because if I'm going to be pushing my updated code, I will now have two commit as to one. It doesn't sound like that big of a deal, but if you have to push a code every time someone does a review, you'll end up with several to up to a dozen commits on your pull request like this pr did.

How to solve the issue

The steps I told at the start was not all wrong, but if you noticed one thing, I actually never do a pull upstream. What do you think would happen if I pass a code that is behind the main branch? I would have conflicts. If I simply keep on doing what I did with rebase, I will consistently have conflicts. Now you're asking, what are the actual steps onto doing a proper rebase? the same steps apply

Push a commit every time you completed a section of your overall task
Once all is done, do a rebase interactive to main from your working branch and squash all of them together git rebase main -i

Now you add extra steps...

Do a checkout to the main branch git checkout main
Update your main branch to its latest instance through git pull upstream main
Checkout back to your working branch

Now instead of pushing it, you do another rebase but there's no need for interactive, because you only have a single commit

Remember to do a force push, because you are trying to alter a previous branch history git push -f origin main

Always make sure that before you do anything, that your main branch is always clean. If you are not sure simply do a git checkout -B main upstream/main, this should reset your main to the latest commit from the original repo.

Remember that upstream is only for fork repo, you should be using origin from your own

Project Planning

Ririio — Fri, 27 Jan 2023 04:58:47 +0000

This week we had a meeting regarding the implementation of Release 0.1 of our project starchart. There was a lot of information being thrown around regarding features we have to implement before the initial release. At the end of the discussion professor had asks around regarding features we'll be implementing for the initial release, and I was provided with the design template, and managing of eslint, prettier, and typescript configuration.

TypeScript

I have actually never written anything from typescript before. I did contribute in some ts repositories during hacktoberfest, but my knowledge only came from reading the code, and ensuring I implement them as closely to the original author as possible.

Ever since wednesday I've been watching videos, and doing my own research regarding typescript, and what's the best settings for its config file

Chakra UI

I've made a few progress with chakra this week. I have another project that I'm currently helping build for one of my courses, and I convinced my members to use the library for the front-end. It also helps with having a deeper understanding with the library so I can create as clean of a UI as I can.

Design Template

I was working with Tymur regarding the templates that we'll be using for our dns web application. The template are bearing similarities to blackboard when it comes to the use of theme and styling. I believe that it's for the best to have the website have some similarities with the official seneca website to ensure that students who wants to borrow a domain feel some sense of familiarity with it.

Progress

For the rest of the week until Friday of next week, I'll be working with finding the typescript configuration settings, and customizing both prettier and linter to follow good coding conventions

Starchart: Choosing a technology

Ririio — Sun, 22 Jan 2023 15:03:38 +0000

Finding a path

By the end of last week, we were informed that for the creation of our project (Starchart), we will be using a specific technologies for it. Such technologies are...

Sattelite for the back end
Remix for the front-end framework
MySql for database
TypeScript for the language
and many other

I have my career planned out for a while now, and I planned on working with the front-end to get accustomed with the work, and also because it has a visual presentation of what my code is doing in real time (I'll work my back-end once I'm more accustomed). Thus, when choosing a technology to work on, I decided to pick Chakra UI, due to it being a library of react components (which I'm a bit familiar of). Having a thorough understanding of the library should help me have a much deeper understanding of the ReactJS library.

What I found

The reading I did made me realize that Chakra UI actually helps keep a group much more organized when working with a project. The problems I noticed with working with other people, is that individuals have different answers for similar questions. If you tell someone to create a side navigation bar, what they'll come up with will be quite different from yours. I'm not referring to the design, but the source code. With the use of pre-made components, chakra ui reduce the burden of having to figure out your peer's work, and help new contributors get in to action much faster.

I'm planning on implementing this library to a project I have for a different course. Working with people with no experience will bound to be un-organized, and this should help lessen that issue.

I'll be updating the wiki once a week to help contributors to the project a basic knowledge of what chakra is