JWinn Developmenthttp://www.joshuawinn.com
Freelance Web DeveloperSun, 02 Apr 2017 01:57:42 +0000en-UShourly1Have Your Website Reviewed: Site Feedback Servicehttp://www.joshuawinn.com/website-review-and-feedback-service/
http://www.joshuawinn.com/website-review-and-feedback-service/#respondThu, 09 Jun 2016 21:06:46 +0000http://www.joshuawinn.com/?p=2502I've recently launched a new service called Better Website Report. The purpose is to provide honest no-nonsense feedback on all aspects of a website. The recommendations and issues discovered are written up in an actionable report. This idea was born out of being tasked with both quality control reviews, and reviewing the websites of new clients looking for a redesign.

“We review your website to provide a personalized report outlining any problems we see and ideas for improvement.”

I’ve recently launched a new service called Better Website Report. The purpose is to provide honest no-nonsense feedback on all aspects of a website. The recommendations and issues discovered are written up in an actionable report. This idea was born out of being tasked with both quality control reviews, and reviewing the websites of new clients looking for a redesign. I would spend time looking over a website in detail and providing a list of issues or elements that didn’t work or should be improved. I found that many businesses had left many parts of their website in a state of disrepair, that could be making it hard to use, find, or understand.

There are dozens of questions a web professional might ask when reviewing a website. For example: Does the site need a redesign or can it be salvaged with some updates? How does it compare to current design trends and standards? Am I unable to easily find out where your business is located or what it actually does? Is it displaying correctly on mobile devices and tablets? Are there errors or things that just look wrong? How is the load speed? What about search engine optimization and content? How is the usability of the various interactive elements?

This report could be geared towards someone who is managing a website (perhaps new to the job, with many other responsibilities and no web developers / designers on staff). Or perhaps someone shopping around for a possible redesign or facelift for the site, who needs an initial plan. Or someone who just wants to make sure there’s nothing wrong on their site.

Find out more at:

]]>http://www.joshuawinn.com/website-review-and-feedback-service/feed/0Using Yoast’s “Primary” Category in Your WordPress Themehttp://www.joshuawinn.com/using-yoasts-primary-category-in-wordpress-theme/
http://www.joshuawinn.com/using-yoasts-primary-category-in-wordpress-theme/#commentsThu, 12 May 2016 02:05:16 +0000http://www.joshuawinn.com/?p=2452The 3.1 update to Yoast’s WordPress SEO plugin brought with it a new feature—the ability to set a “Primary” category for a post. You’ll now see a “Make Primary” link when selecting categories (or a bold “Primary” label if one has been set). It's possible to use this primary category in a custom theme...

The 3.1 update to Yoast’s WordPress SEO plugin brought with it a new feature—the ability to set a “Primary” category for a post. You’ll now see a “Make Primary” link when selecting categories (or a bold “Primary” label if one has been set). Some people may confuse this for a native WordPress feature. Which, arguably it should be!

The WordPress SEO plugin uses this when generating its optional breadcrumb links. So the most important category can appear, rather than one of many categories that may be applied to a post.

But what about using this in a custom WordPress theme? We can do that.

Display the Primary Category, if it’s Available

On the site I used this for, I wanted to display a single category along with the post, on the post archive pages. The design was such that showing multiple categories was unwanted and would take up too much space. Using the_category() function will show all categories assigned to a post.

The following code will display Yoast’s primary category if it’s available, otherwise it will fallback to displaying the first category returned by get_the_category() (I think that this is the first category that has been assigned).

Note that this code isn’t officially provided by Yoast. I figured it out by digging around on the plugin’s GitHub repository. So it is possible that their API / functions could change in future versions and cause something to break. So just be aware of this before integrating into your custom WordPress theme:

]]>http://www.joshuawinn.com/using-yoasts-primary-category-in-wordpress-theme/feed/12Stop Yoast’s WordPress SEO Plugin from Pinging / Resubmitting Your XML Sitemaphttp://www.joshuawinn.com/stop-yoast-pinging-resubmitting-xml-sitemap/
http://www.joshuawinn.com/stop-yoast-pinging-resubmitting-xml-sitemap/#respondMon, 18 Jan 2016 23:13:33 +0000http://www.joshuawinn.com/?p=2429Yoast's WordPress SEO plugin will automatically "ping" search engines that your existing XML sitemap is updated. But what if you want to disable this? The plugin settings do not have an option for this at the moment, but luckily there is a filter that can be hooked into with a line of code.

The WordPress SEO plugin by Yoast includes options to generate an XML sitemap for your website. Search engines look at all of the URLs in this file when indexing your content, and it helps to make sure that nothing is missed, and newly added pages (or files) are found quickly.

When you first submit your sitemap index file to Google Webmaster Tools (you must do this manually), it is processed and remembered. You don’t necessarily have to resubmit the sitemap again, as changes to it will be read automatically by Google—but, this doesn’t always happen quickly. Especially for sites that do not change that frequently or have a low pagerank. Google and some others on the web suggest using the ping URL or resubmitting via Webmaster Tools. [1][2][3]

Yoast automatically uses ping to give Google a nudge to say, “Hey, where have you been? My existing XML sitemap is updated. Please take a look.” This is done on a regular basis, and when content is added or edited within WordPress. But what if you want to disable this, so you can manually resubmit or ping?

