Sublime Text Theme: Cyanide

cyanide-blue

A Minimal dark theme for Sublime Text 3

Cyanide is a minimal dark theme for Sublime Text 3 that comes with various color options. You can see screenshots of all the different colors in the gallery at the end of this post.

Cyanide can be installed via Package Control and can also be found on GitHub.

Cyanide includes settings for various tab heights, folder icon sizes, and UI contrast. To enable Cyanide in Sublime Text, open up your user preferences file and replace the theme and color_scheme directives with these:

I’m using Cyanide right now and am quite happy with it. I still love Predawn, but it’s time for a change. So, I’ll be rolling with the Wood Cyanide theme for a while.

Cyanide can be found on GitHub, along with all the relevant documentation.

Gallery of the various Cyanide colors are below!

Circliful: A jQuery Plugin Providing Animated Progress Circles

progress-circles

Static progress circles

I use something similar, but not quite as nice on my Work With Me page. They don’t have percentages and are just hacked together from codepen.io.

The jquery-plugin-circliful repository on GitHub is way more advanced than what I have on my Work With Me page. It has animations, which you can see on the demo page.

Circulful is very easy to use. Just include jQuery and the Circliful JavaScript and CSS on your page:

Add an element to your site with a unique ID:

Then, to get the progress circle to appear, add this JavaScript:

There’s a lot of optional data- attributes that you can set, as well. The entire list is below, straight from the README.

  • dimension / is the height and width of the element / default is 200px on 200px
  • text / will be deisplayed inside of the circle over the info element
  • info / will be deisplayed inside of the circle bellow the text element (can be empty if you dont want to show info text)
  • width / is the size of circle / default is 15px
  • fontsize / is the font size for the text element / default is 15px
  • percent / can be 1 to 100
  • fgcolor / is the foreground color of the circle / default is #556b2f
  • bgcolor / is the background color of the cicle / default is #eee
  • fill / is the background color of the whole circle (can be empty if you dont want to set a background to the whole circle)
  • type / full or half circle for example data-type=”half” if not set the circle will be a full circle / default full circle
  • total / If you want to display the percentage of a value for example you have 750MB Ram and at the moment are 350MB in use. You need to set data-total=”750″ and data-part=”350″ and the circle will show the percentage value 36,85%
  • part
  • border / Will change the styling of the circle. The line for showing the percentage value will be displayed inline or outline.
  • icon / Fontawesome icon class without the fa- before the class for example not fa-plus just plus
  • iconsize / Will set the font size of the icon.
  • iconcolor / Will set the font color of the icon.
  • animationstep / Will set the animation step, use 0 to disable animation, 0.5 to slow down, 2 to speed up, etc / default is 1

Circliful is available on GitHub, there’s also a demo. I’ll eventually switch the progress circles on my Work With Me page to use Circliful. I mostly enjoy it’s ease of customization through data- attributes.

If you need help configuring something, feel free to leave a comment. Make sure you look through the issues that have already been reported, too.

jQuery Plugins For Those Who Don’t Know JavaScript

jquery-plugins

Plugins to ease development for front-end designers

I saw jQuery-Plugins repository in my GitHub Today email yesterday. I’m a sucker for collections of cool things, and this repo is just that. It’s basically a collection of simple jQuery plugins that are very easy to use, requiring little or no experience with jQuery or JavaScript.

Here’s a little from the plugin’s README:

These jQuery plugins have been created to ease the pain that some front-end designers feel when they’re trying to implement basic features with little or no JavaScript or jQuery experience.

I plan to add plugins to this repository over time that only require HTML code, data-* attributes, and the inclusion of the script in question, following the same kind of principles as the Twitter Bootstrap extensions, in so far that no coding experience should be required in order to make things work.

It looks like there’s 4 plugins included:

  1. Carousel
  2. ClassToggle
  3. Google Analytics Helper
  4. SnapSlider

The developer has plans to continue adding more simple plugins.

The examples can be seen individually, too. Here’s the Carousel plugin in action. Here’s a few ClassToggle examples. There’s also a Google Analytics Helper example, showing how to track events and URL’s.

jQuery-Plugins looks like it could be a useful set of plugins. I may actually use the Carousel plugin for an upcoming project.

These plugins will come in handy for almost anyone, frontend or backend developers. Check them out!

