Telescope 1.0

Upon writing this blog, I had two thoughts: 1) this will be the last blog I write for OSD 700 and 2) this may be the last blog I write as a Seneca student so let’s make this a good one.

I also thought about whether or not I should start with the beginning of my journey with Open Source from September 2019 or if I should go all the way back to the beginning of my journey at Seneca from September 2015. Picking starting and ending points is hard because every decision I made led to another decision and another so I can’t really just pinpoint a point in time where I can say “this is when it all began”.

But let’s go ahead with the summer of 2015, I had given up on my accounting studies at George Brown because I realized that an career in accounting would not be fulfilling. I had already spent years pursuing this career that just wasn’t for me. I never liked to compete and my introverted nature made it difficult to deal with extroverts on a regular basis and just thinking about how I would have to deal with them on a much larger scale once I graduated was a nightmare to me. I remember I had this Organizational Behaviour class where the prof divided us into groups based on our MBTI personality types (I’m an INFJ btw :P) and there was literally like 5 introverts in the entire class of 60 students. Thankfully he put most of the introverts into the same group and I realized I really enjoyed working with introverts. Anyways, after cutting my ties with accounting and GBC, I needed to find another career path so for convenience sake, I looked into colleges near my house and what interesting programs they offered. I picked Seneca because it was a 15 minute bus ride and I was optimistic about a career in computers. I applied to CPA, CTY, and ASE (yes, this is the Aviation program because why the hell not? I can totally lift people’s luggage and drive golf carts around the airport). I was put on the waitlist for CPA and got accepted to CTY so I just went with CTY. My first semester in CTY was amazing, I learned how to do basic installations/configurations for Windows Server 2008/2012, I built a computer from scratch, learned UNIX command line and a bunch of other things but those courses were the most memorable. I finished my first semester with more A’s than I’ve seen in a while and wanted more but ofc just when I was the most passionate and motivated to get my career together, I found out I was pregnant. I was 23 at the time and I was no where near established in my career so the timing was not good at all. However, my boyfriend and I agreed that even though the baby was unplanned, it was not unwanted. We tried our best to finish our second semester of studies but I think I ended up only passing like one class because I had a really bad case of morning sickness and he failed ULI101 so he was a semester behind me and couldn’t help in any of my courses besides the one elective we had together.

I think when becoming a parent, you go through this internal transformation that no one else can see and I don’t mean physical changes like my organs moving around to accommodate this baby growing inside me, I mean like “holy shit, this child is gonna find out I don’t know how to cook or do anything on my own; this is gonna be a disaster”. I had to stop being a loser like yesterday. I slowly thought about ways to be the parent I wanted my parents to be. I raised the expectations for myself so that I could be a better role model for my kid. I had a lot of people ask me if I think I was having a boy or a girl and I was really hoping for a boy because I didn’t feel like I was gonna be a good role model, not yet anyways. At 20 weeks, we found out we were having a girl; my boyfriend was ecstatic because he was begging for a girl the entire time and I just sank into the chair like “omg this girl is gonna be so disappointed that her mom doesn’t know how to braid hair” etc etc. I was such a tomboy growing up so I thought that we might have compatibility problems if she turns out to be a girly girl and she wouldn’t like me. She is 3.5 years old today and turns out I was right, she is a girly girl. She loves her hair, she loves wearing dresses every day of the week and she really loves to sing but I was also wrong about so many other things. I’ve always been blunt and rough around the edges but she turned out to be amazingly gentle and she is surprisingly good at reading emotions. I didn’t even realized how much I valued emotional intelligence until I noticed it in her. I’m at a point where I’m like I don’t even care if she’s academically dumb as a brick but if she can use her emotional intelligence to brighten someone’s day and make a difference in someone’s life, I’d be so proud of her. She deserves the best me and the best opportunities but I can’t deliver all of that the way I was. So when she was 11 months old, I decided to go back to school and finish my studies. OSAP made me reapply because I was out of school for over a year but this time, I was accepted into CPA. I didn’t really know the difference between CTY and CPA since they shared some courses in the first few semesters but I slowly learned what CPA was all about. I had to take a lesser workload because I still had a child to take care of so I knew it would take me longer to graduate but my thought process was “I could be a 30 year old without a diploma or a 30 year old with a diploma”. The latter was obviously much better. It was a tough decision because it meant being away from my daughter and I remember coming home thinking “I hope she will forgive me for not being there for her today”. It was so rough the first few semesters, especially when I failed OOP224 which meant I delayed my graduation by a whole semester. I actually failed OOP345 too so it was delayed even further but there were times where I needed to be a parent so I let assignments slip because I rather to be a good parent than a good student.

