SVG Summit 2016

January 25, 2016

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.

Here are my (rough) notes from each of the talks:

Introducing SVG

by Ryan Irelan

  • from Mijingo
    • site for dev courses
  • What is SVG?
    • Scalable Vector Graphics
    • XML language and file format
    • can be an image like a logo or a complex animation
      • go to CodePen to see some really cool things with SVG
  • Why Should You Use SVG?
    • Scalable
      • can be used for any resolution
    • File Size
      • Bitmap > SVG usually can save file size
    • Mutable
      • can alter it on a site (color, animation, etc.)
  • History of SVG
  • Is it safe to use SVG?
    • Yes
    • look through feature support too (CSS backgrounds, HTML image element, etc.)
  • Creating SVGs with tools
    • Illustrator
      • fill in white spaces
      • be sure to outline text
      • Export > SVG
      • SVG code to either use or make sure it is setup as you’d like
      • will need to clean up code a bit (Brenda’s talk will discuss and many articles online)
    • Converting Bitmap image to SVG
      • tool: VectorMagic.com
        • make sure it actually converts to vector, not base 64
  • Creating SVGs with code
    • viewBox
      • article: https://sarasoueidan.com/blog/svg-coordinate-systems/
      • takes four values
        • x
        • y
        • width
        • height
      • viewBox=“0 0 400 400″
        • x, y, width (to be seen), height (to be seen)
      • if you make viewBox width/height smaller, but leave the width/height defined, it zooms in on the graphic
  • SVG Elements
    • <svg></svg>
      • height – the height of the viewport
      • width – the width of the viewport
      • preserveAspectRatio – forces the aspect ra2o so image isn’t stretched when using the viewBox a8ribute to define a new coordinate system.
      • viewBox- set a new coordinate system by defining where x,y coordinates where the system starts as well as the width and height.
    • <g></g>
      • Used to create groups of SVG objects.
      • Any transformations you apply to g apply to everything inside of the group.
      • Accepts all global attributes (like stroke, fill, etc).
    • <circle></circle>
      • creates circles
      • cx – defines the x coordinate of the center of the shape.
      • cy – defines the y coordinate of the center of the shape.
      • r – defines the radius of the circle.
    • <rect></rect>
      • creates rectangles
      • height – defines the height the shape.
      • width – defines the width of the shape.
      • x – The x coordinate where the shape should start drawing.
      • y – The y coordinate where the shape should start drawing.
    • <path></path>
      • Any shape can be created with the path element.
      • d – defines the path to follow to create the shape. The path is defined using path descriptions: Moveto, Lineto, Curveto, Arcto, ClosePath.
      • pathLength – define the total length of the path.
    • <polygon></polygon>
      • create any shape with many sides (like an octagon)
      • plot the sides of the polygon using points.
    • <text></text>
      • set text in your SVG. • takes the global style attribute
      • textLength – an exact value of the length of the text.
      • rotate – determines the rota>on of the text.
      • x – the coordinate where the text begins
      • y – the coordinate where the text begins
    • <textPath></textPath>
      • allows you to put text along a path element and have the text follow the shape.
      • classic SVG demo element
    • for more documentation: developer.mozilla.org/en-US/ docs/Web/SVG/Element
  • Adding SVG to Your Template Code
    • Plain Ol’ SVG XML
      • access via DOM, manipulate/modify via JS and CSS
      • not cachable
        • You can include SVG in a pseudo element in CSS, which is cached
    • SVG as object
      • use <object> element
      • use <img> element within for fallback
        • <img> will be downloaded even if object works though
    • Using <img>
      • will be cached
      • can’t manipulate
    • As Background Image
      • will be cached
      • can’t manipulate
  • Styling SVG with CSS
    • using <style> attribute
    • adding a class attribute to the SVG code
      • overall best option
    • using inline stylesheets
  • Manipulating SVG with JavaScript
    • Just like any other DOM element.
    • Use JavaScript, jQuery, [flavor of the month]
    • Special JavaScript libraries just for working with SVG
      • Snap, Velocity, etc.
  • SVG Optimizations
  • Link: mijingo.com/svg
    • articles about SVG
  • https://mijingo.com/blog/helpful-links-and-resources-on-svg

