All posts tagged “Easily”

Adobe Creative Cloud + Moleskine Smart Notebook: Easily turn hand-drawn art into fully workable digital files for Illustrator and Photoshop

Adobe Creative Cloud + Moleskine Smart Notebook

There’s no notebook more revered than Moleskine, for both its storied history and also its continued simple, effective design. Over the last few years, the brand has released successful collaborations with Evernote and Livescribe, but today marks……

Continue Reading…

Cool Hunting

How to Build a Website Quickly and Easily

Being online is very important nowadays for every business, no matter how small it would be. Without it, a business simply does not exist for the new generation that uses the internet for everything…

For full article and other interesting tech related stuff visit the website.

Build a Robust Website Quickly and Easily with DudaOne

Whether you’re building one site or a thousand, efficiency and flexibility are two of the most desirable traits in a website builder. The Duda platform encapsulates both, and incredibly well. The…

For full article and other interesting tech related stuff visit the website.

Copy Codes from Websites Easily with SnappySnippet

As a web developer, we may occasionally find some inspiring elements on a website that makes you wonder how did they build that thing. Then, you’d think about getting a copy of that code. Chrome Devtools as well as Firebug of Firefox has actually shipped with the feature that makes it easy for us to copy HTML and CSS off a website.

However, these tools work to copy only HTML or CSS; you can’t use these tools to copy the CSS related to the HTML element you selected. For example, let’s say you are selecting an HTML element containing a couple of child elements, as follows.

 <div class="container"> <button>Submit</button> <p><span>By submitting you are agree to our term and condition</span></p> </div> 

Each of the element therein has their own specific style rules residing in the stylesheet. Some HTML elements may have inherited a couple of style rules that would make copying both the HTML and CSS together tricky. Here’s where you would love a tool like SnappySnippets.

Getting Started

SnappySnippet is a Chrome extension (get it here), that once installed, will give you a new tab named SnappySnippet within Google Chrome DevTools. This is where we will operate SnappySnippet.

To test it out, we have prepared a web page containing a couple of HTML elements forming a very nice simple web login form. Each of these HTML elements inherit CSS codes. To copy all these codes in a traditional way using the normal functionality from the browser DevTools, is going to take a bit of work.

With SnappySnippet though, everything is much simpler.

First, select which element you want to copy, then open the SnappySnippet tab and click the Create a snippet from inspected element button.

As you can see in the screenshot below, the element that we selected is copied incuding the child elements and placed within the HTML pane in the left hand side. All the style rules that shape those HTML elements are also copied and placed within the CSS pane.

The Settings

SnappySnippet allows us to set the code output. Under the two panes that is used for placing the HTML and CSS, you will find the Settings panel. You can set several things, such as removing the CSS property with the -webkit- prefix from the output, inserting prefix for the ID given to the HTML elements, and so forth.

Code Sharing

Web developers may be familiar with a code-sharing platform like Codepen. This websites allow web developers to share pieces of working code snippets. It is like a social network site but instead of sharing statuses and selfies, we share codes. With SnappySnippet, you can send the codes that you have copied to Codepen, JSFiddle, and JSBin.

To send the code, make sure that you have logged in to the respective website where you are going to send your codes. This is also to ensure that the codes will immediately be saved into your acccount. Then just click one of these three share buttons.

The codes that you copy will return exactly like what you see on the website.

Final Thought

SnappySnippet is a very handy tool for copying codes but remember to not use this as a means for plagiarizing other developer’s codes. Whatever copying you do, aim for a learning purpose, with the hope to learn something new from the techniques used. Blatant copying is not condoned, whether it is copyright-protected or not. Do use this tool well.

How to Install, Update & Remove Web Libraries Easily With Bower

To build a website, we commonly rely on a number of libraries, be it in the form of CSS or JavaScript. If I would build a small website that will display an image slideshow, for example, the website probably would need jQuery and a jQuery plugin, Flexslider. These libraries are the dependencies for the website to function.

While adding these libraries should be an easy task, when it comes to a large-scale website which requires more libraries, everything could be cumbersome and messed up from the beginning. You may have to trawl from one repository to another repository, downloading each of the libraries, extracting the packages, and finally putting them in your project directory.

When the new version becomes available you will have to be doing all of that again (sounds like a lot of work, right?).

