|
 |
My "Other" Job
|
|
|
|
 |
So while I have been podcasting for almost 9 years and I have been doing it as one of my main sources of income for almost 4 years it's not all I do
|
|
|
|
|
A another big part of my day is taken up with web development, but that's not a side of my life i talk about too much
|
|
|
|
|
I have just completed a big project upgrading the core engine and doing a full redesign of The Mac Observer and realized that I've never really shared details on how I use my Mac in that capacity.
|
|
|
|
|
Today I figured I share a little bit of that part of my life.
|
|
|
|
|
OS X Core is great for developers
|
|
|
|
|
The awesome thing about the core of OS X is that it's BSD Unix
|
|
|
|
|
That means that in addition to the great GUI we get all the power under the hood that BSD offers
|
|
|
|
|
That means Apache, PHP, MySQL, Python, Ruby, PERL, you name it.
|
|
|
|
|
For me this is good because I like to set up a full development environment that will mirror the sever environments that I will be deploying my web sites to
|
|
|
|
|
Even though OS X is a client OS it has the power of server right there
|
|
|
|
|
Apache, MySQL, PHP
|
|
|
|
|
Apache
|
|
|
|
|
Up until Mountain Lion if you wanted to run an Apache web server all you had to do was go to System Preferences -> Sharing and turn on Web Sharing
|
|
|
|
|
Obviously to serve up public facing websites you'd need to do more tricks, but flipping the switch, opening an web browser, and typing in localhost (or clicking the link from the System Preference pane) will return a web page served up by Apache
|
|
|
|
|
By default pages are served from /Library/WebServer/Documents folder or if you add ~ username to the end of the URL from your ~/Sites folder
|
|
|
|
|
Apache is still under the hood in Mountain Lion, but all the folders and the control panel options have been removed
|
|
|
|
|
Luckily the developer of Virtual Hosts X released a free preference pane on his blog to bring the functionality back
|
|
|
|
|
PHP
|
|
|
|
|
To get PHP working it's a bit more work and requires some terminal hacking
|
|
|
|
|
PHP is installed in OS X by default, but the module needed in Apache is disabled by default
|
|
|
|
|
Finder > Go > Go to Folder…
|
|
|
|
|
Open the httpd.conf file in a text editor (may want to make a backup first). Will need to enter your admin username and password.
|
|
|
|
|
Look for a line that says '#LoadModule php5_module' and remove the '#' from the beginning of the line.
|
|
|
|
|
I also like to add index.php to the 'dir_module' directive
|
|
|
|
|
<IfModule dir_module>
DirectoryIndex index.php default.php index.html default.html index.htm index.shtml index.shtm
</IfModule>
|
|
|
|
|
Save the file, again entering your admin credentials, and the close it
|
|
|
|
|
Restart apache. System Preferences > Sharing > Disable and Re-enable Web Sharing
|
|
|
|
|
If you're logged into an admin account you can also type 'sudo apachectl graceful' from the Terminal. Enter your admin password when prompted.
|
|
|
|
|
MySQL
|
|
|
|
|
For MySQL you can just run the installer
|
|
|
|
|
Download MySQL Community Server, select the version for your OS and 32-bit vs. 64-bit
|
|
|
|
|
the Mac OS X ver. 10.6 (x86, 64-bit), DMG Archive version (works fine on 10.7 and 10.8)
|
|
|
|
|
Alternately you may also want to install the MySQL.prefPane, just double click it, and the MySQLStatupItem.pkg
|
|
|
|
|
After you've installed it's a good idea to set a root password
|
|
|
|
|
/usr/local/mysql/bin/mysqladmin -u root password 'yourpasswordhere'
|
|
|
|
|
LAMP GUI tools
|
|
|
|
|
VirtualHost X
|
|
|
|
|
Also have the "Lift Off" service to allow reverse SSH back to local Mac so you can host and share with clients USD $10/mo.
|
|
|
|
|
Can do the same thing for free on your own, but this makes it easy.
|
|
|
|
|
DynDNS Pro $20.00/yr. and router port forwarding is also an option
|
|
|
|
|
MAMP and MAMP Pro
|
|
|
|
|
Software and Tools
|
|
|
|
|
TextMate
|
|
|
|
|
This has been my code editor of choice for years
|
|
|
|
|
Open my website folder and save it as a project.
|
|
|
|
|
This lets you save custom project configurations
|
|
|
|
|
Opening a folder or project gives you a project panel which hows all the folders and subfolders
|
|
|
|
|
Textmate has a bunch of customizations you can do including color schemes for code highlighting, etc. There are also 'Bundles' that you can find and download that add on additional features and support for additional languages
|
|
|
|
|
When you open a file with a particular extension it will recognize that and set the language to the appropriate bundle and syntax.
|
|
|
|
|
Code completion by starting to type a command and pressing 'Esc'. Press multiple times to cycle through possible commands
|
|
|
|
|
Many command have 'Tab triggers' where typing the command + tab will expand out entire code blocks or frameworks
|
|
|
|
|
html:5 + tab = set up full html structure for HTML 5 page
|
|
|
|
|
class + tab = sets up a php class block, including the shell for the class and constructor function
|
|
|
|
|
lorem + TAB to insert placeholder text
|
|
|
|
|
Useful command
|
|
|
|
|
Cmd + T: Start typing name of a file to open it
|
|
|
|
|
Cmd + Shift + T: Search for a function/class name in current file
|
|
|
|
|
Ctrl + W: Select word currently under the cursor
|
|
|
|
|
Ctrl + Shift + W: wrap the current selection in tabs (type the tag after it's wrapped)
|
|
|
|
|
Cmd + R: Run the php-script that is open
|
|
|
|
|
Hold the opt key: To make vertical selections
|
|
|
|
|
Ctrl + H to get the PHP docs for a function the cursor is currently in
|
|
|
|
|
Option + F1 to get tooltip style docs for selected function.
|
|
|
|
|
Sublime Text 2
|
|
|
|
|
I had been anxiously awaiting the arrival of TextMate 2, but the developer abandoned the project and open sourced it. Which is good, but I don;t like to compile my own OS X apps, so I'm switching to Sublime Text 2
|
|
|
|
|
It's fast. My biggest complain with the current 1.X version of Textmate
|
|
|
|
|
Supports all the Textmate themes
|
|
|
|
|
Also has it's own "packages" that can add on additional functionality.
|
|
|
|
|
Easiest way to find add and install Sublime Text 2 packages is to get wbond Package Control
|
|
|
|
|
Once installed you can type Command + Shift + P in Sublime to command and type 'Package Control" and select 'List Packages' to see whats available to install
|
|
|
|
|
You can use packages to customize the 'theme' (how the editor looks i.e. tabs, project manager, etc) and the Color Schemes (code highlighting).
|
|
|
|
|
Open folders as projects with a file list on the right. Can save projects to retain project specific settings.
|
|
|
|
|
Access commands (snippets, convert case, sort lines, and toggle various interface options, etc.) from the command palette, Command + Shift + P
|
|
|
|
|
Command + P (works like Command + T does in Textmate). Go to file to jump right to a particular file in a project.
|
|
|
|
|
Begin typing a file name and it filters the list
|
|
|
|
|
Select the file from the list to 'Preview' it. Hit enter to load it in the editor
|
|
|
|
|
add the @ and go directly to an id, class, or function to jump right to that when you open the file. You can also use Command + R when you are in a file to bring up the 'Go To File' palette with the @ already in place to search for an id, class, or function
|
|
|
|
|
Use a '#' to search the tree of an HTML document
|
|
|
|
|
adding a : (colon) in the 'Go To Palette' will let you jump to a specific line. Command + G in an existing file goes the same thing
|
|
|
|
|
Muliti-Selection
|
|
|
|
|
Hold down the Command key and click to place cursors in multiple locations in a file
|
|
|
|
|
Press Command + D to expand the cursor selection to the word
|
|
|
|
|
Type to make the same change all locations at the same time. Awesome if you've copied and pasted a piece of text throughout a file with the same typo.
|
|
|
|
|
Place the cursor over a particular word, and press Control/Command + D repeatedly to select additional occurrences of that word.
|
|
|
|
|
Project navigation
|
|
|
|
|
When selecting a file in the Project list just clicking it will "preview it" in the main pane
|
|
|
|
|
Double click the file to actually open it in the editor.
|
|
|
|
|
Transmit
|
|
|
|
|
I have been using this as my FTP client of choice for years
|
|
|
|
|
I like the ability to set up folders, so I can organize sites for clients and projects
|
|
|
|
|
Connects to FTP, SFTP (ssh), S3, and WebDAV
|
|
|
|
|
Has Quicklook built in, great for checking remote images
|
|
|
|
|
Sync feature to 'merge'
|
|
|
|
|
Set up rules for skipping files. Config or HTACCESS files. Image folders, uploads, cache. etc.
|
|
|
|
|
CSS Edit, now Espresso
|
|
|
|
|
Still use this for debugging CSS
|
|
|
|
|
Can load a web page then use the X-ray feature to highlight a element in the tree
|
|
|
|
|
Load or extract the CSS file, or even have it extract the css into a new stylesheet so you can play around and override
|
|
|
|
|
There is a breadcrumb trail of the tree so you can move up and down nested tags.
|
|
|
|
|
Info panel to add tags
|
|
|
|
|
drag and drop to reorganize elements
|
|
|
|
|
CodeKit
|
|
|
|
|
Rather than use CSS I've recently been dabbling in using LESS and SASS, but these need to be complied back down to CSS
|
|
|
|
|
Codekit handle that. Will do Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass
|
|
|
|
|
Also does validation and debugging using JSHint and JSLint
|
|
|
|
|
Image optimizations
|
|
|
|
|
Live updates the browser after a SASS compile
|
|
|
|
|
When ready to go live I can combine and minify the working files for deployment.
|
|
|
|
|
Terminal
|
|
|
|
|
Applications > Utilities > Terminal
|
|
|
|
|
Mainly used for SSH so I can remotely connect to an mange my servers
|
|
|
|
|
Console
|
|
|
|
|
Applications > Utilities > Console
|
|
|
|
|
Apache will log all errors, including PHP when you have enable PHP logging
|
|
|
|
|
Logs are under the /var/log/apache2 section on the left. May need to expand it.
|
|
|
|
|
Use the search to filter the errors
|
|
|
|
|
1Password
|
|
|
|
|
This is where I manage and store all those logins I need for projects
|
|
|
|
|
Control panel logins, SSH logins, MySQL server names and passwords, FTP accounts and info
|
|
|
|
|
Using the appropriate 'Type' when creating a new entry is key
|
|
|
|
|
Logins -> for website logins
|
|
|
|
|
Accounts -> FTP, SSH, MySQL, Email, ISP
|
|
|
|
|
Organized into folder by client
|
|
|
|
|
Use secure notes for additional sensitive information related to a project
|
|
|
|
|
Git and Github
|
|
|
|
|
Source code version control
|
|
|
|
|
GitHub has instructions for setting up
|
|
|
|
|
You can actually use Git without Github
|
|
|
|
|
Local "repository" keeps track of changes each time you commit a file to it.
|
|
|
|
|
Works very much like Apple's versions in OS X Lion
|
|
|
|
|
Only keeps track of the things that have changed
|
|
|
|
|
Can revert back to any point
|
|
|
|
|
GitHub's Git app gives you a visual tool for:
|
|
|
|
|
Creating new local repositories
|
|
|
|
|
Committing and managing files in your repository
|
|
|
|
|
Viewing file history
|
|
|
|
|
Cloning or forking repositories from GitHub
|
|
|
|
|
Syncing files with the remote GitHub repository
|
|
|
|
|
The github Git app is fairly basic and limited
|
|
|
|
|
Full git functionality is available from the command line
|
|
|
|
|
Also Apps like Tower seem more full featured
|
|
|
|
|
Markdown
|
|
|
|
|
I have begun to take most of my notes and do documentation using Markdown
|
|
|
|
|
I write this in Sublime Text and then use the awesome Marked app for live previewing it
|
|
|
|
|
I recently discover ByWord, which looks like an awesome editor for Markdown files
|
|
|
|
|
Versions for iOS and Mac
|
|
|
|
|
The beauty of markdown is that everything is in human readable TXT files that I can then convert to HTML, RTF, or even formatted PDF using Marked
|
|
|
|
|
Marked offers some great stock styles and you can even make your own since it's just CSS
|
|
|
|
|
I will often store my documentation files and project notes as markdown on dropbox since so many of my iOS apps and my macs have access to those files.
|
|
|
|