Posted on Leave a comment

Launch of Front-end Development Store

Front-end web development can be a pain. Your client asks for something simple, assumes it’s a quick job, yet often that isn’t the case. Perhaps you can put together the necessary CSS, HTML, and JavaScript quickly, but are you building it in the most maintainable way? Does it work in all of your target browsers? We’ve known front-end development is more time-consuming than it needs to be for some time and to work around that, the community has produced a lot of timesaving libraries, frameworks, and snippets. Despite this, there are plenty of times where I’m building something and think, this is something unique that others could use. If I could make it a little more extensive outside of the usual time constraints of a client project, it could save me and other developers time in the future. That’s why I’ve launched a store on my website.

Store products
Products on sale at launch

I’ll be selling simple front-end related components comprising of HTML, CSS, and JavaScript. If it’s a useful combination of code in a project, I’ll extend it into a well-documented and customisable component for sale in the store. My focus will be on simplicity for both users and developers, browser compatibility, and performance.

Currently I have Hover.css and Sequence.js in the store which have been available on other platforms for a good few years. All items added to the store will continue to be open-source and free for personal use or made available under a paid license for commercial use. This seems to me like the best way forward as those wanting to learn from code, use it for charity sites etc, still can, but selling licenses for commercial use will allow more time to spend on improving and creating new products.


Limited Time Offer – Get 50% Off Hover.css

Add Hover.css to your front-end development toolbox for $9 (50% off) until end of September. Use coupon code launch when purchasing an Extended Commercial license.

Get 50% Off Hover.css

Posted on Leave a comment

Announcing Sequence.js Version 2

Today I’m excited to announce the release of Sequence.js version 2. To jump straight in, head over to sequencejs.com or view some of the example themes below. Read on for more information and a coupon code for 50% off in the Sequence.js Theme Store.

Modern Slide In - A product slider
Modern Slide In – A product slider
Photo Stack - An image slideshow
Photo Stack – An image slideshow
Two Up - A fullscreen portfolio website
Two Up – A fullscreen portfolio website
Pop Slide - An image carousel
Pop Slide – An image carousel

To celebrate the launch of the all-new Sequence.js, we’re offering a 50% discount on all commercial licenses and premium themes. Use the coupon code go-sequence at checkout.

What is Sequence.js?

Sequence.js is a CSS animation framework powered by JavaScript. Create animated, step-based applications such as sliders and presentations using simple CSS class names that describe how content should transition when animating in and out of an active state.

It provides all of the JavaScript functionality you might need for step-based applications, such as touch support, preloader, auto play, and more. It supports modern browsers as well as Internet Explorer 8 and 9 via a fallback theme.

Unlike other animation solutions, Sequence.js provides a CSS animation framework; meaning it fits in perfectly with a workflow you are familiar with. There’s no special syntax to learn, just use the CSS you’re used to. Because of this progressive workflow, it supports responsive design, hardware acceleration, preprocessors, and anything else already in your toolkit.

What’s New in Sequence.js Version 2?

For the initial release of version 2, we rewrote the framework from scratch. We’ve resolved many of version 1’s limitations so you can get to creating animated applications even quicker. The framework is no longer dependent on jQuery, written entirely in vanilla JavaScript, still with a robust API and extensive documentation.

One of the biggest new features is the ability to animate the canvas as well as content. Regardless of where you position your steps, Sequence.js can now automatically animate the canvas to make the active step appear in the containing window.

Where Do I get It?

Head over to sequencejs.com to download the framework or view our example themes. Sequence.js is also available as open-source on GitHub.

To get started, please see the documentation which acts as both a walk-through tutorial and reference guide.

Posted on Leave a comment

Hover.css Version 2 Release

Hover.css Version 2 is now available. This version includes over 100 effects, including new categories of buttons for background styles and buttons with icons.

The new icon effects available in Hover.css v2
The new icon effects available in Hover.css v2

By popular demand, Hover.css is now also available in LESS format, as well as the pre-existing SASS. Along with the new effects v2 also includes various improvements such as class prefixes to make sure the library is less likely to conflict with other styles you may have on your page.

If you’d like to add your own effects to Hover.css, please submit a pull-request on the GitHub page.

Posted on Leave a comment

Mazwai – Free and Top Quality Stock Video Library

Looking for top quality video footage for your project? Check out Mazwai, a library of free and high quality stock video made available under an Attribution license (CC BY 3.0). Unlike most libraries, each video is carefully sourced, so although the library isn’t huge, each video is beautiful. Ideal for your open-source projects courtesy of the creative commons license.

mazwai

I came across Mazwai several months ago and am pleased to see lots of videos have been added since.

More information about each video and its license can be found by clicking the video’s download button.

Posted on Leave a comment

Browser Testing Internet Explorer with VMWare Fusion and Snapshots

Browser testing IE (Internet Explorer) has for a long time, been a pain. Not mentioning the lack of standards compliance in older versions that are still in use today, only one version of IE can be installed on an opertating system at a time. There are multiple ways around this, each with their own pros and cons. My prefered choice is to use virtual machines via VMWare Fusion for Mac. The only downside to this solution for me is the amount of space required for each virtual machine and their maintenance.