If that sounds like what you have been doing for ages, this article may be worth a read. Here we will show you a handy tool called Bower that makes managing website libraries a breeze. Let’s check it out.

Getting Started

To use Bower, you have to install Node.js. Since Bower is based on Node.js, you should be able to run Bower on every platform: Windows, Mac, and Linux.

Once you have installed Node.js, open Terminal (or Command Prompt) and run this command line to install Bower.

 npm install -g bower 

Installing Libraries

Now we are ready to use Bower. Let’s start by searching a library that we want to put in our project directory. Assuming that you are currently inside the directory, you can type bower search {name of the library}. Here, for example, I searched for Normalize.css, a library to make an element’s style consistent in all browsers.

 bower search normalize 

The command will list a bunch of results; not only that it gives us the original Normalize, it also shows us Normalize versions that have been converted to LESS, Sass, Stylus, and the other platforms.

Once we have picked which one to install, we can type bower install {{name of the repository}}. In this example, I will install Normalize LESS as well as jQuery.

 bower install normalize-less jquery 

This command will download the latest version of normalize-less and jQuery, and save it in a new folder named bower_components; you should now find the folder created in your project directory.

Alternately, if you want to install the older version of the library, you can run the command followed with the version number, this way.

 bower install jquery#1.10.0 

Now that we have the libraries, Normalize and jQuery, in our project directory, we can use them by referencing the jQuery from the bower_components folder in the HTML document and import Normalize LESS in the other LESS stylesheet.


 <script src="bower_components/jquery/jquery.min.js"></script> 


 @import "bower_components/normalize-less/normalize.less"; 

If one of the libraries is no longer used in the website, you can uninstall it easily with bower uninstall command, like so.

 bower uninstall normalize-less 

Updating The Bower Components

Let’s say you have been working on your project for several months, and some libraries that you are using (like jQuery) have released a new version. In this circumstance, we can use Bower to update jQuery to the latest version. But first let’s check out whether the new version has been registered in bower with bower list command.

The latest version of jQuery, as you can see below, is 2.1.1.

To update jQuery, we can type bower update jquery. Once the update has completed, you can run bower list command again to verify the current installed version. Below, as you can see, we now have the latest version of jQuery.

Wrap Up

Bower is a really handy tool that I think you should leverage in your project. It’s like having an AppStore, but for your website stuff – we can install, update, and remove libraries conveniently.

In the next article we will dive into Bower and explore some more advanced features. So stay tuned.

Validate Form Inputs Easily On Any Browser With Validatr

Dealing with forms on the Web can be real interesting. You can do a lot of customisation in design, on the label and even on the authentication. With a lot of new features available in HTML5, Jay Morrow created Validatr which rely on the new HTML5 input attributes to perform easy and automatic form validation.

Validatr is a cross-browser free jQuery plugin. It will automatically wrap the form border in red if the user inputs an invalid value. It also can do lot of input validation like email, number, url, range, color inputs and date.

Custom error messages are also available with various choices using HTML5 data attributes. You may customize the error message element with your own CSS, and the plugin has some pretty good CSS styles.

Basic Guide

To use Validatr, Include the latest jQuery and also the Validatr script in your project.

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

Then call the plugin with the following snippet:

 <script> jQuery(function ($  ) { $  ('form').validatr(); }); </script> 

The plugin will recognize the form element to apply changes.

HTML Markup

As mentioned, Validatr utilizes the input element to work. The element is wrapped inside the form tag. The input element will handle all different form types and settings using HTML5 data-attribute.

For example, when you want to create number form, just add type="number" into the input and some additional requirements e.g. limiting the min and max number. If the users are not allowed to leave the form blank, just add the required attribute.

The following is a basic implementation example:

 <form action="./"> <label for="number">Number</label> <div> <input type="number" id='number' step=2 min=1 max=11 name="number" required> <input type="submit" value="Submit"> </div> </form> 

The step attribute is used for value increments when the user clicks the increase or decrease arrow in the form, starting within the defined min number or 0. If the value is set to “0″, this means it uses default increment or increased only one point (the value must be a positive number).

And here’s the result when a user inputs an invalid value or out of range number. Our example uses 2 for the step which means starting from 1, the only numbers that are valid, have an increment of 2, that is: 3, 5, 7 and so on. The max value is 11.

For a complete list of other input types and attribute documentation, please head over to the Validatr page.

