Bitcoin may have become relatively more stable as of late, even after numerous security scares, but it’s still far from being completely stable. Bitcoin and other cryptocurrencies, unlike fiat currencies like the US Dollar, isn’t backed by governments and aren’t influenced by monetary policy. This makes it a lot more like gold than any other currency, since its value rests entirely on how much people are willing to pay, and how much its users believe in it. This, as you can imagine, can lead to volatility and uncertainty.

Given this uncertainty and potential for volatility, it would be quite a smart move to keep an eye on the value of Bitcoin, especially if you’re trying to make a profit from an investment. Even if you’re not an investor, it’s still a good idea to be aware, just in case. Here’s a list of 10 sites that you can use to track the value of Bitcoin.

Recommended Reading: 10 Exchanges To Buy And Sell Bitcoins

1. Bitcoin Charts

Bitcoin Charts is probably the most comprehensive Bitcoin price tracker available. Bitcoin Charts tracks the price of Bitcoin in relation to a large number of currencies, including USD, EUR, GBP, JPY and even Ripple. Bitcoin Charts has a few different chart types and can even show moving averages and technical indicators such as accumulation/distribution and rate of change.

The time range for the charts can be as short as 1 day and as long as 8 years, with an All Data option. As you might expect, there isn’t enough data for the 4- and 8-year time ranges. Bitcoin Charts also has charts showing Bitcoin exchange volume distribution.

2. BitcoinWisdom

BitcoinWisdom tracks the price of Bitcoin on a number of major exchanges such as Bitstamp, BTC-e and Coinbase. BitcoinWisdom also tracks the price of Bitcoin in relation to other cryptocurrencies on exchanges such as Cryptsy and Bter. BitcoinWisdom has a few settings you can tweak, including chart styles and depth ranges.

The tracker updates in real time, and you can choose the time interval for the main graph, ranging from one minute to one week. Bitcoin Wisdom also has Bitcoin and Litecoin difficulty charts and mining calculators.

3. CoinDesk

CoinDesk’s Bitcoin price tracker has both their own Bitcoin Price Index (BPI), which averages the prices from three leading Bitcoin exchanges: Bitfinex, Bitstamp and BTC-e. The graph can display either the BPI, or price data from any of the three exchanges. Historical data for Mt. Gox is also included.

CoinDesk can display both Closing and Open, High, Low, Close (OHLC) price data. The time frame for the graph ranges from 1 hour to an All setting that goes back as far as possible. You can also set a custom time frame.

4. Bitcoinity

Bitcoinity tracks the price of Bitcoin across a number of different exchanges and currencies. Unlike most trackers, Bitcoinity has a preferences section where you can customize your experience. You can, amongst others, choose the default theme, the precision of the price, whether to show prices in BTC or mBTC and hide trades smaller than a certain amount.

Bitcoinity has an alternate light-colored theme if you don’t like the default color scheme. The time range for the price chart ranges from 10 minutes up to a historical 2 year view. The change graph ranges from 1 minute to 1 hour. It also lets you zoom in and out.

5. Coinbase

Coinbase isn’t a dedicated price tracker, but still has a Charts view that tracks Bitcoin’s price. Coinbase has charts that track Bitcoin price in USD as well as the number of Bitcoin transactions per day. Coinbase is one of the few trackers that also tracks transaction volume, which may be of interest to some.

Like most other trackers, you can select the time range of the graph, from 1 day up to an All option. You can also set a custom time range. Coinbase doesn’t explicitly state the source of their price data.

6. Winkdex

Winkdex pools data from seven different exchanges, including Bitfinex, Bitstamp and CampBX, to provide an average price for Bitcoin. Winkdex weighs exchange prices according to transaction volume on the exchanges, so that high-price but low-transaction outliers will not greatly affect the average price.

Winkdex has a remarkably clean interface and gives you a number of range options, from as short as one day up to a Max option that shows all available data. Winkdex is still in beta and might have some bugs that need to be ironed out.

7. Blockchain

Blockchain draws its data from Bitcoinity, but presents it in a slightly easier to use way. Unlike Bitcoinity, Blockchain only tracks three currencies: USD, EUR and GBP. Blockchain also shows the BTC-e chat room in a small window, so you can keep up to date with all the gossip and discussion going on there.

The time range for the price chart on Blockchain ranges from 10 minutes up to 6 months, while the change graph ranges from 1 minute to 1 hour. You can also zoom in and out of the change graph.

8. Bitcoin Ticker

Bitcoin Ticker tracks the value of Bitcoin in real time on six different exchanges. These exchanges include BitStamp, BTCChina, Bitfinex and Kraken. Bitcoin Tracker also has a news ticker that shows all the latest Bitcoin-related news, as well as a real-time readout of buy and sell orders on the respective exchanges.