In this article, I’ll describe how you can efficiently test versions 7 – 11 of Internet Explorer, without gobbling up precious drive space. If you’re not using VMWare Fusion for Mac, keep reading as the methodology applies to other similar software too, such as VMWare WorkStation and Parallels.

Sourcing Virtual Machines

A virtual machine is a software emulation of a computer. It allows you to run an operating system on another operating system — Windows on a Mac for example.

Kindly, Microsoft have made virtual machines of their operating systems and browsers available for free on modern.IE. Aside from hosting virtual machines, there are many more useful tools and tips for working with Internet Explorer so consider having a look around the site.

Some of the virtual machines made available for VMWare Fusion on modern.IE
Some of the virtual machines made available for VMWare Fusion on modern.IE

modern.IE hosts Windows XP virtual machines, right through to the latest Windows 8.1 and browser versions are made available on mutiple operating systems where applicable – IE10 on Windows 7 and 8 for example.

Installing a virtual machine doesn’t come cheap though — when installed, they weigh in at around 10 – 20GB, so if like me you only have a small drive, you don’t have the freedom to download them all.

In my freelance work, I test Internet Explorer versions 7 – 11. So, do I download 5 virtual machines? No. On top of the space taken up by my own operating system, that probably wouldn’t leave any room to work. There’s a much more efficient way to proceed.

Firstly, Internet Explorer 7 is only made available on Vista, so I have no choice but to download the IE7 – Vista virtual machine.

Internet Explorer Versions 8 – 11 however, can all be run on Windows 7. Rather than download 4 hefty virtual machines just for each browser version, we can instead download one then make use of VMWare Fusion’s Snapshots feature.

Setting up Virtual Machines

To set up a virtual machine, follow these steps:

  1. Once you’ve downloaded the virtual machine you’d like to install, follow the instructions at the bottom of the page you got them from to turn the files into virtual machines.

  2. Open VMWare Fusion and you’ll be greeted with the Virtual Machine Library. Click the Add button, followed by “New…”.

  3. As our virtual machines are file based, we don’t have a disc, so click “Continue without disc”. Then click “Use an existing virtual disk”.

  4. In the file dialog that appears, find the virtual machine you’d like to install and within it click the .vmdk file. As the aim is to use as little space as possible and the virtual disk is one we just created, I’d recommend choosing the “Take this disk away from the virtual machine currently using it” option.

  5. With “Take this virtual disk…” selected, click “Choose”, then “Continue”.

  6. On the next page, choose the Operating System and Version you are installing, then “Continue”.

  7. Click “Finish”.

Windows Vista installed and available in the Virtual Machine Library
Windows Vista installed and available in the Virtual Machine Library

When the virtual machine has been installed, you’ll see it appear in the VIRTUAL MACHINES list. Double click the virtual machine to have it run.

When the operating system starts, VMWare Fusion will install some drivers to extend its functionality on the operating system. Wait for it to complete and you’ll be prompted to restart. Do so and once the operating system has booted again, shut it down.

Setting Up Snapshots

Whilst you were waiting for the drivers to install you may have noticed the desktop background had some information about the virtual machine (if you downloaded the modern.IE virtual machine’s, that is).

Most importantly, the information stated that the operating system only has a 30-day trial license. To work around this, we need to create a snapshot. A snapshot will save the state of a virtual machine. As we’ve only just set up the operating system, if we create the snapshot now then restore it at a later date, the 30 day trial will start from scratch again — allowing us to work around the 30-day trial limitation forever.

  1. With the virtual machine shut down in the Virtual Machine Library click “Snapshots”
  2. Click the “Current State” to highlight it
  3. Click “Take” to take a snapshot

With the snapshot set up, whenever you want to start from that point in time again, click the “Snapshots” button in the Virtual Machine Library and double click the snapshot. You’ll be asked if you want to save changes to the “Current State” — essentially, creating another snapshot. As we’ve got the operating system ready for testing though, we don’t need another snapshot, so click “Don’t Save”.

Multiple Browsers on the Same Virtual Machine via Snapshots

I mentioned earlier that I use snapshots to run Internet Explorer versions 8 – 11 on one Windows 7 virtual machine. A snapshot takes up much less space than an entire virtual machine — saving lots of disk space.

Multiple Windows 7 Snapshots for each version of Internet Explorer 8 - 11
Multiple Windows 7 Snapshots for each version of Internet Explorer 8 – 11
  1. With the Windows 7 virtual machine installed click it once in the VIRTUAL MACHINES list, then click “Snapshots”.
  2. If you followed both the Setting Up Virtual Machines and Setting Up Snapshots instructions above for the IE8 – Win7 virtual machine, then you should have a “Current State” listed and a snapshot. Name the snapshot IE8.
  3. Double click this snapshot, followed by “Don’t Save” to make it the current state.
  4. Go back to the Virtual Machine Library and click “Start Up”.
  5. With Windows 7 booted, open IE8, go to your prefed search engine and search for “download IE9”.
  6. Download and install IE9. We now have an IE8 snapshot, and IE9 installed in our “Current State”.
  7. Shut down the virtual machine, click “Snapshots” and with the “Current State” highlighted, click “Take” again. Save this snapshot as IE9.
  8. Repeat steps 3 – 7, to install IE10 and IE11 into their own snapshots.

