Tag: howto

How-To: Make Animated Progress Circles Using Circliful

A jQuery Plugin for Making Circles

My last post about the jQuery plugin Circliful was pretty popular. So, here’s another, detailing how to actually use Circliful.

Circliful has a number of options that can be set as data attributes. Data attributes are the primary method for setting various options, such as the circle background color, fill color, and the percentage. All of the possible data attributes are available in the README on GitHub.

Using Circliful is similar to every other jQuery plugin. Just make sure you’re loading up jQuery prior to loading the Circliful JavaScript.

1. Include Circliful JavaScript and CSS

Include the JavaScript and CSS files from Circliful just like you would any other JavaScript or CSS file.

<link href="css/jquery.circlify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.circliful.min.js"></script>

2. Add an element with the necessary data attributes

This is where you can define all the data attributes that are listed in the README. I typically use an empty div with the following data attributes: data-dimension, data-text, data-info, data-width, data-fontsize, data-percent, data-fgcolor, data-bgcolor, data-fill, data-total, and data-part.

You’ll want to give your newly created element a unique ID to use as a selector in jQuery. I used circle-1 as the element ID for this example.

<div id="circle-1" class="circle" data-dimension="250" data-text="85%" data-info="Sweet" data-width="30" data-fontsize="38" data-percent="85" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd" data-total="100" data-part="85"></div>

3. Add necessary JavaScript

This tells Circliful which element to build the circle from. We want to target the ID that we gave to our empty element/div above.

<script>
$( document ).ready(function() {
        $('#circle-1').circliful();
    });
</script>

That’s it! You should now have a circle similar to the first circle in the example below. If you have any questions, feel free to leave a comment or get in touch with me directly.

You can find the necessary JavaScript and CSS on the Circliful GitHub page. You can see an example of Circliful in the embedded pen below.

See the Pen erojh by Tyler Longren (@tlongren) on CodePen.

1+

How-To: Reset WordPress Database to Default Settings

Easily Reset WordPress Database

WordPress Database Reset is a WordPress plugin I recently came across that will at some point prove very, very useful to me.

It’s not often that I need to reset a production WordPress database to it’s default settings, but this plugin will make the task a whole lot easier. Chris Berthe, the author, describes the plugin like this:

WordPress Database Reset is a secure and easy way to reinitialize your WordPress database back to its default settings without actually having to reinstall WordPress yourself.

I can see this being crazy useful for WordPress plugin and theme developers. We frequently need a fresh database to work with, so I’ll be adopting this plugin in my WordPress plugin and theme development workflow from here on.

WordPress Database Reset requires WordPress 3.0+ and can be installed just like any other WordPress plugin. It’s in the WordPress Plugin directory, and can also be found on GitHub.

It even integrates with WP-CLI, a command line tool for interacting with WordPress. This allows you to do things like select which tables you want to reset:

wp reset database --tables='users, posts, comments, options'

Here’s a list of features:

  • Extremely fast one click process to reset the WordPress database
  • Choose to reset the entire database or specific database tables
  • Secure and super simple to use
  • Prefer the command line? Reset the database in one command
  • Excellent for theme and plugin developers who need to clean the database of any unnecessary content quickly

If you’re a WordPress theme or plugin developer, you should definitely check it out.

0

How-To: Install lolcommits On Ubuntu

Lolcat-style photos as you commit

I’ve always had problems installing lolcommits on Xubuntu and other Ubuntu-based Linux distributions.

The installation instructions are very simple. Only requiring you to run two commands, sudo apt-get install mplayer imagemagick libmagickwand-dev and then sudo gem install lolcommits (need sudo for linux). Pretty simple.

The gem install lolcommits command is where things usually go bad for me. I typically see something like this:

tyler@echo:~$ sudo gem install lolcommits
Building native extensions.  This could take a while...
ERROR:  Error installing lolcommits:
	ERROR: Failed to build gem native extension.

        /usr/bin/ruby1.9.1 extconf.rb
/usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require': cannot load such file -- mkmf (LoadError)
	from /usr/lib/ruby/1.9.1/rubygems/custom_require.rb:36:in `require'
	from extconf.rb:1:in `<main>'


Gem files will remain installed in /var/lib/gems/1.9.1/gems/oj-2.0.14 for inspection.
Results logged to /var/lib/gems/1.9.1/gems/oj-2.0.14/ext/oj/gem_make.out

To fix this, you need to install a newer ruby-dev package:

sudo apt-get install ruby1.9.1-dev

You can now try to install the lolcommits gem again. It’ll actually install this time:

gem install rdoc
gem install lolcommits

A GitHub user documented this solution in issue #54. Another user suggests that the installation guide should be updated to make a note of this, but I haven’t seen it noted anywhere but in issue #54.

It’d sure save me a bit of time if it was noted somewhere, that’s partly why I’m writing this post.

After you’ve got lolocommits installed, see the README on GitHub for usage instructions and examples.

I usually run lolcommits --enable --delay=2 --fork when enabling lolcommits. That will capture a photo in a forked process, after a 2 second delay. I like this method because you’re not left waiting for the photo before being able to type into your terminal again.

Lolcommits is kinda cool, but not really useful in a practical sense. I do use it pretty much everywhere though, and have the default storage location linked to Copy. That way all my images are in the same place, no matter which machine I’m using at home.

