DEV Community: Zack Philipps

Store GCLID in Cookie and Send to Hubspot

Zack Philipps — Mon, 25 Sep 2017 02:50:47 +0000

So, you've got an AdWords campaign running, which means you've got an ad that links to your website. When someone clicks your ad, the URL to the page on your website has a GCLID parameter appended to it:

http://yourwebsite.com/your-landing-page/?gclid=blah

This works perfectly fine if the user converts on that page. You can, through several methods, directly attribute this conversion to your specific ad. Then, if the user uses the same email address when purchasing offline as they did in the form, you can attribute that purchase to your ad as well.

But what if the user navigates elsewhere on the site? Unless you've got some JavaScript appending the GCLID to every link, it will be stripped as soon as the user clicks something.

Enter The Cookie: Offline Conversion Tracking's Best Friend

A better method is store the GCLID in a cookie. That way, even if the user completely closes the site and revisits it later by typing in the domain name... The cookie will still exist.

Since I've been asked to do this at work a few times, I've taken the liberty of creating a utility function – with a few dependencies. Since it's written in vanilla JavaScript, it can be added directly to Google Tag Manager.

This solution can be applied to any tracking parameters you want to pass along with your form submissions anywhere on your site. For example, another use case would be to pass UTM parameters with form submissions that get sent to Salesforce, since Salesforce CRM doesn't have a global tracking code like Hubspot and Google Analytics.

You can also pass along any parameters you want to get more granular insights and reporting on any platform.

Dependencies

Get Cookie

function getCookie(name) {  
  var value = '; ' + document.cookie;
  var parts = value.split('; ' + name + '=');
  if (parts.length == 2)
    return parts.pop().split(';').shift();
}

Retrieves a cookie value based on its name. Usage: getCookie('gclid');

Set Cookie

function setCookie(name, value, days) {  
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = '; expires=' + date.toGMTString();
  document.cookie = name + '=' + value + expires + ';path=/';
}

Creates or saves a cookie. Name it, set the value, and set the number of days it will exist. Usage: setCookie('gclid', 'blah', 365);

Get Parameter

function getParam(p) {  
  var match = RegExp('[?&]' + p + '=([^&]*)').exec(window.location.search);
  return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Gets the value of a URL parameter by name. Usage: getParam('gclid');

All Together Now

This is the part you copy and paste. However, keep reading the rest of this post, because this code block won't do anything on its own. It just defines functions; it's on you to use them to suit your needs.

Usage: assignTrackingParameterToCookie('gclid', 'hubspot');

No need to wrap this in a window.onload because that is already taken care of. Simply repeat for each parameter you want to save. Example:

assignTrackingParameterToCookie('gclid', 'hubspot');  
assignTrackingParameterToCookie('utm_source', 'gform');  
assignTrackingParameterToCookie('utm_campaign', 'gform');  
assignTrackingParameterToCookie('utm_referral', 'gform');

Currently, the only option for the 2nd argument (formType) besides hubspot is gform, which is Gravity Form. However, this script can easily be modified to allow for other form types.

Hubspot

The way this works for Hubspot forms is that you will need to create hidden fields that match your parameter names exactly. So if your parameter is gclid, you will need a hidden field called gclid:

Gravity Forms

For Gravity Forms, you need to make a Text field – NOT hidden field – so you can add a class to it. The class must match your parameter name.

Conclusion

I hope you find this useful! It can be used in any number of ways. We're certainly getting a lot of mileage out of it at Element Three. Any questions or suggestions, please let me know in the comments section below.

How Code Linting Changed My Life

Zack Philipps — Sat, 18 Mar 2017 23:22:07 +0000

When it came to linting, I was always dumb about it. "Man that's too annoying, turn it off!" But what I didn't realize was that with 30 seconds of configuration per language, usually in the form of a dotfile in my home folder, I could pick and choose specifically which errors and warnings showed up. So if I don't want to be notified every time a coworker decides to write CSS without a space after the colon, I don't have to. Or if I don't want to be notified that my partial Twig template doesn't start with a <!doctype> declaration... You get the picture.

Now I'm obsessed! There's so much utility in seeing syntax errors as you type as opposed to when the browser refreshes. Linting is another tool that transforms your text editor into an IDE. All the cool kids do it, and it's never too late to start. ...yeah. You can tell I haven't blogged in a while...

Basically, if you use Atom, all you have to do is install the base linter package, and then add your desired languages on top of that. Then, figure out how to configure them to your liking. Enjoy. :)

