Facebook button not showing up?

Sep 5, 2014

After updating Lista to the Facebook API Version 2.1 our Facebook Like Button and Box weren’t showing up. And this is one of those things that is so simple and basic that it SHOULD just work! As always a tiny piece of code will make you spend unnecessary time debugging something that again it SHOULD just work! (Did I say that enough?) Sorry, I get a little emotional about this. In any case here are some things that you should look at in case you are having issues with this.

On the Facebook Javascript SDK:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=437021096414101&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Make sure that you are not mistakenly pointing to “.com” vs “.net”… I know, this might sound too obvious but our subconscious can betray us when we least expect!

...
js.src = "//connect.facebook.net..."
...

Make sure that you update from all.js to sdk.js. This is one of the new changes on the SDK, but is easy to oversee when debugging.

...
js.src = //connect.facebook.net/en_US/sdk.js..."
...

On the same line at the very end:

...&version=v2.0";

Make sure this little string was added right after the app id. If you are inserting your app id dynamically, make sure to pass the parameter accordingly. Here’s an example:

...
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=" + fb_app_id + "&version=v2.0";
...

If you have any doubts on the output of this string, you can inspect your code and look at the top scripts that load on your page. Search for “id=”facebook-jssdk" and you will find the string right next to it on the "src" parameter. Then compare this string with the code Facebook generates when you create your button.

On the Markup:

Last but not least. If you only want to display the button (no faces, no text, no nothing!) it used to be necessary to set the “data-layout" to "button-count" and then set "data=send" to "false”. This is no longer necessary as you can now set “data-layout” to “button" and end of the story.

data-layout="button" 

Hope this makes your life easier and saves you some time debugging something that again, you SHOULD not have to do! ;)

Sequential grid tile animation using jQuery

Aug 7, 2014

Recently I’ve been working on some updates for my portfolio (gotta catchup with it at some point, right?) and as part of them I worked on animating the “tiles” that show up on the homepage grid as a teaser to each of the samples in my portfolio. You can se a live demo here.

Cracking the code

The story begins with a simple requirement: 

"Fade in each of the tiles as they load on the page".

So where each of the tiles have a class of .portfolio_item , the following jQuery snippet would do the job:

$(".portfolio_item").each(function(i){ 
//Loop on each "tile" starting with the "i" index
$(this).fadeIn();
// fade in the current tile
});

However when doing this all of the tiles seemed to fade in at once, and not one at a time as I wanted… why was that? The answer is simple, when the page loads the DOM is built very quickly that by the time the “fade in” effect kicks in, all of the divs already exist in the DOM.

I needed then to factor in some time for each tile to appear and then delay each of them so they would appear consecutively and not all at once. But before getting there, I also needed to make sure the divs where “hidden” as soon as the DOM was built so then I could fade them in one a time. This added a bit to the story:

"As soon as the page loads, hide the tiles.
Then fade in each tile at a time.

var allTiles = $(".portfolio_item"); // storing the tile on a variable to be reused multiple times

allTiles.hide();

$(allTiles).each(function(i){
$(this).fadeIn();
});

As you can imagine this didn’t change much the effect, but it gave me a blank canvas to work on. Now back to factoring the time. My first attempt to delay the fade in animation of the tiles was to use .delay(); however this didn’t do the trick as this method only applies to items in the queue, which I’m not using here. So the alternative was to use setTimeout which is a javascript native method. The tricky part is that setTimeout applies at a “window” level, and not at an “element” level, so it’s necessary to store the “current” tile ($(this)) into a variable before using this method:

allTiles.hide();

$(allTiles).each(function(i){
var currentTile = $(this);

setTimeout(function() {
currentTile.fadeIn();
}, 200 * i);
});

Note that because the tiles need to load sequentially, 200 is being multiplied by the current index which increases the amount of time each animation needs to be executed. So for index #0 the animation occurs immediately, for index #1, occurs on 200 milliseconds, for index #2 in 400 milliseconds and so forth.

Let’s update our story:

"As soon as the page loads, hide the tiles.
Then loop on each “tile” and fade them in after 200 milliseconds one at a time.”

Not bad right? This was for sure more complex that what I had expect, however I had the chance to get very good guidance from my geeky hubby, so the well deserved credit goes to him!

My biggest lesson from this implementation was to better understand the use of $(this) as a way to grab the current element, but also now that it can be stored in a variable if needed be.

Now adding this animation on the page is just the start! Consider as well showing elements below the grid, after the grid has loaded, or as I did, filtering the tiles using click events on the category buttons. So more about this soon!

Jan 7, 2012

This video illustrates the creation process of a Groceries Shopping List Icon Set I designed yesterday.

I got this idea from a Timed Lapsed Screen Shots video of the design of a homepage I saw recently and thought it was a pretty neat way of recording what goes into the design process. So I searched about it and found a post that gives directions in how to take the screen shots using terminal and put together this video using iMovie. 

Nice when wanting to look back at your work. :)

A media query to target ipad vertical layout

Dec 3, 2011

Trying to control a particular layout when orienting the iPad vertically was driving me insane… until I found this sweet query to tackle it:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
// Styles
// Styles End 
}

I had tried different cominations, but what really made it was the “orientation: portrait”. Same thing works for the landscape orientation. The only difference is that the “orientation” should be set to “landscape”.

While ideally the layout should just fall into to place without having to specify rules for one or another orientation, there are sometimes instances (particularly when dealing with multiple columns) that being able to target a specific orientation is crucial.

So always thing twice (I mean 3 times!!) any specific styles you want to place in this query. I can tell you that it will hit you back when making changes to the design. On the other hand if handled carefully you can get a lot from them.