Closca’s Collapsible Bike Helmet: The Kickstarted bike helmet, now available to the public, folds flat to store easily between rides

Closca's Collapsible Bike Helmet

What deters many from strapping on a helmet before biking to the grocery store or utilizing a city’s bike-share program is oftentimes the burden of carrying around the bulky (but potentially life-saving) accessory after the bike is parked. Here’s where the foldable bike…

Continue Reading…

Cool Hunting

Store Bikes Inside with CLUG Clip: A convenient, compact design that is easily integrated with any decor

Store Bikes Inside with CLUG Clip

Ever since the debut of our exclusive CH Edition Budnitz Bicycle last spring, we’ve been trying to find the best way to display the beauty at CH HQ. And, just in time for the spring riding season, it seems we have found…

Continue Reading…

Cool Hunting

Create Your Own Font Icon Set Easily With Fontello

We can see that Font Icons are widely used across websites, and for good reason. The Font Icon is reliable, looks crisp and sharp in high DPI screen, and is easily adjustable in terms of icon size, color and icon position through CSS. This makes font icons easy to animate with CSS3 Transforms and Transitions as well.

There are a great number of font icon sets available for use right away, but they may not always cater to all your needs. You may want to be able to customize your icons, in which case, perhaps it’s better that you create your own icon set.

With all the tools we now have, creating your own Font Icon set is not as hard as it used to be. In this post will show you how to do this easily. Let’s check it out.

Preparing The Icons

First of all, we need to prepare the icons. The icons must be in vector form. If you are familiar with vector applications like Adobe Illustrator, Inkscape, and CorelDraw, you can create your own icons. Make sure the icons preserve uniform traits, and then export them in SVG format.

Alternatively, you can also collect SVG icons that are available online for free.

In this example, we’ll be using the SVG icons from Ionicons. Ionicons actually has its own Font Icon but in this example we will only extract a few to explain how to create your own icon set.

Here’s what I picked out:

Some of these icons consist of multiple shapes. So before we can put them up as a font icon, we have to merge the shapes into one compound. To do so, open the .svg in Illustrator. Select all the shapes and go to: Object > Compound Path > Make.

Do this to the other icons as well.

Creating Font

Fontello makes creating Font Icon easy. Aside from picking up icons from popular Font Icon sets, Fontello also allow us to upload external icons. Simply drag and drop all of your selected icons onto Fontello. Once they are uploaded, it will appear in the Custom Icons section, like so.

You can click on the pencil icon to edit the icon properties namely the CSS Name and the Hex Code.

Select your custom icons, set the name of your font and click the Download button.

Fontello will generate all necessary font formats: .svg, .eot, .ttf, and .woff. and the stylesheets plus the demo.

That’s it. Creating font icons has never been easier than this. I hope you find this tip useful.

Inspect Box Model Of An Element Easily With XRAY

Have you ever wanted to know the exact size of a certain element in a web page like the padding, the margin, the position and so on? Usually you can get the info using a web inspection tool; most browsers have built-in tools to help you do this. Alternatively, you can use Firebug, which is also a pretty popular web tool. When things get complicated though, perhaps you need to fall back on a tool like XRAY.

XRAY is a free cross-browser tool that enables you to see the box model for any element of a web page right in your browser. Unlike other complicated web inspecting tools, XRAY focuses on giving you complete information of the box model of the element.

Getting Started

XRAY is a bookmarklet. To use it, drag XRAY to your bookmark bar of your favorite browser. XRAY is available for IE6+, Webkit- and Mozilla-based browsers like Safari and Firefox.

Just like other bookmarklets, XRAY can’t work if SSL protocol (HTTPS) is applied.

Inspecting Elements

To begin the inspection, open any web page you want to inspect, make sure it has fully loaded, and hit the XRAY bookmark. You’ll get a new pop up box in your browser. This box will display all the information about the element you have selected.

Let’s use my inspection of the XRAY homepage as an example. Say I want to know the box model information of the following element.

I click on XRAY in the bookmark bar, and select the element. This gives me the element’s name, id, class, hierarchy, position, padding, border and margin.

To close the box, just hit the X button on the top right corner of the box or refresh your page to exit the tool.

Final Thought

Aside from its advanced box model inspection function, XRAY doesn’t provide you with the information commonly available in other web inspection tools, like the style or DOM. Regardless, it’s still quite helpful and easy-to-use tool for day-to-day usage.