Regular Expression for Finding Uses of CSS Classes

One thing that has always tripped me when editing CSS for a large site, especially one that I am unfamiliar with, is making sure the edits I’m making in CSS are not going to affect anything I don’t want them to affect. Sites with hundreds or thousands of pages can have all sorts of nooks and crannys of legacy code and if I edit the CSS for say .button, what else will be affected?

One way I’ve recent found to solve this problem is with a regular expression. Searching for:

class="button"

.. will not find every instance where the .button class is used. For instance it will NOT find:

class="button next large"

Also, how do you find either usage across multiple files in multiple sub-folders?

1. Find across subfolders

First, lets start with finding across files in multiple folders and subfolders. I have recently started using EasyFind, this handy tool can search the contents of files within all sub folders of any folder currently selected in the Finder. In the above example, I would search simply for “button”, which would give me a list of all the files with that text somewhere within their contents. This could be quite a long list of files if “button” is used widely through your site. So.. step 2:

2. Find uses of CSS class name using regular expressions

In EasyFind, select all the results for the above search and right click to open them in your favorite text editor. TextWrangler works well for this case. All the files will open at once. Go to Search > Multi-File Search. In the search field type the following regular expression:

class=".*?button.*?"

This will search for the string class=" and then it will search for 0 or more instances *? of any character . then the string button followed again by 0 or more instances *? of any character . and finally finishing off with the closing double quote ".

This will find all of the below uses of the button class:

<div class="monkey zebra btn">Monkey Button</div>
<div class="btn monkey zebra"> Button</div>
<div class="zebra btn">Monkey "Button"</div>
<div class="btn">Monkey Button</div>
<div class="monkey btn zebra">Monkey Button</div>

And now you can safely know what elements will be effected by a change to CSS for the .button class and sleep easier tonight. Yea!

Why your dynamic text ain’t showing up in flash.

I’ve run into this issue probably one billion times. You’ve got a dynamic text field either on the stage or created through actionscript and the text simply isn’t showing up no matter what you try. So I decided to make a simple list of each thing I try that ever fixes this issue. You probably try all these too, but I figured it’d be nice to have them all in one place. Probably would be better as a flow chart but hey bullet lists are easy.

  • Font name
    You are setting the font name of the TextFormat object in actionscript to something that doesn’t perfectly match the font name Flash is expecting
  • Bold, italic, etc
    You are setting the bold, italic, etc, properties of the TextFormat object to something that doesn’t perfectly match the what flash is expecting.
  • setTextFormat before setting text property
    You are assigning the TextFormat object via setTextFormat() after you’ve put your text in the TextField. It needs to be done before. (or you can use setNewTextFormat)
  • Font size too small
    You’ve screwed up the math somewhere when calculating font size and the text is there, but just very, very small. Try tracing out the font size.
  • Text field is working, but not visible
    The text field is there and working, but it’s either off the stage, invisible or underneath something else. Set border = true to find out if the text field is even showing up where it needs to be. If not check the alpha, x, y, and visible properties.
  • Fonts not embedded
    The fonts are not embedded either via actionscript or via the TextField’s properties panel.

Am I missing one? Let me know.

Flash Builder stops compiling

Somewhat at random today, Flash Builder stops building/compiling/exporting my project to SWF. Everything appears to be compiling but the date on the SWF file remains unchanged. I think this has happened to me before, and I re-remembered what the issue was. To solve the problem I had to:

  1. Right click the project folder, click Properties
  2. Under Actionscript Applications make sure there is a file listed with a green arrow and/or a blue dot. If not, click “Add..” and add your main class file to this list. It should be automatically set as default.

Everything should work swimmingly now. Not sure what causes this infuriating issue, but the fix is simple enough once you know it.

GitHub diff not working and line numbers messed up.

Not sure what caused this problem or if anyone else has had it, but I figured out a solution so I thought I’d share.

Problem

When making changes to files that are version controlled through git hub, the “diff” function behaves erratically, showing something like this (I’m using SourceTree here):

A few weird things going on here:

  • Line numbers are all screwed up and seem to only be single digits for both the right and left columns.
  • The first line is shown as deleted (in red), then the entire document contents are shown, followed by the new document contents with the first line shown as added (in green).
  • If you look close, you can see that the actual change was I deleted one of the blank lines after “public var height:Number;”
  • In the third column to the right of the line numbers, you can see the first character of each line (ie: the “p” from the “public class …” line). Very strange.

No idea how this happened. I am using FlashBuilder as an editor for these documents, and perhaps that caused some sort of weirdness. In any case, on to the (relatively) simple fix.

Solution

Simply select the entire contents of the document, Ctrl-X to cut, save the blank document, then paste the contents back in and save again. With a lot of files this is probably a pain in the ass, but at least it fixes the issue. Let me know if you have any better fixes or know what causes it. Here’s how the above should have looked:

