Category: Web Development

When building a website with PHP, there are many frameworks you can choose from. However, they usually are very advanced with tons of features and sometimes a steep learning curve. If your needs are simple but you’d still like to build you site in a modular MVC-based fashion, PHP-MVC is a nice, light-weight alternative. You can learn more about it at https://github.com/panique/php-mvc.

Below is a screenshot showing you how simple the file structure is.

 

Update: another nice and simple PHP MVC framework is Simple MVC Framework.

which include some key plugins / extensions like PDO for safe, database-agnostic SQL and GUMP for form input validation.

Last night I came across a situation where I had 447 folders each containing many subfolders and with only one file in the last subfolder. I needed a way to move all of these nested files into one parent folder. Luckily, there’s a small free program called Suction that can do this very easily. A screenshot is below. It worked perfectly and quickly.

STEP 1: Purchase Domain at Domain Registrar

e.g. abdullahyahya.com is registered at godaddy

• GoDaddy
• Hover
• Gandi
• etc

 

How to find where a domain is registered?
Do a whois lookup, e.g. http://www.whois.com/whois/abdullahyahya.com

 

STEP 2: Set Domain Name’s Name Servers at Domain Registrar’s Control Panel

e.g. below is the control panel to set the name servers for abdullahyahya.com

Continue reading How to Set Up a Domain Name

When setting up a web server, if it’s one of the following

• Apache
• Google App Engine (GAE)
• Internet Information Services (IIS)
• lighttpd
• Nginx
• Node.js

you may want to start or compare  your config with some boilerplate configs you can find at

https://github.com/h5bp/server-configs

Many best practices and optimization are included in them which can save you a lot of time.

If you’d like to know which fonts are being used on a web page or in an HTML tag, Firefox Inspector has a tab called Fonts that will easily let you see this. Screenshot below.

As a website grows, you can find yourself with a ton of CSS that may or may not be needed. Cleaning this CSS is necessary to facilitate maintainability of your code. But how do you find unused CSS. A Firefox extension called Dust-Me Data does a decent job of doing that. Below is a screenshot show how many unused selectors there are from each source followed by a listing of each selector.

If you’re on Windows and you’re trying to delete a folder but you get an error like the following:

Folder In Use
The action can't be completed because the folder is open in another program
Close the folder and try again.

You can easily close / kill all processes / handles / DLLs that are using the folder by using a program called Unlocker. If Unlocker can’t find an processes in use, you can still have it delete the folder immediately or after a restart.

When trying to track down where some Javascript code is getting executed, it’s useful to see a function call stack. While many browser inspectors can give you this information, I have found Safari’s inspector to be the easiest to use for this particular purpose. In the screenshot below, you’ll see that I set a breakpoint on line 8 where the “write” function is defined. When you load your page, you’ll see a call stack box on the left in the Safari inspector showing all of the functions that were called before the “write” function was called. Clicking on each function shows you the section of code in its respective file. In this case, an anonymous function in the “search” file (search.html) on line 259 called another anonymous function in the “search” file on line 261 which then called another anonymous function in the jsapi file (jsapi.js) on line 93 which called another anonymous function in the jsapi file on line 244 which called function “d” in jsapi on line 143 which then finally called the “write” function in main.js on line 8 where I set the breakpoint.

When developing websites, you often need to browse to a bunch of  URLs to check each page visually. Since I got tired of copying and pasting URLs from a text editor to my browser for each URL, I created a simple tool to convert a newline-delimited list of URLs to hyperlinks that opens each link in a new tab. After clicking on a link, its background turns yellow so you can keep track of where you left off. You can use the tool at

http://www.woodfishart.com/abdullahyahya/multiple-url-browser.html

When developing websites, you sometimes run into pages that are very long. You may have your CSS at the top of the page and your HTML below. The SublimeText editor has a neat feature that let’s you view and edit a single file in multiple views so you can view and edit one part of your file in one window and another part of the same file in another window. To do this, open a file and then click File > New View into File.  I then like to drop my 2nd view of the file into a new pane like below. If you edit the file in one view / pane, that change will also be applied in the 2nd view because you’re essentially editing the same file even though it may look like 2 separate files.