Blog of Alex Cican View RSS

How my app got 455K users in the first week 12 Apr 2014 4:00 PM (11 years ago)

In my free time, I enjoy working on cool small projects that help me, or others, in some way. I came up with the simple idea of a TV show time calculator that ended up being a smashing hit.

The stats

After just one week of releasing the app, it got 455,826 unique visitors, 522,091 visits, and 688,280 pageviews.

During peak hours there were 1600+ active users and the app was being mentioned in about 250 tweets / hour. During off-peak around 10 tweets / hour.

I was using Trakt’s API to grab the TV shows, and because of the overwhelming API requests, their servers had several outages (sorry, guys). GitHub, where the app is being hosted, passed this stress test with flying colours—not a single minute of downtime. Hat’s off to you.

The app got featured in Business Insider, BuzzFeed, Fast Company, Huffington Post, Washington Post, The Daily Dot, Metro, iO9, Vanity Fair Italy, Wired Italy, The Mary Sue, Papel Pop, frontpage of Digg, Reddit, and on many many other sites.

How I did it

First, I designed and coded the app. Once I had a good product I did some user testing to see how people used the app and then went back to refine the app. After I had a solid product, I focused on marketing: presentation is just as important as the product.

I searched for influential bloggers who wrote articles about TV shows in the past. I sent them a brief email explaining who I was, and asking them to check out this app I made and if they liked it they could write about it.

Attached with that email was a 500 word document written by me, in which I talk about the app’s features, how I came up with the idea, how many days it took me to develop the app, and a few words about myself. I wrote that document in order to make it easier for the blogger to write about the app. I sent the email to twenty bloggers and I had high expectations that the app will go viral.

Many bloggers got back to me saying they’d write about it. So I asked them to coordinate their posts around the release date. I created a buzz that I would release a cool app, and on Tuesday—the best day of the week for release—I made the app publicly visible. I also submitted it to several websites (Reddit, HackerNews, DesignerNews) and on some other relevant forums.

WOW! Such traffic! Much tweets! So trendy!

The thing is, this happened in a parallel universe. Because in the one you’re currently reading this post, something very different actually happened.

How I really did it

I designed and coded the app, and I pushed it to GitHub (publicly released it on Friday). Then I posted a screenshot on Dribbble and tweeted once about it. That’s it.

The snowball effect that followed was pure luck!

However, I do have some ideas why the app became so popular.

1. Make it focused (niche)

The app is called Tiii.me and it’s a calculator of time spent. You could calculate how much time you’ve spent watching movies, watching TV shows, surfing the Internet, commuting, talking on the phone, and so on. It all fits under the category “time spent”. But you can’t. You can only calculate how much time you’ve spent watching TV shows. That’s it.

By making the app specific, you know who your audience is and how to please them. You can pinpoint their needs, pains, and desires. If you meet their expectations with your app, you’re in for a success.

You can succeed in not only making it viral, but also generating revenue from it. People would be happy to pay for your app if it solves their problem and makes their life easier.

Be aware of making it too focused, though. Engagement might be greater, but the amount of users (pool) will be much smaller. For Tiii.me, I could’ve made it even more focused if I had excluded all TV show genres besides comedy. But that would ignore a large part of the population who don’t watch only comedy shows. You need to find the sweet-spot between too focused and too broad.

2. Create a unique experience

“Nothing is new under the sun.”— Ecclesiastes 1:9

Don’t despair if your “original” idea has been done before. It doesn’t mean it has been done well. Take something and make it better.

“Everything is designed, few things are designed well.”— Brian Reed

Design matters. Make your app easy to use and intuitive, and you will rise above the competition. But in order to get that intuitive, memorable experience, you need to study your would-be users and understand them. Ask questions, observe how they work, listen to what they need, and adjust accordingly.

Also keep in mind that people don’t always know what they want. That’s where you can innovate and give users a taste of your own personality. Did people really want a bigger iPod Touch? No. But Apple still delivered one. It was so successful that a new profitable market emerged: tablets (In 2013 alone, 195M tablets were sold - Source).

3. Make it simple

Cut out the fluff. Include only the necessary elements needed to provide that unique experience.

Do users really need to create an account and login? Sure, it would be nice for Tiii.me if you could create an account and have a user profile with a list of all the TV shows that you’ve watched. Is it necessary? No.

Do I really need to see your logo when using your app? No (I hear marketers screaming at me). Do you really need a menu? An onboarding process? A footer? Challenge even the most “fundamental” elements of an app. What doesn’t improve the user experience should be thrown away.

Make it so simple (UI & UX-wise) and intuitive, that it looks like it wasn’t even designed. It was meant to be that way. Make your design “invisible”.

“Simplicity is the ultimate sophistication.”— Leonardo da Vinci

4. Make it easy to share

Don’t overlook this step. It’s important for making a viral app. Help users rave about your app. They loved the experience and want to tell others about it. Make it easy for them to do so. Spend some time customising the sharing experience. Don’t just strap-on a sharing plugin with social buttons.

Think from the perspective of a friend talking to you about this new app. What would you want them to say to you, so that you’d be intrigued to check it out?

For Tiii.me, I decided to only support sharing on Twitter and I customised the tweet like so:

I’ve wasted X days, X hours, and X minutes of my life watching TV shows. Calculate your time: http://tiii.me/

If I saw this in my feed, I’d be intrigued to check it out.

One small change I made was swapping the word “spent” with “wasted” for the tweet. I think wasted is a more powerful and controversial word, that grabs your attention better.

Even though I got some heat over this choice of words, I think it paid off. Over 19,308 tweeted about it (admittedly, some changing the word to “invested”, “enjoyed”, etc.).

Conclusion

What I enjoyed most from this experience wasn’t the massive press coverage nor the many tweets I got. I enjoyed most the fact that people got to use my app and interact with the interface which I designed. And apparently they liked it. The app didn’t get lost in the sea of mediocrity, hidden in a dark corner of the Internet…

Thanks to everyone who shared and told others about Tiii.me.

I wrote this blog post to express my gratitude and also give you some tips which could help your next app go viral.

Have some faith and the rest will take care of itself. Tiii.me is a living proof of that!

Personal websites 23 Oct 2013 4:00 PM (11 years ago)

I often browse personal websites of freelance designers & devs. After you visit a few sites, you start seeing patterns. Their “personal” websites become homogenised, stripped of personality, almost identical to the previous or next site. There’s nothing personal about it anymore, besides the URL. And this makes me sad.

I’m not talking only about presentation style. But also about the site’s language, its structure, and its goals. Most of the times, the structure of a freelancer’s site looks like this:

menu bar
*avatar* Hi I’m Alex born in, bla, bla
skills/what I do, bla bla
experience, bla bla
CHECK MY PORTFOLIO
contact me

Say I’m trying to find a designer for my startup. I’ve already seen twenty websites, all which have a very similar visual style, structure, and language. Unless your work really stands out—and it’s getting harder to stand out because the overall quality of design is going up—I won’t remember any of those. No one really understands experience and I’d be inclined to say they’re copying each other. I don’t want copycats for my startup. Moving on…

If you structure your website the same way as the other freelancer, you’ve lost an important tool that could’ve helped you lock the client. Congratulations, you are now relying only on your portfolio to land the client. But dude, the portfolio is the only thing that matters, right?

Wrong! I used to believe that too, to such an extent that I had my portfolio on the homepage, even before introduction. But the portfolio is not what separates you from me.

Six degrees of separation

What separates you from me is personality. That’s what makes me who I am. Personality defines how I approach and deal with issues, design choices I make, how I analyse and evaluate results, and how I communicate. Moreover, personality determines my preferences, emotions, and behaviour patterns. Remember that skills can be taught, but personality is inherent.

The best thing about personality is that it can’t be copied. It’s unique for each individual because it’s influenced by many factors like society, social situations, culture, language, even birth order¹. Going back to my previous example of the startup founder looking for a hire, a designer that doesn’t deal well with change and can adapt quickly won’t be a good fit for a startup.

So just like electronics have a fingerprint scanner that can uniquely identify you, use your unique personality to leave a mark on your site’s visitor.

Stay relevant

Some freelancers get this “show your personality” approach. But they execute it in a wrong way. Why should I, the potential client, care if you like milk in your coffee, or the Star Wars trilogy?

Sure, these facts can be linked: if you don’t have milk, you won’t drink coffee, and you’ll be less productive in the morning. But potential clients search to find what’s in it for them. So unless you can link these facts about you to the big picture leave them out. Think how your personality can help the client, if they were to choose you, live a better life, make more money, attract more clients, and so on.

Section: Blog

The original weblog idea was conceptualised in order to allow you to publish your personal thoughts and ideas. When you add a blog to your site just because everyone has one and it’s good for Google’s search engine, you’re doing it wrong. You’re also doing it wrong if you publish news articles related to the release of the iPad Air. Unless you can provide me with an insightful, personal review on the iPad Air, I don’t care. For gadget news, there’s The Verge.

Your blog posts should include part of your personality. I might want to learn more about you by reading your blog. Are you really who you say you are? Personality can’t be faked and in the long run, after I’ve read three-four articles of yours, your true personality traits come out.

If you want to have a blog, you must enjoy teaching. And your blog doesn’t have to consist of words—you can do podcasts, screencasts, or photos. But you should try to convert your experiences into articles that inform and educate people. I recently went to a conference and most of its speakers were like “I’m not here to give you advice…”. I hate that. Give me your advice, draw your conclusion, offer your suggestion, and if I like what you’re saying I’ll listen to it and act upon it.

Have a goal

It’s wise to set goals for your website. What action do you want your visitor to take? The goal for your site shouldn’t be to get them to see your portfolio. The goal for your website should be to persuade them contact you. If you add a bunch of actions before the CTA, which you have at the bottom of your site, you’re reducing the percentage of them clicking on that contact link.

Redesigned this site

In any case, I wrote this post to introduce you to my new redesigned personal website. I didn’t want to just write about the redesign, so I wrote more stuff in my effort to educate.

When redesigning this site, my thought was to make it personal. If you’ve been following me, you know that I was operating under the brand “SicanStudios” for design and under my name for photography.

This is no longer the case. From now on, in my efforts for more transparency, I’m putting my name on everything that gets out.

Since it’s a personal website, I’ve decided to “put my face where my name is” and design the site around my mug. This should somewhat impede “cats” from copying my site.

With this redesign I focused on simplicity, typography, and animations—showing the progression of an element on the page. Animations were certainly the most challenging aspect of the project.

As I wrote before, I want to push the boundaries of design. Animations look best at 60FPS. This is difficult to achieve when you animate large images, SVG elements, and entire webpages. I needed to do heavy optimisation and code refactoring to pull it off. And this was only possible with the help of Google Chrome’s dev tools which allows you to measure site rendering time.

Create an experience

On every page, I tried to create a unique and immersive experience. The site’s menu simulates a restaurant menu, which provides a funny twist to the term “website menu”.

I directed much attention to small details. When you hover the Twitter share button it emulates a beating heart. Or the order of the menu items was established based on the river created by each word. Keyboard shortcuts for every action were added. You can also navigate the site only with your keyboard. The previous/older post link, situated at the bottom of each blog post is cut off by the edge of your screen, to intrigue you and make you click. All these small details add up to create a unique experience for this site.

In conclusion: be bold. Make a statement. Upset people. Stand out. Keep hustling. Stay foolish.

How to code a Teehan+Lax navigation 24 Sep 2013 4:00 PM (11 years ago)

This type of navigation was first seen on the Teehan+Lax website, then it became quite popular and got adopted by several other websites (MailChimp, Wunderlist). The navigation bar works as follows: it’s being hidden once you start scrolling. As soon as you scroll up a few pixels it is shown. After that, when you scroll down again it gets hidden. When you have reached the bottom of the page the navigation bar reappears.

I saw it first, a couple of months ago, on Teehan+Lax. Since then, I have been waiting for a good out-of-the-box coded solution that would replicate this functionality to come out. But it didn’t, so I coded my own by reverse-engineering Teehan+Lax’s navigation. I’ll be using this solution for the redesign of this site (coming soon, hopefully).

Making it better

On top of the basic functionality that can be found on Teehan+Lax’s navigation, I coded a better version:

• Enabled navigation only with a keyboard (Tab + Enter/Space).
• Added keyboard shortcuts (Esc / M).
• Fixed Firefox animation bugs.
• Added functionality to close navigation if you click anywhere outside link area.

View the Demo →

Step 1 - HTML

We need some HTML code for the navigation. The navigation bar, .site-width (what is visible by default) is separated from the dropdown #navigation:

<nav>
  <div class="site-width">
    <a href="http://twitter.com/alexcican" target="_blank">Alex Cican</a>
    <span class="menu icon" title="Menu (Esc)" tabindex="0" data-icon="m"><span>Menu</span></span>
  <div>

  <div id="navigation">
    <ul>
      <li><span>The man behind this site</span><a href="#" class="about" title="About me">About me</a></li>
      <li><span>Pretty things I made</span><a href="#" class="portfolio" title="My Portfolio">My Portfolio</a></li>
      <li><span>Cool stories I wrote</span><a href="#" class="blog" title="My Blog">My Blog</a></li>
      <li><span>Experiments I conducted</span><a href="#" class="labs" title="My Lab">My Lab</a></li>
      <li><span>Where you can find me</span><a href="#" class="contact" title="Contact Me">Contact Me</a></li>
    </ul>
  </div>
</nav>

Step 2 - JavaScript

The logic behind the functionality is simple. Once the user has scrolled past the navigation, if they scroll back up, we show the navigation with a position:fixed so that it stays fixed on the screen.

We need three states for the navigation: ‘invisible’, ‘detached’, and ‘expanded’. The navigation becomes ‘invisible’ once you scroll past it. If you scroll back up we show a nice drop animation. If you scroll beyond a certain point, the navigation becomes ‘detached’, i.e. fixed on the screen. If you scroll back up the navigation will show the nice drop animation but because of the .detached class, only a few pixels above instead of at the beginning of the site. Lastly, if the dropdown is shown, the navigation has an .expanded class.

To achieve that we need four variables:

var previousScroll = 0, // previous scroll position
    menuOffset = 54, // height of menu (once scroll passed it, menu is hidden)
    detachPoint = 650, // point of detach (after scroll passed it, menu is fixed)
    hideShowOffset = 6; // scrolling value after which triggers hide/show menu

Don’t make the detachPoint value too small, because if the user scrolls fast, the class .detached will be added before having the chance to hide the navigation, resulting in a show/hide flicker of the navigation.

We’ll write efficient code. On scroll, only if the navigation is not shown we’ll compute its position and whether it will have position:fixed or not.

// on scroll hide/show menu
$(window).scroll(function() {
  if (!$('nav').hasClass('expanded')) {
})

Inside the else {} we need to calculate if the user scrolled past the navigation’s height, if they scrolled past the detachPoint, if they’re scrolling up or down, how fast they’re scrolling, and if they are at the bottom of the site (we’ll show navigation again):

var currentScroll = $(this).scrollTop(), // gets current scroll position
    scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling

// if scrolled past menu
if (currentScroll > menuOffset) {
  // if scrolled past detach point add class to fix menu
  if (currentScroll > detachPoint) {
    if (!$('nav').hasClass('detached'))
      $('nav').addClass('detached');
  }

  // if scrolling faster than hideShowOffset hide/show menu
  if (scrollDifference >= hideShowOffset) {
    if (currentScroll > previousScroll) {
      // scrolling down; hide menu
      if (!$('nav').hasClass('invisible'))
        $('nav').addClass('invisible');
    } else {
      // scrolling up; show menu
      if ($('nav').hasClass('invisible'))
        $('nav').removeClass('invisible');
    }
  }
} else {
  // only remove “detached” class if user is at the top of document (menu jump fix)
  if (currentScroll <= 0){
    $('nav').removeClass();
  }
}

// if user is at the bottom of document show menu
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
  $('nav').removeClass('invisible');
}

// replace previous scroll position with new one
previousScroll = currentScroll;

Next we need a function to check if we’re showing or hiding the dropdown of the navigation:

// checks if navigation’s popover is shown
function showHideNav() {
  if ($('nav').hasClass('expanded')) {
    hideNav();
  } else {
    showNav();
  }
}

Next we create functions to show or hide the navigation dropdown. We a add class to the navigation, another class to the content (to blur it), and a class to the body in order to disable scrolling of the content whilst the navigation’s dropdown is shown. We add a delay to this because of Firefox, when the class is added, the dropdown animation is not shown.

Lastly, you should be able to navigate with the TAB key on your keyboard. We don’t want the user to select the links with the TAB key when the navigation is hidden:

// shows the navigation’s popover
function showNav() {
  $('nav').removeClass('invisible').addClass('expanded');
  $('#container').addClass('blurred');
  window.setTimeout(function(){$('body').addClass('no_scroll');}, 200); // Firefox hack. Hides scrollbar as soon as menu animation is done
  $('#navigation a').attr('tabindex', ''); // links inside navigation should be TAB selectable
}

// hides the navigation’s popover
function hideNav() {
  $('#container').removeClass('blurred');
  window.setTimeout(function(){$('body').removeClass();}, 10); // allow animations to start before removing class (Firefox)
  $('nav').removeClass('expanded');
  $('#navigation a').attr('tabindex', '-1'); // links inside hidden navigation should not be TAB selectable
  $('.icon').blur(); // deselect icon when navigation is hidden
}

