DevLab: For the self-made programmer
Every year starting from 2011, Stack Overflow does a survey asking over 100,000 developers questions about their job, their career, and their habits as a programmer. One of these findings stood out in particular, which was that 86.7% of developers had taught themselves a new language, framework, or tool without the assistance of any formal training. This is reflected by the abundance of learning-to-code resources found scattered across all mediums that allow for self-learning. This ranges from Reddit, Udemy, Khan Academy, YouTube, Coursera, EdX, etc. Then you have the resources dedicated purely to learning to code like CodeAcademy, FreeCodeCamp, The Odin Project, and the list goes on. However, the volume of choices presents a problem: How do you choose the right resource among so many?
What is Devlab?
DevLab at its core is library of pooled resources that comes from any online format and then ranked by its community of dedicated developers. Each of these resources are categorized by a particular concept such as learning ES6, CSS, or full pathways as to how to start your journey. Each concept can be saved to your own personal library that uses a SQL database to record how many times that source had been saved. By picking a certain resource to save, you’re committing a vote to help others find the most popular material. In your own personal library, you can filter your topics by category as well as sort your items by popularity and the most recently added resources.
Technologies Used
This project was created using jQuery and UIkit for the front-end and the backend used NodeJS, Express, MySQL, and Passport. Other technologies included MomentJS, Sequelize (an ORM for MySQL), BideoJS, and Bcrypt, all of which was deployed on Heroku. Some of the biggest challenges in this project came from getting the information we wanted in the correct format to display properly and user authentication.
The full code is available on GitHub (https://github.com/sajeelmalik/Dev-Lab). In this write-up, I’ll be commenting on my personal contributions to the project.
Implementation
For DevLab, we chose to have a single page where all of our content is generated dynamically with a small HTML skeleton. I started off by figuring out the basic routing we would need to read and update our API information and created a boilerplate site that used sample objects to populate the data. These samples were later used as the schema for our database. Learning to create an accessible join table between users and content and to populate the database with Sequelize took a fair bit of trial and error, but eventually we got it to work.
Problems with Syntax and Structure
The join table recorded which users had saved which content which would then populate the user library based off their unique user ID. The join table allowed us to query the user database for the full information behind each piece of content since it was saved as a nested object within the user object. While Sequelize was handy in allowing us to sort results that were direct keys of the user object, these content objects were stored in an array of a table that didn’t really exist (since the source of the data was a join table). This brought about a problem because we couldn’t directly query the join table and we couldn’t make Sequelize sort through a nested array. Before realizing any of this, I had built a function that would generate all the user content thinking that we would have to make a number of different Sequelize calls. The solution actually came from UIkit when one of my teammates realized that UIkit had a native sorting feature and all we had to do was to write some of the content’s data into its data attribute as it was generated.
In order to create a category filter, we would pass along the selected category, filter through the user content array, and return an array of matching content. Because the user-library function was a permanent fixture at this point, I had to modify the array into an object that would fit the requirements of the function.
Conclusion
All in all, we were very happy with the final product. We had achieved almost everything we had set out to do. Originally wanted to have reviews/commenting as a feature and a section to have actual code examples, but ended up cutting those to fit the 5-day timeline for this project. As for future direction, a project like this could benefit greatly from having a filter that algorithmically gives content a rating of popularity/time. Since Web Development moves so quickly, it’s important to let users to know the recency of an articles popularity. Future revisions would also allow users to edit content they’ve submitted and create their own workflows by choosing content and letting users browse those workflows.