So yeah, I failed two C++ courses and I hated Java so what’s the deal? Why did I stay in this program I’m obviously not good at. The answer is web development. My very first web development professor was Christopher Markieta whom I don’t see around anymore unfortunately but he got me interested in web development. Unlike my other courses where it was more coding logic, I get to actually see what I build on a web page. My next web course was suppose to teach me about the backend but I didn’t learn anything and I really need to get around to learning it properly on my own time. I’ve gotten away with avoiding it so far but I know my neglect will bite me in the butt later. I learned most of my web programming in WEB422 in @humphd‘s class. I liked his style of teaching so much that I took OSD600 solely because I knew I was gonna learn a lot from him and I was right!

Git has such a steep learning curve but once I learned it, I cannot stop. It makes my life so much more easier. Contributing to open source projects was also uncomfortably challenging but boy, it is rewarding. I thought more people felt the same way so I was surprised to see that only 5 people enrolled in OSD700. When I checked Blackboard, I recognized a few names on the list but I never worked with any of them or remembered their faces. In the Fall, our goal for Telescope was “we need to create a pull request and have it merged before so-and-so due date”, we didn’t dig deep into what Telescope really needed. In the Winter, we were finally able to discuss what we wanted Telescope to be. This meant ripping out a lot of dead code, modifying and adding code. I had a good habit of reviewing PRs but I believe it stood out a lot more once our team was reduced to 10 developers. I’m not a strong coder so I like to study what my peers have written and doing reviews was the perfect place to ask questions since no one is really expected to know/understand every line of code written by another person.

For the first 3-4 weeks of OSD700, I audited our documentation because 1) I wanted to make sure our environment setup docs were accurate, any mishap in this area would discourage new developers from contributing if they can’t run our application locally. 2) I also wanted to scope Telescope (ah see what I did there), I’m a vivid people watcher, not in a creepy way. I just like watching people interact with each other and how they do things. Like one of the things I enjoy about taking public transportation is watching how people use their phones. Some people text with one hand, some with two, some swipe with their thumb, some swipe with their index finger, some think it’s appropriate to do video calls right in the middle of the bus, etc, etc. I’m deeply interested in how people use software and I found out recently this is called “User Experience”. I wanted to see who I can work well with and what areas needed more loving. The frontend design and team were not well established yet and yes, I was again surprised to find that not a lot of people were interested in the frontend. I think they were discouraged by the lack of direction and because we have not solidify the design. We honestly got really lucky that Ana choose to stay in the course because the alternative would’ve been Miguel’s 1990’s design with the super cool starry background *sarcasm intended* and we probably would’ve been stuck building React components from scratch. Which I cannot do. I still have nightmares of my first implementation of the Hero Banner. Her designs convinced me to join the frontend team. As I people-watched further, I learned that a lot of our Telescope developers are multi-talented (is that a word? idk I’m just gonna make up words as I go, I already made up two words in this sentence). Like Ana is a really gifted designer (not just in UI and graphics but also architectural design in The Sims 4). She also bragged about her archery skills in Wii Sports. James is an ex esports pop sensation and could probably pass off as a stand-up comedian. These two have learned the art of communicating with their eyes, I’ve seen them do it a number of times and it’s honestly kinda hot. Ray, who is not in our class but I also have the privilege of getting to know, is a really talented musician. [][][][]

I didn’t think I was gonna take so long to write this blog. Anyways, the point I was trying to make is: we come here to code but we stay here for the people. Sorry about the disappointing ending, it’s getting late. I may or may not finish this properly. Not making any promises here.

Telescope 1.0 Alpha

I meant to write this blog earlier but I’ve been extremely busy with my other courses so here it is! Apologizes for the lateness… I should probably start using better names for my titles.

Completed

PR #878 Fixes #837 add del tag to allowedTags

I actually filed this issue initially because one of my previous blog posts had strikeout text that didn’t display properly so this fix added <del> tag to our allowedTags. This wasn’t hard to figure out at all since @Silvyre had already looked into it and just spoon fed me the solution. As I was going over this file, I remembered my old capstone leader was the one that created the sanitize-html.js file. Then I remembered another issue she fixed where she had to update the outdated npm packages. Something she thought was gonna take a few minutes ended up taking a couple hours because CircleCI wasn’t happy and we were suppose to be working on something else for our capstone project so she was venting about it on Discord.

PR #896 About Page as Markdown Page

This one was a doozy, it was something that took much longer to land than expected and even now, it’s still very much incomplete but I managed to get an acceptable About Page merged into master. I filed a number of follow up issues to help fix it up and I know I have like two more papercuts I could file for this as well… “One day, the design will be realized…” I say as I’m about to bug our designer “hey Ana, remember that awesome About Page you designed that I couldn’t implement properly? Well, I need another design template for our Docs…”

Yeah, I’m great to work with… I swear I’m not needy or high maintenance… (Don’t block me D:)

PR #964 Fixes 817 added Footer to DesktopHeader and MobileHeader

