Subscribe: silverorange labs
http://labs.silverorange.com/rss
Added By: Feedage Forager Feedage Grade B rated
Language: English
Tags:
code  demo  function  javascript  open source  open  pear  silverorange  site  source  svg  swat  video  web  working 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: silverorange labs

silverorange labs



Recent Posts



Updated: 2016-10-01T16:18:48+00:00

 



Add some Ambiance with Firefox 3.5

2009-05-19T15:28:00+00:00

Our work with Mozilla led us to do some experiments on what can be done with the new HTML5 functionality in Firefox 3.5. With and the new HTML5 element, we created a demo that pulls color information out of a live playing video and uses it to style a border around the video. The result is not unlike the tackiest of back-lit LCD tvs.

(image) View the Demo

How It Works

The color calculation is done by drawing video frames to a HTML5 canvas element and then computing the average color of the canvas. To make computing the average color faster, the video frame is resampled onto a smaller canvas (this demo uses 50x50). Color accuracy can be improved at the cost of speed by using a larger canvas. Pushing video frames to the canvas is done as follows:

var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
var context = canvas.getContext('2d');

// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);

// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

The computed color is then changed over time using a YUI animation.

The edges of the video are feathered using an SVG mask. Firefox 3.5 allows SVG masks to be applied to elements using a special CSS+SVG property. First, an SVG mask is defined inline in the document (note: this could also be defined externally). The mask is then applied to the video element using the following CSS rule:

#video {
    mask: url(index.html#m1);
}

There are two of other CSS+SVG properties available in FF3.5: clip-path and filter. To reference SVG styles in CSS use url(filename#element-id) or just url(#element-id) if the SVG is defined in the same file as the CSS.

Finally, the demo uses some new HTML CSS 3.0 features from Firefox 3.5. The box-shadow property, text-shadow property and rgba color model are used:

#main-feature {
    -moz-box-shadow: #000 0px 5px 50px;
}
#description {
    text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;
}

Our work with Mozilla led us to do some experiments on what can be done with the new HTML5 functionality in Firefox 3.5. With and the new HTML5 element, we created a demo that pulls color information out of a live playing video and uses it to style a border around the video. The result is not unlike the tackiest of back-lit LCD tvs.

(image) View the Demo




Public Bug-Tracking for Swat and More at code.silverorange.com

2008-05-08T14:23:00+00:00

We’ve been using free and open-source software at silverorange for years now. In the last year, though, we’ve begun releasing more of our internal web-development software stack under an open-source license.

While our Swat web application toolkit (it’s not a framework) has been open since it’s inception, it has been missing some of the key infrastructure required for a healthy open-source project. The code was available, that was about it.

Now, with the new code.silverorange.com website (based on Trac - a past nominee for silverorange employee of the year), we finally have the rest of the public project infrastructure in place.

Most importantly among these changes, we finally have a public bug-tracking system! This took longer than expected because we had Swat bug-tracking tied in with our internal (private client) project tracking. The two are finally separated, and everything that should be open is now out in the open.

We’re are also now in a position to grant SVN commit access to external contributors when appropriate.

The silverorange code site isn’t limited to Swat either. We have a whole set of packages we use for developing client sites, including a back-end website administration package, an e-commerce package, a photo-gallery package, and a (fledgling) weblog package. Each of these projects now has a section of it’s own on the code.silverorange.com site, and they share a mailing list and Jabber chat room with Swat.

For those who have been patient enough to follow and participate in our open-source projects so far, we’re appreciative. We hope to be much more open to external collaboration and contributions with this new infrastructure.




Employee of the Year, 2007

2008-01-16T19:41:00+00:00

Each year at silverorange, we look back over the last twelve months and bestow honour to one deserving of the title of employee of the year. However, at silverorange, employees, family, and human beings are ineligible.

This leaves the coveted position opened mostly to inanimate objects. In the past three years, the Employee of the Year title has fallen on the following deserving candidates:

Employee of the Year - 2004: Jabber Chat Room

