Is Your Website and Mobile Devices BFF?

As a web developer for many years, one of the most important things I focus on is accessibility. It is crucial for your visitors to be able to access your website regardless of what device they are using. Before mobile devices, the big question with compatibility involved browsers – in particular, Internet Explorer. Eventually, I dropped support for users using IE8 or older. Actually, I don’t support IE anymore – as in, I don’t test my website on IE. If you check browser trends, IE market shares are declining even if Windows is still the “popular” OS. Here’s a nice page that show trends for several years – http://www.w3schools.com/browsers/browsers_stats.asp.

As of late, mobile device internet usage is increasing – http://gs.statcounter.com/press/mobile-internet-usage-soars-by-67-perc. What does this mean? Well, if your website isn’t mobile friendly, users may not want to visit your website when they’re on their mobile devices. People want a great experience, they want ease of use. This is how Google is ranking mobile search results. If in the past your website ranks high in search results, your ranking may be different in mobile search result ranking if Google considers your website not mobile friendly. Starting April 21, 2015, http://googlewebmastercentral.blogspot.com/2015/04/rolling-out-mobile-friendly-update.html. If you are unsure how this will affect your website, you can test to see if it is mobile friendly at https://www.google.com/webmasters/tools/mobile-friendly/. It will scan a web page to see if it is mobile friendly.

So how would you go about improving your website to be more mobile friendly? There are a couple of ways to address this.

1. You can leave your website as is and create a version for mobile devices. What you can do is have code that detects the viewport of the device and have them redirect to your mobile version of the website if it’s necessary. So you’ll have something like domain.com for desktop users and m.domain.com for mobile.
2. You can do adaptive design. How this works is your website will have several different layouts that address different devices. If it detects a desktop is being used, it will use the layout for desktop. If it’s mobile, then the mobile layout will be used.
3. Responsive web design. This is the approach I personally prefer. You pretty much design with mobile first intention. This blog uses responsive web design and has been mobile friendly for quite some time.

I am not a great designer, but I am better at development. A great help to achieve responsive web design is Bootstrap. It is free and open source. If you haven’t heard about it, you should check it out. There is also Foundation. You don’t have to use these tools but it can help you save time on development or you can use the techniques as reference and roll out your own.

The most important thing to get out of this is to improve online experience regardless of the device you are using. Otherwise, people may not visit your site or stop going to your site.

WIMP on Windows 7 – Windows, IIS, MySQL and PHP

In the past it was always a bit challenging to get WIMP installed, at least for me it was. I ended up using installers for PHP and even then which version would I use, fast cgi or that other one (can’t seem to remember the name, it’s been a while). Recently, I had to create an environment that uses WIMP. I had to take old data from MSSQL 2008 and convert it over to MySQL. I tried to use MySQL Workbench’s migration tool but it failed on 5 of the tables. So my plan is to use PHP and somehow import the data over. Well I would need to use SQLSRV driver for PHP5 to connect to MSSQL 2008. Enough of the back story, here’s what I did.

First off, I am using Windows 7 Professional 64bit. You will need to enable IIS in the Control Panel by turning it on in the Windows features. Here’s what mine looks like.

windows_features

You don’t need all of the checked features but you will need CGI under Application Development Features – this is how PHP will run within IIS. Leave the others default. Once installed, there may be new Windows updates related to what you just enabled. It’s a good idea to patch them up. The version of IIS I’m running during time of writing is 7.5. Screenshots and feature location may differ from your version.

Now download PHP5 the version you wish to use from http://windows.php.net/download. What I downloaded and used was 5.4.27. I needed a version from 5.4 because of the SQLSVR I mentioned earlier. I haven’t tested to see if the driver works on PHP5.5+. Also, you want to download the NTS (non-thread safe) version. In my case, it’s VC9 NTS for PHP5.4.27. Unzip the file and put it in C:PHP5. You can put it anywhere but I just wanted it more accessible.

Inside this folder, look for a file called php.ini-development. Copy and rename the file to php.ini. I chose development because my environment is for development only. There is a production version with slightly different settings.

Here are the entries that need modification within the php.ini files.

  • extension_dir = “ext” (enable this if you’re going to use extensions)
  • fastcgi.impersonate = 1 (enable this)
  • cgi.fix_pathinfo=1 (enable this)
  • cgi.force_redirect = 1 (enable this)

Save the file and close it.

Now we need to let IIS know how to serve PHP pages. Open up IIS Manager. Highlight the entire Server to apply to all websites hosted or specific ones – in this case, highlight Default Web Site. Next, double-click on Handler Mappings and Add Module Mappings. Here’s how mine looks.