Now we just need to define when to show the dropdown and when to hide it (clicking/tapping anywhere outside link area). To disable hiding the navigation when you click/tap inside the link area (say you select some text), we need to stopPropagation():

// shows/hides navigation’s popover if class "expanded"
$('nav').on('click touchstart', function(event) {
  showHideNav();
  event.preventDefault();
})

// clicking anywhere inside navigation or heading won’t close navigation’s popover
$('#navigation').on('click touchstart', function(event){
    event.stopPropagation();
})

Lastly, we add the possibility to navigate with the keyboard. If the menu icon is focused and you press Enter/Space then we show the navigation’s dropdown. If you press Esc or M we do the same thing.

// keyboard shortcuts
$('body').keydown(function(e) {
  // menu accessible via TAB as well
  if ($("nav .icon").is(":focus")) {
    // if ENTER/SPACE show/hide menu
    if (e.keyCode === 13 || e.keyCode === 32) {
      showHideNav();
      e.preventDefault();
    }
  }

  // if ESC show/hide menu
  if (e.keyCode === 27 || e.keyCode === 77) {
    showHideNav();
    e.preventDefault();
  }
})

Step 3 CSS

I won’t go too deep into styling the navigation. You can browse through the CSS code on GitHub. The most important styles you need are for the three states of the navigation: invisible, detached, and expanded.

nav {
  color: #333;
  position: absolute;
  top: 0;
  width: 100%;
  height: 46px;
  padding-top: 8px;
  right: 0;
  z-index: 1000;
  cursor: pointer;
  overflow: hidden;
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  -webkit-transition: -webkit-transform .4s, height .3s, background .4s;
  -moz-transition: -moz-transform .4s, height .3s, background .4s;
  transition: transform .4s, height .3s, background .4s;
}

/* when hidden it goes up */
nav.invisible {
  -webkit-transform: translate(0,-64px);
  -moz-transform: translate(0,-64px);
  -o-transform: translate(0,-64px);
  transform: translate(0,-64px);
  -webkit-transition: -webkit-transform .2s;
  -moz-transition: -moz-transform .2s;
  -o-transition: -o-transform .2s;
  transition: transform .2s;
  opacity: 0;
}

/* when shown & detached position is fixed */
nav.detached {
  position: fixed;
  background: rgba(255,255,255,.9);
  -webkit-transition: -webkit-transform .3s, height .3s, background .4s, opacity .3s;
  -moz-transition: -moz-transform .3s, height .3s, background .4s, opacity .3s;
  -o-transition: -o-transform .3s, height .3s, background .4s, opacity .3s;
  transition: transform .3s, height .3s, background .4s, opacity .3s;
}

/* increases menu width & height */
nav.expanded {
  width: 100%;
  height: 100%;
  position: fixed;
  cursor: default;
  background: rgba(255,255,255,.85);
}

/* positions navigation content */
#navigation {
  -webkit-transform: translate(0,-700px);
  -moz-transform: translate(0,-700px);
  -o-transform: translate(0,-700px);
  transform: translate(0,-700px);
  opacity: 0;
  padding-top: 2em;
  text-align: center;
  -webkit-transition: -webkit-transform .15s, opacity .7s;
  -moz-transition: -moz-transform .15s, opacity .7s;
  -o-transition: -o-transform .15s, opacity .7s;
  transition: transform .15s, opacity .7s;
}

/* shows navigation */
nav.expanded #navigation {
  -webkit-transform: translate(0,0);
  -moz-transform: translate(0,0);
  -o-transform: translate(0,0);
  transform: translate(0,0);
  opacity: 1;
}

Find the rest of the CSS code on GitHub.

Conclusion

It’s fairly straightforward to create a navigation like Teehan+Lax have. Where you need to pay attention is on the timing of the animations. We don’t want to annoy the user, rather delight them and improve their experience.

Design for the future, not the past 14 Aug 2013 4:00 PM (11 years ago)

In the summer of 2013 I visited my birthplace, Romania. I rented a 2012 Dacia Logan (Dacia cars are made by Romanians), because it was the cheapest car available. I hated it. There were hundreds of usability flaws, mainly with the positioning of the buttons. One that stuck out was the car’s horn which is not on the steering wheel but to the left of the steering wheel as a button, which you have to push in, located on the tip of the light switch barrel.

When I confessed this frustration to my father, he said it’s because Dacia cars have always had the horn in that position, since the first models back in 1969.

So in order to not alienate their long time loyal users, Dacia, decided to stick with that odd button placement, not adapting to modern standards, thus annoying, even crippling, new users by having them search for an important functionality of the car.

Designing for the past

The more time you spend designing/coding websites to look good on old browsers, the less time you spend coming up with ways of improving and innovating existing concepts. You’re not pushing the boundaries, you’re not building on top of technology, you’re not creating unique, original, experiences.

I used to care a lot about accessibility and spend hours making my website look good on old versions of Internet Explorer because that would make my site accessible, therefore experienced by as many users as possible. By spending time on old browser compatibility issues it made me a good designer, a caring designer. That’s what I thought. After all, to what good is a website with super heavy, cutting edge, CSS 3 animations if no one’s gonna browse it, right?

So I didn’t spend time designing/coding my site for the future, but rather I spent much time fixing it for the past. Wanna know how it looked in the end? Dated. Archaic. Old. It featured a mediocre design, and because I had created it, I was its mediocre designer. It pushed no boundaries, it didn’t innovate, it didn’t push the web forward, it stirred no emotion amongst users. Nowadays, I define these websites/apps/services/devices as “meh”.

People ask me why I don’t own an Android device. I’m technically a geek, so all the customisations and options available on Android should make me happy. Yet two of the reasons I hate Android is their UI inconsistency and inability to innovate on the user experience. Even though Android phones pack a 1.6 GHz quadcore processor, the apps—you know, the things I use to interact with the phone—still look ugly and the animations feel dated; they look old. That’s partially due to Android’s fragmented ecosystem and the slow new OS adoption rate. Apple boasts with the fact that most of its users are using the latest version of iOS. And that’s good, because it allows iOS developers and designers to use the latest technology and design for the future, by knowing they won’t have to support older versions of iOS for long.

At my University we used IE 6 to browse and build websites, Firefox was a commodity, but updating Internet Explorer on all the lab computers would have been very consuming. I get that not everyone has the possibility, or preference, to switch to a better browser, purchase the newest laptop, use the latest OS, keep up with the fast pace of change. In the end, to each their own. But refusing, or being unable, to upgrade revokes your right to expect from me to keep designing for your old OS.

An experiment

Let’s try a hypothetical experiment: for one month, somehow, every website will render unusable for Internet Explorer 9 users and below.

Certainly, most users will be pissed, sales will drop, angry emails will follow, but eventually do you know what would happen at the end of that month? Everyone would have switched from < IE 9 to a better browser. Because our tools, in our case browser, are only as good as what you create with them, in our case view websites.

Designing for the future

I prefer to spend my limited time on this planet designing for the future, on the cutting edge, pushing the limits, and improving my industry.

Am I a lazy designer for not trying to fit old versions in and for not using CSS hacks to make websites accessible to older browsers? No. I could argue that you’re the lazy one. Because you don’t try to come up with new, undiscovered ways of innovating in your industry. You’re not utilising existing technology to its full potential. You’re making one step forward, two steps back.

I chose to design for the future, today. Because that’s the place where change happens. That’s where progress is made. That’s where our future is created. Today’s new, cutting edge, becomes tomorrow’s standard. So if you wish, feel free to categorise me as a future—sensitive designer.

A proposition

Rather than spending time designing for the past, where many users are, and trying to fit the past in the present I’d try something else. I’d try to come up with ways future users won’t get stuck in the past. Things like making it easy for users to upgrade and update—maybe do it automatically, and simplifying the transition phase. Humans tend to hate change. I would still be stuck with Google Chrome 20 if it wasn’t for their auto-updating mechanism.

Be grateful

My sister came up to me the other day with something along the lines of “being grateful is the best thing you can do in this world”, quote she read in some book similar to “The Secret”. I responded with:

Being grateful is the biggest enemy of progress.

If I were grateful because I’m breathing today I would do nothing all day; breathing is enough. I wouldn’t try to improve, I wouldn’t be curious, I wouldn’t try learn stuff or practice to become better. Our civilisation wouldn’t have reached the current level. We wouldn’t have invented the wheel, walking is adequate; it’s way too difficult to come up with ways to travel faster than walking, using a wooden circle. The Pyramids wouldn’t have been built; erecting buildings in triangular shape isn’t standardised, let’s stick with squares. We wouldn’t have electricity, computers, a mouse, the Internet, Photoshop, Google Chrome, touch screens, 12hr laptop battery life, 1080p mobile screens, NFC, wireless charging, and so on.

So you can either join me and help move the web forward, design for the future, be an inventor, an early adopter, a future-sensitive designer, or go back to fixing IE bugs, and spending more time in IE than you’d like to admit.

Designing the experience 1 Jul 2013 4:00 PM (11 years ago)

It doesn’t matter if you have a beautifully designed button in the wrong place—it will frustrate the user and curse your decision of placing the button there. It is important to think how the user will experience that button, interface, website, product, and in what context.

Minimise

Once you have identified a problem and what you want your product to do, you have to start thinking about the user experience. The user won’t just be staring at the beautiful product, they’ll also interact with it.

So think specifically about every product’s element and interaction with it. Is that element necessary? If it’s not, then remove it. Question everything, even the most trivial stuff. How the user will move (user flow) from one page to the next. What content will go on each page (copywriting). In more general terms: how your app, website, or product will work. You have to sweat the small stuff.

Delight the user

The end goal is to solve the problem that the user has but also provide a delightful, memorable experience from this process. Ask yourself how useful is your proposed design? How usable is your proposed design? Does it delight the user and makes the product memorable? Does it take too much time to load the interface? Refactor your code to make your app faster, more responsive. Users will be thankful.

Think about how your product works. Does it work well? Why? That’s just your opinion. Ask someone else.

Test everything

Don’t punish the user for any mistakes they might make. It’s your job to help me avoid making mistakes. Errors are part of the product and you should’ve spotted them during testing. Do you recall the cell reception problem iPhones had when you were holding the phone in a certain way? They said we were holding it wrong. No, Apple designed it wrong.

See, whenever you have the user interacting with a product, they are free to abuse it in any way they see fit. It’s your job to take into account all the different ways your product can be used. So you have to test everything. Once you are done with testing, analyse the results and make improvements.

Design empty states

For apps and websites an important part often forgotten are the states of the app/website. These states are still part of the user experience, so don’t forget them. Design the initial state (first-time user) of the app, logged in state, the empty state, and any error states—though you should avoid showing errors altogether.

Guide the user

People like to be guided, i.e. told what to do. A compelling experience guides the user through the product. For example, one of the most recent memorable walkthroughs that I experienced was in Vine application:

Vine shows you an interactive tutorial how to record your first Vine, and once you are done with the walkthrough, the video you recorded is ready to be published. They guide the user through these different stages (recording, posting, browsing), seamlessly. Brilliant.

Don’t annoy the user

Go easy with guiding the user, however. There’s a thin line between informing the user and showing a too detailed walkthrough of the product. If you cross it, you will annoy the user, and ruin their experience. Most users, when they see a new interface, they want to play with it. They want to click stuff, open windows, try to break the software, etc. Give them this flexibility by allowing them to skip your tutorial and come back to it later.

Provide visual cues

Think how Apple packages their products. They don’t have instructions showing you how to lift the instructions booklet, but you know how to do it because of the visual cues.

The same goes for interfaces. Provide the user with visuals which clearly indicate that a button is clickable or there is a drop-down menu for that option. The small stuff add up and make an experience good or bad.

Tell a story

I don’t mean you should come up with a story similar to Red Riding Hood. Have your ideals, vision, concept, reflect in your products and the process of making them. If you are into saving Earth, and minimising waste, you would choose a biodegradable element over plastic for the material of your product. Similarly, if you’re concerned about accessibility, you would have strong contrast between text and background—because it’s easier to read, and never use Helvetica Neue Light for interface text—because it’s difficult to read.

Express the things you value as an individual and incorporate them in your brand, product, website, app. This will distinguish you from the competition and create a unique user experience by fascinating the user with a small insight into your world.

“Design is not just what it looks like and feels like. Design is how it works” — Steve Jobs

Creative freedom 24 Jun 2013 4:00 PM (11 years ago)

Designers are creative people. We are messy. I’m not talking about your design process. You might have a factory-like process, be very organised, note everything in your Moleskine notebook, draw perfect wireframes, keep your layers organised, and stuff like that. This depends on the character of each person. But that’s not how ideas are formed.

Ideas are fragile

Ideas are formed from small sparks that can burst from anything. Ideas can morph, at any time, into any new idea, and can be easily forgotten. In their early stage, ideas are very fragile. Rather than rejecting them from the get go, embrace them. Give them time to grow and develop. Try them out and see if they stick.

I love what companies are doing nowadays, giving freedom to their employees to try stuff, like work out of the office, embrace new technology, organise hackathons¹, and so on.

This creates a stimulating environment, where the person can be most creative in. If you’re struggling to create whilst you’re at the office, and you are more creative at home, by all means, work from home.

Create a stimulating environment

In order to be creative you have to stimulate the mind and embrace new ideas. I’m not most creative when under external pressure, by a client or time. I tend to stick to the basics/default/usual, and certainly don’t wander exploring stuff and trying to come up with new ideas. But don’t get me wrong, deadlines are good—that’s how you get stuff done.

Be open, try new things, test new ideas, and allow yourself creative freedom. Ask the question “What if?”. Pick a different colour palette, use a not-so-popular font, design with a different style, try a new drawing technique, give that new design app a go, experiment with stuff!

Burnout 20 Jun 2013 4:00 PM (11 years ago)

All work and no play makes Jack a dull boy.

You know that feeling when you’ve been working a long time on something and you get burned out. You don’t have the energy to keep going, and you need a break. Some say that as long as you work normal hours, and not push yourself you’ll be fine.

Beginners beware

Here’s the thing though. In the beginning, when you’re starting out, you need to work your ass off. I don’t condone workaholism but you need to burn the midnight oil and work long hours, in order to improve your skills and become good.

It’s only by going through a volume of work that you will close that gap and your work will be as good as your ambitions.

Moreover, I don’t consider designing to be work that I can switch off when I go home. So in a sense I’m not a workaholic, I just design a lot. And you should feel the same, too. It’s fine if you have a boring 9 to 5 job, that pays the rent, and you can shut it off when you get home. But whatever you really want do with your life—your calling—shouldn’t feel like work.

Avoid the burns

But I feel you. I have experienced this burnout. To solve this issue without going AWOL, you just have to adjust your design process a bit. For example you can switch from designing desktop websites to designing mobile websites for a while. Keep doing that, until you get that itch to start again and you are fit to get back on the horse.

Another solution is to alternate between other creative fields; for me it’s photography and video. At the end of the day I’m still being productive and seizing the day. I’m still creating.

Creating is a state I’m constantly in. And you can’t burnout a state. You can’t say “I’m burned out from breathing too much”…

Inspiration 17 Jun 2013 4:00 PM (11 years ago)

“Inspiration is for amateurs—the rest of us just show up and get to work” - Chuck Close

I need my Muse

Relying your ability to create great work, and to sustain such, on a website that showcases cool designs daily, the movement of the stars, a beautiful song, whether it’s sunny or not, and in general, a “Muse”, is not a wise decision. You are handing over the reigns of your work—your life—to external, unpredictable factors that have nothing to do with you and your ability to create.

Where to find inspiration

Rather, find inspiration in yourself, through your work. Show up, do the work day-in day-out—it doesn’t matter if it’s crappy or good—do it. With time, it will become a habit, almost second nature, and you’ll be able to perform without this drug-like need to inject inspiration intravenously to get you started with creating.

That’s how the pros create stuff and ship them. No matter the weather—or other external sources—they show up, they’re present.

Stephen King published over fifty novels, wrote five non-fiction books, and nearly two hundred short stories. His body of work is astonishing. Imagine how much less he would have written if he would have waited to get inspired before picking up a pen.

Have discipline

Discipline is greater than inspiration or even motivation. Motivation only gets you pumped up to start something; it only gets you excited. But having that discipline of doing something every day at the exact time, will eventually transform into a habit. Habits are hard to break because of our mind’s tendency to avoid change and preference to do that same thing every day.

Therefore, searching for inspiration outside, in external sources, is not natural to us. Try finding inspiration from within, from the process of writing, or designing, or drawing, or singing. Embrace that blank Photoshop document, that moment when you take your first step towards a 5K run in the morning, the process that takes you from a rough sketch to a detailed drawing…

Let that be the fuel that keeps you creating and moving forward.

Doing the work 12 Jun 2013 4:00 PM (11 years ago)

Everything you’ve learned so far, won’t matter unless you pick up your pencil, your guitar, your mouse, and start doing the work. Period. You have to do the work because nobody else will do it for you.

You need to be disciplined, have a strong work ethic, and show up every day to do the thing you love. If you feel like skipping, and you don’t wake up in the middle of the night thinking “what if I did this?” and in the morning pursuing that crazy idea, then it’s not for you. Passion is the most important catalyst that fuels your drive and keeps you going.

Passion?

Passion can be a great motivator. But motivation only gets you pumped up to start something; it only gets you excited. Unless you are disciplined, committed, have strong habits, then you won’t be able to start the thing you’ve been dreaming of, and you’ll most certainly not be able to sustain or complete it.

Adding deadlines