After getting our own Jabber instant messaging server, which allows us to manage our own secure instant messaging infrastructure just like we do with email. One of the benefits of such a service is way secure chat rooms can be easily created. Since then, an enormous amount of our company dialog has taken place in our “Office” Jabber chat room. It has been particularly helpful in keeping our few remote partners in touch with the mother-ship.

Employee of the Year - 2005: Subversion Version Control System

Up until this point, we had been a small enough team working on small enough projects that working on one shared code-based wasn’t too much of a problem. Even at this scale, there was still a need to occasionally yell out “Who’s editing index.php?!” Along with some other changes, bringing in a source code management system (we opted for Subversion) has significantly improved the stability of our general work flow. The history of each file is preserved, and perhaps most importantly, it is easy to watch what everyone else is doing on a project. The benefit of this peer-review (aka, fear of shame) is significant.

Employee of the Year - 2006: Third-Floor Workspace

The third floor of our beautiful turn-of-the-century Victorian building in downtown Charlottetown had seen little use until 2006. Early last year, though, we set up a large communal desk, rife with power and network adapters. This became the place we would gather when we were working together on a project. When you ran into an issue that needed another the help or insight of co-worker, they were only a glance away. An LCD projector also helps with group reviews of current project sites.

As a result, many of us now spend most of our working time here at this large group desk. We’ve joked that we could sell our building and move into one room with one desk. We know, though, that working together in a room like this only works because we know we can retreat to our private desks and offices at any point if we need some time without distraction.

2007

Earlier this month, we convened for our annual winter summit on the north shore of Prince Edward Island. Looking back over the year, we examined a few potential candidates for the 2007 Employee of the Year. Promising candidates included our BBQ, Trac, our crock pot (chili and beef stew on Wednesdays!), Firebug, our drink fridge, our Dell projector, our Wii (and Wii Sports), the toilet, and the improvised cardboard lids for our waste and compost bins. Considering two pieces of cardboard as the Employee of the Year might seem a bit odd, but it’s quite likely that they prevented a breakout of malaria in the office following a fruit-fly issue in the late summer.

After this superficial and possibly beer-fueled evaluation, we chose to name the 2007 Employee of the Year as follows:

The Drink Fridge

Having beer, tea, and juice has kept us hydrated, and helped us to speed up the process of passing the caffeine from our morning coffee through our systems. Firebug was a very close runner-up. Some even claim there was some vote tampering, however, given the one-raised-hand=one-vote system, it’s hard to imagine much room for fraud.

Better luck next year, crock pot.




Swat 1.2.35

2007-10-26T16:34:00+00:00

Swat 1.2.35 is released and available for download. This release of Swat contains the usual bugfixes, code cleanups and feature improvements. Additionally, this release features several important IE6/7 JavaScript and CSS fixes relating to hasLayout. Many thanks to the contributors of On Having Layout.

Download the latest release of Swat. You can upgrade from an existing PEAR install using pear upgrade Swat.




Compressing JavaScript with ShrinkSafe

2007-05-04T19:32:00+00:00

