For anyone interested in Codility test results…

https://codility.com/demo/results/demoBWJR77-MCG/

Here is a good example of something I had to find and replace through out many html templates that use TinyButStrong.

find ./ -type f -name ‘*.html’ -exec sed -i ” ‘s/<h1 id=”admin-header”>\[var\.\.cst\.SITENAME\] – .*<\/h1>/<!– [onload;file=’\”[var..cst.TEMPLATEPATH]\/admin\/fragments\/admin_heading.html’\”; ↓

getbody=head;comm] –>/g’ {} \;

Notice that I pass an empty string to the -i tag, because I do not want to rename the file, but a file name is required. By providing an empty string, it just saves to the original file. Also more characters have to be escaped in the find sequence than the replace. The find sequence requires all regex characters to be replaced, where the replace sequence pretty much just requires these 3 characters to be escaped: ‘&/

You’ll also notice that a single quote has to be escaped like this: ‘/”

Good luck and have fun

If you running Ubuntu, this may be a bit hard to find. I have Vbox installed on my Mac and I was running ubuntu 12.04 (64-bit). I found this post to be really useful….

http://askubuntu.com/questions/300799/does-ubuntu-12-04-lts-32-bit-have-graphic-user-interface

The company I work for is using jquery uniform on two of their sites, which mind you has not been updated for almost a year. Removing it is not a quick viable option as we would lose the current formatting of all form elements across the site and I would have to fix them all. There doesn’t seem to be a note on the jquery.uniform.js site as to when they will update the uniform library. I just pulled my hair out for hours trying to get a couple select boxes to be “uniform” across all browsers due to this code being out-of-date…with IE 11 being the most problematic. The main issue being that IE 11 now tells us in the navigator object that it is actually mozilla. Thanks guys, that’s useful. I found an excellent hack on stackoverflow that does in fact work. This was one of about 10 hurdles I had to jump through, but was by far the most annoying one.

http://stackoverflow.com/questions/18684099/jquery-fail-to-detect-ie-11

I ended up having to use several css and jquery hacks including using setTimeout to deal with a race condition. document.ready was not enough to ensure that my code executed last, even in the footer. my guess is uniform.js was taking longer to load and adjust elements than my js.

My CSS changes were as follows to accommodate Firefox:

#billinginfo select {
width: 160px;
}
@-moz-document url-prefix() {
#billinginfo select {
width: 185px;
}
}


And this was the javascript I used in the footer:

This is an example of CSS3 animation and 3d effects (only Chrome and Safari support these properites). Using the perspective, transform and transition properties, I show you how I created a 3d animation effect. Just click the link below to see the demo and view source to see the code. Please remember these CCS3 properties only work in Chrome and Firefox

Animation

A list of things I do to troubleshoot slow performance or errors on a site (not necessarily in this order)

1. Look at the PHP and MySQL error logs and fix any code/queries accordingly
2. Look at the access log and slow query log to see if any pages are getting hammered or if any queries are performing poorly
3. Run top on all of the servers and look at the load on the boxes to see if they are exceptionally high on one or several in particular,
   and see if there is any swapping. Maybe some tuning is necessary, buffers may need to be increased/decreased, etc. ( maybe buffer size is too large for the amount of RAM )

4. Use ps -aux and show processlist to actually see what’s going on on each server if the logs didn’t reveal enough. Maybe there is a cron job or some other not db related process that’s running that is creating load.
5. Use EXPLAIN EXTENDED [query] \G; on queries with particular attention to the type, rows and extra fields to see what kind of join the optimizer is using and whether an index or indexes are being used or if doing a filesort or creating a temp table (worst scenarios). Also uses SHOW WARNINGS to get more detail, maybe the query just isn’t returning the right data or has an error.
6. Break down the query into subqueries to make sure it’s returning the data I would expect.
7. Figure out whether rewriting the query or adding/removing indexes would help more and do that first (on the dev server first).
   1. if the type is all or anything worse than eq_ref, an easy initial fix would be to make sure the query can’t be optimized. (i.e. using a straight join instead of using IN() ). Then test again with explain and see if it helped
   2. sometimes even changing the order of the fields joined (in multi-join), due to the number of rows the optimizer has to scan, can help. reviewing the rows field and looking at how many rows would have to be scanned for each join will help to determine the order
   3. if a common query is joining on a field in two tables and there is no index, add one to each (test with explain again to see if it helped)
      Use a script or app to do some testing

   4. If LIKE or MATCH AGAINST (better) queries must be used and they are particularly large tables, use SphinxSE instead, it helps a lot
   5. if there are too many indexes or some are not being used, it will slow down performance, particularly writes. If there are more writes than reads, this would be really bad, so sometimes unneeded indexes can be removed and it will increase performance.
8. If LIKE or MATCH AGAINST is not being used, use InnoDB for the storage engine, by and large it performs better
9. SHOW CREATE TABLE and SHOW INDEXES\G are very helpful for seeing how each table is structured.
10. Many people use OPTIMIZE TABLE, to rebuild a table, but this can take hours and doesn’t always help (esp with InnoDB). What’s faster and more effective is to drop and add the indexes on the tables. This usually takes minutes and is much more effective. Should be done during off-peak hours obviously. Or you could lock writes on the table and copy it, perform the work and do an atomic swap on the tables, but your app would have to handle that gracefully.
11. Use show status like ‘Handler_%’; This will show whether large scans were done and indicates when indexes are not be utilized.

…these are just some of the basic practices. Obviously looking at improvements to the schema (normalization) can be a more global solution to chronic issues.

I decided to add some tabs to my top navigation using CSS3. The tabs are dynamically resized depending on the length of the text in the links. This is easy to do. If you’re using an unordered list all you need is this:

nav ul {
	...other properties...
	display: box;
	display: -moz-box;
}

li#nav nav ul.menu li {	
	...other properties...
	box-flex: 1;
	-moz-box-flex: 1;
}

And then to get rounded corners on the top left and right corners I used this:

li#nav nav ul.menu li {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px #eee solid;
}

While display:box has been around since 2009 and new properties have developed since then (i.e. flex), they have not been adopted by all browsers yet, so this is currently the safest approach.

I’ve been busy for a while and welll…I let my domain expire. So, I purchased a different one and moved it from devanswers.org to smartdevtools.com. I’ll be posting some updates and code samples starting tomorrow. Today, I just updated my background with a CSS3 linear-gradient because I think it’s a cool feature.