I’ve been working with a lot of people who’ve been wanting to go freelance – but they all worry about the same thing: money. Money is a scary thing for people, especially when you start getting paid multiple times a day, in amounts big and small.

I’ve decided to offer a new workshop, held here at my flat in London. There are 5 tickets available only – but don’t worry, if this ends up being a popular thing, I’ll open up more workshops in the future.

Some of the topics:

• Dealing with irregular income & setting up a budget
• Creating invoices, estimates and getting paid
• Tools for tracking these items
• Pros and cons of hourly, daily or project rates

I’ll make us some yummy lunch and munchies, as well as offer tea, coffee and drinks!

You can buy tickets and learn more at Eventbright and follow the event on Lanyrd.

The button made use of three typical states: regular, hover and active. I started out by coding the buttons so they’d look fine in non-animation capable browsers. I split the animated parts separately and placed them into spans:

<a class="btnSellers" title="Sellers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>
 
<a class="btnBuyers" title="Buyers Video Overview" href="#">
	<span class="monitor"></span>
	<span class="play"></span>
</a>

These are styled and formatting quite normally:

#btnVideos .btnSellers, #btnVideos .btnBuyers { background: url('images/btnSellers.jpg') no-repeat; float: left; height: 92px; margin-top: 80px; position: relative; width: 229px; }
#btnVideos span { display: block; position: absolute; }
#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px;  top: -26px; width: 102px; }
#btnVideos a:hover .monitor { top: -36px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; top: -12px; width: 51px; }
#btnVideos .play:active { background-position: bottom; }
 
#btnVideos .btnSellers:hover { background-position: left -91px; }
#btnVideos .btnSellers:active { background-position: left -183px; }
 
#btnVideos .btnBuyers { background-image: url('images/btnBuyers.jpg'); margin-top: 54px; }
#btnVideos .btnBuyers:hover { background-position: left -92px; }
#btnVideos .btnBuyers:active { background-position: 1px -184px; }
#btnVideos .btnBuyers .monitor { background: url('images/iconBuyers.jpg') no-repeat; }

Adding the animation in was really very easy. First, we needed to tell the buttons that we wanted to animate them eventually. You’ll put these in your normal states:

#btnVideos .monitor { background: url('images/iconSellers.jpg') no-repeat; left: 20px; height: 69px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; transition:all 0.3s linear; top: -26px; width: 102px; }
#btnVideos .play { background: url('images/btnPlay.png') no-repeat; height: 51px; right: 25px; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; top: -12px; width: 51px; }

As you can see, I’m using different transition easing – a linear and an ease-in-out. There’s no hard rule for which to use, just experiment until you get an effect you like.

To animate the play button, all we had to do was give it a 360 degree rotate:

#btnVideos a:hover .play { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

To pull the monitor graphic up was even easier, I just adjusted the top value:

#btnVideos a:hover .monitor { top: -36px; }

Definitely much quicker and cleaner than jQuery!

You can see a demo of this here.

What is SASS & LESS?

Both SASS & LESS are CSS preprocessors, basically they’re created to help you code CSS quicker by allowing the use of basic programming principles. Both allow you to use variables, mixins, nested elements, functions and operators.

You basically put your CSS into a special file, and then when finished, your CSS is run through the preprocessor and it kicks out “normal” CSS. Huh.

I found LESS to be a lot easier to understand and install, although both of them worked pretty much the same way. You’re able to create variables within your CSS so you can reuse certain elements (for example, a hex code), and if it needs changing, you only have to do it in one place. Here’s where my inner-awesome-developer-sense kicks in. You can pretty much already do this with a basic class.

Another major feature in both SASS and LESS is the use of nesting, where you can “save” on repeating code by indenting elements instead of having to retype them, for example, if you indented p {} underneath an id of #header, then the CSS that’s printed out is actually #header p {}

While this seems pretty cool at first, I can easily see this as becoming cumbersome and crazy really quickly. When you’re not paying attention to what’s being outputted, your’re more likely to be lax in your coding.

Important Questions

I had several important questions before and after I read up on the technologies, and most of them really weren’t answered by any of the articles I read:

1. What happens if another developer needs to edit the CSS and doesn’t know or realize a preprocessor is being used? How do you sync the two?
2. When no longer writing CSS yourself, how do you control the structure and organization of the code? How do you ensure you’re optimizing it correctly?
3. What happens if JS is down?
4. Does it work with one line CSS?

