Tag: Adobe

Categories
Web Technology

Brand New Adobe

Adobe is changing. The once-great giant of web and web tools has fallen, and is poised to rise again — albeit in a much different form. What does this mean for us web developers?

For starters, let’s go over some recent news. Adobe made three major announcements in the past six weeks that will have sweeping implications on their image. See if you can spot a trend in these headlines:

What do these press releases have in common? If you caught that all three are about open technology, give yourself a pat on the back. Let’s dig into the facts before discussing the ramifications.

Adobe has seen the light, and open source is sparkling.

Closed formats are dying across the web. The days are numbered for plugins like Silverlight and Flash; they’re simply not necessary anymore for the vast majority of sites and applications. HTML5, on the other hand, is thriving. We’re starting to see open fonts pick up, and even longtime-stalwarts MP3 and MPEG-4 are starting to lose their grasp of the online audio/video markets.

Adobe isn’t blind. They know they need to transition away from closed platforms. Picking up PhoneGap shows their commitment to this cause.

Re-aligning their mobile efforts towards HTML5 is another positive step towards open technology. Adobe still makes some of the web’s best tools, and Javascript development could seriously use an outstanding IDE. This seems like a great match-up.

Finally, releasing Flex to the community is a smart move. There is a very vibrant community around Flex, and there are still niches where RIA will matter for a little while longer. If Adobe can’t support Flex on its own, enabling the community to take control of it’s own future simply makes sense.

Adobe’s intentions are clear. Proprietary formats are out, the open web is in.

What does this mean for web developers?

Three things:

First and foremost: Learn your shit. If you’re a web developer, learn everything you can about Javascript, HTML5, CSS3, and the myriad of related frameworks. These will only become more important following the fall of Flash.

Second: If you’re a Flash/Flex dev, start looking at Sencha. At SenchaCon last month, the number-one answer I got back when I asked people what they worked in before switching to Sencha was Adobe Flex. And I believe it. I’m a Flex guy too, but that market’s shrinking quickly. Sencha is going to be a major player on the web for a while to come, and it’s a relatively smooth transition.

Third: Get into mobile. Adobe didn’t pick up PhoneGap just to gain FOSS-cred. Mobile is huge. Huge! This is where you want to be right now, and you can join in using Javascript and Sencha and many other web technologies.

This is an exciting time to be in web development. Let’s keep on top of the constantly-changing platforms and tools. Let’s keep building wonderful things. Let’s make this an age to be proud of when they talk about the day Adobe changed their ways.

Who’s with me?

Categories
Typography

How to Make Use of Open Type Fonts (Windows)

For our upcoming wedding, my fiancée and I thought it might be neat to license a really awesome font and use it throughout the various texts inherent in this sort of event (invitations, place cards, thank you cards, etc). Using a designer font turned out to be a little more interesting than I expected, and I found help online to be spotty at best, so here’s a listing of facts I figured out while getting a beautiful open type font to render and print correctly in Windows (I tested XP and Win7).

Step 1: Finding a great font.

We looked around for a bit and eventually took a liking to Biographer, a font profiled on I love Typography as one of the better fonts created this past year. This isn’t a free font, but it’s gorgeous… and after looking at the current landscape of free script fonts, we decided that having a totally unique font across all the type in our wedding was worth $85.

Tip #1: A great way to find interesting fonts is by checking out a few typography blogs. There are tons out there, and they can really help make the sea of available typefaces a lot easier to navigate.

Tip #2: It’s ok to pay for a font. Typography, like any form of design, is an area where you often get what you pay for.

Step 2: Downloading and installing a font.

I bought our font license through a website called Veer. They’re a pretty popular reseller, and it was easy and straightforward to purchase and download the font files. I’m not sure if all font-selling websites are like this, but I can certainly recommend this one.

Installing the font was a breeze. If you’re not sure how to install a font on your system, a quick query on Google will sort that out for you in no time. Here’s the page I used: Installing Fonts in Windows.

Tip #3: Do your research, and only buy fonts from reputable websites. This goes without saying, but the internet can be a scary place to enter your credit card number. Bonus points if the site uses a purchasing framework such as PayPal.

Step 3: Using an open-type font’s special characters.

This is a huge hassle. Biographer has a lot of alternates for its characters; there are multiple versions of letters with elegant, swooping tails like ‘h’, ‘p’ and ‘k’. Regular word processors aren’t able to access these. The most common-place application I heard of that could was Office 2010, but I didn’t have that so I had to get creative.