How to Disable Automatic Search Engine Pinging

If you’re not sure if you should do this, don’t. Why would you want to disable the automatic pinging? In our case, we were working with a very large site and an SEO company that was trying to get it all under control. With the sitemap automatically resubmitting all the time, its status would change in Webmaster tools at unwanted times and start processing thousands of URLs again. It was driving them crazy! In their words:

“Please, please, please can we switch the resubmit off before I circumnavigate the moon under my own steam!“

At first, it was unclear from the docs and various pages I was googling that Yoast was actually doing the resubmitting. I eventually had to go into the source code to confirm that it is. Here it is in wp-seofunctions.php. Note that it pings both Bing and Google. The filter in this function was the key to disabling the pinging (at the time of writing, this filter is not documented).

Simply adding this line to your theme’s functions.php should do the trick:

What this does is hook into the filter and set the value to false. So Yoast’s ping function returns before it does anything. The callback function being used __return_false, is one of WordPress’ built in functions for quickly returning common values (like “true”, or “null”).

]]>http://www.joshuawinn.com/stop-yoast-pinging-resubmitting-xml-sitemap/feed/0Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)http://www.joshuawinn.com/responsive-diagonal-two-color-backgrounds-with-css/
http://www.joshuawinn.com/responsive-diagonal-two-color-backgrounds-with-css/#commentsTue, 04 Aug 2015 12:07:07 +0000http://www.joshuawinn.com/?p=2401Say you want to create a button whose background in the top left is one color, and a different color in the bottom right. The color is basically split with a diagonal line from the bottom left corner to the top right corner. It seems simple, yet a lot of the CSS techniques I came […]

Say you want to create a button whose background in the top left is one color, and a different color in the bottom right. The color is basically split with a diagonal line from the bottom left corner to the top right corner. It seems simple, yet a lot of the CSS techniques I came across out in the web, for making this responsive (regardless of the size of the button) were very dated, or needed JavaScript.

It’s very simple using the linear-gradient property and “magic corners”.

Gradients as Solid Colors

We’re used to thinking of linear-gradients as well..gradients. Colors that fade from one to another. But they can also be used for solid colors. If your “color-stop” positions both start and end at the same point, there’s no color blending in the middle, so you get two solid colors on both sides.

To the Corner

CSS gradients also have an angle option. So you could say linear-gradient(45deg, blue, orange) and that will split your gradient at a nice 45 degree angle. But if your element is not a fixed width and height, this won’t go from corner to corner. Thanks to the MDN reference page, I saw that you can also specify to <side-or-corner>, where <side-or-corner> is left/right top/bottom. So for our button example, as seen in the CodePen, is:

background: linear-gradient(toright bottom, #2f344150%, #21253150%);

That’s it. As for old browser support, this does not work in IE9—which is why I give a regular solid background color before the gradient, so there is a fallback.

]]>http://www.joshuawinn.com/responsive-diagonal-two-color-backgrounds-with-css/feed/5Adventure Time’s BMO, Made in 3D Entirely with CSShttp://www.joshuawinn.com/bmo-3d-css-beemo-adventure-time/
http://www.joshuawinn.com/bmo-3d-css-beemo-adventure-time/#respondTue, 28 Jul 2015 02:06:27 +0000http://www.joshuawinn.com/?p=2297Oh my Glob! BMO in the Web Thingey. All the visuals are done entirely with CSS. The buttons also do some mysterious things when you press them. The making of 3D BMO grew out of following a tutorial creating an old Macintosh Plus in 3D with CSS. I wanted to better understand the CSS properties that were being used for 3D, and create something myself. In doing so, I ended up figuring out some math to create some beveled/rounded edges.

Oh my Glob! BMO in the Web Thingey

If you’re using a web browser that supports it, you’ll see our friend BMO above, embedded from CodePen. If not, then you’ve got to load up Chrome or FireFox or else this won’t make any sense. All the visuals, and that flippin’ third dimension are done entirely with CSS. Most of the buttons also do some mysterious things when you press them. You were going to press them anyway, I know it. And I couldn’t bum you out, dude!

The making of 3D BMO grew out of following this tutorial over at CSS Animation Rocks, where Donovan Hutchinson created an old Macintosh Plus in 3D with CSS. I wanted to better understand the CSS properties that were being used for 3D, and create something myself. And, uh, it had to be something that’s mostly square, because manually creating round things with flat squares is a real pain. More on that funky junk later.

First, if you just want the results of 3d modeling with browser tech, and don’t care how it’s done, check out tridiv.com. You can create some incredible 3D objects with CSS, and share them. I don’t even want to know what the math behind that web app looks like.

Onto some things I figured out along the way:

The Order of Transforms & preserve-3D

If your elements don’t seem to be moving in the right direction, try translating before rotating. That’s because the order in which you translate or rotate matters; you’ll get different results when using the same transform origin. Transform-origin is also an important property to understand, because it basically acts as your pivot point. So if you have an effect like a door swinging open, you can move your horizontal transform origin to 0 or 100%.

