Tag Archives: javascript

You are not your code »

December 14th, 2012

Sam Stephenson, creator of Prototype JavaScript framework and team member at 37Signals, explains why our self-worth should not stem from the longevity of our code.

He also puts forth this worthy nugget:

In order to advance the state of the art, we have to be willing not only to try new ideas, but to retreat when those ideas prove untenable or when something better comes along.

Boy do I believe this! Trying new ideas should be something that we, as builders, and even entire companies, should make a priority. Try. Try. Try. The worst thing that can happen is that you’ll learn.

Zepto.js – Mobile JavaScript framework

November 7th, 2010

Doing JavaScript for mobile platforms? Maybe you should check out Zepto.js.

Update: Via Kyle Slattery on Twitter: Sencha.

I haven’t yet had any experience using jQuery mobile (I simply do not do too much JavaScript anymore) but I wanted to make sure that any “competitors” to such a popular framework gets some attention. Does that make sense?

Compress your CSS and Javascript with Pack

May 25th, 2010

Lead Designer at Viddler, Andrew Smith, has released Pack via the Viddler blog – which is what he uses to compress Viddler’s CSS and Javascript for deployment.

Pack is written in Ruby and runs from the command-line. However, you could easily daisy chain it to Capistrano when doing deploys, like Andrew has done for Viddler, to make it one less step to deploying code that is optimized for page load.

Oh, and his post includes a cat. So there’s that.

Pack your CSS and JavaScript

January 31st, 2010

Pack, by fellow Viddler team member and friend Andrew Smith, is a great utility to compress your CSS and JavaScript for deployment. The real meat of Pack comes from its ability to take an entire directory of scripts and compress them using a set of instructions. Nice work Andrew.

Pie Guy, a free web game for iPhone

November 30th, 2009

Pie Guy, for iPhone.

Pie Guy is a fun game for your iPhone that is free, is installed via the Web (it is a fancy Web page), works offline, and is actually a lot of fun (works sorta like Pac-Man).

Neven Mrgan, the developer of Pie Guy, built the game – not only so people can enjoy the game – but to help show what is possible via HTML, JavaScript, and CSS for building games or applications on the iPhone using the Web browser rather than native cocoa technologies.

“If you find Pie Guy a fun game to play, well that’s grand.

But, I hope Pie Guy will also be an opportunity for the code-savvy among you to learn a trick or two about making serious web apps for the iPhone. Just grab my source code and tweak it. I’m not talking about just a fancied-up webpage here; this is a fullscreen game, with fast gameplay and responsive touch controls. I can’t wait to see what a better programmer does with this stuff (it’s not hard to program better than me!)”

A very notable thing to do and I hope a ton of talented developers take him up on it. I’d love to see stuff like jQuery for iPhone games/apps (which I’m sure exists in some form or another).

Also of note: As Neven pointed out in his announcement post – don’t try this on your first generation iPhones. This game only performs well on an iPhone 3GS.

Bing ‘forces’ Silverlight install

July 20th, 2009

Roz Savage, the Ocean Rower I linked to the other day, recently mentioned that she was a feature on Bing.com’s home page. Since I’m a few days behind on reading her posts she was no longer featured on the home page by the time I got there.

I noticed that Bing.com’s home page features have little arrows in the bottom right where you can, or seemingly can, go back and see past home page features. There’s just one thing – when you try to go back to previous home page features you get this message.

Bing Silverlight

Essentially: You need to install Microsoft Silverlight – which is Microsoft’s competitor to Adobe Flash – in order to see the home page archive.

No thanks Microsoft. Although I’d love to page through Bing’s home page features I’d rather not install Silverlight. I’m not sure why I can see the current home page feature without it installed – but I’ll chalk it up to the developers of Bing being pigeon-holed into using Silverlight instead of JavaScript and/or Flash to create the home page archive.

My suggestion: Go with JavaScript so that everyone can see the home page archive and there is no real competition argument to be had.

Add a progress bar to your Viddler uploads

June 18th, 2009

We get this question a lot at Viddler: How can I add a progress bar to my uploads using the Viddler API? We’re always asked if this is something included in our API wrappers. Until now, it hasn’t been. That’s where phpViddlerUploadify comes in. This extension to phpViddler, our PHP wrapper for our API, makes it pretty easy to use the open source JavaScript library jQuery and the extension Uploadify to add progress indicators to your Viddler uploads.

Go forth, and hack! Oh, and its completely open source too. (More on this later.)

Quietube now supports Viddler

March 25th, 2009

Quietube, which I linked to the other day, removes all of the cruft from around videos on sites like YouTube and now Viddler and Vimeo. Here is an example of what the result looks like with a recent episode of Wine Library TV.