The first thing I tried was the Windows character map. This shows all unicode characters, so surely my alternates would be there and it would be easy to insert them into something basic like Wordpad. Yeah, not so much — they simply aren’t there. If anyone can explain why, I’d love to know; this really surprised me. After giving up on getting any help from the OS, I decided I’d need a serious word processor to tackle this one.

The next things I tried were Office 2007 (where I managed to eek out a few ligatures, but still no alternates) and Open Office. To be fair, I didn’t actually download and install Open Office, but their own FAQ was kind enough to inform me that my efforts would have been in vain. This was getting frustrating. It’s 2010, people! How hard is it to support a few extra fancy characters?

Getting desperate, I tried to install LaTeX — I think. Maybe I was just installing some prerequisite libraries or some sort of command-line utility, I’m still not sure. This was the most confusing software setup I’ve ever experienced, and I bet I could write an entire post called Things that Suck about Installing LaTeX if not for the fact that I’m in no mood to put up with that much headdesk-inducing hassle. Moving on:

Finally, I downloaded a free trial version of Adobe’s InDesign, software that is made explicitly for desktop publishing. This worked like a charm. Straight out of the box it varied which versions of each character were used as I typed, and if I wanted to specify an exact variant to use, I could do that through the remarkably intuitive glyphs menu. I highly recommend this approach if you’ll only need to be able to work with the font for a short period of time and/or you’re willing to shell out $700 for InDesign.

Tip #4: If you want to use the special characters of your open-type font in Windows, your best bet right now is either Office 2010 or Adobe InDesign. If you can’t get a license for either, InDesign has a free 30-day trial.

Tip #5: Only attempt to install LaTeX if you are a grad student or a masochist, or you have absolutely no other options (and even then, you should try to find a grad student or a masochist to help you get it up and running).

Step 4: Printing with an open-type font.

InDesign provides a pretty fantastic printing experience, so I didn’t have to struggle at all in this regard. I set up my new document to be exactly the dimensions of the card stock I was printing on, and it went through my standard, off-the-shelf printer without any trouble. I seem to remember reading some sort of horror story about needing to manually tweak printer drivers to get them to recognize a new font, but thankfully that’s not something that happened to me (and sadly, I can’t find the relevant link).

Tip #6: You might have printing issues. A good word processing tool will mitigate this as much as possible, but God help you if you’re using LaTeX or anything equally obscure.

I hope this will be helpful to at least a few people out there. And in case you were wondering, our invitations look down-right incredible, and we’re looking forward to printing the rest of our wedding-related copy over the next few days.

If you have a similar story regarding font manipulation, or a question that I didn’t answer above, I’d love if you left a comment.

Categories
Software Development Web Technology

Improving Performance in Flex and Scaling BlazeDS

I gave a talk today at work about Flex and BlazeDS, and in particular how to scale both to perform well during high-volume, real-time communication with a Java-based server (in the area of thousands of messages per second). Here are the most helpful bits from my presentation and the ensuing discussion:

Stick to StreamingAMF.

When it comes to real-time data transfer, StreamingAMF is really your only choice for a high-performance endpoint. It offers two simple advantages:

  • Streaming connections allow for true push, rather than less-effective fast-polling.
  • AMF is a binary protocol, so less data is transferred across the wire.

If you need a more thorough round-up of endpoints, I highly recommend DevGirl’s excellent endpoint explanation.

Batch messages going through BlazeDS to save bandwidth.

BlazeDS adds significant overhead to each message sent across the wire. With thousands of messages per second, this adds up to a very significant amount of bandwidth usage, to the point that performance will be adversely affected.

To compensate for this, buffer consecutive messages together and send several at once. Even a simple timeout that buffers message content for 10ms before sending it all as a single message will save an incredible amount of bandwidth, and a smart buffer that adjusts its timeout based on message activity will do even better.

This is easy to implement, and likely the biggest performance optimization available in a high-volume situation. Definitely worth doing if bandwidth and performance are a concern.

Override default BlazeDS connection settings.

BlazeDS sets two interesting connection limits too low:

First, the <max-streaming-clients> property is used to limit the number of clients that can simultaneously stream from the same server. BlazeDS limits this to 10 by default, so if 11 users connect to your application at the same time, that 11th one won’t get through. This is a serious fault, but we can raise the limit as long as we’re smart about how high we set it.