JavaScript is a ubiquitous technology used on modern websites. With the rise of several prominent JavaScript libraries developers are realizing JavaScript is a legitimate language for complicated programs. With this understanding, larger and more complex JavaScript applications are developed. To create and maintain large JavaScript applications, coding conventions and documentation are necessary. Unfortunately, coding conventions and documentation result in larger file sizes. Since JavaScript is often served over the web, developers should be concerned with file size. As a result, it is common practise to run JavaScript source files through a filter that strips comments and white-space.Since Swat is maturing we're getting time to look at ways to increase the efficiency of the toolkit. Swat contains over 150Kb of JavaScript so running some sort of compression on Swat's JavaScript makes sense. There are numerous programs written in a variety of languages that perform the task of compressing JavaScript files. Compression programs fall mainly into two types: regular-expression-based and parser-based. Regular-expression-based compressors are the easiest compressors to write an understand. They search for strings of white-space and comments and remove them from the source file. The problem with regular-expression-based compressors is they don't understand the JavaScript language itself. A parser-based JavaScript compressor can understand the context of variables and white-space in ways a regular expression-based compressor can never match. Understandably, a parser-based compressor is far more complicated to develop but produces superior results. Fortunately, one already exists. ShrinkSafe is the JavaScript compressor used by the Dojo Toolkit. It is derived from the Mozilla Rhino JavaScript engine. In tests on the Swat JavaScript code base, ShrinkSafe produced files that were 36 percent smaller after gzip compression. ShrinkSafe (and the Rhino engine) are written in Java. ShrinkSafe is distributed by the Dojo Toolkit as a Jar file. You can also build ShrinkSafe yourself using Mozilla CVS and the patch provided by the Dojo Toolkit. You'll need to have a Java SDK installed as well as the Apache Ant build system. On Ubuntu this can be done with: $ sudo apt-get install ant sun-java5-sdk To build ShrinkSafe into a Jar package: $ cvs -d :pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot co -D "5 Nov 2005" mozilla/js/rhino $ cd mozilla/js/rhino $ wget http://svn.dojotoolkit.org/dojo/trunk/buildscripts/lib/custom_rhino.diff $ patch -p0 < custom_rhino.diff $ ant compile $ ant jar The resulting jar file will be in build/rhino1_6R3pre. Instructions on how to use the Jar file are found on the Dojo Toolkit's page on ShrinkSafe. Compressed JavaScript is not ready to enter Swat's SVN repository just yet. Figuring out how to compress JavaScript is only one part of the puzzle for a toolkit. Problems remaining to be solved are: an automated build system a system for distributing the source files a easy way to use uncompressed versions of files for debugging Stay tuned.JavaScript is a ubiquitous technology used on modern websites. With the rise of several prominent JavaScript libraries developers are realizing JavaScript is a legitimate language for complicated programs. With this understanding, larger and more complex JavaScript applications are developed. To create and maintain large JavaScript applications, coding conventions and documentation are necessary. Unfortunately, coding conventions and documentation result in larger file sizes. Since JavaScript is often served over the web, developers should be concerned with file size. As a result, it is common practise to run JavaScript source files through a filter that strips comments and white-space.[...]



Non-Capturing Sub-Patterns in PCRE

2007-04-05T04:57:00+00:00

I've been using Perl Compatible Regular Expressions (PCRE) for about four years of my web-development. PCRE gurus may scoff at me for not knowing this beforehand, but here is a neat feature of PCRE I discovered today.

You may specify a sub-pattern as non-capturing using PCRE syntax. To do this, use the ?: symbol after the opening parenthesis of the sub-pattern.

Here's the situation that led me to this discovery:

I needed to split a string at any known XHTML tag. To do this properly, I used PHP's preg_split() function. Because I also needed to include the matched tags (split delimiters in this case) in the returned array I specified the PREG_SPLIT_DELIM_CAPTURE flag.

My code looked something like:
$all_elements = 'div|span|p|ul|ol|li|strong|em|etc...';
$pattern = '/(<\/?(' . $all_elements . ')[^<>]*?>)/i';
$strings = preg_split($pattern, $string, -1, PREG_SPLIT_DELIM_CAPTURE);

The outside sub-pattern is the entire delimiter (tag), which is what I want in the returned array from preg_split(). The inside sub-pattern is only needed to match any XHTML element name. Because there are two sub-patterns, the array returned from preg_split() contains both the entire tag (desired) and the element name (undesired).

Using the optional non-capturing sub-pattern syntax, my pattern looks like this:

$pattern = '/(<\/?(?:' . $all_elements . ')[^<>]*?>)/i';

Using the revised pattern, my code works as intended; only the full tag match is returned in the split array. This feature turned out to be quite useful for me. I imagine this feature will be useful anywhere that a sub-pattern containing branch syntax is used inside a larger pattern, and the larger pattern needs to be captured.




Getting Up and Running with the Swat Demo

2007-02-07T21:27:00+00:00

(image)

Since Swat's 1.0 release, we've had a few people tell us getting started with Swat is too difficult. To help people get started, here is a quick tutorial on how to get the Swat Demo running on your own server.

To get the Swat Demo running you'll need the following:

Step 1: Installing the PHP

Using PEAR

If you are using PEAR to manage your PHP packages you can get PEAR::Date from the main PEAR channel (pear.php.net) and Swat from the silverorange's PEAR channel (pear.silverorange.com).

