karomile.com

karomile.com was supposed to be a simple in a design but rich in content. This is a karomile's photo site developed by me, according to her concept and design. After the PayTogether Android app, this is another project in my portfolio - web development is my skill as well (also in much more advanced designs, responsive …

HTML & CSS: Row with image and scrollable text having height adjusted to the image size

I will show how, using CSS only, to set the height of the text in a row so it never exceeds the height of the image, and then if the long text exceeds the height, make it scroll. The image dimensions may vary and are not known at the implementation phase. The goal The thing I need to do is: …

Scalable and modular CSS

CSS can be a mess. It needs to have standards and rules to avoid a mess. Here is a good speech with recomendations to follow: http://denisejacobs.com/speaking/talks/scalable-modular-css-ftw/ Remember also about the css standards developed during the years of practice in wordpress. I mentioned them here: https://looksok.wordpress.com/2014/10/11/web-development-done-well-wordpress-web-coding-standards/

Web development done well: WordPress web coding standards

We all know that mess that grows in CSS, JavaScript and HTML files. There is no compilers as in static typed programming languages that will keep you from doing that mess bu there are Clean Code standards. The team working on files should keep common standard and follow best practices. It is a failure if each …

JS: infinite scroll examples

There are few alternatives to implement infinite scrolling web pages, like facebook or twitter. The site: http://www.sitepoint.com/jquery-infinite-scrolling-demos/ lists the best ones and shows some examples of usage with clues when which solutions will fit, and in which cases will not. One of the solutions I am going to deploy on karomile.com soon.

Layout items in flexible columns with Masonry

In one of my projects I needed to layout photos in a grid that will place all photos most effectively with no white spaces between them. The prolem is that photos can have various sizes and proportions. The Masonry is a javascript library, easy to use that layouts items in columns. Here is how my site looks …

Web dev: Responsive image grid (that is not perfect but works)

Worth noting and well working way to implement photo grid on website, is presented by Ali Jarafian on his website: http://alijafarian.com/responsive-image-grids-using-css/ The 'float: left;' type of design has few drawbacks in my opinion: One is that you need to calculate the margins carefully and put the calculation result in few places in css (so changing …

Online coding courses on CodeAcademy and CodeSchool

Coding is not to be learned by reading books and knowing theory, but by coding in practice. There are coding courses on these sites, however the real experience can be gathered on interactive coding lessons when you learn by doing coding. Sites that have it are CodeAcademy (free) and CodeSchool (free trials, paid when accessing …