Another important thing I found out; if you have nested objects, and apply a transform, the child will disappear if you don’t have transform-style: preserve-3d set on the parent! IE10 does not support this property. There’s also a difference in the defaults for this in Chrome and Firefox. When I was close to done arranging the 3D pieces in Chrome, I loaded it up in Firefox, which only displayed a single flat div, which still could be rotated around in 3D. This was remedied by simply adding the preserve-3d to the parent .bmo element, and making sure the others use their vendor prefixes using the @include transition.

Rounded Edges? Mathematical!

“When bad things happen, I know you want to believe that they are jokes, but sometimes life is scary and dark, that is why we must find the light.” –BMO

Making the corners look rounded involved working with something that’s also sometimes scary and dark— math. I wasn’t content to make BMO square, and wanted bevel the edge, by creating additional connected “polygons” that create the illusion of roundness. In 3D modeling programs, this is easy with a simple modifier or a chamfer tool, and the geometry adjusts to connect all the points and keep it a single object.

So how the lump do I calculate where to position each face on the beveled edge, and how many degrees to rotate them? Well, it involves a little trigonometry, that I did need to brush up on, to get this perfect. Check out this CodePen for a working example where you can change the number of faces in the bevel (the level of roundness). Note that the number of child HTML elements needs to match the number of faces that you set. I made it into a SASS Mixin:

Basic Explanation

I drew something like this out on paper, in the process of solving the problem of how to bevel the edges of the BMO:

The Angle

Taking a look at the SASS mixin that rounds the edges, we first divide the total number of degrees by the number of faces passed to the mixin, to see how much each face needs to be rotated.

The mixin does a loop through each face, and finds the point on the circle—these are the black dots on the second image above. Using the previous point and the current point, and your basic midpoint-on-a-line division, we find the center of the chord—the orange point. This is the translateX and translateY offset that our face div is positioned at.

The Chord Length

A chord is a line segment whose endpoints lie on the circumference of the circle.

The length (CSS height) of each face is calculated at the start of the mixin, in $sizeCorner. Check out this little interactive circle chord calculator tool and formulas page. Or don’t. It’s a good visual look at what I’m talking about here, and is where I found the formula that we need to calculate the height:

2R*sin(C/2)

Looks scary, but it’s just: Multiple our radius by two. Then we multiply that by the sin() of the angle (our noticed triangle in image 2 of the figure above), divided by two. I’ve commented the source code pretty heavily, so please see that for more info.

Browsers Still Behaving Badly?

There are some browser hiccups and quirks that I came across when working on this. The browsers are still working out how all these things are rendered, so some of it is up in the air with bugs and weirdness. Generally, I was able to alleviate inside-out things and flickering by doing the following:

Check the transform-style: preserve-3d mentioned earlier. Try putting on the parent(s). After coming back to this pen after a few months, things had just stopped working in Chrome, and started showing through other elements only at certain angles. Very weird. This was the fix. I’m not sure if the CSS property defaults changed, how it handles the spec, or what. I also encountered an issue with 3D elements on the face disappearing that I fixed by putting them in a different container than some 2D elements.

Try putting backface-visibility:hidden on almost everything! Especially all the children of the element that’s giving you an issue, as well its parents. Firefox would not behave when everything was finished and perfect in Chrome, as seen in the screenshot above. This seems like a bug, as visible backfaces should not have caused things to start showing through each other (as if with the wrong z-index—changing z-index does not affect these things). I also encountered 3D child elements (the front buttons) flickering and disappearing when rotating.

Gaps Problem

Another issue I was having was gaps between the rendered elements. I thought of a few possible reasons why this could be happening. One, the browser rendering. It isn’t exactly a dedicated 3D engine here, and a lot of these properties are still in development. It could also be an error in my math; very likely. Or, a floating point precision problem with the math being done with SCSS could be the culprit. To fill in the gaps, in several instances I just increased the size of some of the elements by a very small amount. Anyone have any clues about this one?

The Fun Extras

All of the fun bits when you press the buttons were done with some extra JavaScript and some simple CSS animations. The eyes blinking use the step-end transition timing function, so there is no transition between the circle and square eyes (instant change).

Yes, I kinda cheated on the arms the legs—I had to finally finish this thing. Let’s just call them low-poly.

]]>http://www.joshuawinn.com/bmo-3d-css-beemo-adventure-time/feed/0Adding a “Rate” Button to your Cordova-based Mobile App (Android, iOS, etc)http://www.joshuawinn.com/adding-rate-button-to-cordova-based-mobile-app-android-ios-etc/
http://www.joshuawinn.com/adding-rate-button-to-cordova-based-mobile-app-android-ios-etc/#commentsThu, 20 Nov 2014 23:55:33 +0000http://www.joshuawinn.com/?p=2262High ratings in the Google Play Store or iOS App Store are critical to an app’s success. And they’re beneficial to find out what the problems are when an app needs improvement. So, it’s very common to have a simple link/button that allows the end user to submit their review from inside the app. The less hoops to […]

High ratings in the Google Play Store or iOS App Store are critical to an app’s success. And they’re beneficial to find out what the problems are when an app needs improvement. So, it’s very common to have a simple link/button that allows the end user to submit their review from inside the app. The less hoops to jump through, the better.