The reason there is a limit at all is that all connections in BlazeDS use blocking IO. This means that the maximum number of connections Blaze will support is limited by the maximum number of threads in the application container, since it will always require one thread per connection. Fortunately, modern containers support much more than 10 concurrent threads; Tomcat 6, for example, reserves 150 by default and even that can be boosted.

So the rule of thumb here is that you don’t want your connections in BlazeDS to outnumber the threads in your container, and that’s what you should base this limit on. If you require more than a few hundred concurrent connections, you’re out of luck and you’ll have to either wait until Blaze implements non-blocking IO connections, or upgrade to LiveCycle.

The second, much-less-serious configuration is the <max-streaming-connections-per-session> property, which is used to limit the number of concurrent streaming connections a specified browser can support. If this number is exceeded, new connections will not open on the same client. BlazeDS defaults this value to 1 for all browsers, so if a user opens two instances of your streaming app at the same time, on the same machine with the same browser, the second instance will not open.

This limit is dependent on the browser, and many do actually have a hard limit of one single streaming connection at a time. However, newer versions of Internet Explorer/Firefox/Safari, most versions of Opera, and all versions of Chrome support multiple concurrent streaming sessions. To take advantage of this, override the limit in your services config; I’d suggest looking at Patrick Heinzelmann’s awesome RemoteServices example to grab the specific browser numbers and a nifty code sample.

Get low-level with Flash Player.

There are probably a lot of neat Flash Player performance hacks that I’m not aware of, but here are two I’ve figured out so far:

The default frame rate in Flash Player is not very high. I’m not entirely clear on what it is; I’ve seen some sources say 24fps, some say 12fps, and some say it’s completely dynamic. Depending on what you’re doing, you may consider boosting it to draw more often. In particular, this can lower the worst-case latency between a message being triggered, processed and displayed. The flip-side here is that a high frame rate will raise your CPU usage, so that’s a trade-off to keep in mind.

Secondly, for the longest time I was updating the screen whenever I had new data to display. In retrospect, this was ridiculous. How do I know if I’m updating more often than the screen is being refreshed? How do I know how long it will be until this update is actually blitten* to the screen?

A much less naive approach is to make screen updates on the ENTER_FRAME event. This is dispatched right before Flash Player refreshes the display, so it ensures that whatever you do here will be instantly reflected on-screen. As long as this is the only place you’re doing screen updates, you know that you are doing exactly one update per screen refresh, which is ideal provided you’ve calibrated your refresh rate to match how often you receive updates.

The Profiler is your friend.

After all the above tricks have been exhausted, if you still need a performance boost, there’s always code-level optimization. Things like unrolling loops and minimizing allocation using the “new” keyword will add up eventually. A good way to find out which areas will benefit most from such refactoring is to use the profiler that comes with Flex Builder.

The profiler will allow you to view object allocation stacks and method performance. The former is a great way to find memory leaks and the latter is fantastic for finding out which methods are the slowest and thus most qualified for optimization. If you have any curiosity at all about this sort of thing (and you should!) I heartily encourage you to open up the profiler and fiddle around with it a bit; it takes a bit of ramp-up but once you have it figured out it’s a totally indispensable tool.

Hopefully this will be helpful to someone out there. Flex and BlazeDS are both very well documented by Adobe, but these were the handful of cases where I had to go well out of my way to find workable solutions.

* blitten: Past tense of blit.

Categories
Uncategorized

And the Clocks Keep Unwinding

I haven’t prepared a “real” post for this week. Instead, I offer you an excuse, an idea and an interesting problem — unrelated, but in that order.

I’m awful at writing exams.

I wrote my Flex 3 with AIR ACE exam on Friday.

I passed :)

Unfortunately, this meant devoting every ounce of my being for about six days to memorizing the entire API studying intensely. I’m still catching up on all the stuff I was actively ignoring last week, which includes “writing awesome blog posts” and “hunting for bears“.

We need more double-clicking.

This is something we take for granted, but as an input mechanic it’s pure genius. How can we make one button do two completely different things? Have it react differently based on the frequency of its presses. It literally doubles the usefulness of the left mouse button. Why haven’t we made this optimization on other controls? The only other case I can think of is how my iPhone thoughtfully fills in a period if I double-tap the space bar.

In particular, I’d like to see more double-key presses. I would love for my computer to pull up a shutdown prompt if I double-press my escape key. This is a key I rarely use anyway*, and it would save me the trouble of remembering whether I’m in Win7, XP, OSX or Ubuntu, not to mention which sub-menu they tucked it under. What about tab? Two tab presses could bring up Apple’s exposé, the Windows visual window manager du jour, or some experimental cube animation in linux. Maybe double-backspace deletes an entire word; and don’t even get me started on the power we’ve yet to unlock in our function keys.

