hackerType | Devpost

quoteType: General phrase-typing practice tool
hackerType: Interactive syntax-typing practice tool
mainPage: The main page of the hackerType site. You should land here first when checking our site!
selectMode: You may select your practice mode on this page, either quoteType or hackerType

Inspiration

As hackers, all of us type on a day-to-day basis, to the point almost all of us have learnt how to touchtype! We can reach 90-100WPM with normal daily sentences, however, when it comes to coding? A complete different story. The constant underscores, use of unconventional symbols, tabs and spaces all contribute to a much lower efficiency at typing.

We all know that practice makes perfect though, and that's what this website is for.

What it does

This website allows hackers to practice typing with different languages in order to improve their speed and accuracy.

How we built it

Since we wanted to host this on a browser as a website, we used HTML, CSS and JavaScript to build the website and used VisualStudioCode as our code editor (it an extension that allows you to open your website on a browser).

We started off with the basic HTML and CSS structures of our project before moving on to the more daunting and new JavaScript implementations, which were honestly the hardest parts and took up most of our time.

Challenges we ran into

First and foremost, learning how to use github was an absolute nightmare as a beginner. The number of times we stumbled upon errors with pushing to branches was… much more than we’d ever want to admit, and the first whole day of the Hackathon was simply us running around circles in GitHub. We’re not fully there in understanding exactly how to use it, but we have plenty of time to familiarize ourselves with it and make sure we’re polished up for the next competition we collaborate on.

Secondly, constant debugging. It’s honestly kind of insane how many problems we tried to solve only to create even MORE problems we had never initially considered. I am not kidding when I say that I had spent 3 hours trying to search for a solution to an issue, which I realized could be resolved by simply erasing ONE LINE of code, and then thrashing that idea as we implemented another in its stead. Currently, we’re writing this at 3:25AM, listening to calm loft to grasp at any sanity we have left as we recollect all the wasted hours we spent on debugging and staring mindlessly into our code as if it’d magically turn into our solution. It really made us realize just how much time and effort it takes to code even the most simplest of things, and how sometimes the most simple problems to solve end up being the most convoluted. I guess, if anything, we’re really more appreciative and understanding of the effort all of us put into our projects; it’s pretty commendable.

A surprising thing that was also hard was actually distributing the work, but that also makes sense because no one really had any idea what they were doing and basically just “going with the flow”. We definitely believe that if we put more work into the planning stage of our project, and made it realistic to what we could achieve in just 36 hours, that our distribution of work would have been much more efficient and that we’d get stuff done in a shorter time.

Accomplishments that we're proud of

We’re proud that we were able to deliver a working, pretty aesthetic, application with 36 hours, especially knowing that, as a group, we didn’t have much experience in any of the languages that we were developing in. As we made the application, we learnt and grew together, and I think that’s what really matters.

We’re also pretty proud of each other! I mean, we managed to work together as basically noobs in every language we were coding in, and it worked! That’s something to definitely be proud of.

What we learned

Well, we definitely learned how to work under the crunch. 36 hours is really not enough time to make any working application but somehow Hackathons just manage to bring in around 1,000 students to do just that. Sometimes all you need are your headphones, a laptop, and two bottles of monster to get you going on that productive spree for the Hackathon you wondered why you ever joined. We also learned to… collaborate in our own sense. We genuinely did have a lot of disagreements on what to do because we all wanted different things, thought different styles looked better, but because we knew the deadline was soon we also made decisions within a short amount of time. Essentially, we kind of learned that close deadlines actually make you work better as a group than worse, because you’re more likely to collaborate and find the middle ground faster than be stubborn and stick your ground.

What's next for hackerType

We plan to create an API that fetches open-source code from GitHub, similarly to the way we are using an API that fetches random quotes using JavaScript into our website. We could make the website more user-friendly that many other “emerging” programmers likes us can practice syntax easily without an IDE, and also choose exactly which coding language they want to type in rather than it being randomly generated.

As well as that, we plan on adding a back-end in the sense that users can log in, track their progress, and see how they improve on the long run against others! We plan on adding some cool type-based games to make coding-typing more fun and interactive, hopefully that will make learning much easier. 😄