Ramblings

August 28, 2010

Pros and cons of various vertical centering techniques

Filed under: Uncategorized — Tags: , — michaelangela @ 6:48 am

Just want to keep this for reference. 

In the Woods – Vertical Centering With CSS

There are a few different ways to vertically centre objects with CSS, but it can be difficult to choose the right one. I’ll show you all the best ways I’ve seen and also how to create a nice little centered website.

IE7 overflow:auto not working right?

Filed under: Uncategorized — Tags: , , — michaelangela @ 5:27 am

Briefly, the content was in the div that had the overflow: auto and the content was just going E-VE-RY-WHERE. Solution? See below. Yep it worked. Doing some work for a client that needs the legendary IE7- (IE6) support. Doing CSS fixes without hacks until HTML structure has to change. Hopefully not! But this little bit helped. 

Overflow Auto and Position Relative

The simplest fix is to apply position: relative to the containing block; the one with overflow: auto.

August 16, 2010

Django dev with one file and Flask which inspired it

Filed under: Uncategorized — Tags: , , , , — michaelangela @ 8:38 pm

I dig Django. I’ve even been using Hyde to develop static sites especially when working on PSD > XHTML conversions. It lets me keep things DRY. You want that same block on 20 pages? Cool, no prob. Oh now you want to change it on those 20 pages with a little tweak to each? OK still cool, no prob. Anyway, I’ve seen some nice bits of code to get a dev environment up and running quickly and this post on minimal Django is cool. But I also really like what I see in Flask which inspired the search.

Minimal Django – Olifante’s Lair

Flask is a new microframework for web development. Created by Armin Ronacher, it grew from an April Fools’ prank into an elegant, usable tool in a very short time, mostly thanks to its clever leveraging of Armin’s two other babies, the Werkzeug webserver and the Jinja2 templating language.

I work daily with Django and love it, but after reading about Flask I got a small case of microframework envy. Why can’t Django development scale down as well as it scales up, and let a beginner have fun with single-file web development without becoming swamped in the full complexity of modern web development? It turns out Django can easily scale down.

Will have to elaborate in a bit… 🙂

Great short list of Safari extensions

Filed under: Uncategorized — Tags: , — michaelangela @ 4:12 pm

15 Awesome and Useful Safari Extensions

As die-hard extension addicts since the first Safari 5 release, we’ve scoured the web to find 15 of our favorites. Click through the gallery for our picks.

August 15, 2010

JSON and xpath-like filtering

Filed under: Uncategorized — Tags: , , , — michaelangela @ 6:32 pm

I have been doing some recent work for a client with a large amount of JSON and webservices. Of course CharlesProxy is always helpful for this. I use it to be able analyze data flows, etc. In this case I wanted to be able to filter through the JSON to get at specific elements. Doing this for a while I thought it’d be neat to filter it the way we use XPath with XML. JSON Editor is a cool AIR app which allows you to view JSON and XML but also translate from one to the other. So I thought I’d just use that to convert the JSON to XML and then use XPath on it. Then I thought… “has anyone done anything like xpath for json?” Turns out they have.

jsonpath – Project Hosting on Google Code

JSONPath is a lightweight component that allows to find and extract relevant portions out of JSON structures on the client as well as on the server.

You can read more about it.

There are Wiki pages about usage and examples in Javascript and PHP.

Extensive test examples are available for JSONPath.

A PHP helper class JsonStore allows read, write and delete operations on JSON structures.

This isn’t the only json-xpath implementation of course. This also looks promising.

JPath – bluelinecity.com

JPath is a simple lightweight Javascript Class which provides an XPath-like querying ability to JSON objects.

Very cool.

August 13, 2010

FlashBuilder 4 jump directly to API documentation tip

Filed under: Uncategorized — Tags: , , , — michaelangela @ 4:30 am

I was wondering if it is possible to jump directly to the ASDoc of a Flash/Flex component. Seems it is possible.

