Archive for the ‘Code’ Category

Version control for designers – Why you need to be using it now

March 9, 2018 by Alison Foxall |

At your firm, why would you need version control for designers? Well, as a designer myself, my first experience with version control was a handful of years ago at a software development company. Prior to this, I had never heard of it, despite working for web agencies that were service based. As a web designer in the mid to late 2000’s, there was really no need for me to even fathom using something like Git.

But they weren’t using Git, no, not even SVN. What they were using was Microsoft SourceSafe. Say, what? Yes! It was a much older version and it was a bit of a pain in the ass because you couldn’t actually work on a file at the same time until someone was done with it. I don’t think there were any merging capabilities.

Firstly, if you’re a designer, you might not have ever used version control or know the terms commonly associated with it.

What is version control?

Version control helps you manage changes to your work

Even if you’re working alone, version control can help you manage changes to your documents like source files or graphics, over a period of time. If you’re working on a team, version control is very powerful because it helps you all work in harmony, instead of overwriting each other’s changes. It helps minimize disruption to your teammates working on the same project, or even the same file. When teams or even just you solo aren’t privy to what changes were made and something goes awry in a production environment, it’s very difficult to diagnose what even happened or what changed when you don’t have that history to look back on.

Common terms you might hear about version control

Repository. As the name implies, a repository is a digital receptacle where things may be stored. Many people say/type ‘repo’ as slang when referring to a repository. Essentially a repository is your project. Sometimes teams may use multiple repositories for their whole project if it’s overly complex, however, I recommend using branches instead.

Branch. A branch is like a mini-project or task. You’d create a branch (and branch off, ha) to do things like implementing a new feature (that new navigation perhaps?) or even something small like fix a bug. I’ve made branches to update all the local front-end libraries of a project before. When you’re done, you merge the branch back into the main one (usually called the “master”).

version control Git branch

Commit. When you make a change you’re happy with, you commit to it. Your change gets a title, and an optional description. You can line-item commit or commit an entire file or multiple files at once. A commit is a piece of history in your project.

version control commit with tower

Push/Pull. When you push code, you’re basically “uploading” your changes, your commits, to the central repository that you and all your coworkers have access to. Any time you push, you need to pull down any current changes first so that Git may auto-merge the code together. At times, you might need to deal with conflicts, but we’ll get to that later.

Types of version control systems

The most popular version control system at the time of writing is Git. Not too long ago it used to be SVN, or Subversion by Apache. Mercurial is another system that Facebook uses due to constraints with Git.

So, as a designer, why would you use version control? And for what types of files?

Why use version control as a designer?

1. You must use version control for front-end code to avoid overwriting

Whether your code is CSS, SCSS, HTML, JS, PHP, etc. It doesn’t matter. If it’s code, someone else will probably be touching it at some point and you need to version it so you can look back on important changes, or, if someone else is working on the same file, Git can properly merge the two versions and you and your pal won’t be overwriting each other’s stuff and getting frustrated. I’ve seen that happen far too many times in cowboy coding land.

2. Ability to roll back to changes after the fact

Often times, you may find yourself making changes and then a client or boss or whoever says, “You know what, let’s just go back to the way it was.” Oh, but shoot, you can’t remember how you did that, or really don’t feel like spending a whole hour to get it back to the way it was. Enter: version control! With Git you can easily revert back to an earlier change or commit with a couple clicks if you’re using a Git GUI like I am (I use Tower), or typing in a command in the CLI (Command Line Interface) like my partner does.

3. Your repository is an easy backup source

Things happen. I know. Sites get hacked, things explode, you know… just another day in the life of a web worker. Ah, but your Git repository also serves as a backup source just in case bad things happen! That backup might be sitting on your computer, or ideally, it’s in the cloud in a service like BitBucket, GitHub, or similar.

What kinds of things can I version control?

Any text file for sure. CSS, HTML, JS– all great things to control versions for. However, you can also version graphics, PSD and Sketch files, etc. However, do be aware that large files are discouraged from being tracked. Github, for example, will warn you if you are pushing a file over 50mb, and will forbid you to push something over 100mb. More info about working with large files can be found here. While you can’t normally see differences for graphics in the CLI or even something like Tower, you can see the difference when you do a compare with a program like Kaleidoscope which has that capability.

How to get started with version control as a designer?

I normally recommend getting started with a GUI program to get used to what it’s all about. I personally use Tower for Mac, but check out other Git GUI’s for Mac & Windows here that are listed, many of them are free. Tower is amazing though, and I’d cry if they ever discontinued it.

From there, you can start tracking a project immediately or create a new one. There are tons of resources to help you get started. Even Tower has their own guide for it and you can choose to learn through the GUI or the CLI.

version control git gui

Ready to push out to the cloud? You need git hosting.

When choosing Git hosting, you’ll need to figure out what your needs are. Do you need private repo’s? Or will they all be public? Is your project open source? All these factor into where you might store it. If your project is open source, the obvious choice is Github. With so many users and an easy system to track issues and make pull requests, Github is a no-brainer.

But maybe most of your projects are private? In that case, you may want to look at GitLab or BitBucket. Both offer unlimited private repositories for free. And while Github also offers private repo’s, they do so at a cost. If you’re budget minded like us, this is probably not an option for you.

Conclusion

All in all, you can get started with version control in a matter of minutes for free. It’s so important to add this to your daily workflow as a designer and certainly very important to add it to your skill set. You will thank me later and ask yourself, ‘How did I ever live without version control?‘.

How to install Sucuri WAF on WP Engine and migrate your site at the same time

March 14, 2017 by Alison Foxall |

Well I had an interesting problem migrating to WP Engine while installing Sucuri WAF this weekend. First of all, WP Engine’s hosting packages now come with a free SSL certificate from Let’s Encrypt. That’s great. More interesting, Sucuri also offers a free Let’s Encrypt SSL. Also cool. I’ve been told with their PRO account, they offer a free COMODO certificate– even better. When migrating to WP Engine with the intention of installing their new SSL certificate and putting it behind Sucuri’s WAF, we’re presented with a small problem: getting the SSL certificate installed…somewhere. But where? So, here’s how to install Sucuri WAF on WP Engine.

You cannot put your secured site behind the firewall before you install the SSL certificate. And you must put the SSL certificate on Sucuri’s end. Putting it on WP Engine will literally do nothing for you.

How to install Sucuri WAP on WP Engine

How to install Sucuri WAF on WP Engine

Step 1

Once you stage/replicate your existing site to WP Engine using their awesome automated tool (via their WordPress plugin), and add your domain to the domain settings dashboard, ensure you have an SSL certificate issued on Sucuri’s end, with either a Let’s Encrypt (FREE) SSL, or a COMODO Certificate. Contact Sucuri’s support to get this rolling.

Step 2

Initiate the DNS change to point to the IP of the new Sucuri WAF server. Depending on your TTL setting, this may be an hour, two hours, or more. 3600 seconds is an hour.

How will you know when it’s finished? Open up terminal on mac and type this:

nslookup domain.com

Your “Non-authoritative answer:” should contain the IP address. If not, check back in a few minutes. Sometimes it may go back and forth between the two. This is called propagation.

Terminal nslookup command

Step 3

There isn’t a step 3, ha!

Conclusion

Well, that’s it. If you attempt to install the WP Engine provided SSL certificate prior to pointing your domain, it will fail. If you attempt to use Sucuri without an SSL on their end, it will fail. So the most important lesson here is: get the SSL installed on Sucuri first, then make the DNS change. Ignore SSL on WP Engine. You don’t need it.

Troubleshooting

Problems? Contact us and we’ll help you through it.