I get stuff done by adding deadlines to things. I put myself on a deadline to finish that blog post by tonight, complete that project by Friday, deliver that website design in three weeks.

To-do list

Keep a list of things that need to be done. By writing them down, you’re setting them “in stone”—they’re not fragile ideas floating inside your head anymore. I’ve discovered that when I have a “to-do” list, I get more done. And I’m not using fancy software. A simple .txt or .md file synced to Dropbox (so I can access it from other devices), filled with small actions (verbs). Once I’ve completed something, I add “###” to it. For example:

design checkout pages
###upload retina tutorial video
write tutorial blog post

Improving your craft

If you’re starting out as a designer, and you’re looking to improve your craft, practice by copying works of designers you look up to. That’s the best way to learn. Keep those copies to yourself though, don’t post them online and claim ownership.

If you’re an established designer and have an established style, search for concepts or ideas, and try to recreate them using your style. For example Dan Matutina took classic rivals like Batman vs Joker, Tom vs Jerry, and illustrated them as coexisting together in the shape of a heart.

Or José Guizar who takes long walks around New York and illustrates interesting windows he sees.

We all started from scratch

Keep in mind that every single kick-ass designer you look up to, started from scratch, from zero. They became kick-ass designers, by spending less time consuming content (TV, Music, articles, video games) and going out, and more time creating stuff and improving their craft.

And you create stuff and get shit done by committing yourself to doing at least one thing every single day. Because after all:

“We are what we repeatedly do. Excellence, then, is not an act, but a habit.” - Aristotle

The experience should justify design aesthetics 10 Jun 2013 4:00 PM (11 years ago)

Whether you are an advocate of flat design or skeuomorphic design, you must acknowledge something: these are aesthetics. They depict how something looks. But design is more fundamental. It goes beyond flat vs skeuomorphic, golden ratios, “clean” UI, Pantone colour palette, 960 grids, and so on. Design is a form of problem solving. You can’t be following trends blindly, and adopting a certain aesthetic just because…

It’s difficult for me to show you how to design a compelling experience. It’s very subjective and it depends on what you want to achieve with the product. Does the product solve a problem? If no, then you should focus on coming up with a product that solves a problem or scratches your own itch.

Every design decision should be justified and traced back to the user experience and the goals of the product. For example, use a green colour for the button to show contrast and indicate a positive outcome from clicking the button, not because green is trendy.

Simplifying is not always the answer

Has the user experience been improved from simplifying the new Gmail interface, making it “cleaner” by hiding elements? Apparently not.

Imagine you’re from Mars, and in 2013 you’re visiting Earth for the first time. Someone shows you two iPhones, running different operating systems. Judging by the icons, which of the two would you think is more cool/modern/recent/stunning looking?

What is the purpose of an icon if not to present in a beautiful, detailed, graphical way the functionality of the app? I know what the app is, I can read its title—I just want a beautiful icon to accompany it and make me want to click it. Just because currently there is this trend of “flat design”, it doesn’t mean you have to stick pictograms on backgrounds with eye-popping gradients. That’s just kitch¹.

Think about the design aesthetics and how they improve or worsen the user experience. After all, a beautiful, trendy, golden ratio adherent, user interface that is difficult to use and navigate benefits no one.

Fuji X100S camera review 22 May 2013 4:00 PM (11 years ago)

I recently bought the Fujifilm X100S camera. I was on the lookout for a smaller camera as my Canon 5D MKII with L lenses setup and all the extra gear was slowing me down.

So far I like this camera a lot. There isn’t much difference in image quality from the 5D MKII, and at high ISO the X100S performs a lot better, as you’ll see below. I made a quick video review describing the positives/likes and the negatives/dislikes of the Fuji X100S.

For this short review, please assume that every aspect of the camera that I omit talking about is great (lens quality, build, EVF resolution, chromatic aberration, etc.). I didn’t have time to write a detailed review. For this reason, I post some links to more in-depth reviews at the bottom of this post.

All the photos taken with the X100S throughout this review have the Film Simulation setting set to “PRO Neg. Std”. This film simulation gives me the optimum contrast, retaining more detail in the file that can be used when post-processing the photos.

Watch the review video

Watch on Vimeo / Watch on YouTube

As you saw from the above video, most of the negatives are small things, nitpicks. But if Fuji can solve some of these issues (especially the video mode), it will become an all-round awesome camera.

Features I like about the Fuji X100S

1. Hybrid Viewfinder

It’s a combination of an optical viewfinder and electronic viewfinder, a screen laid over the viewfinder showing you the camera settings, active frame, horizon level, rule of thirds grid, focus points, etc. Not to be confused with the EVF (Electronic Viewfinder).

2. Horizon level

Using an accelerometer the camera can detect when it’s being held horizontally or not. No more imperfect horizon lines.

3. Manual focus assist (focus check)

When focusing manually, as soon as you touch the focus ring, it shows you a blown-up version of the image to help you with focusing.

4. Monitor sunlight mode

When you’re outside in bright sunlight, you can keep the “Q” button pressed and it increases the brightness of the screen.

5. Silent mode

The X100S not having a mirror means that its shutter is very silent (see video above for audio). You can take photos without getting noticed.

6. Highlight / Shadow Tone

The X100S allows you to individually control the contrast of the highlights and shadows of the image (prior to taking it).

7. In-camera ND filter

Fuji has installed a 3-stop ND filter on this camera. If you want to keep an open aperture of f/2 and slow shutter speed in bright sunlight, you can enable the ND filter to darken the image.

8. Motion panorama

With the Fuji X100S you can swipe from left to right to create a stunning panorama image. X100S does a very good job of stitching the images together and processing them very fast. In some cases (low-light environments) it fails even if you swipe slowly.

Features I dislike about the X100S

1. Battery

The battery life is really bad. I couldn’t get 200 shots (JPEG, no flash) on a single charge (original Fujifilm battery that came with camera). It has failed me twice and had to wait for the battery to charge. I’ve read on forums that the battery life sucks out of the box. Let’s hope it will improve with time.

Things you can do to improve the battery life is to disable the back screen, image previews, use only the optical viewfinder, OVF power save mode, auto power off.

I’ve ordered the next day two additional Fuji batteries.

2. Movie mode (no manual controls)

If you’re serious about shooting video the Fuji X100S might not be for you. You cannot manually control the shutter speed, aperture, ISO, when in video mode. This sucks big time. In addition to that, as of May 2013, you can only shoot 1080p in 60fps or 30fps. No 24fps? Come on Fuji…

I did a brief 1080p video test of the Fuji X100S you can see below:

Watch on Vimeo / Watch on YouTube

3. AF speed

People say the autofocus of the X100S has been improved over the old Fuji X100. It might have, but it’s still a bit slow. From my tests, I found out that in bright sunlight conditions it’s fast. I won’t say the AF is faster than the Canon 5D MKII because the X100S has a fixed focal length lens (less glass to move around), whereas on the 5D I had a zoom lens on (Canon 24-70 L USM).

But in low-light situations the X100S lags a bit (see video above). Furthermore, from a one day shoot, I got a few photos with missed focus. I’m thinking of using manual focus all the time since Fuji gives you so many options to help you focus. What’s more interesting is that in MF mode, if you press the AFL/AEL button, the X100S will auto focus.

4. Deleting images

When in single-image delete mode (there’s another mode for selecting many photos), if you press “OK” to confirm deletion, the image is deleted, and you’re taken to the next image, if you press “OK” again that image is also deleted. Simple thing, but I’ve deleted a few photos by mistake because of how the delete functionality works.

What I’d like is to make it harder to accidentally delete an image. On my 5D MKII you have to press “Delete” button again, to delete the next image. Pressing the “OK” button won’t delete the image.

5. Flash intensity settings

You can’t change the flash intensity by pressing the flash button. It shows you options to enable flash, disable it, make the camera’s flash a commander, or an external flash. You have to go in the main menu to change the intensity. Why not add intensity values next to the flash icons, in the quick flash menu?

6. Charger (% charged indicator)

I don’t know when the battery is fully charged, because the light of the charger turns green as soon as you plug the battery. Even if the battery is 0% charged, 50% charged or 100% charged, the light of the charger will always be green.

7. Micro USB port

The USB port of the X100S is even smaller than the regular micro-USB port. This means that all the micro USB cables which I have are not compatible. I hope I won’t lose the Fuji X100S USB cable.

8. Battery flap / Battery can be inserted wrong

I’m getting picky I know. The flap of the battery compartment keeps springing open. I’d prefer a more “hands-down” approach of me having to manoeuvre the flap however I want (5D MKII is more flexible).

Due to the design of the battery, it can be inserted both ways! There are instructions on how to insert the battery, but are located on the inside cover of the battery compartment (not easily observed).

The memory card insertion process took a few tries to learn how to insert it correctly. It’s like a plugging a USB cable; 50% of the time you’ll get it right.

9. ON / OFF switch

The power switch of the X100S is very sensitive and can be easily turned ON when moving the camera or when you place it in your bag.

10. Noise reduction

The noise reduction of the X100S is great. Until you reach ISO 6400. At this point the noise reduction applied is too strong for my taste, creating a soft image effect. You can fix this by going in the menu and reducing the intensity of the noise reduction [Menu>Noise reduction>LOW(-2)]. The photo you see above was with the noise reduction set at -1 setting.

Bonus: Tripod mount location

When you have a quick release plate attached to the X100S it’s impossible to change the battery or memory card without first taking it off. Small thing, but annoying.

These are the things I like and dislike about the Fuji X100S. Some of them are small annoyances that you might not even notice. But I have, and I’ve deducted points from the awesomeness of this camera. Some of the negative points can be fixed with a simple firmware update.

No camera review is complete without some pixel peeping. In the following section I’ll be comparing the Fuji X100S to the Canon 5D MKII in terms of ISO performance.

X100S VS 5D MKII (ISO performance)