The graph has a time range from 10 minutes to All Time. Bitcoin Ticker also has a Combined view mode that shows real-time price graphs for Bitfinex, Huobi, BitStamp and BTC-e on the same screen.

9. BigTerminal

BigTerminal tracks a large number of markets, including cryptocurrencies Bitcoin and Litecoin. As far as Bitcoin is concerned, BigTerminal can track both average and exchange-specific prices, namely on BitStamp, BTC-e and Coinbase. You can compare charts and even change the currency BigTerminal displays in.

BigTerminal’s graph defaults to a quarterly view, but you can go as short as 15 minutes and as far back as a historical view. BigTerminal includes social sharing options as well as chart and drawing tools. You can even save the charts in a few different formats.

10. Bitwat.ch

Bitwat.ch does things a bit differently. Instead of tracking the value of Bitcoin, Bitwat.ch is a site that sends you alerts via e-mail when the price of Bitcoin rises above or drops below a certain price of your choosing. Bitwat.ch gets its data from CoinDesk‘s Bitcoin price tracker.

You can also register on Bitwat.ch if you want to keep track of all your alerts. Registering also lets you delete alerts, which can be useful if the price levels you set have been made out of date, or if you’re just tired of receiving alerts.

Presentations are a great way to explain things and get important information across to an audience. However, there are times when it’s just impossible to conduct a presentation in real-time, be it due to distance or simply lack of time. Sure, you could just email your slides or publish them online, but without the all-important human element, it can be hard to communicate and get your point across. If you’ve ever wished for an easy way to overcome this problem by combining slides with audio and visual narration, you can stop wishing. Say hello to Movenote.

Movenote is an app and website that lets you create video slidecasts, which the app calls Movenotes. Movenote lets you accompany your slides with a video narration. If giving a presentation in real life is impossible for whatever reason, Movenote might just be the next best thing. If this sounds useful to you, read on to find out more.

Recommended Reading: Create Beautiful Presentations Easily With Slidebean

Getting Started With Movenote

To get started using Movenote, just log on to the website and register a new account if you don’t have one. You can also log in using your Google, Facebook or LinkedIn accounts. However, it looks like you’ll only have Google Drive integration if you login using a Google account.

Once you’ve logged in, go through Movenote’s terms and conditions. Once you’re done with that, you can watch some YouTube videos with tips on getting started with Movenote. Finally, Movenote will ask for your permission to use your webcam.

Using Movenote

This is what the main Movenote interface looks like:

Your slides take up the bulk of the screen, with your webcam’s output on the right side of the screen. This is so that you can see yourself while you’re recording the Movenote. Press the pencil icon beside the presentation title to edit the Movenote’s title. Archive is where you access older Movenotes.

Adding slides is simple as clicking on Add Slides and choosing whether to add files from your computer or from your Google Drive account.

Once you’ve added your slides, either from your computer or from Google Drive, you can rearrange and delete them however you wish. Just press Re-order at the top of the slide display and a new window will pop up allowing you to re-order and delete slides.

Recording Your Presentation

Once you’re satisfied with your slides, you can start recording your Movenote. Just press the red Record button; Movenote will start a countdown and then begin recording. While recording, just narrate as you normally would, and click the arrows above the slide display in order to move through the slides. You can also turn your mouse cursor into a laser pointer by holding your mouse button down; this can be useful for highlighting certain parts of a slide.

Once you’re done recording, click Pause. You can then either resume recording, start over if you made a mistake, or press Save & preview if you’re satisfied with your recording.

Once you press Save & preview, Movenote will take a few minutes to generate your Movenote. How long Movenote takes depends on the length of the presentation.

You have a number of ways to share your completed Movenote. You can email the link via Gmail, copy the public link, or share it on social networks including Facebook, Twitter and Google+. Movenote also has AddThis integration, letting you share your Movenote on a lot of other social platforms such as Pinterest and Tumblr.

There are a few other controls at the bottom of the screen. The seekbar and the slide counter work in tandem with each other, in that moving through the slides also advances through the Movenote. Viewers also have the option to download the slides in .PDF format.

There’s also a settings menu that lets you do a few extra things, including adding a link, editing the slides, generating an embed code as well as deleting the Movenote.

Conclusion

Movenote is an incredibly useful tool if you want to accompany slides and presentations with audio-visual narration and explanations. If you’ve ever wanted to keep the human element of presentations while sharing information across the Internet, then Movenote is definitely something you’ll want to try out.

Movenote is also available for mobile platforms, both Android and iOS. There’s also a Movenote Chrome app as well as a Movenote for Gmail extension that lets you create Movenotes directly from Gmail.

In this post we are going to walk you through a project. In the project, we will create a static HTML website, and we will be using Kit Language for constructing the HTML pages, and LESS CSS as the styling language.