Our input devices hold so much more potential than we’re using, we just have to think like the guy that invented the double-click. (Wikipedia currently credits this to the original Apple Lisa).

An unsolvable problem.

A common practice among interviewers in the high-tech circle is to ask the candidate for a solution to an unsolvable problem. Such problems are intended to drill down to the problem-solving skills a good candidate will hopefully have, and present an excellent opportunity for the interviewee to explore creative solutions, show attention to detail, and often demonstrate a sense of humour. I’ve always found these very interesting to answer, and today I propose one of my own:

Wikipedia will reject new page submissions about people who are deemed not notable enough to warrant their own entry. How could we find the most notable person that is not yet listed in Wikipedia?

This is something I’ve thought about a bit on and off, but if you have any insightful answers (practical or not) I’d love to hear them.

* I have been known to mash escape in vii and its gang of dangerous-to-abbreviate ‘CLI text editors’, where a double-escape mechanism would obviously be annoying. Maybe this would drive me to learn how to use the damned things properly?

Categories
Web Technology

The Present and Future of Flash

Adobe Flash is at an interesting point in its existence. For about a decade, it was the only way to get rich, dynamic content onto the web. If it was the year 2001 and you wanted a really sleek UI, or video, or any kind of animation, Flash was your best bet — it was pretty much a monopoly. Then things started to change:

  • DHTML started to take over some of the really basic use-cases for dynamic events like rollovers and showing/hiding content.
  • AJAX made truly dynamic content easier for the non-flash world.
  • The mobile web started to take off, with most devices not capable of supporting Flash.
  • Microsoft released Silverlight, a competitor to Flash in the rich interface space.
  • Apple started releasing wildly popular devices that intentionally avoided supporting Flash.
  • Browsers started implementing support for HTML5 and CSS3, which are slowly being adopted by designs that would historically require Flash.

Slowly but surely, alternatives to Flash have been picking up speed, and things beyond Adobe’s control have prevented Flash from penetrating certain markets (mobile in particular). What does this mean for Flash as a technology?

Flash isn’t going away anytime soon…

This isn’t one of those posts about how HTML5 or the iPad or global warming is going to spell the end of Flash. Flash is a major player in many areas of the web, most of which won’t change anytime soon. In particular:

Games — There are tons of online Flash games. This is a huge market that Flash has absolutely dominated since day one, and none of the technologies mentioned above can compete with Flash on this level of interactivity.

Video — Like it or not, HTML5 is not yet strong enough to handle cross-browser, web-based video. Even when it is (and it will be sooner than you think) Flash will still be used well into the future because it’s the only solution for legacy browsers, and the vast majority of users don’t update their browsers as often as they should.

On top of that, Adobe has created an entire ecosystem of software and a vibrant community for designing, building, and publishing Flash-based applications. Plenty of people are heavily invested in these tools, and no amount of evangalism is going to convince them that their problems could be better solved by today’s Flash-alternative du jour.

…but Flash will start having a reduced role on the web in general.

It would be unrealistic to pretend that these new technologies aren’t eating into Flash’s market share. For one, even in the most complex cases, some projects are choosing Silverlight over Flash. Not the majority (not even close) but more than none, and Microsoft is a powerful competitor that can compete with Adobe on the development tools and community levels.

Secondly, HTML5 and CSS3 can do some pretty neat things. For cases such as modern, dynamic navigation and simple logo animation, it will soon make much more sense to use features supported by the browser than a heavyweight proprietary plug-in; especially if all you need is a quick piece of eye candy.

Finally, there are the problems caused by Apple. I can think of three:

No iPad/iPhone Support — The longer this keeps up (and I don’t see it changing anytime soon), the more likely it is that someone will create a cool, interesting way to do fancy, Flash-like things in an iFriendly format. And then a general-mobile format. And then a web format. The last thing Flash needs right now is for some brilliant start-up to shake things up even further.

Macbooks are getting popular — Adobe claims that Flash runs on every platform ever, but as Chris Rawson astutely points out in this excellent article, that’s been easy to say while most of the world has been running Windows. With Apple’s laptops gaining popularity, people are starting to realize that Flash doesn’t run as well in OSX. The more Macbooks Apple sells, the more Adobe’s claims of market domination will start to dissolve.