All in all, I don’t think I’ll be using either SASS or LESS. Installation time, upkeep and the fact that it ruins the simplicity of CSS will keep me away. If you’re a developer who’s spent a lot of time optimizing your code and really learning the in’s of CSS (not just top level stuff), then you’ll find this pretty useless, as you already can quickly do the type of code it spits out.

I’m also worried on our recent reliance on Javascript and the trend of forcing languages and browsers to do something they’re not meant to do. It wasn’t even a year ago that everyone was worried about best practices and making sure we didn’t rely on Javascript for anything but the beauty layer. Now this is one more thing that can break.

Some of the features, like mixins and operators actually made the code a lot more convoluted an jumbled, and seemed to take a lot more code than if you were just to type it out correctly in the first place. I also don’t see the point of operators – CSS isn’t a programming language and you can’t dynamically update styles so why not just type in the correct number in the first place?

Final Thoughts

Perhaps I’m wrong and you disagree – maybe you think SASS or LESS is the greatest thing since sliced bread. It’s just not for me. I would love your thoughts on it though!

Working from home comes with several advantages after all – no overhead, free range of the kitchen, no dress code and the ability to sleep as late as we want and stroll from the bedroom to our computer.

However, there are also several disadvantages we should be aware of. Distractions from family, children or pets being the biggest issue we come across. Also, walking two feet from our bedroom to our office means we don’t get the exercise we should – and we’re increasingly becoming an unhealthy industry. It also means you lead a distinctly lonely work day  - and without a boss breathing down your neck you’re more apt to goof off on the internet.

Even with all of these disadvantages – I still wouldn’t trade it for any other job in the world, nor would I bother with paying the high costs of renting an office space. Instead, I’ve aimed to become more productive and turn these into non-issues. How can you do it?

Distractions From Family & Pets

Our biggest issues normally stem from the distractions caused by loved ones. While it’s true that freelancers have a more flexible schedule and can often take more breaks, that doesn’t mean we don’t have strict deadlines of our own. I’ve found myself stopping work in order to play with my dogs or hang spend time with my husband, only to see the whole day go by without any work getting done.

While it may seem rude or inconsiderate to shut out the loved ones, it’s a necessary evil in order to get stuff done. Here are a few tricks that have worked for me (and some my hubby has used against me!):

• Shut the door. If you’re lucky enough to have a whole room dedicated as an office, sometimes it works best to just shut the door and drown out the noise.
• Leave the animals outside. Sometimes my doggies can get a little restless and drive me up the wall when I’m trying to concentrate, so if it’s a nice day out (and you have a fenced in yard), I’d leave them outside a little longer than normal so they can run off the energy and let me work.
• Put on headphones. Nikita uses this trick on me. When he’s trying to concentrate on work and I’m babbling on about nothing, he’ll put on his headphones. Eventually I realize he’s not listening and get tired of having him take off his headphones and repeat myself. Eventually I leave him alone. Not the nicest, but it works!

Pudgy Developers

Nobody likes a fat developer, and since I’ve gone freelance, I’ve notice a huge weight gain. So what have I done to remedy this? I moved across the world to London, where every day I’ve had to walk at least two miles to get anything accomplished.

Of course, that’s not going to work for the majority, or probably anyone else. But it’s important to make some life changes now before you get to the age where you end up having health problems. I like you guys and fully expect all of us to be coding together well into our triple digits!

Of of the main issues of working from home is grazing – I’ve noticed personally that I tend to stray into the cupboards for snack food quite often. If you do this to, go ahead and get rid of the junk food and stock up on healthy snacks and fruits. That why you’re at least eating healthy.

If you’ve got pets, now’s the time to give them some attention. Take a longer lunch and use it to walk them around the block, or play some sports with your kids. Relocate to the city if you can. I know personally that I could never stick to going to the gym or an exercise plan – I had to force myself to work out but working it into my daily routine. I currently live in the city about a mile from any public transport – so even if I decide to be lazy one day and take the subway, I still get 2 miles of exercise. I’ve already noticed a decrease in appetite, weight and general pudgyness since I got here 3 weeks ago.

Lonely – I’m so Lonely