Side note: It doesn’t seem to be a problem with the Git client (I’m using SourceTree) as I tested it the issue with GitHub for Mac and GitX clients and both displayed similar weirdness.

Flash Input text missing the letter “I”

The other day we found a bug on Canned Banners that the letter “I” would not show up in one of our input text fields. Very puzzling indeed because all Latin characters were embedded and we were using Arial. Looking into it further, it turned out to be an anti-aliasing issue. The text field we were using was 11pt Arial with no Ant-Aliasing. So the letter I was basically a 1 pixel line. For some reason, that made the character disappear with those specific settings. I suspect a lowercase l would also have had the same problem. Changing either the font size or the anti-aliasing or the font fixed the issue.

Trouble with image thumbnails when posting URLs on Facebook.

I recently made a single serving site for web designers that just had images of the finger cursor as a transparent PNG available to use in peoples Photoshop mockups. The only images on the site were two 20×20 pixel PNGs. When I posted the link to Facebook no images came up as thumbnails next to the link. I’m guess this was because they were too small (either in dimensions or file size, I’m not sure) to be grabbed by the Facebook image scraping script. I tried uploading a large image of a finger cursor instead, but still no good. After a little bit of googlin’ I discovered that Facebook only updates their images for a URL every 24 hours, but you can force an update by entering your URL here:

http://developers.facebook.com/tools/debug

It will also tell you what images it’s finding and give you other helpful information for any URL you are planning on posting to Facebook. Quite handy indeed.

You can also specify through code which image you want Facebook to use for a thumbnail by adding this to the head area of your html:

<meta property="og:image" content="whatever_image.png" />

roundProps error when using TweenMax

A few times in the past 3 months I’ve been getting this error when using TweenMax:

1061: Call to a possibly undefined method roundProps through a reference with static type Class.

It was perplexing the crap out of me, most recently when trying to use TweenMax in a project that previously was only using TweenNano. Turns out the solution is simple, I just downloaded the most recent version of TweenMax (duh), replaced all the files in the “com.greensock” folder and it was fixed. Just posting here in case I (or anyone else) encounter it again.

Embedding Fonts at Compile-Time in Pure AS3 Projects

Been stumbling on this issue for literally days. Will write more later on it, but see below for the blog post that ended up saving my sanity. Only one improvement would have been if the author had zipped up all the required files or provided all the code as one finished chunk so I could copy and paste it in one go, otherwise perfect. Very short simple and clear.

Tutorial (AS3): Using Fonts Embedded At Compile-Time

I finally understand Model View Controller (MVC)

Our site (CannedBanners.com) uses the MVC (Model View Controller) system. For the longest time, I had no idea what that actually meant. In fact, I’m not entirely sure I should call it a “system”, perhaps it’s an “architecture” or a “design pattern” or some other term that only adds to the confusion. I’m still not sure. But I think I finally understand what MVC is at least a little bit, thanks to this short an sweet post, Model View Controller Explained. I still have more reading to do, but here’s my explanation of that explanation:

In a web application:

  • The Model is the raw data.
  • The View is how you view the data (or interact with it).
  • The Controller is how the View connects to the Model.

So the View could be HTML/CSS code that presents the data to you on your computer screen. JavaScript and/or PHP (the Controller) might take your interactions with the View and send them to the Model (a database perhaps, like MySQL). Or put another way..

MVC is like Pizza Hut:

  • The Model is the pizza.
  • The Controller is the pizza hut employees.
  • The Views are the dining room, the take out area, the drive thru, and maybe the delivery guy.

People come for the pizza, that’s the real reason they are there (the Model). But that pizza can be delivered and ordered in a number of ways (the Views), it can be delivered to their door, picked up at the take out window, or ordered in the dining room. Working as a go between for the pizza and the ways you can order it, are the people taking your order, and cooking it up.

Simple right?

Certain fonts not showing up in Flash.

So this is silly, but it wasted about half an hour of my time trying to figure out what was going on. I imported a PSD into photoshop, but for some reason the fonts didn’t come thru properly. I tried to change it manually but the font was not available in the drop down menu. I checked Font Agent Pro (my font management software) as well as Font Book, both had the font and it was activated.

The answer? CS5 uses TLF text by default for all text fields instead of Classic Text. The problem is the font isn’t available in the drop down menu for TLF text fields only for Classic text fields. Why? I don’t know. But if you are experiencing this, change your text field to Classic instead of TLF and that might solve it.

Also, TLF text adds a lot to the file size of a SWF and does some other weird stuff too. Use with caution.

Good luck!

Different issue?
Looking for other reasons your text might not be appearing in flash? Check out my other post: Why your dynamic text ain’t showing up in flash.