Archive for the ‘Web Development’ Category

Web Development Tools for Mac OS X

Wednesday, December 19th, 2012
Posted in Web Development · Tags:
  • ImageOptim – Optimize JPG, PNG and GIF images for the web
  • Less – Compile and compress .less files to CSS
  • Sublime Text – Great text editor. Not free
  • Cyberduck (or FileZilla) – FTP client
  • Shrink-O-Matic – Resize a bunch of images before you ever upload them. This way uploads are faster and any resizing your webapp does is much faster. Just pick a size that is big enough for your biggest usage scenario instead of the gigantic images you have from your camera or stock photography.
  • VMware Fusion – Setup virtual machines for testing your sites in IE or perhaps older browsers. Not free
  • Smaller – Minify HTML, PHP, CSS and JavaScript files. Not free
  • MAMP – Apache, Mysql, PHP and phpMyAdmin

Applications to do HTML5 Animation

Wednesday, November 28th, 2012
Posted in Web Development · Tags: ,

Keep in mind that none of the following use Canvas.

  • Sencha Animator has a really dark UI, asset library and doesn’t output code that will work in Firefox.
  • Tumult Hype is another application to help build HTML5 animations and interactive content. It lets your hit record and creates keyframes based on what you move.
  • MotionComposer has a unique interface without a real timeline because you move things around and it figures it out for you. It will generate Flash or HTML5 content.
  • Adobe Edge Animate is currently free. It doesn’t work as nice as Flash, but I’m sure it will get there. However, I doubt it will remain free forever as it becomes more advanced.

Website crashes on iPad or iPhone?

Friday, November 9th, 2012
Posted in Web Development · Tags: , ,

If you have a website that crashes on the iPad or iPhone there are a few things to check.

  • Remove all JavaScript for the site and see if this eliminates the problem. If so, you’ll need to analyze your scripts one at a time
  • If JavaScript isn’t the issue, its probably memory related. Something on the site is hogging up a lot of memory.
    • Is there any complicated HTML5 animation? Simplify or figure out what part of the animation is causing the site to get so sluggish it crashes.
    • Are there any huge intricate PNG files or a GIF with very complicated transparency or alpha layers? Try to simplify the graphics or at least disable a few until you figure it out.
    • Do you have any complicated SVG files? Try making it more basic.
    • Do you have a really huge text-shadow or box-shadow? You’d be surprised how this can bog down a site. Disable the shadow or make it smaller in your CSS file.
    • Do you have any other CSS features that could be causing Safari to quit? Perhaps a complex gradient?
    • Do you have a really huge image or complicated site? Try to break the page up into separate pages.

If you still have issues after trying the above. Be sure you are clearing your cache in your browser. Also check to see if you have an redirection code on the server or a meta refresh that is going in an unending loop.

Bloated CMS Sites with lots of plugins, JavaScript and CSS files

Thursday, November 1st, 2012
Posted in Web Development

Many CMS websites seem to be use between 500kb or more of JavaScript and jQuery plugins and lots of other CSS files based on whatever 10 or more CMS plugins (modules, widgets) they need. Google now takes page speed into consideration for ranking, so it’s not the best way to go. Granted the desktop user on cable internet won’t notice it that much unless the site is almost 2MB or the JavaScript is really slow to load. And lets face it a desktop user is the one building the site most and that’s where it’s tested mostly was well. In the end I guess people are trading fast development times to just get the site done rather than hand tweaking and crafting a site to make it lightweight. Just make sure it looks good, who cares if it’s calling JS and CSS files it doesn’t need on every page. Be sure to add a slider/rotator/slideshow at the top with at several huge images as well. End rant. :/

Why Drupal is still a popular CMS

Monday, October 1st, 2012
Posted in Web Development

Another Drupal developer left left the project so it reminded me of something I’ve been wanting to write. Drupal has been the top CMS for many years. It is very powerful and can be coded, hacked and pieced together into any kind of site by someone that can or can’t code. However, the point and click interface that caters to coders and non-coders (some might say developers and designers) makes the whole system of Drupal way too complicated. Most Drupal Developers have their collection of must have modules they use on many projects to get things done. Views is a great module that lets you basically build custom queries from your database and output them how you like. However, with that power comes a massive interface with ton of options and modal overlays. So you end up with part of your site powered on the backend and a lot of it from a Views configuration in the administration. It’s a mess, but in order to help coders and non-coders, its the only way Drupal can exist. There is the logical way and then the Drupal way, don’t get the two mixed up. Modules save time, don’t get me wrong, but it takes awhile to test, figure out and setup the ones that you will need.

