Check out the newest playground idea: Galaxy. Messing around with JavaScript driven animation.
Check out the running version of the animations here.
Sweet Menu, a new jQuery plugin
I’ve made my first jQuery plugin, it is called Sweet Menu.
What does it do? Sweet Menu takes an ordinary unordered list of links and makes it a sweet looking menu. It does this by utilizing jQuery and it’s plugin system. Simply include the jQuery library, the Sweet Menu plugin, and make a simple jQuery call and you are on your way to a sweet looking menu!
Go ahead and check out it’s project page for more information, and please leave comments or contact me if you have any sort of feedback!
Awesome web developer apps
Finding the right tool to do web development is key to being successful. Technically, you can do the majority of the job by just using a simple text editor, but it seems silly to not take advantage of the great apps out there today. Since there are many apps that aid in this category, I thought I might pick a few favorites and give some insight into why they are awesome web apps.
The all mighty web browser
Although I have enjoyed the some-what recent release of Google’s Chrome browser for Mac OS X, it isn’t the right browser for the web developer. Perhaps in the future it might have a chance, but until the plugins start running on Mac OS X, and some other minor glitches are worked out (like refreshing the cache when I tell you to Chrome), you have to use Firefox.
Even though Firefox isn’t the fastest browser out there, it does a very good job with web standards and it has web developer specific plugins:
- Web Developer: this plugin has some great options for debugging and testing
- Firebug: this plugin is great when you need to debug JavaScript and AJAX.
- MeasureIt: this simple plugin lets you measure distance in pixels, not super important but nice for figuring out layout problems
Although I wish I could develop exclusively on Mac OS X, I do a lot of development on Windows as well and because of that I am going to pick out options for both of those operating systems for the next sections.
Graphics
I feel like any web developer out there already knows this, but the answer here is Adobe Photoshop. It is an industry standard and is used so much that there are many resources available for it online. It is pricey, but worth it if you are a web developer. Plus, CS5 just came out, so cheers for new features such as Puppet Warp.
Text editors
There are times you want to just open a file really quick and don’t need the overhead of an IDE. To make a quick edit. If I am working in Windows I prefer Notepad++ because it has some powerful features and is super lightweight. It also has some plugins for extending it’s regular functionality.
For Mac OS X, I like Smultron, for your basic text editor. However, the developer has decided to discontinue development on it. I plan on looking into more options in the near future.
Transferring your files
I do the majority of my file transferring on Mac OS X, so I will start there. I use Transmit. It is inexpensive, works really well and integrates really well with the OS X environment. If you do not want to pay for something, or you are using Windows your next best option is FileZilla. Although the interface isn’t as clean it is very powerful and will do everything you need it to do.
IDEs
I know many web developers who do not use a true IDE, and one of the applications I am about to recommend isn’t really an IDE, but it has a lot of the same features. An IDE to the average web developer is a glorified text editor because most of the time we aren’t dealing with compiled code, so an IDE isn’t something we need. However, many IDEs have great features like project management, function and variable auto-complete based on your code, and offer better documentation methods to name a few features.
At the top of my list, is Zend Studio. This IDE is the most complete, least buggy, cross platform compatible and most extensible IDE I’ve used. It is slower when it is starting up than your average text editor, but once it gets going it’s features greatly speed up the development process. This IDE does carry with it a large price tag, so be warned if that is an issue.
Next on the list is the sudo-IDE, Coda. Coda is made by the same people that make Transmit. It is priced really well and has a great editor with a project-based perspective and even has some nicer features than Zend Studio does. Even better it utilizes the smart and beautiful Mac OS X interface and has all the great features that Transmit does as well.
If free is your only option here there are some good options such as Netbeans, Aptana and more. There is a great article over at Smashing Magazine about picking between IDEs.
Database tools
For the purposes of this article I am going to talk about MySQL tools as that is the most common need out there. There are three things that you need here, and they are all free and cross platform:
- phpMyAdmin — this is a great PHP application that is practically an industry standard tool, it’s free and easy to use
- Command line access — having command line access is an important safe guard and is sometimes just necisary
- MySQL GUI tools — this comes straight from the MySQL folks and although it is a little clunky, it is a nice desktop application and supports stored procedures, it is really nice when you are writing a bunch of queries and want to have multiple queries open
I hope you enjoyed the article and I look forward to hearing your comments and feedback.
New tools for you web developers out there
My goal has been to be adding a new tool every week, and so far I’ve succeeded. This week, I’ve added a new tool to the Web Dev Tools website. Check it out!!!
Harder, better, faster, stronger
This website will be migrating to a new, much better, server this week. The downtime will not exceed 1 hour. All of the paths will remain the same, so there is no need to update any bookmarks. The change will happen when the DNS records update, so all I can tell you is that the migration will happen within the next 48 hours.
New front page
I’ve updated the front page to help prepare for some great stuff that I am working on. Enjoy the new looks and also start checking out a brand new sub website: Web Dev Tools.
Sorry for the short post, but much more to come in the near future (plus is is almost 2 am and I need to get some sleep).
Peace out!
How to serve files with mod rewrite
Have you ever wondered how some websites seem to serve files in a way that looks like folders instead of actual file names? For instance this website. To see this blog post you are linked to the URL http://adambecker.info/development/how-to-serve-files-with-mod-rewrite/ but in actuality the web server is running a PHP file and serving it as if it is being run from the location I just pasted.
Why do this? There are some good reasons for doing this:
- You can make your URLs friendlier to the people who are visiting your website
- Having friendlier URLs means easier to understand URLs for search engines, which is good for search engine optimization
- Better security. With the way I’ve setup this model all of the server files are outside of the browse-able web directory, which means they can only be accessed through the index.php file.
Besides your normal code, you basically need two additional files: an .htaccess file and a redirection file which I’ve named index.php.
The .htaccess file lives in your root directory and should look something like this:
1 2 3 4 5 6 7 | <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> |
If you aren’t familiar with htaccess files, Google it and you will find some great information about them.
The index.php file also lives in the root directory and should look something like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <?php if(substr($_SERVER['REQUEST_URI'], 0, 10) == '/index.php'){ header('Location:/'); } else { // due to mod_rewrite every path comes to this file $args = explode('/', $_SERVER['REDIRECT_URL']); $pages = array(); // we're going to remove all of the empty arguments foreach($args as $arg) { if(strlen($arg) > 0) { $pages[] = $arg; } } // if we don't get any arguments we want to give it our main page if(count($pages) == 0) { $pages[] = 'main'; } // in this model the area's main page is named after the area if(count($pages) == 1) { $pages[] = $pages[0]; } // in this model we can accept as many nested areas $includePath = '../lib/pages/' . implode('/', $pages) . '.php'; if((@include $includePath) != true){ if((@include '../lib/pages/error/404.php') != true){ echo 'There was a serious error, and we\'re sorry for the inconvenence. Please try again soon.'; } } } ?> |
Sample File Structure
The file is pretty self explanatory, but it is important to know that this isn’t the only way to do it. I’ve added some functionality for error 404 pages, and an even bigger fatal error. Last, I wanted to include a picture of a sample file structure that this particular example works for. Keep in mind that the htdocs directory is the only publicly browsable folder via a web browser in this sample.
Mac OS X: end and home keys
I have been using Macs over five years and it has always bothered me that the home and end keys didn’t do what they do on every other computer. For whatever reason, in Mac OS X, when you hit the home or end key your view of the text document is moved to the beginning or end respectively. This wouldn’t be an issue if every other computer hadn’t taught me that these keys are supposed to move me to the beginning and end of the line of text that I am on. I finally get annoyed enough to figure out the answer.
After a quick Google search I found the answer from a blog called Phatness. You can read the article here, but if you don’t want to read all the introduction over there, which was decently funny, here is what you do to fix it yourself:
1. Create a new file called DefaultKeyBinding.dict in the directory Users/%YOUR USERNAME%/Library/KeyBindings/
* Note: This folder won’t exist if you haven’t setup non-standard key bindings
2. Copy the following code into the file, and save the file
3. The new key bindings won’t take affect in any applications that are open without re-opening them
1 2 3 4 5 6 7 8 | { "\UF729" = "moveToBeginningOfLine:"; "$\UF729" = "moveToBeginningOfLineAndModifySelection:"; "\UF72B" = "moveToEndOfLine:"; "$\UF72B" = "moveToEndOfLineAndModifySelection:"; "\UF72C" = "pageUp:"; "\UF72D" = "pageDown:"; } |
A nerd blog
There is no denying it, I am a big nerd. I play video games and I program for a living. I mean, I have my own domain name and that means something because I know some “nerds” that don’t have their own domain name.
I’ve decided that it is time to embrace my inner nerd and take it to the next level. If you’re interested in web development, gaming, and other nerdy adventures stay tuned! I am very much interested in what the viewers think, so please comment and I look forward to start writing dome good entries very soon.