module_mapping

Restart IIS. Create a test file using phpinfo(). You should see something like this if all is in working order.

phpinfo

To install MySQL, just download an installer from http://dev.mysql.com/downloads/windows/installer. The great thing about the installer is that it comes with other goodies such as MySQL Workbench and connectors such as ODBC (which I needed to get the migration tool from Workbench to connect to MSSQL server). If you are going to use MySQL, don’t forget to enable the extension(s) in the php.ini file. You can find more detailed instructions from http://www.iis.net/learn/application-frameworks/install-and-configure-php-applications-on-iis/using-fastcgi-to-host-php-applications-on-iis.

Django and MySQL problems

I’ve been checking out Python and Django and I’m impressed at what it can do. It’s efficient and has more things built-in compared to PHP and CodeIgniter. Unfortunately, I ran into some issues when installing the python-mysqldb. Without it, I can’t connect to MySQL – I could do sqlite3 fine though. I have existing projects running MySQL database so I’d like to stay with it.

I’ve spent a few days and I just can’t get it installed. I keep getting “No module named MySQLdb” errors and “ConfigParser.NoSectionError: No section: ‘metadata’” errors. I give up haha. I was hoping for a fast deployment of a development environment but ended up spending more time than I wanted to. It’s too bad since I was starting to like it – again it works fine with sqlite3 and I was enjoying it.

I guess I’m going to leave it alone for a while until more people get the error and share they’re solutions. I’ve searched online and was unable to find an answer. I’m going to check out Ruby on Rails again. There’s an interesting installer now at RailsInstaller.

Installing PHP driver for MongoDB in WAMP

I’ve been getting more curious about MongoDB. The problem is I’ve been struggling trying to create a development environment. I’ve tried OSX, Ubuntu, and Windows. I always get stuck at a step. I think I found the right recipe.

First, I’m running Windows 7 Professional 64 bit virtually. You don’t have to run Windows virtuall. I’m mostly on my Mac and I prefer to use virtual environments for development so it’s okay if I screw around with things. Then I installed Wamp. The key here is to use the 32bit version of Wamp. I’ve tried the 64bit version of Wamp and could not get it to work. Then, you need to download the latest driver from the MongoDB website. You will get a NTS (non-thread safe) and TS (thread safe) driver. The folders are labeled as follows “mongo-[version]-php5.3vc9” and “mongo-[version]-php5.3vc9ts. Remember “ts” = “thread safe”. I used the non-thread safe DLL file. Take that DLL file and copy and paste it in the “ext” folder within the PHP installation directory of Wamp. If you installed using default settings it should be “c:wampbinphpphp5.3.xext”. Open the php.ini file and add the php_mongo.dll extension. Restart Apache and it should show up in your phpinfo() page.

I will be using MongoHQ to try things out. I’m not sure why I couldn’t get it to work in a 64bit web server environment. Mongo looks very cool and if it can help me decrease development time, I’m going to build future web apps with it.

XHTML compliant with ampersands in the URL

I was having a few problems creating a page with ampersands in the URL. This is a quick fix if it’s part of the HTML by using & but if it’s part of a javascript, it will take the code literally. For example, let’s say you have a javascript function that sends you to a URL when you click a button.



function clickMe() {
  window.location = 'http://www.google.com/search?q=javascript+ampersand+xhtml&client=firefox-a';
}


If you are concerned about being XHTML compliant, you will get an “unknown entity section” error. You can get some more info of the error here http://htmlhelp.com/tools/validator/problems.html. You cannot use “&” in the URL of that javascript function. You can use & (HTML) or & (ASCII). It will solve your error but depending on the browser/version, it will send the code to the URL and will result in an error – especially if your code is dependent on the querystring. To fix this you can use CDATA.

/*<![CDATA[*/

window.location = 'http://www.google.com/search?q=javascript+ampersand+xhtml&client=firefox-a';

/*]]*/

