CSS

Web development with the iPhone and iPad in Mind

Friday, July 30th, 2010 | Business | 1 Comment

In the very near future, I will be posting a series of posts on what you should/shouldn’t be doing to develop a website where the iPhone and iPad are a target demographic.  jQuery will figure prominently in the series, as I’ve seen almost all websites now require work with jQuery (or anther AJAX platform).

Let me know if you have any specific questions / concerns, and I’ll be glad to answer them.

Some interesting things to think about:

  • How are mouse clicks triggered? (It’s not as straightforward as you’d think)
  • How are hover states triggered? (Hint: the iPad has a hover state, but it’s not what you think — remember you only have a single touch, no arrow following your finger)
  • What types of gestures can we use?
  • What special considerations must we make for CSS?
  • What are the ideal screen dimensions? (this is easy, but remember we have multiple devices, and multiple orientations)
  • What types of video can we play? (iPad, iPhone 3GS, iPhone 3G, iPhone 2G and the original iPhone all have different specifications, it’s not that easy)

Tags: , , , , , , , , , ,

How to speed up your WordPress Blog

Friday, June 18th, 2010 | Business | 2 Comments

I finally got around to speeding up my WordPress blog and wanted to share with everyone the various things I did.  I reduced my average page load time on certain pages from 15 seconds to about 1.5 seconds.  That’s a big change.

My favorite test was a quick click through.  On my new host I timed 6 page loads down to about 5 seconds.  When I did the same test on my old setup, it took about 20 seconds (I know, below the 15 seconds average, that was really only for 1 page, but one of my most trafficked pages).

› Continue reading

Tags: , , , , , , , , , , , ,

Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Wednesday, June 16th, 2010 | Tutorials | 4 Comments

This tutorial will cover:

  • Modifying CSS attributes with jQuery
  • Setting a class for a page element
  • Removing a class from a page element
  • Testing if a class exists
  • A quick toggle click behavior example

The final example will use all of the other elements in a single exercise.

› Continue reading

Tags: , , , , , , , , , , , , ,

HTML 5 Presentation on HTML5

Saturday, April 17th, 2010 | Business | No Comments

Saw a great HTML5 presentation today at Apirocks.com: HTML5 Presentation.  Has tons of useful demos of new HTML5 technologies that you can actually USE TODAY.

› Continue reading

Tags: , , , , , , ,

10 CSS Tools: Cheat sheet, CSS Desk, Lorem 2, CSS Guide, etc.

Tuesday, April 13th, 2010 | Business | 2 Comments

Recently I saw some css links that I thought were useful:

  1. CSS Desk – Real time development tool for trying out CSS changes
  2. CSS Cheat Sheet – Look up some of those properties that you always forget.  It is italic or italics?
  3. Don’t use @import – A comparison of performance using both @import and link
  4. Complete CSS Guide – In depth guide of the various controls we have in using CSS (probably more for beginners)
  5. Position is Everything – An entire blog devoted to CSS and web browser bugs
  6. CSS Working Group Blog – Stay up to date on CSS3 decisions, and CSS conversation
  7. CSS Type Set – A CSS tool that allows designers (and developers) to see how copy will look with various CSS controls, and the resulting CSS
  8. Lorem 2 – A “better” way to use Lorem Ipsum?  I’ve always used Lorem Ipsum, but this looks promising.
  9. CSS Text Wrapper – I’ve always wondered why CSS didn’t support (and still doesn’t really) more complex shapes.  This tool attempts to allow us the control we’ve been wanting, although the output is complex, it may fit the bill for a few sites out there.
  10. CSSTidy – Open source CSS parser and optimizer.

Tags: , , , , , , , , ,

IE6: Graphical Illustration of Problems with CSS

Tuesday, February 23rd, 2010 | Business | No Comments

Posted on flickr, css mess, is one artist’s (atzu) homage to the problems all web developers face in IE6.  As the creator says:

By the way, I wanted to thank all these major sites as Youtube, Facebook, Google that are not supporting Internet Explorer 6 anymore.

— atzu

IE6 css mess

Click for Larger Version

› Continue reading

Tags: , , , , , , , ,

IE6 and IE7 limit CSS links to 30

Saturday, August 15th, 2009 | Business | 1 Comment

Help!  Working in Drupal and having trouble getting stylesheets to work?  Did they break all of a sudden in Internet Explorer only?

I can’t see my stylesheets anymore in IE6 or IE7!

Internet Explorer limits the number of stylesheets included with a LINK tag

That’s right.  If you include an additional CSS file beyond 30, it will break other CSS files.

This problem is only in IE6 and IE7.  Officially I’m sure Microsoft says the fix is to upgrade to IE8.

What code causes the problem? Perfectly valid code below:

[sourcecode language=’html’] [/sourcecode]

Just repeat that 31 times, and you will see an error.

The Solution

While <link> tags may have issues beyond 30 stylesheets being included, you can cheat with using @import.

For example, include CSS using the following instead:

[sourcecode language=’html’]

[/sourcecode]

If you’re working in Drupal, there’s a module that implements this fix for you, IE Unlimited CSS Loader.

Tags: , , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- &#91;if lte IE 6&#93;>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< !&#91;endif&#93; -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

Tags: , , , , , , , , , , ,

jQuery 1.3 Released – How to use jQuery

Thursday, January 15th, 2009 | Business | 10 Comments

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript.”

jQuery version 1.3 was released yesterday.