The main PEAR channel is installed by default when you are using PEAR. You can install PEAR::Date using:

pear install Date

To add the silverorange PEAR channel to your PEAR install, use:

pear channel-discover pear.silverorange.com

You can then install the Swat package by using:

pear install so/Swat

Swat will install the Swat demo in /data/Swat/demo

Using Release Archives:

Download the latest Swat release. Download PEAR::Date from the PEAR::Date download page.

Extract the entire Swat archive into . Extract PEAR::Date into a path that is in your PHP's include_path. The Swat demo will be in /demo

Step 2: Installing YUI

Most of Swat's UI objects using JavaScript make use of the Yahoo User Interface Library (YUI) to abstract cross-browser event-handling, DOM manipulation and CSS positioning. The latest release of the Yahoo User Interface Library (YUI) is available for download at the YUI download page (Sourceforge).

After downloading the latest YUI release, open the archive and extract everything in the build directory into demo/www/packages/yui. You'll have to perform this step for websites you create using Swat as well.

We don't distribute YUI with Swat because:

  • we don't want to unintentionally fork YUI,
  • we don't want to deal with including BSD code in our LGPL code,
  • we want to encourage users to use the latest available version of YUI.

Step 3: Configuring your Web Server

Configure your web server to use allow browsing demo/www

Make sure the directory above Swat is in PHP's include_path and you should be all set.

(image)

Since Swat's 1.0 release, we've had a few people tell us getting started with Swat is too difficult. To help people get started, here is a quick tutorial on how to get the Swat Demo running on your own server.

To get the Swat Demo running you'll need the following:




Working with XML Feeds - Last.fm

2007-02-03T20:19:00+00:00

Demo view demo download source (zip) While working on a weblog I had a friend ask me if she could have her recently played Last.fm tracks appear in her sidebar. Last.fm has a feature to add your recent tracks to your blog but unfortunately, the recent track list is implemented as a dynamically generated image. Last.fm does have a nifty chart designing tool but for a number of reasons I wanted to work with styleable XHTML markup. Luckily for me, Last.fm also provides a set of XML data feeds for all sorts of things including recently played tracks. For example, these are the recently played tracks in the silverorange office. Having data feeds is great, but as you can see, the data is not an XHTML unordered list. There are several things that can be done at this point.PHP/XSLT Using XSLT (eXtensible Stylesheet Transformation), it is possible to transform this standalone markup into an XHTML document. Depending on your environment and level of XSLT experience this may or may not be easy to do. At silverorange, we heavily use PHP and PHP's XSLT support is not great. XSLT is available as a separate extension and is not enabled by default. Other platforms may have better support for XSLT. PHP/DOM PHP 5 contains an implementation of the DOM API that is similar to the one used in JavaScript. Using the DOM extension it is fairly easy to load the Last.fm data feed, parse the various XML nodes and display an unordered list. The code to do this looks something like this: load($uri); $tracks = $document->getElementsByTagName(); if ($tracks->length == 0) { echo '<none recently>'; } else { echo '
    '; foreach ($tracks as $track) { echo '
  • '; // further processing of DOMNode objects goes here ... echo '
  • '; } echo '
'; } ?> Initially on my friend's blog I implemented the above PHP/DOM-based solution. Everything worked great until a few days later I noticed her blog was taking about thirty seconds to load. The problem, of course, is that the $document->load(); call was downloading the XML feed from Last.fm and Last.fm's servers were, at the time, overloaded. The rest of the PHP script responsible for generating the page was blocked waiting for an external resource to download. Both the PHP/DOM solution and the PHP/XSLT solution will incur this blocking effect if a third-party web-server is experiencing problems. With the increasing prevalence and use of XML feeds for all kinds of data, the problem of relying on other people's web servers will only become greater. There are two primary ways to work around this problem. 1. Caching write a script to periodically check the XML feed if the content has changed, save the content locally PHP using either the DOM or XSLT loads the local, cached XML 2. Asynchronous Requests Using an asynchronous request, it is possible to load the XML feed separately from your main PHP script. This brings up the third way of doing things: Asynchronous HTTP Request using JavaScript/DOM This technique is frequently referred to as AJAX. Though the technique is a little more complicated, asynchronous requests mean no matter how slow Last.fm's servers are, my friend's blog loads as fast as our server can serve it up. Using AJAX to load Last.fm feeds turned out to be the best solution for my friend's blog. Since the DOM is used, the code is quite similar to the above PHP. For those interested, here is the Last.fm AJAX loader I wrote. One important thing to keep in mind using AJAX to load remove XML feeds is that browsers will not allow loading documents from different domains than the domain the JavaScript is hoste[...]



