Notejam: Easily Learn a Web Framework

notejam

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.

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!

WordPress Tip: Specify a Primary Category using Advanced Custom Fields

acf

What WordPress custom fields should have been

I found Advanced Custom Fields (also known as ACF) about 6 months ago while working on a project for a client. They didn’t want to have to mess around with editing the Custom Fields that come native with WordPress, it just wouldn’t have worked as smoothly.

The client needed to require one image, one PDF, one year selection, and one category. The category consisted of two options, “Weekly” or “Daily”. If you’re wondering, it was a newspaper client who wanted to categorize their posts as being either a “weekly issue” or a “daily issue”. Makes sense for a newspaper!

Getting the native WordPress custom fields to play along well with files can be tricky, and probably not worth the effort, especially with a plugin like Advanced Custom Fields around.

So, enter the hero of this post, Advanced Custom Fields. I was able to set everything up with Advanced Custom Fields within about 20 minutes, and that even counts the time that I took to make various theme templates pull data from Advanced Custom Fields. The actual setup of Advanced Custom Fields took about 2 minutes.

I’ve since started using Advanced Custom Fields here at longren.io, too. Independent Publisher, the WordPress theme I’ve been using, likes to show one main category when you’re viewing a single post, even if it’s not the most relevant category. So instead of a post about WordPress having the Git category shown at the top, I can now specify which category I want to be shown. So, for a post like this, I would obviously choose WordPress as my primary category.

I’ve already added the necessary parts to my Independent Publisher child theme, and have sent a pull request to Raam Dev to get his thoughts. It’s a very easy thing to support in a theme, however, it requires that everyone using that theme use the same field name in ACF.

I named my field primary_category, since that’s exactly what it is.

Example field setup with Advanced Custom Fields

Example field setup with Advanced Custom Fields

After you’ve added your “Primary Category” custom field, you can then use the value of that field throughout your theme. I’ll have a short post later this week on exactly how you can display the primary category value in your theme. Or, if you want to know right now, you can see this pull request at GitHub.

As you can tell, Advanced Custom Fields is a beast of a plugin. I also love that Advanced Custom Fields is totally free, which is kind of amazing to me. I’ve come across many paid plugins that are nowhere near as polished and user friendly as Advanced Custom Fields.

Advanced Custom Fields doesn’t skimp on the documentation, either. Their documentation site is extremely helpful, I never once ventured away from it while getting familiar with Advanced Custom Fields for the first time.

You can download Advanced Custom Fields from the WordPress Plugin Directory, so you can also install it in just a few clicks, right from your WordPress Dashboard! Advanced Custom Fields is developed primarily by Elliot Condon, and can also be found on GitHub.

The great thing about this is that it can be applied to any theme, not just Independent Publisher. So, if you’re not using Independent Publisher, just setup Advanced Custom Fields as I described and make the necessary changes for your theme.

A follow-up post will have more details on using data from Advanced Custom Fields, no matter what theme you’re using.