Pew Pew Laser Blog

Code. Glass art. Games. Baking. Cats. From Seattle, Washington and various sundry satellite locations.

Past Blogs

Environment Syncing for Sublime Text 3.

4.25.2014

I've recently upgraded to Sublime Text 3, so I realized I also needed to update my process for synchronizing Sublime's configuration via Dropbox. This process results in all of your settings being automatically shared between computers (even Windows and Mac). These steps will sync Snippets, Installed Packages and Color Schemes between every Sublime Text 3 instance that you configure this way. It won't sync Projects or Recent Documents, but you could sync the Settings directory to enable this. If you need them, here are my original instructions for syncing Sublime Text 2 with Dropbox.

The basic procedure will be to create a new directory for settings in Dropbox, and then replace Sublime's normal directories with symbolic links (folder shortcuts) that point to the Dropbox folder. This general process will work in any scenario where applications utilize a flat folder structure for their settings or add-ons, such Photoshop and Cmder. You'd just need to figure out the specific directories that you need to sync. The process should also work on file synchronization systems other than Dropbox, such as Sync.

Initial setup / first computer:

  1. Install Package Control into Sublime Text.
  2. From the Preferences Menu, choose Browse Packages (Sublime Text > Preferences > Browse Packages... on OSX.). Then navigate up one directory - this is your Sublime Text user directory. It will contain directories named Backup, Installed Packages, Local and Packages and some other ones you don't have to worry about.
    • In Windows 7, this is usually C:\Users\[username]\AppData\Roaming\Sublime Text 3.
    • In Mac OS X, this is usually /Users/[username]/Library/Application Support/Sublime Text 3.
  3. Exit Sublime Text.
  4. Create a new directory called something like ST3 somewhere in Dropbox. Mine is at Dropbox\App Backups\ST3.
  5. Move the Packages folder from your ST user directory to the ST3 directory in Dropbox.
  6. Open up a Command Prompt or Terminal window with Administrator privileges (right click and choose "Run as Administrator") and navigate to your ST2 user directory.
  7. Create a symbolic link for Packages:.
    • In Windows 7, this will be something like mklink /D "Packages" "C:\[ST3 Dropbox directory]\Packages".
    • In Mac OS X, this will be something like ln -s /[ST3 Dropbox directory]/Packages ./Packages.
  8. Wait for Dropbox to finish syncing.
  9. Open ST3 and confirm that your settings and packages are still working. If not, something's gone wrong in the above steps.

Subsequent computers:

For each other computer that you want to sync your ST settings to:

  1. Install Package Control into Sublime Text.
  2. From the Preferences Menu, choose Browse Packages (Sublime Text > Preferences > Browse Packages... on OSX.). Then navigate up one directory - this is your Sublime Text user directory. It will contain directories named Backup, Installed Packages, Local and Packages.
  3. Exit Sublime Text.
  4. In your Sublime Text user directory, delete or rename the Packages directory; you'll be replacing it with the Dropbox one.
  5. Open up a Command Prompt or Terminal window with Administrator privileges (right click and choose "Run as Administrator) and navigate to your ST user directory.
    • In Windows 7, this is usually C:\Users\[username]\AppData\Roaming\Sublime Text 3.
    • In Mac OS X, this is usually /Users/[username]/Library/Application Support/Sublime Text 3.
  6. Create a symbolic link for the Packages directory:
    • In Windows 7, this will be something like mklink /D Packages "C:\Users\[username]\Dropbox\App Backups\ST3\Packages".
    • In Mac OS X, this will be something like ln -s /[ST Dropbox directory]/Packages ./Packages.
  7. Open Sublime Text and bask in your marvelous synced settings.

Awesome Emmet Snippets.

4.15.2014

Emmet is an add-on for a stunning variety of applications (Sublime Text, Brackets and Eclipse) and websites which enables text-expanding shortcuts to make short work of the tedious and repetitive typing of front-end development. Here are a few Emmet snippets to demonstrate the awesomeness:

ul>li{item$}*3

Expands into:

    <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
    </ul>

Emmet's syntax is very similar to that of CSS: > drills inside an element. Also, elements can be multiplied with *.

h3+dl>(dt>kbd^dd)*3

Expands into:

    <h3></h3>
    <dl>
      <dt><kbd></kbd></dt>
      <dd></dd>
      <dt><kbd></kbd></dt>
      <dd></dd>
      <dt><kbd></kbd></dt>
      <dd></dd>
    </dl>

+ is for neighboring elements, and ^ goes up an element.

ul>li(>h4+img[src=http://placekitten.com/100/100?image=$]+p)*5

Expands into:

    <ul>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=1" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=2" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=3" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=4" alt="">
        <p></p>
      </li>
      <li>
        <h4></h4>
        <img src="http://placekitten.com/100/100?image=5" alt="">
        <p></p>
      </li>
    </ul>

As with CSS, [] is for attributes. $ will increment by one each time it's used.

Pretty cool. Emmet provides such an increase in development speed that I don't even have think about setting a HAML environment.

Job Search - The Numbers.

4.5.2014

While I currently have a great permanent position, I was in full-time job search mode for a time in the past two years. Looking for a new job is a long-tail process with tons of companies, and most leads don't pan out. I thought I'd share a break-down of what it took to get just one great job:

Last Month

Next Month