Once complete, you’ll have two virtual machines listed, one Vista with a snapshot for IE7, the other Windows 7 with 4 snapshots for IE8 – IE11.

Maintaining Virtual Machines

If maintaining space is really essential, every so often you should shut down your virtual machines and use VMWare Fusion’s “Clean Up Virtual Machine” option. You can get to this by right clicking a virtual machine in the list, then choose “Get Info…”.

Conclusion

By utilizing VMWare Fusion’s Snapshots feature, we’re able to test all versions of Internet Explorer that are still deemed to be in use today without taking up huge portions of a drive’s space.

Posted on Leave a comment

Get Current Working Directory for Yeoman and Inquirer.js

Today I’ve been working on a Yeoman generator for Sequence themes. It’s my first time creating a Yeoman generator and so far so good. One small area I got stuck on though was getting the name of the current working directory and using it as a default for a generator question.

When you launch the Sequence theme generator using the command yo sequence, the first question is “what do you want to call your Sequence theme?”. I wanted the default option to be the same as the name of the current working directory. I couldn’t find how to do this in the documentation for Yeoman or Inquirer.js (which Yeoman utilises for prompts such as these) but that’s mainly because its functionality that belongs to Node.js (which both of these technologies are built upon). As I’m unfamiliar with Node.js and it didn’t even cross my mind, my Google searches didn’t return an answer.

Here’s a little snippet to get the name of the current working directory for your Yeoman and/or Inquirer.js prompts:

var prompts = [
  {
    name: 'themeName',
    message: 'What do you want to call your Sequence theme?',
    default: process.cwd().split(path.sep).pop()
  }
]

process.cwd() will get the path to the current working directory, in my case /Users/Ian/Sites/sequence-theme, split it into an array using / as a path separator ['Users', 'Ian', 'Sites', 'sequence-theme'], and then return the last entry in the array sequence-theme (the directory name I wanted).

Posted on Leave a comment

Experimenting with Custom Functionality Appropriate to a User’s Scrolling Behaviour

Scrolling is one of the web’s most basic methods of navigation, allowing a user to move to a position on a page in multiple ways: dragging the scroll bar, using a mouse-wheel, swiping on a touch enabled device, pressing space, clicking an anchor link, and so on.

The way in which a user scrolls can reveal a lot about their intentions. For example, if a user is scrolling up towards the top of a page very quickly, are they focused on content? Most likely not. We can assume they’re looking for something such as navigation links. Knowing this, we can make those links appear sooner to save the user having to scroll to the very top of the page.

In this article, I experiment with improving a user’s experience based on their scrolling behaviour and determine whether this is a technique applicable to the real-world.

Existing Methods of Determining User Behaviour

Possibly the most successful use for determining user behaviour on the web today is a method known as Hover Intent.

Hover Intent is described (although not named) in Ben Kamens’ Breaking Down Amazon’s Mega Dropdown. This technique determines whether a sub menu should remain open and prevents other sub menus from opening based on the user’s cursor direction. If it appears the user is moving toward the sub menu belonging to a parent link, then it will remain open regardless of the user hovering over other parent links.

There is also a jQuery plugin available called HoverIntent, which works in a similar way to Amazon’s drop-down menus, except HoverIntent works on a timer rather than determining cursor direction. It improves upon jQuery’s hover() method by only initiating an hover event when the user’s cursor has slowed down on a particular element. This way of determining intent ensures no drop-down menus open when the user quickly hovers over them in the process of trying to reach another element for example.

Uses for Determining Scroll Intent with scrollIntent.js

As we’ve seen with Hover Intent, the functionality of a web page can change to assist the user based on their behaviour. How can this be applied to the method of scrolling and what uses does it have?

To experiment with this methodology, I created scrollIntent.js, a JavaScript plugin that allows the executing of functionality specific to a user’s scrolling behaviour.

The following are some example uses for determining Scroll Intent and how they were implemented using scrollIntent.js.

Infinite Scrolling with a Footer

The use of infinite scrolling is controversial; whilst it has its advantages, it comes with plenty of disadvantages too, as described in Infinite Scrolling: Let’s Get to The Bottom of This.

In short, Infinite Scrolling is a technique used to load and append more content as a user reaches the bottom of a page. This creates an endless feed of content, allowing a user to continuously read without ever having to break their focus to navigate to the next page. It has its downsides though; content can lose hierarchy, scroll bars don’t represent the amount of data available, infinite content can overwhelm the user, the footer can never be reached, and so on. All problems which can lead to user frustration.

We can’t solve all of these issues but we can offer a solution to not being able to reach the footer by determining the user’s intent whilst scrolling.

Let’s take a couple of use cases on a typical web page:

  • A user is scrolling very slowly using their mouse-wheel, moving toward the bottom of the page
  • A user is pressing their keyboard’s down key every so often, moving toward the bottom of the page
  • A user is scrolling very quickly using their mouse-wheel, moving toward the bottom of the page