The /**/ ignores the lines of code but because your document is XML formatted, CDATA parse the line in between properly (http://www.w3schools.com/xml/xml_cdata.asp). I got answer fromhttp://www.liferay.com/community/forums/-/message_boards/message/2657431#_19_message_2873280.

Creating a CakePHP environment using MAMP and OS X

This will show you how to create a CakePHP environment in MAMP on OS X. Here list of softwares used and their version.

  • OS X Leopard or Snow Leopard
  • MAMP version 1.91 (using PHP5.2.x)
  • CakePHP 1.2.8

You shouldn’t have to use MAMP 1.9.1. I have it working on version 1.8.x. You will need to change Apache’s port from 8888 to 80. Make sure there aren’t any other web servers running on the same port. Leave MySQL running on port 8889. We will be creating a /Applications/MAMP/conf/apache/sites file that will store your virtual sites. It isn’t necessary but it’s easier to manage new sites on a separate file. You will need to edit the /Applications/MAMP/conf/apache/httpd.conf file by adding the following lines of code.

# virtual hosts file
Include /Applications/MAMP/conf/apache/sites

This will tell Apache to check the new sites file for additional configurations. So now, whenever you need to add or create a new site, you will edit the sites file and add the following code.

<VirtualHost *:80>
DocumentRoot /Users/username/Sites/projectname
ServerName projectname.local
</VirtualHost>

The value of DocumentRoot can be different. I just chose to put it in that folder. Now you will need to edit your /etc/hosts file by adding the following code.

127.0.0.1          projectname.local

Restart your MAMP server. Now unzip the CakePHP files into the projectname folder. You should now be able to view your new CakePHP site by directing your browser to http://projectname.local. This page will tell you that you need to change the default Security.Salt value. All you need to do is change at least one character and you will meet the requirement. You can also use Terminal to generate your own.

echo -n 'foobar' | openssl sha1

This will give you a 40 character string. You can use a mixture of upper and lower case on the letters. Copy and paste this value from Terminal to give a new Security.Salt value.

The next warning is your database. Rename the database file and edit it. Provide your database server information. Because MySQL in MAMP is using port 8889, you will have to edit the array and add the following.

'port' => '8889'

There are notes in this file to help you further with additional array elements.

To use Terminal with the cake command, you will have to edit you ~/.bash_login file and create aliases. Here is the code to add to your .bash_login file.

# php
alias php5="/Applications/MAMP/bin/php5.2/bin/php"

# cake for this project
alias cake="php5 /Users/username/Sites/projectname/cake/console/cake.php"

To apply

. ~/.bash_login

You should be able to run

cake help

If you get a permission denied error, give it executable access with this.

chmod +x /Applications/MAMP/bin/php5.2/bin/php

That’s it. You can now start baking in a development environment. I know I have skipped a few steps but I’m assuming you know the basic commands and configurations. If not, please feel free to comment and ask questions. I’m still new with the MVC framework and CakePHP so go easy on questions regarding those. I am learning, slowly… haha!

Still looking for fast web development techniques

I’ve been developing web sites for almost 10 years now. I’m still in search of a way to develop faster. I find myself doing things over and over again.

I use PHP as the programming language to develop the web apps with MySQL database. I started to look for different frameworks – but most use MVC and I don’t have time to learn it.

Some have suggested to do validation using MySQL. This helps a bit so I don’t have to write more PHP code to validate whether or not the record exists, foreign key constraints, etc. Plus it really is good practice to have these in place in the database layer.

Next I looked in to template engines to help with the layout of the site. It does help quite a bit but I’m still left with a lot of PHP code. I use Dreamweaver to write code and I used to use its automated code writing but I found it too messy and inefficient. Now I only use it because the FTP client is built in, has a file checkout system and in CS5 it can read included files so I have easy access to them. The error check is nice too. It catches many syntax errors right away. It can read used variables and be a part of the autocomplete feature.

I tried using existing systems like CMS or blogs (Joomla and WordPress). I figured I can create add-ons on top of an existing system. Joomla uses the MVC framework. WordPress on the other hand is easier to figure out how to build on top of it. Plus their documentation is really easy to follow. One of the limitations I found is the lack of access levels. Another is the pre-existing environment may not fit with a project since it’s so customized – better to be built from the ground up.

I’ve been peeking into the .NET framework off and on. I don’t primarily use Windows at all. I’m mostly on a Mac or using some sort of Linux flavor. I do have Windows7 running virtually on my MBP and iMac so I can play with it. I have played with Visual Studio and it felt easy to use plus it seemed to make developing quick. The drawbacks I’ve found are Windows hosting is more expensive than Linux hosting, IDEs are expensive and run mostly on Windows OS, and I don’t like creating online applications that can potentially only work with Internet Explorer (does not support web standards and only available on Windows OS).

Rails looks promising with the DRY (don’t repeat yourself) approach. I’ve tried to look into it and even bought some books and watched some screencasts. It’s a great language but I can’t seem to understand how to authenticate/authorize different users. They have many different plugins that I can use but each one uses their own way of doing it.

I guess I’ll keep looking. Either I’ll find time to learn MVC framework, get better at Rails, or someone will develop a new platform to speed up web development.