From Paper to Screen

Here is a great little short about typography and it's transition from print to screen.

From the video:

Animation which shows typography evolution from paper to screen.
The animation is divided in two parts.
The first deals with the basic rules of typesetting.
The second, is about the evolution of typography in cinema.
Used mainly for Opening and Closing title.

12
Jul 2013
AUTHOR matt
CATEGORY

Design

COMMENTS No Comments
TAGS

Best JQuery Image Gallery

I was looking to make a photo gallery site for my grandmother with photos of my daughter that would work well on the ipad. It took a while to find one that was:

  1. Flexible and Responsive
  2. Worked with touch
  3. Lazy-loaded images
  4. Had a thumbnail option
  5. Was free
  6. Worked with very little hassle, but had enough options to do what I wanted.
This is the best one I found: Fotorama - http://fotorama.io It's so simple to use and looks really good.
04
Jul 2013
AUTHOR matt
CATEGORY

jquery

COMMENTS No Comments

Quick JQuery Character Counter / Multiple Select Limiter

Recently, I needed to create a way to add a character counter/limiter to multiple textareas. Along with that, I needed to make a way to limit the number of selections that could be made in a multiple select box.

Textarea

For most modern browsers, you can add maxlength="X" to a textarea and it will prevent it from accepting more than X characters. Here is how to accomplish both:
Plugin:

$.fn.character_counter = function() {
$(this).keyup(function() {
var charlimit = parseInt($(this).attr('maxlength'));
var text = $(this).val();
var chars = text.length;
if(chars > charlimit){
var new_text = text.substr(0, charlimit);
$(this).val(new_text);
}
$('#' + $(this).attr('name') + '_charcount').text((charlimit - chars));
});
}

This assumes that near your textarea with name="SOMENAME" you have a span or some other holder with an id="SOMENAME_charcount"

To call this, we simply check all the textareas on a page with maxlength defined:
$('textarea').each( function() {
if($(this).attr('maxlength') !== undefined) {
$(this).character_counter();
}
});

Multiple Select

