The Designer’s Guide to the OSX Command Prompt The command prompt. Once the lofty domain of that guy you know with the computer science degree. Now more and more the every day domain of the hacker web designer. Perhaps you’ve mastered a little Javascript or PHP, but you are realizing that the cool kids are playing around with stuff that is only accessible to people who are comfortable with the command prompt. Or, perhaps you are just interested in upping your game. Whatever the case, I’m here to help. First things first: launching terminal The command prompt1 application on OSX is called Terminal. Applications → Utilities → Terminal Here’s a screenshot of my Finder window showing the Terminal application and the path that I took to get to it in the status bar at the bottom: Once you get there, double-click the Terminal icon to launch it. Dressing it up a bit: Terminal themes When you first open Terminal on OSX, you’ll find it a stark barren white place. Let’s dress it up a bit so that it feels like home. Terminal → Preferences pwd ls cd ~ cat
CodeKit — THE Mac App For Web Developers Sass - Syntactically Awesome Stylesheets Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything set up. Preprocessing CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. 💡 Fun fact: Sass has two syntaxes! Variables SCSS Syntax Sass Syntax CSS Output Nesting Partials
Sass vs. LESS "Which CSS preprocessor language should I choose?" is a hot topic lately. I've been asked in person several times and an online debate has been popping up every few days it seems. It's nice that the conversation has largely turned from whether or not preprocessing is a good idea to which one language is best. Let's do this thing. Really short answer: Sass Slightly longer answer: Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing. Much longer answer: Read on. The Much Longer Answer The Learning Curve with Ruby and Command Line and Whatever The only learning curve is the syntax. Winner: Nobody Helping with CSS3 With either language, you can write your own mixins to help with vendor prefixes. In Sass, you can use Compass, and Compass will keep itself updated, and thus the prefix situation is handled for you. In LESS, there are also some mixin libraries battling to be the best. See that?
Apple's Cell Phone Screen Resolution by Brand and Model For best result, the size (dimension) of cell phone wallpaper must match the size of cell phone screen. Whenever the wallpaper dimension is too large for the screen, it will be automatically resized by your cell phone. This automatic resizing usually results in a poor image display quality. On the other hand, if the wallpaper dimension is too small for the screen, the picture will not cover all of your screen. Why would you display small picture if your mobile phone can display a larger one? Bigger picture means clearer picture, right? Below is a list of Apple cell phone screen resolution, sorted by model.Use this list as a guide on choosing the right size of cartoon photo wallpaper for your Apple cell phone. (If you need to know which cell phones have certain screen resolution, there is also a list of cell phone screen resolution, sorted by size available) Disclaimer:
mxcl/homebrew Breve manuale di educazione del Cliente L’importanza di essere onesto. L’educazione del cliente alla comunicazione: strategia in 4 atti. Un cliente, in generale, sa di aver bisogno di un’agenzia o di freelance esperti quando si rende conto dell’importanza della comunicazione per la sua azienda. L’obiettivo che spera di raggiungere attraverso questa scelta generalmente è una maggiore visibilità: farsi conoscere da un pubblico più vasto per ampliare il volume d’affari. Ogni professionista della comunicazione, dal momento in cui acquisisce il lavoro, deve percorrere due strade parallele: creare una strategia efficace ed “educare” il cliente, cioè spiegargli le regole del gioco e perché deve seguirle. Ecco dunque un breve vademecum per semplificare il lavoro pedagogico, il cui titolo, preso in prestito dal buon vecchio Oscar Wilde, riassume perfettamente i concetti. Atto I Una questione di fiducia. Spesso, il cliente tenta di imporre le proprie idee, che poi si basano sulle azioni dei suoi “antagonisti”. Atto II Promesse da marinaio?
Installing Rails on OS X Lion with HomeBrew, RVM and Mysql » Ruby, Rails, OSX and Linux fun | Ruby, Rails, OSX and Linux fun Bye Bye Macports, Welcome Homebrew DefinitionHomebrew: The missing package manager for OS X Why? well, the reality is, macports is not that good anymore. Homebrew is very easy to install, it’s fast and simple. Back to topic, this is you how you get rails with mysql up and running with homebrew and rvm. Clean up To make sure to have a clean install, I recommend removing any previous .rvm installation and previous Xcode. $ rm -rf ~/.rvm/ $ sudo rm -rf /Developer 1. Install Xcode from AppStore. it’s 1+ GB download so it may take a while. after it’s downloaded it will not install automatically, you need to open Applications and install again from there, the name will be “Install Xcode”. Better way is to go to and download from there, you will have to login with a free apple developer account. - Xcode 4.3.1 for Lion (1.85 GB) - Command Line Tools for Xcode (171.70 MB) 2. mkdir -p /usr/local/Cellar 3. install RVM 4. See: Rails booting a lot faster.
Fluid Grids Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client asked us to keep the organization’s existing logo and to improve the dense typography and increase legibility. So, early on in the design process, we spent a sizable amount of time planning a well-defined grid for a library of content modules. Article Continues Below Over the past few years, this sort of thinking has become more common. However, our client had one last, heart-stopping requirement: the design had to be fluid and resize with the browser window. Minimum screen resolution: a little white lie#section1 Instead of exploring the benefits of flexible web design, we rely on a little white lie: “minimum screen resolution.” Of course, when I was coding the site, I didn’t have the luxury of writing a diatribe on the evils of fixed-width design. As it turns out, it’s simply a matter of context. Do I really have to thank IE for this? With ems, it’s easily done.
Fluid Images — Unstoppable Robot Ninja (Hello! If you think this article’s interesting, you might check out my ALA article on responsive web design.) I’ve always hated publishing. To wit: One of the really solid criticisms lobbied against my Fluid Grids article for ALA was that all of my examples were pretty text-heavy. In Which “Looking Across the Pond for Help” Is a Pretty Decent Answer, As It Turns Out Since I started mucking around with this whole “stylesheets” thing, Richard Rutter has been one of those CSS giants on whose shoulders I frequently stand. A few years back, Richard published a brilliant series of experiments with max-width and images, which I pored over when I was first working on this blog. This solved the problem beautifully. And as it turns out, this works just fine for most embedded videos, too: So while this is shaping up nicely, we’re not quite done. As it turns out, not quite. But first, the bad news: as far as I can tell, we have to write off Firefox 2 and below. Sadly, it also caused another bug.