7 ways to tell your css has gone mental

I work on big sites almost exclusively so my techniques are all about wrangling tens of thousands of lines of code into a few thousand. When deadlines loom or you work with a staff of various skill levels css begins to loose its organization.

So here are a few things to look for to know its time to reorganize your code.

When !important becomes a way of life. When the only way to get a piece of code to to work is to wrap !important to the end of every line, your css has gone mental.
When you scroll through the style definitions and see !important sprinkled liberally throughout the styles. Your code has definitely gone mental. Seriously if there are so many clashing definitions that only an !important can solve it you need to look into taking a BEM and SMACSS approach and flatten your definitions.
If you need to change a color and have to do a find and replace to get to them all your code has gone mental. It is time to preprocess your css. I prefer Sass just because it has super powers, but Less is almost as good. Preprocessors allow you to use variables so you can keep all your definitions in one place and reference it everywhere.
If additions to classes end up in a jumble at the end of a file it has gone mental. Choose a technique that makes it easy to find the classes that you need to change. Preprocessors allow you to break your styles into as many files you need to keep your css organized. Sass to the rescue again.
When style definitions are nested five levels deep you know your code has gone mental. Use BEM naming conventions and ideas to […]

Create a facebook feed for your website

In order to get your facebook feed follow these steps.

first go to:

https://developers.facebook.com/apps

Click +Create New App
fill in an app name. ignore the rest. Click Continue.

fill in the security word to get to the next screen.

On this screen you will see a form for creating your app.

fill in App Domains with the URl of the site that will show the feed.
Click the Website with Facebook Login.
fill in the url including the http:// before the site.

Click Save Changes

Once this is done you will need to copy your APP_ID and APP_SECRET codes

Go to this link replacing APP_ID and APP_SECRET with the actual codes.

https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET

when you go there you will get a page looking like this:
access_token=46362638219919|Xmd7dfdfd8003kmsdksaoWWff0MX

your access code is everything after the equal sign. save this code.

next you will need the page name.

go to facebook and go to the page you want the feed for.

for instance to use the feed from this page:

www.facebook.com/jasonmcalpin

you will use the page name: jasonmcalpin

go to the following URL replacing PAGE_NAME with the actual page name. Add the access_token to the end after the equal sign.

https://graph.facebook.com/PAGE_NAME/feed?access_token=ACCESS_TOKEN

congratulations you now have the JSON feed for your page.

In the next post I will take you through styling it.

By |September 6th, 2012|Tutorials|0 Comments

Internet Explorer 7 Compatibility Mode

Well Internet Explorer 9 is finally here and we will now have to code for it. If you’re like me working in a production environment then most likely it is more of a hassle than a blessing since IE 6 through 9 are still out there.

The best practice is to code for the widest compatibility which, for internet explorer, is IE 7. I left out IE 6 since even Microsoft is trying to get rid of that albatross.

There is a piece of code you can add to your website to force later versions of Internet Explorer to only view the webpage as IE 7. It uses something called compatibility mode.

Internet Explorer 7 Compatibility Mode.

this is the code:
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >
place this with the other meta tags in the HEAD of the web page.
If you want to test if the page is actually using the correct view mode type the following code into the address bar. (if you paste it some of the commands will disappear so watch for that.)
javascript:alert(document.documentMode);

By |March 29th, 2011|Blog, CSS|0 Comments

ActionScript Functions

Here are a few tips when using functions in Flash.
function callMe(){}

object.variable1 = callMe();
object.variable2 = callMe;
There is a big difference in how a function works depending on if () are used.
When you use () with a function you are calling it, at which point it runs its code and returns any values. When you do not use () it assigns the function to the variable name. The variable name will then be able to be used to call the function.

By |November 18th, 2009|Flash|0 Comments

imbed your flash fonts

Flash allows you to imbed the fonts along with the rest of your media. This makes sure everyone working on the file has the same font. It allows Windows and Macs the same access to the flash file. Even more importantly it allows you to name the font so that you know its usage. Even more importantly than that is if you need to revisit the file months or years later you can be confident that all the pieces you need to work from that file are included.

To add a font in Flash do the following steps.

Open your Library.
Click the drop down in the upper right of the palette.
Click New Font…
A window will pop up where you can name your font. Personally I name them by their usage, such as page_header_arial_bold or drop_down_menu_eurostyle_ext. It’s always a good idea to use descriptive names in case you need to come back into the file months later.

Thats all there is to it. Now go forth and build brand new flash files confident that you will never loose the font

By |August 18th, 2009|Flash|0 Comments