Drupal's Learning Curve vs other CMSes

I think Drupal stays popular for several reasons.

  • The people that build sites with it, know they can build anything with Drupal and know it very well, so they have no reason to switch.
  • Drupal continues to feed on the popularity its had for years. New comers hear about some site that was built with it or the impressive amount of sites and figure this is what they need.
  • Drupal has a huge community of people, but it makes sense as people have invested lots of time into sites of the past, need to maintain those sites or need to built some other massive site.
  • Because of its powerfulness and complexity many companies now exist that specialize in using Drupal exclusively to built whatever their clients want or to help out people that are confused or need help. Again, it feeds on its past popularity.

Personally, I don’t like Drupal. I’ve had the displeasure of learning it to build a massive site once. And it was more of a hassle than what was warranted. I believe any web agency that still insists on it for every client site is still living in 2005 (I may even cut them a break and say 2007).

LESS CSS Font-Size (Parametric Mixin) Function for Pixel to REM

Monday, July 16th, 2012
Posted in Web Development · Tags:

I made a Parametric Mixin in LESS that will convert your pixel sizes to REM.

/*define this mixin first - make sure @target_size is greater than 0*/
.calc_font_size (@target_size:16px, @base_size:16px) {
@rem:(( round((@target_size / @base_size) * 10000) ) / 10000);/*so it can be rounded a bit more*/
font-size:~`"@{rem}".match(/\d+\.?\d+/) + 'rem'`;
/*set the body font size*/
body {font-size:100%;}
/*example to use*/
#footer {.calc_font_size(12px);}/*pass in the font-size you want in pixels*/

That will generate the following CSS

body {font-size:100%;}
#footer {font-size:12px; font-size:0.75rem;}

This mixin will output the size in pixels first then output them in REM.

Responsive Images Scaling or Squishing Issues

Friday, July 6th, 2012
Posted in Web Development · Tags:

I was setting up responsive images and ran into an issue that the images were being squished and squashed. And it was because the image tag had a height attribute set in HTML. It’s easy to overcome this with CSS though.

@media only screen and (max-width:959px) {
img {max-width:100%; height:auto !important;}
<img src="image.jpg" width="150" height="150" alt="my image">

How to test for any TextLinkAds first

Sunday, April 15th, 2012
Posted in Web Development · Tags: , ,

If you run Text Link Ads with the WordPress plugin, you might run into a situation where you want to check to see if there are any ads before you output them on your site. The reason, maybe that you have some heading or decoration near them that depends on them showing up. Well, I made a little hack to do just that.

/*homepage only*/
if(is_front_page() && function_exists("tla_ads"))
//hack to see if we have any ads available
global $textlinkads_object;
if (count($textlinkads_object->ads) > 0)
//output whatever heading or decoration you want here
tla_ads();//show ads

Stop using 960 pixel width web designs for no reason

Friday, March 4th, 2011
Posted in Web Development

Something that’s been a pet peeve with me, is that too many sites use 960 pixels, no matter how much content a site has. I understand it works great for at 1024 width resolution and there is nothing wrong with white space. But I’ve seen too many sites use it with no thought. Often times you see a site and there is only a paragraph or 2 in the left and 1 in the right and the design doesn’t utilize the whitespace and lack of information on the page. Does this mean use 760px (good for 800 width resolution)? Personally I think if you want your site to stand out a bit, you should use a smaller size width or a different width size than those 2 standards, but again it depends on how much content you have and how your design handles varying amounts of content.

Now about centering pages, I know resolution widths these days can be huge on wide screen monitors; However if you want to set your site apart a little, place it slightly off center. Depending how off center you place it, you may want to balance it off with a subtle background graphic or something on the other side or slightly on the opposite side. I’ve done this on a few sites and it really seems to make the site seem fresh, compared to the 960px landscape. But perhaps you know of the 960 grid system CSS framework and think its the only way to design.