Swat 1.0

2006-10-18T15:20:00+00:00

(image)

The Swat web application toolkit has reached the mythical 1.0 status. What this really means is that we have it in a state where we were ready to launch our first client website powered by Swat and it’s sister (brother?) packages.

What better way to bring Swat into the production-website world than by having it power a gardening company e-commerce store? You can read more about the new site in the silverorange news.

In the development of our first major site with Swat, a few other packages have organically sprung up:

  • The Admin package provides the web-based back-end management functionality for the site.
  • The Site package provides very basic site structure
  • The Store package provides common e-commerce site functionality (products, categories, shopping cart, accounts, etc.)

Though we don’t have much public info about them, these packages all share the same LGPL license as Swat are are available in our public Subversion repository. A few other packages are likely to spring up as we develop more sites with Swat.

The in-line documentation for Swat and these additional packages is reasonably good (but could always be better). However, the documentation published on the Swat site is not quite up-to-date. We hope to improve on this soon.

We’re also moving to a Trac install as a means of trac(k)ing bugs/issues for the Swat family of packages. We'll try to get this working in some publicly accessible way in the ambiguous future.




Looking for a Designer

2006-09-01T20:30:00+00:00

We’re looking for a designer to add to our team. Read the details and let us know if it’s you.




How to Include Scalable Vector Graphics (SVG) In-line

2006-01-04T15:13:00+00:00

The above image is either a PNG or an SVG, depending on your browser support. Now that Firefox 1.5 is out with support for SVG (Scalable Vector Graphics) included by default, and the same coming for Safari, perhaps some of us might want to actually use SVG for something. Of course, Firefox 1.5 still represents a small minority of web users. Unless your application is somehow limited to this small slice of internet users, you can’t really use SVG in-line unless you can have a safe fall-back for browsers that don’t (yet) support SVG. It turns out this is relatively easy to do. It turns out the tag can help us out. The Code The object tag is like a more generic version of the img tag. Rather than include images, it can include all kinds of objects (hence the name). You may have seen it in use to include Flash or Audio/Video content into a web page. For a simple test case, let’s imagine we want to include an SVG image on a page. However, for browsers that don’t support SVG inline and don’t have an SVG plug-in installed, we want to show them a simple PNG image instead. The XHTML code is simple: (object) (image) The object tells the browser that it’s including an SVG object (type=”image/svg+xml”) and points to the SVG file (data=”image-svg.svg”). Contents of the object tag are used as alternate content if the object cannot be displayed. Think of what lives inside of the opening and closing object tags like “alt” text on an img tag. However, rather than a simple text alternative, we can include more XHTML. In this case, we’re including the familiar img and displaying a normal PNG image. Browser Support (and the lack thereof) This technique seems to be relatively well supported in the more popular web browsers. The browsers that support SVG (only Firefox 1.5, or other browsers with the Adobe SVG Viewer plug-in installed, so far), and other browsers degrade nicely and show the alternative content (a PNG in our test case). The only unfortunate display side-effect is that Firefox 1.0.x displays an addition plug-in notice at the top of the page (screenshot). This table shows the support in various browsers: Firefox 1.0.x Displays PNG and Plug-In Notice (screenshot) Firefox 1.5 Displays SVG Safari Displays PNG Internet Explorer Displays PNG Why Would I Want To Do This? A situation in which you might want to use SVG inline on a website is a bit difficult to imagine right now. The reason I looked into this was for a site where we want to display SVG graphics to show off that they are actually graphics created using SVG - not the most common or practical case. That said, we have to start somewhere. I’m sure I’ve made some mistakes here. Feel free to post corrections or additions in the replies to this post.[...]