How I Switched from Sublime Text to Atom

Zack Philipps — Mon, 01 Aug 2016 17:45:09 +0000

(Atom Material Dark with Panda Syntax and Mononoki typeface)

When I first discovered Sublime Text, I fell in love with its configurability and the availability of packages to extend its features. When Atom first came out, I tried it for a little bit, but quickly became frustrated because there were still some kinks that needed resolved.

Fast forward about 2 years to when I start my new job at Element Three. The whole dev team is using Atom, so I figure I'll give it another shot.

There was definitely an adjustment period. But, after a few weeks, I realized that Atom did everything Sublime did, except better! And more!

Right off the bat Atom comes with default packages, which you can disable. I immediately disabled the wrap-guide package because I couldn't take the line running through my code, and I don't ascribe to the 80-character preference. But this in itself is an improvement over Sublime. Here are some more.

Out-of-the-box Improvements over Sublime

Better default theme and syntax highlighting
More intuitive Settings panel
Spell-check
Markdown preview, which renders all the expensive markdown writing apps out there totally useless
Git integration, eliminating the need for GitGutter. Atom will indicate changes to your git projects by changing the color of file/directory names and the line numbers in your files
Better autocomplete suggestions, since it will search your entire project for matches to what you are typing as opposed to just the file you are in at the moment
SelectUntil behavior by default
SideBarEnhancements behavior by default
Atom's package manager is bundled. No more having to press control-backtick, finding that code snippet online, and pasting it in the console 🔥
Thriving developer community that is responsible for all of this awesomeness

Major adjustments

