All posts tagged “Multiple”

Organizing With the Post-it Plus App: A digital tool turning paper and ink into easy-to-organize files for sharing across multiple platforms

Organizing With the Post-it Plus App

In our constant quest to take handwritten material into the digital world, the brand new Post-it Plus App for iOS 8 delivers on a promise of easy organizing and sharing. Whether in collaborative sessions, or just for the sake of jotting ideas down……

Continue Reading…


Cool Hunting

Miami Art Week 2014: Splatters, Drips and Drops: Well-designed, colorful chaos across painting and sculpture at multiple fairs

Miami Art Week 2014: Splatters, Drips and Drops


There’s most likely thought behind every minute detail within an artist’s work—even if that stray droplet or bleeding line feels more like the product of chance. At this year’s Miami Art Week many pieces embraced—even celebrated—the chaos of fluidity……

Continue Reading…


Cool Hunting

Change the colour of multiple elements with Photoshop Smart Objects

Read more about Change the colour of multiple elements with Photoshop Smart Objects at CreativeBloq.com


Whether you’re working on a website, mobile app or even a brochure layout, there is always a period of time before you’ve fully locked down your colour palette. Even when you have, you may not know where each of the colours will be applied or if there will be lighter or darker shades used in certain instances. The subtle differences between #ccc and #aaa are significant enough that you may want to try multiple variations of colours in that range before you find the perfect grey.




Creative Bloq

Adventure-Proof Power from Brunton: Charge multiple devices with these waterproof trail-ready tools

Adventure-Proof Power from Brunton


With roots in developing navigation tools going all the way back to 1984, Boulder, CO-based Brunton has applied its sensible and utility-driven approach to design toward creating tools for the modern-day adventurer. Whether seeking solace in…

Continue Reading…


Cool Hunting

Leaked Windows 9 video shows multiple desktops at work

Glimpses of the next Windows have been coming out at a steady clip, but the latest is the clearest yet of the operating system’s multiple desktops. German site WinFuture obtained a video showing off a build of the new feature and how users can expect to use it.

As seen in the video, the taskbar for this early build of Windows 9 includes an icon for creating and closing virtual desktops. New workspaces can be made on the fly, and each workspace and their open programs can be accessed from this icon. The interface is certainly reminiscent of what’s already been available on OS X and even Linux for years, but it’ll be a welcome feature for power users when the new OS finally debuts.

Continue reading…

The Verge – All Posts

Apple reportedly planning multiple wearables, most expensive model might cost $400

We’re little over a week from Apple’s biggest press conference of the year, and rumors surrounding the company’s widely-expected entry into the wearable market are reaching fever pitch. Unidentified sources now tell Recode that there won’t be a single Apple wearable device — or “iWatch” as many observers have decided to call it — but rather multiple models at different price points. According to the report, executives have discussed offering a model for as much as $ 400 — significantly more than the competition. LG’s and Samsung’s Android Wear-powered models cost $ 199.99 and $ 229 respectively. Samsung’s Gear 2 costs $ 299.99.

It’s not clear how many models will be available, but it wouldn’t be surprising to see less expensive versions of…

Continue reading…

The Verge – All Posts

A Guide To Juggling Multiple Freelance Clients

As a freelancer, you can choose to take on as many – or as few – clients as you want. Since more clients generally translate to more income and greater financial security, it makes good business sense for you to have at least two clients at a time.

However, if you decide to take on more clients than you can handle in the name of making money (which, by itself, is not a bad goal to have), you may risk fatigue and burnout in the future. It’s okay to feel tired once in a while, but considering how your income is heavily dependent on your output, you can’t afford to get bogged down one time too many.

If you’re having trouble with work but dropping any of your multiple clients isn’t an option, or you’re thinking about adding one more project to your plate, you can try these tips on for size.

Know Yourself

Before we get right down to the tools and methods that will help you become a better “juggler”, so to speak, let’s talk about that one important – albeit oft-neglected – factor that determines the effectiveness of those tools and methods: you, the freelancer.

As a unique individual, you have a set of strengths and weaknesses that are unlike anyone else’s. Your understanding of these strengths and weaknesses, therefore, will determine your success or failure in handling multiple clients.

