CSS Sprite Technique Using Color Overlay in Photoshop
As a web developer working with designers who provide me with a plethora of assets, I often find myself in situations where I need to create rollover states in Photoshop for text assets whose fonts I don’t have installed on my computer. Keep Reading
Google’s brilliant video explaining what a video so the 92% of people who don’t know what a browser is (OUCH) can begin to understand the benefits of progressing forward.
However, I wouldn’t trust the people in Times Square as they are the same people that travel to the largest city in the country and end up eating at an Applebees.
Magento Beginner's Guide by Packt Publishing
Magento Ecommerce is a powerful, flexible open-source system that can produce great results right out of the box. At Pod1, we work exclusively with Magento to deliver custom ecommerce websites for high end fashion brands and more. Because I’ve seen an incredible amount of client success with Magento I’m quick to recommend it as an extremely capable e-commerce solution.
While Magento is a great tool, its learning curve is steep (relative to other platforms) and reliable, thorough documentation is often hard to come by.
Enter the good people at Packt Publishing. Their Magento books are invaluable tools of navigating a powerful but daunting platform. I’ve read Magento 1.3 Theme Design and it does a great job explaining how to customize Magento, so when Packt asked me to review Magento Beginner’s Guide I knew I’d have some great reading ahead of me.
Typically people asking me for e-commerce advice are small business owners or do-it-yourselfers who want an online presence that they can set up and manage themselves. I recommend Magento to them because of its scalability so as their business grows, their e-commerce presence can grow with it. However, everyone who has taken my advice and decided on Magento usually come running back to me after about an hour saying “Sooooo, how exactly do you do this?” Several painstaking hours later they are online and ready to dig in. I then get another call saying something along the lines of “How do I make the background green?” Keep Reading
Web development without Firefox plugins is like building a fire with a flint when there’s a perfectly good military-grade flamethrower lying right beside you. These are the little guys that make my job and life that much easier.
This plugin is the one I hands-down use the most. The ability to isolate an HTML element and see what CSS is controlling it is invaluable, especially when working with complex CMS systems or frameworks. Quickly disabling CSS is a great way to quickly see how any site is structured. Edit CSS has been a fantastic recently discovered feature, and has saved me tons of time. Before this I would have to work in my editor, save, possibly upload, then refresh the page to see my changes. With Web Developer Toolbar, I can see the changes made immediately on the fly. Amazing.
View image information to quickly retrieve essential image properties of both CSS background images and image tags. Display Ruler is an often used feature to help take care of some of the guesswork of how wide an element is. Resize is another quickie to make sure your design can properly be displayed in lower resolutions (yes there are still people rocking 800×600 resolutions, bless their hearts).
There are tons more features that the Web Developer Toolbar offers, but I find myself coming back to the features mentioned above time and time again. Learn the keyboard shortcuts and you’ll be rollin’ like Fred Durst and Rick Astley in a Pillsbury factory.
This little goblin saves me from opening up IE seperately. Simply click the button, and the page renders as Internet Explorer right from within Firefox. Very seldom do I have to brush the cobwebs off that big ole’ blue lowercase ‘e’ buried somewhere in my quicklaunch menu.
Another quick little lifesaver. One day, me and my programmer buddy Mike decided that we were only going to write in XHTML strict (at the time we were coding in transitional, simply because that’s what things were defaulted to). Well, the HTML validator extension was perfect for that transition to step up to the big leagues. In your status bar, it gives you a huge red ‘X’ or a big green check’ depending on how your code checks out. When you click the icon, it gives you the page source with all the errors listed in order and how you can remedy them. This has saved me on thousands of occasions. Note: Make sure if you’re writing XHTML you use the SGML Parser in the options.
This is a tool I feel I don’t utilize to its maximum potential. It’s great nonetheless. I mostly use it when I find myself going “What’s that background color again?” or “What color font is that?” It beats going through your CSS for those oh-so-cryptic hex values. I say I don’t use its full feature sets because apparently you can create palettes, save favorites and so on, but mostly I just use it to copy hex values into my CSS or Photoshop files.
A lot of people (and when I say a lot of people, I mean most web developers I read about) use this tool as their meat and potatoes for web development. This is only an honorable mention for me simply because I only recently started using it heavily. I really like it so far, and a lot of the features overlap with the Web Developer Toolbar (which is why I still don’t use it as my primary tool). The coolest thing about it I’ve found is the way you can hover over your code, and it will visually show you what block you are hovering over right in the browser. Its similar to Web Developer Toolbar’s “ViewStyle Information” except it does it without a click. Also, you can edit HTML and CSS right from within Firebug, however, I haven’t done it so much because I prefer the plain text editor style of Web Developer’s Edit CSS tool. I’ll play with it more and see if my mind changes. Overall though, it seems like its packing a lot of heat and I’m excited to get my hands dirty with it. Let me know if you have any cool Firebug tips that help you out.
Alright, that about covers it. No, this isn’t a crazy “Wow I’ve never heard of any of these!” Firefox plugin list. These things are popular for a reason: they work. They are going to help me perform everyday tasks more efficiently and that’s what keeps tons of people using them. Let me know if you have any tips or other extentions that you can’t develop without.
Also, keep a heads-up because I’ll be writing a post on my favorite non-developer plugins.
Sliver Poetry is a collection of free verse poetry written by poet Seth Pesek. Seth needed a simple website where he could easily add sample poems from his book and update purchasing and contact information with ease.
Wordpress was the right tool for the job and all I needed to do was create a quick skin and manipulate the default template. This site is the definition bare bones. Simplicity was the key and because of that I got a couple CSS headaches along the way.
I’m currently working on a few personal sites right now that I will post updates on when they get to the proper stage in development.
Recently a few people have pointed out the fact that my blog looks awful in IE6. So naturally I immediately freaked out, dropped what I was doing, and worked around the clock to fix every quirk IE6.
No, no I didn’t. Not at all. I have been fully aware of the atrocious display of the blog in IE6 since I designed it and I’ve chosen to do absolutely nothing about it. I can hear it already: “You’re a shoddy web designer! Cross compatibility is an essential principle of web design! 30% of Internet users still use IE6, you can’t alienate them!” Yes, I can.
Let me clarify, however: I NEVER apply this same principle to client work. Cross compatibility IS extremely important to me and I spend a great amount of time debugging sites for IE6 using as few IE hacks as humanly possible. PNG hacks, box models, float issues, you name it, I’ll get that oh-so-wonderful standards-complient square peg into that IE round hole.
But regarding my personal site, frankly I’m just too busy to deal with IE6 and the headaches it incurs. Maybe one of these days I’ll get around to fixing things in IE6, but with a move to NYC, job searching in NYC, a wedding to plan, freelance work, touring, and my real job (not to mention the fact that IE8 is being beta tested), I probably won’t get around to it anytime soon.
I know, excuses are like wooden figurine sets depicting the assassination of Abraham Lincoln, everyone’s got one.