In fact, most of what I had to adjust to with Atom was keybindings. I had a few custom ones set up in Sublime that I struggled with in Atom. This is because I was adding them incorrectly. (They're case sensitive.)

As mentioned in A Front End Developer's Sublime Text Setup, I had been used to using shift-cmd-d to delete lines and alt-cmd-d to duplicate lines. Well, I added my keybindings like so:

'atom-workspace atom-text-editor:not([mini])':  
  'shift-cmd-D': 'unset!'
  'shift-cmd-D': 'editor:delete-line'
  'alt-cmd-D': 'editor:duplicate-lines'

Delete line worked, but not duplicate line. It's because Atom was expecting me to type alt-cmd-shift-D because I had entered it as a capital D. This is the correct way:

'atom-workspace atom-text-editor:not([mini])':  
  'shift-cmd-D': 'unset!'
  'shift-cmd-D': 'editor:delete-line'
  'alt-cmd-d': 'editor:duplicate-lines'

The other big thing to get used to was the behavior of the tab key. In Sublime, you could use tab (much like a terminal) to expand snippets and use suggested autocompletions. In Atom, it seems like the return key is more reliable for autocomplete, while tab still works for snippets. Kinda weird.

^ that may just be because I am using Emmet, which in Sublime, allows tab to expand all of its abbreviations. I ended up adding another keybinding. Emmet's default keybinding is ctrl+e to expand abbreviations; I changed it to cmd-e since I wasn't using it for anything else and it's more intuitive to my fingers.

Now, on to the fun stuff: packages! I was able to find a replacement for every package I loved in Sublime, and all of these either matched or surpassed their predecessors.

I was also able to create my first Atom package. Thanks to apm, it was incredibly easy to publish.

Packages

Atom Beautify – Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom.

This replaced JavaScript Beautify and SassBeautify from my Sublime setup. As you can see, it handles a lot more languages than that.

Emmet – Another time-saving package providing many useful HTML snippets.

File Icons – Assign file extension icons and colors for improved visual grepping.

Language Blade – Syntax highlighter for the Blade templating engine used in Laravel.

Language Twig – Twig support for Atom.

Less Than Slash – Adds automatic closing of HTML tags when less-than, slash (</) is typed.

Markdown Writer – Make Atom a better Markdown editor and an easier static blogging tool.

I like this one because it makes Atom behave more like Ghost. I can press cmd-b to make my markdown text bold, cmd-k to insert a hyperlink, and so on.

Split Diff – A split pane diff tool.

Sync Settings – Synchronize package settings, keymap and installed packages across devices.

Tree View Autoresize – Autoresize the tree view when opening/closing folders.

ZP ACF Snippets – This is a collection of Atom snippets for the Advanced Custom Fields WordPress plugin. Based on the Advanced Custom Fields Snippets for Sublime Text package.

Update: I have since added several more useful packages to my stack, including atom-html-preview, autocomplete-paths, git-time-machine, hyperlink-hyperclick, merge-conflicts, sublime-block-comment, more languages, and linters.

"Linters?" Read about how code linting has changed my life.

A WordPress Development Workflow for Small Teams in 2015

Zack Philipps — Wed, 29 Jul 2015 01:01:56 +0000

The future of web development is here, and has been for a while. I'm talking about front end tools that speed up workflow like Grunt and Sass. The developers that work on WordPress core know that, and they are utilizing it. WordPress theme developers even utilize it. Maybe even plugin developers. So why can't we utilize it on a per-project basis when developing WordPress websites?

We can. We can develop every WordPress site locally. We can use Grunt, Sass, and NPM on every single project. If we must, we can even share our local sites with the outside world for previewing or collaborating.

We don't have to install a different WordPress plugin for each front end tool we want to use. We don't have to do all of our development work on remote servers. Even though that may seem easier or faster, it's not ideal. You need to have a way to stage a bunch of work without affecting what's already there.

A WordPress fundamental that really complicates things is this: the codebase and the database are completely separate from each other. So we need an easy way to migrate the site's code from local to development server and back, to production server. We also need a separate way to do this with the database.

Here's a list of the tools that are instrumental in making this happen:

Below, I'll explain these tools in a bit more detail. After that, I'll explain how to use them. You might want to get in the tutorial-following mood to continue reading, but following along isn't required for learning. And you can certainly use different tools.

MAMP

MAMP stands for Mac, Apache, MySQL, and PHP. It's what we use to develop WordPress sites locally. You have to have it or something comparable. I like MAMP PRO because it's so easy to use and has a nice design.

Scratch

Scratch is the world's first Advanced Custom Fields-ready WordPress theme. It's not so much a theme as a springboard for building your own fully custom WordPress themes.

Scratch has its own Gruntfile that takes care of SCSS and JS compilation, concatenation, and minification. It also optimizes images as they are uploaded to the WordPress media library. It uses BrowserSync for live reloading and synchronized cross-browser/cross-device testing.

Bitbucket

Bitbucket provides Git and Mercurial code management for teams. It has a bit more of a flexible pricing plan with regard to private repositories. You could easily use an organization plan with GitHub.

DigitalOcean

DigitalOcean provides simple cloud hosting for developers. We <3 it because we have 100% control of all of our servers (or "Droplets", as DO labels them). DO has a gorgeous web app for managing all of the droplets in the browser, but to be honest, if you go with DO you'll be doing most of your work in the terminal. I will talk about our droplet setup in another post, but it's nothing you can't find while browsing DO's invaluable tutorials and forums.

Codeship

Codeship is a continuous delivery platform. What that means is you can configure automated testing and deployment to be run on every push you make to your repository. It's pretty sick. I'll explain further on in the post. There are loads of CI and CD platforms out there, but we felt this one was the most small-team-friendly due to its ease of use and pricing structure.

WP Sync DB

WP Sync DB is a WordPress plugin that allows you to pull and push your databases with automatic find and replace for URLs, all at the click of a button or two.

The Process – Setup, Pushing, and Pulling

Local Setup

Install MAMP or MAMP Pro.
Install WordPress.
Follow the steps to get Scratch up and running.
Push the final codebase to a new Bitbucket repo.

Obviously, you won't have to install MAMP every time you want to work on a new WordPress site, but you will have to install WordPress and Scratch for each project, so you'll want to streamline this as much as possible. Our approach was to install everything just the way we always want it, and then create a Bitbucket repository containing that code and an SQL dump of the database. We call it "Perfect Setup." Then, when it's time to start a new project, we simply clone Perfect Setup and push it to a brand new Bitbucket repo.

But, I decided to take it one step further. It's kind of pain having to set up a new DB and DB user everytime, and then going through the WP install process, linking up the wp-config.php file. So I created perfect_setup.sh. You can view the GitHub repo here. It shaves minutes off of setup time, and these minutes add up.

I would also share Perfect Setup with you here, but we use two premium plugins (Advanced Custom Fields Pro and Gravity Forms, which are well worth it), so we have to keep it private. Plus, your perfect setup may not be Perfect Setup. I encourage you to make your own!

Remote Setup

Set up a dev server by adding a Droplet in DigitalOcean.
Reserve a directory on your dev server for the site.
Configure DNS for the dev site.
Clone your new Bitbucket repo to the reserved directory.
Push your local database using WP Sync DB.
Integrate your Bitbucket repo and remote server with Codeship.

For our LEMP stack and for reserving directories, we use a CLI called EasyEngine. You simply run sudo ee site create example.com --wpfc, and it creates the site directory, creates the Nginx configuration file, and creates the symbolic link to the newly created directory. It also creates the WordPress database, installs WordPress, and generates the wp-config.php file. Sorta like perfect_setup.sh (you can see where I got the inspiration).

Once you've got the directory reserved, you can clone your project to said directory. You'll want to clone using SSH so that your Codeship deployments work. Here's a guide for getting Bitbucket/SSH set up on your server. Once you've done that, you can do something like this:

cd /var/www/example.com/htdocs  
sudo rm -rf *  
git clone git@bitbucket.org:example-user/example-site.git .

Don't run sudo rm -rf * unless you know what you're doing. That command removes everything in the current working directory, recursively, with no way to get it back.

Here's where WP Sync DB comes in. You need to get the new local database you just set up linked with the remote site. Right now, if you've configured your DNS, when you visit your dev site you will see a blank white screen. This is because the active database is searching for Twentyfifteen, the current default WordPress theme. However, you have Scratch installed. (You may actually see Twentyfifteen depending on whether or not you left the theme directory in your WordPress installation.)

Even though you have a blank white screen on the front end, you can still log in to WordPress. You need to activate the WP Sync DB plugin to use it. Then, you must go to Tools > Migrate DB > Settings. Check the boxes to allow both push and pull requests, and then copy the connection info.

Back on your local machine, go to Tools > Migrate DB, and click Push. Paste the connection info you copied from the dev site. I usually check "Backup the remote database before replacing it" and "Save Migration Profile", adding the word "PUSH" or "PULL" to the end of the profile name depending on what I'm doing. This allows me to push the database next time with 2 clicks, and if I add a pull profile from the dev site, the names of the profiles won't be the same and confuse me.

Now, assuming you've configured your DNS correctly, when you navigate to your dev site you will see your perfect setup in all its glory! Well, just as it is on your local machine I hope.

It's time to add our project to Codeship. Simply add your Bitbucket repo and skip the test configuration for now.

Note: We never use automated testing for WordPress websites. It's a little bit overkill. WordPress core and plugin developers are already doing this. I do use it for Scratch and Perfect Setup, though. Just to test the gruntfiles.

To configure your deployment pipeline, go to Project Settings > Deployment. Add a pipeline for the master branch. You'll notice there are a few third-party integrations to take advantage of, like Amazon S3 and Heroku. We're using DigitalOcean, so we need to choose Custom Script.

The script you use for this depends entirely on your dev server's configuration, but ours looks something like this:

ssh user@example.com 'cd /var/www/example.com/htdocs && sudo git add . --ignore-removal && sudo git stash && sudo git pull origin master'

First, we SSH in to our server as user.

It would probably be a great idea to add a user just for Codeship. You could call it... codeship? Run sudo adduser codeship on your dev server and store the password you assign it somewhere.

Then, we navigate to the directory where our project has been cloned. Lastly, we add all untracked files, stash any changes that have occurred on the dev site, and pull in any changes from the master branch of the origin remote. If you're assuming that any differences between the dev site and the repo will be overwritten by the repo, you are absolutely correct. If you want to keep any of those differences, it's important to first manually commit them on the dev server and push them to your repo, and then pull them down to your local machine.

Once you save this deployment pipeline, your custom script will be run on the next successful git push origin master. This is why it's important to use the SSH version of the origin remote (you can test your remotes by running git remote -v), because since your script is run automatically, you can't enter a password unless you store it in plain text on Codeship. With SSH, Bitbucket uses the SSH keys you set up to authenticate the git pull.

There are a couple of other things you need to do to ensure your deployment runs successfully. You need to add the Codeship public SSH key, which is set on a per-project basis, to codeship's authorized_keys file, located at /home/codeship/.ssh/authorized_keys. The key is found in Project Settings > General > SSH public key.

Lastly, you need to make sure codeship is a member of the group sudo:

sudo usermod -a -G sudo codeship

and that it can run git commands using sudo without having to enter a password. To do this, run sudo visudo from your dev server and find this line:

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

and change it to this:

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL, NOPASSWD: /usr/bin/git

Note: /usr/bin/git may differ for you. Run which git to find out where your git command lives.

Now, you should test your deployment! I always like to add the Codeship status badge to my project's README.md. It looks like this:

[![Codeship Status for user/example](https://codeship.com/projects/<PROJECT_UUID>/status?branch=master)](https://codeship.com/projects/<PROJECT_ID>)

and is found in Project Settings > Notification > Status Images > Copy Markdown Syntax.

Work Work Work

For now, you're done configuring and you're free to work on your project in peace. Enjoy hassle-free deployment of both the codebase AND the database!

You'll want to watch out for permissions on your dev server, as they'll be overwritten every time your deployment is run. We use a snippet in Sublime called permissions that looks something like this:

find * -type d -print0 | sudo xargs -0 chmod 0755 && find * -type f -print0 | sudo xargs -0 chmod 0644 && sudo chown -R www-data:www-data *

to quickly fix ownership and permissions on a per-site basis. You run this from the individual site's root directory on the server. You could also add this to your deployment script, but that would require giving the codeship user privileges to use sudo on any command without being prompted for a password.

Production Deployment

When you're all set to move to production, you'll want to follow the same Remote Setup process that you did for development. Then, simply add another deployment in Codeship. We use the production branch for production deployment. Then, on our local machines, we switch to the production branch, make sure it contains the same code as master, and run git push origin production.

Finally, you just have to add another migration profile using WP Sync DB called productionsite.com PUSH. Then push! From now on, both your dev and prod deployments will be easy as pie.

Pro Git Tips

If you don't have a .gitignore file in your perfect setup, you definitely want one. You want to at the very least ignore the wp-config.php file and all node_modules. The wp-config.php file will be inherently different on each server, so there's no reason to have it in the repo, and NPM modules have so many nested directories and files that they can cause problems on remote servers (which I have experienced first-hand). Besides, you're only going to be running Grunt when you're developing locally, so there's no reason to ever have them in a remote environment.

Here's our .gitignore in its entirety:

# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files

# Compiled source #
###################
*.com
*.class
*.dll
*.exe
*.o
*.so

# Packages #
############
# it's better to unpack these files and commit the raw source
# git has its own built in compression methods
*.7z
*.dmg
*.gz
*.iso
*.jar
*.rar
*.tar
*.zip

# Logs and databases #
######################
*.log

# OS generated files #
######################
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db  
Thumbs.db

# Gruntfile, gulpfile, Sass cache and node modules #
####################################################
Gruntfile.js  
gulpfile.js  
.sass-cache/
node_modules/

# Backups and Uploads #
#######################
wp-content/backup*/  
wp-content/uploads

# W3 Total Cache #
##################
wp-content/cache/  
wp-content/w3tc-config/*  
!wp-content/w3tc-config/master.php

# Ignore all WP themes except Scratch #
#######################################
wp-content/themes/*  
!wp-content/themes/scratch-theme

# WP Config #
#############
wp-config.php

# iThemes #
###########
nginx.conf

# InfiniteWP #
##############
wp-content/infinitewp

In your remote environments, you will want to set some sensible git defaults for each project, like so:

# Suppress long filename warnings/errors
sudo git config --system core.longpaths true

# Tell git to ignore changes in file ownership/permissions
sudo git config core.fileMode false

# Display the status in a pager so you can see the whole thing
sudo git config --global pager.status true

# Suppress moar warnings
sudo git config core.safecrlf false

We also have a Sublime snippet for this, called gitconfig, that expands to this:

sudo git config --system core.longpaths true && sudo git config core.fileMode false && sudo git config --global pager.status true && sudo git config core.safecrlf false

Restricting Access to Dev Sites

You may not want your dev sites to be accessible to just anyone. There's only one way to 100% keep your site off of search engines, and that's to make sure your site pulls up a login form no matter where the user lands.

Accomplishing this with WordPress is super easy. First, you'll want to make sure the WordPress function auth_redirect() works on the front end of your site. It only works on the back end by default. Add this to your functions.php file:

/* MAKE AUTH_REDIRECT WORK ON FRONT END */
add_filter( 'auth_redirect_scheme', 'wpse16975_check_loggedin' );
function wpse16975_check_loggedin() {
    return 'logged_in';
}

Now, you can add <?php auth_redirect(); ?> to header.php. But only on the dev site! And be sure to commit your changes so they aren't overwritten on the next deploy.

UPDATE: You should also tell Git to ignore the uploads directory. Especially if your site is going to have a lot of them. If you bloat your repo too much Github and Bitbucket start restricting your access to it. Plus, it's just good practice to consider media as part of the site content/database. WP Sync DB has a Media Files add-on for transferring uploads to and from environments.

How I Use Chrome to Run a Web Design Business

Zack Philipps — Sat, 04 Apr 2015 01:28:35 +0000

As previously mentioned in A Front End Developer’s Daily App Stack, I use Chrome Beta even though I'd like to use Safari on Yosemite because I strongly prefer Chrome's DevTools. I thought it would be fun to write about some of the web apps I use as well as my Chrome extensions.

Web Apps

Note: Most of these are freemium, meaning you can enjoy a majority of the features without having to pay a dime.

Asana

At Tribeswell, we use Asana for project management. It does a very good job of staying out of our way and keeping us out of email for internal communications. (Well, Slack helps too.)

What I really like about Asana is the keyboard shortcuts for assigning tasks and giving them due dates. It also lets you choose the view of tasks and projects that makes the most sense for you. Another feature I find myself using constantly is emailing tasks to Asana. Asana will automatically pull all the contents of the email, including attachments, and create a task out of it.

Toggl

We use Toggl for time tracking. It's definitely the simplest and best-looking time tracker I've ever seen. We actually use it for logging employees' hours as well as tracking billable hours for clients. Toggl's beautiful report system makes viewing hours over custom date ranges effortless and even fun.

Plus, once you install the Toggl Button browser extension, you get these neat little Toggl buttons all over the place. On a task in Asana, an issue in GitHub, a Google Doc or Sheet, I can simply click "Start timer" to start tracking my time.

Note: Asana and Toggl are two out of the three tabs I always have pinned.

Nusii

I use Nusii for proposals. It lets me use templates, and gets even more modular than that by allowing me to create and save reusable sections. The sections can be either text-based or price-based. Nusii is designed so that I can offer my clients tiered pricing options. I can include fixed prices or prices per hour, day, or month. They've also recently added a digital signing feature which is pretty awesome.

When I'm done writing a proposal – thanks to Nusii it now takes WAY less time – I can send it to the client straight from the app and get a notification email whenever the client views it. The client can then choose (a) pricing option(s) and accept the proposal right in the browser. Don't worry, there's the option to download and print a PDF version if the client so desires. Oh, and both the PDF and the web-based version are drop dead gorgeous.

Other features include custom branding and color scheme and a custom URL that all of your proposals can be accessed from (ours is proposals.tribeswell.com ).

Kashoo

We use Kashoo for cloud accounting. It handles all of our invoices from creation to sendoff to clearance. It also features a very robust reporting system so we can compare profit & loss using custom date ranges. Another thing we constantly do is glance at all of our aging receivables to see which clients have invoices that are still out and how long they've been out.

Calendly

I use Calendly (shoutout to Marcus Blankenship) for scheduling appointments. People who want to meet with me can use my personal link and schedule appointments themselves. This eliminates about ten emails & phone calls back and forth trying to figure out a day and time that works.

Buffer

Tribeswell isn't much into the social media game at the moment, but when we are, Buffer is nice because it allows managing our Facebook, LinkedIn, and Twitter accounts from a central location. It also takes care of evenly scheduling posts and automatically... posting... them which is great for us and our followers.

Strictly Dev

I'll talk about these more in-depth in another post, but for now:

GitHub
Bitbucket
DigitalOcean
Codeship
Stack Overflow
New Relic

Etc.

Since everyone should be using these, here are some that don't deserve their own sections but rather honorable mentions:

All things Google
My social media inlets of choice: Tumblr, Twitter

Extensions

Shipscope

Shipscope is CodeShip's browser extension that shows me a list of all of my projects and their build statuses. I opted out of email or Slack notifications for my builds and decided to use this instead.

Font Face Ninja

Font Face Ninja lets me spy on the typography of a web page without having to open up DevTools. Plus, it just looks nice and is fun to use. Who doesn't want a little ninja icon always visible in the top-right corner of their browser window?

Disclaimer: this extension will break a site on very rare occurances.

Adblock Plus

If you don't have this, what's wrong with you? Get it, now!

GhostText

My coworker recently alerted me to the existence of this gem. It allows me to press cmd+shift+K to instantly start using Sublime Text instead of whatever shitty textarea I am currently using to code in (read: WordPress). You just have to have the extension and the package installed.

Minimal New Tab Clock

There are tons of "New Tab" extensions. I picked this one because the analog, minimal look actually calms me down.

Update: I am now using Embark.

Update #2: I finally jumped on the bandwagon and started using Momentum... It's amazing and perfect and all the other new tab extensions suck in comparison... Hope you're happy!

Terms of Service; Didn’t Read

I simply find this interesting.

A Front End Developer's Sublime Text Setup

Zack Philipps — Fri, 27 Mar 2015 20:18:46 +0000

This post – as well as my other post A Front End Developer’s Daily App Stack – is 100% inspired by A Designer’s Sublime Text Setup.

If you're following along, as a prerequisite you should definitely upgrade to Sublime Text 3 if you haven't already, and likewise install Package Control.

Theme & Color Scheme

Having started with Flatland, I am currently using Predawn. I love it so much... It has a color scheme built in, and even its own icon set and dock icon, as well as suggested settings and packages! I owe my entire Sublime setup to Jamie Wilson and Mathias Bynens.

Key Bindings

Like Matej Latin, I had also been using Brackets for a while before I switched to Sublime. I also had a lot of difficulty adjusting to the new keybindings for Duplicate Line and Delete Line. To emulate this in Sublime, simply navigate to Preferences > Key Bindings – User and add this:

[
{ "keys": ["super+d"], "command": "duplicate_line" },
{ "keys": ["super+shift+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} }
]

However I actually have all of my Sublime preferences synced with my entire development team at work (more on that later – has its pros and cons), and one of them really liked the Quick Add Next default behavior of command+D, so I got used to this instead:

{ "keys": ["super+alt+d"], "command": "duplicate_line" }

To make that work, I had to go to System Preferences > Keyboard > Shortcuts > Launchpad & Dock and uncheck the box for Turn Dock Hiding On/Off.

I'm also a huge fan of snippets, so I wanted a handy shortcut to pop open a list of snippets. This did the trick:

{ "keys": ["ctrl+s"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Snippet: "}}

I also have the package FixMyJS installed, so the shortcut to use that is:

{ "keys": ["alt+super+j"], "command": "fix" }

So to recap, and for the sake of quick updating in the future, my entire keybindings file looks like this:

[
{ "keys": ["super+shift+d"], "command": "run_macro_file", "args": {"file": "Packages/Default/Delete Line.sublime-macro"} },
{ "keys": ["ctrl+s"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Snippet: "}},
{ "keys": ["alt+super+j"], "command": "fix" },
{ "keys": ["super+alt+d"], "command": "duplicate_line" },
]

Preferences

My preferences are a combination of Mathias's and Jamie's preferences with a few little tweaks of my own. My tweaks are mostly typography-related (I use 14 pt. with a bottom line padding of 4 because I like to be able to see my code), but I also have find_selected_text set to true (another Brackets-inspo'd behavior). I've also implemented Ben Frain's top tip to stop hyphens from separating words. Here's my entire preferences file:

{
"close_windows_when_empty": false,
"color_scheme": "Packages/Predawn/predawn.tmTheme",
"default_encoding": "UTF-8",
"default_line_ending": "unix",
"detect_indentation": false,
"draw_indent_guides": true,
"draw_minimap_border": true,
"draw_white_space": "all",
"enable_tab_scrolling": false,
"ensure_newline_at_eof_on_save": false,
"file_exclude_patterns":
[
    ".DS_Store",
    "Desktop.ini",
    "*.pyc",
    "._*",
    "Thumbs.db",
    ".Spotlight-V100",
    ".Trashes"
],
"find_selected_text": true,
"folder_exclude_patterns":
[
    ".git",
    "node_modules"
],
"font_size": 14,
"highlight_modified_tabs": true,
"hot_exit": false,
"ignored_packages":
[
    "Vintage"
],
"indent_guide_options":
[
    "draw_active"
],
"line_padding_bottom": 4,
"match_brackets": true,
"match_brackets_angle": true,
"open_files_in_new_window": false,
"overlay_scroll_bars": "enabled",
"remember_open_files": false,
"show_encoding": true,
"show_line_endings": true,
"sidebar_default": true,
"tab_size": 2,
"tabs_small": true,
"theme": "predawn.sublime-theme",
"translate_tabs_to_spaces": false,
"trim_trailing_white_space_on_save": true,
"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",
"word_wrap": true
}

Packages

ACF Snippets – For Advanced Custom Fields for WordPress. I <3 it. With the baked-in PHP snippet, I can now type php, tab, ifgf, tab, and then type in the field name as opposed to typing <?php if(get_field('field_name')): ?> which is very awkward.

Color Highlighter – Unobtrusively previews hexadecimal color values by underlaying the selected hex codes in different styles.

Emmet – Another time-saving package, as now I can type !, tab as opposed to (along with MANY MANY others):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

FixMyJS – Just click the link and read Addy's post.

GitGutter – This is both part of Mathias's dotfiles and suggested by Jamie. It's amazing.

Handlebars – Handlebars syntax support.

JavaScript Beautify – Automatically formats my JS just the way I like every time I hit Save.

Package Syncing – Suggested by Matej and <3'd by many. Uses Dropbox to sync your Sublime preferences across devices. This is what we use at work so we all have the same ST3 setup. Referenced in the post about my daily app stack.

Sass – Sass syntax support.

SassBeautify – Automatically formats my SCSS just the way I like every time I hit Save.

SelectUntil – Lets me press cmd+shift+L to get a cursor on each line I've selected. This way I can bulk edit multiple lines where the characters are all different but the lengths are the same. Useful for editing file/directory structures I've copied from the command line where find & replace just doesn't cut it.

SideBarEnhancements – Recommended by Jamie and <3'd by many. Lets me do a million things when I right-click files/folders in ST3's sidebar as opposed to virtually nothing.

WordPress – If you work with a lot of WP sites, this is indispensable.

DEV Community: Zack Philipps

Store GCLID in Cookie and Send to Hubspot

Enter The Cookie: Offline Conversion Tracking's Best Friend

Dependencies

Get Cookie

Set Cookie

Get Parameter

All Together Now

Hubspot

Gravity Forms

Conclusion

How Code Linting Changed My Life

How I Switched from Sublime Text to Atom

Out-of-the-box Improvements over Sublime

Major adjustments

Packages

A WordPress Development Workflow for Small Teams in 2015

MAMP

Scratch

Bitbucket

DigitalOcean

Codeship

WP Sync DB

The Process – Setup, Pushing, and Pulling

Local Setup

Remote Setup

Work Work Work

Production Deployment

Pro Git Tips

Restricting Access to Dev Sites

Related Posts

How I Use Chrome to Run a Web Design Business

Web Apps

Asana

Toggl

Nusii

Kashoo

Calendly

Buffer

Strictly Dev

Etc.

Extensions

Shipscope

Font Face Ninja

Adblock Plus

GhostText

Minimal New Tab Clock

Terms of Service; Didn’t Read

Related Posts

A Front End Developer's Sublime Text Setup

Theme & Color Scheme

Key Bindings

Preferences

Packages

Related Posts