Mar 19 meeting – speaker line-up

Dannie Gregoire – Greasemonkey

 Extending enterprise applications with javascript and Greasemonkey.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

Thomas Neirynck – Leaflet

A developer API for adding maps to a web app.
http://leafletjs.com/ 

What to expect:

  • Informal conversation style
  • 15-20min talks
  • Audio/video recorded for use on website
  • Slides / video / live-coding all optional, you decide
  • Questions and open discussion to follow

Global Game Jam This Weekend! (Jan 24-26)

Louisville Global game Jam 2014 louisvilleglobalgamejam.github.io
The Global Game Jam (GGJ) is the world’s largest game jam event, and now Louisville will have a piece of the action!

Hosted by LVL1 Game Dev Group and JSLou
Held Jan 24 5pm to Jan 26 5pm at LVL1 Hackerspace (directions)

Who:  Anyone interested in making games! Specifically programmers, digital artists, and musicians.

Where:  LVL1 Hackerspace, 814 E Broadway, Louisville, KY 40204

When:  Friday, January 24th at 5pm to Sunday, January 26th at 5pm

48Find out more, RSVP, and signup to participate here: http://louisvilleglobalgamejam.github.io/

January 15, 2014 Meeting Recap

Talks:
HTML5 Canvas / Javascript for cross platform browser games
Presenter: Eric Lathrop
http://scurrygame.com –> click “experimental build”

JSLou and LVL1 hosting Global Game Jam 2014 Announcement
Presenter: Alex Bezuska
http://louisvilleglobalgamejam.github.io/

Workshop/Group Hack
JSLou.org redesign Meteor.js project
https://github.com/zeroasterisk/jslou-www-meteor

Misc Links:

Time normalization (deltatime) for games: http://en.wikipedia.org/wiki/Delta_timing

Game development platform/engine that outputs to HTML5 canvas
https://www.scirra.com/ Construct2 (win only)

Twitter clone with meteor.js tutorial : http://net.tutsplus.com/tutorials/javascript-ajax/building-ribbit-in-meteor/

httpd.conf virtual host forward to port on server (for node or meteor)
replace ’1337′ with your desired node/meteor server port

<VirtualHost *:80>
    ProxyPreserveHost On
    ProxyRequests Off
    ServerAlias domain-name.com
    ServerAlias www.domain-name.com
    ProxyPass / http://localhost:1337/
    ProxyPassReverse / http://localhost:1337/
</VirtualHost>

 

Conquer State Names and Abbreviations using this JS Function

I found this great post by Joshua Levinson who converted a function in PHP by Sean Barton for use with JS/jQuery.
This was really useful for me at work today when I was generating a dynamic drop-down menu with states and cities.
I thought I would share,  just made a tiny tweak to switch everything to threequals :

 function convert_state(name, to) {
      var states = new Array(                         {'name':'Alabama', 'abbrev':'AL'},          {'name':'Alaska', 'abbrev':'AK'},
          {'name':'Arizona', 'abbrev':'AZ'},          {'name':'Arkansas', 'abbrev':'AR'},         {'name':'California', 'abbrev':'CA'},
          {'name':'Colorado', 'abbrev':'CO'},         {'name':'Connecticut', 'abbrev':'CT'},      {'name':'Delaware', 'abbrev':'DE'},
          {'name':'Florida', 'abbrev':'FL'},          {'name':'Georgia', 'abbrev':'GA'},          {'name':'Hawaii', 'abbrev':'HI'},
          {'name':'Idaho', 'abbrev':'ID'},            {'name':'Illinois', 'abbrev':'IL'},         {'name':'Indiana', 'abbrev':'IN'},
          {'name':'Iowa', 'abbrev':'IA'},             {'name':'Kansas', 'abbrev':'KS'},           {'name':'Kentucky', 'abbrev':'KY'},
          {'name':'Louisiana', 'abbrev':'LA'},        {'name':'Maine', 'abbrev':'ME'},            {'name':'Maryland', 'abbrev':'MD'},
          {'name':'Massachusetts', 'abbrev':'MA'},    {'name':'Michigan', 'abbrev':'MI'},         {'name':'Minnesota', 'abbrev':'MN'},
          {'name':'Mississippi', 'abbrev':'MS'},      {'name':'Missouri', 'abbrev':'MO'},         {'name':'Montana', 'abbrev':'MT'},
          {'name':'Nebraska', 'abbrev':'NE'},         {'name':'Nevada', 'abbrev':'NV'},           {'name':'New Hampshire', 'abbrev':'NH'},
          {'name':'New Jersey', 'abbrev':'NJ'},       {'name':'New Mexico', 'abbrev':'NM'},       {'name':'New York', 'abbrev':'NY'},
          {'name':'North Carolina', 'abbrev':'NC'},   {'name':'North Dakota', 'abbrev':'ND'},     {'name':'Ohio', 'abbrev':'OH'},
          {'name':'Oklahoma', 'abbrev':'OK'},         {'name':'Oregon', 'abbrev':'OR'},           {'name':'Pennsylvania', 'abbrev':'PA'},
          {'name':'Rhode Island', 'abbrev':'RI'},     {'name':'South Carolina', 'abbrev':'SC'},   {'name':'South Dakota', 'abbrev':'SD'},
          {'name':'Tennessee', 'abbrev':'TN'},        {'name':'Texas', 'abbrev':'TX'},            {'name':'Utah', 'abbrev':'UT'},
          {'name':'Vermont', 'abbrev':'VT'},          {'name':'Virginia', 'abbrev':'VA'},         {'name':'Washington', 'abbrev':'WA'},
          {'name':'West Virginia', 'abbrev':'WV'},    {'name':'Wisconsin', 'abbrev':'WI'},        {'name':'Wyoming', 'abbrev':'WY'}
          );
      var returnthis = false;
      $.each(states, function(index, value){
          if (to === 'name') {
              if (value.abbrev.toLowerCase() == name.toLowerCase()){
                  returnthis = value.name;
                  return false;
              }
          } else if (to === 'abbrev') {
              if (value.name.toLowerCase() == name.toLowerCase()){
                  returnthis = value.abbrev.toUpperCase();
                  return false;
              }
          }
      });
      return returnthis;
      }