For example, if you’re a fast worker or multitasker, you may not have a problem taking on, say, 10 clients at once. If you work slowly, are a sickly person, or are someone who has a tendency to crack under pressure, taking on fewer, lighter and/or well-paying projects may be your best option.

Be Clear On The Project Details Per Client

Now that you know yourself, it’s time to get to know your clients and what they expect from you. You can do this by asking questions related to the project, such as:

What Is My Expected Output?

Often, your expected output may not be the same as that of your client’s. If you’re a writer, for instance, you may think that filling your client’s website with five 1,000-word blog posts is better than your client’s proposal of 10 500-word posts. Discuss and iron out these concerns before anything else.

What Are My Responsibilities?

Make sure you know exactly what tasks you’re expected to perform, and to what extent. Otherwise, you’ll easily fall victim to “scope creep”, or a situation where you end up taking on more work than you signed up for – and not getting commensurate compensation for it!

How Long Is The Project Going To Take?

Some freelance projects take a few months to wrap up. Others may turn into ongoing relationships that last for years. Ask your client whether s/he has an estimated project timeframe, and if there’s a possibility that the project may be extended.

How Often Are You Expected To Communicate With/Update The Client?

If you’re lucky, your client will trust you enough to leave you to your own devices. Otherwise, set a regular schedule for meetings and updates (e.g. 30 minutes every Friday at 8 AM in your client’s timezone).

What’s The Payment System?

PayPal may be the most convenient payment option if you and your client are literally continents apart, but your client may prefer other services. Also, discuss with your client whether you prefer to be paid upfront or by the end of the project. (Hint: For your protection, it’s best if you receive at least partial payment upfront.)

Once you’ve covered all bases, decide whether you want to accept the project, given your current workload, financial needs, career goals, values, and personality. If it’s a “Yes”, create a contract tailored to each client. A contract ensures that the project’s terms and conditions are clear to all parties, and will save you plenty of headaches should any problems arise in the future.

Be Professional

After considering the details mentioned above, it should be easier to create a schedule. Keep in mind that each of your clients expects you to do your work to the best of your ability, so make sure you give enough time for each project – with reasonable allowance for emergencies.

In case emergencies do happen (e.g. sickness, accidents, hardware failure), inform your affected clients as soon as possible. As long as you’ve already proven to them that you are a trustworthy, reliable, and skilled professional who’s serious about overcoming a temporary setback, they should understand. (If they don’t, wrap up the project as soon and as well as you can, and let them go – nicely! – without giving them any indication that you want to work with them again.)

If one project begins to conflict with another for any reason (e.g. one client springs last-minute revisions on you, forcing you to abandon a project with another client), decide which project you will do first, and which one will be temporarily left in the back burner. For the latter, you may be forced to ask for deadline extensions, as the case may be. (Don’t overdo it, though!)

Use Project/Time Management Apps

This one is debatable, as pointed out here, since the tools are only as good as the people who use them. However, if you’re the type of person who prefers to concentrate on your multiple projects rather than think too much about details like the number of work hours logged, these sort of tools can be handy.

Conclusion

There’s no groundbreaking secret to juggling multiple clients, really. It’s a matter of knowing what you can and can’t do, having and sticking to clear-cut goals, being prepared for the worst, and thinking about things as thoroughly as you can.





hongkiat.com

How To Style HTML5 Range Slider Across Multiple Browsers

The range is one of the new input type introduced in HTML5. This input type allows one to input number within the specified range. The browsers will render this input type natively as a slider control. It’s a very intuitive user interface that we commonly find in an App. We can slide the handle bar to the right or left to produce the number within the range.

But as you can see above, each browser displays this input type in a slightly different taste that may not sit well with some designers. So in this article, we will show you how to style it in a more unified design form. If you are ready, let’s just get started.

In Chrome, Safari, and Opera

Safari and Opera are Webkit-based browsers. Though Chrome has decided to adopt its own engine, Blink, it looks like for the time being, Chrome still inherited several code bases from websites.

