It’s been a busy year…

Posted on January 4, 2012 by sarah

Alfred James Forst, born September 7th

And unfortunately it’s been keeping me from being as active as I’ve hoped as far as blogging. I’ve never been the fastest or most prolific writer, far from it, writing for me has always been a drawn out process despite my having an English degree. However, this past year has brought a number of personal accomplishments that have kept me quite busy outside of work. My husband and I bought our first home (in the burbs, oh the horror) and then welcomed our first child, Alfred James Forst on September 7th. It’s amazing becoming a parent, and to be honest I had no idea what sleep deprivation really was before this. (Silly me, I thought staying up all night coding would prepare me for staying up all night with a kid).

Hopefully now that we’re getting a little more sleep, I’ll be able to be a bit more active with the blog posts again. I’ve also switched my focus in the past year from Flex development back to the HTML development I originally started my web dev career with, so expect to seem more posts along those lines.

Posted in Uncategorized | Leave a comment

Flex Charting vs. gRaphael

Posted on October 21, 2010 by sarah

I’ve recently been looking at some different options for charting, for those cases where you might not want to use a heavy flex application, and one of the first that came to mind was gRaphaël. It’s an impressive javascript charting library based on the Raphaël drawing API created by Dmitry Baranovskiy. I’m not really clear if Dmitry created it by himself or with a team, but if it’s all one persons work, I’m seriously impressed.

gRaphael isn’t as robust as Flex charting, but with some tweaking I think you can get it to suit your charting needs for a HTML based site.

I’ve started experimenting with the Pie control, basically recreating the demo from the gRaphaël website. It’s really easy to get set up, but from what I can tell, it lacks features like labels on the wedges themselves (similar to what we see in flex), and there seem to be some layout issues with positioning the pie relative to the legend.

There’s not a lot of documentation out there for Raphael, so maybe there are work-arounds for these issues, or maybe I’m just doing something wrong. I’ll need to dig through the Raphael code a bit more to figure it out.

My gRaphael Pie Chart Code

Posted in Uncategorized | Leave a comment

HTML5 is not CSS3 is not Javascript.

Posted on September 20, 2010 by sarah

There seems to be a lot of confusion out there about what HTML5 is. Your average web user seems to think that HTML5, by itself, creates all these fancy effects, similar to flash, and it’s just not true. Perhaps the most egregious example of which hailed the Google Doodle in which balls fly away from the user’s mouse as a great example of HTML5, but no, sorry, it’s not. They received so much criticism from the tech community that they changed their example to point to thewildernessdowntown.com, which while a much better example of the use of HTML5, still relies heavily on other technologies such as JavaScript. (They really should of pointed to Lost Worlds Fairs but that’s another story…)

For those of you not on the tech side of things, here’s a brief breakdown:

  • HTML5 – HTML is a markup language. It declares the structure of our content. HTML5 is a new version of HTML, adding new tags that allow us to define the parts of our HTML page. Much like a outline, the HTML defines the content of the page. HTML5 has added new tags such as video, header, and section, that better allow us to describe our HTML pages.
  • CSS3 – Just as HTML5 is the latest iteration of HTML, CSS3 is the latest iteration of CSS. CSS stands for “Cascaiding Style Sheets” and defines the style (a.k.a. the design of the page). An HTML page viewed without it’s CSS should theoretically still be perfectly legible and usable, just boring looking.
  • JavaScript – The magic behind the webpage. It’s what makes things move, defines complex svg shapes, creates motion, adds and removes parts of the page on demand, loads dynamic content, etc.

However, I understand why web users are confused. There’s not really a clear label for this type of development, at least not one that’s quick and easy to use. Sites use terms like “HTML5 and related technologies” (slate.com) or “HTML5 and web standards” (apple.com) which easily becomes abbreviated to HTML5, confusing less technical web users. I think we need a clear term to describe this new type of web development, one that doesn’t lump JavaScript in with CSS3 and HTML5.

I’m not sure what this new term should be. I’ve seen some suggestions, some calling it Web 3.0 (confusing, as Web 2.0 is more of a reference to a visual style than a programming style), but most are some variant of HTML5… and some other stuff. We need a nice simple term like DHTML (that’s Dynamic HTML for you young’ns), so here are some suggestions: iHTML (inspired by Apple, who are really pushing for a richer HTML experience), fHTML (after all, it’s the “future of web development” – also what one may be saying when trying to convince IE7 to degrade gracefully), but these names still put the focus on the HTML component of this type of development. Maybe we should just call it “super awesome new internet stuff” (SAWIS for short)? What are your suggestions?

//Update: After a brief, unscientific survey of twitter, it seems we should just use DHTML. I think it works!

Posted in Uncategorized | Tagged , , , | 6 Comments

Fonts and the Web: TypeKit

Posted on September 17, 2010 by sarah

To follow up my post from earlier this week, I’ve started implementing type kit fonts on this site, and I’m really pleased with how simple it is to set up. (So simple, I think, even my mom could set this up on her website). All you have to do is sign up, drop two lines of javascript into your site’s <head> tag, select a font in your TypeKit control panel, add a few css selectors (in the control panel – you don’t even have to write code!).