Announcing the Swat Web Application Toolkit

2005-10-21T21:02:00+00:00

(image)

We’ve long been the beneficiaries of open-source software at silverorange, building many of our websites and web applications on top of an open-source stack (PHP, Apache, Linux, PostgreSQL, etc.). We have also known for a while now that the next platform project we worked on would be released under and open-source license.

That time has come with the release of the Swat Web Application Toolkit. Swat is an open-source web application toolkit built with PHP5. It is primarily developed and maintained by silverorange, but participation and contributions are welcome.

A Bit of History

When silverorange got started in 1999, we built a set of reusable code libraries in ColdFusion (pushing the boundaries of what was possible in a non-object-oriented environment). These made many of the common tasks we were performing for many of our sites much easier. Then, with our switch to PHP we took what we had learned from our time with ColdFusion and applied to to a much stronger web application development platform we called the “PSeries” (no relation to the line of IBM servers).

Now, with Swat, we are developing our third-generation toolkit. This is the first time we have done so with the aim of releasing the code as open-source. Knowing this release was imminent has forced us to make better decisions and write better code.

The Road Ahead

At the time of this writing, Swat is at a 0.0.4 release. The widget-set is mostly filled out and the basic framework is in place. That said, it is still a young project and will evolve significantly in the next few months.

We’re getting starting building our first set of production sites on top of Swat that we plan to have live before the end of 2005. Given this requirement, there will be an eye on making the toolkit ready for a production-quality site as quickly as possible.

It’s Open - Come and Get It

The code for Swat is licensed under the LGPL and any included artwork under a Creative Commons license. The code lives in a public subversion repository. We’re in the process of moving our internal Swat development communication to a public mailing list.

Visit the Swat website for more information. Further news and updates about Swat will be posted here on the silverorange Labs weblog and in the swat-devel mailing list.




Free and Open Source Software at silverorange

2005-06-17T02:02:00+00:00

Over the past few years at silverorange we have become more interested in and more aware of free and open source software. The interest started on the server side, where the open-source revolution was well underway with the growth of the Apache/Linux web server and then of PHP and other web scripting languages. Since then, however, our interest and experience in open source software has spilled over on to our desktops and laptops. Since open source software doesn’t have a PR firm to tell the world that a small business like ours can run linux on a majority of desktop machines, I thought we could share a bit of information about the open source software projects we use and follow.The Linux Desktop Perhaps since the creative side of our company is more often in the limelight, people often expect that silverorange might be a Mac-based company - not so. We have a couple of (very happy) Mac users, and a few Windows users, but they are in the minority. In a company of 11 people, we are now running linux on the majority of our personal computers. Most of these machines are laptops, with a few desktops in the mix. The typical machine is now running the Fedora Core Linux distribution with the Gnome desktop platform (though we do have a happy KDE desktop user too). The key internet applications that most of us run are as follows: OpenOffice.org office suite: This package handles word processing, spreadsheets, and presentations is a way that is quite similar to Microsoft Office. It offers relatively good compatibility with Microsoft Office formats so you can handle Word, Excel, and PowerPoint attachments from the Windows world. What’s great about OpenOffice.org is that it runs on both Linux and on Windows, so we can share documents between all of us at silverorange, regardless of format. Firefox web browser: This one is a no-brainer. Works well on Linux, Windows, and Mac OS. Great icon too ;-) Thunderbird & Evolution email clients: Thunderbird works well with both IMAP and POP accounts (we use a mix of both) and most importantly, it runs on Linux, Windows, and Mac OS. This has been particularly helpful for those of us transitioning from Windows to Linux. Evolution, the primary Gnome mail client works well for email and is also a complete calendaring application. Gaim instant messaging client: Works on Windows, works even better on Linux. Works with all kinds of protocols (jabber, which we use primarily at silverorange, MSN, ICQ/AIM, IRC, etc). Additional Applications These and a few other packages covers the basic desktop functionality. Beyond these, there are a plenty of other applications we make regular use of. Wine and Crossover Office let us run some key Windows applications, including Photoshop and Internet Explorer (for browser testing) on Linux. This is not easy or smooth enough to rely on for full-time use, but it does a fine job for occasional or testing use. A lot of our design work is still done in Photoshop on Windows, Macs, and our Linux desktops (via Wine/Crossover-Office). That said, some of us (including myself) also use Gimp, the unfortunately named image editing application for Linux has an understandable reputation for being difficult to use. That said, Photoshop isn’t too easy when you first get started. It has also improved dramatically and the interface continues to improve in recent releases. We also use Adobe Illustrator for vector artwork, but the free/open-source SVG editor, Inkscape has started to become quite useful as well. There are dozens of little apps that each of us use in addition to all of these. Liferea is an RSS reader that many of us use. NetworkManager is a new project from Red Hat that handles wireless ne[...]