In the first two use cases, we can assume the user is reading and focused on the page’s content; they are moving down the page very slowly. For these behaviours, the Infinite Scrolling functionality is perfect; the user is focused on the content, so let’s give them more as they need it.

In the third use case however, the user is scrolling far too quickly to be able to read the content, we can assume that rather than reading content, they are looking for something else on the page. If they reach the bottom of the page, then do they really want more content? In this case, let’s forgo the Infinite Scrolling functionality and allow the user to naturally reach the page’s footer where they can find navigation links or other information more appropriate to the behaviour they’re exhibiting.

Using scrollIntent.js, we can selectively execute the Infinite Scrolling functionality, like so:

    var actions = [

      //ACTION 1
      {
        scrollMethod: ["mousewheel", "scrollbar"],
        direction: "down",
        maxSpeed: 100,
        waypoint: "100%",
        waypointRelativeTo: document.body,
        waypointOffset: -300,
        callback: function() {

          ajax.load();
        }
      },

      //ACTION 2
      {
        scrollMethod: ["down", "space"],
        keyPressesPerEvent: 1,
        waypoint: "100%",
        waypointRelativeTo: document.body,
        waypointOffset: -300,
        callback: function() {

          ajax.load();
        }
      }
    ]
    scrollIntent = new ScrollIntent(window, actions);

The above code will initiate scrollIntent.js on the window (the web page) and specifies our use cases — described as “actions” in scrollIntent.js. Both actions will execute ajax.load() (the functionality used to load more content and create Infinite Scrolling) but only when all conditions from one of the following actions are met:

  • Action 1:
    • The user is scrolling by using the mouse-wheel or scrollbar
    • The user is scrolling down (toward the bottom of the page)
    • The user is scrolling slower than 100px per 250ms*
    • The user passes a waypoint 300px from the bottom of the page**
  • Action 2:
    • The user is scrolling by pressing the down or space keys
    • The user is pressing the down/space key once per action (rather than holding it down)
    • The user passes a waypoint 300px from the bottom of the page**

*scrollIntent.js will check specified conditions every 250ms during the period the user is scrolling. This value can be changed in the options.

**This condition is made up of waypoint, waypointRelativeTo, and waypointOffset.

When the user scrolls, these conditions will be checked every 250 milliseconds to determine if the user has completed one of the defined actions. If the user does complete an action, then more content is loaded else they just reach the bottom of the page.

Infinite Scrolling with a Footer demo

Intuitive Navigation

Let’s assume the user has spent 5 or 10 minutes reading a page with a lot of content. They’re a long way from the top of the page where the navigation resides and they want to go to another page. There are multiple ways to reach the top of a page quickly but we can’t rely on the user always knowing the fastest method. The user starts spinning their mouse-wheel and it takes them a good 5 spins and several seconds to reach the top. Can we improve that experience for them?

With the following code, we can hide a fixed position navigation menu after a 300px waypoint and then show that menu when the user scrolls anywhere after that 300px waypoint at a speed greater than 150px per 250ms:

var actions = [

  // ACTION 1
  {
    waypoint: 300,
    direction: "down",
    callback: function() {

      menu.hide();
    }
  },

  // ACTION 2
  {
    waypoint: 300,
    direction: "up",
    callback: function() {

      menu.show();
    }
  },

  // ACTION 3
  {
    minWaypoint: 300,
    minSpeed: 150,
    callbacksPerAction: 1,
    callback: function() {

      menu.show();
    }
  }
];  
var scrollIntent = new ScrollIntent(window, actions, options);

Again, scrollIntent has been initiated on window (the web page), then the following actions are described:

  • Action 1
    • Hide the menu when the user scrolls down over a 300px waypoint
  • Action 2
    • Show the menu when the user scrolls up over a 300px waypoint
  • Action 3
    • When the user scrolls faster than 150px per 250ms, show the menu (only once per action and anywhere after the 300px waypoint)

With these actions applied to scrollIntent.js, when it appears the user is no longer focused on content and trying to reach somewhere on the page, the navigation header will appear to assist them, and save the user having to scroll all the way to the top of the page.

Intuitive Navigation demo

Other Uses for Determining User Intent

The following are some other ways in which determining user intent could be used.

Data Collection

The Scroll Intent examples I’ve described above make large presumptions about how a user behaves. To be able to provide the most accurate functionality specific to a user’s intent, a large amount of research and testing would be required.

Prior to implementing any custom functionality, determining user intent could be used to collect and send that data to your server, enabling you to make more accurate assumptions about how users behave.

Type Intent

Over the last several years, the web has seen the introduction of search suggestions. This is where the contents of a user’s search query is sent to a server as the user types, and then returns suggestions based on what they’ve typed so far.

Although useful, it seems somewhat wasteful to always try to make suggestions when the user is typing quickly.

When a user is typing quickly into a search field and exhibiting a behaviour that suggests they know exactly what they are searching for, do they really need suggestion functionality? By making suggestions only when the user appears to be typing slow, the server needn’t be queried as much.

Capturing Method of Interaction and Running With It

Often a user has multiple ways of interacting with a page. Take for example, scrolling. The user may use a mousewheel or touch device, press up/down/space/page up/page down on their keyword or use their cursor to interact with the scrollbar — all ways of making a page scroll. By determining which of these methods they use, a page could change to better accommodate the user’s behaviour or provide tips on how else they could achieve the same goal.