Oh my. Very nice. Place your cursor in the code of interest and press Shift + F2. And there you go. Previously I used FluidApp to wrap the AS3 reference documentation locally as noted below. But now this is not needed. On my box FluidApp’s search is faster sometimes than the Adobe Help depending on what’s running, but jumping right to the docs in question is very helpful.

Big Spaceship | Labs Blog – AIR App: AS3 Language Reference

I found the scrollbars in the air app to be shoddy, so I downloaded the offline version of the AS3 docs:

http://help.adobe.com/support/documentation/en/flash/10/ActionScript3LangRef.zip

and then created a fluid app from my local version.

http://fluidapp.com/

now runs perfect offline and even has a search.

Simplest, cleanest singleton

Filed under: Uncategorized — Tags: , , — michaelangela @ 12:31 am

This is the simplest and cleanest singleton patter I have seen to date for AS3. Let’s you set it up and get right to coding. The author does make a request for a singleton metadata tag to automatically make classes into singletons. Well we sort of have that with RobotLegs. With the injection rules you can just tell RobotLegs that any time you inject an instance of a particular class just to make it a singleton and it’ll do that in the background for you. Sweet and simple. But this code linked below is the closest non-framework solution I have seen that gets close to that in its simplicity.

ActionScript 3 Singleton Redux – darron schall

It was actually a combination of other factors (and personal preference) that made me revisit the singleton pattern. The singleton technique that I prefer was developed to address the other issues I was running into and to reflect my personal coding style. While I was at it, I figured I might as well address the private constructor issue too. After all, we all love being smacked around by the compiler sometimes.

The technique I prefer has the following highlights:

  • Usage of static instance read-only property instead of a static getInstance() function. This is somewhat a matter of style and personal preference, but I prefer the succinctness of the read-only property. This is especially obvious when the singleton is used in binding expressions. Plus, getInstance() is so 1990s Java which ActionScript is most definitely not. I kid, I kid. But seriously, “.instance” is cooler.
  • Usage of a private lock class to prevent outside construction. While this is a common theme in the above links, my approach is slightly different. Instead of passing an instance of the private locking class to the constructor, I just pass the Class reference itself. This does two things. First, it clarifies the conditional check in the constructor. The test for the proper locking Class reference communicates the code’s intent better than the traditional check for not null. Second, it encapsulates the private locking class itself. The constructor’s argument is simply lock:Class which doesn’t expose the name of the private locking class to the outside world, but still communicates that the constructor is locked.
  • Removal of ‘Unable to bind’ warnings in Flex 2. When you use a singleton in a binding expression, it’s typical to have the Console log flooded with warning messages indicating that binding to the instance property will not be able to detect updates. My singleton version fixes these warnings.
  • Use of const instead of var for the instance storage. This one is pretty obvious, but using const here communicates intent better. The variable storing the singleton instance is not allowed to change so const is the better choice.

August 12, 2010

Customizing ASDocs

Filed under: Uncategorized — Tags: , , — michaelangela @ 10:19 pm

Documentation is great. Writing it is not. Writing notes in code then pulling that into some sort of printed reference is even worse. But there are solutions. For Flash/Flex devs there are ASDoc comments. Now if you want to add your own little tweaks to it, it seems, at least in the past, this was possible.

ASDoc Enhancements | www.boristhebrave.com

I’ve put in a few customizations to the standard ASDoc template, that I’m going to share here, as they are generally useful. You will need to customize the files a bit for your own project, though.

Making a clean float clear

Filed under: Uncategorized — Tags: , — michaelangela @ 4:33 pm

This is a note for reference in case I run into some funkiness that looks like this might address. Very nice and concise.

Breaking Floats Without Hacks

When you want to clear all floats across the entire width of the page or a div, this single line of CSS code just won’t cut it when using: <div class=”clear”></div>.

  1. clear: both;

Instead, we’re going to use four lines.

  1. width: 100%;
  2. height: 1px;
  3. margin: 0 0 -1px;
  4. clear: both;

