• Home
  • About
  • Now
  • Code Snippets
  • Blog
    • WordPress
    • Genesis Theme Framework
    • Tutorials
    • Web Development
    • Geeking Out
    • Blogging Resources
  • Contact
  • Home
  • My Story
  • Now
  • Code Snippets
  • Blog
  • Contact

The Web Princess

WordPress & Genesis Theme Development

The Web Princess

Mac Web Development Tools in my toolkit – Local Tools

January 9, 2014 by Dee Teal

In the process of updating this site’s theme, (if you’re reading via RSS, head over for a squizz… it’s looking all brand spanking new over here!!) I have been tidying up my blog archives and came across a post I never finished; one that included a list of all the Mac web development tools in my toolkit.

It was pretty out of date, so I thought I’d revisit it and write up a list of my current tools.  I’m also interested in yours… what’s in your toolbox? I’d love to know where we intersect and where we diverge… (it’s kind of a developer’s version of the food bloggers’ “what’s in my kitchen?” posts!”) Oh, and by way of a small disclaimer – these are clearly all Mac programs because my hardware is all Macs… but if you’re a PC user, post your list and link back to us so we can learn from each other!

Code Editing

I’ve been using Coda 2 from the lovely people at Panic since I started paying for a text editor. I know a bunch of people prefer Sublime or Espresso and that there are other great text editors out there… but this one has always worked for me, so I see no need to change, I know it does a whole lot more than I’m making it do, including integrating with SSH and git, as well as saving text snippets… So part of this year’s growth will be putting it through its paces a lot more!

If you’re wanting a free equivalent because you’re just learning to code or to experiment with using a text editor, if only for syntax highlighting (colour coding your code), then give Text Wrangler a go.

CODA TEXTWRANGLER

Snippet Manager I have both Text Expander and Code Box – and actually I like CodeBox better, it’s purpose built for code, so you get things like syntax highlighting as well. Text Expander can be used for any kind of text – and useful for recurrent things like addresses and text  you type often… Additionally, Coda will store all my snippets too so I could port them over  from TE and Code Box so they’re all in one place, but it’s one of those little jobs that never gets done, (and I’ve heard it’s difficult to move all your Coda snips and shortcuts when you change machines… not sure if that’s still true…)

TEXT EXPANDER CODEBOX

Compiler

One of the cool things about spending time in an agency is getting up to speed on some of the gnarlier technologies you might not otherwise try out for yourself. In recent months I got introduced to LESS, and by extension SASS the pre-processors for CSS. They’re brilliant and make the whole business of writing up CSS code a lot more fun, and a lot less tedious… that said, using CodeKit to compile all that CSS goodness is the way to do it… so that little gem has snuck into my kit as well.

CODEKIT

Clipboard Manager

Jumpcut is a little treasure that is ‘hands down’ my favourite tool. I know it’s mad to love something so small so much, but it has saved my bacon repeatedly…  It puts a little scissor icon in your menu bar and from there you can go back to the last 99 clips you made and paste them into your current project/document…

Even though it’s not supported any longer I’m going to keep using it as long as it still works!!   However, if you want something a bit more up to date you might want to try CopyClip.

JUMPCUT

Merge Tool This tool, DiffMerge makes a comparison of two or three files so you can pinpoint changes in your code. It integrates with a number of other products like Tower (my git client – see the next post to read more about that) to really assist your version control process but also helps spot changes in code you’ve written, or between updates of WP themes t0 help when you might have upgraded and broken things. (Not that I’d know, or anything…)

DIFFMERGE

Image Editing

For the most part there is only one image editor… I am a Creative Cloud subscriber, so there are a bunch of tools in the Adobe Toolkit that I pull out, but Photoshop is by far the one that gets the most action.  There are however, occasions when I’m writing up tutorials, or grabbing images from the screen, I use Skitch, a great little screen snapper tool from the people who are behind Evernote. It’s so useful it made all the images in this post!  In recent times I’ve also come across JPEGmini and TinyPNG to services/products that help compress images without losing quality of your picture. Both of them are totally worth checking out as well.

PHOTOSHOP SKITCH

So, what are your go-to front end tools?  Do they improve on the above? Are there any awesome ones I’m missing out on? Chime in to the comments below and if you’re up for it, post your own list? I’d love to see inside your toolkit!!

About Dee Teal

Dee Teal is a Scrum Master, Project Manager, and Team leader with a history as a developer (mostly front-end and using the Genesis Theme Framework) and WordPress trainer who is crazy active in the WordPress community.

She's run large scale WordPress events, and small ones, and if you ask someone about WordPress in Australia, you won't usually be more than one degree of separation from someone who knows her.
 
You can also find her here...
LinkedIn | Twitter

Comments

  1. Cath says

    January 10, 2014 at 1:02 pm

    Great post. You make this SASS thing sound cool – I think it’s time. I reckon I’ll get Coda & one of those snippet managers too – thanks for the suggestions.

    I am loving Clarify for creating instruction documents quickly, and also Quickcast for super simple screencasts and demos <3mins.

  2. Nicola Wise-Sturt says

    January 16, 2014 at 8:03 pm

    Great post and I’m off to check out some of the ones I don’t use! I am a Coda fan too and use Snippet Saver for my snippets. Another great tool I use a lot is Pixel Window to measure anything on screen and Little Snapper to take full screen screen shots – I use this when grabbing image for my portfolio.

    And I couldn’t live without my Creative Cloud membership!

    • Dee Teal says

      January 16, 2014 at 9:50 pm

      So many great tools, I use Awesome Screenshot for full screen stuff, it’s a plugin for Chrome, and Webmaster Tools for Chrome as well which has a colour picker, and ruler and other excellent tools… Gosh, that could be a whole ‘nother post on what add-ons I’m using with Chrome!!

FREE Website Planner

  • Become your web designer's favourite client

Website Sign Ups

Become your Web Designer's favourite client by preparing for your web project using the Web Princess' Interactive Website Planner

  • This field is for validation purposes and should be left unchanged.

Tweet

  • I just solved pack Snake in WordBrain - as number 2605 ever! #wordbrain #genius #words http://t.co/ygULwZTRYQ http://t.co/ORNxwtaTIl September 14, 2015 2:11 pm
  • Pretty impressed with the stops that @Telstra are pulling out to get my issues sorted... Service with a surprised smile! September 14, 2015 2:48 am
  • It's Tuesday. A perfect evening for this. And by this I mean beer (of course). #oohermrs… https://t.co/eiIttD5xWa September 8, 2015 8:17 am
  • Follow Along

Recent Posts

  • Moving to deeteal.com October 23, 2020
  • Asking a Better Question September 13, 2016
  • Growing & Developing your WordPress Meetup June 24, 2016
  • Making an Escape June 7, 2016
  • Changing Tack : Adjusting your Sails for the Winds of Change May 7, 2016
  • Privacy Policy
  • Disclosure Policy
  • Contact

© 2021 The Web Princess
Proudly custom built with Genesis