When I saw Quietube I immediately recognized that, well, some people just want to watch videos without distractions. That is why I thought Viddler should wholeheartedly support Quietube with their project.

Thanks for implementing Viddler guys. Keep up the good work.

Readability

March 16th, 2009

I’m all for advertising on the Web. But lately it seems that the content to ad ratio isn’t in favor of us readers. So, Arc90 is taking matters into their own hands. They’ve created a simple bookmarklet (or a small piece of JavaScript that you run by clicking on a bookmark in your browser) called Readability.

In short, Readability removes ads from around the content. However, unlike its predecessors (at least the ones I’ve seen) Readability also formats the article that you want to read into a much more readable design on the fly. So, ad-blocker plus.

Source: Readability.
See also: The Arc90 Lab’s blog post with video.

Figuring out the proper dimensions to embed the Viddler player using JavaScript or PHP

October 19th, 2008

Pickles helps out. Circa January 2007.

Viddler’s player is, in my incredibly biased opinion, the best Flash video player available. Especially if you’re of the sort that likes to engage in conversation or put an incredible amount of metadata in your videos.

Using Viddler’s API for various projects has always resulted in some sort of learning experience for me. Not only in using APIs in general, but in how to best utilize Viddler’s platform, player, API, etc. etc. to get the best results. This helps to improve Viddler’s services, but also the Web at large.

One of the things I, and the entire team at Viddler, have learned is that most people want their player to perfectly wrap their video. That is, they’d like their video to be as chromeless as possible while retaining the conversational quality of the enhanced timeline that Viddler affords.

Knowing this we were excited when oEmbed, and its underlying methodology, allowed for this to happen programmatically.  This made it rather easy for developers, such as the team at Pownce, to use this service on Viddler to embed videos knowing only the URL assigned to it, in a way that shows off the quality of the player, and keeping the aspect ratio of the video that the publisher created. Perfect.

That one underlying and undocumented feature of oEmbed, that is, that the response from oEmbed was an embed code with the dimensions perfectly suited for your video based on a maximum width – is what I think will make the following JavaScript useful to developers using Viddler’s API.

The response from the API method of viddler.videos.getDetails includes the dimensions of the original video uploaded.  It does not, however, include the embed code of the proper dimensions given a specific width. You have to either figure that out own your own, use oEmbed (which is yet another call), or do the math yourself.

Included in this simple ZIP file is both the JavaScript and PHP functions you would need to determine the appropriate height for a video given a specific maximum width.  These files do not include the ability to use the oEmbed service. For that, you will need phpViddler or your own homegrown way to call that service.

Happy embedding!

FancyZoom, rewritten using Prototype

September 4th, 2008

Earlier this year Cabel Sasser, co-founder and designer at the incredible software house Panic, released a “Smooth Javascript for Image Zooming For Your Web Pages”. The implementation was simple enough, worked really well, and had the desired outcome – which was the ability to “zoom” into images in a smooth, very Mac-like way.

John Nunemaker, of Ordered List, decided that Cabel’s implementation of this effect could use some improvement.  Not only was Cabel’s “built from scratch”, which means to say that he didn’t take advantage of any of the Javascript libraries that so many web application developers already have included in their projects, but it also relied on AJAX to load the frame’s contents.

What that means exactly, is that Cabel’s implementation retrieved the data for the “pop up” window the moment you clicked, whereas John’s actually loads all of the “pop up” window’s data that he needs on the initial page load.  Obviously both of these methodologies have their place, their pros, and their cons, but it is all about choice, isn’t it?

The one thing I do like about John’s implementation over Cabel’s is that it allows for just about anything to be loaded in the “pop up” window rather than only images.  But this is only a small distinction in that Cabel’s code could be easily modified to allow the very same thing.

Now, if someone would take the time to simply port this to jQuery so that I don’t have to…

Source: FancyZoom meet Prototype.

The CSS Selector proposal explained for CSS noobs

May 6th, 2008

I am not well versed in CSS.  I can get around.  I can make a site look pretty good in Safari and horrible in Internet Explorer (look at this site in IE for a great example).  But I’m a hacker at best.  I fiddle with CSS until something looks right, I don’t follow conventions or standards, I don’t know what a box-model hack actually does, and I can’t even begin to tell you how to write browser specific CSS styles.

If you are a like me then Shaun Inman’s proposal for CSS Selectors will probably leave you with a furled brow.

Rather then being left standing in the dark I tried to wrap my head around what Shaun was trying to accomplish with his proposal.  I didn’t get.  But I wanted to.  So I setup a quick example page that illustrated my question.  I then hopped, skipped, and jumped over the Shaun’s Web site, and asked what I was missing.  Shaun, kindly and succinctly, replied.