If nothing else, it’s something kinda neat to be able to offer to your clients.

tyler-hat-lolcommits
I no longer smoke. 😉
0

Ubuntu and Aging Nvidia Graphics Cards: Compositing in 5 Steps

I’ve got a pretty old Nvidia Quadro FX 1400 video card in an older IBM that I use as my primary workstation at home. It only has 3GB of RAM, about 4TB of storage, and a dual core Intel Pentium 4 CPU at 3.60GHz. It’s plenty fast for my needs. I typically run Sublime Text 3, a terminal window with a few tabs, and Chrome Beta with many tabs.

I also use Docky, I’d really like to find a good replacement for it, but that’s something for another post.

1. Install the 304 nvidia driver.

Just fire up Synaptic Package Manager and search for “nvidia”. It’ll list a lot of stuff, but install the nvidia-304 and nvidia-304-dev packages. After installation is done, go to step 2.

2. Select the nvidia-304 driver.

Go to “Settings Manager”, then click “Additional Drivers”. Select the 304 driver, select the one labeled as “(proprietary, tested)”. Look at the screenshot for a detailed view.

3. Apply the nvidia-304 driver.

Click Apply, right below the driver list. Enter your password, and let it do it’s thing. It may take a while.

4. Generate xorg.conf.

Do this with ‘sudo nvidia-xconfig‘. It’ll write a new file to /etc/X11/xorg.conf. It will also make a backup of an existing xorg.conf if there’s one there to backup.

5. Reboot.

That’s it, you should have compositing working after a reboot.

Be aware that updates can break all of this. After applying almost 200 updates, it reverted me back to the nouveau driver. I had to go through these steps again to get back to the nvidia-304 driver.

It’s possible that step 1 isn’t necessary. I think the nvidia-304 driver would probably get installed when you do step 2. I didn’t try, though.

I’ve often downloaded drivers right from nvidia.com, but was having a terrible time getting them to build this time. Instead, I just went with the nvidia drivers provided by, um, well, whoever provides them, I guess. Using the nvidia-304 driver found in the Ubuntu repositories seems to be working quite well, so I’ll probably never have to do the manual download from nvidia.com again.

This applies to Ubuntu 13.10 Saucy Salamander, and more specifically, the Xubuntu flavor. But, it should work on any of the various flavors of Ubuntu.

Did I mess anything up? If so, please leave a comment here, or you can leave a comment on the Hacker News thread.

0

Contributing To GitHub Projects is Easy

Contributing code, or even just text, like documentation, to a GitHub repository that isn’t yours is extremely easy. I’ve seen a lot of people including instructions in their GitHub readme files explaining how to contribute to the project. I included instructions in the Rootdip readme at the end of May 2013.

There’s so many repositories at GitHub, most of them contain some type of code. Some trending languages on GitHub are Javascript, C, CSS, PHP, Python, Ruby, and Shell. There’s still a lot of repositories that contain nothing but text, just like the Front-end Frameworks repository.

GitHub Trending Repositories

GitHub provides a list of trending repositories as well. There’s some really, really good stuff there, there’s been times that I’ve starred every trending repository for the current day. I only have 608 stars. You can see the trending repositories on the right side of the Trending repositories page.

So how the hell do I contribute?

First, find the repository you want to contribute to. Sounds obvious, but don’t contribute to a project that hasn’t been updated in 4 years, your contribution will never be integrated. For this example we’ll be adding a new navigation menu (it’s a website, but can be anything really) to the githubuser/the-project-name repository (it’s not real).

Here’s what you want to do

1. Fork the project

2. Clone your forked repo: git clone git@github.com:githubuser/the-project-name.git

3. Create your feature branch: git checkout -b new-menu

4. Make your changes, creating whatever new files you need as well

5. Commit your changes to your new branch: git commit -am ‘Add a new menu to replace that ugly one’

6. Push to the branch: git push origin new-menu

7. Create a new Pull Request!

To create a Pull Request, go to the original repo (ex: http://github.com/githubuser/the-project-name/). There should be a green “Compare and pull request” button (button image is below) that’s not typically there, click it! Enter your comments and wait for the repo owner to merge your branch or suggest some changes.

Remember, your pull request may never get merged, so make sure you contribute to an active project. I recently sent a pull request to wp-svbtle, but the project hasn’t been active for 3 months. I’m also not sure the repo owner will accept my change, because my addition certainly isn’t inline with the official svbtle.com.

GitHub Pull Request Button

Here’s the “Compare and pull request” button for easy reference:

Click that button and you’ll be taken to a form to enter a comment including details about your pull request. Fill out, submit the form, and you’re done. Congratulations! You just sent a pull request on GitHub! You’re almost guaranteed to find a project that you’d like to contribute to, so make use of the issue search functionality, or the advanced search if you’re so inclined. There’s currently 21.7 million issues and 9.8 million repositories!

For the curious here’s a few recent pull requests I’ve sent that are strictly text-based, no code involved. I think they’re quite easy for git beginners to get a decent grasp of how git works. And getting people involved in open source at some level is always good.

Pull request examples:
1. StackLayout
2. bootmetro
3. IVORY Framework

Did I mess something up? Tell me in the comments below, or on Hacker News. If there’s a better way that I should be doing this, I’d love to hear your suggestions. :)

Enjoy a nyanoctocat.

nyantocat
0