I like to write about
my job, my family & my life.

I attended my first online conference last week with Environments for Humans’SVG Summit 2016. It was a great conference with some solid talks that taught me a lot about SVG. Below are some takeaways from the event, as well as the notes I took during each talk.

Being my first online conference, I was a bit skeptical about how it would go. Overall, I thought it was a great experience. It was hard to beat getting to enjoy it from the comfort of my home office without any lodging or travel fees.

I’ve started to use SVG more and more in my sites, which is why I had the interest in the conference. I thought there was a nice balance in the talks. There were a few more beginner-level talks that I felt totally comfortable listening to (like Ryan Irelan’s Introducing SVG and Brenda Storer’s Cracking the SVG Code), a few more complex talks that showed the awesome potential of SVG, but were a bit over my head (like Sarah Drasner’s Designing Complex SVG Animations), and a few that were a bit more concrete and tools based (like Clark Wimberly’s about Sketch).

I wasn’t sure how I would like the webinar-style format, but it ended up working out nicely. One of the speaker’s internet didn’t work, so they rescheduled his talk, but other than that the multi-location setup went off without a hitch.

The chat room was a bit disappointing. It seemed to be dominated by 4-5 participants and the way the presenters were set up, there wasn’t an easy way for them to answer questions as they went. That’s no different than a normal conference though.

Overall, it was a great conference—especially for the cost. I’ll definitely do one again in the coming months.

x,y — is where to draw the arc to from its reference point (based on capital A or lowercase a)

Z or z = closepath

draws path from where path is to the original origin point

if you don’t want it to connect to the end, don’t define

Uppercase – absolute position based on parent

lowercase – relative to its current position

Cubic Bezier Curve

atrributes

C or c = curveto (Cubic Bezier Curve)

S or s = curveto (Smooth or Shorthand Cubic Bezier Curve)

C x1,y1 x2,y2 x,y

S x2,y2 x,y

A cubic Bezier curve is defined by four points. Two are endpoints. The origin endpoint is either absolute or relative depending on the lowercase or uppercase “c”. (x,y) is the destination endpoint. The points (x1,y1) and (x2,y2) are control points.

In a Shorthand or Smooth Cubic Bezier Curve, the start control point is is assumed to be the same as the end control point of the previous curve.

Used to illustrate concepts in the body of the page, either alongside or on it’s own. Most of the basis of this talk is complex standalone animation. JavaScript is recommended for much longer implementations (explained later).

For the last three and a half years of freelancing, I have used my 15” Retina MacBook Pro as my primary work machine. I had an external 24” monitor when I worked at my home office, but the majority of my work happened on the laptop.

About a month ago, in an effort to extend the life of my MacBook Pro, as well as have a larger screen to work off, I purchased a 27″ 5k Retina iMac and began my two computer setup.

Overall, the process of setting up and working from two computers has been incredibly smooth. I initially wanted to start the new computer with a clean install to avoid any extra files/settings that would come with mirroring my laptop’s machine, but for time reasons I ended up setting up the iMac from a Time Machine back-up. Although it likely did bring along some files, applications, etc. that I did not need, it made the initial setup so easy. I was up-to-speed within minutes. Below is a summary of the tools/techniques that have made the process easy, as well as some of the frustrations I have found along the way.

What makes it possible

Dropbox

Not surprisingly, Dropbox is the key player in making this setup work. I store all of my files on Dropbox, so the transition from working on one machine to the next is pretty seamless. I also include my Documents and Sites folder in Dropbox, so almost everything is synced between machines.

Evernote

I use Evernote for all of my project notes, website inspiration, etc. This makes moving between machines extremely seamless as well because all of my project notes are always up-to-date on both.

iCloud

The syncing of calendar events, reminders, etc. using iCloud is also essential for this setup.

Web-Based Applications

Many of the services/applications I use now are web-based. For example, I use Freshbooks for all time tracking, invoicing, etc. and use Basecamp for project coordination with many clients. By having as many services online as possible, it naturally keeps them in sync with one another.

Some minor frustrations

SuitCase Fusion 6

I use SuitCase Fusion for my font library. It’s hard to believe, but they offer no way to sync font libraries between machines. Suitcase Fusion 6 offers a feature to back-up your font library to Dropbox, but then you manually have to update it on the other machine—not very useful. I still find it hard to believe there isn’t a better font management tool out there, but this appears to be the best. Every time I add a new font on one machine, I need to remember to add it to the other machine to make sure it is there if I were to open a file with it in the future.

Updates