As a developer creating a cross-platform app, there’s also the desire to keep a single codebase. Luckily with Cordova (used with PhoneGap, Ionic, and other HTML-based app frameworks), there is a way to test which platform is currently running.

URL Formats for Android & iOS

Both iOS and Android have a URL format that will allow you open the app directly in the native store (not in the browser):

Google Play:

market://details?id=com.YOURPACKAGE.YOURPACKAGE

Replace after id= with your app’s package name (the standard naming convention is com.yourdomainname.yourappname). This link will open up in the Play Store, where the star rating is front and center.

App Store:

Where can you find this? After your app is submitted to Apple using iTunes Connect, you will be able to find this URL on your app store link. In iTunes Connect, this is currently under More -> View on App Store. Your best bet is to use the official iTunes Link Maker. Then you can replace https with itms-apps.

If you’re testing this out in the device simulator in XCode, you may get an error: “Failed to load webpage with error: The URL can’t be shown.” This is simply because the simulator does not have the App Store app installed. So the link has nothing to open up in. I received this error in the simulator, and the link worked fine on an actual device.

You may also be wondering what the mt and uo parameters are on that URL. The mt is a number that designates the Media Type; music, mobile software, audiobooks, etc. The uo is the Unique Origin, that is used to track where the link was generated. You may be able to remove that parameter, but oddly enough I can’t find the official docs on it, to confirm that 100%.

Blackberry:

http://appworld.blackberry.com/webstore/content/APPLICATIONID

Opening the Link Depending on the Platform Running

To detect what platform is being run on the device, there is a Device API plugin available: org.apache.cordova.device. Besides the platform, this gives you access to other info such as the model name, UUID, and version. Note that “As of version 3.0, Cordova implements device-level APIs as plugins. Use the CLI’s plugin command“. If you’re using a local command line to build your PhoneGap app, this means that you’ll need to use the plugin add command.

cordova plugin add org.apache.cordova.device

And if you’re using the PhoneGap Build service (where you upload your files to compile in the cloud), you’ll want to add the plugin to your config.xml file.

<gap:plugin name="org.apache.cordova.device" />

Once you have access to the plugin, you can use the following in JavaScript to find out the operating system name.

var stringName = device.platform;

Here’s a full example, which uses jQuery Mobile to handle the tap/click of the button.

]]>http://www.joshuawinn.com/adding-rate-button-to-cordova-based-mobile-app-android-ios-etc/feed/2Using Sublime Text as Your Primary Web Coding Tool: Workflow Tipshttp://www.joshuawinn.com/using-sublime-text-primary-web-coding-tool-workflow-tips/
http://www.joshuawinn.com/using-sublime-text-primary-web-coding-tool-workflow-tips/#respondWed, 05 Mar 2014 03:00:47 +0000http://www.joshuawinn.com/?p=1682Sublime Text has become my primary web coding tool. It’s built with efficiency in mind, giving you keyboard shortcuts to avoid slowdowns with the mouse, and the ability to have multiple cursors. There are many extensions available that can be instantly found and installed via the Package Manager. Plus, it’s visually pleasing. And fast. The overall […]

Sublime Text has become my primary web coding tool. It’s built with efficiency in mind, giving you keyboard shortcuts to avoid slowdowns with the mouse, and the ability to have multiple cursors. There are many extensions available that can be instantly found and installed via the Package Manager. Plus, it’s visually pleasing. And fast. The overall interface is really slick and modern. It has some great color schemes built in, and a unique zoomed-out scrollable code overview on the right side. It’s hard to live without that feature now that I am so used to viewing and scrolling to sections in my code visually.

There are a ton of helpful features and shortcuts lying in wait within the editor. Here are the ones that I’ve found the most useful during web development and programming:

Convert multi-line CSS to single line CSS with a single key press

In trying to keep my CSS tidy, this is one of the first parts of my workflow that I was looking to speed up. If you select the lines after the first line and press Ctrl-J in Windows, code such as the following:

Editing shortcuts and multiple cursors

I won’t bother covering this in-depth, as you can watch this excellent video tutorial at Tuts+ called Multiple Cursors and Incremental Search. It’s the 4th video in a series about Sublime Text workflow, and I’d recommend checking them all out.

As a recap and reference, there are a few important keyboard shortcuts to remember:

Ctrl + L: select line

Ctrl + D: quick add next

Alt + F3: find all occurrences

Middle click and drag: select column. Ctrl+Shift+L to select those lines, then you can type/use arrow keys to move multiple cursors

Open folder in Windows Explorer & copying filenames

Once upon a time when I used Dreamweaver, I would often use the Right-Click menu option “Open in Explorer” via the files list, to paste in a script or an image. In Sublime Text, “Open containing folder” is available when right-clicking on a file on the sidebar, or inside an open document. For some reason this is not available when right clicking on a folder. Please vote for it as a feature request here.

There is a package called Sidebar Enhancements, which gives you a hoard of additional options on the right-click menu. I often need to copy a filename exactly, like a JavaScript file that I want to link, without manually typing it out. It’s quicker and there’s less chance of errors. Using this extension gives options like “Copy name” (filename) and “Copy path”, as well as an “Open with” (open with Photoshop is useful for images).

Duplicating lines