If you followed our previous article on “Kit” introduction, you will find that it allows us to use variables and import external files, making it easy to manage a project with a large number of HTML pages.

Since “Kit” is a Codekit proprietary language and is also the only application that supports it at the moment (of this writing), you have to first install Codekit. It is available for $28. You can give the application a try via the trial version, which generously includes all features and capabilities.

Recommended Reading: LESS CSS Tutorial — Designing A Slick Menu Navigation Bar

Getting Started

Let’s create a new folder for our project and name it, for instance, “mysite”. In the folder, we create three folders named “kit”, “less”, “assets”.

The “kit” folder will contain the .kit files. In it, create a new folder named “inc” to save partial .kit files that will later be included into other files.

Similarly, we will create an “inc” folder under the “less” folder.

Lastly, the “assets” folder will contain the project’s CSS, JavaScript, and Images. Let’s create 3 more folders in it: “css”, “js”, and “img”. At the end, the project directory structure should look like this:

 . ├── assets │ ├── css │ ├── img │ └── js ├── kit │   └── inc └── less └── inc 

Launch Codekit. Drag and drop the project folder on to the application window to add it as a “Codekit Project”.

Creating the Files

One of the advantages of using Kit – as well as other similar languages like Haml or Jade – is that we can slice the documents into several partial files.

We can save the document’s header in “header.kit”, or use “footer.kit” for the document’s footer. When we make a change in “header.kit”, for an example, it will reflect on other pages where “header.kit” is included. This saves us a lot of time since the files need not be edited separately.

Kit Files

In this project, we create the following Kit files and saved them in “inc” folder:

• “doc-open.kit” – contains stuff that open HTML documents that include the DOCTYPE, and the <head> tag.
• “doc-close.kit” – contains the stuff to close the HTML document. We will put the </html> and </body> in it.
• “header.kit”, “footer.kit”, “sidebar.kit”, “navigation.kit” – these files respectively contain the HTML structure for the document’s header, footer, sidebar, and the menu navigation.

And we create these Kit files below directly under the “kit” folder:

• “index.kit” – this will be the homepage of the website.
• “page.kit” – this is the second page of the website.

 . ├── assets │   ├── css │   ├── img │   └── js ├── kit │   ├── inc │   │   ├── doc-close.kit │   │   ├── doc-open.kit │   │   ├── footer.kit │   │   ├── header.kit │   │   ├── navigation.kit │   │   └── sidebar.kit │   ├── index.kit │   └── page.kit └── less └── inc 

We limit the website in this project to only 2 pages, so the tutorial would not be overwhelming but you can have as many pages as you want in an actual project.

LESS Files

We also create the LESS files in a similar structure. In addition, we will also utilize a LESS mixin library name LESSHat. So that we will be able to write our LESS codes faster and in simpler form. The following screenshot shows all the project’s LESS files.

 . ├── assets │   ├── css │   ├── img │   └── js ├── kit │   ├── inc │   │   ├── doc-close.kit │   │   ├── doc-open.kit │   │   ├── footer.kit │   │   ├── header.kit │   │   ├── navigation.kit │   │   └── sidebar.kit │   ├── index.kit │   └── page.kit └── less ├── inc │   ├── footer.less │   ├── header.less │   ├── lesshat.less │   ├── navigation.less │   └── sidebar.less └── style.less 

They are also listed in Codekit.

Kit SyntaxHighligting

Kit Language is basically HTML with special features. The problem is that the .kit extension is unknown by most code editors. If we open it, the code editor could not present it with proper color syntax highlighting automatically.

If you are using SublimeText, you can follow the following trick to enable syntax highlighting for Kit Language:

First, install PackageResourceViewer in SublimeText. This plugin allows us to quickly open SublimeText core packages. Once it has been installed, launch Command Palette – Cmd + Shift + P – and search “Open Resource”, without the quote.

Then, navigate to HTML > HTML.tmLanguage. In it you will see a list of extensions wrapped withing <string> tag. Add the support for .kit extension by including <string>kit</string> between the list. Save the file, and restart SublimeText.

The .kit file extension would be identified as an HTML file, and should also be given proper syntax color highlighting as HTML.

Output Path

All the files that we have created are listed in Codekit. Codekit will watch all these files and compile them when the changes are in place. By default, the compiled files will be saved at the same directory level as the source file, whereas all our project’s assets such as the CSS should be saved in the “assets” folder.

So, we need to configure the output path. Let’s enable the project-level setting.

LESS CSS output path

In the Setting page, navigate to the “Less” tab at the left sidebar. Select “To this path:” option. Enter /assets/css/ as the output path, and set the “Relative to” option to “The project’s root folder”, as follow.

Scroll-down the application window a little, and click the Apply Output Paths button to confirm the above configuration.

