martinkubat-blog - Tumblr blog

[martinkubat-blog]

My first hackathon (MLH Launch Hack)

Last weekend I attended Launch Hack, a hackathon for students organised by MLG. This was the first hackathon I have ever attended and it was a fantastic experience. My two friends Nali and Ivaylo joined me and together we were to build a project in 24 hours. We also recruited a fourth team member called Ong Cher Wei from Glasgow. 

While Nali remarked he was going to attend it to learn from other people and enjoy complimentary food and drinks, I was determined to make the 24 hours worthwhile. We came up with the idea to build an web application, since our most combined programming expertise was in PHP. I thought that we should solve a problem that has been on the internet since its launch: Broken links. 

We all know what it's like to want to see a video that has been shared numerous times on the internet, only to be disappointed to find out its deleted. Well what our application would do is to use reddit to search for mirrors. The reason for that is, that in the comments, the users are always keen to provide mirror links to other users for karma (upvotes).

Well since I have had expertise with the Reddit API (with x-posting and r/delay) a very basic prototype of this web-app should be no problem. Since I had the most experience out of our entire group and came up with the idea, I was called to be the leader.

In the beginning, I had the task to not only start coding the base, but to also assign things to do to my team-members. One of them, Ivaylo, had done some php in the past so I thought of giving him the task to connect the reddit api to our app. On Cher only had experience in Visual Basic, so he his task was to build an html template which we could serve the information on. 

Unfortunately, one hour into the hackathon, my HP laptop broke down and refused to start up again. This was captured by the organisers and put on twitter.

After we shared a few laughs, Nali graciously offered me his macbook so that we could actually get some work done. He went on to assist On Cher with the task of building the html template and researching more of how we could get other sources of mirror sites.

Around 5 hours in, we had built a basic file structure and the html template was looking great. Unfortunately, the heart of the whole web-app, the reddit integration, was not looking so well and it set us back by about 4 hours. During these 4 hours we were frustratedly wondering why reddit kept wanting to for us to log in and allow permissions. After figuring out what we wanted was the basic mode instead of the oauth mode and some tinkering, we finally managed to get it running. 

After that, I took over integrating the reddit api into our project, while Ivaylo had the task of handling broken links which were not submitted to reddit. This process was tedious as I had to parse my way through all the arrays and stdobjects in php to get to what we really wanted: the comments. 

In between working we had a good time eating delicious food and drinks catered by Bloomberg and occasionally playing New Super Mario Bros for Wii U. The presentation room was changed into the sleeping room at night and I had a comfortable good sleep, even though it was only for two hours.

The next morning we did all the finishing touches to the web-app and we were surprised and delighted to see it actually working. When it came to the presenting, me and Ivaylo were to present about how our application worked in 2 minutes time. We were incredibly nervous, but we managed to do a pretty good job. The presentation can be viewed here, but please keep in mind that we only had 2 hours of sleep in the past 2 days.

In conclusion, this hackathon was one of the best experiences in my life so far, and even though we didn't manage to win any prizes, we received a goodybag containing some pretty awesome swag!

[martinkubat-blog]

A refreshed redesign

In the past few weeks, I have been planning and building a brand new personal website. It had come to the point where whenever I would look at the old website, I would cringe at the look of it.

Is this the best way to present myself?

...I asked myself. What happened to it? The original vision looked OK at the time but had procedurally got to the point where my careless editing would make it look bad. Well I said to myself, another year, another identity. I wanted to keep all the features of the old design which really worked and looked good at the same time, but also give it a whole new makeover to match the increasing trend of flat-ui. Here is a list of features I edited.

Layout

The layout of the previous design was something that worked really well for a portfolio website, so I kept it. Here is a brief comparison

As you can see I changed the color of the page to a much more clear #FFF, which works really well with the #688EC1 of the header background as a colour scheme.

Header

The change in the header is something I am very proud of. To start off, I have simplified the background by removing the noise effect but kept the overall pattern to produce a much more simpler and cleaner canvas. The logo was obviously changed and I really wonder how I thought using that bold font was a good idea. Instead I fell in love in a font called Computer Modern, which you can recognise from scientific papers and LaTEX. I also removed the subtitle "web developer" as it is a title I haven't fully earned yet and replaced with something more useful, quick links to my twitter and github. I have kept all the foreground stuff the same shade of white to keep that awesome colour scheme as it is.

Navigation

The navigation is also a vast improvement over my last design, as it utilises much more space and now includes icons. They were added primarily for the ease of the user. I have gotten most of my icons from icomoon.io, which is a great service btw. Some of the icons I have made myself as I have thought myself the magic of vector graphics.

Instead of that awful 2010's tab navigation, I have opted to go for something much simpler in the form of an arrow indicating which page is active. The arrow itself is connected to the main page, suggesting a "speech bubble" to give the impression of the individual navigation components speaking. For the font, I was very much inspired from the stock Android menu, which uses the same font, "Roboto Condensed". Speaking of Android, I also thought it would be a good idea to give a heading below the navigation to tell the user at a glance which screen he is one.

Readability

Another very important aspect of the redesign is the readability. This is where the old design got it really wrong. How was I supposed to impress the viewer if he/she couldn't even read the text easily? The old font was "Ubuntu Light", which is a beautiful font, don't get me wrong. It just is too thin for paragraphs and in my case was too small. In addition, there wasn't much contrast between the text and the background. So instead to go with the new look I used "Open Sans", which is as simple and pretty as it gets and I increased the size and line-height so the text itself would be a pleasure to read.

Responsive design

As a cherry on the cake I have decided to learn on how to make a responsive layout. I have always pretty much restrained from using it as I though it would be a nightmare to use. An example of this could be in August's 2013 rdelay, where I got around it by serving individual style sheets to both mobile and desktop. Earlier this year I played around with bootstrap, which is also responsive and I still thought that given bootstraps complex structure, the code responsible for the responsive layout would also be complicated. Well earlier this week my brother asked for my help on his portfolio, which I unfortunately couldn't help him with. He had a problem of making a part of his site responsive. I tried asking him and looking up what kind of framework he was using so I could find some kind of documentation. Later on he told me he solved the problem with a case of:

width: 100%; max-width:700px;

Of course, how have I never thought of this! It's so simple when you think about it! I had to try and use it on my site and to my suprise, it worked like magic. I applied it to the Logo and the main text but the problem still was with the navigation. I did some more research and found a way for the css to detect a mobile device and apply additional styles to the content. I made the icons in the navigation the main part of them to make it simpler for the mobile user to detect what is what.

Blog

If you're reading this now, I have a blog. I had thought of getting one for a while. A place where I could share all my work in progress and updates. Now I finally got it with the help of Anchor CMS, which was so far the easiest to used and to integrate. I really do hope to update this blog as I have put a lot of work into it.

In conclusion, why are you still reading this? Go on, explore this site!