Capturing User Mistakes/Misuse

Sometimes a user may complete an action that the website page/application doesn’t intend for them to do. For example, on a page with drag ‘n’ drop functionality, the user may drop an element into an area that isn’t a drop zone, by monitoring their behaviour, you could alert them to the fact the drop zone is elsewhere by making it subtly flash or rumble.

Conclusion

By providing custom functionality appropriate to a user’s behaviour, we can present the user with a more tailored experience to them, but can it work in a real-world application?

In the Infinite Scrolling with a Footer demo, the infinite scrolling functionality only executes when the user is scrolling below a certain speed at a particular point on the page. Sometimes the user will see additional content load, other times not. This may prove to be confusing and frustrating for a user because the functionality to them does not appear consistent and with no indication of what is happening.

If the Infinite Scrolling with a Footer demo were to succeed in the real-world, the way in which more content is loaded would need a lot of user testing to ensure the experience is seamless. With so many ways in which a page can scroll and so many user behaviour patterns though, to achieve a seamless experience for all users would most likely be impossible.

It can be argued that the Intuitive Navigation demo also presents a lack of consistency — showing and hiding the navigation header when the user scrolls quickly/slowly. Without any indication of why the header is showing/hiding the user may see it as a random and inconsistent event. Unlike the Infinite Scrolling demo however, it isn’t integral to their interaction with the page. The fact that the header appears when the user exhibits the behaviour of no longer focusing on content assists them to navigate elsewhere quicker. A greater benefit to the user that outweighs the minor inconsistency in my opinion.

Providing user-aware functionality is used to enhance a page, without affecting existing functionality, then I believe determining user intent can improve the usability of a page.

Currently, the web is built to account for many user behaviours but rarely extends to tailor itself to a specific user’s behaviour beyond its initial delivery. It seems that as web developers and designers, this isn’t a mindset we have. To make the web a more sophisticated place then, perhaps we should begin thinking about user-aware functionality and have its application in the back of our minds when building the future of the web.

scrollIntent.js and its documentation can be found on GitHub.

Posted on Leave a comment

Finding Work and the Time to Reap the Rewards of a Freelance Lifestyle

Since starting as a Freelance Front End Developer in 2011, and my “Going Freelance” series of posts, the question I’ve been asked the most is how do I find work. Finding work is without a doubt the biggest entry hurdle into freelancing.

Many who haven’t experienced freelancing consider it to be incredibly freeing. You’ll have more time to dedicate to learning your craft, work on personal projects, and perhaps even get to a position where those projects can start to contribute towards your income.

Only when you take the jump into the freelance lifestyle do you learn this isn’t quite accurate. Becoming a freelancer is to take on multiple job roles. No longer do you just work your craft, you’re also a marketeer, client relations, accountant, researcher, receptionist, cleaner, tea maker…the list goes on. Immediately, the amount of hours you can dedicate to the profession you love are reduced.

Finding work, and the time to reap the rewards of freelancing requires a careful strategy.

Combining Marketing, Learning and Personal Projects

With a limited amount of time in the day and so many roles to fill — not to mention doing the work you originally set out to do, as a freelancer, you need to make the most of your time. To treat marketing, learning, and personal projects as three separate entities probably won’t leave you with much time to make a success of any. My approach is to combine the three.

When I first started freelancing, I got print adverts placed in telephone directories and a local brochure, printed business cards, and did a small amount of networking. Admittedly, I only tried traditional marketing in perhaps the first six months of freelancing but it just didn’t get me very far.

Whilst hoping for that marketing to kick-in, I started work on better learning front end development. I’ve always found the best way to learn is to do, so I created little personal projects to help me learn.

As I was dubious about the traditional marketing I had done up to this point, I started blogging about my personal projects and made the code available for free. Although I didn’t immediately get work from this, I could see my exposure was increasing on social media platforms such as Facebook and Twitter.

Aside from my “Going Freelance” series of blog posts, I had written seven or eight tutorials to go along with my personal projects. Then I wrote Nikebetterworld Parallax Effect Demo, which exploded in popularity (and is still my most popular blog post at the time of writing).

In writing Nikebetterworld Parallax Effect Demo I had the opportunity to learn, create something fun, and increase my online exposure significantly. Aside from the time — which was well spent anyway, it didn’t cost me a thing and I probably got project requests relating to that blog post for about 18 months, solid enough to have seen me do nothing but those types of projects right the way through if I had wanted.

I killed three birds with one stone; marketing, learning and creating personal projects. It became apparent that traditional marketing wasn’t required.

Finding a Perfect Balance of Work and Play

To make a success of this way of finding work, you need to be careful to balance your time and money well. My Nikebetterworld Parallax Effect Demo post wasn’t followed by another for 6 or 7 months because I was so busy, but that meant personal learning and projects were put on the side too. A full schedule sounds ideal, but having spare time is crucial to keep getting future project requests.

Typically, I always find myself with a few days free here and there, or maybe a week or two between projects but I also schedule in periods of time set aside for the learning and personal projects that lead on to more project requests, perhaps two separate months each year.