Cracking the SVG Code

by Brenda Storer

  • Designer at thoughtbot
  • Overview
    • Brief History
    • The SVG output from popular applications
    • The SVG element’s attributes
    • Shapes and paths
    • Stroke attributes
  • SVG 2
    • still not ready
  • What is familiar from HTML
    • it’s XML
    • it’s like an HTML document for digital drawings instead of content
      • unicode characters
      • elements, tags, and attributes
      • nesting
      • bitmaps, anchors (a.k.a. links), text
      • AND shapes, paths, opacity, gradients, rotation, animation
  • SVG attributes
    • Name spacing
      • xmlns & xmlns:xlink
      • define what that element is
      • provides semantic meaning for the name of that element and its children, provided that the children do not have their own name spaces
      • Attributes can have namespaces too. They are prefixed.
      • Some say you don’t need, but she prefers to keep it
      • links don’t go anywhere; they are just a unique identifier
      • Mac OSX will only preview if you have name spacing attributes
    • Title & Description
      • think of “title” like an “alt” tag
      • good for accessibility
    • Viewport
      • width/height
    • SVG coordinate system
  • Exported files
    • Illustrator
      • don’t need
        • xml declaration
        • Illustrator comment
        • version (1.1)
        • ID
        • if no links, remove xmlns:xlink
        • x, y coordinates
        • style + classes (leave or move to CSS and update to semantic classes)
    • Sketch
      • similar to Illustrator in output
      • don’t need:
        • xmlns:sketch
          • if you delete at top, you need to delete within
        • title/description
          • good to have, but their defaults are not helpful
        • too many groups
    • she uses Illustrator because it is a bit cleaner
  • Shapes
    • stroke = border
    • fill = background color
    • rectangle
      • rx = corner radius
    • circle
      • cx = x coordinate of center of circle
      • cy = y coordinate of center of circle
      • r = radius of circle
    • ellipse
      • <ellipse>
      • rx = x radius
      • ry = y radius
    • line
      • <line>
      • x1 = start of x coordinate
      • x2 = end of x coordinate
      • y1 = start of y coordinate
      • y2 = end of y coordinate
    • polyline/polygon
      • points = coordinates (ex. 1,1, 50,1 50,50)
        • paired units
      • polygon will close itself because it is a full shape
    • path
      • d = draw
        • M or m = moveto (x,y)
        • L or l = linnet (x,y)
        • A or a = arc
          • rx,ry
          • x-axis-rotation — sets the rotation of the arches, always should be 0
          • large-arc-flag — true or false value (0 or 1)
          • sweep-flag — clockwise (1) or counter-clockwise (0)
          • 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.
    • If you copy and paste from Illustrator, it will use SVG code
    • decimals/commas
      • technique for making code more compact
  • in browser
    • CSS can do a lot, but cannot animate paths
    • SMIL has been deprecated
    • snap.svg
    • D3 (graphs/charts)
    • SVG.js
    • GreenSock
  • Animated Stroke Dash
  • Resources

Designing Complex SVG Animations

by Sarah Drasner

  • staff writer at CSS tricks
  • senior UX Engineer at Trulia
    • deals with marriage of design + interaction on site
  • why
    • animation is powerful to convey meaning
    • can guide your users
    • because otherwise we’re not using the web to it’s full potential
  • animation as information
  • Types
  • Not one size fits all
    • Questions to ask
      • responsive?
      • toggle on/off?
      • easing structures
      • user flow
      • what happens EVERY TIME
        • keep those consistent (forms, etc.)
  • Easing
    • accents in eases
  • Motion Design language for projects
    • seems like a lot of work?
      • Consider your tooling- loss leader- it was a lot of work at first that paid off along the way
      • Reuse resources like easing functions, animation keyframes in mixins, extends, variables, you name it!
      • If mobile is decoupled- easier to keep it consistent across both
      • Good animation branding guidelines means less communication down the line and reinventing the wheel.
  • Main Principle
    • Design everything first, slowly unveil things
  • use storyboards for animation
  • SVG
    • crisp on any display
    • less HTTP requests to handle
    • easily scalable for responsive
    • small file size if you design for performance
    • easy to animate
    • easy to make accessible
  • Optimize
  • Animation performance
    • JankFree.org
  • SVG Sprites
  • animation media queries work just like any other media query
  • viewBox shift with JavaScript
    • acts like a window to show and hide the requisite parts of the sprite
  • article: https://www.smashingmagazine.com/2015/03/different-ways-to-use-svg-sprites-in-animation/
  • use negative delay, so the animation is going when the page loads
  • Greenback/GSAP
  • information graphic example: http://codepen.io/sdras/full/JdJgrB
  • accessibility is important