Application and software updates are always kind of annoying and now I have to do them twice—once for each machine. Not a big deal though.

Local Development

I use MAMP to develop WordPress sites locally before moving them to WPEngine or another host. There are a few articles about syncing MAMP databases between computers, but even after following their directions closely, I ended up having issues where the database would get erased or loose data when working between machines. At this point I’ve decided to just do the local development on my iMac.

Notifications

Very minor, but it usually takes 30-60 seconds after opening my laptop for it to sync everything, so in the meantime any reminders, notifications, etc. that I have completed or click out of while working on my iMac display.

Music

Most of the music I listen to is on Spotify, but I do still have some music within iTunes. I just realized I added some music to my iTunes library on the iMac this week, but don’t have it on my laptop now as I travel.

There have definitely been a few of those moments over the past few weeks as I realize something wasn’t on one of the machines that I thought was, but in general the process has been pretty seamless and hasn’t disrupted my workflow much. I love the power and screen size of the iMac and the flexibility that the MacBook Pro provides.

If you are thinking about switching to the two computer setup, I’d love to answer any questions you have from my own experience. Hit me up on Twitter @andrewpautler. If you already have a two computer setup and have some tips, I’d love to hear those too!

The use of pattern libraries (or style guides) is becoming more and more popular these days (if you’ve never heard of a pattern library before, I have some great articles about them listed at the bottom of this post). The idea has intrigued me for awhile, but because I work on mostly smaller sites and mostly as a one-person team, I didn’t see the benefit (or at least enough benefit to make the effort worthwhile). Although it’s true that many of the advantages that come with using a pattern library don’t exist for many of my projects, I finally decided it had enough benefits to integrate into my workflow.

The Benefits

I knew that to make a pattern library worthwhile for my workflow, it not only needed to help keep my code clean and concise & my designs consistent, it needed to improve (and speed up) my workflow. I used the A Pattern Apart & BareBones to create the framework of the pattern library and then added my own design and code snippets to create the various patterns. The result: a boilerplate pattern library that I can use as a starting point for each of my projects. I put together common elements that I use in almost every site in the pattern library (buttons, headings, navigation, etc.). This way when a new project begins I can change colors, typography and a few basic styles and within a few minutes have a pretty solid starting place for a style guide for the site. I have a few default patterns in the library, but usually customize, add, and remove sections based on the site I am working on.

The Details

Below I break down into a bit more detail the organization and setup of the pattern library. I have loaded the pattern library (with a few modifications described below) to GitHub, so feel free to dig in and explore. Keep in mind this is still very much a work-in-progress and I am by no means a front-end guru, so if you have any thoughts, suggestions or corrections, I would love to hear them.

Organization

One of the biggest benefits of a pattern library in my mind is organization. The importance of organization becomes magnified as you work in larger teams, but it is still important on one-man projects. Keeping your code organized, well-documented and easy to read allows future developers that may touch the code to get up-to-speed as quickly as possible (whether they are on your internal or the client’s team).

File Structure: I have all css, js, fonts, images and other media in a subfolder called ‘library’ (each in their own subfolder). I do this in all my sites. This helps keep all of those items organized in a single subfolder and easy to find. All of the pattern elements are located in the ‘pattern’ folder as individual HTML files. These files are automatically pulled into the main pattern library page using some PHP code.

CSS: I use LESS as the pre-processor when writing CSS. I have the CSS divided into 8-10 .less files that get merged into a single .css file when compiled (using CodeKit, which is amazing!). The key here, as Susan Robertson so wisely wrote in her articleCreating Style Guides, is to use the same CSS from the live site within your pattern library. This means as you update CSS for the site you can a) make sure the changes are consistent with the rest of the site easily and b) make the change once. As Susan wrote, ‘If you have to do extra work to update your style guide when making changes to your look and feel, the likelihood of it staying up to date is pretty slim.’

JS: All JS is compiled and compressed into a single production.js file via either CodeKit or Grunt before being used in the site. Before the code is compiled, I have my JS divided into a plugins.js file with all external, plugin code and a main.js file with all hand-written, project-specific JS.

Colors & Typography

The colors and typography aren’t necessarily patterns, but help define the overall site’s brand. I wanted to have them at the top of the page to quickly give some reference to the palette and type used throughout the rest of the patterns. These colors also align with the color variables I use when writing LESS to make sure all of the colors used throughout the site stay consistent.

Patterns

The core of the page consists of various patterns. From buttons to navigation to form elements, the various patterns represent pieces of a site that go into making the larger whole. A few quick notes about some of the various patterns/sections found throughout the library:

Global: I include the footer, head and header elements of the site here. These are great starting points when beginning a new site.

Headings: Recently I have begun use ‘-alt’ to create secondary header styles for a site. It opens up a lot of potential. One area I am having difficulties determining the correct route to go is using the semantic heading style vs. the one that is sized correctly. For example, setting all h2’s to be 2.25em makes the code really concise and easy to follow, but it encourages you to use a h2 tag for a heading where you otherwise would use an h3 or h4 because the h2 is the appropriate size.

Icons: For almost every site I include a set of 40-50 icons from the free Font Awesome set. These are more generic icons that can be used for social links, navigation drop-downs, etc. They are fairly generic so they work stylistically with most sites and are fairly lightweight. I then include a secondary set of icons that are more specific to the site. I don’t include a secondary set in GitHub because most of the sets are ones I have purchased that require a license. On the example site I include the entire set of Streamline (an awesome—and huge—icon set). I would never include all of these icons in the final project, but this acts as a reference to quickly find the icon and the CSS class value. I use Fontastic to create versions of the set with only the icons I need.

Patterns: This section is always growing. I create elements that I reuse in many sites and then pick and choose based on the site. Any site specific elements usually go in this section as well.

As I mentioned above, I am still at the infancy of using the pattern library and determining how it best fits into my workflow. At this point I have been mostly using it as a guide for myself and not sharing it with the client until the end of the project. I could easily see it becoming a great tool to use with clients early on (before even beginning initial designs) to give them options for color, type, etc. before even having to open Photoshop (kind of a different approach on Samantha Warren’sStyle Tiles concept). I would love to hear what you think of the pattern library, any suggestions you have or ways that it could be improved. If you are just getting started with pattern libraries and would like to see some great examples, check out these:

I recently returned from the An Event Apart conference in Austin. An Event Apart is—in their words—the design conference for people who make websites. They bring in some of the biggest people in the web design industry to talk at the conference. Names like Jeffery Zeldman, Luke Wroblewski, and Ethan Marcotte are known by almost every web designer. Throughout the few days I was in Austin there were many social gatherings including the Dribbble meet up on Sunday night and the awesome opening night party at Frank’s Monday. After going to the conference and talking with the speakers, people attending the conference, and some designers from Austin, I realized something. The web design community is awesome. It’s that simple. I’ve known it for a long time, but my time in Austin really solidified it. I would not want to work in any other industry. There are a lot of reasons that I love working in the web design industry. There is one reason, however, that I think is unique to our industry and which makes our community so amazing and rewarding. It is rare to be in an industry where the most experienced and successful members of the community are so willing to help the rest of us stumbling along in an effort to create something amazing on the web. The awesome speakers at An Event Apart are just a few examples. Individuals like Brad Frost, Scott Jehl, Chris Coyier and the three amigos at Paravel immediately come to mind as well. Brad is one of the most respected individuals in the responsive web design community and yet he has spent countless hours putting together amazing resources on responsive design that he shares freely. Scott has worked on some of the most important web development advancements over the past 10 years and yet will always answer your tweet in a matter of hours and has a GitHub repo with years of code he has written that he shares with the community. Chris runs one of the most well known CSS sites and yet is happy to have a discussion on the best way to build something on the web. Trent, Dave and Reagan have worked on huge projects like the Microsoft site, and yet when I met them at the Dribbble meet-up last Sunday in Austin, they remembered having Twitter conversations together and said to write them anytime I needed help. These guys are just a few examples of people who are big names in our industry and are not just willing, but excited, to help others in our community grow and learn in an effort to make our industry better. How awesome is that? How different is this from so many other industries—even other industries in the design world? I could not be more proud to work in the web design community and I can’t see myself doing anything else. Thank you everyone who makes being part of our industry so fun.

As you can probably tell from reading previous posts, it sometimes takes me a longtime to actually do something I’ve set my mind to. That’s how it was with a standing desk. I had readcountlessarticles about the benefits of standing while working and while it seemed like a good idea, I had two primary reservations:

I wasn’t sure I would be able to flip the switch just like that and go from sitting to standing all the time.

The cost of the hydraulic standing desks that would allow me to go between sitting and standing are expensive ($900+).

After doing a bit of searching, I found this awesome article, where someone built a standing desk from IKEA furniture for under $25. The benefit of this approach was that it was both inexpensive and relatively easy to switch between a standing and sitting setup (the standing portion simply sits on top of your existing sitting desk). That afternoon, I bought the parts from IKEA and a laptop stand. Everything arrived last Wednesday, so Thursday was my first day standing full-time. A few days in, it is going great. I’m not going to lie, my legs are exhausted at the end of the day, but I am hoping that gets better as I get more used to it in the coming weeks. I will be sure to follow-up in a few weeks to share how it is going!