Webkit provides an easy way to style any input type, including range. To get started, we can select the input with the attribute selector and remove the native Webkit/Chrome styles by setting the -webkit-appearance to none.

 input[type=range] { -webkit-appearance: none } 

From this stage, we can add anything such as border, background color, rounder border and so on.

 .input[type=range] { -webkit-appearance: none; width: 100%; border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } 

As you can see below, the handle bar is the only remaining part from the input that is not affected from the above code.

To apply styles to it, we have to use Webkit proprietary pseudo-element selector ::-webkit-slider-thumband similarly remove the native styles with -webkit-appearance, like so.

 input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

And that’s how we style input type range in a Webkit browser. The style we added above should take effect on Chrome, Safari as well as the latest version of Opera. However, it would not affect Firefox and Internet Explorer as they run different engines. But we have workarounds for those two.

In Firefox

Adding styles directly with attribute selector input[type='range'] would not change the native styles of the input in Firefox. Instead, we have to use Firefox proprietary pseudo-element selector ::-moz-range-track and ::-moz-range-thumb.

The ::-moz-range-track will affect the input range track, while the ::-moz-range-thumb will affect the input handle bar.

 .firefox input[type=range]::-moz-range-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } .firefox input[type=range]::-moz-range-thumb { background: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

We apply the exact same styles. Open Firefox, and you should get a close result as in the Webkit browsers.

In Internet Explorer

Internet Explorer displays the input type range a lot different than the rest. To make it easier, here I have drawn a diagram showing the pieces that form the input.

IE will also show a tooltip showing the number you are one, as we slide through the handle bar.

Each of these input parts can be styled with IE proprietary pseudo-element ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks, and ::-ms-tooltip. Here we will also apply the same styles as in Webkit and Firefox.

 input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper { background: transparent; } input[type="range"]::-ms-track { border-radius: 8px; height: 7px; border: 1px solid #bdc3c7; background-color: #fff; } input[type="range"]::-ms-thumb { background-color: #ecf0f1; border: 1px solid #bdc3c7; width: 20px; height: 20px; border-radius: 10px; cursor: pointer; } 

But the output is not something that we’ve expected. The tick marks is visible, while the top and bottom of the handle bar are hidden.

We can easily remove the tick marks by adding step="any" to the input element. However, making the handle bar fully visible is something that is not possible. It is as if the input element has the overflow set to hidden, but it cannot be undone just by setting overflow to visible. This is something that I’m still trying to figure out. If you have solved this issue, you can share it in the comment box below.

Final Thought

The input type range is quite customizable. Unfortunately, each browser has its own way and thus we have to write longer codes than expected. I hope there will be a standard that can regulate this matter in the future. Lastly, here is the link to see the input range we have shown you in this article.





hongkiat.com

How to Test Website Across Multiple Browsers and Devices Synchronously

Responsive Web Design (RWD) is now a common approach in building a mobile friendly website. But building a responsive website can be quite irritating when you have to test the website in multiple devices and screen-sizes.

Say you have three devices to run the test on, you may end up having to constantly refresh each browser in every of those devices, which is cumbersome, to say the least.

So the idea of “synchronized testing” has emerged to address this situation and make the workflow more streamlined. There is a Grunt plugin called Browser Sync to perform this, and we are going to show you how to deploy it in your project, in this post.

Why Use Browser Sync?

First off, I’m not saying that Browser Sync is the perfect tool. There are also a number of GUI Applications such as Adobe Edge Inspect and Ghostlab which are great tools as well. They both have a nice GUI, but here’s why I think Browser Sync is better than these Applications:

1) Browser Sync (as well as Grunt) is free which helps if you have little to no budget to work with.

2) It is open-source. Depending on your JavaScript and Node.js proficiency you can extend it to cater to your own specific requirements.

3) It is cross-platform. You can use it in Windows, OS X and Linux. Ghostlab, on the other hand, is only available in OS X and Windows.

Installation

To start off, we are going to install the Grunt plugin called Browser Sync. I’m sure the name says it all; this plugin syncs a number of interactions that occur on the website including page scrolling, populating form fields, and clicking on links.

