My latest experience making websites mobile-friendly using responsive design

I am now software developer at Quinto Networks  and first big project is launching new websites for all Quinto Group subsidiaries. Specifically those websites needed optimization for mobile devices.

Why I chose responsive design path over standalone mobile version:

  • I am already familiar with the concept as I’ve adapted quite a few websites for smaller screens using CSS media queries
  • Development is more iterative than building separate mobile version
  • Time constraints (“everything” needs to be done on launch date) did not allow me to dive into separate website development
  • Web design was already accepted and implemented so I couldn’t choose mobile-first approach

Here are some of my thoughts and problems I’ve encoutered while implementing responsive design:

  • User should see content without scrolling down
  • It’s important to take more time on mobile navigation as it is key to page flow
  • With only CSS it is more difficult to optimize for mobile as You intended so either way some Javascript will be needed
  • Page size needs to be as small as possible. Desktop version of websites for Quinto Group are up to 2MB big but I managed to make smaller screen devices load less than 200KB of data when opening Quinto websites.
  • Custom fonts are not needed as they eat up bandwidth and slow down overall rendering but font loading in media queries is problematic as @media (min-width:980px){font-face: …} is not working on most browsers
  • You need to test on different devices. Cheaper Android devices are not as powerfull but they have big market share and You need to provide seamless experience to those users too
  • Firefox and Chrome still don’t have identicall rendering so what works on Chrome probably will not work perfectly on Firefox and vice-versa

Some tools I have used in the process:


Backup solutions for LAMP stack and more

This is how I backup my data

rsync– for general purpose files which are not versioned by VCS.

If You need to backup data which can be easily compressed You can save precious bandwidth and time! Use –compress flag to compress files before sending to backup location. You can use –skip-compress flag to not to compress specific formats which are already compressed so You’ll also save CPU resources and even more time:

--compress --skip-compress=3gp,mkv...

Only consider archiving files if Your backup storage is limited.

lftp – if target backup storage has only FTP access

Example for mirroring local directory to remote ftp server

echo "mirror -Rv /home/chroot/my_website/upload ." | lftp username:password@ftp_Host:/backups/my_website/upload

This will copy contents of /home/chroot/my_website/upload to ftp_Host:/backups/my_website/upload
Only new and modified files will be copied each time this command will be ran.

for more info just run:

man lftp

sqlyog sja– backups for MySQL/MariaDB database

This command-line tool could be ran in both Linux and Windows and can be downloaded here: For Windows You’ll need to download Sqlyog MySQL GUI (which is my favourite MySQL database management software) and sja.exe will be located in directory where SQLyog is installed.

Diving into Android development…

First impressions:

  • Programming in Java is not that hard.
  • Documentation could be better
  • It helps a lot if You have real Android device because Android emulator performance sucks
  • There are still many possibilities to create awesome apps

Update on 24th of September:

I haven’t done anything Android related since April but I am intrigued by new Android studio because I’ve never been big fan of Eclipse (it’s not that bad but also not for me).

Some of my ideas for Android apps

  • Better birthday and nameday (it is more actual as local app in Latvia) apps. I want semi-transparent nameday widget but there isn’t any
  • There are still room for new weather apps- especially localized. I prefer if such info could be in my native language
  • There are too few media players out there and free music and video players lack even basic features
  • Create all sorts of card games. There are too few out there

Switching from MySQL5.5 to MariaDB5.5 (or maybe MariaDB 10.0?)

I’ve been using MySQL for at least 7 years now and it worked more or less fine.
But few days ago on conference author of both MySQL and MariaDB Monty Widenius persuaded me to try MariaDB.

Why switch?
Why not? It is fully compatible with MySQL (You will not loose any features and You don’t need to change anything in Your existing infrastructure) and it works faster and on top of it has additional nice features like virtual columns which were one of the things where NoSQL had advantage before.
Also SphinxSE is well integrated into MariaDB which is a plus for me because I am actively using full text search engine Sphinx in three projects.
You can read about improvements over MySQL here:

The migration process
My personal production server uses Centos5.8 x64 with MySQL5.5 from remi repository. I uninstalled MySQL and installed MariaDB from their repository but I ran into libmysqlclient conflicts because of old php-mysql extension which is still used in few of my projects. It took me almost 20 minutes to find solution and later I updated MariaDB knowledgebase website which is meant to be better alternative to MySQL official documentation:

And now my production server runs MariaDB and so far it runs without any problems. Unfortunately I didn’t have spare time to make my own “real world” benchmarks but it seems to use little bit less resources and strangely enough it works well without ANY customizations in configuration which now has it’s own configuration folder in /etc/my.conf.d with separate files which make it easier to configure it.
For example, with MySQL default settings my server would use constantly 50% of one CPU core and this forced me to invest quite a long time to fine-tune config and use such tools as
I am quite confident if I will fine-tune MariaDB I will get much better improvement in speed and resource usage even if I’m OK with current metrics.

Future of MariaDB
If you are still not so impressed with current version of MariaDB and thinking about sticking with Oracle’s MySQL You should at least check progress of MariaDB 10.0 which will be next major release.
First Alpha version was released yesterday and as Monty told audience of Webconf it will be already stable at the end of this year. One of more interesting additions of 10.0 is Cassandra storage engine:

MariaDB team has the best software engineers from MySQL and they are committed to keep MySQL/MariaDB open unlike Oracle which tries to kill it. I hope community will spread the word about MariaDB to all MySQL community so more people will switch to MariaDB which will help keep it open and community oriented.

You can get started on web performance testing tools and server monitoring

New Relic is web application performance management tool for Your dedicated server or VPS.

It supports PHP, Java, Ruby, Python and .NET web applications.

With New relic You can easily find out problems in a server because it sorts all problems by importance and shows what is more important.

New Relic has decent MySQL database monitoring features which can help You find tables which are used the most and which needs attention the most. It also shows slow queries. It also supports NoSQL but I don’t have any apps which use it so I don’t knwo how good is NoSQL support.

If You don’t have basic server resource monitoring yet on Your server You can also enable CPU, Disk, Memory and Network monitoring with nice historical data.

The best thing about New Relic is that both web app management and server monitoring are very easy to install. It took me 5 minutes from installing both services to start checking out fancy graphs about my server performance on their website 🙂

I am little lazy to explain all the cool stuff about this service so take 10 minutes of Your time to register:

When creating Your free account You automatically get trial of PRO version for 15 days after which You can continue to use free version.

Here are some screenshots from my server:

xdebug profiler for PHP and kcachegrind to optimize site speed

To enable xdebug profiling You just need to enable xdebug extension (add zend_extension=”/usr/lib64/php/modules/” for example if You are on 64bit Centos Linux distribution) and edit Your PHP configuration by creating separate xdebug.ini file or add these lines directly in php.ini:

xdebug.profiler_enable = 1 # by default profiler is not enabled
xdebug.profiler_output_dir = “/var/log/xdebug” #this is the directory where xdebug profiler generated files will be located
xdebug.profiler_output_name = “callgrind.%R::%u” #to work with kcachegrind output files must have callgrind. prefix (by default xdebug uses cachegrind.out. prefix) change this so You don’t need to manually rename files to callgrind. prefix.

Please don’t enable xdebug profiler ir production environment because in few seconds it can generate GIGABYTES of data and it will most likely crash Your webserver.

Here is an example what we can get from kcachegrind (data is from one of my first php projects):

Click to enlarge:
kcachegrind output example from php xdebug

kcachegrind sorts everything by importance so on top You can see PHP actions which use the most resources so You don’t need to guess where to optimize.

For example, I had ancient multi-language library in this project where I created 900 method calls for each of 900 translations. With one little fix now I make only 1 method call from multi-language library.

Unfortunately I couldn’t enable Profiler on XAMPP 1.7 and I tested this feature on production server for a few seconds.

There is more stuff about xdebug to write about so I am quite sure there will be Part II of this post 🙂

Opensource web based video converter

My first open source project is Wap4 video converter.

Project started on December, 2010 as project for my University and first time I committed source code on Github in February, 2011 after 3 months of work (I didn’t understand flow of version/revision control systems in those days yet)

Some facts:

  • It’s based on CodeIgniter framework.
  • All files are converted using FFMPEG.
  • Links to video files are extracted using youtube-dl Python video grabber

UPDATE (2012.03.05):
What is current status of the project?
I don’t have much time to improve wap4 but I am still adding video formats and updating source code components (for example, youtube-dl)