The non-CSS guru explanation of the CSS Selector proposal

I can’t be sure that any of you reading this are in the same boat as I was.  In fact, I’m sitting here thinking at all of you are smarter than I am when it comes to these things, and that you’re not even reading this right now.  But if you are, and you’d like to understand this debate a little further, here is as simple an explanation as I can give.

A style can not be attributed to a parent element when a specific child element is present.

I don’t even know if I worded that correctly.  I’m pretty sure I didn’t.  So here is the long-winded version.  In Shaun’s first example he shows that an image, that is wrapped with a link, would have the same style as a normal link.  The problem is that, currently, CSS can not determine the differences between a normal link and a link that has an image within it.  It just isn’t “smart” enough.  That is, without the help of something that runs after the DOM has loaded fully like the awe-inspiring John Resig’s jQuery plugin.

Here is a quick explanation of what John Resig’s JavaScript is doing.  Once the page loads, jQuery parses through the entire HTML document, determines which links “has images” (see documentation here) and then you may run specific JavaScript functions on those links specifically.  You could, for example, add classes to those links dynamically with jQuery, rather than mucking up your code with classes inline.

Shaun’s proposal is to help make CSS, and browsers, “smart” enough to determine when styles should be attributed to links and when not to be attributed to links that contain images.  This was only his first example, Shaun gives others.

I really hope I did an okay job explaining this for those of you that, like me, didn’t understand it before pounding my head against my desk.

Addendum

Shaun has hit me back with a succinct definition that correctly uses the lingo.

“CSS allows you to style elements based on their parent/ancestor elements but it does not allow you to style a parent element based on the presence of a descendant element.”

You can look backwards, but you can’t look forwards.  Thanks Shaun!

Timeframe, a better calendar

April 25th, 2008

Timeframe is “Click-draggable. Range-makeable. A better calendar.”, and is open-source.  It is thoroughly impressive, a great implementation, and works best in Safari!

Timeframe demo

The demonstration (pictured) is by far the best calendar “widget” I’ve seen in a browser.  One of my favorite things is the date range tools which is where Timeframe strived to excel and succeeded.  Not only can you enter in a date range by typing it in, which will then result in the same range being selected in the calendar view above, but you can also click, drag, and select the range within the calendar view itself.

There are some desktop application calendars that pale in comparison to Timeframe.  iPhoto is the first example that comes to my mind – you can’t even select a date range in iPhoto!  Anyways.  Give Timeframe a spin and if you’re a developer, start putting this into your applications pronto.

Source: Timeframe.
Via: John Gruber’s linked list. 

Some new Viddler things

February 1st, 2007

There is a ton of hustle and bustle on the part of the Viddler team, and some of the forthcoming things are by far the most exciting releases Viddler has done to-date.

But, instead of focusing on what has yet-to-come, I wanted to point y’all towards a few things that have already been done.

The flash player and buffering technology behind-the-scenes is constantly being refined. If I remember correctly I’ve been through well over 12 iterations of the player (thought it appears the same as the day I first saw it) in my short time using Viddler. Obviously the better your bandwidth the better the experience, but for the quality of video that Viddler is capable of serving I can not believe how responsive their player is – and it continues to get better. A little birdy has told me to watch for some updates to the player in the near future that will separate the men from the boys. I think updates like this show that Viddler is dedicated to making the best possible experience, even if you do not know they are making the changes.

Though most video bloggers rely on their own systems of content distribution, and they should, there is no reason that they can’t take advantage of Viddler’s superior player for the audience that enjoys viewing their video in their browser and interacting with the community. Having the best of both worlds is very possible and we’ve taken the time to document the process as well as provide an overview and demo video. Obviously Viddler has some improvements to make to become video blogger’s one-stop-shop but they definitely are moving in the right direction.

Listen up video bloggers. Viddler is the place that you need to invest your time and effort into if you are looking to use a really great flash player and community service in conjunction with your downloadable and distributable file formats. I foresee many video blog archives being time tagged and searchable like ever before.

Something that has been mentioned before on Viddler is the ability to switch videos inline without refreshing the page. This is going to be extremely powerful for people who have multiple episodes in a single interface (especially as people start using the yet-to-be-released API, shhhh). We’re refining this process too as you can see from the latest featured videos post. More on this soon.

I am hoping to talk less and use more Viddler on my site soon. If you are remotely interested in this stuff, I’d suggest subscribing to the Viddler Blog. That is where all the juicy announcements will be happening.

[tags]viddler, video sharing, video blogging, flash, javascript, api[/tags]
[slug]viddler-new0206[/slug]