Category: web

Web design for programmers : A 10 minutes crash course

Kevin2 Comments

I’m not a designer, and I’d rather not be one. However, there are times when programmers who don’t like to design (or draw, for that matter) are forced into that tedious act. I was responsible for designing the front end of a product at a company I interned at for the last 2 months.

Needless to say, html + css was terrifying for me. There were days where I spent entire mornings trying to align the bloody divs. Also, my choice of colors and “ui elements” were not at all pleasing. I had to pull this together somehow. I scoured the web for some intro to design. So here’s what 2 months of front-end taught me :

1. For the love of God, use bootstrap. No matter how promising the control and flexibility of pure css looks, use bootstrap and save the headache – at least when you start out.

2. Use a pen and paper to sketch your design. If you don’t like pens or papers, use a wireframing tool such as wireframe.cc. I spent some considerable time building wireframes, and then threw them away when I changed the design. Lesson learned – use pen and paper. Wireframes are useful when you want a more detailed/accurate layout of your web app.

3. Chances are that you are terrible at choosing colors. Use a tool like paletton to find the right colors, and the right combination of colors.

4. Use good fonts. Microsoft’s Segoe UI is now my favourite font. Segoe UI wasn’t featured in even a single article that discussed the “best free web fonts”. Experiment.

5. Don’t use too many colors, and don’t use too many fonts. Try to keep it simple whenever possible.

6. The official bootstrap docs does not contain references of some really useful bootstrap components like “panel” and “panel-default”. So be sure to double check before you decide that bootstrap doesn’t have it already.

7. You can’t come up with a “mind blowing, innovative, revolutionary design” over night. You might, but chances are that you won’t. Always try to build upon designs (please don’t use templates) that already exist. Here are some useful links for you to ‘build-upon’ :

8. Don’t be afraid to rewrite the HTML. I had to design a signup form and my first implementation sucked. The HTML was a mess and I couldn’t even think of modifying it. So I just wrote that page again, from scratch. Not only did I come up with a wonderful new design and styling (hint: tiles and css shadow on hover), the HTML was much much more readable. Break and build, break and build.

Good luck.

Cohen’s clipping algorithms

Kevin1 Comment

Okay this was homework. I searched for a really long time for a javascript implementation of cohen’s clipping algorithms and could find none. Professor said write it in c but its hard to program mouse clicks in c. With javascript, all it takes is a browser.

1. Cohen-sutherland line clipping algorithm in javascript

2. Sutherland-Hodgman polygon clipping algorithm in javascript.

cohen-hogman polygon clipping in action
cohen-hogman polygon clipping in action

I believe the code is pretty readable – I had commented lavishly. Save them as html files, open in a browser, and keep clicking left mouse button.

And yes, the implementation is not perfect. I basically drew over the edges in white to “erase” it and that is why you see a very thin line outside the rectangle in the image.

Coloring the canvas – the processing way

KevinLeave a comment

I thought it was time somebody started painting on the canvas. Its been a couple of months since I wrote this program and it was lying in a corner of my hard disk all along. Realized kevinkoder.tk is pretty low on contents and decided to add it to the site.

http://www.kevinkoder.tk/paint7.htm

And the source code can be viewed by pressing ctrl+u (in chrome). But I must warn you though – I’ve put absolutely zero effort into making the code readable. I’m pretty sure even I can’t make sense of it right now. I was in a hurry to do something with processing and thought “Hey, lets make a paint program”. The development came to an abrupt stand still when i tried to implement the ‘fill bucket’ tool using the flood fill algorithm – the damn thing simply refused to work the way I wanted it to.

Anyways, the program proves beyond all doubt that a lot of amazing things are simply doable with processing.

And I had to choose not to include a lot of additional libraries that might have made it a lot easier to develop the program (like a java library that can add additional drawing layers) because 3rd party processing java libraries are incompatible with processing.js , ie, they wont work when you convert the processing code into javascript.

A few handy ‘features’ were added to compensate for the ultimate pathetic-ness of the program. More info can be found in the documentation.

And the documentation : http://www.kevinkoder.tk/paint_doc.htm

.

Fading menu

KevinLeave a comment

Remember me ranting about that free domain name? Well I’ve put it to some good use. Here’s the link to my very first sketch to be hosted on the world wide web :

http://www.kevinkoder.tk/test.htm

Just a few sentences thrown all over the canvas and playing hide and seek in the snow. Nothing much really.  Oh, and here’s the link to the source :

http://www.kevinkoder.tk/data_menu/fading_menu.pde

If you have a slow connection please wait a bit. The music is around 250 kb. Also, text looks a bit drab because I couldn’t get the fonts to work properly with processing.js

And the link to processing tutorial is inside the canvas. Happy hunting 😉