If you do want to write your own css however, you can – and I ended up going this route when I was having trouble adding id’s in the TypeKit control panel. I’m not sure if this is a TypeKit issue, or me just doing something wrong, but in the end, I’m usually happier when I’m managing my own code, so it’s great that typekit also has this option (it would be rather strange if it didn’t).

The other great thing about TypeKit is that they offer a trial membership level – I think 1 website, restricted to two fonts, but it’s great for trying it out.

My only problem is the font selection. I love small caps and there just aren’t enough serif small caps options. So off to try the next site…

Posted in Uncategorized | Leave a comment

Fonts and the Web

Posted on September 15, 2010 by sarah

So one of the things I like about Flex / Flash development is the fact that you can use pretty much any font you like, and it displays, fairly well across all browsers and operating systems. But even those of us who make plain ol’ HTML sites are becoming more appreciative value of good typography on the web, and we’re gaining awesome new tools to implement this good typography.

Now if I’m not a big slacker (it happens sometimes) hopefully in the next few weeks I’ll update this blog with a new design, and nice typography, instead of this boring old default wordpress theme. I’m hoping to use a few of these new tools to make my site super awesome looking:

For webfonts:

For layout:

And since webfonts aren’t perfect, help for choosing more unique backup (for those browsers that don’t support webfonts), and body fonts:

Hopefully you’ll find some of these links as useful and inspiring as I have.

Posted in Uncategorized | 1 Comment

Stupid Hackers

Posted on July 7, 2010 by sarah

Hackers got at the site, not sure if it’s from a media temple vulnerability (they’re claiming it’s not off course) or a wordpress vulnerability or the combination of the two, but it’s annoying to have to re do your blog while on vacation! The site is mostly back up but I still need to set up a bunch of plugins / retrieve my file backups from home so it’ll be a few days before everything is fully back up and running.

Posted in Uncategorized | Leave a comment

FXG vs MXML Graphics Benchmarking

Posted on June 16, 2010 by sarah

As a follow up to Elad Elrom’s post on FXG increasing swf file size and taxing the CPU I thought I’d benchmark FXG (compiled graphics files) vs runtime MXML graphics.

There seems to be some confusion in the community as to the difference between FXG graphics and MXMLG (MXML Graphics). FXG is used to create static vector files, and are frequently produced using Catalyst or other Adobe software, although they can be written by hand.

MXMLG’s format is very similar to that of FXG – they use a number of the same tags. Adobe’s even published a helpful guide on converting FXG to MXMLG. However, MXMLG is much more powerful as it’s rendered at runtime, and as such, you can customize it on the fly, even adding styling hooks to change properties via CSS.

The results from my benchmarking were somewhat surprising – I had assumed that FXG would use less memory, but it actually uses the tiniest bit more.

In both tests, I created 100 buttons and applied a skin to each of these buttons via the ‘Button’ css selector. The skins where identical, except in one I used a FXG component, and in the other I used MXMLG.

The Results

The swf’s themselves were fairly similar in size 41,020 bytes for the MXMLG version, FXG at a slightly lower weight at 40,900 bytes.

So the two demos used almost exactly the same amount of memory, the FXG version using 3K more at max memory – see for yourself:

Continue reading →

Posted in Misc. | Tagged , , , , , | 1 Comment

Download the Slides / Examples from Flash Coders NY Talk

Posted on June 14, 2010 by sarah

Thanks everyone who attended my Flex 4 Skinning and Styling talk last night at Flash Coders New York! For those of you who weren’t there, we covered the basics of creating programmatic skins in Flex 4 (and why you would choose to use programmatic skins over skins created in catalyst or png skins.

These demos are similar to some of the demos I’ve posted previously, and all build upon the same base of code:
Continue reading →

Posted in Misc. | Tagged , , | 2 Comments

Skinny DataGrid / List Scrollbars

Posted on May 26, 2010 by sarah

I’ve always felt that the default (flex 3) scrollbars are sorta chunky, like they might need to go on a diet. Apparently the designers I work with feel the same way, as they’re always making them skinnier than the default 16 pixel width.

However, when I go to implement the scrollbars in DataGrids, I run into a problem where there’s a slight gutter between the row backgrounds and the scrollbar, where the data grid background colour shows through.

There’s a simple (although I feel slightly hacky) solution to this fix. In any of your data grids that are using thinner scrollbars, on creationComplete call myDataGrid.invalidateList().

I should note, I’m not sure if this is an issue with programmatic skins, for scrollbar graphics at least, I tend to always use pngs.

Posted in Misc. | Tagged | Leave a comment

Stylable Spark Button Skins

Posted on May 25, 2010 by sarah

Creating stylable button skins for Flex 4′s new Spark Components isn’t that different from creating stylable skins in Flex 3. Sure you have your skin parts and the whole new way of writing skins, but the basic functionality for handling detecting style changes remains the same. In this demo, I’ve created a Spark Button that has a custom skin applied. The custom’s skin’s properties are set via CSS (making it stylable), and therefore making it possible to use the same button skin in multiple ways, say for a button with a larger font size and a smaller font size, or a purple button and a green button.

I should note that most the styles I defined for this button are ones we’re used to seeing from Flex 3 ‘fillColors’ and ‘cornerRadius’ but really we can define any sort of style property we’d like, for example, I defined a labelStyleName style since I like to define my text styles separately.

Get Adobe Flash player

(as usual, right click to view source)

Posted in Misc. | Tagged , , , | 3 Comments