When WordPress or another Web app starts throwing fits and kicking out fatal errors due to memory, make sure the local php.ini (same dir as the scripts) is allocating enough RAM. 8Mb is not nearly enough.
Web Development
Debugging Safari
Check out this post by rakaz, which provides a quick walk-through on enabling the debug menu in Safari for Windows, which provides the ability to access JavaScript exceptions, show the JS console, enable a runaway JavaScript timer and turn off “Site-Specific Hacks”. This should make life a bit easier.
Safari's Font Rendering on Windows
I just ran across an interesting feature of the Safari 3 Beta for Windows. Apple has included a copy of Lucida Grande and Lucida Grande bold. But instead of dropping them into the main Windows font directory, where all apps could make use of it, the fonts are under the \Program Files\Safari\Safari.resources\
. So, sites that set Lucida Grande as the first font in their styles will look different in Safari than the other browsers in a Windows environment. Add the font smoothing capabilities built into Safari, and you can see some visible differences in text rendering on many sites across the Web when comparing IE, Firefox and Safari on Windows.
My OS X Software Setup
It’s been about 13 months since I detailed various OS X apps and software packages that had caught my eye as I transitioned from Windows to OS X, so I believe it is time to review that list and expand upon it. I would definitely appreciate your recommendations of other applications to check out , and am also more than happy to answer any questions you may have.
I will add detail where I can, with the goal of publishing this post quickly and expanding upon it over time. I may make this a series if it grows long and/or detailed enough to warrant it.
Pre-installed / Part of OS X
Every Mac comes pre-installed with some amazing software, and I highly encourage you to check it out. Here are some of those apps that I use regularly.
Mail.app
MAil is surprisingly powerful as I noted when I made the switch from Thunderbird. I haven’t looked back since.
Cost: Free
iTunes
Simply the best music player on any platform. If you haven’t played with Smart Playlists you are missing out on one of the most important features.
Cost: Free
iCal
The built in calendar application is as simple or feature-rich as you want it to be. It interacts with the address book and many applications.
Cost: Free
The Keychain & Keychain Access
There is no need for a separate password manager as you can easily tap into the one that the system uses. Even better, you can secure other sensitive data such as credit card numbers, PINs or important notes.Check out this great walk-through to see the power of the Keychain. The important thing is to set up separate keychains with unique passwords to ensure that logging in, which will unlock the system keychain, doesn’t unlock the keychain you use to store other sensitive data. Using separate passwords will also ensure that if someone manages to get access to your machine in a logged-in state, or learns of your password, they are unable to get to other sensitive information.
Cost: Free
Address Book
The address Book is an unsung hero of the OS, as it unifies all of your contact information across applications, ensuring they all have and use the same data. It also ensures that your contacts are searchable.
Cost: Free
iChat
I don’t use iChat too often, preferring Adium’s capabilities for day-to-day instant messaging, but every so often its great to kick start a video chat with someone. IT is super-simple to initiate and works surprisingly well. This must be a wonderful tool for independents and small firms that do not have a single office.
Cost: Free
The Console
The console is an invaluable tool for developers of all stripes, and for the power user trying to track down a system problem. It can be found in the Utilities directory within the Applications folder.
Cost: Free
Boot Camp
This is solely for Intel-based Macs. Boot Camp lets you boot straight into Windows. Beautiful! That said, I’ve opted to erase the Boot Camp Windows partition, preferring to use Parallels, which runs within OS X. As I don’t need to run any powerful Windows-only apps, and I don’t run any Windows games, I found that I just wasn’t using the functionality.
General
Quicksilver
This is a must-have for anyone doing more than checking e-mail and browsing the Web. Quicksilver make it simple and fast to search for anything on your system and then do something with it, or to it. For example, I can keep things as simple as typing the letter ‘m’, which pulls up a quick search of anything on my drive with that letter in it (don’t worry, Quicksilver is smart, and prioritizes the list), which brings up Mail.app as the first result. I simply hit enter and my e-mail program is launched. Two seconds and done, without having to move my hands to the mouse. For a more interesting example, I can type a period, which brings up a text box in which I write a note. I can then hit the tab key to decide what I want to do – I can have the system automatically create a text document with the note, send it to my To Do list application, or display it on screen in a large font, so I can see it across the room. I can also use it to look up contact info without opening the Address Book. This really should be built into OS X.
- Getting started with Quicksilver: understanding the basics
- Quicksilver: moving around and training yourself
Cost: Free
The Optimized Build of Firefox, a.k.a. Bon Echo
Cost: Free
Growl
This is another great utility that should be built into OS X. Growl isn’t actually used directly, instead it provides a platform for “applications to provide you with new information, without you having to switch from the application you’re already in.” It allows you as the user to customize the presentation and ensures the notices are consistent across all applications. Examples of usage are download notifications from Firefox and FTP clients, Twitter update notices and information about the song that just started playing in iTunes.
Cost: Free
Witch
Witch provides a granular alternative to the CMD-Tab combination of application switching, making it easier to shift to different windows within the same app or access minimized windows. It has other window-manipulation abilities too, though I haven’t tested them as of yet.
Cost: Free
Actiontastic
While I have read Getting Things Done, I haven’t gotten into the whole GTD habits as deeply as so many others, but I have picked up some tips that make life a lot easier. I now follow the core practices for my basic project management and to-do lists and lucked out when I found Actionatastic, a great GTD app that works well for me and works seamlessly with QuickSilver and iCal. This will be even cooler when actionatr debuts, providing the capability to modify the tasks on-line and synced up with Actiontastic.
Cost: Free
iTerm
I like iTerm over the built in Terminal as it has a tabbed interface which is invaluable in Web Development.
Cost: Free
Parallels Desktop
Parallels is simply amazing, and with each new release impresses me even further. Not only can you run another operating system (or multiple) within a window of OS X, you can eliminate the window altogether, eliminating the separation. This is great when I’m debugging a problem between browsers, as I can run copies of IE 6 and IE 7 right next to Safari and Firefox for OS X. For those folks in an environment that requires Windows-only apps, it is a perfect compromise.
Cost: $80
Adium
The best instant messaging client on any platform. I really wish it was available on Windows as I would drop Trillian for it in a second.
Cost: Free
NetNewsWire
NNW is a great RSS reader, though I tend to use the Web version far more than the desktop version as I can access it from anywhere. Luckily, the purchase of NetNewsWire guaranteed that the two are synced up.
Cost: $30
Twitterific
For those who use Twitter, this little app makes life much easier. With its integrated Growl support and ability to set the time between updates, you can see what your friends are up to whenever they post an update.
Cost: Free
iBackup
What a great backup application! I use it to run regular backups of my system. It allows me to choose what I want backed up, and it only copies files and directories that have been modified since the last backup. I’ve set up two tasks – the normal backup that ensures I always have a copy of my files on an external drive, and a rolling archive that takes a copy of the backup and creates a snapshot, allowing me to keep older versions of files around.
Cost: Free
PandoraBoy
As I discussed on my post Pandora on My Box, this is a great little app that brings the joy of Pandora out of the browser, encapsulating it in a small app.
Web Development & Design
TextMate
A powerful text and code editor that continues to reveal more features and capabilities as I use it. as their site puts it, “TextMate is not an IDE but by using its powerful snippets, macros, and unique scoping system, it can often provide features that even a language specific IDE lacks. It has enough project management features to keep most users happy, but is otherwise kept lightweight with a clean and minimalistic GUI.” Depending on how you like to work, TextMate may not be your cup of tea – it is purely a text editor, do not expect the ability to drag pictures around or resize DIV
with your mouse. If you prefer a more visual interface, check out Panic’s Coda, which recently debuted and looks amazing.
Cost:
Headdress
Headdress makes it simple to work with virtual hosts on your Mac, which is invaluable when you are developing sites locally prior to pushing them to production. With Headdress you do not need to worry about file paths changing when you upload, as each site is treated separately, accessible through separate URLs (using port numbers). I used the demo version of Headdress for quite a while as I was only working on two sites at the time. Then I started to dig into other code branches and realized that the convenience that the app brings to my life was well worth the small amount of cash, so I bought it. Not only is this a great app, the guys at Twinsparc are genuinely good folks.
Cost: Free for two sites, $15 for unlimited
MAMP
MAMP is a handy package that allows you to effortlessly install Apache, Mysql and PHP on your Mac and start the servers with just a click of a button. It doesn’t screw with the built-in functionality that ships with OS X. This is an indispensable tool for PHP Web Development.
Cost: Free
Locomotive
Locomotive provides a super-simple way to install a Ruby on Rails development environment. It eliminated a lot of stress I experienced compared to the first time I set up RoR on my box and had to resolve all of the configuration hoo-hah. If you are interested in Ruby on Rails, download this app, it will make life much much much easier.
Cost: Free
Adobe Creative Suite
I currently run CS2, though I beta tested Photoshop CS 3 and was blown away by its performance on my MacBook Pro (the CS2 apps were never compiled for the Intel-based Macs, so they run slower than they should). The new palette system was a major step up for those of us on laptops.
Cost: Ranges depending on the apps/package you choose
Yummy FTP
I tried out a bunch of FTP apps early on, and as I wrote in my post about Yummy FTP, the app is “fast and has a wealth of features, including FTP Aliases with Autorouting to make it easy to upload files without opening a connection to the server and then navigating to the proper location. Sweet! The smooth integration with other apps (like TextMate for remote editing) and the command line are just a couple of other features worth the price. Yet, even with all of the functionality it packs, Yummy FTP feels good to use – unlike so many apps from my Windows past.”
Cost: $25
The Console
Yes, this is a repeat, but I want to ensure you see it if you’re a developer. The Console provides a handy way to keep an eye on your log files as you are writing/debugging server-side code. It works with all of the different log files you may deal with (Ruby on Rails, PHP, Apache etc.) I open it automatically when I start working on PHP or Ruby code.
Cost: Free
Subversion
I use Subversion for version control in my local development environment, and it has saved my butt a couple of times already!
Cost: Free
svnX
I use svnX to interact with Subversion instead of relying on the command line.
Cost: Free
FontExplorer X
This free font manager from the fine folks at Linotype, is much more powerful than the built-in FontBook and unlike the expensive font packages (hello Extensis), hasn’t given Sarah, nor I any problems.
Cost: Free
CocoaMySQL
A great MySQL database manager.
Cost: Free
Widgets
It took me a while to discover the usefulness of Apple’s Dashboard and the widgets it contains, but once I found a few of the truly useful little apps I was hooked. They stay out of the way but are available at a key-press. Please note, these are not all of the widgets that I’ve installed, just the ones I find useful. Also, I do not run most of these all of the time as each Widget takes up a bit of processing power, so I’ve indicated my “always on” widgets by making them bold.
- Airport Radar is a “free and convenient tool for quickly scanning the area for AirPort and other wireless networks.”
- App Update automatically checks for “updates to your installed software. It supports Apple’s software directory, MacUpdate and Version Tracker. It will present you with a tidy link list of all the updates found, enabling you to read release-notes and download the the updates quickly and painlessly.”
- Calculator
- Calendaer
- Capture is a great tool for snapping screen shots.
- ColorBurn displays “a new color palette every day, along with the hexadecimal color values for web designers and developers.”
- ColourMod is a handy color chooser, which works with and convert between Hex, RGB, CMYK, and HSV values.
- Corporate Ipsum “is a Lorem Ipsum generator Peter Gibbons might use in a TPS Report…if he were a graphic designer and had a need for a Lorem Ipsum generator.”
- CSS Tweak provides “CSS optimization with the drop of a file.”
- Dashalytics “offers quick access to Google Analytics statistics.”
- Dashflix / Dashflix Mini provide a view into your Netflix queue – the only difference is the size of the widget.
- Delivery Status provides an “all-in-one delivery tracker”for those of us who can’t wait for oru packages to arrive. “The status will update automatically for you, and even count down the days! It also works with Growl to give you pop-up message, email notifications, and more, whenever your package status changes.””
- Dine-O-Matic is a “fun Dashboard widget for Mac OS X that randomly selects a place to eat out when you just can’t make up your mind.”
- Gamer Card let’s you see “your XBOX Live Gamer Card”
- Gas “delivers information from GasPriceWatch.com in order to provide you with the most up to date gas prices available.”
- Image Shackle
- iStat Pro is “the ultimate system monitoring widget, consisting of nine sections which can be shown or hidden.”
- Kuler displays “color themes from kuler (kuler.adobe.com), an online application where members explore, create, and share color harmonies.”
- MAMP Control makes it easy to “start and stop the Apache and MySQL server provided with MAMP. Also you can switch the PHP versions”
- Minutes is a “countdown timer widget featuring simple interface, polished graphics and many functionalities”, including iTunes integration
- Photo Drop let’s you “[d]rop or paste a photo, resize & trim it, and export to another application or widget directly by mouse dragging with outstanding 8 effects. You can also take a screenshot of windows behind Photo Drop (excluding your scattered desktop).”‘
- SeeSS “is a quick and handy reference sheet for 140 CSS (1, 2 & 3) properties (proprietary extensions are not included). Each property includes information on its inheritance, CSS compliancy, Safari support, all values (including defaults), some examples and an extensive description.”
- Stop Dashboard “allows you to stop the Dashboard. All running widgets will be removed from memory. Re-enable the Dashboard via F12.”
- Symbol Caddy keeps “HTML entity codes at your fingertips. Just click the symbol to have the HTML code copied to your clipboard.”
- Type Cast “allows you to quickly move through font families, styles and sizes using only your keyboard. In addition, Type Cast offers helpful information such as font type, family and can even reveal font files in the Finder.”
- Unit Converter
- Weather
- Web Monitor “[m]onitors your servers or any other web site. The widget checks the response time periodically with a HTTP HEAD request ” I discovered this as I was writing this post, so I haven’t tried it yet, but it looks very useful!’
Apps that I Don’t Use, But Have Good Reputations
There are so many applications out there that it is hard to try every one that I hear about, plus there are certain apps that that app grabs you and there isn’t a desire to check out the others. So, here is a list of software that I’ve heard good things about, but do not have personal experience with, or that I have tried but opted for a different package (you’ll see some great freeware apps in here that I ultimately passed up for an application that I paid for). Give ’em a shot if you have a chance.
- Fugu – FTP utility [Free]
- Cyberduck – FTP utility [Free]
- Coda – Web development package [$]
- Open Office – A multi-platform, open source office suite. [Free]
- Delicious Library – This program harnesses a Web cam (in this case, the built-in iSight) as a barcode scanner. Simply point the camera “at the barcode on the back of any book, movie, music, or video game. Delicious Library does the rest. The barcode is scanned and within seconds the item’s cover appears on your digital shelves filled with tons of in-depth information downloaded from one of six different web sources from around the world.” I’ve wanted to play with this for quite a long time! [$]
- VirtueDesktops – virtual desktop manager. [Free]
Handy Tips and Hacks for Working in OS X
Here is a list of good things to know in order to improve your workflow and/or enjoyment of the world o’ Mac.
- Dock Dividers – Visual dividers to organize the dock. [Free]
Web Sites
- Mac OS X Hints – This site has taught me a great deal and answered so many questions. I highly recommend you subscribe to their RSS feed
- The Apple Blog
- The Unofficial Apple Weblog
- Ryan’s post ‘My newest toy… err, productivity increaser has some great suggestions in the comments.
Important Note
All prices listed are accurate at the time of writing, so don’t be surprised if they’re different by the time you hit their sites.
Style Evolution – Dynamic CSS Part 2
Please note that this assumes you have read Part One of the series.
Also, I have taken to calling this Evolved CSS, as the word “dynamic” is a bit too close to the old days of DHTML (Dynamic HTML) for my liking. Let’s jump right in shall we?
Files
Download this zip file if you would like to see a running example of this project and/or have a foundation for your experimentation.
Reduce Server Calls Without Sacrificing Ease of Maintenance and Organization
Web Developers follow many practices in their organization of style sheets. Some put everything in a single document, while others create separate style sheets for each of their major page types or templates. In addition, most seasoned professionals make use of a style sheet that resets all the browser rules (see Eric Meyer’s version) to make life easier.
And..?
Well, if you’re in the practice of using multiple style sheets, your sites may be taking longer to render than they need to, no matter how compressed your CSS may be. This is due to the fact that the browser needs to communicate with the server to snag each individual document, and most browsers only allow a few connections at a time. As noted on the Yahoo UI Blog, a lot of performance issues are directly related to front-end engineering. That’s actually a big win for those of us on the front-end as we don’t have to shell out for better servers or faster pipes. We can simply improve our code to make life easier for our users.
Their four-part article on reducing HTTP requests is lengthy, and may contain more details than you you’ll care about, so to break it down, here’s the key point in regards to this write-up: “Reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.” In the context of Evolved CSS, we can make a large impact by using PHP/ASP/JSP et al to take all of our style sheets and combine them into a single document.
The code
For this example, let’s assume your site has the following set up:
- reset.css – Resets all styles to eliminate browser inconsistencies
- core.php – Includes the global layout rules (navigation, header, content area etc.) and text formatting
- scheme.php – The colors and images used for your site, this could easily be a script that provides the end-user the ability to choose their own colors.
- home.css – Home-page specific layout/formatting rules.
- archive.css – Layout and formatting rules for your archive pages.
- gallery.css – The rules used to display your photo gallery.
- print.css – Defines the layout for the page when it is sent to a printer.
You may have noticed the combination of PHP and CSS for those file types – you can easily use either as Part One demonstrated, but keep in mind that you should use flat CSS files over PHP where you are able to reduce the time required to process and render the final style sheet.
Section-Specific vs. the Kitchen Sink
Evolved CSS works well with the practice of using a single global style sheet to define your general layout and styles and section-specific style sheets to serve up rules that are unique to different areas of your site, as you can pass parameters to your main style sheet in order to define which style sheets to include. The Browser will still cache it. Here’s an example of how you could pass these parameters, in this case pulling in the styles for your gallery and a blue color scheme.
<link href="/css/style.php?include=gallery,blue-scheme" rel="stylesheet"
type="text/css" media="screen" />
The file styles.php includes this code to take those parameters and pull in the appropriate style sheets:
/* -=-=-= Import Styles =-=-=- */
// Grab the parameters clean them up and add them to an array
$cssToInclude = split(',', makeSafe($_GET['include']));
/* -=-=-= Core Styles =-=-=- */
// Core will be included every time
include_once 'core.php';
/* -=-=-= Additional Styles =-=-=- */
// Check the array to determine which style sheets to include
if (in_array('home', $cssToInclude)) {
include_once 'home.css';
}
if (in_array('gallery', $cssToInclude)) {
include_once 'gallery.css';
}
if (in_array('archive', $cssToInclude)) {
include_once 'archive.css';
}
That’s all You Need to Start
Well, this is a pretty short example, but I think it gets the poitn across and sheds some light on the possibilities available to you when you harness the power of server-side scripting languages to serve your CSS.
Note: This code is for example purposes only – it could be a lot cleaner, but at this point I am keeping it simple for explanation’s sake. I’m including the function makeSafe()
to clean up the parameters. You can see the code in styles.php, contained in the source file package, if you are curious about it.
A Word on Media Types
This practice can only be used style sheets of the same media type – do not merge your screen style sheets with your print styles or you will get all sorts of ugliness.
What about priority and inheritance?
That’s a damn fine question! At this point, this structure works exactly the same as using multiple style sheets does. Most browsers will use the last rule defined, but you shouldn’t rely on that. As a good developer you should know where your conflicts may be and resolve them intelligently. The !important declaration can be used where needed to resolve specific conflicts.
Conclusion
Well, that about wraps it up for today kids, thanks for reading! Please leave your comments, suggestions and/or questions as I would love to expand the discussion. Also, I would love to hear your thoughts on what I should address next.
Future Evolved CSS Topics
- Let the server do the math – auto-generating widths for your grid
- Using Evolved CSS to improve debugging
- CSS Compression
How to Include a Daily Digest of Ma.gnolia Links in Your Feeds
I’ve had a couple of folks ask me how I include a daily digest of all of my newly added Ma.gnolia links in my RSS feed, so I thought I would provide a very quick rundown.
FeedBurner is the foundation of the functionality, as it makes it very easy to harness the wealth of feeds provided by Ma.gnolia. Once you’ve signed up for the free service and set up a site, click on the Optimize tab and then select LinkSplicer in the sidebar. At that point just follow the directions they provide you and select the “As a once-a-day summary only”. Once your site is using FeedBurner to serve your feeds, the Ma.gnolia links will show up automatically each night assuming you added at least one new link to your Ma.gnolia account.
Users of WordPress should check out the FeedBurner plugin by Steve Smith, which makes the transition to FeedBurner a smooth one.