This Portfolio

javascript html css sass vim ruby middleman haml unpoly bem Github

This site was a huge learning project. A friend of mine was kind enough to point me in the direction of useful technology and skill choices to use and he was kind enough to give me code reviews every step of the way. The training was in the spirit of a junior and senior developer in a work environment. We had schedules and deadlines and I was made to follow common practices. One of the best things to come of this was understanding some of the theory behind Git. He held my hand through the early stages of rebasing and things like when to force push and when to squash. The cool thing about this site is that it is rendered using a static site framework called middleman. I had to learn some basic ruby and use HAML, the HTML markup language that goes well with ruby.

I worked very hard on this project and learned an incredible amount. I was lucky to have someone believe in my learning journey and help me grow. I had code reviews almost every step of the way. It was a great experience and it's all up on Gitlab for you to view. I wrote 99 percent of the code myself.

Some of the things I learned are: working with others on Gitlab/Github, squashing, rebasing, merge requests, HAML(HTML markup language), Sass(CSS), and a static site framework called middleman, partials, ruby snippets, helper methods, generating pages with templates, pseduodatabases, testing and configuring the development environment. I also learned more about Git and Gitlab, followed by an HTML markup language called HAML and Sass. I learned about BEM practices for CSS styling and a myriad of other topics.

I started off by installing ruby version manager, and Middleman, the static website generator and generally setting up my work environment. Now that I had a basic environment and workflow set up. It was time to make the basic landing page. I used plain CSS and HTML to write the page originally. Then I learned HAML and formatted my HTML into HAML. I learned to write partials and how to generate pages using templates in Middleman. Now that I had a very basic structure, it was time to convert everything to HAML(HTML markup language). I also had to redo the CSS I had written, but this time in the style of BEM(block element modifier). I also learned some basic ruby for inline ruby methods. This way I could define an element only if certain conditions were met.

The next thing I learned was pseudo-databases. First I had to learn YAML and I quickly realized it was very close to json. The first pseudo-database that I created was called projects.yml. Here I could store all the information for any of my projects. I rendered these projects to the page using the pseudo-database and ruby helper methods. I also created pages for each project using the template feature in Middleman. I also learned how to pass the values of pseudo-databases into partials and templates. This way I could refer to for instance project.slug to get the slug of that particular project. I also created a pseudo-database called skills. I wanted to be able to get all the skills that any given project required. I created a third list called projects_skills. Each element in this yml file had the id of a project and a skill required. I then wrote some basic ruby helper methods to return an array from my projects_skills file. Each project now had a list of skills that were used in that project.

Then I learned a Javascript framework called Unpoly. Unpoly basically causes things to load almost instantly on click. It caches the entire file system at page load. When we click a link, it doesn't actually navigate to the new page. Instead it replaces only the elements that need to be changed. For instance, if the header, footer, and left column are exactly the same in the target page, but the target page has a different right column, it will only replace the right column. It will then change the link in the address bar by hand. This allows the website to move at lightning speed. It also does cool tricks like loading things immediately on hover, so that on click we are already loaded. It also automates the pop ups and hamburger menu and stuff like that. I do like unpoly. It's a great tool for the right site.

Honestly, I learned a lot more than the things that I covered here, but the list is so numerous and I don't want to bore you too much. This project taught me a lot about how to automate website development. Using partials and rendering proxy pages based on a database is a great skill to have and using a framework to leverage helper methods in the rendering process is also great!