Bash Completion for Subversion

2004-12-12T03:42:00+00:00

At silverorange we have recently begun using subversion for our source code management. To make the svn command a little easier to use I installed a bash completion script for it and then added some features to allow completion of svn URLs. See this post on my personal site for the full description and the script.

[edit]

Blog post was removed. Here is a direct link to the SVN bash completion script.




CSS Zooming

2004-09-24T18:54:00+00:00

Last night I made a post on my weblog Delta Tango Bravo about a handy way to make not only text but images as well zoom in for people. Using a combination of simple javascript and background image replacement techniques, you can make a text-resizing widget more useful for your site's visitors.

Anyway, check out a full description of how this works and see a working example. If you've got comments, please make them over on the other site so they're all in one place.




Smart Text Trimming

2004-06-10T19:24:00+00:00

Well here is my first so Labs post.

Often times, there are fields on forms or on pages that need to fit in a certain length. Article previews and select lists are two good examples. An easy way to ensure your text is withing the required length using PHP is to use $string = substr($string, 0, $length);. This has a number of disadvantages. Firstly, words can be cut at the end so you could end up with mixed meaning. For example, consider if the string "I hate sextants" was trimmed at 10 characters...you could end up with angry clients.

There is no built in PHP function to intelligently trim strings, so I wrote one. This function ensures strings are no longer than a maximum length and shows ellipses if trimming has occured. The function can be set to trim the string at the end, or to trim in the middle. (note: both of these trimming options assume left-to-right text, if someone wants to adapt the function for right-to-left languages feel free) In either case, the function tries its hardest not to cut any words in half.

Notes about how the function works:

Words are currently separated by spaces, but the function could easily be expanded to treat all whitespace or other characters as word separators. For more indepth documentation, read the comments inside the source code.

Here's a demo of the smart trim function in action. The trimmed strings are at most three characters over the maximum allowed length. This three charater excess is due to the ellipses.

See The Demo »

Download a ZIP File of the code in the demo.

The code is released under a BSD type lisence that gives users full rights to copy and use the function in programs, provided the copyright notice remains intact.

If you have improvements to the function, feel free to post them here.

Well here is my first so Labs post.

Often times, there are fields on forms or on pages that need to fit in a certain length. Article previews and select lists are two good examples. An easy way to ensure your text is withing the required length using PHP is to use $string = substr($string, 0, $length);. This has a number of disadvantages. Firstly, words can be cut at the end so you could end up with mixed meaning. For example, consider if the string "I hate sextants" was trimmed at 10 characters...you could end up with angry clients.

There is no built in PHP function to intelligently trim strings, so I wrote one. This function ensures strings are no longer than a maximum length and shows ellipses if trimming has occured. The function can be set to trim the string at the end, or to trim in the middle. (note: both of these trimming options assume left-to-right text, if someone wants to adapt the function for right-to-left languages feel free) In either case, the function tries its hardest not to cut any words in half.




Updated Simple CSS Tabs

2004-05-26T18:43:00+00:00