All these actions will be reflected in the other browsers and devices as they are happening. Type the following command to install Browser Sync in your working directory:

 npm install grunt --save-dev npm install grunt-browser-sync --save-dev 

Configuration

Once installed, Browser Sync can be loaded within the Gruntfile.js, this way.

 module.exports = function(grunt) { grunt.initConfig({ browser_sync: { dev: { bsFiles: { src : 'navbar-fixed-top.css', }, ghostMode: { clicks: true, scroll: true, links: true, forms: true, }, }, }, }); grunt.loadNpmTasks('grunt-browser-sync'); }; 

This configuration will monitor the navbar-fixed-top.css file and automatically refresh the browser when it’s changed. We should also enable ghostMode to keep track of interactions on the website.

Note: Browser Sync also provides a number of other configurations, you can check them out in detail on this page. For the time being, the above configuration should suffice for the project example in this article.

Once the configuration is set, go to Terminal (or Command Prompt) and run the task using the following command:

 grunt browser_sync 

After running the command, you will be prompted to add three line of scripts within the <head> tag.

Also, when you view your website in multiple browsers, it also records those browsers, and notifies you in Terminal. In this case, I opened the website in Chrome, Safari, and Mobile Safari (through iPhone Simulator).

Check It Out

Now, as you can see from the following animated GIF, all updates, changes, and interactions are synced in real time in all the browsers.

Further Resources

Here are more resources to dig further into Grunt and “Synchronized Testing”.





hongkiat.com

Managing Multiple Drafts Easily in Jekyll

Despite of only being a static website, we can utilize a plugin in Jekyll too. Let’s continue our discussion on creating drafts from the previous post. As you can see before – in the previous post – we created the drafts and put them within a special folder called _drafts first.

Then, as we are ready to publish it, we move them to the _posts folder with the proper naming format.

It sounds easy right? it should be no problem if you’d only manage 1 or 2 post drafts. But, when you have 5-10 post drafts, changing each file name, and specifying the correct date by hand can be a pain. Let’s take a look how we can simplify the workflow with a Jekyll plugin.

Getting Started

Before we go any further, let’s create a new folder named _plugins; this folder is required as Jekyll will search and execute plugins from within the folder. We also need to create a new file named publisher.rb in it; technically, you can freely name that file with any name you like.

We will be using a Jekyll plugin created by Jeffrey Sambells. This plugin will take care of the hassle when publishing a post from a draft in Jekyll. It will rename the file properly, along with the date. And it will also specify the date within the post Front Matter section.

The following is the source code of the plugin, available from this Gist page. Copy this code below and paste it to the publisher.rb file that we have just created.

 module Jekyll class PostPublisher < Generator safe false def replace(filepath, regexp, *args, &block) content = File.read(filepath).gsub(regexp, *args, &block) File.open(filepath, 'wb') { |file| file.write(content) } end def generate(site) @files = Dir["_publish/*"] @files.each_with_index { |f,i| now = DateTime.now.strftime("%Y-%m-%d %H:%M:%S") replace(f, /^date: unpublished/mi) { |match| "date: \"" + now + "\"" } now = Date.today.strftime("%Y-%m-%d") File.rename(f, "_posts/#{now}-#{File.basename(f)}") } end end end 

If your Jekyll server is currently running, restart it for the plugin to work.

Using the Plugin

To use the plugin, we need to create a new folder named _publish. We will move our post drafts to this folder, once we are ready to publish it. However, before doing so, set the date in the post draft’s front matter to unpublished, like so

 --- layout: post title: "This is My Second Post" date: unpublished --- 

Now, move the draft to the _publish folder.

jekyll-plugin/

As mentioned, Jekyll will automatically move the folder to _posts as well as set the post date, then publish the post for you.

Final Thought

We have seen that Jekyll is extensible with a plugin. In this post, for instance, we used one to simplify the process of publishing a draft. You can find more Jekyll plugins in this page: Available Plugins.

Now that we have learned how to setup Jekyll, and publish a post draft. In the next post, we will show you how to publish Jekyll blog to an online server via FTP. Stay tuned!





hongkiat.com