Jeet: A CSS Grid System for Humans

human-grid

Jeet can do things other grids can’t

I haven’t actually used Jeet yet, but am going to be giving it quick run on CodePen later on today. Here’s the Jeet description, from their homepage, which is hosted on GitHub Pages, I believe.

We still build things the way machines read them – not the way we intuit them. Jeet allows you to express your page grid the same way a human would describe it. No more needlessly nesting elements. No more rigid twelve column rules. Enjoy building faster with less code, and more flexibility with Jeet.

There’s no license defined for Jeet, at least not one that I could find after searching their website and their GitHub repository.

There’s also a really nice presentation of what sets Jeet apart from other grid systems. It’s short and definitely worth the watch.

Getting started using Jeet is pretty easy for most people, you can use SCSS (via Ruby) on Windows, and MacOS/Linux platforms. Or you can use Stylus if you have nodejs installed. A screenshot is below of the installation instructions.
jeet-getting-started

Jeet also provides some short screencasts that are meant to be easily digestible and easier to remember and understand. The video are all hosted on YouTube but a screenshot of the section from their site is below.
jeet-learn-by-example

Anyway, you should check Jeet out for your next project requiring a CSS grid. It’s super easy to start using, I especially liked their note on easy integration:

Jeet can work in any environment’s pipeline whether it be a static site in SCSS, a Node package in Stylus, or as a Rails application. Anywhere Stylus or SCSS work, Jeet will work. It’s that simple.

I like what I’ve seen of Jeet so far, and I think you will, too! If the test goes well and I like it as I expect I will, I’ll probably use it for an upcoming project that is essentially a CSS grid of photos. Since there’s multiple screenshots in this post, a gallery of them all is below.

Belt: A Handful Of Tools For PHP Developers

php-belt

Clean and well-documented source

Belt is a really handy, and relatively new tool set for PHP developers. It’s initial commit was only 9 days before the date this post was published.

However, it still looks very usable and rather mature. Code has been added at a pretty quick pace, there’s been 102 commits since Belt’s release on GitHub, a little over a week ago.

It’s release under the MIT license, so it’s compatible with the GPL and can safely used in WordPress themes and functions, if you want them included in the official repositories.

Basically, you just include belt and use it’s built in methods/functions to do certain things that would take a bit more work using straight PHP. For example, to get the maximun of an array of numbers, do this:

A value of 3 will be returned, because it’s the max value there.

And from the readme, a list of what Belt offers.

  • 60+ useful functions
  • ability to use the facade Belt or a dedicated component (e.g. BeltUtilities)
  • fully tested
  • source code is clean and documented

Seems like it offers some pretty useful functions, and it looks really easy to use. I’ve been looking for a solid PHP base to use and this may just be it. Anyone got any other suggestions? I’ve heard a lot about Skeleton for PHP.

Searching for “skeleton” on GitHub, then filtering for PHP, gives a LOT of results, over 1,000 results to be more precise. So, maybe I’ll browse there for a while before making a decision.

Any suggestions can be left in the comments.

Easily Deploy An Open Source Team Chat App to Heroku

lets-chat

Self-hosted chat app for small teams

Let’s Chat is a pretty cool piece of software (no, it’s actually fucking awesome). The ability to run the app on Heroku just makes it that much nicer.

Setting it up on Heroku is quite easy. You can see it running on Heroku at http://yell.longren.io. There’s no admin user, so anyone can register and create their own rooms.

Files can also be posted to rooms, but an Amazon S3 bucket is required for that feature to work. Although, other file storage options are being looked into. Another neat feature is automatic transcript creation. There’s a transcript screenshot in the gallery below.

Prepare Let’s Chat

Open up a terminal and clone the Let’s Chat Git repository:

That will make a local clone of Let’s Chat in the lets-chat folder. Go into that folder, with cd lets-chat.

1. Copy settings.js.sample to settings.js, like so:

2. Remove settings.js from the .gitignore file. Just open .gitignore in your favorite text editor and remove the line containing settings.js.

3. Make any changes to settings.js that you’d like. This is where you’d specify your Amazon S3 credentials to allow storing files in a bucket.

Deploy To Heroku

We’ll be using heroku-app-name as the name of our Heroku app. So you’ll obviously need to change instances of heroku-app-name in the commands that follow.

1. Add a Heroku remote to your newly cloned repository:

2. Add the MongoLab Heroku addon:

3. Get the Mongo URL. Executing the following will give you the Mongo URL, which you’ll need below.

You’ll see some output similar to this:

The Mongo URL is the part that starts with mongodb://.

4. Now, we need to set the Mongo URL:

You’ll want to change the DATABASE_URL variable to the Mongo URL specific to your app.

6. All that’s left is to commit and push to Heroku. You should still be in the lets-chat folder, so, make a git commit! You’ll have to anyway, before you can push to Heroku.

7. Now we can finally push this to Heroku!

Visit your Heroku app URL in your web browser and you should be greeted with a screen that looks similar to the featured image for this post. Some basic screenshots can be seen below!

If you run into any issues or find something I have incorrect, please let me know. You could also see if your problem has already been addressed on GitHub.

This is the steps I took to get Let’s Chat working on Heroku. It’s possible that the project developers will streamline this process in the future. But for now, this is a very easy solution to hosting on Heroku.