To duplicate the current line that the cursor is on, press Ctrl+Shift+D in Windows. Or ⌘+Shift+D on Mac. If you want to duplicate multiple lines, you have to select all of the text on the multiple lines, which some people don’t like. To duplicate the multiple lines selected regardless of what’s in the selection, there is the package Better “Duplicate Lines”.

Some improvements to settings

Bold folder labels helps differentiate files and folders, highlighting the line you are on is an important visual indicator, and highlighting modified tabs (a different color) helps notify you that a modified file hasn’t been saved yet. You can find some other settings that you may like here:

Sort selection alphabetically

The “Edit” menu contains a “Sort Lines” and “Sort Lines (case sensitive)” option, which defaults to the F9 key on Windows. Make a selection and press F9, and your lines will now be in alphabetical order. Useful for sorting arrays.

Put quotes around selection

If you have a word selected, and then type the double-quote character, then the word will automatically be surrounded in quotes. Very helpful if you’re working with a series of variables/arrays. When I needed to put several words/strings in an array format, I just quickly double-clicked to select each one, then typed quote.

SASS and LESS

There are several packages available for getting Sublime Text set up so that saving out a SASS or LESS file will automatically generate the CSS file, so you don’t have to do anything command-line.

SASS Support – You will need to install 3 packages from Package Control, and have Ruby and SASS installed on your PC.

]]>http://www.joshuawinn.com/using-sublime-text-primary-web-coding-tool-workflow-tips/feed/0Facebook’s Sharer is no Longer Being “deprecated” (2014)http://www.joshuawinn.com/facebooks-sharer-php-longer-deprecated-2014/
http://www.joshuawinn.com/facebooks-sharer-php-longer-deprecated-2014/#commentsWed, 08 Jan 2014 06:51:08 +0000http://www.joshuawinn.com/?p=2035Facebook’s sharer.php is officially back. Not that most people had stopped using it anyway! Along with the new Share button, you can safely use the sharer.php syntax to create a link that shares a URL on one’s Facebook timeline. As there are still many articles/answers out there that have outdated answers to questions about this, […]

]]>Facebook’s sharer.php is officially back. Not that most people had stopped using it anyway! Along with the new Share button, you can safely use the sharer.php syntax to create a link that shares a URL on one’s Facebook timeline. As there are still many articles/answers out there that have outdated answers to questions about this, I thought this was worth spreading the news. I’m glad that Facebook’s approach to this no longer has to bring about confusion.

Sharer Un-deprecation

For a while (2012-2013?), the official Facebook docs has a message that the share button was being deprecated. The Like button was to somehow take over. When this message appeared, it started to worry some web developers. Many continued to use the facebook.com/sharer/sharer.php formatted link (with the correct parameters). There didn’t seem to be a simple replacement, besides the Feed Dialog (API usage + an app ID), and what about the thousands of sites out there already using the Sharer syntax?

With the release of the new Share button in November 2013, the documentation has been updated. There is no longer any mention of deprecation, and the sharer.php method will use the newest version:

This new Share Button works with a new version of our web-based Share Dialog. When using the sharer.php method of invoking the Share Dialog, this dialog will also display the new version without any changes required.

And under their FAQ, it says:

Can I use the Share Dialog without using the Share Button?
Yes, although we recommend using the Share button to offer the simplest and most consistent experience for people using your site, you can invoke the Share Dialog using a link:

New Share Button

The design of the Like and Share button designs have been updated. They can also be easily added side-by-side. Those using existing code for the Like button, should automatically see the new design. More at Facebook:

Update: How to Dynamically Insert the Current Page

Some people commenting on this post were asking about how to have the sharer work with the current page. This can be done by:

Getting the current page’s URL using PHP

Using the PHP function urlencode on this URL and printing it after the “u” parameter

The URL encoding is necessary because you are basically sending a URL within a URL, as a parameter in the query string. If you have certain special characters in your URL, then the browser may think it belongs to the facebook.com URL.

So, here’s how you do it in code:

]]>http://www.joshuawinn.com/facebooks-sharer-php-longer-deprecated-2014/feed/13Becoming a Full-time Freelance Web Developer: Preparation & Decisionshttp://www.joshuawinn.com/becoming-full-time-freelancer-preparation-making-decision/
http://www.joshuawinn.com/becoming-full-time-freelancer-preparation-making-decision/#commentsSun, 29 Dec 2013 03:00:13 +0000http://www.joshuawinn.com/?p=1624For those of us working in fields that reside within the digital realm, becoming a freelancer is very enticing. Especially for web developers and designers. The start-up expenses are negligible, and the path to transitioning away from a full-time job looks fairly natural. Making the switch is the hardest part. People call it, “The Plunge“, […]

]]>For those of us working in fields that reside within the digital realm, becoming a freelancer is very enticing. Especially for web developers and designers. The start-up expenses are negligible, and the path to transitioning away from a full-time job looks fairly natural.

Making the switch is the hardest part. People call it, “The Plunge“, or “Taking the Leap“, and other such phrases involving jumping off a cliff, that make it seem more terrifying than it really is. If you’re going to use those terms, think of like giving a yell and executing a really sweet cannonball. It causes a momentary stir, and you’re having a lot of fun. Or, like giving that first push on a sled, that starts you down a snowy hilltop. Geronimo!