The X100S wins by a big margin. In the X100S stills, you can observe above ISO 6400 the noise reduction getting applied and creating that soft look (negative point #10). Both cameras were on JPEG, manual settings, similar focal length (on Canon I used the Canon 24-70 f/2.8 L USM lens). No post-processing, straight from the camera.

More high ISO photos from the X100S at 100% crop for the pixel peepers. Straight from the camera, JPEG, no sharpening, no noise reduction or post-processing applied to these.

Fujifilm X100S real life test shoot

Enough with the straight out of the camera 100% crops. I always post-process my photographs, so let’s see how photos from the X100S look after I’ve processed them in Lightroom 4.

The photographs below were post-processed from original JPEG files, not RAW files. I shoot only RAW with my 5D MKII but I figured I’d try to shoot only JPEG with my X100S and see how it goes. The files are gorgeous, retaining enough shadow/highlight detail thus allowing me to push the processing a lot. So I’ll be sticking to JPEG.

Conclusion

This camera has made shooting fun for me again. I do enjoy taking photographs, but with the 5D MKII it’s a process. When I’m shooting, I can’t be doing anything else. When I’m moving the 5D MKII to take a shot, people around me become camera-aware. With the X100S it’s more candid, basic, more snapshot-like, dare I say “amateur-ish”. I turn it ON, take a photo, done; I continue doing the activity I was doing before. Plus I take the camera everywhere with me because it’s so small and light. Bonus points is the retro look; people ask me if it’s a Leica.

If this is your first camera, it’s an awesome camera to have and I recommended it for you. The price point is falling quickly for this camera (bought mine new, on 16 May 2013, for £750/$1127/€878).

The Fujifilm X100S is not that much different from the pro-dSLRs in terms of performance. In terms of looks, it’s certainly better looking and more interesting. The small size of the X100s is also a win.

If I was picking up photography today, I’d avoid dSLRs. The compact, mirrorless, cameras (Sony RX1, Fuji X Series (X100s, X-E1, X-Pro1), Canon EOS M) are certainly catching up to the dSLRs. In case I also needed a camera to use in commercials (pixels, more pixels!), I’d pick a medium format camera like a Phase One 645DF+ with IQ280 back (80 Megapixels), or a Hasselblad H4D-60 (60 Megapixels).

This camera review was brief, mostly outlining the things I like and dislike about the Fuji X100S. Here are a few more detailed reviews of the X100S:

1. Fuji x100s Follow Up Review :: Life Without DSLRs
2. Steve Huff reviews the X100S
3. Steve Huff compares the X100S to Leica M and Sony RX1
4. Detailed Fujifilm X100S camera review by Mark Goldstein
5. DigitalRev TV reviews the X100S

Standing out from the digital crowd 28 Mar 2013 4:00 PM (12 years ago)

Have you noticed? The most popular websites nowadays be it Facebook, Twitter, YouTube, Instagram, revolve around a feed. A feed consisting of status updates, photos, videos, posts, what have you. Alongside that content you also find your name, and your avatar. That small square arrangement of pixels is crucial in identifying your post from the one above or below you. Fail to grab the attention of the reader, with your small avatar, and you’re lost in the background. What benefit does that new follower bring you, if they “can’t see” your post in their feed?

We don’t read, we scan

Even as you’re reading this line, your eyes fixate on one word and then they “jump” to the next three-four words (depends on how fast you read; fast readers use their peripheral vision and fixate fewer times per line). In a feed, we tend to scan in an F-shape pattern. We start from the avatar (left-top) and then move on to read what the person has said.

Because it’s so easy for the reader to “skip you” and scroll down, thus neglecting your post, you have to make it interesting to the reader, so they will stop and accord you a few seconds. If what you say is worth or not their while, that’s another story.

We tend to scan a website, or a feed, vertically and we only stop to look at big and bold type (headings), bright colours (buttons), changes in layout (circled avatars), and faces (in particular: the inversed triangle formed by our eyes and nose). Then, if the post is interesting, or we respect/admire the person who posted it, we will read it. Only if we are compelled by what we’ve read, we will click the link.

Learning from advertising

It has been said that advertising should be used to reinforce a brand, not introduce it. McDonald’s doesn’t need to advertise or become an official sponsor of anything. But by advertising their brand, you are reminded of the pleasure you get from eating their delicious Bic Mac or French fries, and you start craving for one.

The same principle can be applied in the digital cyberspace. If you have a memorable avatar, whenever you post something, you tap into the long-term memory of the reader who recognises your avatar. In time, they will start reading your posts instinctively.

Congratulations! You just became a drug. That is until you post something offensive or contradictory to the reader’s opinion…

Why I made my avatar yellow

So far we’ve learned that big type, bright colours, and faces attract our attention. Let’s take it a step further. Is having a face enough to attract attention?

Websites, in order to be readable, tend to have a white/grey background. That means any avatar with white/grey colour will be blended, at first, with the background. You see, our brain processes images similar to when you load a progressive JPG image. It starts out blurry and as milliseconds pass, the images gets clearer, and we start identifying the finer details.

A few months ago there was a trend with avatars, to display your avatar in black and white (I did it too). The problem is that your B&W avatar gets mixed up in my memory with the other B&W avatars, because they look too similar, and I can’t differentiate yours. See the difference, in the image below?

Top tier: @soffes, @salleedesign, @_dte, @MengTo, @sican. Bottom tier: @jessicahische, @paul_irish, @repponen, @drewwilson, @sican.

That’s why I made my avatar yellow.

Tips for an attention-grabbing avatar

• Pick a unique colour to represent you. Include it somehow in your avatar/profile picture.
• Show your face (logos are impersonal, but I understand why you might use them).
• Be expressive. Smile or make a crazy face.
• Zoom in in order for the avatar to include only your face. That sunset behind you is not unique.
• Have a Distraction free background. Separate yourself from the background by adding contrast; don’t use similar tones for the skin/shirt and background.
• Be memorable/entertaining.

Consistency

Be consistent with your avatar. In my opinion it’s the most important marketing tool you have today. Don’t change your avatar/profile picture frequently. Also, your avatar should be the same across all sites, apps, and social networks. One avatar to rule them all. Doing so, you tap in the long-term memory of your followers and people can instantly recognise you.

Even if it’s “the dude with the face of a Minion”, i.e. me.

Must-have OS X apps for designers and developers 26 Mar 2013 4:00 PM (12 years ago)

Yep, it’s the post every Mac user has to publish at least once in their lifetime. But hear me out now; If you’re a designer or developer, you might this list useful.

Efficiency is the root of all evil

I like efficiency. It gives me a sense of clarity and makes me productive. An efficient writer will write more in less time, an efficient driver will get better gas mileage, an efficient athlete will train better for a race.

It takes time to learn how to be efficient. Each person is different—you have to try stuff to see if they work for you, and fit your work style.

I want to show you how I roll.

Interface

On my MacBook Air 13”, I’ve hid my dock, to gain some vertical space for apps (yes, I know I can run apps in fullscreen). I wish Apple would’ve released a new Thunderbolt display with the release of the new Mac Pro…

I run a few apps in fullscreen: SublimeText, Spotify, and Mail. I write code in fullscreen SublimeText, then swipe to the right, and refresh the browser to see the changes (using Mixture for auto refresh).

When working with non-fullscreen apps like Finder, Photoshop, etc., I know that a swipe to the left is SublimeText; two swipes is Spotify, and so on. It’s faster that pressing Cmd + Tab 12 times (depending on the number of apps you have running) to find SublimeText from the list, for example.

It’s faster to start apps using the spotlight shortcut [Cmd + Space], and type in the first few letters of the app. But if I don’t know/remember the app, I find it much faster to pinch with four fingers and find it from the menu.

Categorisation

I have all my apps divided into four categories/folders:

1. “Apple” (Dictionary, FaceTime, Photobooth, etc.).
2. “Other” (Keychain Access, TimeMachine, Disk Utility, etc.).
3. “Utilities”.
4. “Apps” (not inside a folder).

Apps (In order of usage)

Dropbox for storage/backup. I almost forgot to add it to the list! That’s what I love about it: it’s unobtrusive. It’s just there, always working perfectly. It has saved me many times; I permanently deleted a file, only to remember that I need it. If I had it synced with Dropbox, I just restore it (deleted files are kept for 30 days). Another use is doing website testing on external devices. I add the site to the “Public” folder, and load the URL on the browser of my iPad, iPhone, etc. I wrote moving my websites to Dropbox.

Google Chrome for browsing. Until recently, I was using Safari. The Chrome DevTools made me switch forever.

SublimeText for coding. I spend my life in it, so I might as well make it look pretty. Download my User settings. For CSS coding I use SASS + Compass.

Adobe CS suite (Photoshop, Illustrator, After Effects) for design, photography, and videos. A no brainer. Lately, I’ve been experimenting with Sketch for design work. I’m not ready to replace Photoshop, yet.

Mail for reading emails. Far from perfect, and I want an alternative besides Sparrow. Can’t wait for dotMail to come out.

Spotify for listening to music. Or if you want an alternative try Rdio or Grooveshark.

Skype for chatting/video calls. Use this chat style to make your chatroom prettier.

Tower for pushing code to GitHub. Makes Git simple. Say goodbye to the command line. If you still use FTP, a great app is Transmit.

Mixture for web development. It allows me to quickly create a website using any boilerplate (fetches latest version automatically), it converts my SASS into CSS, it auto reloads the website and creates a local server, it can push to GitHub, and many more. If you want just an app for live reloading of website use LiveReload. Alternative Prepros.

Byword for writing. A minimal app that inspires you to write. Alternatives are iA Writer or SublimeText.

VLC for watching videos.

Transmission for torrenting. I wouldn’t be where I am without torrents, and in general, the Internet. I don’t support piracy, but I do support knowledge. Having paid for a higher education that taught me only a couple of useful things, I now value free knowledge (and try to give some, through this blog). This is a topic for another blog post, though…

ImageOptim for reducing file size of graphics. It works like magic, you drag and drop your images, and ImageOptim reduces their file size. To reduce the file size of transparent PNG-24 assets, you can use ImageAlpha. It converts the PNG-24 image to an 8 bit PNG with a full alpha channel.

LiveView for broadcasting your screen to an iOS device. Useful for designers developing graphics for iOS devices. Supports retina as well. You can also control the cursor of your Mac from the iOS device, useful when doing design prototypes or presentations. Requires Live View installed on the iOS device as well. Alternative app: Skala Preview.

Reflector for mirroring the iOS device’s screen onto a Mac. Useful for demos, presentations, tutorials, or product videos. The product video demo I did for HopIn was created with this app.

ScreenFlow for recording your screen. The best app for this job. The tutorial I did to show you how to make your sites pretty on retina was created with this app.

Induction for connecting to databases. I suck at Terminal and the command line. Induction lets me connect and browse databases easily.

Utilities (In order of usage)

I define utilities as small apps, that run in the background and help you with specific tasks, or make your life easier.

Paragon NTFS for Mac for connecting NTFS drives to OS X. It allows you to connect your NTFS drives to your Mac without formatting them in a weird format readable only by Macs. Thanks to this, I can still use my external drives on other Operating Systems.

F.lux turns your Mac screen yellow. This app changes your screen’s colour to look like the room you’re in. Doing that allows me to work more by staying up late, and staring at my screen longer without hurting my eyes. It might look weird at first, but once you get used to it, your eyes will love it.

Brightness Slider for reducing screen brightness. When you can’t reduce the brightness of your screen any lower, you can use this app to lower it even more. Especially during the night, your eyes will thank you.

Moom for managing app windows. You can also assign keyboard shortcuts for frequently used app screen locations.

Slicy for exporting assets from Photoshop. Drag and drop your PSD, and assets are created automatically. It also generates @2x from 1x assets, and vice versa. Free alternative: Cut&Slice me. If you use the latest Adobe Photoshop CC version, it generates these assets for you without a plugin.

The Unarchiver for extracting and compressing files. Much better than the Archive Utility app.

Icon Slate for exporting icons. I use it mostly for creating favicons that have embedded both retina and non-retina versions into one file (“favicon.ico”).

TextExpander for keyboard shortcuts and snippets. With this app you create snippets to help you code faster, and to make you more productive. You can add snippets for your email signature, or your address, or your phone number. It has potential, but I have a terrible memory, so I tend to forget my snippets and I have to search for the snippet code that I assigned. Not very efficient. Download some cool snippets.

Canon EOS Utility for remote access to camera. Connect your dSLR camera to your Mac and operate it from a distance. I used it in the past as a high quality live webcam (1080p recording). I had Skype recording my screen, which was occupied by the Canon EOS Utility app, that was showing live video from the camera.

CrossOver for running Windows apps. Instead of using Parallels to install Windows on your Mac, and occupy precious disk space, it’s better to simply run Windows apps (.exe) with this very cool app.

iExplorer for transferring files between iOS devices. It allows you to browser or transfer music, videos, photos, and tinker with the device’s folders (useful for theming your iOS device).

Monolingual for removing language packs and freeing disk space. Especially if you’re on an Air, disk space is precious. Use this app to remove all the language resources your Mac came with. I left only three languages (English, Greek, Romanian). I don’t remember how much space it has saved me, but I think it was around 2-3 GB.

CleanMyMac for freeing hard drive space. Bonus feature is uninstalling applications by moving them to the trash.

Other

To make designing easier, I use some cool plugins for Photoshop:

• GuideGuide for making grids.
• Kuler for picking colours and palettes. To enable it, in Photoshop, go to Window > Extension > Kuler. It should be there. Online version.
• WebZap for creating layouts, mockups, editing many text fields.
• DevRocket for faster designing and exporting iOS UI elements.
• CSSHat for turning layer styles into CSS code.
• Bjango Photoshop Actions & Workflows that speed up the design process.

To make developing websites easier, I use some cool extensions for Google Chrome:

• WhatFont for identifying fonts on websites.
• User-Agent Switcher to evaluate how websites are rendered on other devices (Chrome DevTools also has this feature, but it’s hidden in the settings).
• PageSpeed Insights for analyzing and improving website performance.
• Window Resizer for resizing the browser window to specific resolutions.
• Hola for unblocking sites and country-specific services, like Spotify.
• Rather for improving my browsing experience by replacing certain words, like “Justin Bieber”, with others.
• AdBlock for blocking site ads and annoying popups.
• Awesome Color Picker for copying the HEX colour of a website directly to clipboard.

Web apps I use:

• FreshBooks for invoicing clients.
• IcoMoon for creating icon web fonts from SVG icons.
• DataURL for converting images into Base64 code (saving one HTTP request).
• InVision for creating high-fidelity desktop prototypes from images.
• Flinto for creating iOS prototypes from images.

On top of that, I even learned to type using a more efficient keyboard layout called Colemak. With the Colemak layout, your fingers move 2.2x less than with a QWERTY keyboard layout. It also supports multilingual, and allows you to type weird symbols (like: €, â, ñ, etc.) without switching languages. The negative aspect is that you have to invest some time to learn the layout.

Be wary of small improvements that lead to even smaller gains. They’re not worthy. Apply the Pareto principle which states that 80% of the effects should come from 20% of the actions. Go forth and make stuff!

Design a pixel-perfect website 25 Mar 2013 4:00 PM (12 years ago)

Pixel perfection. Every designer worth its salt strives to make its designs pixel perfect. Unless they’re designing for the web. The web is diverse, fluid, overwhelming, even chaotic. You can browse the web from a tablet, a mobile, on Apple iOS 4 or Android Ice Cream Sandwich, a retina device, an old monitor, using Google Chrome, or Internet Explorer, and so on.

TL;DR: Pixel perfection on the web is nearly impossible.

Yet I challenged myself to try and do it, by redesigning this website.

Pick a grid

I chose to work on a 32px grid. If you’re using Photoshop, go to Preferences [Cmd + K] > Guides, Grids & Slices, and add a Gridline every 32 pixels with Subdivision of 1. To view the grid, go to View > Show > Grid [Cmd + ‘].

Stick to the grid. Every vector icon, image, text, container, needs to adhere to the 32 pixels. To help you out, Photoshop can snap your elements to the grid. To enable it go to View > Snap To, make sure Grid is checked, and enable by going to View > Snap [Shift + Cmd + ;].

When it’s time to code your pixel-perfect website, you can create a 32px x 32px transparent PNG pattern that you can use as a background, to help you out. Create two 1px lines and place them on top and left side of the pattern (example).

A grid of 32px until it isn’t

If you clicked to study this website on the grid, and your browser screen is wider than 1280px, you might have observed that the text doesn’t fit vertically the 32px lines. That’s because the font size of the text is bigger, meaning that the line height is bigger than 32px. Resize your browser a bit to see text fall into place. The same applies to mobile devices (font size is smaller).

Compose to a vertical rhythm

The web consists mostly of text and cat pictures. Leaving cat pictures aside, text needs to be readable. Vertical rhythm refers to the spacing and arrangement of text as the reader descends the page. It is contributed to by three factors: font size, line height and margin or padding.

To improve readability, keep your text length between 50 and 75 characters per line. For body text, the line height should be 1.6x the font size. So for a 20px font size, the line height would be 32px (our grid). Read more on how to compose to a vertical rhythm.

When you measure vertical height with text, always exclude ascenders and descenders, because each type is different. Measure everything from the X-height, which is the height of the body, minus ascenders and descenders. This is equal to the height of the lowercase ‘x’, hence its name.

Retina revolution

I don’t own a retina device. I almost bought one in September 2012, when on the lookout for a new laptop (went for a 13” Air). Retina is the future, and in order to future-proof your pixel-perfect website you need to use SVG (Scalable Vector Graphics) when exporting your graphics. By using SVG, you can scale the image infinitely without losing quality and pixelating/blurring the graphic. I wrote in a previous post how to make your website pretty for retina devices.

There is a rule when exporting assets. You use JPG for photographs, and PNG for graphics. By doing that you reduce the file size of the asset. That is because graphics usually consist of large blocks of colour that are displayed more efficiently with PNGs. I say scratch that; use SVG instead of PNG. SVG can reduce the file size even more than PNG.

To demonstrate, see the image before the image above? When exporting a:

• JPG at quality at 60, file size is: 126KB.
• PNG-8 with 16 colours, file size is: 30.43KB.
• SVG with embedded glyphs, file size is: 29KB.
• SVG with system fonts, file size is: 14KB.

In contrast, the image above is 12KB in PNG-8 and 20KB in SVG (embedded glyphs). But for 8KB more, I get to scale the image infinitely.

Did you know: Most images of this blog (and of this post) are SVGs.

Pixel-perfect icons

Creating pixel-perfect icons is not an automated process. In your Photoshop preferences, if you have Snap Vector tools to pixel grid enabled, you might need to disable it in some cases. By disabling this feature, you can move Vector shapes in increments smaller than 1px, the so-called “pixel hinting”. More on pixel hinting.

For production, you can export the icons as SVG and format them into a typeface (for easier scaling and embedding). There’s a cool app that helps you with that, called IcoMoon. That’s the app I used for all the icons you see on this site.

Developing the pixel perfect website

All is well inside Photoshop (or Sketch), but once you switch to the browser, all Hell breaks loose. Some prefer to design purely in the browser. I prefer to use a hybrid method.

It’s easier/faster for me to move elements inside Photoshop. Once I have a rough pixel-perfect layout, I switch to the browser and start coding it. In the browser, it’s not uncommon to change things around, especially if I’m doing responsive layouts. Oh, and I hate bootstraps and ready-made grids. I’m paranoid about my code and I want to know what every bit of code does what. I can make changes faster this way. Also, using a bootstrap doesn’t allow you to learn how to properly code CSS.

In order to develop a pixel perfect website, you need to know your CSS. I mean really know it. Perfect your CSS coding skills with Treehouse. Accept the fact that your code might get ugly for the sake of pixel perfection. Because you need that super fine control, it’s not uncommon to find code like:

.title {
  margin: 1px 0 0.55em;
}

And that’s ugly. But it works.

Another important tip is: do not round decimal places. Let the browser do the calculations. If we have a line height of 48px / 36px don’t do this:

h2 {
  line-height: 1.333; // [48 / 36 = 1.33333333]
}

Failure in doing so, will result in a not so pixel-perfect website.

Test on actual devices

Forget simulators. Ask your friend if you can borrow his Samsung Galaxy S4 to test your website. Go to your local Apple store and try out your website. Dust your old devices from the attic and test your website. Build a device lab. The more devices you test, the more pixel-perfect your website will be.

Pick your battles

Accept that you website won’t be pixel-perfect. I made this website pixel-perfect for Google Chrome, iPad, and iPhone, but I decided to not support IE 8. Unless you have an unlimited budget, you cannot make your website pixel-perfect in all browsers. Like I said in the beginning: the web is too diverse. Pick your battles and move on.

Making your website look pretty on retina devices 6 Feb 2013 3:00 PM (12 years ago)

I thought I’d mix it up a bit and instead of writing a tutorial, I decided to make a video screencast. In this video tutorial I’ll show you some modern practices on how to make your website look great on retina devices, such as an iPhone 5 or a retina MacBook Pro.

What you’ll learn

From this tutorial you’ll learn how to make your logos and icons infinitely scalable by exporting them as SVG (Scalable Vector Graphics) format. Next, we’ll link the SVG image to the HTML file and talk performance, and how to encode the image into data URL to save an HTTP request. Lastly, you will learn how to export @2x images and how to embed them in CSS with media queries. Finally, we’ll learn about some cool JavaScript plugins that help you with that. Check out the video:

Clarifications from the video (Spoiler Alert)

1. You can also copy the vector shape directly from Photoshop, paste it into Illustrator, and then export is as SVG. No need to save as PSD if you don’t want to.
2. The scripts that I mention may replace standard quality images with retina @2x images automatically, but only for the HTML side (img tag). For CSS images (background-image), the best way to target them is usign a media query. Unless you use LESS or SASS mixins for your CSS.
3. In the video I say that I want to target other devices with the CSS3 media query, yet use only a -webkit a vendor prefix. That’s because I didn’t finish the entire script. Grab it here: gist.github.com/alexcican/4726254.

Links from the video

DataURL creator
Slicy app
RetinaJS
Picturefill
Retina images

Displaying recent posts on Scriptogr.am 8 Jan 2013 3:00 PM (12 years ago)

In the previous design of this blog I used to show a list with my latest three articles. There is no option to do that in Scriptogr.am. People kept asking me how I did it and if I could share with them the script that shows the latest articles. When I responded that I do it manually—there’s no script I just go and edit the theme file every time—they were disappointed. But it keeps coming up in my Twitter feed. So I spent an hour last night writing a script that reads your blog’s RSS feed and shows the latest three posts.

Implications

Before we get started you should know that JavaScript has a same origin policy. What this means is that with JavaScript, you can’t read an external XML feed from Digg.com, for example, and show it on your website. A workaround is to create a PHP file that will act as a proxy, pull the external XML file on your server, and then parse that file in JavaScript. But we can’t run a PHP file on Scriptogr.am or Dropbox.

Thankfully, there’s an awesome thing called Google API. We’ll use the Google Loader to load the external feed’s XML file and then parse it in JavaScript. You can see the demo of this script at the bottom of this page.

Step 1 - RSS Feed

Find your Scriptogr.am RSS feed. It should be in this format:

http://scriptogr.am/USERNAME/feed/

Step 2 - Add script

From the Scriptogr.am dashboard, go to the Tools tab, and edit your HTML theme file. Go at the bottom of the file, before the end of the </body> tag, and add the script below:

Step 3 - Personalise script

The bits you have to edit are on line 8 and line 59. Replace bits of code from this line:

var feed = new google.feeds.Feed("http://scriptogr.am/sican/feed/");

with your feed URL from Step 1. Next, replace bits of code from this line:

link.href = link.href.replace("scriptogr.am/sican","blog.sicanstudios.com");

with your feed URL’s first name and your custom domain name. Basically this line of code finds the scriptogr.am/sican links in the feed and replaces them with my custom domain name. If you don’t have a custom domain name for your blog, remove this line.

Step 4 - Link to HTML

Last thing you need to do is add this HTML element:

<div id="recent-articles">Loading…</div>

at the location(s) where you want the recent posts container to be displayed. For example, I have it at the bottom of the index and post page:

   <!-- index -->
   {{#is_index}}
   {{#first}}
    <div class="post">
    <h1><a href="{{permalink}}" title="{{title}}">{{title}}</a></h1>
    {{content}}
    <h2>Recent articles</h2>
    <div id="recent-articles">Loading…</div>
    <p>More articles in the <a href="http://blog.sicanstudios.com/archive" title="Archive">Archive</a></p>
    </div>
  {{/first}}
  {{/is_index}}

Further customisation

Feel free to customise the script even more. For example, I don’t show the most recent post, because I show it on the homepage. I skip it by stating the loop count at 1 instead of 0 on line 20:

for (var i = 1; i < 4; i++) {

Read through the script and make changes to the recent posts display format (starts from line 44) to suit your blog style. If you have any questions or problems, you know where to find me.

Landing a job during an economic crisis 15 Nov 2012 3:00 PM (12 years ago)

It’s depressing to see almost all of my friends being unemployed. Some of them, even with a Master’s degree, they struggle to make ends meet. You could blame your education, your family, people not acknowledging your brilliance, the economic crisis, the country you live in, and so on. But let me be frank with you: you’re the only one responsible for the situation you’re in. Nobody will come up to you and say:

“Here, here… take this awesome job! You deserve it”.

You don’t. Unless you prove can prove it.

The good news is that landing a good job isn’t difficult. Most people are average and terrible at the preparations they do (strategic thinking) when trying to land a job. Good jobs still exist despite the economic crisis. And I emphasise on good because people often play it safe:

“I’m lucky to even have a crappy job in this economy”.

No. Stop. Don’t settle. You are better than this. You can nail a job that will not only pay well, but is also meaningful to you and will satisfy you. Top people are still being recruited despite the economy going down. I’ll show you how to become a top candidate.

To land a good job, you just need to do four “simple” things:

1. Change your mindset.
2. Network.
3. Prove you’re the best.
4. Negotiate.

Mistakes job seekers make

Let me start off by touching on mistakes people make when applying for a job. Remember, you need to work smart, not hard. Apply the Pareto principle: 80% of the results should come from 20% of the activities.

Job seekers spend too much time:

• on resumes and cover letters.
• on jobs ads. You should separate yourself from the competition and show you’re different. Remember that the best jobs are taken before they’re even advertised.
• on trying to get noticed (social networking).

Instead, be super specific about the job you’d like. Spend some time identifying your passion. A good way to finding your passion, is to ask yourself “what would I be doing even if I was doing it for free?”. Stop spending time refining your resume and fine-tuning your cover letter. Ignore job ads. Stop trying to get noticed by spamming your online feed (I’ll show you how to network). Change your mindset.

Changing your mindset

Like Shane Mac writes in his book “Stop with the BS”: resumes don’t get jobs. Forget about them. Always work on the relationships and when they ask, give them your resume. Forget about online job boards, newspaper ads, and job-seeker magazines.

Dream jobs aren’t even advertised. Get this well embedded in your brain. Spend time finding companies you want to work for, find the people you would be working with and get in touch with them. Don’t ask for anything. Help them out, become their friend, praise them and their work, and be thankful for their contribution.

And don’t think this doesn’t work in the corporate world of the “big boys”.

In 2011, according to the Wall Street Journal, over 7.6 million people applied to Starbucks for 65,000 job openings. Close to one million applied to Procter & Gamble for 2,000 positions. Two million people applied to Google for 7,000 openings. Put yourself in the recruiter’s shoes. Even after the applicant tracking and screening software has screened many of the candidates, it’s up to the recruiter to find suitable applicants. How much time would you spend on an applicant’s resume and cover letter? 10 seconds? 20 seconds? 30 seconds?

Most large companies have a recruiter and a hiring manager. The recruiter is a screener; the hiring manager is the one that will make the actual decision. Your job is to get your foot in the door of the hiring manager. Data shows that referral candidates are five times more likely to get hired than other candidates (Source). So you are five times more likely to get a job at Starbucks, if you know someone at Starbucks who can refer you. If that means making connections through networking in order to go through the “back door” and “skip” HR, so be it!

Few people know this, but I got offered a full time designer position at Google in Mountain View, California. And guess what: I didn’t get this offer by submitting my CV and cover letter.

Networking

Networking is a hot but old topic. We’ve all heard the phrase “it’s not what you know but who you know”. And I agree. You don’t need to spend 10,000 hours—made famous by Malcom Gladwell in its book “Outliers”—becoming the best of the best at your craft, and then get a job. You just need to be expert enough. You will improve and get better whilst you’re working at the job you have got because you made friends with the creative director. Speaking of expert enough, Corbett Barr often posts cool tips on his appropriately-named website Expert Enough.

A note on social networks. Facebook is about people you know. Twitter is about people you want to know. You can follow and get in touch with anyone from any field. Get started today connecting with them. Networking for most means being social with people you don’t like in the hopes that someone knows someone. Wrong. Networking is about giving and helping people.

You connect with people by helping them out. By solving their problems, you are letting them know that you can perform, and that you are dependable and reliable. After some time, you can ask questions and for advice. They’d be more likely to answer your inquiries then. You should follow-up showing how you used their advice and thank them for it.

Proving you’re the best

After you’ve got your foot in the door and you’ve put yourself on their map, you actually need to have something to say. You need to prove to the hiring manager/employer why you’d be a better hire than anybody else. Meaning, not a more experienced hire or a better technician. You do that in a couple of ways:

• By actually knowing and understanding the issues they care the most. Research what worries them. What problems are they facing?
• Showing, not telling, why you’re the best solution to their problems. Use the words they use, talk about the issues they talk about with their team. Prepare proof that you can do the job more convincingly than anybody else can.
• Create a business plan. Create sheets with work you would do the first 30, 60, and 90 days at working there.

Negotiating

I won’t go into too much detail about this subject here, because I already wrote about it in another blog post. Nonetheless, let’s look into how to negotiate a salary if they say it’s not flexible.

When interviewers say the salary it’s not flexible, they implement the classic scare tactic. And because you’re terrified of negotiating—understandable, since nobody taught you how to do it; learn now—the interviewer owns you like a puppeteer manipulates a puppet:

“I know you don’t have any other offers and I know how much you made at your previous job. Now dance to my song”.

The best thing is to have multiple offers and be on the lookout for positions at other super awesome companies. Make sure you mention that you want to be compensated on value rather than time or experience (separate and differentiate).

Express the value they would get from hiring you. Pin-point your unique traits, and persuade them to hire you for other skills you might have—if you’re still not expert enough or without experience; e.g. out of college.

Make the case why you should get a higher salary. Get the pay range of the job position you’re applying for, from websites like Salary or PayScale, and show why you should be at the top.

Last resort: if I do an astonishingly great job, do you agree to revisit your proposal in six months and renegotiate my salary? Be ultra specific and ask them (bullet points) what you need to do to create great work. Present the deliverables in six months.

During the interview

When you get the chance for an interview, remember to ask smart questions. They’re finding out more about you, and you about them. Interviews are about telling your story. Use key words that you learned beforehand from the needs and problems of the company. Relate with their philosophy. Use the “Briefcase technique” made famous by Ramit Sethi.

The “Briefcase technique” is about bringing a briefcase and inside it have printed paper sheets with the deliverables (see above on creating a business plan) of the project and how you will improve the company. At some point during the interview, reach out and hand these sheets of paper from inside your briefcase. It’s a great way to make an impression and showcase your out-of-the-box thinking.

Stop watching those silly videos on acing interviews and focusing on specific questions that could be asked in an interview. You’re just setting yourself to be caught off guard and get nervous when a different question comes up. Rather, focus on these seven traits:

Leadership, Teamwork, Work Ethic, Integrity, Organisation, Adaptability, Overcoming change/failure.

Pick three major events in your life and focus on them. Tailor the seven traits with the events in your life. It doesn’t matter what the question is, it’s about how you answer the question. Also, acknowledge the things you don’t know and don’t try to hide them.

Remember that it’s not just the interviewer deciding if they want to work with you but also if you want to work with them. What might look like a great place to work from the “outside”, for various reasons it might not be such a great place from the inside.

Closing Tips

Here are some more tips to help you land and keep a job:

• Stop waiting for someone to recognise your brilliance. Nobody owes to give you a job—hell even a chance—just because you are yourself.
• Start an email list and send great stuff. Start a blog related to the job you want. This will not only get your name out there, but you will also learn by doing.
• Try not to be the technician but someone with a vision. You don’t want to be a commodity, that’s easily replaceable, but a visionary.
• Fake it till you make it. Start high, don’t start low.
• Include testimonials, client list, perceived social status and validation on your website.
• Don’t settle. Be an extraordinary performer. Ask your employer how you can improve in next three months. Discuss after three months about giving you a raise.
• Surround yourself with people smarter than you. Learn from them and absorb knowledge like a sponge. If you’ve become the smartest, most able dude in the company, get the hell out of there! Failure to do so, will get you stuck in a rut. You’ll stop pushing to improve yourself and you’ll be living a false reality thinking you’re the best.
• It’s not about being the best rather doing, and doing, and learning as you go, accepting criticism, failing, learning from it and continuing with the hard work.

Life Lessons 15 Oct 2012 4:00 PM (12 years ago)

Note: The following article contains my own bullet-points and conclusions from the book “Five Secrets you must discover before you die”. I recommend you read the book if you enjoyed this article. The lessons you must learn in life are:

1. Be true to yourself
2. Leave no regrets (risk)
3. Become love
4. Live the moment
5. Give more than you take

I’ll go over each lesson and elaborate it. Also, in the conclusion I’ll show you how to put these lessons into practice.

1. Be true to yourself

• Ask everyday if you’re living life at its fullest.
• Am I following my heart right now?
• Does this task, job, relationship, matter to me? If no, take actions to change it.

2. Leave no regrets (risk)

• You have a choice: Live in fear or focus on what you want and how to achieve it.
• Risk and regret are tied together.
• Because of the fear of rejection, failure, or uncertainty we die with our dreams unfulfilled, and our stories untold.
• Risk is a major contributor to greater fulfilment.
• Choose the path which will make the best story.

3. Become love

• There’s a fight going on between two wolves inside us: Evil wolf: anger, envy, greed, superiority, regret, fear, empty excuses. Good wolf: peace, love, hope, kindness, humility. Which wolf wins? The one you choose to feed.
• Act with love towards the closest to you. Make loving relationships. A Mercedes won’t come to visit you in hospital.
• Your checkbook is not your success — The people you meet and influence in your life will be your success.

4. Live the moment

• When you are young, 60 years seems like an eternity. But after you have lived them, they are but a moment.
• Don’t focus on the past or future; experience each moment.
• Judge your life less and enjoy it more.
• In order to live fully, you must banish the word “boring” from your dictionary.
• Live in the present; it’s the only moment in which we have any power over.

5. Give more than you take

• Tasks of a human life: to lose ourselves and to find ourselves.
• Losing ourselves is about seeing that we are connected to something much larger, something that had life before us (God, Nature). Yet we are significant because we are part of a larger entity.
• Finding ourselves is about discovering what we love, how to express ourselves, our own voice and calling.
• There’s no better way than to dedicate our life to giving and leaving the world a better place than we found it.
• If you are unhappy, get busy doing something for someone else. If you concentrate on yourself you will be unhappy, but if you focus on helping others you will find happiness. Happiness comes from serving and loving.
• Few will have the greatness to bend history; but each of us can work to change a small portion of events, and in the total of all those acts will be written the history of a generation.

Putting the lessons into practice

• Knowing is not the problem, we have to put them into practice as well.
• Answers and experimentation: we pay attention and we try things. In the process, we constantly self-connect and refine until we achieve mastery.
• Knowing these lessons will not change your life, living them will.
• Greatest fear at the end of the life was not death but not having lived.
• What we fear at the end is great incompleteness — that we did not do what we were born to do.
• We must choose to live fully so that we don’t have any regrets at the end.
• Try to resist the temptation to judge your life. Rather, ask how I can embrace these secrets more deeply. The judging mind paralyses us by giving us a false sense of perfection or by giving us a deep sense of inadequacy.

How I moved my blog to Dropbox 18 May 2012 4:00 PM (12 years ago)

A few months ago I cancelled my hosting accounts and moved all my websites to Dropbox and GitHub. The only problem I was left with was where I should host the blog. I decided to use Tumblr. Regretting the decision after only two months, the solution was right in front of me the entire time: use Dropbox for the blog as well. In this article I’ll show you how I did it.

Downside of Dropbox

On Dropbox you can only host static files. This becomes a problem when you want to host a blog. Updating a blog with content regularly becomes tedious when you have a static layout. You have to include all the parts of the layout (header, footer, javascript) on every page. You have to write your blog post using HTML syntax. This method is not future-friendly because in the future, for example if you want to change even one link of the header menu, you’ll have to change every single blog post. Therefore, there’s a gap…

An awesome thing called Scriptogr.am

A gap that is filled excellently by Scriptogr.am. Scriptogr.am is an app that connects to your Dropbox account and allows you to host a blog or dynamic website. The blog posts, or pages, are simple Markdown files located inside Dropbox>Apps>scriptogram>posts.

Some cool features of Scriptogr.am:

1. Custom domain name: Use your own domain name for the blog, like blog.alexcican.com.
2. Awesome themes: Build your own themes (very easy to do) or select one from the gallery.
3. Awesome HTML and CSS editor: Beautifully designed online editor with syntax highlighting.
4. One step sign-up: One step to sign-up and one click sign-in to Scriptogr.am.
5. Offline and online editing: Use your favourite text editor (for me: SublimeText 2 and Byword app for iPad) or Scriptogr.am’s online editor.
6. Posts or pages: aside from blog posts, you can also host pages (and style them differently in the theme).
7. Tags, Slugs, Drafts: For each blog post you can specify your own tags, slug[^3], and its state (whether it’s published or not).

Creating a post

To create a new blog post, simply create a Markdown file inside the posts directory with this front-block (required) at the top of the file:

---
Date: 2012-05-19
Title: How I moved my blog to Dropbox
---

You can add some extra attributes to this front-block if you want:

---
Date: 2012-05-19
Title: How I moved my blog to Dropbox
Slug: blog-dropbox-scriptogram
Tags: blog, dropbox, tutorial
Type: post
Published: false
Excerpt: A few months ago I cancelled my hosting accounts and moved all my [websites to Dropbox and GitHub](http://blog.alexcican.com/post/guide-hosting-website-dropbox-github)…
---

Once you are done with the front-block, you can start writing your blog post. When you’ve finished, save the file, go to your admin page and click the button Synchronize to update the blog with the new post. I hope this process of having to click the button in order to update the blog will be removed in the future. Simply, have the server update the directory once a new file is added to the posts folder.

Adding a custom domain name

To add a custom domain name for your Scriptogr.am blog, simply go to your admin panel, find the “custom domain” field and insert your desired custom domain name without the http://. For me it’s:

blog.alexcican.com

Make sure you click the “Update Settings” button below the input field to apply the changes. Now it’s time to change the DNS settings.

If you’re using GoDaddy, login to your account, launch the domains and click on the domain name you want to change. From that page, go down and find the “DNS Manager” section. Click on “Launch”.

Based on the type of custom domain name you’ve added in the Scriptogr.am’s admin panel, we’ll make different changes to the DNS. For a sub-domain like http://www.alexcican.com or http://blog.alexcican.com you would simply create a CNAME record pointing to scriptogr.am. If you are using a top-level domain like https://alexcican.com, you must use an A (Host) record pointing to 50.116.1.192. There’s no need to add a CNAME record for top-level domains. Wait up to 48-72 hours for the changes to take effect (usually within an hour or so).

Creating a theme

I won’t go into theming extensively, but Scriptogr.am themes are pretty easy to edit or create, if you have basic knowledge of HTML. If you have some theming experience from other CMSs (Content Management System) like Wordpress or Drupal, theming for Scriptogr.am will be a stroll in the park for you.

For a Scriptogr.am theme, you have only two files to worry about. The first file represents the content (HTML) and the other, the styling (CSS). For creating a layout, the magic happens inside conditional statements. Each section of the <body> below represents the homepage, post, page or archive pages.

<body>
	<!-- Get posts -->
	{{#posts}}

		<!-- Outputs the home page -->
		{{#is_index}}
			...
		{{/is_index}}

		<!-- Outputs the "Blog post" -->
		{{#is_post}}
			...
		{{/is_post}}

		<!-- Outputs the "Page" -->
		{{#is_page}}
			...
		{{/is_page}}

		<!-- Outputs the "Archive" page -->
		{{#is_archive}}
			...
		{{/is_archive}}

	{{/posts}}
	<!-- End posts -->
</body>

Inside each block you can add whatever HTML you want to show in that particular page. There are a handful of shortcodes available (like for example: {{content}} will output the content of the blog post/page), that can be found at the bottom of this page. Here’s the code I have for the blog post (i.e. this page you’re currently viewing):

{{#is_post}}
	<div class="post">
		<div class="content">

			<div id="continue_reading" class="title">
				<h1><span>{{title}}</span></h1>
			</div>

			<div class="body-post">
				{{content}}

				<!-- if tags -->
				{{#if_tags}}
					<ul class="tags">
						{{#tags}}
							<li><a href="{{base_url}}/tag/{{name}}">{{name}}</a></li>
						{{/tags}}
					</ul>
				{{/if_tags}}
				<!-- endif -->

			</div><!--end body-->
		</div><!--end content-->
	</div><!--end post-->
	<p class="more"><a href="http://blog.alexcican.com/archive">More articles in the Archive →</a></p>
{{/is_post}}

Above and below those conditional statements, the code for the header and footer is inserted (because I want that code to be applied to every page). And at the bottom, before closing the </body> tag, I add some JavaScript code for smooth font resizing and Google Analytics tracker.

Here’s a tip: It’s best to tinker with the theme a bit. Because, the default theme of Scriptogr.am could be improved in terms of SEO (<h1> tags, title, descriptions, etc.). I want to show you a better way to display the <title> of the blog:

<title>{{#posts}}{{#is_post}}{{title}}{{/is_post}}{{/posts}}{{#is_index}}Blog of Alex Cican{{/is_index}}{{#is_archive}}Archive of the Blog of Alex Cican{{/is_archive}}</title>

We’re saying if the page is a post, display the {{title}} of the post, if it’s the homepage, display “Blog of Alex Cican and if it’s an archive, display “Archive of the Blog of Alex Cican.

This was a brief overview of the themes in Scriptogr.am. If you’re having any trouble, please visit the FAQ or the forums.

Conclusion

Scriptogr.am has made it possible for me to host my blog on Dropbox. I now actually enjoy the process of writing a blog post. Hence, I’m inclined to writing more. I start writing on my iPad and I continue on my PC. When I’m finished, the post is published with literally one click. But don’t misunderstand me: it’s not a silver bullet.

Migrating from your previous CMS can become a tedious process if you have many blog posts. There’s no way to import your posts from a blog service like Wordpress. Luckily for me, I also used to store a text based version of my articles, as backup. Finally, some features, that have existed for years on other CMSs, are missing from Scriptogr.am. Here are some improvements that could be made:

• support multiple blogs
• allow me to export/save the theme
• update the blog automatically whenever the posts folder is updated by Dropbox, without having to click synchronize
• add a preview window to the online text editor for Markdown files
• allow me to customise 404 (not found) error pages
• allow me to sort archives by year as well, not only by month

Like with the custom domain name feature that was added recently to Scriptogr.am, hopefully we will see these changes implemented in the near future.

Update: March 2013

I’m no longer using Scriptogr.am for my blog. I switched to Jekyll, but I’m still using GitHub for hosting all my websites.

How I moved my websites to Dropbox and GitHub 14 May 2012 4:00 PM (12 years ago)

A few months ago I cancelled my hosting and server accounts and moved all my websites to the cloud. I tried it as an experiment; never for a second I thought it would work this well. I did the switch out of impulse: I was pissed. I was pissed at the hosting companies charging so much, having such crappy support, and much downtime. I’m very glad I switched.

Why I switched

Prior to the cloud, I was hosting my websites on a VPS (Virtual Private Server) with a company called Linode. This company gives you a server as is and you have to install the OS by yourself, maintain it, improve its performance, etc. I busted my chops trying to configure a fast server. After I was done, the server was running CentOS + nginx + PHP-fpm + MySQL, hosting my websites and Wordpress blogs.

The drop that spilled the cup came one day of February 2012, when all my websites (folders) were deleted somehow. Because I considered paying $20 per month for simply hosting my files was enough, I didn’t enable the backup option (it was an extra $2 per month, if I remember correctly). So that day came, and I went straight to their support ticketing system. The dude that was assigned to me was not helpful at all and said there was nothing to be done. My last backup of the websites was in December 2011.

Pissed off, I cancelled my account, got my refund and didn’t think back (or forward). Having been left only with my domain names, I had to do something (for AlexCican.com alone, I was averaging around 700 unique visitors per day). That’s when I made the decision to use the cloud.

Why I switched to Dropbox and GitHub

I switched to these two services for a couple of reasons:

1. Free. It’s free and your account is created immediately. Free 2GB space for Dropbox and unlimited public repos for GitHub.

2. Easy to use. Just drag-n-drop the file inside your Dropbox folder. The file is accessible anytime from anywhere (Dropbox website, desktop, laptop, mobile, tablet). Uploading to GitHub (known as pushing), is very simple: commit, add your message and push the changes.

3. Plenty of space. I didn’t need 20GB for my websites. The free 2GB of space offered by Dropbox was more than enough.

4. Backup. Your files won’t get lost/deleted. The extra layer of pushing the files to GitHub as well, offered double protection.

5. Restore. In case you screwed up something, you can restore the file (as well as previous versions of it) and revert the changes. At no extra cost.

6. Uptime. Previously, with my VPS, and going back even more, with my shared hosting, the uptime was good but I would experience downtime. Switching to the cloud, made my websites online with an uptime of 99.991%.

7. Speed. My websites are blazing fast. Dropbox and GitHub servers are optimised ”out of the box“ to be fast and reliable (pages are compressed and deflated).

8. Security. In my effort to improve the performance of my server, who knows what vulnerabilities I uncovered, making my server hackable (maybe that’s what happened on that day). I don’t have to worry about this again. Both services come with SSL and free support included.

Let’s get into how I did it.

The specifics of Dropbox

If you want your files to be accessible by anyone, you have to move them into your “Public” folder. If you’re using absolute paths for your website, I suggest you change it to relative paths. So from this:

<a href="https://alexcican.com/web/file.html"></a>

change them to this:

<a href="./web/file.html"></a>

Doing it this way, you can still access the website without having the domain name of the website pointing to the correct folder.

Next step is to change the DNS to point to the Dropbox folder (skip this if you’re gonna use GitHub to host your online version of the site).

If you’re using GoDaddy, login to “Your account” and launch the “Domains”. Then, click on the domain name you want to edit and from the toolbar, select the forward icon. Click “Forward Domain” and insert in the popup input, the complete URL of the index.html from inside the Dropbox folder (to get the link: right click on the file>Dropbox>Copy public link).

Wait a few hours and you should be able to access the website hosted on Dropbox via your domain name!

Downsides of Dropbox

The big downside of hosting your website on Dropbox is that you can only host static assets (HTML, CSS, JS, images). No PHP. A solution to that was to use another service called PHPFog. I won’t go into details in this tutorial about PHP.

The other downside I found was the URL system. On Dropbox, the URL of a file is something like:

https://dl.dropbox.com/u/212143/public/website/file.html

This means that the Dropbox URL would be visible when navigating the website. I couldn’t have something like:

https://alexcican.com/file.html

unless I did a URL forwarding with masking from my DNS settings. This was not optimal because whichever page of the website I’d browse, it would show up only as:

alexcican.com

To do this URL masking on GoDaddy, repeat the steps above for pointing the DNS record to Dropbox, but in the popup click on “Advanced Options” and select the second option: “Forward with Masking”.

Lastly, if you have a large website, with many pages, you will find it difficult when you want to update the copyright of the page, for example. Because of the website being static, you would have to edit every single page of your website. Whereas with a dynamic website, you edit once (the header.php for example) and you’re done.

Specifics of GitHub

Searching for solutions to this issue I came across GitHub. On GitHub, you can host static websites with the option of adding your custom domain name (hence custom URLs) as well. There are two ways to do this:

1) You create a repository with your username and add .github.com at the end of the name. For example, if your username is “sican” you create a repo:

sican.github.com

2) or within an existing repo, you create a new branch called gh-pages and push the HTML files of your website in there.

To enable custom domain names, you just have to create a file named CNAME, in the root of the repo or branch, open the file with a text editor and add your domain name inside:

alexcican.com

GitHub pages also supports custom error pages. Simply push a 404.html file with your message in the root of the repo or branch.

Now it’s time to change the DNS settings from GoDaddy to point to our GitHub page. Login to your account, launch the domains and click on the domain name you want to change. From that page (see screenshot above), go down and find the “DNS Manager” section. Click on “Launch”.

You have to decide what domain name you’ll be using. For a sub-domain like http://www.alexcican.com or http://blog.alexcican.com you would simply create a CNAME record pointing to charlie.github.com. If you are using a top-level domain like https://alexcican.com, you must use an A (Host) record pointing to 192.30.252.153 and another one to 192.30.252.154. There’s no need to add a CNAME record for top-level domains. Read more in the documentation.

Downsides of GitHub

The first downside is that you need special software for interacting (gracefully) with your repositories. The best software to install if you’re on a Mac is Git Tower and if you’re on Windows you shoud be using SmartGit.

The other downside to GitHub is that unless you’re a software geek, it takes time to get it. It’s not intuitive and it’s not drag-n-drop. After you went through the help documents and learned how to setup stuff (repositories, branches, trees), it’s very easy to use.

Lastly, the same with Dropbox, GitHub only supports static assets (HTML, CSS, JS, images).

Liberation begins

“FTP-ing is so 1999” – everyone

Found an error on the website but you’re on the move without your laptop? Edit the page that’s hosted on Dropbox from your iPhone/iPad, save it and you’re done. If you’re on GitHub, commit the changes and push them to the repository. Job done!

“Hold your horses, Johnny”. There’s a catch: a Git version control app for the iPhone/iPad doesn’t exist yet, so you can’t update your repository on those devices. Textastic has it planned but I don’t see it being completed any time soon.

There is a way around this but it involves Jailbreaking your iPhone/iPad and a great deal of hacking via the command line. Check out this great tutorial showing you how to do it.

Conclusion

There are some disadvantages to both systems:

• Dropbox: 1) doesn’t support custom URLs 2) can host only static files (HTML, CSS, JS) and 3) making changes to a website with many pages is tedious

• GitHub: 1) requires special software and takes time to learn 2) pushing changes difficult via mobile/tablet and 3) can host only static files (HTML, CSS, JS)

But for me it works. For me, the advantages outweigh the disadvantages. I like my websites more (since they load faster and stay online longer), I feel more relaxed and I also sleep better at night (secure servers, backups exist). Lastly, I feel liberated since I can access my files anytime from anywhere (and edit them, almost from any device).

Next article I have scheduled, is a continuation of this one: “How I moved my blog to Dropbox”. Make sure you grab the RSS feed and you follow me on Twitter.

The lost art of Pricing and Negotiating 14 Apr 2012 4:00 PM (12 years ago)

Disclaimer: I am in no position to offer you financial advice. I am not a financial advisor. What I want to do, is share my personal experiences on freelancing for a living. This blog is tailored to suit freelancers, so if you’re in a different situation—applying for a full time job, for example—the techniques implemented should be different. That being said, it doesn’t mean that you can’t take away something from this article: useful techniques to tip the scale in your favour.

Negotiating? No, it’s insulting!

Negotiating has gained a bad connotation throughout the years, especially in western cultures. We are ashamed of negotiating and we feel that it cheapens us and insults the person we’re negotiating with. This doesn’t happen in eastern cultures, where negotiation is synonymous to transaction.

As far back as I can remember my father—I come from a poor, communist era, family—always used to negotiate the initial price of a product. At the local food market if apples used to cost $0.45 per kilo, he would say “I’ll give you $0.30 per kilo”. If the salesperson denied, he would implement techniques like arguing that a week earlier the price was $0.30 or say stuff like “the guy at the market entrance was selling them for $0.30”. When electronics came around, he didn’t do so much “price beating” because the prices were fixed by the store, but he would go around asking for any offers and special discounts they might have.

Throughout the years, my freelancing experience has taught me to identify patterns of this business. In freelancing, it sort of goes like this:

The client sends me an email saying that they saw my work on my website—or on Dribbble, lately—and they liked it. They explain what they want and describe their project and ask if I’m available. If I am, I say “yes” and they respond with more details, ideas for the design, and finally asking me my hourly rates or project cost estimations. What usually goes through the mind of the designer/developer: “Oh oh, Here comes the money talk!. Let’s get this over with quick…”.

Wrong!

I used to do that in my early stages: avoid the money talk. Now, I name the price beforehand—continue reading to learn why—from my first reply to the initial email. Something like:

“Sounds great! I usually charge $150 per hour for development, can you afford me?”

I will go into per hour VS per project pay later.

I know—I shouldn’t be talking money first, and I should’ve waited to see if the project is a good fit. I usually can tell if I’m going to like the project and company/person. In other words: I would have done my research before replying.

Conventional wisdom

Every marketer, financial advisor, blog, website, etc., and conventional wisdom will tell you to avoid being the first to name a price. Because in doing so, you could be leaving money on the table.

Example: say a big company has setup a budget of $40,000 to get their website developed. They ask you to name how much you would need to develop everything (quote). If you name your price first, out of the blue and with your little experience, and you say $20,000, you will be leaving $20,000 on the table, “cutting” your pay in half of what you could be earning.

Instead, they say that you should be making the other party name a price first. And so it begins, the cat/mouse race:

“So, how much would you need to create our website?” “I don’t know exactly, what’s your budget?” “We don’t have a fixed budget yet; what’s your hourly rate?” “It depends on the complexity of the project. You must have a budget. What’s the maximum amount of $ you setup for creating this website?” “We don’t know yet, we’re waiting from you to tell us an estimate and we’ll check with our financial dept.”

and so on… Until someone, usually the freelancer, gives in and names a price/quote.

My method

I decided to skip all the fluff, save myself the headaches, and avoid wasting my time and the client’s time by going against conventional wisdom: name the price first.

If you don’t have enough experience, nailing the price will be hard at first. Let me give you some indicators that could help you. If after naming your price, the client goes something like:

“Great, let’s start now!”

you priced too low. You left money on the table. Note it down—all the factors: like the company’s type (NGO, Government organisation, startup), the company’s size, the type of project (design, UI, UX, back-end development)—and next time you find yourself in a similar situation, add 30% to your initial price. Keep doing that until you reach the next scenario. If the client goes something like:

“Sounds good but it’s a bit high for us. We will have to lower it down by $5,000”

means you’re somewhere close for them and their budget. Although, most of them will just want the very best deal they can possibly squeeze. Most likely they will receive a pat on the back for hiring you with less money, or maybe they’ll get a free restaurant meal from their manager and you will end up $5,000 “poorer”. This is where your negotiation skills kick in.

Lastly, if the client goes something like:

“Insane. You are way above our budget. Thanks very much, we’ll be in touch…”

or they don’t even respond, you guessed it; you priced too high!

In order to avoid attracting clients who can’t afford me, I wrote two paragraphs (Update: I removed them when I redesigned this site) on my homepage to let people know I won’t do cheap work. I also added a state your budget button to my contact form (although not mandatory to complete). This worked! It scared away 90% of the potential clients who couldn’t afford me and it cleared my email inbox.

In order to develop your estimation skill, without getting burned and still nailing projects to pay the bills, there are a couple of things you can do. But first, I want to talk about pricing by the hour VS by the project.

Pricing: by the hour VS by the project

When you’re inexperienced, you have no idea how much time it will take you to complete a project. After you’ve completed enough projects, covering a vast area of fields (portfolio websites, e-commerce, web apps), you can estimate more accurately how many hours it will take you to complete a project and price accordingly. It’s up to you then if you want to charge by the hour or by the project. There is a major pitfail in charging hourly, described very well by Jessica Hische:

Say you have two designers that charge $100 per hour but one designer works much faster than the other. Both are equally talented, but one is far more efficient. At the end of the job, the designers turn in their invoices — he worked on it for a total of 18 hours and she a total of 7 hours. He is paid a respectable fee of $1800 and she $700 for producing the same result.

I’m pretty efficient and I prefer to charge by the hour but in case the client wants to do by the project, “we have a budget of X for this”, I can give an estimate for the total cost. In the back of my mind I still gauge things hourly though. But sometimes I get stuck, the creative juices stop flowing or I get distracted with other issues. It happens even to the best of us. In that situation, I make a mental note that for example my two hours today were not actually two “full” hours. So, I put in more work outside the schedule (either that day, in the weekends or in the near future). It’s all about getting to know yourself and how efficient you are.

Tools of the trade

If you’re pricing by the hour be prepared to show your employer/client where every minute of you working went in their project. A good way of doing that is to use time tracking software. There are many tools out there; I use Toggl for that. All you have to do is type-in the part of the project you’re currently working on and start the timer. Save the progress once you are done and mark that time as billable. Another popular tool I use daily is Basecamp. This tool allows you to collaborate with others, share files and track time. Dropbox is another tool I use daily and has honestly simplified my life! Lastly, a very useful tool I use for invoicing my clients is Freshbooks. I honestly cannot overstate how much I love these products!

Knowing what to charge

Prepare before the battle! First, you should do your research on Salary.com (and other websites) to find out how much others are making in your field. This should give you a rough estimation on how much you should be charging.

Next, you should research the company/person and find out as much as you can about them. For example if you found out that the person who’s looking for a photography portfolio website hasn’t made a buck from photography and they work at Starbucks I will honestly tell them to setup a free website/blog get some followers and sales and tell them come back in the future, to build them a custom professional website. There’s no point diving into deep waters when you don’t even know how to swim yet.

Third, you should gauge their interest. Are they interested in you (if yes, how badly do they want you?) or is this a copy/paste job offer email, ultimately competing against 1000 other designers/developers for the same spot? If they like you and must have you on board, you can tip the pricing scale in your favour.

Fourth, have a positive, assertive attitude (not cocky). Quote respectable prices, because you’ll be doing us all in the industry a disservice by pricing too low. Remember that you are talented and that you have value—you should probably consult a therapist if you have low self-esteem issues. There are enough companies out there (PSD2XHTML to name one) that cripple us by pricing low (they profit by getting a ton of orders and completing projects fast) and automating the process of developing a website. There’s no need for new designers/developers to shoot themselves, and like a domino us, in the foot.

Nowadays, I’m working on many things and when I’m unable to take any more projects on board, I don’t reject them. I simply quote high prices to “scare” the client off. But even when my schedule wasn’t/won’t be full, I still wouldn’t/won’t take projects that pay ridiculously low (except from when I entered this industry; one has to start from somewhere). You know what I do instead? Work on personal projects (more on that below)!

The Art of Negotiating

Many studies have shown that the first offer has a strong psychological pull and the resulting agreement tends to be won by the person who proposed the first offer. I use that in my favour and quote first the price. Check out this scenario:

“Thanks for contacting me. For the job you want me to do I charge $90 per hour” “Umm, it’s a little high, how about $45?” (from the previous emails I deducted that they liked me, so I play hard-ball) ”Look, you told me you liked my designs and that you want something minimal and simple. I can do that, as you can see from my portfolio. So, let’s make it fair for the both of us: $80 is a good rate” “Yeah we do like your designs, but how does $50 sound?” “Playing it hard, are you?”

Somehow, calling their bluff will make them give in; though be careful how you phrase it: it can kick back and they could take it as an insult. So I continue:

“Listen, $75 is my final offer and we can start immediately”

or include another small bonus. Or you can leave the bluff-calling out, and say something like:

“Let’s keep it $80 (or $70 if you want to show some sympathy), see how it goes. We can re-negotiate the terms of the contract in the future”

The idea is that you should have a personality—be careful to not become annoying—and be willing to drop their offer if it sounds ridiculous. You should give the impression that you are busy. Hell, you should be busy! You don’t have clients or commercial projects to work on because you haven’t developed your portfolio or skills yet? Great! Get a 9-5 job for six months to pay the rent and work on personal projects two hours per weekday and in the weekends five hours totalling 20 hours per week. Following this schedule, you should get your skills up in no time. Quit your boring job once you lock-in a few awesome projects and start working on the things you love.

A note on personal projects: Aside from being fun, many clients have contacted me because of the cool personal projects I did (like the Twitter CSS button). Personal projects are also important to you, and your well-being—they create the feeling of doing something purposeful. Google, Microsoft and other large companies have figured it out. They saw that their employees were more happy and productive when they had a small side project going on. So, nowadays they encourage employees to devote 20% of their time to self-initiated projects.

Lastly, you cannot publish many commercial projects in your portfolio, at least in the web/design industry, because of the killer NDA (Non Disclosure Agreement) you have to sign. An NDA is a contract signed by both parties agreeing not to disclose information covered by the agreement (such as: copyright, trade secret, and other proprietary information, techniques, sketches, mock-ups, wireframes, drawings, models, inventions, know-how, processes, etc.). So, the only way you can show-off your skills and progress is by posting personal projects: designs, web apps, plugins, open-source, code snippets, etc.

When negotiating a salary or a payment, try to make them see your real self—the one your grandma would be proud of—and why you stand out from the rest. Outlandish stories stick in the memory of your employer/client. For example if you backpacked through Europe for eight months, don’t be ashamed and ommit to mention it! Here’s a scenario for a job position as customer service assistant (via phone) at an International e-commerce company:

“Sorry, but we can only go as high as $55,000 p.a. (per annum)”

Without even acknowledging it:

“Let me tell you something: when I backpacked through Europe for eight months, as you can see from my big gap in my résumé, it was insane! I learned how to find my way through countries where they don’t even speak English! I had to deal with my flight cancellations and rebookings via the phone several times. That one time, I was at Charles de Gaulle and because my flight was delayed I would miss my 15:00 o’clock train from Amsterdam Centraal so I had to call…”

Don’t make the story too long and get to the point: what you’ve learned from that experience:

“This experience has taught me to always put myself in the caller’s shoes and be patient, understand their problem and try not to insult them. It’s not who they are; it’s the circumstances that has transformed them and now they’re angry. That’s what makes me unique and why I believe I’m best suited for this job and this pay rate. No one can fill the spot and help your company minimise complaints better than me”.

Make them remember you. If they still decide to go with a lower salary from the one you wanted, implement the technique described in the “negotiating a raise” section below.

When negotiating, never disclose your previous salary. Tell them that it’s confidential or that your employer requested you to keep it private. Moreover, make a statement explaining that you have more experience, you improved your skills, and in general you are better qualified now, than when you started working for X in 2004.

Negotiating a raise

The same thing applies if you’re looking for a raise. Ask them:

“I’ve been with you for six months and things have been going very well. How about we raise my salary to $80,000 per year?”

If they say: “Yes, here you go!”, then awesome! Give yourself a pat on the back. If they decline, ask them what it would take for them to raise your salary up to that point. Note the points down and make sure they’re quantifiable. For example: produce 30% of entire coding for the new web app in four months or for each new feature, provide more design sketches and draft ideas.

Finally, try to help them out and guide them:

“Thanks, it’s in my best interest to help your company grow and become more effective” (make it about them). “In order to do that, in six months I will get 80% of the coding done for the X feature. If and only if I do an awesome job, would you be willing to have this discussion again?”

Working from home

Another popular situation people try to escape from, is the 9-5; You break that pattern by working from home on your own terms. Again, the same techniques apply in this situation as well. To improve the odds, you can start by working a few hours from home—on the same project you’re working at your job—and measure the results of this experiment. Then you can schedule a meeting with your boss:

“I want to propose an experiment. The previous week I worked on my own time from home, for one hour on the X project and delivered 20% more code with 10% less errors…” (give them stats and quantifiable results)

“What it means is that I’m more productive from home. Thus, we produce faster results and your company is more efficient” (make it about them). “Basically, you get more bang for your buck! Would you be willing to test working from home for the next week and see how it compares to coming to work? We can totally return back to where we left if things don’t work out; there’s no pressure or strings attached”

Tim Ferriss writes excellently about this in his book 4-Hour-Workweek.

Conclusion

I could go on forever, but I have to stop somewhere. At 3,000+ words, I doubt anyone will read this article from start to finish. If you did, I want to hear from you: what are your experiences? what would you add to improve this article? If you didn’t read it entirely, and read only this conclusion, I still want to hear from you: what made you stop, apart from your laziness/lack of time, and how do you think I could improve this article? Contact me on Twitter.

Useful links

Negotiations.com (very good resource on negotiations and techniques I didn’t discuss in my article) Jessica Hische Tim Ferriss Ramit Sethi 21 Times for a freelancer to say no 1000 True Fans (not exactly about pricing or negotiating but what it takes to make it)

iPad battery saving tips 2 Apr 2012 4:00 PM (13 years ago)

In December 2011, I purchased the iPad 2 and integrated it deeply into my workflow. Since then I’ve saved energy by not turning on my main PC for most of my tasks, improved my posture—not sitting on the same chair for hours—thus reducing my chronic back pain, made my experience (browsing, reading, writing, watching) more interactive and fun, and I’ve spent less time on the Internet. A thing that I’ve been obsessing over is battery life. I want to discuss about the battery more.

The battery life of my iPad 2 has been excellent. Prior to that I used an iPhone 3G that didn’t conserve much battery and in short, it sucked. The advertised battery life for the iPad 2 is at ten hours on a single charge. That makes it more efficient than any laptop — and most netbooks — on the market today. I’ve been able to squeeze eleven, hell even twelve, hours on a single charge.

I want to present to you the results of some experiments that I conducted. Aside from the conventional tips for saving battery life, I’ll discuss some other tips I came up with.

Conventional tips for conserving battery life

Here are the tips that even my grandma knows:

• Lower the brightness of the screen
• Switch off 3G and use WiFi when possible
• Switch off Bluetooth when not in use
• Minimise the use of location services
• Turn off push notifications
• Turn off push main (or fetch mail less frequently)
• Turn off EQ when listening to songs
• Do less CPU intensive tasks (like watching movies or reading). Don’t constantly switch between apps
• Set to lock the screen automatically (auto-lock)
• Turn off device if not used for long time
• Charge battery 100% and let it run completely (shuts down) at least once per month
• Disconnect the device once it has charged completely (thus prolonging battery life)

Advanced battery experiments

Aside from the aforementioned tips, I wanted to test some other scenarios and what effect they have on battery life. I couldn’t find any mentions of these particular scenarios over the Internet, so I decided to test them myself. The scenarios that I tested were:

• Scenario 1: In sleep mode: apps running in the background with WiFi on VS apps in the background with WiFi off
• Scenario 2: In sleep mode: apps running in the background VS no apps in the background
• Scenario 3: App left on screen when in sleep mode VS app minimised (background) when in sleep mode

The apps that were selected for this experiment were: Twitter, Facebook, Flipboard, Mail, Safari. For the Mail app I had “fetch new data” turned off (no mail fetched automatically). All other apps had push notifications enabled. Bluetooth was turned off at all times, location services was enabled and brightness was at a minimum. The tests were conducted over a period of 4 days, with battery life at 70% (charging the battery up to that point throughout the day). All the tests were conducted at night from 12:00 AM to 10:00 AM (10 hours).

Scenario 1

For the first scenario, it’s better to have WiFi turned off even if you have apps running in the background. When apps were running with WiFi turned on, it consumed a total of 3% of the battery in 10 hours, whereas when apps were running with WiFi turned off it consumed around 0.5% (no change in percentage through the night, but once iPad was used for a couple of minutes, percentage dropped faster).

Scenario 2

Results were similar to the previous scenario: it’s better to have no apps running in the background but the fact of having running apps in the background consumed very little power (around 0.5%).

I further investigated this issue and it turns up that the iOS “freezes” the app when it’s minimised (background) and little activity is allowed (push notifications) and once you click on the app, it becomes “unfreezed” and fully working again. So, when double tapping the home button you basically have a list of recently used apps, not a list of running apps in the background. I now, contrary to the past, find it useless going every once in a while and removing all those apps from the list.

Scenario 3

Even if you leave an app running on screen once the device is put to sleep it makes no difference on the battery life. The main application used in this test, along with the others running in the background, was Kindle.

Conclusion

I hope you found these tests useful . The way I like to preserve battery, aside from the tips expressed in this post, is turning the Airplane mode on when I won’t be using the device for a long time (at night, before going to sleep). This takes care of turning my WiFi and Bluetooth off.

I managed to squeeze even more battery life from my device (up to 12 hours) when reading. The Kindle app has a brightness slider that reduces the brightness of the screen even more. Moreover, it also allows you to set your reading preferences to white text on black background, a preference which should conserve even more battery. I would love to have those features incorporated in iBooks as well (Update: Now you can customise iBook as well).

When watching an hour-long documentary on YouTube (via WiFi streaming), with the brightness at a minimum and Bluetooth off, the battery percentage only dropped by 7,5%-8%. Let me do the math for you: 12 hours X 8% = 96%. That leaves you battery life to also update your Facebook and Twitter accounts, and also check your emails (device turns off when it reaches 1-2% battery life).

Finally, I found out that when charging the battery, it takes some time for the battery to charge completely, from 98% to 100%. If you leave your device plugged in a bit more it will charge beyond 100% (even if it still says 100%).

Now, if the iPad was more powerful (CPU-wise), I could completely ditch my main bulky workstation that I still use for my photo editing (Photoshop) and video editing (After Effects/Premiere) needs. I was a bit disappointed with the release of the iPad 3 because it didn’t have an awesome quad-core powerful CPU. Not only that, but the retina display, a whooping 2048-by-1536 resolution, is a resource killer making the iPad 3 not much faster than its predecessor, the iPad 2.

If I were Apple, seeing the massive success the iPad has gained, I’d be looking at eliminating the laptops out of the equation. As you can see from the graph above, even without a powerful device that would suit my needs, they beat other laptop manufacturers in sales.

But I’m not Apple nor Tim Cook to order the production of a beasty iPad (CPU/RAM-wise), and it seems that they have different goals in prospect, like releasing an iPad Mini to compete with Amazon’s and Kindle…

Different content or CSS depending on iOS version 19 Mar 2012 4:00 PM (13 years ago)

I’m currently caught in the process of developing my first web application It’s finished: TimeWasted. I’m optimising it to work and look great on the iPhone and iPad. Testing the app was done on my iPhone 3G running iOS 4.2 — the last supported iOS for this device.

A word on online simulators. Aside from resizing the browser size—operation you can do by yourself—and adding a fake iPhone/iPad-like address bar, they’re rubbish at rendering the page like a mobile browser. In order to test the app on other devices besides my 3G, I went to my local Apple store where they have the newest Apple devices running the latest iOS. I was surprised to see that there were a number of differences in the way the page was rendered, compared to my iPhone 3G.

New addition to browser checks?

How a website is displayed depends largely on the browser—Firefox, Chrome, Safari, Opera, IE8, IE9. Although inconsistencies in the way a website is rendered is being reduced with every new version of a browser that comes out—for example IE8 vs IE9—it’s far from insignificant. So, every once-in-a-while during the development stage I check the website in other browsers and fix the inconsistencies—if possible.

Now, I have to add iOS (iOS 4 vs iOS 5) to that check. I won’t go into all the differences, but one of the biggest is that in iOS 4 you could not have fixed elements on the page and a scrolling div—you had to use JavaScript alternatives, like iScroll, to mimic the effect. This has been fixed with iOS 5: just add the following code and mobile rendering of that div will be similar to a desktop browser:

-webkit-overflow-scrolling: touch;

Older versions of iOS

If you don’t care about older versions of iOS and you only want to support the latest version, that’s fine. But I think we’re not quite there yet. The situation is similar to IE 6. A couple of years ago, even though there were new versions of IE out there, we had to include hacks in our code to make the website look as good as possible on IE 6. Slowly, as usage of that version dropped, we stopped supporting it nowadays.

Add content or change CSS values depending on iOS

Nonetheless, in order to check for what iOS a user has, use the code below. I have setup my HTML/CSS to cater for iOS 4 and I make any required changes for iOS 5, using JavaScript. The code below will check if the user is using iOS 5 and will change the CSS property bottom to a value of 0 for the footer of the page. Note that the value is in pixels. Moreover, it will append to the body of the page some text or HTML element.

var iOS5 = navigator.userAgent.match(/OS 5_/i) != null;

if (iOS5) {
	$("footer").css('bottom','0');
	$("body").append('<h3>This is for iOS5</h3>');
}

Conclusion

That’s it basically! There are many uses for this script. One idea would be to only load certain scripts—for example iScroll—in order for the website to work great in older versions of iOS, if the user is on iOS 4 or below. That will save the user that’s browsing using iOS 5 some precious bandwidth. Other uses not related to iOS would be to cater for different browsers. For example if in Firefox the web font looks great, but in Chrome it needs some extra letter-spacing. Use the code below:

var chrome = navigator.userAgent.match(/Chrome/i) != null;

if (chrome) {
	$("body").css('letter-spacing','0.5');
}

Am I forgetting something? Yes I am: Android OS. If only I could get my hands on an Android device and test my websites/apps on it. In the meantime I can only trust my coding skills and hope that the page looks acceptable…

Ignore Details Early On 14 Mar 2012 4:00 PM (13 years ago)

I was re-reading “Getting Real” from 37 Signals and stumbled across a very important chapter, that resonated with me. Now that I think of it, that’s also one of the reasons why I fired my first client (yes, I do that as well!). I share a small excerpt below, check it out.

Work from large to small.

We’re crazy about details. The space between objects The perfect type leading The perfect color The perfect words Four lines of code instead of seven 90% vs 89% 760px vs 750px $39/month vs. $49/month

Success and satisfaction is in the details.

However, success isn’t the only thing you’ll find in the details. You’ll also find stagnation, disagreement, meetings, and delays. These things can kill morale and lower your chances of success.

How often have you found yourself stuck on a single design or code element for a whole day? How often have you realized that the progress you made today wasn’t real progress? This happens when you focus on details too early in the process. There’s plenty of time to be a perfectionist. Just do it later.

Don’t worry about the size of your headline font in week one. You don’t need to nail that perfect shade of green in week two. You don’t need to move that “submit” button three pixels to the right in week three. Just get the stuff on the page for now. Then use it. Make sure it works. Later on you can adjust and perfect it.

Details reveal themselves as you use what you’re building. You’ll see what needs more attention. You’ll feel what’s missing. You’ll know which potholes to pave over because you’ll keep hitting them. That’s when you need to pay attention, not sooner.

How to set cookies with JavaScript 2 Mar 2012 3:00 PM (13 years ago)

Cookies are an important part of modern browsers. Without them, we couldn’t browse websites that require authentication, such as social networks since we’d be asked for our password on every page we’d browse. We wouldn’t be able to write a simple e-mail, or purchase stuff online. Website usage would be limited to browsing only static websites. In this tutorial we’ll focus only on creating and editing cookies using jQuery.

View the Demo →

I’ll be using a cookie plugin created by Klaus Hartl. We do not need to edit anything in this file, just call it after jQuery. Download the script

Step 1 - HTML first

Based on the example above, we create a DIV and inside it we add two messages. One that will be displayed only once, when the page is loaded, and the other will be displayed after the first one was shown. Whether to show the first or second message is the job of CSS:

<div class="message  change-message--on-load  hide--second">
  <p>This message is displayed only the first time you visit this page. Refresh your page to hide it!</p>
  <p>This is shown only after the previous message was shown in the last visit. Even when you refresh the page, the browser remembers your option.</p>
</div>

Step 2 - CSS

With CSS we tell the browser to hide the first message if the div’s class is .hide--first or hide the second message if the div’s class is .hide--second:

.hide--first > *:first-child {
  display: none;
}
.hide--second > *:last-child {
  display: none;
}

Step 3 - Initialising

For faster loading times, add your JavaScript to the bottom of the page, before closing the </body> tag. First, we need to call jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Next we call the cookie script. Make sure you add the correct URL pointing to the script.

<script type="text/javascript" src="cookie.js"></script>

Below it, we add an empty script tag and we can start coding:

<script type="text/JavaScript">
</script>

Step 4 - JavaScript

First we add the cookie code. There are two parts to this: one that checks if cookie exists, and the other part is the one that adds the cookie. First, we will check for the cookie (I’ll explain why later). If the cookie is true, hide the initial message and show the other one (with CSS) by changing the class of the <div>:

	if ($.cookie('hide-after-load') == 'yes') {
	  $('.change-message--on-load').removeClass('hide--second');
	  $('.change-message--on-load').addClass('hide--first');
	}

Before we close the script tag, we have to add the cookie that will hide the first message. We add it to the end, because if we were to add it before the code that checks (see above) the cookie, it would hide the first message from the start. Adding it at the end ensures that the message will be hidden the next time the page is loaded. It’s set to expire in 7 days.

	$.cookie('hide-after-load', 'yes', {expires: 7 });

The complete code for the first example:

<script type="text/JavaScript">
	$(document).ready(function() {
		if ($.cookie('hide-after-load') == 'yes') {
		  $('.change-message--on-load').removeClass('hide--second');
		  $('.change-message--on-load').addClass('hide--first');
		}

		$.cookie('hide-after-load', 'yes', {expires: 7 });
	});
</script>

Step 5 - Add cookie on click

In the demo page, you saw that the second container would hide the first message and show the other one, only after you clicked on the “×” icon. First we need to add an empty href tag for the icon to our HTML:

<p>You can only hide this message, by clicking the &times; on the right of this box <a href="#" class="close" title="Hide This Message">&times;</a></p>

To position the “×” icon to the top-right of the container, we use the absolute inside relative container trick in the CSS:

.message {
	position: relative
}

.close {
  color: #f00;
  position: absolute;
  text-transform: lowercase;
  right: 20px;
  font-size: 1.5em;
  top: 10px;
  line-height: 1;
  border: none !important;
}

Inside the JavaScript tag, we add the code to do something once the icon is clicked. In this case, return nothing so that the URL is not populated with the empty href hash (#) symbol:

$('.close').click(function() {
  return false;
})

Once the user has clicked on the icon, we need to check whether the parent container of the icon is displaying the first message or the second. If it displays the first message, hide it by changing its class. Finally, we also add a cookie with the variable yes so that this option is remembered next time.

if (!$('.change-message--on-click').is('hide--first')) {
  $('.change-message--on-click').removeClass('hide--second');
  $('.change-message--on-click').addClass('hide--first');

  // add cookie setting that user has clicked
  $.cookie('hide-after-click', 'yes', {expires: 7 });
}

The complete script when clicking the icon looks like this:

  $('.close').click(function() {
    if (!$('.change-message--on-click').is('hide--first')) {
      $('.change-message--on-click').removeClass('hide--second');
      $('.change-message--on-click').addClass('hide--first');

      $.cookie('hide-after-click', 'yes', {expires: 7 });
    }
    return false;
  })

But wait, we are not done! We also need to check if the clicked cookie has the yes variable attached to it. If it does, show the second message, and hide the first:

if ($.cookie('hide-after-click') == 'yes') {
  $('.change-message--on-click').removeClass('hide--second');
  $('.change-message--on-click').addClass('hide--first');
}

The complete code for the second example:

<script type="text/JavaScript">
  $(document).ready(function() {
    // COOKIES
    // if the cookie is true, hide the initial message and show the other one
    if ($.cookie('hide-after-click') == 'yes') {
      $('.change-message--on-click').removeClass('hide--second');
      $('.change-message--on-click').addClass('hide--first');
    }



    // when clicked on “X” icon do something
    $('.close').click(function() {
      // check that “X” icon was not cliked before (hidden)
      if (!$('.change-message--on-click').is('hide--first')) {
        $('.change-message--on-click').removeClass('hide--second');
        $('.change-message--on-click').addClass('hide--first');

        // add cookie setting that user has clicked
        $.cookie('hide-after-click', 'yes', {expires: 7 });
      }
      return false;
    })
  });
</script>

Download and browse the complete code on GitHub.

Conclusion

Cookies can be used in many ways. Now you know how to create your own Hellobar. You could take it a step further and figure out how to authenticate users (remember login details) and save entire sessions in the cookies (sign up process doesn’t get lost in case you refresh the page).

Hide and show a div 27 Feb 2012 3:00 PM (13 years ago)

Hiding and showing a div in HTML is really simple. In this tutorial I will show you how to do that using only CSS. I will also show you another version of hiding and showing divs using jQuery. Furthermore, we will take the necessary precautions if Javascript is disabled. Let’s dive in!

Hide and show a div with CSS

The first method, involves using only CSS. We will use the CSS pseudo-class :hover. The idea is that we want to hide the div once the user has moved their mouse over it, and display something else instead. This effect is commonly used when you have a subscribe button. It saves space, without compromising the necessary information for the user.

View the Demo →

HTML Code

First we need to add the HTML. We create a div, .subscribe; inside it we add another div and a form, which is hidden at first. Once the user moves their mouse over the .subscribe div, the inside div is hidden and the form is displayed. The form was made to work with FeedBurner. You can replace the form with whatever you want. If you want the form to work for your account, replace alexcican from the …a/mailverify?uri='xxxxx' and value='xxxxx' with your FeedBurner URI.

<div class="subscribe">
	<div>Subscribe to this website</div>
	<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=alexcican', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" >
		<p>
			<input type="text" class="email_field" name="email" size="18" value="E-mail address" />
			<input type="hidden" value="alexcican" name="uri" />
			<input type="hidden" name="loc" value="en_US" />
			<input class="email_btn" name="submit" type="submit" value="Done" />
		</p>
	</form>
</div>

CSS Code

Next we have to add some CSS. By default, the elements that will be hidden are: a) the form and b) the inside div (once the .subscribe div is hovered). To affect something with CSS you add “ > ” at the end of the class, meaning you target the descendants of that class. For example: .this_class>affects_this. The one class you are changing must be a child of the parent class (in the previous example affects_this is the child of .this_class). The second CSS statement, tells the browser to show the form once the .subscribe div is hovered.

form, .subscribe:hover>div {
	display: none;
}

.subscribe:hover>form {
	display: block;
}

That’s all you need to make this work. Now, it’s up to you; style it and make it look sexy with some cool CSS3 coding.

Hide and show a div with JavaScript

In this second example, we hide and show a div using a JavaScript library, called jQuery. This time, we won’t hide the div when it’s hovered but when it’s clicked. By default the divs will be hidden; once they are clicked, they become visible, displaying the text inside. Also, we want each div to be “independent“ from one another. Meaning, if I click on the first div to see its content, the other divs should remain hidden.

View the Demo →

HTML Code

To get this to work, we will add two divs, one inside the other. The outer div will always be displayed, along with a title wrapped inside an h3 heading. The inner div will be hidden by default and once the outer div is clicked, the inner div will be shown. Feel free to alter the code to your needs. For example you can hide the divs completely once they are clicked, or you can add a button to hide them.

<div class="text_container">
	<h3>This is a third title...</h3>
	<div><!--div that we want to hide-->
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam blandit, eros id adipiscing congue, lorem ante sagittis elit, id malesuada nibh est sed orci</p>
	</div>
</div><!--end div_text_container-->

CSS Code

In the CSS we will add two classes. One class, named .hidden, will hide the element and the other named .visible will display the element. Since we want to affect the div inside, we will be adding >div to the class. You can change it to whatever you want, for example >span. This will affect the span element inside the outer div.

.hidden>div {
	display:none;
}

.visible>div {
	display:block;
}

JavaScript Code

Up until now, nothing happens. The divs are still visible and when you click on them, nothing happens. For a good reason; if the user has JavaScript disabled on their browser, they should still be able see and read the content of the divs. You should always use JavaScript as an enhancement and improve the browsing experience not degrade it.

Now, inside JavaScript we will hide the divs once the document has finished loading. This will be our default state. We hide the divs by adding a CSS class called hidden to the outer div called .text_container. This will trigger CSS to hide the inner div.

Once the user has clicked the div we will check to see if the div has a class hidden then we remove it and add the class visible which will show the inner div. If it doesn’t have the hidden class then it means that the inner div is visible; add a class hidden to the outer div to hide the inner div. Don’t forget to call jQuery before adding the following script:

<script type="text/javascript">
	$(document).ready(function(){
		$('.text_container').addClass("hidden");

		$('.text_container').click(function() {
			var $this = $(this);

			if ($this.hasClass("hidden")) {
				$(this).removeClass("hidden").addClass("visible");

			} else {
				$(this).removeClass("visible").addClass("hidden");
			}
		});
	});
</script>

Conclusion

See how simple it is to hide and show a div? As a farewell gift from me to you, I will share with you another JS code. Following the same pattern of this code you can manipulate CSS values from within JavaScript directly, without having the need to add a class.

You can alter many CSS values, for example the JS code below will hide the .text_container element and change the font colour to red.

<script type="text/javascript">
	$(document).ready(function(){
		$('.text_container').click(function() {
			$('.text_container').css("display", "none");

			$('.text_container').css("color", "red");
		});
	});
</script>

Use the code wisely. If you have any questions, ask them in the comments section below.

Top 5 reasons why you shouldn’t start creating websites 23 Feb 2012 3:00 PM (13 years ago)

The Internet is becoming mainstream, and business opportunities are growing fast. More than ever, I see ads claiming to show you how to make shitloads of money by working from home, via the Internet. One way is by working as a freelance website designer/developer. I wrote this post in order to expose the risks of this industry and what I’ve learned from working in the field.

Throughout the post, I will assume you will be dealing with both the design and the development of websites, as I have been doing.

Reason #1 – It takes time

It takes a long time to learn how to design, how to see. In order to design a good website, you have to learn how to compose the elements of the page, what colour palette to use, typographic hierarchy, font pairing, in one word: design.

But designing websites doesn’t end there. You must also learn how to write good copy, headlines that attract the attention of the user, what makes users click, design for older browsers and devices, how to make a site usable, accessible, analyse analytics, and so on.

If you’re also coding the website, it takes time to master HTML and CSS. You might learn them in a few days, they’re easy languages to learn, but it takes time to master them.

In the beginning it will be hard to get it right. With time and practice, you will train your eye to see good design and you will create better websites. Around that time, your pay rate will also go up.

The super-fast growth of web technology, makes it hard to keep up. Browsers constantly evolve, new ones also emerge. You might be thrilled having just finished a new website, and just for fun you decide to test the website with other browsers; you discover that in one browser, one particular browser…, your website isn’t displaying properly. Now you have to search for hacks and solutions.

Mobile phones have entered the game, and now you also have to learn how to optimise your website for mobile phones—small file sizes for fast loading times, big type and contrast for small screens, and so on.

There’s a strong possibility that by the time you’ve learned and mastered all these skills, the trends would have already changed. Now you are left behind, watching helplessly how others who ride the “trend wave” get all the clients.

There is a hidden pitfall, which goes by “I don’t follow trends”. Well buddy, as far as I’m concerned, you can design your website like it’s 1999 but don’t expect to lock-in any clients. Adapt or die…

Reason #2 – The competition

You’ll find out sooner or later that competition is fierce! I often think that the Internet is filled only with website designers and developers! Wherever I turn my head—digitally of course—there is a dude or a dudette offering website design services.

Now, whether they know how to design and develop a website is irrelevant. Yes, completely irrelevant. Because there are many clients; hell, the majority of them who will want a website done for the minimum cost. It doesn’t matter if it’s going to cost them more in the long run. They just don’t see the forest behind the tree.

I want to share with you a trade secret: avoid clients who say they don’t have the budget. Those who suggest you do it for free or some other bullshit compensation. They’re a pain in the arse to work with. I figured a way to repel those timewasters. In your contact form, show a “what’s your budget” input field, if the message is work related. I wrote more on the lost art of pricing and negotiating.

And remember this: there is always going to be someone who can do the job faster, or cheaper, or even better than you. This applies to any business. But in the website creation business, the amount of people who can do it faster and cheaper than you is infinitely larger! So you have to differentiate yourself, and stand out from the crowd.

Reason #3 – There are no standards

There are certain standards and quality controls that you need to follow when manufacturing a laptop, for example. From the client’s perspective, there is also a standard of price versus quality.

You know that if you want to buy a good laptop you are required to spend something between $600 – $1000. If you want a “top of the range” laptop you will go for an Apple MacBook Pro, or an Alienware, and expect to pay something between $1200 – $7000. My point is that you can estimate the value and cost.

This kind of standard, the baseline price you need to pay for a quality product, is inexistent with websites. You can pay something from $0 (carbonmade.com, webs.com, wix.com), to $45 – $159 (PSD to HTML: xhtmlchop.com, psd2html.com), to $50,000 (for a full e-commerce hand crafted, custom made with extra features). There is no price point limit! Apart from this being confusing to clients, it is also confusing to you, the website creator. You don’t know how much to charge; hell you aren’t even sure if you should charge by the hour or by the project!

No matter how crappy the coding is, if you deliver, the client will say thank you. That is until they realise that blind users can’t browse their website, or that older versions of browsers don’t even render the website, or that conversion rates suck and users are not returning back. Too late for that, the bird has left the nest…

Wrapping your head around all these issues can be overwhelming. Want to join this chaotic business? Be my guest! But again, don’t say I didn’t warn you!

Reason #4 – The Client

This one is tied with the previous reason, the lack of standards. Because of a utopian perception, the client thinks they can ask for the moon and the stars, and be given to them. Moreover, they make an outrageous request and offer to repay you with an X amount of money. When you say that it’s impossible because you need at least 3X to complete their request, they threaten to go to someone else. At this point you have two options:

1. if you are low on cash you will suck up and do the job.
2. if you are a kick-ass person (a starving kick-ass person or not, it doesn’t matter), you will show them the finger and move on.

There is one personal trait you need to improve in this kind of business: dealing with clients. Sure, bad clients exist anywhere but if you join this business you will discover that there is no shortage of them here.

Don’t get ripped off by clients. Use contracts to avoid headaches in case something goes wrong, and ask for payment up front—depending on the scale of the project either 50%, 30%, or 20% of the total price.

Reason #5 – It can get lonely

Being a one man army, jack of all trades can become tiresome at some point. Working infinite hours in front of a computer (developer, designer), dealing with money (accountant), dealing with problems (IT support), dealing with clients (support/secretary), etc. can burn you out in no time. You have to develop all the aforementioned qualities, and have a strong character to keep going.

If you’re going through hell, keep going - Winston Churchill

There won’t be anyone behind you (or “above” you) checking to see if you’ve done the work. Your work/life balance will also get disrupted. But if you’re like me, and you can get more done by eliminating distractions such as coffee breaks, telephone interruptions, meetings, colleagues, then this profession might be worth trying it out.

If you’d like to join us, and want to learn more about freelancing, where to get started, books and resources, etc. ask me anything on Twitter.

How to remove .php, .html, .htm extensions with .htaccess 18 Feb 2012 3:00 PM (13 years ago)

I recently wanted to remove the extensions from my website, in order to make the URLs more user and search engine friendly. I stumbled across tutorials on how to remove the .php extension from a PHP page. What about the .html? I wanted to remove those as well! In this tutorial I’ll show you how to do that easily, by editing the .htaccess file.

What is an .htaccess file

An .htaccess file is a simple ASCII file that you create with a text editor like Notepad or TextEdit. The file lets the server know what configuration changes to make on a per-directory basis.

Please note that .htaccess is the full name of the file. It isn’t file.htaccess, it’s simply .htaccess.

.htaccess files affect the directory in which they are placed in and all children (sub-directories). For example if there is one .htaccess file located in your root directory of yoursite.com, it would affect yoursite.com/content/, yoursite.com/content/images/, and so on…

It is important to remember that this can be bypassed. If you don’t want certain .htaccess commands to affect a specific directory, place a new .htaccess file within the directory you don’t want to be affected with the changes, and remove the specific command(s) from the new file.

Features

With an .htaccess file you can:

• Redirect the user to different page
• Password protect a specific directory
• Block users by IP
• Preventing hot-linking of your images
• Rewrite URLs
• Specify your own Error Documents

In this tutorial we’ll be focusing only on rewriting URLs.

Removing Extensions

To remove the .php extension from a PHP file for example yoursite.com/wallpaper.php to yoursite.com/wallpaper you have to add the following code inside the .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

If you want to remove the .html extension from a html file for example yoursite.com/wallpaper.html to yoursite.com/wallpaper you simply have to change the last line from the code above, to match the filename:

RewriteRule ^([^\.]+)$ $1.html [NC,L]

That’s it! You can now link pages inside the HTML document without needing to add the extension of the page. For example:

<a href="http://whatever.com/wallpaper" title="wallpaper">wallpaper</a>

Adding a trailing slash at the end

I received many requests asking how to add a trailing slash at the end, for example: yoursite.com/page/

Ignore the first snippet and insert the code below. The first four lines deal with the removal of the extension and the following, with the addition of the trailing slash and redirecting.

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^/]+)/$ $1.php
RewriteRule ^([^/]+)/([^/]+)/$ /$1/$2.php
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !(\.[a-zA-Z0-9]{1,5}|/)$
RewriteRule (.*)$ /$1/ [R=301,L]

Link to the HTML or PHP file the same way as shown above. Don’t forget to change the code if you want it applied to an HTML file instead of PHP.

Some people asked how you can remove the extension from both HTML and PHP files. I don’t have a solution for that. But, you could just change the extension of your HTML file from .html or .htm to .php and add the code for removing the .php extension.

Conclusion

For those who are not so experienced with .htaccess files there is an online tool for creating them. It’s useful for novice users to get started, and easy to use.

Updates

Attention GoDaddy users: In order to remove the extensions you need to enable MultiViews before. The code should look like this:

Options +MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

If you’re worried that search engines might index these pages as duplicate content, add a <canonical> meta tag in the <head> of your HTML file:

<link rel="canonical" href="https://alexcican.com/post/single-post" />