Kit output path

Kit compiles into HTML. We will save all HTML documents directly under the project root directory. Navigate to “Kit” tab. It is similar to the “Less” configuration that we have accomplished above. We select “To this path:” option. Enter / as the output path, and set the “Relative to” option to “The project’s root folder”.

Click the Apply Output Paths button at last.

To Be Continued

This is the end of our tutorial, Part 1. To sum up, we have set the project files, structure, and configuration. Next, we will start developing the website with Kit and LESS. So, stay tuned.

In the days of Netscape and Internet Explorer 6, most web developers only wrote web documents in plain HTML, CSS, and JavaScript. Today, we have plenty of utility tools to write those 3 web languages more efficiently, with LESS, Sass, CoffeeScript and Jade, just to name a few.

We can write codes in these new languages, then compile them in the standard form. The compiler takes place in Terminal, and is done through command lines. Alas, not everyone is comfortable working with command lines. It could be a hassle. Let’s check out Koala App, the application that lets us compile them via a nice GUI.

Getting Started

Koala is a free cross-platform application. So you can use it regardless of your Operating System (OS). It’s available for Windows, OS X, Ubuntu, and other Linux distributions. Download the installer package accordingly; .exe for Windows, .dmg for OSX, .deb for Ubuntu, and .tar.gz for Linux. Follow the installation instructions as per your OS, and launch the application.

Troubleshooting

However, if you are using Ubuntu 13.04 or 13.10, you will probably encounter a problem where the application cannot be launched and run; it just suddenly closes.

To solve the issue, you can do the following:

1. Download Udev library from this page; libudev0_i386 for Ubuntu with 32bit architecture or libudev0_amd64, if you are using Ubuntu 64bit.

2. Launch the .deb package that you have just downloaded. It will open the .deb in Ubuntu Software Center. Click the Install button.

Launch Terminal, and type navigate to /usr/lib directory with this command line:

 cd /usr/lib 

For Ubuntu 64bit, type the following command instead:

 cd /usr/lib64 

Lastly, type this command.

 sudo ln -s libudev.so.1 libudev.so.0 

You should now be able to run Koala App.

Using Koala

At the time of the writing, Koala App supports these languages: LESS, Sass, Compass, and CoffeeScipt. Assuming that you have created a folder containing project files that includs one of the mentioned languages, you can drag and drop the folder into the window application to add it as a “Koala Project”. It will list the supported files as follows:

Project Settings

In the Project Settings, we can customize the file output. Click on the gear icon at the sidebar of the application window. This opens an overlay dialog box, as shown. At the left hand side of the box, you can see a number of menus or panels to customize the application as well as the menu for each language that it supports.

For an example, let’s navigate to the LESS panel. In it, there are a number of options, as follows:

Source Map: Select this option to enable Source Map for easy debugging. When we inspect elements in the Browser, it refers to the generated CSS instead of the original source file. With the Source Map enabled, the Browser will be able to refer to the CSS-Preprocessor file – .sass or .less – as well as the actual line where the CSS is generated.

Line comments: Select it to print the CSS Comments in the output, showing the source line of the generated CSS.

Debug info: Enable this to show errors that occur.

Strict math: If it is enabled, every mathematical operation in LESS must be contained in parentheses to ensure accuracy in the operation output.

Strict units: When this option is enabled, every unit in mathematical operation should be equal. (10em/2px), for example, will return as an error.

Output style: There are two options for the output style: Normal and Compress. During development, it is better to set it to Normal for easier debugging. If you are about to launch the website, set it to Compress to make the output file size smaller.

Per-Project Settings

The previous Settings applies to all registered projects. We can also customize the Settings for per-project basis this way:

Right-click the project folder. Navigate to Project Settings > New Settings.

There are a number of options. Selecting “Default”, “for LESS”, and “for CoffeeScript” creates a project config file, koala-config.json whereas selecting "for Sass" or "for Compass" will create config.rb, the Sass and Compass config file.

These files are saved in the project root directory, and we need to edit them in a code editor to customize the Project Setting. Here is an example if you want to change the LESS output folder.

 "mappings": [ { "src": "build/less", "dest": "assets/css" } ], 

config.rb is a Ruby file to customize Sass and Compass. We’ve already discussed them as well as the configuration in our previous post series: Using Compass In Sass. You can read it to find out aboutconfig.rb in detail.

Final Thought

Koala App is packed with essential features. With it, you don’t need to bother with the hurdles in installing and configuring CSS-Preprocessors and CoffeeScript through command lines. I hope the developer will include more compilers for other languages such as Haml, Jade, and Stylus, and also create GUI for Per-project Setting. But, for those who only work with LESS, Sass and CoffeScript, Koala App is a decent and efficient application.