Heavy Positives

The decision to quit my job and work for myself was not something that happened instantly. It was made over the course of a few months, during which I made some preparations. It was a calculated decision. I already had freelance jobs going on the side, but could not take on very much without sacrificing the ability to have down time. As I continued to weigh the pros and the cons, the pro side of the scale kept getting heavier. Eventually I got tired of discussing and thinking about it, and just had to make it happen. When you’re constantly asking yourself, “Why am I not doing it?”, it may be time.

Of course there still are challenges and downsides to a life of freelancing. If you’re also thinking about becoming a freelancer yourself, I bet they are lingering in the back of your mind right now. I don’t mean this article to be another feel-good quit your job puff piece (the dream always sounds great in theory), but a look at practical preparation tips to get ready for and begin the freelance life, based on my own experience.

Pros and Cons of Going Freelance

I’ve listed all the pros and cons that I could think of. These may vary depending on your circumstances and responsibilities. I think it’s important to give some serious thought to them, and whether you personally can handle the cons/concerns (in a later article, I will discuss these in-depth and how they can be handled or alleviated).

The Pros & Daydreams

Set your own schedule. Good for night owls and taking off any time during the day.

You decide what work and clients to take

Mobility – Travel or just work from a coffee shop. All you need is an internet connection.

Higher income potential & multiple income streams

Variety of work – Expanding your creativity and knowledge

Pride in all of your work (it’s just you) and ability to take extra time to learn new things

A better work/life balance

Spend more quality time with kids or significant others

Ability to explore your own business ideas

Good if you don’t like being told what to do

Ideally less stress overall? Maybe?

Flexibility and, FREEDOM!!!

The Cons & Concerns

Irregular flow of work or lack of work – Monthly income changes from month to month

Loneliness – Lack of social interaction

Running a business and administrative time-sinks

Taxes

Lack of insurance / benefits

Amount of direct communication with clients – If you enjoy this, it could go under “Pros”.

You must be disciplined – or rather, you will be forced to be

Will it really be less stress, or will it be more?

Personally, I was most concerned with #1, #2, and #8. After the first three months, they are not so bad after all. I have no lack of work and have had to turn some down. There is a lot of work available on the web right now. Losing the social interaction of the workplace can be alleviated by doing some work at a coffee shop, setting up at a coworking space, keeping in touch with friends via instant messenger during the day, and making sure to get out more on weekends and after work. Having a dedicated working space is also helpful to get into the right mindset.

Making Serious Preparations

First, I would suggest that if you’re at the very beginning of your professional career, you should get some experience working at or with a studio/agency. It’s important to know how a web design studio functions, how to manage your own workflow and communications, common pitfalls you may encounter, how to quote projects, and how to work with clients and designers. You may disagree, which is fine; this isn’t a requirement, and you may have the ability to learn all these things by the seat of your pants without ever having a cubicle (luckily I didn’t have one).

You’ll also make some valuable connections that you may continue to work with and get referrals from later. A lot of my work comes from word of mouth, or designers I know who need a developer. Sometimes I refer work to other developers when I am too busy, and vice versa. Networking at events and meetups can be another way to make helpful connections to fill that gap.

Line Up Work, and Put Irons in the Fire

Before you go quitting your job, make sure you have clients and some work lined up. Moonlight a little on some projects if you haven’t already, to get a feel for what it’s all about. Transitioning will be much easier if you have some guaranteed work ready to go. Realize that you’re going to need to spend a percentage of your time on administrative, workflow, and business setup tasks during the first couple weeks.

Start Thinking About Passive Income

Passive income is a revenue stream that happens without your intervention. This typically means creating something to sell: stock assets, themes, skins, a book, ad-space on a website, mobile apps, etc. In addition to cutting costs, even having a small amount of passive income every month is going to help pay the bills. And, as freelance work and payments can be irregular, it helps add some stability.

I’m just getting started with this myself and am hoping to make it a larger percent of my income. The nice thing is that, for the most part, you can set it and forget it, check back later, and suddenly there are sales and some money. I’d recommend checking out using sites like the Envato Marketplace (ThemeForest, CodeCanyon, etc) for selling stock assets.

Go Lean: Figure out Your Finances, Cut Costs, and Have Backup Savings

One of the first things I started doing was to look for ways to cut my monthly expenses. Some cuts I had thought about before, but hadn’t got to yet. With a salary, it’s a little easier to let some luxuries and monthly fees carry on. One that I did not have a problem with cancelling was TV service. For me, just keeping the internet and using Netflix was great. I have to watch a lot less commercials.

If you’re having trouble identifying your monthly expenses, take a look at Mint.com. It’s a free money management web app that is useful for getting an overview of your accounts, and reviewing purchases and deposits by category. You’ll probably have to go through and re-categorize a handful of them to get an accurate picture. Figuring out exactly what your monthly expenses are (on paper works too) is going to determine how much work you need to do and what hourly rate to charge.