Some new features in 1.3 are:

  • Sizzle – a brand new CSS selector engine
  • Live Events – event delegation with a jQuery twist
  • jQuery Event Overhaul – simplified event handling
  • HTML Injection Rewrite – Lightning-fast HTML appending
  • Offset Rewrite – Super-quick position calculation
  • No more browser sniffing!!
  • New API Browser – http://api.jquery.com/

I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.

Are you new to jQuery?
jQuery is a library that you can include on your web projects.  jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex.  Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites. 

Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:

  • Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
  • Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge

Getting Started with jQuery
jQuery provides a series of useful tutorials.   

Some favorites are:

There are so many more tutorials out there.

Tags: , , , , , , , , , , , , , , ,

Favorite Software for Web Development

Wednesday, December 3rd, 2008 | Business | 1 Comment

Sometimes when you start out doing something on computers, it seems so hard until you get the tools that everyone else uses.

In this post I’m asking everyone else for feedback, what do you like to use?  Go ahead and comment it in there, I’ll add it to the article as I see em.

Below are some of my favorite pieces of software for web development, some will be very obvious (Flash, Photoshop, etc.) … some maybe not so much:

TextPad
I love textpad for basic text changes from everything PHP, to HTML, to writing notes.   It’s great to have multiple documents, line numbers, quick global / file / local search and replaces etc.  I use this when I’m working with source files, XML definition files, CSS files, to CFM or other formats.  I love it.  

HomeSite
Those of you who know homesite, will know it’s pretty much gone nowadays.   The heyday was many years ago.  The direct FTP editing was amazingly useful.  It has some features that I still go back to now and then.  Mostly search and replace functionality, FTP based editing (right on ther server … mostly), document formatting (code sweeper), and other utilitarian functions.  

CuteFTP Pro
Working on the web, we all are in constant use of FTP (more so than we should be).  Cute FTP has always been a staple of my software toolbox.  It’s so easy to launch connections to all the FTP servers you use throughout the day, keep them open for jumping between projects.  The number of protocols it supports is flexible (FTP, FTP w/ SSL, SFTP, HTTP, HTTPS, etc.), and it always seem to be able to connect.  The speeds and setting are highly configurable.  It’s nice having 50 simultaneous downloads going at a time.

Tortoise SVN
Whoever isn’t using SVN, should be using SVN (or CVS or whatever other version control system you can think of).  Tortoise SVN is an essential windows interface enhancement to integrate SVN into the file browser.  For those of you who use CVS, there’s a Tortoise CVS as well.  It is easy to look at version histories, compare files based on modification dates, and to pull down new updates.  

Subversion
Source control is underutilized in my experience.   So many sites aren’t run with source control.  Think of the advantages: automatic source control, automatic offsite backup (if you use an external host — which I would love to recommend svnrepository.com, a very cheap hosted SVN repository).  Read about it, get used to it, it will save a project.

Eclipse
You were waiting for me to say it weren’t you?   An open source IDE.  Technically it started as a Java IDE (most Java developers should be intimately familiar with this).  Thanks to add-ons developed by the community, it supports, quite adeptly, PHP and other web development technologies.  It has built in SVN support, supports deployment scripts… its amazing.  Try it, explore the community around it.  Check out the Subclipse add-on, as well as the Web Developer Tools, and Eclipse XML Editors and Tools.

Adobe Flash (Adobe Creative Suite 4 Design Premium)
Pretty much a no brainer, you need Adobe Flash to develop flash.  It’s a great tool, worth every penny.

Adobe Photoshop (Adobe Creative Suite 4 Design Premium)
Another obvious one.  Photoshop is a requirements for all web development.  No, you shouldn’t be doing web design work as a developer.  However, there is always the need to look at colors, size things, cut up images, process original artwork, the list goes on forever.  I really recommend the Adobe Creative Suite, we use almost all of the software anyway.  

Microsoft Word (Microsoft Office)
You will always need this (or another decent word processor).  Yes, you can get by without it.  However the sheer amount of things Word can handle: Estimates, Proposals, Letterheads, Envelopes, Labels, the list goes on and on.. you will wish you had it someday.

Microsoft Excel (Microsoft Office)
Another one that you don’t always think about, but excel makes writing estimates so much easier.  You can update your entire estimate based upon a new discount, manage hours, track changes.  I’ve used Google’s online spreadsheets before – they are great.  But they aren’t fully able to replace excel yet. 

Microsoft PowerPoint (Microsoft Office)
Those proposals are much better with an accompanying presentation. Tell your clients what you do, what they need, in a way that can impact people in a conference room.  Everyone yawns when it comes to yet ANOTHER powerpoint presentation, but you look unprofessional without one in most cases. 

MySQL
Normally this is on a hosted platform, but you need a database to do the cooler web development projects.  MySQL is cheap, but if you want you can substitute in Microsoft SQL Server, or even Oracle.  In my experience if you know why you want MS or Oracle, you can pay for them.  If you don’t know why you want either of those, just go with MySQL.  

PHP MY Admin
Administration software is just as important as the backend engine, at least for development.  It lets you manage a database online, easily, and export simply.  If you haven’t used it, try it. 

SQL Server Management Studio
Another tool for development on SQL servers.  Same as PHP My Admin, arguably much more helpful, but it is a client app.  If you’re working with Oracle, or prefer these desktop applications to the PHPMyAdmin web interface — check out Aqua Data Studio

There are really dozens more tools I consider very useful.  Not exluding:

– Versions of all browsers
– VPN Connectivity software
– Remote Desktop
– VNC Client
– pcAnywhere (not so much anymore)
– Outlook / Email Client

Last but not least, is Google.  It is the best tool you will have when working in web development.

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template