Chomper Stomping jQuery/JavaScript/CSS 3/HTML 5, Java/PHP/Python/ActionScript, Git, Chrome/Firefox Extensions, Wordpress/Game/iPhone App Development and other random techie tidbits I've collected

29Sep/140

Sublime JSFMT

Sublime JSFMT is a JavaScript formatter for Sublime Text that Paul Irish knocked out a few days ago.

I had a few issues getting it set up, but, once I did it was amazing.

Here's what I had to do to install, setup and configure Sublime JSFMT:

  1. Go to ~/Library/Application Support/Sublime Text 3/Packages/
  2. Clone the project with git clone https://github.com/paulirish/sublime-jsfmt
  3. Open package.json
  4. Add the following to the dependencies object:

    "esformatter": "^0.4.2",
    "esformatter-quotes": "^1.0.0",
    "esformatter-semicolons": "^1.0.3",
    "esformatter-braces": "^0.2.0"
  5. run npm install

    If you are having problems at this point, you may need to fix your permissions
  6. Copy the .jsfmt-example file to ~/.jsfmtrc (and edit to suit. Use \t for tabs instead of spaces
  7. Open ~/Library/Application Support/Sublime Text 3/Packages/sublime-jsfmt/jsfmt.sublime-settings and comment the options object out and change autoformat to true
  8. Might need to restart sublime, but, at this point your should be good to go. Change a js file and save to watch the magic happen. If nothing happens, try hitting Cmd+Shft+P and typing JSFMT and select JSFMT: Format the current file. If there are errors happening, a box will pop up and tell you what they are.

Happy scripting!

18Oct/13Off

Announcing ijj, new JavaScript “library”

I'm pleased to announce today the release of the ijj JavaScript library. It's super small, super light-weight, and gives you all of the flexibility and power of JavaScript. One of the most well known, widely implemented, widely adopted programming languages in the world.

Best of all, if you know JavaScript, this library will make total sense to you. It allows you to utilize JavaScript the way it was meant to be used. It's amazing. The more JavaScript you know, the less there will be to learn for you to use this library. It's really really cool.

So, I'm going to walk you through getting started.

First, download this file.

Then, put it somewhere (wherever you put your JS files in your project will be fine).

Then include it like this:

<script src="path/to/ijj.js"></script>

Ok, great, we're ready to move on.

When you create a new Class you can use ijj to do it just like this:

var MyClass = {};

Simple as that!

Want methods and properties? No problem!

JS Bin

So simple!

Want to use your private methods or access your private properties? Look here:

JS Bin

Now if you want an instance of your class:

var myInstance = new MyClass();

Need some instantiation values? No worries!

JS Bin

So powerful! This is just the surface. Take a look at the documentation to see just how amazing ijj is. You can do literally anything any JS library has ever done ever with ijj and a little knowhow. The sky is the limit.

Who uses ijj? Google, Github, Apple, Microsoft, MIT, Oxford, NASA, US Gov, North Korea, pretty much everyone. Other libraries even use it! That's right, jQuery, Backbone, Angular, Ember and many many more are built on top of ijj (seriously! It's kinda the best kept secret library out there. Ask any big player and they will tell you that ijj is pretty much the cat's pajamas)

So, what are you waiting for? Get going!

Fork me on GitHub!

26Sep/13Off

Proxying a request through nodeJS from front end to different server

I was quickly copying/pasting some code around in a project and screwed it up and started getting a 404 response to an AJAX request (using backbone.js). I realized I was getting the 404 to the OPTIONS request backbone was making because I was accidentally not using my NodeJS router. So, for future reference (mostly to myself, but, maybe this will help others), here is my basic implementation.

14Aug/13Off

Migrate Git repository from one remote host to another

If you need to migrate a git repo from one remote to another, it is actually quite simple. If both remotes are configured, you just need their URLs and you're ready to go. Here's the gist.

# replace with the name of the repository to be migrated
# replace <remote-from-url> with the url of the repository to be migrated from
# replace <remote-to-url> with the url of the repository to be migrated to
git init --bare temp<repo>
cd temp<repo>
git remote add from <remote-from-url>/<repo>.git
git remote add to <remote-to-url>/<repo>.git
git fetch from 'refs/*:refs/*'
git push to 'refs/*:refs/*'

Special thinks to Benjamin Dean for the code snippet.

29Jun/13Off

How to diagnose a fetch error on a Collection in Backbone

Today I was receiving a 200 "OK" success response from my REST route, but Backbone was evaluating through to my error callback for my Collection sync on fetch.

It turned out to be invalid JSON being returned by the REST server, but, the way I figured this out was to add a statusCode object to the fetch options and console.log out the response for a 200 statusCode. There is almost certainly a better way, but, for posterity, here's my solution:


this.chats.fetch({statusCode: {
200: function() {
console.log('200', arguments);
}
}});

If you look in the arguments object in the console, the third argument contains the information you need. The second argument was "syntaxError" and the third argument had the actual details.

12Feb/130

Discourse Themes

logo

Discourse Forum Themes are going to be a thing the way WordPress Themes are a thing (I'm betting). Themeforest sells WordPress themes, and you can make a very comfortable living if you've got a premium WordPress Theme for sale on ThemeForest. If you want to buy a premium discourse theme, I'm betting eventually you'll be able to do that there as well.

After a cursory look at Discourse, I realized that you don't need to learn Ember and write an Ember theme. Theoretically you could write a custom CSS theme for Discourse, but, I don't think that's where the real money will lie. Since Discourse is really split into two separate parts (an app and a back-end) that talk to each-other via a REST api, it's like a theme developers dream come true. You can write the front end app in anything you want, as long as it talks to the RESTful back-end. This means, if you wanted, you could create a PHP driven Discourse theme. More likely, you will probably want to create some sort of Backbone Marionette driven Discourse theme that interfaces with the JSON REST api (which is written in Ruby). Out of the gate, their themes are Ember js and CoffeeScript; but since that isn't quite as ubiquitous (and hopefully never will be) as just plain old javascript or PHP or something, I don't think themes written in that standard will take off.

JavaScript based Discourse Theme templates written with a common library (like Backbone with Twitter Bootstrap) are going to be a potential candidate for some good money. If you can create a good boilerplate discourse theme template that discourse theme authors can purchase and build on top of, that could be a valid business model as well. If I do any Discourse theming, this is most likely what I would do. A boilerplate Discourse theme template, with one reference implementation theme, written in JavaScript with Backbone, Marionette, Underscore, jQuery, and Bootstrap and available for Discourse theme authors to purchase and get up and running with (especially if they want more than just a CSS theme, but don't want to learn EmberJS and CoffeeScript).

24Sep/120

Super Simple CSS3 Only Bookmark Ribbons

Screen Shot 2012-09-24 at 1.31.36 PM

Here are some extremely easy basic CSS 3 only triangular-bottomed bookmark split-ribbon things.

This is accomplished through some creative use of the "border" attribute on divs in CSS. It takes a main div (where the body of the ribbon is) and then two smaller divs that create the actual split ribbon effect.

You can change their color, or even assign a background image for some truly ribbon like effects.

You could probably even throw some nice shadows on it and make it look even better, but, this is just a very simple basic version.

You may have to scroll down past the share bar to see the embedded jsfiddle...

I whipped these up today for something I was working on and realized it was worth sharing with the world.

Thanks to CSS-Tricks.com for the basis of this effect (css triangles).

26Jul/123

Sublime Text 2 Grunt Build

Kick off a grunt build from within Sublime Text 2:

{
"cmd": ["grunt"],
"working_dir": "/Users/[your username]/[your project path]",
"shell": true
}

It took me a bit to figure out how to actually make a grunt build run from within SublimeText 2, so I wanted to capture it here for anyone else trying to figure it out. Google really didn't help me at all...

The key is the working directory thing. You can't use "~/", you have to actually use the full path to your directory that you normally kick your grunt builds off from. I found one place on stackoverflow where it recommended adding this after "grunt":

, "--no-color"

but it didn't change the output for me at all.

You put this code in a file you create by clicking "tools" > "build system" > "new build system". Then whatever you name the file when you save it will be the name of the "build system". You can hit "cmd B" to build it or select "tools" > "build system" > "whatever you named it"

4Jul/123

Slider Video Embed

Screen Shot 2012-07-04 at 11.25.49 PM

If you are looking to embed video into the slider using the continuum refactor, here's how:

1) Go to the video on Youtube or Vimeo
2) Copy the "<iframe..." portion of the embed code
<iframe src="http://player.vimeo.com/video/44143357" width="500" height="356" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
3) Create a new post/review
4) Create a custom field named "vimeo", "vimeofull", "youtube" or "youtubefull"
5) Paste the embed code into the custom field
6) Adjust the size the video displays at (width should be around 460 and height should be around 340 for "slider A")
7) Tag the post/review with the tag "spotlight"

Note: There is currently a bug with the slider that causes it to continue rotating while the video is playing. This will be resolved by 9/15/12. Bug has been fixed and is no longer present in v12.0918. However, slider will only pause while your mouse is over it. Working on another change to make it so that the slider will pause once you start playing a video and will unpause only once you interact with it again.

2May/120

Douglas Crockford – JavaScript the Good Parts

Screen Shot 2012-05-02 at 10.23.54 AM

Really good lecture on JavaScript, especially if you are new to the language from another language like Java.

Tagged as: No Comments