The credit for this query and many more is to Stuff and Nonsense who posted them on the Hardboiled CSS3 Media Queries article.

Home Screen Icon for iphone & ipad

Sep 6, 2011

I found a sweet piece of code that enables you to create a an icon for your website that can be used when adding it to your home screen on the iPhone or iPad. 

<link href="path/to/your/icon.png" rel="apple-touch-icon" />

Without this piece of code the device will take a screen shot of your web page and create an icon of it. You can imagine how that looks on an icon.

To get nice and sharp icons, create them at 154x154 - 72dpi.

More about tips on web apps development for the iPhone here: 10 Tips for New iPhone Developers.

Using media queries and mobile device screen resize

Sep 6, 2011

I got stated optimizing for mobile devices a web app I’m working on using CSS3 Media Queries, and while I was able to change the layout, color and so forth, it was driving me crazy the fact that the devices where resizing the browser screen to the standard desktop size, making the layout seem tiny.

Then I found out the missing piece:

Mobile devices assume your website is optimized for desktop computer unless you tell them otherwise.

10 Tips for Designing Mobile Websites | By Keen Street

To avoid this is necessary to use a meta tag on the header section of the HTML page to set the with of your webpage to the with of the device display:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

More about this and nother “must-know” things when designing mobile devices here: 10 Tips for Designing Mobile Websites. Thanks Keen!

 

The forgotten a:visited property

Nov 1, 2010

At least forgotten by me, the a:visited property is a quick and neat way of making your designs more usable and to even “sensitive” to the touch. 

Heres’ an example:
Love

This is the sprite in use:

Sprite of Buttons

This is the code:

<style type="text/css">
<!--
span.love {
display: block;
text-indent: -9999px;
height: 35px;
width: 37px;
float: left;
background-image: url(heart.png);
background-repeat: no-repeat;
outline:none;
margin-left: 3px;
background-position: 0px 0px;
cursor: pointer;
}
/*OVER*/
span:hover.love {background-position: -37px 0px;}

/*DOWN*/
span:active.love {background-position: -74px 0px;}

-->
</style>
<a href="#"class="love">Love</a>

The trick is to define the hover state first. Literally the a:hover property needs to appear before the a:visited. Pretty neat, isn’t it?

Here’s some reference to look at CSS :active pseudo-class  

Home Inventory App

Nov 7, 2010

Looking for an easy to use app to do my home’s inventory I found one that seems to do the job pretty well. This app is What You Own Home Inventory 4.13 for Mac. Also available for the pc, this app offers a nice interface to quickly add items on your inventory, and attached to them detailed information (such as the purchase price, replacement cost, make, model, brand, etc.) but also images, and receipts and other docs. Pretty slick!

I’m really liking it. On one had is a great tool to keep track of the stuff you own. The fact that you can attach receipts and such is really handy. I usually keep receipts on file for 2 years, but after that I get rid of them. So this kind of solves having to keep up with those.

On the other hand it can help you establish how much you should pay in home/renters insurance. It can also be very handy if you would ever need to file for a claim in the event of losing any of your belongings.

Now I just want this to be integrated with my mint account, that would just make it even better!

Designing and coding emails can actually be a lot of fun… well, if you use Mailchimp!

May 2, 2010

Any web designer that has had to work on either the design and mostly the coding of an email knows the pain it can be. Not only because all of the limitations that email programs impose, and how tedious is the testing, but because you find yourself coding like is 1994. Thankfully there’s Mailchimp! I recently discovered it and can’t be more excited about it.

Read More

Designing a Theme for Weebly

Apr 7, 2010

I’ve been working on a design for the theme-contest that Weebly is running. I have to say that the idea of getting the big $10.000 dollar price is a huge motivation to participate, however I wanted to participate as an exercise of creating a website theme.

The most challenging part was to design with no client in mind. So my first question was, for who I’m I designing for? I think that what really makes a website to stand out, is when it truly communicates the brand of a client. So when there’s no client, how do you build a unique design?

image

I stated working with an unclear idea, which is never good. In my design process I usually start working on a color palette. So I did this time. The problem was that not having a clear intention to where I was going, my choices seem to be very random. The layout quickly became this abstract space with colors and shapes and no reason for them to be. My thought was to design a very neutral theme that anyone could customize with their own material. But saying “anyone” is saying to much. As you can imagine I failed miserably in the first two attempts.

Third try is a charm.

The deadline was approaching and I started getting anxious. Why was this getting so frustrating? Then I realize that designing something neutral that anybody could use, can easily become in a cookie-cutter template, and that’s were I was standing. I had to define a theme, a subject, that despite the

fact that it wouldn’t fit everyone, it would allow me to design with an intention and build character into it.

With a theme in mind the design happened

Photos are another great source of inspiration. Good ones enclose an idea behind them. So that’s were I started my third attempt. I selected a photograph that we took with my husband on a trip we did to San Juan de Puerto Rico. Then I went to adobe.kuler.com and uploaded it, to create from it a color palette than later I exported to photoshop.

With the image and colors I started creating some textures in my photoshop file (the Weebly contest required the design to be built in photoshop, other wise I would have used Fireworks.) The theme shaped it-self with a “traveling” motive.  From here the design process was very fluid. Before I would get taken away by the design elements I went a head and laid out the dummy content. Here I focused on the font type, size and colors. Then I went back to work on some graphic elements and textures to make stand different portions of the design.

It is really interesting once a design acquires its own character, because in a sort of way, it starts speaking to you, only it you listen. The tough part might be to reach that point, but like most everything, it starts with an defined idea.

Here’s the AD-Traveler Theme

My next project will be to design an email template for the MailChimp contest. I’been wanting to use MailChimp and this looks like the best excuse to do it. I’ll be posting about it pretty soon.