If you have zero savings, and are going paycheck to paycheck, I think it’s better to hold on to that job for a little while. At least until you can stabilize your situation. Cut costs, and save some money. Have a few months salary on hand. In my mind, I figured I could start off making a few hundred dollars less every month. I imagined the almost-worst-case scenario, and how many months I could sustain myself until money ran out. The more savings you can pull together, the less you will have to worry about the switch to freelance. You may not even have to dip into it at all. This is also important because you may not get paid for a few weeks, and that big project you were banking on may get delayed. Payments, in general, will be irregular.

Start Using an Invoicing and Time Tracking Tool

Using an invoicing and time tracking tool is going to make your life so much simpler. You’re going to need to track time if you’re doing hourly work. And you’re going to need a way to send bills and receive payments. I’m happily using Harvest, which is a little cheaper than FreshBooks for a single user. FreshBooks is a bit more robust, and has some features like recurring expenses that I had to send in feature requests to Harvest for. Both are excellent options. This helps me in a few ways:

Tracking time efficiently and all in one place – I also use it to time all non-billable tasks like project management, for review later. Seeing how long a project actually took is important for future quotes.

Punching the clock – Hitting the start timer button makes me feel like I’m on the clock and is extra incentive to not get distracted. If I do, I have to subtract time and then become aware of how much more work I need to do. The total time for the week and the day keeps myself accountable.

Sending a Nicely Designed Invoice with Little Effort – Click a button to send an email with a nicely designed PDF. You can quickly see outstanding invoices, or record payment that you might receive by check. If payment is past due, you can send another reminder without feeling like you need to have to write a carefully worded email (unless it’s REALLY past due). One less thing you need to handle.

Online Payment – Using Harvest, I am able to receive payments from Paypal accounts that are linked to a US bank account at only a few cents per transaction (not a percentage!). This is without signing up for a special PayPal account with monthly fees. You can also use other payment gateways.

Recording Expenses – Since my finances are fairly simple as this point, I’m using Harvest as a central hub for everything money related. Expenses recorded include any software or scripts I need to purchase, hosting and domain names, as well as monthly fees for things like Creative Cloud. You can also scan in receipts via the mobile app.

In addition to Harvest’s 30-day trial, it does offer a limited free plan (limits projects and clients), which was a little hidden on their site when I signed up. I was happy that I could continue using it after the first 30 days, when I still only had one or two clients. You do need to manually switch to this plan.

Figure Out Your Hourly Rate – What’s Your Minimum to Pay the Bills?

If you’re just starting out, deciding on an hourly rate can be difficult. A lot of first-time freelancer start off charging too little, and under quoting their time (plan for the unknowns when they are typical, as well as updates to a final product). Don’t undervalue your work, and the fact that not everyone can do what you do. You’re a professional right? If you’ve got experience under your belt and are good at your craft, charge what your work is worth.

This doesn’t mean that you should charge hourly for every project. Most larger projects end up being signed for a flat rate. But coming up with the final quote for them will be easier when you can multiply estimated hours by your base rate.

Realize that some agencies are charging $100 to $150 an hour, and even some high-end freelancers. Charging $25 to $35 an hour is probably too cheap, unless you’re desperate for work, or have very little experience. You may be surprised at how raising your rates can increase the quality of work you receive, which also allows you to put in more care. It doesn’t mean you’ll sign less clients, in fact, it may mean that you’ll sign more(see story about the wedding photographer).

There are extra costs involved when you’re self-employed that need to be factored into your pricing. There is the overhead; the operating cost of doing business (office, utilities, software, scripts, stock assets, etc). Then there is the time stuck doing project management, writing up contracts, handling emails, and having conference calls, which may not be factored into the cost of the project. This could be 10 to 15% of your time on average; use time tracking to get an accurate gauge on this.

Get Your Documents in Order

Get an EIN from the IRS
You’re basically a sole-proprietor now, whether or not you register a business or not. You are going to want to sign up for an EIN:

An Employer Identification Number (EIN) is also known as a Federal Tax Identification Number, and is used to identify a business entity. Generally, businesses need an EIN.

Some independent contractor forms may ask for this Tax ID number. I was thinking this would be difficult, but it’s probably the easiest government-related thing I have ever done. It literally takes you five minutes, and you’ll get an email with your number.

Tip for Digitally Signing Contracts
At some point you’re going to need to digitally sign some contracts and agreements. I do this using a scanned image of my signature that I have ready to use, and the free PDF viewer/editor Foxit. In Foxit, you can use the Typewriter tool:

Comments -> Typewriter Tools -> Typewriter

Edit -> Add Image

Under Advanced, select Proportional.

Get a folder structure set up, and schedule backups
The basic folder I use to organize my web development work is the following:

-clientname
--web
---content
---psd
--www
--archive

Create Templates for your Own Contracts

If you’re working with another agency that gives you work, they will likely have an independent contractor agreement that you need to sign. When you are dealing with a client directly, you’re going to want to have a default contract template or two. I’d have at least:

A general hourly work contract for edits and small projects. Get some form of payment up front for new clients.

A template for larger projects and builds. Include upfront fee percentage (25%? 50%), and a kill-fee (to prevent you from doing a ton of work and not getting payed for it). Itemize all work to be completed, so it is clear what your deliverables are. You can point to the contract if new items start being requested.

Here are some of the best links to sample contracts and related articles that I’ve found, to get you started: [1], [2], [3], [4], [5], [6]It’s also worth searching the free legal documents at docracy.com.

