List All Fonts by Layer in a PSD (Photoshop File)

layers

When converting a PSD to HTML/CSS, it’s necessary to get a list of all of the fonts used. There are many tools that help in analyzing the layers of a PSD and Creative Suite has great tools for exporting the information for each of the layers.

However, one problem I’ve run into is finding a list of all of the fonts used in a PSD. Sometimes, I’ll open up a PSD and find that my system doesn’t have a particular font that’s used in the PSD. I then have to go through each layer individually to find the particular text layer with that font.

Another problem I’ve run into is the when preparing a photoshop file for coders to code out, I want to make sure we have the licenses for each of the fonts we’re going to embed. Again, we either have to open up each text layer to inspect the fonts or hope for the best. (A solution to this is to use Character & Paragraph Styles – this helps standardize the look of all of the text in the PSD and I highly recommend it. )

Anyway, I’ve finally found a great Photoshop Script that will loop through each text layer and export the name, content, font name, etc, into a text file. Hooray!

Here’s the direct link to GitHub. I’ve also modified the script slightly to include the name of each layer and PX instead of REM.

https://github.com/keyboardface/photoshop-scripts

Mobile Responsive Design: Only Downloading Mobile Images

loading

Mobile responsive design web design is the new standard. Even Google has announced that they prefer responsive design and weight it as a ranking factor. Sites created with responsive design tend to load slower on mobile devices, however, as they often download both desktop and mobile resources, even though only mobile resources are shown.

Recently read a few excellent articles that discussed this problem. One pointed to a few great methods to selective download content for mobile devices using CSS and media queries.

Here they are:

http://cloudfour.com/examples/mediaqueries/image-test/#t3

http://cloudfour.com/examples/mediaqueries/image-test/#t5

Here’s the original article that referenced these.

http://www.bypeople.com/responsive-design-problems/

Another article mentioned using JavaScript “Window MatchMedia” to conditionally load content. I thought this could be great, especially because it doesn’t rely on JQuery, however, doing actual testing proved that it actually ran much slower. 

http://jsperf.com/matchmedia-vs-jquery-width

I’d be very curious to hear what others have experienced on this. Respond in the comments below. 

 

JQueryUI Buttonset not always working when clicked

I ran into a interesting problem tonight.

I was using the jqueryui buttonset on some forms because I love the way it looks:
http://jqueryui.com/button/#radio

But the problem was that when clicking a large number of radios in a row, sometimes the click didn’t seem to take. Further investigating appeared to show that when the mouse was moving – even slightly, it didn’t fire the click event. Apparently, this is a known bug and it is being worked on. In the meantime, however, I needed a fix.

Here’s what I came up with, and it looks like it works 100%!

I just bound the “mousedown” event to the label and fired the click event. Mousedown captures the click even if it’s moving and I bound it to the label because the input radio is actually hidden so it doesn’t receive any events.

Here’s the code:

http://jsfiddle.net/8uM5u/

$(document).ready(function() {
$('.buttons').buttonset();
$('.buttons label').bind('mousedown',function() {
$(this).trigger('click');
});
});