The multiple select is very similar. We have a multiple select box with a name="SOMENAME", it has a maxlength set (which does nothing as far as I know for the browser, but since that's the case, it seems like an appropriate place to keep the limit), and we have some span or other holder with an id="SOMENAME_selectcount". With the multiple select, you need to store the last set of values so that you can reset what is selected if the user is trying to select more options.

Here is the plugin:

$.fn.select_limiter = function() {
var lastselected = $(this).val();
$(this).change( function() {
var charlimit = parseInt($(this).attr('maxlength'));
if($(this).val().length > charlimit) {
$(this).val(lastselected);
} else {
lastselected = $(this).val();
}
$('#' + $(this).attr('id') + '_selectcount').text((charlimit - $(this).val().length));
});
}

And here is how it is called, again, very similar to the textarea:


$('select[multiple]').each( function() {
if($(this).attr('maxlength') !== undefined) {
$(this).select_limiter();
}
});

It seems like this solution is straight forward enough. You could probably make it so that it adds the character counter holder in the function, but for what I needed, this worked fine.

The textarea character count is based on this article.

Sorry that my code formatter is crap.

20
Jun 2013
AUTHOR matt
CATEGORY

jquery, Web

COMMENTS No Comments

Drupal 7: Duplicate Field Collection Attached to a node

So, I'm still using Drupal for a good amount of work that I do. Where WordPress is great for blogging and content, Drupal is significantly better for managing data. It's ok.

The situation I was in today, was as follows: I have a system that has a Node. Each of these Nodes has multiple Field Collections of various Field Collection types (or bundles or whatever). I needed a way to duplicate a Field Collection Item and then direct the user to a page where they could edit the duplicated content. Some of what I did to get this done was ugly. I'm sorry.

Here is the solution module:


function io_menu() {
  $items['copy/fc'] = array(
    'page callback' => '_copy_field_collection',
    'access arguments' => array('access content'),
  );
  return $items;
}

function _copy_field_collection($entity_id = false, $node_id = false) {
  if($entity_id && $node_id) {
    $target_node = node_load($node_id);
    $entity = entity_load_single('field_collection_item', array($entity_id));
    $new_entity = $entity;
    $fc_field = str_replace('_', '-', $new_entity->field_name);
    $new_entity->item_id = false;
    $new_entity->revision_id = false;
    $new_entity->is_new = true;
    $new_entity->status = 0;
    $new_entity->setHostEntity('node', $target_node);
    $clone = entity_save('field_collection_item', $new_entity);
    $go_here = 'field-collection/' . $fc_field . '/' . $new_entity->item_id . '/edit';
    drupal_goto($go_here, array('query' => array('destination' => 'node/' . $node_id)));
    exit;
  }
}

Somewhere in your Node template, you'll want to add a link to "/copy/fc/[field_collection_id]/[host_node_id]"

I did it right in the node template file, but you could put it anywhere. I searched all over for a way to do this, and there just doesn't seem to be a way to do it easily. I don't know why you can't just set the Host Entity ID on a Field Collection, but whatever. Hope this helps.

26
Mar 2013
AUTHOR matt
CATEGORY

Drupal

COMMENTS No Comments

SEO is Crap and you are being swindled

The worst thing I go through, is helping people out of the SEO scam contracts that they get themselves wrapped up in. It is frustrating and annoying and people are getting taken advantage of by "SEO Experts" who can get your website to the top of the googles and facebooks. They use meaningless jargon-hyped buzzwords that have nothing to do with any value. Most of the time, these companies are building their own networks of traffic directed to their websites. So, not only are they making money off of these people, they are building large amounts of traffic to ads on their own sites.

Content is the only thing that matters. And not just crap filler content, actual valuable content. Content that the user actually wants to read about.

Here is Google's own Amit Singhal talking about the matter at SXSW:

Kawasaki veered the next stage of the conversation onto the topic of SEO, and how companies can improve their search rankings.

“We at Google have time and time again said—and seen it happen—that if you build high-quality content that adds value, and your readers and your users seek you out, then you don’t need to worry about anything else,” Singhal said. “If people want that content, your site will automatically work… you could make a bunch of SEO mistakes and it wouldn’t hurt.”

“Is SEO bullshit?” Kawasaki asked.

“That would be like saying marketing is bullshit,” Singhal said, which drew a laugh from the audience—and maybe some gritted teeth.

source: slashdot

Instead of focusing so much on SEO and search result rankings, worry about putting out a quality product with quality content around it. Engage your customers in a way that makes them come back because they actually want to come back, not because you are leading them on.

SEO is crap.

11
Mar 2013
AUTHOR matt
CATEGORY

News, Web

COMMENTS No Comments
TAGS

Coffee Shop Background noise?

Ever just feel like you can't get any work done because you're not in a coffee shop and chained to your desk in your cubicle farm? Well, here is your answer: Coffitivity (http://coffitivity.com/).

From time to time, working in a coffee shop is nice. But not as nice as a good desk and space and peace and quiet and no hippies.

08
Mar 2013
AUTHOR matt
CATEGORY

General, Unrelated

COMMENTS No Comments

Incredible CSS3 Buttons

These squishy, rubber looking buttons are rendered in css. Astounding.

http://codepen.io/soulwire/pen/bKens

20
Feb 2013
AUTHOR matt
CATEGORY

CSS3, Design

COMMENTS No Comments

19 Degrees Of Separation

Here is an interesting article: http://blogs.smithsonianmag.com/science/2013/02/any-two-pages-on-the-web-are-connected-by-19-clicks-or-less/

Is this possible? Aren't there obscure websites out there that would take some digging to get to?

Does this help us in any way when we are doing research on a topic and trying to navigate around the internet?

It is a neat idea, anyway.

20
Feb 2013
AUTHOR matt
CATEGORY

General

COMMENTS No Comments

A Lorem Ipsum Alternative

How many times have you submitted a mock-up with filler text, only to be confronted by the statement: "This looks really good, but we're going to have to do something about this content, it doesn't make any sense." Did you answer all the time? Multiple times from the same person?

Here is a great solution: www.blokkfont.com. A simple block looking font that should curb even the most confused of clients. Who may then even be more confused as to why you chose to put black lines all over the page, but it's worth a shot.

06
Feb 2013
AUTHOR matt
CATEGORY

Design, General

COMMENTS No Comments

Learning Regex

Regular expressions are one of those things I've used, but, regrettably, know almost nothing about. Whenever I need to do some complicated regex, I always have to look it up.

This website looks to be a great way to test out and learn how to use regular expressions: www.regex101.com

 

Earlier in December, there was this great article about teaching kids about regular expressions. Along with some basic scripting, learning regular expressions could be a very valuable piece of knowledge to have.

 

 

 

02
Jan 2013
AUTHOR matt
CATEGORY

Development

COMMENTS No Comments
TAGS