Blitz.io T-Shirt

2014-07-27 21.37.10

It pays (in t-shirts) to be an early adopter

Got me a t-shirt from the fine folks at Blitz.io. It’s the only service that I use for load testing and generally bringing my sites to their knees. It’s cheap and highly configurable. I suggest you at least give them a try.

They recently offered t-shirts to early adopters, I was apparently one. Here’s part of the e-mail I received from Blitz.io:

The Blitz team wants to thank you for being an early adopter of our services. On July 1, 2014, we will be increasing our pricing and although prices for others will be changing, your subscription plan rates will remain unchanged.

Your support is a big reason for our success and as a token of our gratitude, we would like to offer you a complimentary Blitz gift. Please reach out to us at the support email below, let us know your t-shirt size, and we’ll do the rest.

If you didn’t get the email, you’re out of luck. If you are a Blitz.io user and did get the email, follow the directions at the bottom of the email to get your free t-shirt!

For those who don’t know, Blitz.io provides load testing from the cloud. Here’s a bit about how Blitz.io works.

Blitz has been created to help application and website developers manage and test performance throughout the development lifecycle. Through development, staging, production and operations, it is critical to ensure that your application meets the highest levels of user satisfaction.

Use Blitz credits to perform cloud based load tests at every step of development to help dramatically improve the quality of your applications and websites. We offer powerful capabilities including continuous monitoring, performance testing, and remediation.

If you’re building a website or web app that you expect to receive a decent volume of traffic, it’s a good idea to put it through it’s paces using Blitz.io first. Your app not scaling after launch would probably be a bit of an issue. :)

Just A Regular Night with WindStream DSL

terminal-ping

I see this a lot

I pay $90 a month for 12Mbps down and 1Mbps up. It’s all I have available. I never get 1Mbps up, at least according to testmy.net. Ping responses take quite a while, no matter the geographical location of the box I’m pinging.

tyler@echo:~$ ping 8.8.8.8
PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.
64 bytes from 8.8.8.8: icmp_seq=1 ttl=49 time=1791 ms
64 bytes from 8.8.8.8: icmp_seq=2 ttl=49 time=1941 ms
64 bytes from 8.8.8.8: icmp_seq=3 ttl=49 time=1523 ms
64 bytes from 8.8.8.8: icmp_seq=4 ttl=49 time=2028 ms
64 bytes from 8.8.8.8: icmp_seq=5 ttl=49 time=1831 ms
64 bytes from 8.8.8.8: icmp_seq=6 ttl=49 time=1846 ms
64 bytes from 8.8.8.8: icmp_seq=7 ttl=49 time=2147 ms
64 bytes from 8.8.8.8: icmp_seq=8 ttl=49 time=2228 ms
64 bytes from 8.8.8.8: icmp_seq=9 ttl=49 time=2299 ms
64 bytes from 8.8.8.8: icmp_seq=10 ttl=49 time=2350 ms
64 bytes from 8.8.8.8: icmp_seq=11 ttl=49 time=2252 ms
64 bytes from 8.8.8.8: icmp_seq=12 ttl=49 time=2373 ms
64 bytes from 8.8.8.8: icmp_seq=13 ttl=49 time=2247 ms
64 bytes from 8.8.8.8: icmp_seq=14 ttl=49 time=2116 ms
64 bytes from 8.8.8.8: icmp_seq=15 ttl=49 time=2069 ms
64 bytes from 8.8.8.8: icmp_seq=16 ttl=49 time=2248 ms
64 bytes from 8.8.8.8: icmp_seq=17 ttl=49 time=2162 ms
64 bytes from 8.8.8.8: icmp_seq=18 ttl=49 time=2204 ms
64 bytes from 8.8.8.8: icmp_seq=19 ttl=49 time=2148 ms
--- 8.8.8.8 ping statistics ---
21 packets transmitted, 19 received, 9% packet loss, time 20037ms
rtt min/avg/max/mdev = 1523.625/2095.396/2373.288/214.538 ms, pipe 3

Of course, WindStream support folks have me test with speedtest.net, which hangs well below the 1Mbps mark. Until the end of the upload, when it gets faster, and then that’s what’s used as the result.

It’s not this bad all the time, but it’s bad way more often than it should be.

I actually miss Mediacom Cable.