It is hard to believe that one year ago today I took the plunge and began freelance full-time. I’d been doing freelance work for quite a while before that and had even setup Pautler Design officially as an LLC almost two years ago in November 2011, but it was one year ago today on July 1, 2012 that I quit my job and started off onto my own—and I couldn’t have imagined a more exciting year. I have had the opportunity to work with some amazing people on some amazing projects over the past 12 months. Thank you everyone who has supported me over the past year through prayer, encouragement and especially the incredible clients I get to work with who supported me more literally with their business. I am excited to see what the next year and beyond holds for me personally and Pautler Design.

I could not be more excited to announce the newest addition to Pautler Design—sort of. My new daughter, Hannah Elizabeth Pautler, was born Monday morning, June 24th, at 3:52am. She weighed 7 lbs, 0 oz and was 20 inches long. My wife and I are adjusting to life with three and loving every minute of it.

I’ve known the benefits of version control for quite a while now. I’ve dabbled in it a bit, but haven’t taken the plunge. That will soon change. I have finally made the decision to move most, if not all, of my personal sites and client sites over to GitHub in the next few months (deadline: end of August). I looked at a variety of options and determined a) Git is the best version control option and b) GitHub is the simplest and easiest way to use Git (especially if I don’t want to touch the command line, which I don’t).

I have been hesitant to start using version control for three primary reasons:

Although fairly simple, there is a time investment and learning curve when it comes to setting it up. I simply haven’t had—or better said, made—the time to get it all setup.

I have other ways to back-up my code, so why do I need version control. Between Time Machine, Packrat with Dropbox and manual backups, I thought I was covered with back-ups and so had no need for version control. I slowly realized this isn’t really the case and that version control has a lot of other benefits outside of backing up your code.

I’m currently a one-man team, so managing all of the code locally works great. It is true that I loose some of the benefits of collaboration that comes with GitHub simply because I have no one to collaborate with many times. That said, I have found it is always better to get a good framework in place before the need really arise for it just to be prepared.

It may seem strange to write this post now, before I have made the switch. I am doing so for two reasons:

Accountability. I’ve been saying I am going to do this for months now. I am hoping now that I have it in writing this I will make the commitment to actually do it by the end of August.

Support. I would love to hear from any of you who have gone through this process before, what you learned, any suggestions you would make, etc. I’ve read a lot of articles, but at the same time am kind of winging it, so I’d appreciate any suggestions or support people can give.

My end goal with moving my sites to GitHub is three-fold:

Tap into the benefits of version control with my code, so I can use branches, etc. to make changes to sites without effecting the live site.

Organize my sites’ code. I currently have a process where all live sites are in my computer’s “Sites” folder and then I move them to the job folder once finished. This works great in some situations, but situations when I am continually making changes to the site or there are multiple versions of the site, it gets a bit hairy to say the least. Folder names like “sitename-new-prewordpress” are never a good thing.

Although all my files are on Dropbox, having another cloud backup is never a bad idea.

I am hoping to write a second post in a few months once the process is complete to share what I have learned and the process I took. Stay tuned.

I just returned from a little weekend ‘baby moon’ with my wife to Chattanooga. Our little girl is due in June, so we wanted to get away for a few days while we still had time—and Lindsey felt up for it.

Although the weather was a bit cooler than we were hoping for when we planned the trip, it definitely beat the 12 inches of snow we got back in Saint Louis while we were gone! We had a great time hiking, checking out the local coffee houses and the awesome Tennessee aquarium. During the trip I got to try out my new 17-55mm lens I got for my Canon Rebel T1i. It’s a significantly better lens than I had before and helped get some great shots throughout the weekend. Here are some of my favorite from the weekend:

Of course, I still love the panoramic feature on the iPhone, so I had to get a few of those as well.

Anyone who has been to Chattanooga knows it has an awesome vibe. One of the things I loved most about it was the amount of typography on buildings throughout the city. Here were some of my favorite from the weekend:

Being 1/4 Irish and a Notre Dame alumni, St. Patrick’s Day always holds a special place in my heart. This year I thought I would share some of the Irish spirit with these wallpapers. Download any and all of them and let them help put you in the St. Paddy’s day spirit.

Your choice of Guinness or Harp (if you need that reference explained, you have a lot of work to do before March 17th).