Another difficult disadvantage of working from home is the loneliness. I tend to be a loner anyways so this didn’t bother me too much until I realized I worked so much and so alone, that I didn’t have many friends! I also lived in the middle of nowhere so it was hard to meet up with the friends I had and even harder to find fellow devs and designers to hang with.

Now, I’m finding I have a ton of friends and contacts in the area and am meeting up with one of them almost every day for lunch or dinner. This forces me to get out of the house AND get some exercise. It also helps networking wise, as we can talk about work much easier. Plus, it’s fun to finally get to put faces to twitter avatars, voices or emails.

If you live in an area with a lot of people, you can also try meeting clients in person. I used to be pretty firmly against this, as I felt it wasted too much of my day for little payoff, but I’ve started looking forward to these outings. I get to be social and get out of the house; plus see parts of the city I’ve never been to.I also often get a free lunch (yum!) and I feel better connected to my clients.

If you’re not in an area with a lot of people or clients, try working some place public, like a library or coffeeshop. Just be careful that you’re not in someplace distracting or you won’t get anything done.

Coworking

Coworking spaces are large offices that allow you to rent a desk, or even a whole space. They’re cheaper than actually renting your own office, plus you get to share space with like-minded individuals. Some of these places let you rent by the hour or day; others let you have an actual short lease.

I’ve never done this personally, but have been contemplating doing it once or twice a week here – just got to find a place close enough to be worth it.

What do you do to stay productive at home?

Let’s take a look at the proposal I got today. Upon reading, several red flags immediately popped up, and I hadn’t even talked to the “potential” client as of yet.

Already we have our first issue. The client doesn’t want any major changes to the IA or content. Basically they want a skin, not something that’s best for their users.

Here’s our second red flag, a list of plugins they’re telling me, the developer, what to use, instead of trusting that they’re paying me to know what should/shouldn’t be used. Also, it looks like they included everything under the sun, I bet dollars to doughnuts they don’t even need half of these.

Also, special prize goes to those who can spot the “special plugin”. After seeing this plugin list, I already decided not to work with this client – but wait! – there’s more.

Deadlines are inevitable and very understandable. But what isn’t is an entire laid out schedule of what the web designer or developer needs to do or abide by. Is two weeks really enough for a full design? Is another two weeks really enough for development of what they’re wanting? Tough cookies if it isn’t, they say.

Here we find an even worse red flag. So they’re not coming to you because they like what you do and want to work with you. No, instead they’re throwing their RFP to anyone and everyone who wants to agree to the ridiculous timeline. You should never, ever go into “competition” for any sort of work. Clients should come to you because they know you can deliver the best.

Moving on:

It’s always best to be open to your clients about those you may be partnering with to finish the project. However, it’s not up to the client about who you work with. It’s your choice. (Of course if they somehow had a terrible experience with that other person, that’s another story).

Ah last, but certainly not least. They acknowledge that RFPs take a lot of time, yet they don’t care that they’re throwing theirs out willy-nilly to everyone. Also, they’re now mandating how YOU will get paid, instead of allowing you to list out payment terms.

Designer & Developer Professionalism

Sometimes it’s tough to remember that you own a business. You’re not anyone’s employee, nor do you have to work with every client who comes your way. The clients you choose to work with reflect on you, and you’ll only end up attracting more of the same.

A person doesn’t walk into a doctor’s or lawyer’s office and demand that they work on their schedule and when(if) they’ll get paid. No – they work on that professional’s schedule and they agree to that professional’s terms of work, or they don’t work with them at all.

There’s no problem with clients checking out a few different companies to see who knows their stuff and is affordable, however, it’s completely wrong to open a “competition” like feel to the process, hoping that we’re so desperate for work, we’ll scramble over each other in order to do it.

You, The Client

I don’t even know who this client really is or what they’re wanting, but they’ve already given me plenty of reasons to turn down work with them. In order for us to give you the best work possible, we need to have conversations with you, learn what and who your company is, as well as invest time into the relationship. No professional designer or developer will compete to get your money.

• Sans serif type is not harder to read than serif.
• Capitalized text isn’t harder to read.
• The idea of 5-9 nav items is false – while not always practical, it should be more about 4.

This book is definitely a must read for any designer, and I’d even recommend it to developers as well. It never hurts to learn as much as possible about every aspect of our industry. You can get it from Amazon for $17.99