No iPad/iPhone Support: take two — I want this website to be viewable on the iPhone, the iPad, and whatever whimsical hardware Apple comes up with next. That alone means I’m not going to use Flash in my blog’s design, ever. I’m admittedly in a minority here, but I wouldn’t be surprised if today’s kids getting into web design are also going to want to show off their cool, new, standards-compliant sites on their cool, new, iApproved devices. This sort of trend will slowly but surely push Flash out of the cool-new-site space.

Getting along with OSX is something that Adobe is going to have to work towards to keep Flash competitive, especially as new markets evolve out Apple’s hardware.

I’m not anti-Flash.

I’ve been using Flex Builder to build cutting-edge Flash applications for years, and I still believe there are many cases where Flash is a legitimate choice for creating a rich internet experience; there just aren’t as many as there used to be, and this combination of new, exciting technologies and pressure from Apple are making for some exciting times in the world of web design.

2010 is shaping up to be a wild ride for Flash and its competitors, and I can’t wait to see where it takes us. What are your predictions?

Categories
Software Development

Adobe “gets” Integration

In the world of software development, I submit that the hardest thing to do is to continue developing your code after it has been integrated into someone else’s code, which they are also continuing to develop.

The challenge here is that you and this other person are now co-dependent. If you break the build, it’s broken for both of you, and vice-versa. If your next feature requires some "almost finished" feature from the other party, your deadline depends on their deadline. This isn’t so bad with literally you and one other person, but what if you’re part of a large team working on one product, and the other person is an entirely different team working on a different product altogether, with different priorities and different deadlines? That’s just asking for headaches.

Adobe has some kind of magic handle on how to do this really well. Let’s start from the beginning: for a while, they just did Photoshop, which was pretty neat. Then they added Illustrator, a great Photoshop companion. Interoperability was a bit rocky at first, but now it’s a piece of cake moving a design from one tool to the other.

Then from the opposite direction, they released Flex Builder. Web mark-up integrated with Flash. Adobe gets it right again, bridging the gap between two like technologies. But do you know what made things really interesting? Catalyst.

With the release of Catalyst, suddenly everything has to work together. Designs made with a combination of Photoshop and Illustrator have to be compatible with Catalyst, which has to play nice with Flex Builder, which relies on Flash. This is a lot of complex products interacting with a lot of complex technologies; it’s an absolute mess of dependencies. And you know what? They made it work. Seamlessly.

Take a moment and appreciate how awesome that is. Imagine what would happen if they wanted to add a new feature to Catalyst. First, there are the normal issues that may come up in Catalyst:

  • Will this break any of Catalyst’s existing features?
  • Does the user interface match the rest of Catalyst?
  • Does it introduce any new bugs into Catalyst?
  • Does it open up any regressions in Catalyst?
  • etc

Then, you have to consider what this will do to any incoming Photoshop/Illustrator design files:

  • How will new design files take advantage of this feature?
  • How will existing design files react to this feature?
  • Does the underlying design file format have to change?
    • If so, does that cause any bugs/regressions in Photoshop or Illustrator?
    • Who is expected to report/fix/test these issues? The Photoshop/Illustrator guys? The Catalyst team? Some combination of both?
  • Besides that, is there any work at all required on the Photoshop/Illustrator side?
    • If so, do the Photoshop/Illustrator guys have time budgeted for it?
    • What parts of the Photoshop/Illustrator changes depend on what parts of the Catalyst changes?
    • Can any of the Photoshop/Illustrator work be done in parallel with the Catalyst work? How much?
    • How will this affect the deadline?

And of course, that same list applies to how this feature affects the content Catalyst exports for Flex Builder. And that’s just the obvious dependencies &#8212 it gets even worse:

  • What if a team can’t fulfil their side of the changes? Reschedule? Cancel? Release anyway?
  • If one team is late, what does that mean for the others? What if several teams are late? What if everyone is late?
  • What happens if the release cycles between any of these products don’t match up?
    • Can we release Catalyst with its changes before the changes to Photoshop/Illustrator/Flex Builder/Flash are released?
    • What if a user upgrades one product but not another? For that matter, how backwards compatible is this for outdated versions of any of the products?
      • Aren’t there thousands of possible version combinations? How many should be tested? Who’s managing this?

And this is just what I’m thinking of as I type. I can’t even imagine what a mess it must be to coordinate features in all these applications. How do you even measure what effect a new feature in one product will have on any of the other products’ thousands of features?

I don’t know how Adobe does it, but they do it and they do it well. If they can keep this up, they’re going to be around for a very long time.