4 (More) Impossible Things with SVG

by Dudley Storey

 
  • technical issues, need to watch on replay

SVG & Working with Sketch

by Clark Wimberly

 
  • works at InVision
  • Sketch
    • vector-based
    • art boards
    • assets
  • Exporting
    • Slices
      • insert slice (S)
      • ‘Export Group Contents only’
    • Groups/Layers
    • Artboards
  • Getting them out from Sketch
    • one-by-one
    • batch
      • export all items use export link in the top right
  • Managing file paths
    • rename folders/layers with file structure
    • ex. logos/logo-name.svg
  • can create multiple versions of the same slice
    • click ‘+’ next export menu and define new styles
  • View box and other properties
    • position & size defined in Sketch is what gets ported to SVG
  • Organize SVG
    • IDs in SVG are set with groups from file
  • Maintaining an icon set
    • use art boards in Sketch to maintain icon set used in a site
  • Using symbols
    • can group icons
    • insert > symbol > icons
    • can also use for logo sets
  • Background colors
    • can have background (from art board) either only in the Sketch file or only in the export
  • Responsive icons
  • Command Line
    • can hook it to your other processes
    • ex.
      • sketchtool export slices stat-icons.sketch
      • sketchtool export dartboards filename.sketch
      • sketchtool dump filename.sketch
      • sketchtool list pages filename.sketch
    • can add in output, scale or formats
  • Sketch plugins

A More Holistic Approach to SVG

by Chris Gannon

  • Slides: http://slides.com/chrisgannon/svg-summit?token=8TgePUBf#/
  • his workflow
    • AI > Sublime Text > Codepen/GreenSock
  • great resource: Seth Eckert
  • start with low hanging fruit, then move to more complex things
  • Tips & tricks
    • draw everything and reveal the bits
    • SVG text animation performance sucks
    • <clip-path> performance is better than <mask>
    • Apply clips/masks to a parent group
    • Set the source for <use> elements at 0,0
    • cloneNode has more flexibility than <use>
    • Clean up unnecessary anchor points
    • Use separate groups for masks and filters
      • apply mask to <g> element
    • ScrubGSAPTimeline.js
    • Separate nested groups for independent motion
    • Use filters sparingly
    • Introducing animation randomness adds value
  • get inspiration from everywhere
  • uses ‘trick boxes’ to determine what works and what doesn’t

Building with SVG Q+A Round Table

by Chris Coyier

 

My Two Computer Setup

September 29, 2015
IMG_4461

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 article Creating 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’s Style 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:

 

If you would like to learn more about style guides and pattern libraries, here are some of my favorite articles:

 

View the Pautler Design Pattern Library

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.

My standing desk setup

My new standing desk setup

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

  1. I wasn’t sure I would be able to flip the switch just like that and go from sitting to standing all the time.
  2. 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!

Year One

July 1, 2013

year-one-blog

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.

hannah-elizabeth

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:

  1. 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.
  2. 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.
  3. 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:

  1. 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.
  2. 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:

  1. 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.
  2. 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.
  3. 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.

Chattanooga

March 27, 2013

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:

Cloudland Canyon Waterfall Hike

Sunset Rock on Lookout Mountain

Cloudland Canyon Waterfall Hike

Cloudland Canyon Waterfall Hike

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

Panoramic shot from Cloudland Canyon

Panoramic shot from Sunset Rock on Lookout Mountain

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:

Big River Grille Vintage Typography
Coca Cola Vintage Typography
Phillips Auto Clean Up Shop Vintage Typography

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).

Hoppy St. Patrick's Day Wallpaper
Continue Reading…