While I was working on the About Page footer, I kinda scope creeped into this issue but it’s okay, I was assigned to both so win-win.

PR #973 Fixes #972 add title to Home page and move posts.length check into <Posts>

Initially I just wanted to add one line: <PageBase title="Home"> THAT WAS IT! But no, I had to remove two unused className attributes (easy enough) then some totally confusing stuff happened and my inability to read both English and JavaScript kicked in. I thought the request was to move the SnackBar stuff into Posts.jsx (which I literally just reviewed like the day before in #931 so ?????). Anyways, turns out, I was suppose to move the line above it to Posts.jsx (-_(\

Our Release 1.0 is fast approaching; it’s the day after tomorrow! I look forward to reading all the 1.0 blogs (and writing my own as well).

OSD 700 Release 0.9

Completed

PR #861 Fixes #765 add toolbar mixin underneath Header bar

This fix stops the Header from overlapping on top of the SearchBar in the Search Page and any future pages that will have the Header. The Hero Banner had an anchor that added extra space at the top so I removed it.

In Progress

PR #896 About Page as Markdown Page

Unfortunately, this PR is still in progress. I’m collaborating with @agarcia-caicedo on this issue and it took me a while to understand Gatsby plugins. I played around with Gatsby plugins before for the PWA I was working on for Telescope but scrapped it because I don’t have the time for it but this time, the About page was very doable.

What’s included in this PR:

  • added this to gatsby-config.js. Didn’t have to install the gatsby-source-filesystem package because we already have it
plugins: [
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `markdown-pages`,
      path: `${__dirname}/src/markdown-pages`,
    },
  },
  `gatsby-transformer-remark`,
]

  • installed gatsby-transformer-remark to recognize and read markdown files and allow usage of frontmatter metadata
  • created src/markdown-pages/about.md and inserted some dummy text from telescope/docs/overview.md
  • created src/templates/template.js and added the Header to it
  • created gatsby-node.js that uses createPage action creator to create pages using template.js. gatsby-node.js needs work as it’s currently very copy-pasted and uses unrelatable variable names
  • deleted telescope/src/frontend/src/pages/about.js, any About content will go in about.md instead
  • added a footer for links mentioned in this issue
  • changed the title so it says About | Telescope

I initially just wanted to add a footer similar to the one Create-React-App uses

Footer to organize the links

While I was implementing it, I notice I got more and more bored of it… plus I couldn’t get the simple styling right so I posted in the PR asking for styling suggestion/help. @agarcia-caicedo delivered with not only a better footer but a whole layout design.

In all its pixelated-ness, it won my heart

This just needs a few more things before it can be reviewed again:

  • how to get logo to display in the footer, I just slapped on the word LOGO so you can see that it’s in the middle of the footer
  • links aren’t underneath the heading for some reason
  • MUI doesn’t have a Slack icon but they have GitHub icon, where to find icons for both?
  • need photos on the left to work
  • I’m gonna get rid of the date stuff since it doesn’t make sense
  • footer isn’t at the bottom of the page

Not critical to this PR but something I would like to have in the future:

  • bring back the date so that it shows Last modified on: {date} by {contributor} this can show when the content of the about.md page was modified and by whom.

The index.css ticking time bomb is finally gone

Not my work but as someone who has been constantly work in the frontend, it’s one of my favourite PRs. This problem was around for at least two months and wasn’t fixed until earlier today so huge thanks to @humphd for fixing it. Issue #841 was pretty much me reporting where I encounter the css bug so you can read more about it there.

Re-reading my blog, I feel like I didn’t do much work again but I’ve been keeping up with reviewing PRs! I’m always good at that! *nervous laughs*

OSD 700 Release 0.8

Continuation from previous blog post.

Summary of Tasks

Completed:

In Progress:

Footer idea

Procrastinating my own issues to deal with other issues…