Alright, let’s break this down. First of all, the major problem with clearing correctly in all browsers lies mainly in a few of Internet Explorer’s quirks. Both width: 100%; and height: 1px; force the browser into accepting that there is a div there. The margin: 0 0 -1px; negates the 1 pixel space that height introduced; this is the only property that is not required. Natually, clear: both; is the special ingredient to make all of this work.

 

IE6 Fixed Positioning

Filed under: Uncategorized — Tags: , , — michaelangela @ 4:30 pm

When you need it you need it. I just wanted to keep a link to this.

Fixed Positioning in Internet Explorer 6

Fixed positioning has always been a nuisance for web designers because of the lack of support for it in Internet Explorer 6, but I’ve come up with a solution that allows for cross-browser fixed positioning that doesn’t come at the large costs that other techniques result in. If you’ve been on the hunt for a way to get elements with position: fixed; to work properly in Internet Explorer 6, undoubtedly you’ve noticed that most methods come at the expense of absolute positioning or resorting to scripting. Mine does not.

Faster Captivate development with a solo review

Filed under: Uncategorized — Tags: , , — michaelangela @ 4:28 pm

I’ve been working with Captivate 5 and it’s pretty nice. Coming from a Flash/Flex background I am used to the edit, build, and review workflow. Make changes, compile it (oh so much nicer in FB4+Flash CS5), and then view the changes. So I do that in Captivate, too. But I don’t have too… 

Adobe in Technical Communication and eLearning » Using a Solo Review to Edit Adobe Captivate Projects Faster [VIDEO]

In this video I go over a process that works for me, namely conducting a local, solo Review, where I can insert comments on-the-fly as I’m previewing my project. These notes are then imported back into my project exactly where I inserted them.

F*CSS is more than just CSS for Flash

Filed under: Uncategorized — Tags: , , , , — michaelangela @ 4:25 pm

I had seen the author’s original writeup on Camouflage and that was already very cool. This goes beyond that and again just beyond CSS properties. The idea that any public property can be set via an external file and it’s not XML, that’s much cleaner. But even the idea of just changing positions, sizes, etc., in such a clean and fast way and with inheritance as well? Merging?! Very nice.

F*CSS |  About

F*CSS is a custom CSS parser for Flash based on the PropteryManagement System in Flash Camouflage. The main class called StyleSheet (found inside of the com.flashartofwar.fcss.stylesheets package), goes well beyond the native StyleSheet class by supporting style inheritance, pseudo selectors, and merging styles on the fly. The goal of the StyleSheet is to make styles something you can apply to any of your classes instead of just TextFields. CSS is a great way to define your class’s properties in an external file and F*CSS helps convert these css styles into property/value pairs you can apply to any Object.

Scribefire on Sarafi with tags not bad

Filed under: Uncategorized — michaelangela @ 3:20 am

It has autocomplete for tags so I’ll be switching over to tags. I know there is a way to convert categories to tags but I’ll have to save that for another day.

Scribefire on Safari « Ramblings

Might have to switch to using tags…

Simplest css based sticky footer I have seen

Filed under: Uncategorized — Tags: , , — michaelangela @ 1:48 am

And apparently all the code is semantic as well. It’s clean and light on hacks which is always good.

New CSS Sticky Footer – 2010 – HTML for Bottom of Page Footer

This sticky footer solution is working in all major browsers, including Google Chrome and IE 8! It works with
floated 2-column layouts and we don’t get overlap in resized browser windows unlike older solutions
you find when you Google sticky footer. You don’t need an empty push div or cleafix hack. Here is how to use this sticky footer code.

August 2, 2010

Scribefire on Safari

Filed under: Uncategorized — michaelangela @ 7:20 pm

Just installed Safari 5.0.1 with the new Extension feature. Scribefire is now available on Safari which is cool. But you can’t add categories the way you do in the Firefox version. Might have to switch to using tags… either that or use Safari’s Open Page With Firefox for blogging…

Create a free website or blog at WordPress.com.