Making the Decision, and How to Quit your Job

Now that all the preparations are made, there’s still an elephant in the room: actually quitting. What’s the right way to go about it? It’s exciting in your head, and also a little daunting when you realize there may be tactics involve in actually doing it in a professional manner.

The responsible standard is to put in two weeks notice. Especially if you’ve been at your job for a good amount of time. You want to keep good references in tact, in case you decide to later give up on freelance go look for another full-time position (or an irresistible offer appears). It’s about the right amount of time to finish up projects, create any leaving documentation about what you do, hand off work, and clean out your computer and desk. Your boss may ask you to stay longer, so be willing to stand your ground. I ended up agreeing to three weeks instead of two, since I had been there five years, but in retrospect I don’t think it was necessary.

How I did it: I scheduled a quick meeting with my boss during the day, and let him know that “I’ve decided to quit and become a full-time freelancer.” I let him know honestly that this is something that I have been wanting to do for a while, and that I was putting in my two weeks.

Keep it professional and realize it’s not personal, it’s business. This is the decision you’ve made. I appreciated the time that I was there and everything I had learned. I do not think this initial conversation is the time to be negative and get into an argument about any of the gripes that you might have. Going on the attack, out of emotion, is not going to end well, and could get awkward if you’re still working there for two weeks. It’s also a good idea to send a formal resignation to your boss via email after this, for the record. Your boss may want to reference it later, and it’s good to have in writing in case any questions arise; so include what day you will be leaving.

You may be asked to do an exit interview. I’d say the same as above applies, but how you approach this is up to you. Realize that you’re going to be asked some questions, like what you liked least about the job and the company. It may be worth taking a glance over some sample exit interview questions. There are a few things that I regret not saying; I did not think of them at the time because I was on the spot.

Send a company-wide email to your co-workers: This is an opportunity to show gratitude to those you’ve worked with, and to say your goodbyes. Heck, it wasn’t all bad right? The news may spread disjointedly, and it is a good way to let everyone know directly. Personally, I decided to send this after my resignation meeting, but you may want to send this (or a separate message) on your last day. Include how you can be contacted outside of work: email, instant messaging, phone, etc. Your friends there are valuable connections, and you may work together in the future (or just hang out as friends).

Alternatively, you could quit like Joey (just kidding):

Have you made the freelance jump? Any thoughts or additional suggestions based on your experience? See anywhere where I am off the mark? I’m interested to hear from you in the comments below.

]]>http://www.joshuawinn.com/becoming-full-time-freelancer-preparation-making-decision/feed/6Get SASS Working in Sublime Text for Windows in 8 Stepshttp://www.joshuawinn.com/get-sass-working-in-sublime-text-for-windows-in-8-steps/
http://www.joshuawinn.com/get-sass-working-in-sublime-text-for-windows-in-8-steps/#commentsThu, 03 Oct 2013 21:45:31 +0000http://www.joshuawinn.com/?p=1734Follow these installation instructions to start using SASS with Sublime Text. You'll be able to save your SASS (.scss) file, and it will compile to a CSS file automatically. There are a few more extensive guides out there on this, but they skipped over a few minor things that you may miss. This boils it down to the essentials that you need to get up and running.

Follow these installation instructions to start using SASS with Sublime Text. You’ll be able to save your SASS (.scss) file, and it will compile to a CSS file automatically. There are a few more extensive guides out there on this, but they skipped over a few minor things that you may miss. This boils it down to the essentials that you need to get up and running.

How to Build .scss with Sublime Text:

Install Ruby: Download Ruby for Windows. When you run the installer, choose the option Executable in PATH

Install SASS with Ruby: Open your Start menu and type “cmd” to open a command prompt. Type “gem install sass” and press enter. Gem will do its thing and install.

Install Package Manager for Sublime Text: You may already have this installed if you’ve been installing other extensions. Follow the installation instructions on the plugin’s website.

Use Package Manager to Install “SASS”: This package is for syntax highlighting. Open the command panel with Ctrl+Shift+P and run “Package Control: Install Package”, then type SASS to find the package to install and press Enter.

There probably is a conflict where the syntax highlighter thinks your files are HAML. Rather than modifying your Ruby highlighting settings as some articles show, you can do this when you have an .scss/.sass file open:View -> Syntax -> Open all with current extension as … | Sass

Use Package Manager to Install “SASS Build”: This will allow your SASS/SCSS files to be compiled.

(Optional) Use Package Manager to Install “SublimeOnSaveBuild”: Use this if you want to compile whenever you save, rather than using the separate keyboard shortcut for build (Ctrl+B).

Restart Sublime Text

Save your .scss file, and voila, the corresponding .css file of the same name will appear in the directory.

Helpful Hints:

Don’t want the CSS file to save in the same directory? If you want to change the default folder that your generated CSS files are saved to, you can edit the configuration for what Sublime Text calls “Build Systems”. This configuration is what’s calling the commandline for SASS. Unfortunately there doesn’t appear to be a way to do this on a per-project basis, but you can change it.Example I used for WordPress: Having style.scss in the folder /sass/ inside your theme folder, this would save style.css in the root."cmd": ["sass", "--update", "$file:${file_path}/../${file_base_name}.css"],