Thanks again  Joshua !

Direct link: (link)
php origional (link )

jquery.timepicker and another quickTip

So here is another useful jQuery plugin I found while doing a signup form project at work, the jquery.timepicker.  As you may have guessed – this is similar to the date picker  componant in jQueryUI, but as the name implies it is for Times only. This particular project called for me to create a means for the user to enter a time range they were available for an event. I started to create my own custom UI for this, but then the lack of  time made me search for an existing tool.  After a quick search I found jquery.timepicker by John Thornton, here is the main demo site: jQuery TImePicker

I really love the simplicity of the plugin, I simply created a class called “timepicker” and gave that class to each of the input elements on the page that needed it.
Then I added this snippet of jQuery to the page:

/* All you need to get started once jquery.timepicker is included on your page:
*/
$('.timepicker').timepicker();

This is all you need to start a very basic time picker, but I wanted to restrict the user to a certain range, so I used the parameters that John describes on the jquery.timepicker site:

$('.timepicker').timepicker({
	'disableTimeRanges': [
    ['12am', '10am'],
    ['4:30pm', '11:59pm'],
  ]
});

quickTip: Out of sight – Out of Mind

jquery.timepicker

Let’s ditch these non-selectable times, and lower our chances of  confusing the user.

This worked great, but it does not hide the disabled times, it only grays them out and prevents selection, so today’s quickTip is how to remove them from sight, and provide a better user experience.

I found out that John wrote jquery.timepicker to give disabled times a css class of “ui-timepicker-disabled”, so it’s very easy to hide these elements using either CSS or jQuery.

jquery.timepicker 2

Here is the result, only see what you can pick, only pick what you can see.

I have noted both methods below:

// The CSS Method

.ui-timepicker-disabled{ display:none; }

 

// The jQuery Method

$('.ui-timepicker-disabled').hide();

Have a great day, and if you have a quick tip be sure to pm me on twitter @alexbezuska and I can share it on the site.

Learn. Create. Explore. Code. 
-Alex Bezuska

Using RegEx to Censor info for Screencasts

At my work,  many of the projects we create are  used by multiple mangers across the company, and because of this training would be difficult if we did not have screencast videos. But sometimes no matter what page of the app you go to it will contain sensitive information that only the manager of a specific office should see.

I came up with this easy to use bit of Javacript to effectively ‘censor’ info on a page if the element has the right css class. This only really works for screencast videos because refreshing the page return all of the text to its original state.

The way that it works is using a regular expression to target any letters A-Z and any numbers 0-9 and replace them with asterisks(*) fairly simple but he can be pretty useful for situations like this.

This works on button click, but you could just have it run on document ready.

$('#btnCensor').click(function(){
 $(".censor").each(function(){
  $(this).text($(this).text().replace(/[a-z0-9]/gi, '*'));
 });
});

 

Try it out for yourself:

See the Pen censor info with js by Alex Bezuska (@AlexBezuska) on CodePen