To work in this way, you need to ensure your income covers the time when you won’t be working for clients but instead learning and promoting. Despite working for clients less, you’ll be much more of an asset when you do.

Earning Money from Personal Projects

Like many freelancers, you may want to get your personal projects into a position where they generate an additional income. How is this possible when you’re giving these projects away for free in return for exposure though?

In my experience, projects that gain the most exposure are those that are the most simple. If your project consists of multiple components, you could give only parts of it away for free, the parts that best demonstrate its purpose. With the project cut down to its core, not only are you simplifying how it is demonstrated, you also then have the option to sell its additional components.

I did this with Sequence. Sequence is a jQuery slider plugin that allows developers to create their own unique themes using CSS3 transitions. The plugin is open-source and comes with several free themes, but I also sell premium themes to earn an additional income.

Creating Successful Projects

I’ve found that the more simple a project, the more exposure it gains. However, gaining exposure doesn’t always mean getting work.

A simple project when viewed is immediately apparent — something visually stimulating. Anything that is purely code based (no visual output), requires reading documentation, interaction with an API and so on, I refer to as a complex project.

At the start of 2014, I released Hover.css. It took me a few days to get it to a state where I was ready to show the world. In a few weeks it has already over taken Sequence as my most popular project on GitHub, and gained me lots of new followers on Twitter, Google+ and so on. As yet though, I haven’t received any work requests directly from it.

I suspect as Hover.css is so simple, it doesn’t show off my skills enough to impress potential clients, neither does it represent anything so special that they may want applied to their own site, requiring the help of a developer.

Simple projects are great for increasing exposure but not necessarily gaining work. Of course, the more attention you have in the form of followers etc, the more your next project will spread. Mix simple projects to gain exposure with more complex ones to gain project requests.

Where to Release Personal Projects and Increase Chances of Going Viral

Once you have a project ready to share, spend some time adding social links to the demo page. The page should obviously show what you’ve created in the simplest way possible but also prompt viewers to share the work and follow you on social platforms.

Don’t add too many social buttons. Again, keep it simple. It may take some experimenting but you’ll eventually find the best social platforms that work for you. I tend to use GitHub (specific to web developers) and Twitter social buttons, but if people like my projects enough, they’ll do a little extra work and copy and paste the link into their chosen social platform any way.

I like to use GitHub’s Pages feature to create a demo page such as ianlunn.github.io/Hover/. Where you host the demo doesn’t really matter, providing the server can handle a large amount of traffic when your link goes viral.

With a demo page set up and ready to be shared, now is the time to let people know about it. As a web developer, the first places I tend to go are CodePen, Hacker News and Reddit. Designers may like to try sites such as Dribbble and Pinterest. These sites have a lot of viewers, so although you will only initially appear in the “New” pages — and possibly only for a few minutes/hours, depending on how many submissions they’re getting — you’ll still get some views. Should your project be interesting/useful enough, then these initial views could be enough to go viral.

When your demo page starts getting you new followers on the social platforms you chose to link to, be certain to use these platforms often. If somebody follows you on Twitter and you don’t tweet until a week later, they may have forgotten who you were and why they followed you, then unfollow. Keep going with your social presence and be sure your tweets/updates are of good value and not too far dettached from the original reason why people followed you in the first place.

Obviously, you can share your link on these social platforms too. Perhaps try to make what you share on social platforms a little more personal though, afterall, people have shown an interest in you by following, so now is a good time to start a conversation with them based on the links you are sharing.

If you’re completely new to social platforms and have no followership, know that it takes time. Keep going and most importantly, have fun. Sincerity is key. Although I am breaking down how to share your work using social platforms, the main reason I have a social presence is because it is fun. It’s an opportunity to connect and potentially work with people interested in similar topics to myself. Trying to game a social platform isn’t going to work.

Conclusion

By promoting yourself in this way, you have more time to learn and work on personal projects, and you’ll be more valuable to your clients — of which you’ll hopefully have more!

It’s important to note that not every project you release will be a success, often getting very little response, so the key really is to keep things as simple as possible and don’t give up. The beauty of open-source is that you (or anyone else) can always add more to the project at a later date, whether it be for fun, education or profit.

Good luck!

Posted on Leave a comment

hover.css Tutorial and Introduction

hover.css is a collection of CSS3 hover effects that can be easily applied to your own website’s elements, such as links, buttons, logos, SVG, and featured images. Available in CSS, SASS, and LESS.

There are over 100 effects to choose from, including 2D transsitions, background transitions, border transitions, icon buttons, shadow and glow transitions, speech bubbles, and page curls.

hover

hover.css is a stylesheet containing many different classes, each offering a different hover effect. If you’re comfortable with using CSS, then you most likely can jump straight in to using hover.css without the following tutorial. If that’s the case, you may like to skip further down into the article where I discuss some of the default CSS and hacks used to improve the appearance of hover.css effects — especially on mobile/tablet devices, browser support, SASS/LESS support and Grunt support.

How to Use

To begin, download hover.css, or fork/pull the GitHub repo if you prefer.

Inside the download file you’ll find all of the contents that make up the hover.css demo.

