Free Flat Buttons Are Free

Include stylesheet, apply class, done.

I like flat design. I also like Free Flat Buttons, from freeflatbuttons.com. Did I mention they’re free? But most buttons are free, so the naming must be a marketing thing.

It’s been a while since Free Flat Buttons have seen any updates, but there’s really nothing to update in my opinion. They serve their purpose quite well. They look very nice when paired with FontAwesome, too.

Free Flat Buttons can be found on GitHub, it’s repository is very simple and only includes the button stylesheet and the HTML and CSS associated with the freeflatbuttons.com website.

They’re really simple to use, as they should be. All you have to do is include the CSS, <link rel=”stylesheet” href=”button.css”>, include the FontAwesome CSS if you want it, <link href=”http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css” rel=”stylesheet”>, and then add a class to an anchor tag.

For a normal sized button, something like this:

<a class="btn color-1" href="#">Color 1</a>

To make a button with rounded corners, use style-2, the other styles are listed on the freeflatbuttons.com site:

<a class="btn color-1 style-2" href="#">Color 1</a>

Aside from the homepage, a demo can also be found on CodePen. I’ve embedded it below. Version 1.0 of Free Flat Buttons can be downloaded from http://www.flatbuttons.com/button.css.

See the Pen Flat Buttons by Anıl Bilir (@Qanser) on CodePen.

Dark GitHub

GitHub Lights Out

I love the GitHub explore today emails. It’s a daily email consisting of currently trending repositories, repositories starred by people you follow, and repositories that have been starred by GitHub staff members.

The September 06, 2014 email included a repository that caught my eye, StylishThemes/GitHub-Dark. Apparently one of the people I follow on GitHub starred it, which is awesome. I may not have found this otherwise.

Dark GitHub requires that you have the Stylish extension installed for your browser. Stylish can be easily installed in Google Chrome or Mozilla Firefox.

So, before you go any further, make sure you have the Stylish extension installed. Click here for Stylish for Google Chrome, and click here for Stylish for Mozilla Firefox. Stylish is a very useful tool for changing the style of websites, they have an extensive repository of styles that you can apply to your favorite websites. As of this post, they have custom styles for 59,197 websites. Stylish is powered by userstyles.org.

The Dark GitHub userstyle comes with a variety of syntax highlighting themes, the ability to set your own background image, setting a base color scheme, and changing the code tab size (defaults to 4).

Installing the Dark GitHub Stylish Extension
Installing the Dark GitHub Stylish Extension

To install Dark GitHub, visit the GitHub-Dark userstyles.org page. Select your options (ie: syntax highlighting theme, background image, etc). I typically just leave everything at their defaults.

Once you’ve got the options set how you want, click the green Install With Stylish button, as seen in the image above. You’ll be asked if you’re really sure that you want to proceed with installing the GitHub Dark userstyle. If you do want to install it, just click OK.

Now visit GitHub and enjoy the dark colors! :)

dark-github

Notejam: Easily Learn a Web Framework

The easy way to learn web frameworks

Notejam provides you with a very easy way to learn new web frameworks. All kinds of web frameworks, too:

  • PHP
  • Python
  • Ruby
  • JavaScript (node.js)

Notejam describes itself like this:

Do you know django/laravel/symfony/etc and want to try rails/flask/pyramid/etc? The easy way to start with a new framework is to compare it with frameworks you already know. The goal of the project is to help developers easily learn new frameworks by examples.

Notejam is a unified sample web application (more than just “Hello World”) implemented using different server-side frameworks. Currently most popular python, php and ruby frameworks are supported.

All implementations of Notejam are SQLite based and are launched by built-in web servers. Each implementation has steps describing how to easily install, launch, and run tests.

Notejam is developed by Serhii Komar, @komarserjio on Twitter. Notejam can be downloaded on GitHub and you can view various screenshots on GitHub, as well.

Receive Alerts On SSH or SFTP Logins with Papertrail

Frustration-free log management, plus a lot more

I’ve been a huge fan of Papertrail ever since I discovered it, probably about a year ago or so. I use it mostly to monitor server logs. I currently have two servers setup to send syslog messages to Papertrail.

The Papertrail Events dashboard can be a bit overwhelming at first, but the provided search is powerful and allows you to finely control which log messages you see and which you don’t.

You can even setup saved searches to fire when a specific event occurs. For example, I have a saved search that searches for the following:
Accepted publickey for tyler

When that message shows up in Papertrail, it means that I logged in, or that someone else has logged in using my SSH key. This can be quite handy, especially if you’re a one man shop like me and are usually the only person that has SSH or SFTP access to a server.

Getting a DigitalOcean VPS added to Papertrail, especially if it’s running Debian or Ubuntu, is super easy. It just requires that you modify /etc/rsyslog.conf and add a line to the end of the file that will send a copy of the system logs to Papertrail.

Papertrail can monitor application logs, too, such as Apache httpd logs and MySQL server logs, although that takes a bit more configuration to get working properly.

If nothing else, it’s just nice having system logs aggregated in one central place, where everything is easy to search through, making it easy to find exactly what you’re looking for. If you’re an admin for one server or hundreds of servers, Papertrail could turn out to be one of your favorite tools. It’s definitely one of my favorites.

I suggest you give Papertrail a try, can’t hurt, they even have a plan that’s free forever. It’s definitely a great service for monitoring server logs.

Pretty YouTube Embeds with PrettyEmbed.js

Prettier YouTube Embeds

PrettyEmbed.js is a jQuery plugin for making your YouTube embeds look much better. It’s on GitHub, and a demo can be seen here on CodePen.

PrettyEmbed.js works with FitVid.js, but it’s not required, and comes with options like high-res preview images and advanced customization of embed options.

You can see some of the advanced customization options in the CodePen demo below. Just click the “JS” tab to see the JavaScript.

See the Pen PrettyEmbed.js Demo by Mike Zarandona (@mike-zarandona) on CodePen.

I’ve used this for a number of client websites, people like to host their videos on YouTube, yet have an elegant looking player that’s not screaming YOUTUBE when it’s embedded. This is where PrettyEmbed.js comes in. This is for those of you who want nice looking YouTube embeds.

Documentation is quite good and provides a list of all options and how to use it with HTML5 or with Javascript. It does require jQuery.