Firequery, Firelogger, Firebug 1.7, Firefox 3.6 Portable

Just a note, when installing Firequery and Firelogger in Firefox 3.6 (portable version) I ran into the “requires additional items” error. It turns out that my Firebug was 1.7bx which is beyond the 1.7 requirement for these plugins which causes them to fail. To get them working (though I haven’t completed tested them yet of course) you just have to go to the install.rdf files for both and make a couple of tweaks. In Firefox 3 you can right click on the extension in the add-on window and go to the extension’s install directory. Open up the install.rdf in a text editor and change

        <em:maxVersion>1.7</em:maxVersion>

to

        <em:maxVersion>1.8</em:maxVersion>

and restart. Now to test…

Backbone.js

Backbone.js is catching on and for good reason. It’s not heavy weight like SproutCore or Cappucino, gets  you going quickly, and gets out of your way. Some folks complain that is’t not full-featured enough. But that’s because it’s designed to be light weight and über extensible. It doesn’t do what you want? Extend it! Using it’s own built in .extend or with the now 100% completely indispensible underscore.js, it’s only required dependecy.

Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

 

MAMP RewriteLogging and getting a site back up online

Short version:

Laptop logic board died.

Hard drive is fine.

Got a new laptop (not the way to upgrade!)

Client WordPress site runs fine from external hard drive and new install of MAMP. Databases copied over and such (after minor heart attack when not copying over the required INNODB files)

rsync over to local drive and it doesn’t work. “Pages” aren’t working. URLs like /?p=5 work fine. Rewriting is an issue.

Make a new host at old.clientsite.dev (with the very helpful and neat virtualhostx) and point it at the external drive. Still fine. but clientsite.dev still no go.

Tried to set up RewriteLogging but it doesn’t work. Thrash around for hours.

httpd.conf has the goods

RewriteLog “/Applications/MAMP/logs/rewrite.log”
RewriteLogLevel 3

but no go. Not sure why. Notice in /private/etc/apache2/extra/httpd-vhosts.conf that there is one difference. The old vhost has AllowOverride All whereas the new one does not. Added that, and all is good.

Back to work again.

RedBeanPHP

Just wanted to help get the word out about this ORM for PHP. It’s one of the smoothest I have used so far. Very straightforward.

RedBeanPHP.

Very brief Slideshare:

http://slidesha.re/gQwChj

Pros and cons of various vertical centering techniques

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?

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.

Django dev with one file and Flask which inspired it

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

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.

JSON and xpath-like filtering

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.

FlashBuilder 4 jump directly to API documentation tip

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

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.

Customizing ASDocs

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

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

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

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

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

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

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.

Scribefire on Safari

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…

Django OSX MySQL MAMP

For my overly customized MAMP install, it wasn’t pretty. I forget why it’s actually set up this way now but the different parts didn’t like each other and it took quite a while to get it working. Not fun. But fortunately there were those who had gone before me and it wasn’t hard in the end. It just took a long time.

http://birdhouse.org/blog/2009/02/21/python-mysql-connections-on-mac-os/

http://www.marteinn.se/blog/?p=467

Correction. It just took a really REALLY long time. The reason? You need to have libs and headers and such in places that all make sense for everything to compile. (This is the SHORT version.) So MacPorts to the rescue. Install py25-mysql, copy some files around, use a slightly different “HOST” setting for the database connection and you’re good to go. But installing py25-mysql installs ALL the dependencies needed in order to get that running. Which is good when that’s what you need. Which is what took a long time. But at least it was a one command thing and not hopping all over the ‘net to find and install things as I was very close to doing.

And that bit about the unique “HOST” setting for mine turns out to be

DATABASE_HOST = ‘/Applications/MAMP_1.7.2/tmp/mysql/mysql.sock’

Ruby, OS X, MAMP, MySQL, do_mysql and getting it installed

This took a lot of time. In hopes that this will help someone else, I add this link.

How to install the MySQL/Ruby gem on Mac OS X Leopard

Here’s the situation. I have MAMP. For legacy reasons my current MAMP 1.7.2 is in a custom directory. I use ruby. In particular I wanted to use DataMapper in a project with ruby. I wanted to use it with MySQL. That requires do_mysql. It just would not install with all kinds of errors. Well one in particular. It complained of possibly missing headers or libraries. After a long search the above link surfaced from the depths of Google. It almost worked for me. Everything but the last command actually. So for me, the command I ended up using is something like:

sudo env ARCHFLAGS=”-arch i386″ gem install mysql — –with-mysql-dir=/Applications/MAMP_1.7.2/Library –with-mysql-include=/Applications/MAMP_1.7.2/Library/include/mysql –with-mysql-config=/Applications/MAMP_1.7.2/Library/bin/mysql_config

This is OS X 10.5.8 Leopard

TyZ » Blog Archive » Cache and preload Gaia pages

I am looking at using Gaia for an upcoming project but not being able to use the cache might be a bit of an issue. I do wonder why it’s not caching at all if the browser is set to cache though. I’ll have to try it out and see what is being requested.

I use Gaia a lot. I think it’s a great and powerful framework to create page-based Flash sites. But there is a problem: Gaia creates a SWF for every page. And every time you visit a page, the SWF is loaded again. Even if you already visited that page. Also it is not possible to preload pages you are not visiting.To make page caching and page preloading possible, I have created the ‘CacheLoader‘ and ‘CacheURLLoader‘ classes.

TyZ » Blog Archive » Cache and preload Gaia pages

Hmm… gonna have to get used to Flock, too. Looks like I can’t add categories…! Must use tags.

Blogged with the Flock Browser

Flock test

Flock test

Blogged with the Flock Browser

What’s your ‘no framework’ PHP framework? – Stack Overflow

I recently did a project for a film company in New York. Neat group. I did the PSD2HTML/CSS, Flash, jQuery goodness, and other related functionality on the server side. Fun stuff. But it didn’t need a complex backend so it’s just simple PHP. That made me start to ask the same question asked here:

Even with a ton of PHP frameworks out there to choose from, I know many people prefer a minimal, personal set of libraries. What is your method when it comes to ‘rolling your own’ framework for PHP applications, and how does it vary depending on the type/scope of a project?

via What’s your ‘no framework’ PHP framework? – Stack Overflow.

There were a good number of recommendations. I actually really liked using CodeIgniter but at that time there was no user management. I believe it did cleaning of input for you when needed. Most CI solutions were older/not maintained, or had other issues that made it not something I wanted to do again. There was one library that I ended up using, and I’ll have to dig up the name of it. It was an early release at the time and I had to hack it to work with Flash. Hmm, I just saw this… I’ll have to take a look at that. Oh and there is also this… Hmm… going to have to peruse this list a bit more…

ANyway, so, a lightweight PHP framework/library that cleans up input (no XSS attacks, etc.) and has easy validation, user management… one user from  the original Stack Overflow question mentioned Flourish:

Flourish is a PHP unframework — a general-purpose, object-oriented library.

It has a modular architecture, meaning it isn’t strictly MVC. It focuses on being secure, well documented and easy to use, while solving problems intrinsic to web development.

Why Use Flourish?

You will find Flourish useful if you need to write code that is any of the following:

• Secure
• Consistent and easy to understand
• Needs to model simple or complex databases, especially existing schemas
• Works with international data
• Can perform accurate math calculations
• Easily manipulates images

• Able to run on different databases (MySQL, PostgreSQL, SQLite, MSSQL, Oracle)
• Can be used on closed-source projects
• Needs to run on PHP 5.1.6
• Needs an architecture other than MVC
• Plays nicely with other libraries and frameworks

via Flourish — PHP Unframework.

Javascript frameworks

Looking at client side MVC for Javascript. Some that have come up:

Trimpath:

The open source Junction framework is a conventions-over-configuration, synchronizing web MVC framework for JavaScript.

”’TrimPath Junction”’ is a clone or port of the terrific Ruby on Rails web MVC framework into JavaScript.

”’TrimPath Junction”’ is also sometimes referred to as TrimJunction, or as just Junction.

via TrimJunction – trimpath – Project Hosting on Google Code.

Claypool:

Claypool is a small, fast, railable Javascript Application Framework , built on jQuery that provides all the usual important patterns for large, long-lived client-side apps, server-side apps, or something strangely, beautifully in the middle.

via Claypool: A jQuery Web 1.6180339… Application Framework.

Jamal:

Jamal is a set of conventions and small javascript libraries to archieve a complete separation of html, css and javascript in your web application. Jamal is built on  jQuery and inspired by MVC frameworks like  Ruby on Rails,  CakePHP and its derivatives.

So Jamal tries not to stand in your way and helps you to organize your javascript code. Javascript code is likely held in functions and used to end up in spaghetti.

via Jamal.

JavaScriptMVC:

JavaScriptMVC is an open-source framework containing the best ideas in enterprise JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

via JavaScriptMVC.