For this release, I spent more time on other contributors issues/pull requests than my own. These are just a few that I’ve been following closely to (going in newest to oldest):

  • PR #854: Clicking on the menu icon toggles the drawer
    • I filed Issue #860 as a follow up to this PR, I might pick this up later because it bugs me (I’m one of the small screen phone people)
  • PR #843: Include version info on header banner
    • This is an improvement to @agarcia-caicedo ‘s #755. I made a small suggestion to fix the underline on hover and I also tried to help debug this PR because it kept failing Zeit Now which was something I implemented earlier in the semester. It’s currently still failing Zeit because const { sha } = require('git-repo-info')(); it doesn’t seem to like the double brackets or something. Everything works locally, just not on Zeit for some reason… I really just want this to land already…
  • PR #836: adds: post stats component to banner
    • The Hero Banner got some love in this one so I was automatically interested in reviewing and getting involved. In #815, I refactored the Hero Banner to a functional component and originally used MUI Breakpoints for a responsive font size for the Telescope title and based on the design of the Hero Banner, the title should be vertically centered so the title needed to change positions when the font size changed. I’m sure there’s a better way than using position: absolute but this is what we got working so… Anyways, I submitted my PR and my prof suggested using vw units instead of breakpoints so I changed it. In this PR, @raygervais used breakpoints to not only change the font size for the post stats component but he did it for the title AND version. My favourite community member so far. He even has another PR up for more Banner love. Which I’ll get to reviewing once I’m done here.
  • PR #834: Documentation for Full-Text Indexing(ElasticSearch)
    • Never even heard of ElasticSearch before encountering it on Telescope. It’s so powerful. This one I made sure I reviewed so I can understand it more. I still don’t know how it works 100% but I followed the documentation and “it works on my machine”.
  • PR #824: Add graphql-passport to Telescope
    • This was the first time I dealt with “login” locally, it took a couple days for me to actually get this working for me because it was confusing… I also never ran tests in functions before… and I’m trying to expose myself to GraphQL more, mostly interested in querying though.
  • PR #792: Make search bar return results
    • 19 commits later and this is still open XD. I worked with @c3ho previously on the Author Result component and this PR makes the search bar component that I made work return results. I mostly followed this PR and tried to run it locally to review it.
  • Issue #841: Header Bar text increases size when search button clicked
    • I monologued to myself in this issue. Turns out the index.css file (mentioned over a month ago in #741) was still causing problems. As you can tell, I like to investigate frontend issues and then I brag to my daughter how much of a bug catcher I am πŸ˜‰
Everyone is busy playing Animal Crossing during all this Corona thing and I’m like “I wanna play Pokemon…”

I’m gonna stop here before I rabble on about parenting a 3-year old, my own spirituality during this “social distancing” crisis and stuff not related to open source…

OSD 700 Release 0.8 Progress

I’ll start with what I’ve completed so far before I forget because it’s been a while since my previous blog post.

  • PR #794: this was a very minor fix to remove the List and ListItem components since we were not using them anymore thanks to the revamp navbar
  • PR #815: I have a love-hate relationship with this hero banner. When the issue was first introduced, I had the option of doing the hero banner or the body of the blog post and I chose the hero banner because “how hard can it be?”. I didn’t really know how to pull data from the backend so I naturally picked this one… This is probably the third time I’ve updated the hero banner and I know there will be many more because we can still beef it up. There is currently one PR open to add interesting data points and I remember my first reaction was “wtf someone wants to work on this hero banner besides me?? Hello”. I thought I was in charge of maintaining this component until the end of time, glad to see new blood come in. What I actually did in this PR:
    • Changed Hero Banner component to functional component
    • Changed the svg button to a Material UI button
    • Made h1 to be responsive to xs, sm, md, lg screens. The word Telescope will adjust its font size based on the screen size. It will no longer overflow out of screen.
    • Made h1 responsive usingΒ vw
    • Scroll down button scrolls to the top of the first blog post

Issues I’ve been assigned:

  • Issue #712: this bug has been around for over a month so I even forgot that I filed it… Current Cindy and mad at Past Cindy for writing such an undescriptive issue like “wtf was I trying to say when I filed this?” I don’t know enough Gatsby to fix this issue… ugh research… I’ll get to it eventually…
  • Issue #770: we have 4 people slapped onto this issue to change our frontend components to use as much Material UI as possible. We had a couple more developers who ventured onto the frontend in our previous release but was quickly spooked off for reasons I cannot comprehend. “My doctor advised me to avoid working in the frontend” “But your job title on LinkedIn says you’re a fullstack developer”. I, on the other hand, enjoy working in the frontend and would willingly chose it over and over. However, I dread putting my PRs up with zero reviewers even though we have Zeit Now… ah… I’ve become such a review hobo and I think it’s because no one else has the same workflow I do for this project.
    1. Pull from master and push to origin
    2. If I have any PRs open, check them and make changes according to feedback then push
    3. Check other open PRs to review:
      • Check preview on Zeit
      • Fetch branch to test locally, ask questions if I don’t understand something or if I can’t reproduce the same results
      • Approve or request changes
    4. Check if any new issues have been filed and read them
    5. Repeat
My workflow results in this kind of contribution to Telescope. I’m proud of the 50%+ code review that I do πŸ™‚

I work best when I feel like I’m serving others and making their lives easier. Code review is something that’s often neglected but needs to be done in order for Telescope to move forward so I take it upon myself to make a priority. I don’t like thinking that there is someone who put in work into Telescope but no one is there to even look or appreciate what they have done. Plus, I know how awesome it feels to have a PR merged.

  • Issue #801: this is an exciting feature I really want to implement but I’m afraid I won’t have enough time to do it correctly. All the PWA stuff I read said “oh yeah, just have HTTPS, the manifest plugin and the offline plugin. ezpz” So I added the gatsby-plugin-offline package (we already had the gatsby-plugin-manifest package so I didn’t need to add it) and thought that was it. Nope, that was not the end. Turns out if I turn off the network option in my DevTools to mimic my device being offline, I get ~20 errors meaning these items need a network connection. Now I have to learn all about Service Workers and how to cache fonts/images/pages which is a another whole thing. This will be one of the hardest things I have to do for this project but it will probably be the most rewarding once it actually works. I had another classmate who was open to collaborate but he said he doesn’t really have time so I’m pushing this aside for the time being.
  • Issue #804: oh the About page, this was of interest to me because it will be utilizing Gatsby Markdown Pages. I’ve been wanting to organize our markdown documentation with something similar in the past (Issue #290) and it has been in the back of my mind for months but I never got around to it because it wasn’t a priority and the timing wasn’t right. About Pages are the bane of my existence because I never know what to write for them so naturally I tried googling; I spent maybe a couple hours down the wrong rabbit hole and my search history looked like I was a teenager with an identity crisis. I wasn’t initially assigned to this issue so I’m collaborating with another developer and so far I’ve said how I want to do the footer… pretty decent for an About page, eh?

This is getting lengthly so I’ll end it here. Until next time. πŸ™‚

OSD 700 Release 0.7

This is where I compare what our goals were, what we have achieved and what I have accomplished during this sprint.

Our Goals

  • I should be able to log out of the app (SSO login works, but logout doesn’t)

Even with an extra week, we didn’t finish everything on this list. We didn’t get the Logout feature to work so I guess we’re all forever signed in until we delete the cookies. Certs are hard. I know Grommers30 has been baking the SSO feature since November of last year and it takes a lot to stay motivated to continue.

  • A push to master should deploy to our staging box automagically

The second item made me laugh… automagically… (idk if this was intentional but it’s quite funny, I’m gonna start using this word now).

  • We have a prototype UI for doing search

That we do… I worked on this one. Just the UI part.

  • We can search for posts by Author

We have React components for this…

  • We have a prototype for an authenticated user to be able to Add a Feed from our frontend to the backend

This is in

  • Our Posts need to be better styled (images behave, fonts, etc)

lozinska did a terrific job here, our site looks so much better when we can actually read the posts. Silvyre fixed the huge emojis which I kinda miss

  • The UI needs to look closer to our design

It definitely does! agarcia-caicedo made so many little fixes to the UI. She’s the PR Santa in this release.

  • Our frontend app should make use of more Gatsby patterns and plugins

This could be worked on… We added a couple Gatsby plugins…

What I have completed

  • Previously in 0.6, I had did some initial work for the hero banner (PR #677) which I really struggled with because I thought I knew React but I didn’t… so I butchered the hero banner. In 0.7, I fixed it up a little bit so it doesn’t look as bad but it definitely still needs more work, the down arrow has no functionality.
  • The Scroll to Top button (PR #740) is one of my favourite features
  • Some initial work for the Search Bar component (PR #743), this was me learning Material UI which I have grown to love, it’s similar to Bootstrap but prettier. I’ve never used Material UI until I encountered it in this project so this was really exciting. When I try to explain what Material UI and Bootstrap are to people who are not software developers, I just tell them “Have you played with playdoh and tried to make a star freehand? When I try to do it, it looks like a disaster so I use tools like cookie cutters to make all kinds of shapes. Material UI and Bootstrap are like cookie cutters”
  • Improved CSS for the Search Bar component (PR #752), I learned a lot from reading c3ho‘s Create Author Result component (PR #744). I didn’t know how to change the background colour or center the components before reading his code.

Looking at this, I feel like I didn’t contribute as much I should’ve. This past few weeks have consisted of me not meeting a lot of my courses’ criteria for projects. For my Game Content course, I failed to complete my train. For my capstone project, I failed to complete the registration and login features for our Android application. I’m still nervous about how our mid semester evaluation went but I guess I’ll find out on Thursday how we did. And with Telescope… well you know. I wanted to progress more in all my projects but things are really picking up and it’s just getting more and more difficult. At this rate, I may be at risk of not graduating…

OSD 700 Release 0.6

As promised, I completed Issue #517 and Issue #530. 517 dealt to integrating Zeit Now which was a little weird to do because in order to actually set it up, I had to be the organization owner or repo owner and I was neither or those so I had a lot of help from @humphd . Everything is working as it should for Zeit, we’re all able to see the logs and deployment information (for now). I did a small demo in class for this and hopefully didn’t confuse too many of my classmates. I’m not very good at multitasking so I had to stop talking to type XD. I did a little dry run the night before and realized that running Telescope on my VM would be way too laggy for the presentation so I decided to run it directly on Windows, luckily for me I didn’t even need to have Docker running to run npm run develop since it only dealt with the frontend stuff and didn’t need the backend stuff. I don’t like developing on Windows because I have to mess with my Hyper-V settings to have Docker to run and that meant I would lose the ability to run my VirtualBox and Android Studio. I can’t can’t have both; it’s either Docker only or everything else I like. Plus every time I change the setting, I needed to restart my laptop.

530 was just documenting four domain. I thought documentation PRs would be very easy for everyone to review and approve but nope, not everyone is interested in reading documentation so most of the time it just sits there for at least a couple days. Doesn’t matter if it’s 4 lines or a whole guide, it still takes at least a couple days to get approved.

The third Issue I picked up was #642 , it was a late pick up but I knew I had to do something for the frontend so I picked the easier of the two (OR SO I THOUGHT). I glanced over the frontend React code for the Zeit demo and I was like “ah this is different, I just need to edit a line for my demo, I’ll look at the rest later”. I also procrastinated because the frontend was being restructured so I waited for it to be merged before I did anything. Come Thursday night, I’m actually reading the code and was like “What happened? Is this what React looks like now??? What’s ({ className, drawerHandler, scrolled })?”

const Header = ({ className, drawerHandler, scrolled }) => (
  <header className={`${className} ${scrolled ? 'sticky' : ''}`}>
    <nav className={`${className}__navigation`}>
      <div>
        <HamburgerButton click={drawerHandler} />
      </div>
      <div className={`${className}__title`}>
        <a href="/">Telescope</a>
      </div>
      <div className="spacer" />
      <List items={items} className={`${className}__navigation`} />
    </nav>
  </header>
);

Header.propTypes = {
  className: PropTypes.string,
  drawerHandler: PropTypes.func,
  scrolled: PropTypes.bool,
};

I’m used to this

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

I tried my best to follow the frontend React structure but it was hard because I didn’t truly understand the code. Part of me wanted to just write my component my way but I got a few errors and was like “okay, I guess I can’t do it my way, I’ll try the original way again”. I managed to get the bits I wanted on the screen but I’m currently having some trouble styling it so I decided to throw a PR of what I have and I got a couple helpful comments on how to achieve what I wanted. I haven’t gotten around to trying it because I wanted write this blog post first.

In our next Triage meeting, we’ll be unfreezing the frontend design so I’m pretty excited to see what cool new features we’ll be adding.

I also like to do a little blurb about my progress in my capstone project even though it’s unrelated to open source but it’s something that I was passionate to work on for months. I say ‘was’, past tense because we switched technologies and suddenly I’m not as motivated to put 100% into my work on the frontend. I admit it’s sloppy but every time I add something new from the palette, I immediately get an error and I’m like “I KNOW I’LL GET TO IT AFTER I MOVE YOU IN THE RIGHT POSITION, STOP YELLING AT ME QQ”, it really just interrupts my workflow so much every time I get an error.

On another side note, our legacy Planet website officially passed away so now I’m stuck reading posts on our staging box and it’s totally weird because it’s not mobile friendly at all; every post is super skinny and there’s literally 1-3 words on each line which is so hard to read… It was alright previously but William suggested to add to padding (it probably looks nice on desktop but for me, it’s absolutely terrible since I’m probably the only one that reads the site on mobile) Ugh. I miss our Planet, my second most frequently visited tab on my phone says “Decommissioned” now 😦 I’ll keep it for a couple more days then I’ll delete the tab. I used to open Planet up pretty frequent and I almost added it to my home screen and I was like “eh it’s not an app, it’d be weird to do” but then I was like “WHAT IF IT WAS AN APP??? I COULD BUILD IT!!! I COULD BUILD IT IN REACT NATIVE”. Hey Dave, if you managed to get to the end of my blog post I would be totally down to build a Telescope React Native app so if Seneca is hiring students for innovative projects, here’s an idea and I’m up for hire after April 2020 >:D

OSD 700 – Release 0.6 Progress

For 0.6, I’ve assigned myself Issue #530 which is pretty much documenting what endpoints we currently have. This shouldn’t be hard to do. As I look at my calendar and notice that today is the first of February, I also note that I’ll be entering Week 5 of this class in a couple days and I haven’t written a single line of code (how I managed to do that, I don’t know). I’ve done 4 weeks of documentation, and a ridiculous amount of testing and code reviewing. I didn’t intend to do docs for so long, I really had a masterplan going. I originally was gonna do docs for TWO weeks then hop over to do frontend work but I wanted to see a design that I liked before I commit. I’m pretty shallow, if it looks beautiful, I’m all over it. After the presentations on Wednesday, I saw that there was a dire need for frontend developers and the design proposed was good. I can tell the designer put extra care into the little details. I can definitely work with people who care about UX and want to make each page visually balanced. I was added onto the Adobe XD project as a collaborator which lets me see timestamps of revisions and I can see that she spent at least 6 hours yesterday working on the updated design after getting feedback on Wednesday, she also spent 2 hours making on-demand edits for two very nit picky developers in the GitHub discussion. Wild. I made some minor edits to the mockup before yesterday so I’m hoping I didn’t contribute to her time lost fixing my boo-boo’s on Adobe XD, I’m still pretty green.

On to my next Issue #517, this one is super cool and if I can get this running, we can automatically deploy frontend pull requests so everyone can see them. Reviewing will be easy peezy. I just need to actually start it…

I’ve been noticing how hard it is to initiate projects even with a plan. I just starting coding for my capstone project today in JAVA (oh lord, I can’t believe I said that in a sentence). I still hate Java with a passion. So far, I’ve been the only one to push code into our repo… I personally think we’re super behind but my other two members think we’re good on time. They must be following a different calendar than I am.

This is literally just me monologuing in our team Discord chat

Future employers, don’t offer me a Java job… I’ll only accept it if I’m really hungry.

OSD 700 Release 0.5

For my 0.5 Release, I chose to audit and improve our documentation. The main area of focus was the the documentation for setting up the environment for new contributors.

My first PR was about our project board since we will be using project boards for each release. I added definitions for columns and definitions for labels since it hasn’t been discussed anywhere.

My second PR was the bulk of my work. I audited our setup documentation for Linux and Mac to see if I can actually get Telescope running just using the instructions we have now. I wanted to cover Windows too but didn’t have the time so I’ll be finishing up that for my 0.6 Release.

I originally had Telescope running on my Fedora virtual machine and had installed Redis natively. That’s what I’ve been using since last semester. To really audit our setup instructions, I created a new virtual machine running Ubuntu and had Redis running through Docker. Since this was a completely new installation of an operating system, I’ll explain all the steps I went through (I did the same thing for Mac):

  • Download Google Chrome to use as default browser (I prefer this over Firefox because I like Chrome’s developer tools better)
  • Download Visual Studio Code (this is my go-to code editor)
  • git
  • node
  • Docker for Linux (there were different methods to install Docker but I took the long way of downloading the following three individually):
    • Docker CE
    • Docker CLI
    • container.io
  • Docker Desktop for Mac

I’ve never used Docker until I audited the docs and wow, Docker really made a lot easier to get Redis working, especially on Mac.

There are still a number of issues related to my Environment Setup PR that I need to follow up on:

  • This issue addresses the steps that need to be explained better and the unclear instructions about the .env. I didn’t want to change anything about this because there’s currently a few other issues that will be changing the example.env file and I want them to be resolved before I make any changes.
  • And the obvious, I still need to audit the Windows setup instructions (I already have a box of tissue prepared for this)

For 0.6, I’ve assigned myself Automatic PR deployments for frontend which I’m excited to do because this will be extremely useful. Sometimes I feel like I shouldn’t get so excited about stuff because idk maybe I’m cursed or something, whatever I’m excited for gets ruined somehow. Like my React Native app and now the frontend of Telescope… Well, I shouldn’t say it’s ruined, it’s too early to say that but I would’ve preferred a more thought out and planned approach. I don’t even know what to do with the current PR that’s up right now for the initial front end, it didn’t pass our Travis and CircleCI tests when it was first up and it has fallen so behind that it’s actually has more errors than it did initially. Not to mention it has so many bugs and doesn’t even look that nice……………………………………….. (it looks like the old site but monochrome blue). If it were up to me, I would’ve scrapped it. I really wanted to see what the Frontend Lead had in store because I snooped around on LinkedIn and saw that she’s a Graphic Designer. I admit I had high expectations after seeing that and to see that her ideas were not brought to light was a disappointment to me. Anyway, that’s just my opinion, at the end of the day, I still want to see some kind of frontend so I can do my automatic deployment thing.

Hello again…

This is gonna be a long one because I didn’t have time to blog last week. Today marks the end of Week 2 of Winter 2020 so I wanna blog where I’m at with each of my courses.

PMC 115 – IT Project Mgmt Fundamentals

This is my third attempt at getting into this course and I finally succeeded. I’ve tried previous semesters and was blocked because they kept telling me that PMC 115 is only available for the BSD and the Project Management students which didn’t make sense to me since it’s constantly offered as a CPA professional option. This is probably the least interesting course I have this semester because it’s literally a Microsoft Project tutorial class with heavy lectures on Project Management concepts.

GAM 536 – Game Content Creation

I didn’t intend to take this course because I don’t see myself becoming a game developer but I’m actually pretty happy I took this class. We’re not dealing with any coding languages, instead we’re making an amusement park in Adobe MAX 2020 and Photoshop. It feels like an art class for programmers. Last week, we learned some basic concepts and we made a bouncy castle and an airplane. This week, we learned about triangle reduction which is removing faces on objects we don’t see to reduce the resources being used to render those objects.

PRJ 666 – Project Implementation

Where do I even begin with this one?… This really goes all the way back to last semester in PRJ 566 where project ideas were proposed, students were put into groups and in those groups we would plan how we would implement and build the project in the following semester. I’m not sure how much I’m allowed to reveal about this specific project but when it was proposed, it was suppose to be a web app or at least use web based technologies (React). I signed up because I liked the idea and I was comfortable using web technologies. I really thought I got super lucky because not only was the idea great but my group members were awesome as well. This has probably been my favourite group to work with in all my years in college. We breezed through the course and come near the end, my group leader informs us that she will be going on coop for 8 months and will not be taking PRJ 666 with us next semester. We discussed about what technologies we would use to build the application when we come back and someone suggested we use Java. I shot that down and expressed that I was extremely uncomfortable with programming in Java and OOP in general. I had to retake OOP 244 and OOP 345 and when I took JAC 444, I felt like I didn’t learn anything, I submitted in all my labs but they were done poorly. If I were to grade myself in that class, I would’ve failed myself. Since this application was meant to be used on mobile and it needed to utilize the camera and geolocation features of phones, we agreed that we shouldn’t build a web app since web apps tend to have trouble accessing native mobile features on phones. In conclusion, it was no to web app and no to Java which left us with hybrid app, one group member was googling on the spot and read to us about hybrid apps. We agreed to build a hybrid app using React Native. I researched more about React Native when I got home and a “hybrid app” is not what we’re getting when we use React Native. React Native code is compiled into native code. In short, we would have one code base and it’s able to produce an Android app and an iOS app. I was pretty excited to learn how useful React Native is to not have to get two different programmers to program for Android and iOS separately but you can just get one React Native programmer and you’d get two apps.

Anyways, I spent 2-3 weeks in between the semesters learning React Native thinking that’s what we were gonna use to build the app. When we came back, we picked up a new group member to replace the one we lost and we allocated tasks equally among 4 members. The following week, the new guy tells us he’s switching to BSD and won’t be in our group anymore. That wasn’t even the worst news. Yesterday in our group meeting, the guy that suggested we use Java last semester asked “hey, so have we decided what we’re gonna be using to build our app? We should use Java”. At that point, I didn’t even know why that was even a question, I’ve told the group multiple times that I hated Java and throughout my holiday break, I posted in our Discord my learning React Native progress. Literally at the end of the first week back and I completed the two front end screens I was assigned using React Native and posted it on my timesheet for Week 1. The other two didn’t post anything for their Week 1 timesheets, the Java guy was assigned fetching our API because the data was down on the government website so he hasn’t started coding anything and the other guy is indifferent because he doesn’t know anything about React Native or mobile development using Java and he’ll have to learn something new anyways. I’m pretty frustrated at this point because I don’t think our Java guy will do any work in React Native and I can’t have him block the project from moving forward. We only have 9 weeks left to deliver this application and no one besides me have started coding yet.

I tried my best to understand from his point of view and really have a logically approach to this. We’re all in the same program so we would’ve completed a whole introduction to Java course and about two weeks of React in one of the web development courses. I liked React so I chose to pursue it and dive deeper, the other two most likely didn’t. The Java guy is taking Mobile Android Development this semester so he’s not an expert in this at all. In the end, it’s either I’m extremely uncomfortable or he’s extremely uncomfortable with whatever language we choose to build our app in. I chose to bite the bullet here so we’re gonna build the app using Java. I told them to push back whatever was assigned to me by a week and a half so I can learn Java and Android development so I can implement my tasks properly. This was definitely not what I imagine would happen… ever… 10 days is not enough to learn Java but we’ve already wasted so much time and we need to deliver a working app in 9 weeks. Optimistically speaking, maybe by the end of this all, I’ll be so proud of our app that I’d put it on my resume and be like “See this? I know how to teach myself new skills. You should hire me.”

OSD 700 – Open Source Project

I chose to do documentation here, I might touch upon the front end but I think there are a lot of people doing that already. I wanted to do documentation because I’m still lost and I’m trying to wrap my head around the project again. There are areas I want to familiarize myself with to really help newcomers join and contribute to our project. I finally got around to learning what Docker is and it makes me want to get our project working on Windows, Mac and Linux. This will take me back all the way to the beginning where I would get the environments setup for each operating system as if I was actually new. I think this is the best approach and it makes sense to me. I previously had our project run locally on a Linux VM on my Windows laptop and I remember running into a lot of trouble getting Redis to cooperate (this was before we were using Docker). And now that we are using Docker, the initial setup shouldn’t make me wanna throw my laptop and desk out the window. But yeah, I still have a lot to learn: more Docker, Kubernetes, Redis, Gatsby, React… I also wanna see what’s up with Travis and CircleCI. I know I won’t be an expert at the end of this but I’ll at least be familiar with all the tools we’re using and what they do for our project.

Create your website at WordPress.com
Get started