Aug 19

Rules to code by, Part 1

When I code things myself and especially when working with code that other’s have written, here are things I always think to myself.

Just a few friendly tips to keep in mind for your next project. These are in no particular order, just as I thought of them.

 
 
 

  1. use comments so others can understand what you are doing
  2. do not use any Dreamweaver generated code as your example (in most cases, do the opposite)
  3. use a JavaScript framework (my favorite is MooTools), no need to re-invent the wheel for things like ajax
  4. try and stick to one framework instead of mixing MooTool and jQuery
  5. don’t make functions with a million arguments, just pass a single array for readability and flexibility (think MooTools style)
  6. use tabs not spaces
  7. use all lowercase filenames and directories
  8. even worse, don’t name files in one case and code them in a different (ever heard of a case sensitive filesystem?)
  9. use associative arrays where it makes sense, such as multi dimensional arrays and objects (see this post)
  10. honestly, who uses Spry anymore?
  11. CSS hacks and IE conditionals are cool and all, but learning to code CSS better will almost eliminate any hacks you’ll need
  12. keep admin and front end code separated except for shared functions
  13. test in all the browsers you need to support
  14. code for standard compliance first, then fix as needed for Internet Explorer (see #11, in most cases IE will work well if you code well)
  15. avoid flash for things like menus that can easily be accomplished using HTML and CSS
  16. avoid inline JavaScript and instead use an external file to keep the HTML clean and maintainable
  17. don’t use inline CSS either
  18. make sure to secure your ajax pages, don’t want anyone messing with your database
  19. keep mobile platforms in mind when thinking about usability
  20. public pages should function in IE6, but I’m not too concerned about them looking good

Well, those are 20 things I just thought of. I’m sure I’ll think of more and when I do there will be the inevitable part 2 post.

0
Jul 29

PowerGallery Stack design

If you aren’t familiar with PowerGallery, it is a PHP web app that I created for WebAssist. Basically, you can upload your images and display them on your page with several built in gallery designs. When programming this product, one thing I wanted was easy extensibility so more designs could be added easily. The 1.1 release added 3 slideshows that were great.

I’ve created another design called Stack and you can download it for free below. To install it, just unzip the file and upload the stack directory to the galleries directory inside your PowerGallery installation. That’s it! Log in to the admin and you’ll see Stack a new choice on the Choose Design page.

This gallery was created using the ElementStack MooTools plugin. You can see a live demo here. Since PowerGallery uses MooTools 1.2, you can easily create galleries yourself and just drop them into the galleries folder for easy use.

 

Download the design

 

0
Jul 22

PayPal countries and regions in JSON

I was working on a PayPal powered commerce website and for the checkout form, I needed to create a dropdown list of the countries that PayPal supports. I couldn’t find a list in the exact format that I needed, so I created a JavaScript array of JSON objects. Pretty straightfoward, but I thought it would be a good starting point for some of you if you need the same thing.

This list uses the countries listed on PayPal’s website. PayPal requires that you send the 2-character IS0-3166-1 code to their API. Below I have the name and code combinations.
Continue Reading

0
Jul 8

CodeIgniter encryption gotcha

Over the last few weeks, I have been learning CodeIgniter which is an open source PHP framework. It follows the MVC (model-view-controller) methodology, but allows you to utilize your existing PHP skillset. Overall I think CodeIgniter is great so far, but there are are few gotchas to look out for.

I found an issue today regarding the built in encryption library. Basically, the encrypted string might not be the same thing every time. For example, you might want to encrypt a user’s email address. The first time you might encrypt it on a sign up form. Now on the login page, I want to compare the value the user typed in with the database. The problem is, if I encrypt the email again, it most likely will not match even though the original string is the same!

$this->load->library('encrypt');
$a = $this->encrypt->encode('justin');
$b = $this->encrypt->encode('justin');

echo $a == $b ? 'equals' : 'nope!'; //will print nope!

Behind the scenes, CodeIgniter is basically rotating keys to produce different encrypted strings that decrypt to the same thing. It’s actually a really cool and secure way of handling the encryption, but for the purpose of comparing values (on a login form for example) it just doesn’t work.

Alternatives

So, if you need to do some comparisons using your encrypted data, you have a few alternatives. If you want to stick with PHP, you can make use of the mcrypt_encrypt and mycrypt_decrypt functions. If you want a MySQL solution, look into the encryption functions in their manual.

2
Jun 13

Some HTML5 links to get you started

I have finally started diving into more HTML5 lately and have some good links to help get you started. The syntax itself is somewhat new, but the hard part in my opinion is knowing what browsers support what. The easy answer seems to be Chrome 5 supports the most, followed by Safari 5, then Firefox, and lastly Internet Explorer 8 (with almost no support, shocking!). I have moved to Chrome as my default browser now for quite a few months since it just supports so much more of the standards than the others.

The new syntax and tags make a lot of sense one you get the hang of it and see the reasoning behind it. The CSS3 and JavaScript enhancements are also pretty slick. Some of things MooTools offers are now integrated as native functionality. I still plan on using MooTools to ensure cross browser support though.

Continue Reading

0
May 19

HTML5 pack for Dreamweaver CS5

Adobe has released a Dreamweaver CS5 extension that adds in support for HTML5 (including CSS3). The WebKit engine itself has been updated to support the new tags and rendering needed to work with HTML5. Live view and design view have these engine updates implement. Also remember since live view runs WebKit, any -webkit css properties will render just fine. I know Dreamweaver doesn’t always produce the best code, but this extension still seems pretty cool and should be a great learning tool. Adobe also announced they will support VP8 (Google’s new open-source video codec) going forward in its Flash player.

As noted on Adobe Labs, here is what the HTML5 pack offers:

  • Introduces the Multiscreen Preview panel , allowing for Live View display on 3 different screen sizes, with Media Query support. (Window > Multiscreen Preview)
  • Adds code hinting for the HTML5 Tag Library with new tags, attributes, and properties.
  • Updates code hinting for new attributes and values in existing HTML tags.
  • Adds code hinting for the following CSS3 specifications: 2D/3D Transformations; Animations; Background and Border; Basic User Interface; Line Layout; Marquee; Media Queries; MultiColumn; Ruby; Text; and Transitions.
  • Updates Live View to support <video> and <audio>. (Requires Quicktime installation)
  • Improved rendering for CSS3 in Live View.
  • Adds HTML5 starter layouts to the New Document Dialog box.
  • Offers better rendering for new tags in Design View.

Here is a video that explains some more. It’s a flash video though, so that is sort of an epic fail.

Download the HTML5 pack:
http://labs.adobe.com/downloads/html5pack.html

0
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. 6
  8. 7