Several months ago, I posted a set of simple tabs made up of a bullet list styled with CSS. I was a little uneasy about posting it originally, as the way I was doing things was a bit buggy in some fairly popular browsers like Safari. After some good feedback from a number of people and upon learning much more CSS, I thought I'd invest some time in re-engineering them in a better way. Aside from the much improved browser compatability, there are a number of nice improvements. Гэты артыкул таксама даступная беларускай мове. — This article is also available in Belarusian. The secondary menu is now a nested list, so it is more semantically meaningful. The tabs scale with font sizes much better by using EMs more frequently for sizing. Things are a little more compact, so there's more room for the tabs. It's easy to control the width of the whole box (using EMs if you're clever). There are a few things to keep in mind if you're looking at the code. First off, I seperated the basic styles for the page and the styles specfically for the menu. Secondly, keep in mind that there are still some technical restrictions for using these. For instance, long menu titles need the tab classes to be set wider as a default and too many tabs or secondary menu items will cause the layout to stretch too wide. With these in mind, this set of tabs is much better prepared for the real world. If you're looking into the files, I've made some really basic annotations explaining a few things for you. Also, because of inheritance stuff, I've had to redeclare a whole slew of attributes in the nested list items, so that explains all the redundant code. Again, feel free to use this code and if you improve on them I'd love to hear about it. Thanks. See Them in Action » Download a ZIP File This layout has been tested satisfactorily in the following browsers: Internet Explorer 5.0 Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 5.2 Macintosh (minor glitches) Firefox 0.8 Mozilla 1.4 Netscape 7 Opera 7.23 Opera 7.50 Safari 1.2 Camino 0.7 Updated November 26, 2004After it was pointed out that the title was restricted in height the way I made the original, I've gone and fixed it by placing the

outside of the div, which now allows anything to go on top of the tabbed section. ZIP file and example are updated.Several months ago, I posted a set of simple tabs made up of a bullet list styled with CSS. I was a little uneasy about posting it originally, as the way I was doing things was a bit buggy in some fairly popular browsers like Safari. After some good feedback from a number of people and upon learning much more CSS, I thought I'd invest some time in re-engineering them in a better way. Aside from the much improved browser compatability, there are a number of nice improvements. Гэты артыкул таксама даступная беларускай мове. — This article is also available in Belarusian.[...]




silverorange stuff: a collection of reviews

2004-04-24T20:02:00+00:00

When the silverorange team isn’t playing frisbee golf, playing Mario Kart on our projector, or building “powerful web-based systems,” we like to buy stuff.

Combining our love of the web with our love of fine “stuff”, we have created stuff.silverorange.com: a new website full of reviews of the varied things owned and used by the people of silverorange. We share our thoughts of the stuff we own, in hopes of helping others find the right stuff, and in hopes of paying for a few lunches via Google Adsense.

You can read a bit more about the silverorange stuff site, or you jump right in to the reviews.




New Mozilla Thunderbird Logo

2004-04-20T19:50:00+00:00

(image) With several silveroranges working on the Mozilla Visual Identity Team, we’re proud to have the latest product of the team’s great work out in public. The new Mozilla Thunderbird logo and icon set was based on sketches by our own Stephen DesRoches, and was drawn in it’s beautiful final incarnation by the talented Jon Hicks of Hicks Design in the UK.

We’re having a great time working with the Mozilla team and the other great volunteers on the design team. We’re looking forward to doing more cool work with them.

The process of working through the design took place using our silverorange Intranet – particularly helpful given the spanning of continents and time zones of our team. For more details on the fascinating process behind the design of the Thunderbird artwork at Jon Hick’s weblog.




silverorange pitches in with Firefox

2004-02-12T21:41:00+00:00

We silveroranges have been busy working with a few open source software projects.

Along with my co-workers, Daniel Burka and Stephen DesRoches, I’ve been working with a collection of designers from around the world (literally - we span at least five times zones) on the visual identity of the Mozilla projects. The first big project by the team was the logo and icon for the recently renamed Firefox web browser.

(image) My weblog has more detail on the new team and logo, and Jon Hicks, the great illustrator we’ve been working with from the U.K. has also made a great post about the process. We’re excited to be a part of the new Mozilla Visual Identity Team and we’re just getting started.

Another silverorange, Nathan Fredrickson, has been pitching in with patches to the Gaim IM-client and has taken over as the maintainer of GtkSpell.

See the silverorange website for more detail about these projects.