Note: In the download file, you’ll find both a hover.css file and hover-min.css. The latter is a minifed version, which is smaller in size and quicker to download. Minified files are difficult to read so to follow the tutorial, use the hover.css file. Once you’ve completed the tutorial you can then switch to hover-min.css, which I explain in Good Practices.

Adding hover.css Effects to your Web Page

Link hover.css to your web page using the following HTML, placed within the <head></head> tags:

<link href="css/hover.css" rel="stylesheet" media="all">

Applying hover.css Effects to an Element

Let’s assume the web page you linked hover.css to has a button on it, made up of the following HTML:

<a href="#" class="button">Checkout</a>

And it currently has this CSS applied to it via the button class:

.button {
    display: inline-block;
    padding: 1em;
    background-color: #79BD9A;
    text-decoration: none;
    color: white;
}
An example button prior to adding an hover.css effect
An example button

The button has a nice colour but it isn’t that interesting or enticing for the user! You can make the button much more appealing with a hover.css effect. Let’s apply the Float effect from hover.css.

In the hover.css file, search for the Float effect.

Note: Each effect has a comment above it with its name, such as /* Float */. An effect’s class name is a lower case version of its name, prefixed by hvr-, in this case .hvr-float (the dot represents a class and the prefix makes the class name a little more unique so it’s not already in use). Where a name has a space in it, such as Grow Rotate, then the space is replaced with a hyphen -, like so: .hvr-grow-rotate.

The Float effect uses the following CSS:

/* Float */

.hvr-float {
  display: inline-block;
  vertical-align: middle;
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}
.hvr-float:hover,
.hvr-float:focus,
.hvr-float:active {
  transform: translateY(-8px);
}

If you don’t understand this CSS, don’t worry (We’ll take a Deeper Look at the CSS later on). All we need do is apply the class of .hvr-float to the button.

Back in the HTML of the web page, find the button and apply the hvr-float class to it:

<a href="#" class="button hvr-float">Checkout</a>

The element already had a class of button, so we added the secondary class of hvr-float next to it, separated by a space.

Now, when you hover over the button, it floats! If you’re not so keen on the Float effect, replace the hvr-float class for another hover.css effect, hvr-grow-rotate for example.

Remember to view the demo for a quick sample of all the effects currently available.

That’s all you need do to apply hover.css effects to your elements.

Using FontAwesome with Icon Effects

Hover.css uses FontAwesome for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the <head></head> of your web page:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

Hover.css icons are added to elements via the :before pseudo-element. Let’s take the Icon Forward effect as an example (browser prefixes and additional styles removed for brevity):

.hvr-icon-forward:before {
    content: "\f138";
    position: absolute;
    right: 1em;
    padding: 0 1px;
    font-family: FontAwesome;
    transform: translateZ(0);
    transition-duration: 0.1s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

Most important in the above example are the font-family and content declarations. font-family: FontAwesome tells the browser we want to use a FontAwesome icon in this pseudo-element, and the content value says which one. Should you wish to change the icon, change the value of the content property. A full list of the values and the icon they represent can be found here.

If you’d rather not tamper with Hover.css itself, you can override the default content value simply by declaring the same declaration again (providing it be declared after the default one either in Hover.css or another stylesheet):

.hvr-icon-forward:before {
    content: "\f001";
}

The Icon Forward effect will then display a musical note that moves forward when hovered over (instead of the default arrow in a circle).

Good Practices

In the tutorial you just completed, you reference one hover.css effect from the entire collection of effects. If you plan on using only a few effects, then it is better practice to copy and paste those effects into your web page’s existing stylesheet. That way, the entire hover.css collection isn’t downloaded when only some of its effects are required — making your website faster to download.

If you choose to reference the complete hover.css collection, then when it’s time to put your web page live, use the minified version of hover.css instead. This makes the file smaller in size so it’s quicker to download. To use this minified version, change your reference from hover.css to hover-min.css:

<link href="css/hover-min.css" rel="stylesheet" media="all">

A Deeper Look at the CSS (and some Hacks)

All hover.cs effects are given default CSS properties that aren’t directly related to the effect. These default properties give the most desired wide-spread results, but nonetheless you may wish to change them on your own website.

display: inline-block

A display property is often required for an effect to work. By default, hover.css sets all elements to display: inline-block. You may need to change this to display: block or display: inlinedepending on your requirements. If the element you’re applying the effect to already has a display property, then the one applied by the effect can be removed.

transform: translateZ(0)

transform: translateZ(0) is known as a “performance hack”. It is often used with CSS3 transforms to improve the performance of those transforms on mobile and tablet devices.

box-shadow: 0 0 1px rgba(0, 0, 0, 0)

When viewing CSS3 transformed elements on mobile/tablet devices, the edges can sometimes look jagged or a slightly different colour. By applying box-shadow: 0 0 1px rgba(0, 0, 0, 0), an element is given a transparent box shadow, which causes the edges of that element to look smoother.

Browser Support

Many hover.css effects rely on CSS3 features such as transitions, animations, transforms and pseudo-elements. Older browsers still in use today may not fully support effects making use of these technologies.

  • Transforms are not supported below Internet Explorer 10
  • Transitions and Animations are not supported below Internet Explorer 9
  • Psuedo-elements are not supported below Internet Explorer 8

Aside from the above mentioned browsers, hover.css is supported across all major browsers. Please see caniuse.com for full support for many web technologies and test your webpages accordingly.

SASS/LESS Support

hover.css also comes in SASS and LESS flavours, which allows for greater control of its effects, as well as quicker production.

The hover.css file is generated using SASS/LESS Mixins. Each effect is a Mixin so you can add them to your own project quicker. Find them in scss/effects and less/effects.

In the scss and less directory, you’ll find an _options.scss or _options.less file which will allow you to specify many default properties such as the default duration for transitions/animations, primary, secondary, and shadow colours, width and heights for speech bubbles, and so on.

Grunt Support

With the project downloaded, in your command line run grunt for a production environment that includes SASS/LESS, CSS minification, watch, and connect tasks. The connect server can be accessed at http://127.0.0.1:8000.

Conclusion

hover.css aims to be as simple as possible to apply unique effects to your own web pages. Use it on links, buttons, logos, SVG, featured images and other elements to really draw attention to them.

Watch hover.css on GitHub for the latest updates and newest effects.

Posted on Leave a comment

Quickly Show/Hide Hidden Files on macOS Sierra, OS X El Capitan & Yosemite

It seems like every day I search Google for the command to show hidden files on Mac OS X, not to mention Googling for the command to then hide those hidden files a few minutes later.

Today I decided to make a short and easy to remember alias to speed up the process. All I need do now is type showFiles and hideFiles whenever I need to show/hide OS X’s hidden files. Here’s how you can do it too.

The Quickest Way to Show/Hide Hidden Files

Since the release of macOS Sierra, when in Finder, it is now possible to use the shortcut:

 CMD + SHIFT + .

Press once to show hidden files and again to hide them. If you’re using a version earlier than macOS Sierra, see Show/Hide Hidden Files using Terminal Aliases to setup a toggle command via terminal.

Thanks to Guido Schlabitz for making me aware of this new shortcut.

Show/Hide Hidden Files the Long Way

The long way to show hidden Mac OS X files is as follows:

  1. Open Terminal found in Finder > Applications > Utilities
  2. In Terminal, paste the following: defaults write com.apple.finder AppleShowAllFiles YES
  3. Press return
  4. Hold the ‘Option/alt’ key, then right click on the Finder icon in the dock and click Relaunch.
Relaunch Finder by right clicking the Finder Icon whilst holding the `option/alt` key
Relaunch Finder by right clicking the Finder Icon whilst holding the ‘Option/alt’ key

This will show all hidden files. To hide them again, follow the same steps but replace the Terminal command with:

defaults write com.apple.finder AppleShowAllFiles NO

It’s not the longest set of instructions or the biggest command to commit to memory but if you’re doing this a lot, it’s worth spending a few minutes now to save yourself a lot more time in the future.

Show/Hide Hidden Files using Terminal Aliases

A Terminal alias is a name or shortcut for one or multiple commands. Using an easy to remember alias, we can turn the above four step process into just one.

An alias can be made temporarily (just for the use of one terminal session) or permanently. As we want this to be a shortcut used now and in the future, let’s make it permanent:

  1. Open Terminal found in Finder > Applications > Utilities
  2. In Terminal, paste the following: sudo nano ~/.bash_profile
  3. Enter your Mac’s administration password if required, then hit return
  4. At the bottom of the open .bash_profile file, paste the following: alias showFiles='defaults write com.apple.finder AppleShowAllFiles YES; killall Finder /System/Library/CoreServices/Finder.app'

  5. Below that, paste the following: alias hideFiles='defaults write com.apple.finder AppleShowAllFiles NO; killall Finder /System/Library/CoreServices/Finder.app'

  6. Press ctrl + O and hit return to save the file
  7. Press ctrl + X to exit the file and return to the command line
  8. In Terminal, paste the following: source ~/.bash_profile to refresh your profile and make the aliases available
Adding aliases to .bash_profile via Terminal
Adding aliases to .bash_profile via Terminal

Now when you want to show hidden files, all you need type in Terminal is showFiles, then hideFiles when you want to hide them.

If you want to modify the behaviour or alias names, let’s take a closer look at the commands you just added:

alias showFiles='defaults write com.apple.finder AppleShowAllFiles YES;
killall Finder /System/Library/CoreServices/Finder.app'

alias tells Terminal we’re adding a new alias.

showFiles is the name of the alias. Change this to what you wish.

We then give the alias two commands. The first being:

defaults write com.apple.finder AppleShowAllFiles YES;

This is the command to show hidden files and is ended with a semi-colon ; so we can then use the second command:

killall Finder /System/Library/CoreServices/Finder.app

This will relaunch the Finder (to replicate the step of holding the ‘Option/alt’ key then right clicking the Finder icon in the dock).

Conclusion

With the aliases set up, all you need do in the future is type showFiles and hideFiles to show and hide Mac OS X’s hidden files respectively.

Aliases can be used to speed up your interaction with the Terminal. Set up an alias for navigating to your most used directories, to commit to a GitHub repo and so on.