Results tagged “javascript”

A couple of weeks ago I commented upon Apple's decision to not support Flash on any of their mobile devices:

I would prefer to say "Flash is a hack," but I think Flash is too elegant to risk maligning it with such a word. Make no mistake though, as ubiquitous and well implemented that Flash is, it is just a shim, which evolved to address a major short coming on the web, mainly that the underlying specifications and browser creators could not adopt or drive adoption fast enough the technology to make animation and richer application development possible.

Today, Steve Jobs posted a letter detailing this same decision (a letter worth reading in full):

Flash was created during the PC era - for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards - all areas where Flash falls short.

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

I echo my sentiment again:

In just a few short years, when the gap Flash helped bridge is finally closed by well implemented and broadly adopted web standards, and the world of application development is expanded to include not just Objective-C and Flash programmers, but the entire world of HTML/CSS and Javascript programmers, hopefully a number of us will look back at this moment and say, "I can't believe I cared so much about this."

I know for many people, especially Adobe, the decision not to support Flash is an incredibly sensitive subject, but speaking as a web developer, I applaud them for taking a principaled stand in support of open web standards. The alternative, the reluctant support of an older and more obsolete technology to placate a dwindling group of laggards, can only saddle the entire web development industry with the burden of supporting a platform that is increasingly harder and more costly for us to support.

Need I remind web developers of the ire they feel when a client requires them to support Internet Explorer 6 and what it does to the products we build for them? Need I remind you of the hack after hack after hack we must implement and re-implement just to appease the CEO of a company who is too old and too lazy to upgrade their frack'n browser already?

Flash is the mobile and open web's IE6 and I am glad that a company with the market muscle to actually make a difference is taking a stand for what proponents of the open web have been saying for years.

Update:

Kottke chimes in:

Jobs sort of circles around the main issue which is, from my own perspective as heavy web user and web developer: though Flash may have been necessary in the past to provide functionality in the browser that wasn't possible using JS, HTML, and CSS, that is no longer the case. Those open web technologies have matured (or will in the near future) and can do most or even all of what is possible with Flash. For 95% of all cases, Flash is, or will soon be, obsolete because there is a better way to do it that's more accessible, more open, and more "web-like".

The coolest thing I know about right now is jQTouch, a jQuery framework for implementing mobile web apps. I first saw this at SXSW when its creator showed it off to a crowd that had just finished watching a demo of how to build iPhone apps in Objective-C. Which each step of his demo, the crowd in the room literally cheered as they saw how jaw-droppingly simple building slick iPhone apps just became.

Here is a recently released demo of some of the amazing things the relatively young jQTouch is capable of, which in this case is a fully HTML, CSS and Javascript powered version of the iPhone's iCal application.

So what makes this so smooth and seamless? Mainly that CSS3 is hardware accelerated on the iPhone making CSS and Javascript powered transitions and animations super smooth - just as smooth as any native application in fact.

So while you perhaps marvel at how amazing jQTouch is, let me bring this back to something that makes this framework so relevant in light of the recent hullabaloo associated with Apple's changes to its SDK Agreement which essentially forbids the use of flash enabled apps on the iPhone and iPad.

Flash is a Shim

I would prefer to say "Flash is a hack," but I think Flash is too elegant to risk maligning it with such a word. Make no mistake though, as ubiquitous and well implemented that Flash is, it is just a shim, which evolved to address a major short coming on the web, mainly that the underlying specifications and browser creators could not adopt or drive adoption fast enough the technology to make animation and richer application development possible.

Amazingly, Apple is poised to unwedge this shim that we have all become so unwittingly dependent upon. By refusing to put Flash on the iPhone and iPad they are going to force the market and technology developers who want to play in that market to learn and embrace the bleeding edge in web standards. They are going to do in just a few short years, what even the largest and most well intentioned companies like Google, in all of their open-sourcey-goodness, could never do: force market adoption of the technologies that will render Flash obsolete.

And thank god. The web has too many crutches like Flash, which solve a problem just well enough that they stifle developer communities from addressing problems at a lower level.

So while some express their ire at Apple for not supporting Flash, like my wife who just wants to play a damn Flash-powered movie on Hulu on her iPad, I applaud Apple for the courage it took to make what it must have known would be the unpopular decision it did. Because in just a few short years, when the gap Flash helped bridge is finally closed by well implemented and broadly adopted web standards, and the world of application development is expanded to include not just Objective-C and Flash programmers, but the entire world of HTML/CSS and Javascript programmers, hopefully a number of us will look back at this moment and say, "I can't believe I cared so much about this."

I have been doing a lot of work in jQuery as of late and stumbled across the popular jQuery plugin called "Thickbox" which works similarly to Lightbox, but is more fully featured.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

There were a couple of problems with the plugin though when I started using it. For one, the plugin has not been updated in a long time and was not compatible with the latest version of jQuery: 1.3.1. It also used a rather non-standard way of configuration and was completely non-extensible. In fact, it required users to edit CSS and Javascript files in order to point the library at the right images to use. That's no good at all because it makes it possible for a simple upgrade to break a site, granted in a minor way, but still.

No doubt the original author of the plugin has a million other things on his plate, so I thought I would chip in, upgrade the plugin, and contribute them back to the author and community, and if necessary take over maintenance of the plugin.

Download

• Thickbox 1.3-byrne
• Source

Documentation

Installation Instructions

1. Upload the thickbox files to your web server.

2. In your web page using thickbox, import the javascript like so:

   <script type="text/javascript" src="jquery.thickbox-byrne.js"></script>
   

3. In your web page, import the CSS like so:

   <link rel="stylesheet" href="thickbox.css" type="text/css" />
   

4. Read the rest of this documentation and initialize thickbox according to your needs.

Options/Settings

The following options can be used when initializing Thickbox.

• macFFBgHack - default: '../images/macFFBgHack.png'. A path to the image "macFFBgHack.png" on your web server.

• loadingImage - default: '../images/thickbox-loading.gif'. A path to the image "thickbox-loading.gif" on your web server.

• modal - boolean (true|false), default: false. Determines whether or not the dialog that appears is modal or not.

• iframe - boolean (true|false), default: false. Determines whether or not the dialog will be iframed content.

• inlineId - string, default: ''. Sets the DOM id that contains the content that will be displayed in the thickbox.

• width - default: 600. Sets the size (width obviously) of the thickbox.

• height - default: 400. Sets the size (height obviously) of the thickbox.

Usage

    $('a.thickbox').thickbox({
            macFFBgHack: 'images/macFFBgHack.png',
            loadingImage: 'images/thickbox-loading.gif'
    });

Demo

Click me

Changes between 1.3 and 1.3-byrne

The version described here is '1.3-byrne' which is a fork of the original Thickbox plugin versioned 1.3. Here is a list of the changes I have made in my fork:

• thickboxes can be instantiated on any element ID now. It is no longer hard-coded to $("a.thickbox").
• thickboxes are now configured using a more standard settings/options array.
• The plugin itself now utilizes more a more up-to-date coding standard for jQuery plugins.
• The plugin is now compatible with jQuery 1.3 and greater.

In yet another example of just how flexible Movable Type can be, I have assembled this simple tutorial which can help you make more compelling and interesting pop-ups for the images you insert into your blog posts. This simple recipe calls for the following ingredients:

• Movable Type 4.x
• The Assetylene Plugin installed - a plugin that let's you customize the HTML used when inserting an asset into a post
• jQuery installed
• The jQuery Lightbox Plugin installed

Instructions:

1. Install jQuery and the Lightbox jQuery Plugin into the HTML head of your blog. When you are finished, you should have HTML very similar to the following in between the <head> and </head> tags of every page of your web site.

   <script type="text/javascript" src="/js/jquery.min.js"></script>
   <script type="text/javascript" src="/js/jquery.lightbox-0.5.min.js"></script>
   <link rel="stylesheet" href="/css/jquery.lightbox-0.5.css" type="text/css" />
   

2. Insert the following Javascript code into the HTML head of your web site as well. This is the magic that will convert any inserted asset into a lightbox image:

   <script type="text/javascript">
   $(document).ready(function() { $('a[@rel*=lightbox]').lightBox(); });
   </script>
   

3. Create a template module called "Asset Insertion" per the instructions that come with Assetylene. Insert the following contents into that module:

   <mt:Asset id="$asset_id">
   <mt:if tag="AssetType" eq="image">
   <MTSetVarBlock name="width" trim="1"><MTAssetProperty property="image_width"></MTSetVarBlock>
   <mt:if name="width" gt="640">
   <mt:setvarblock name="href"><mt:AssetThumbnailURL width="640"></mt:setvarblock>
   </mt:if>
   <mt:unless name="href"><mt:setvarblock name="href"><mt:var name="a_href"></mt:setvarblock></mt:unless>
   <mt:var name="form_tag"><div style="text-align: <mt:var name="align">"><a rel="lightbox" href="<mt:var name="href">" title="<mt:var name="label" escape="html">"><mt:var name="img_tag"></a></div><mt:if name="enclose"></form></mt:if>
   <mt:else>
   <mt:var name="upload_html">
   </mt:if>
   </mt:Asset>
   

One of the things that nice about the sample code above is that it ensure that the image you link to is of a reasonable size, regardless of how large the original image is. In the event for example that you upload a 3MB 4000x6000 pixel image, the photo that will appear in the lightbox will be at most 640 pixels wide.

And that's it. Demo time.

Demo

The Contact Forms plugin was developed in partnership with iThemes, the creator of many excellent themes for Movable Type. The plugin is currently in active beta.

Contact forms are one of the most common and oldest ways in which sites have provided their visitors with a way to contact them. They are preferable to many because using a form obviates the need to disclose an email address. But where many solutions fall short is that the form itself only automates the sending of an email. They offer very little customization and are unable to store submitted form data for searching later.

The Contact Forms plugin for Movable Type provides a comprehensive solution for allowing site administrators to manage multiple ways for their site's visitor's to contact them and ask them questions them questions via a simple form submission. Contact form submissions are then stored in the database and tracked to ensure that every message is replied to, and to make all responses searchable.

Finally, site administrators are given a simple screen on which they can monitor incoming inquiries and respond to them in kind via email.

Download

• Download Contact Forms

Features

• Manage multiple contact forms and design the form elements you would like to appear in each.
• Drag-and-drop interface for managing the order of contact form field elements.
• Simple interface for managing, monitoring and replying to incoming inquiries.
• Ability to flag inquiries to receive special attention by others, or for later review.
• Quickly view the status of each inquiry through simple icons: unread, read and replied to.
• Embed contact forms in a template via a simple template tag, or retrieve from the plugin of the HTML yourself so that you drop it into a page, a post, or edit manually. Which ever is easier.
• View incoming inquiries and view a specific inquiry using a split pane view common to most email applications.

Plus, enjoy using the speedy and responsive plugin because of its extensive use of javascript and AJAX. That means you can be more productive because you will spend more time talking to your visitors and less time waiting for the application to load.

Pro Features

Users of Movable Type Pro will also have access to the following features:

• Assign a "Contact Form" custom field to pages and entries.

Designer Features

Designers can also make special use of this plugin by specifying in their themes the hooks and information necessary to render forms according their unique style and structure. This allows for theme developers to leverage this plugin to provide a seamless experience for their customers as well.

Developer Features

The Contact Form plugin comes with a standard set of form fields for rendering and displaying on the published blog for visitors to fill out. If developers would like to extend the types of form elements available, they can do so using a simple YAML based API.

Installation

To install this plugin follow the instructions found here:

http://tinyurl.com/easy-plugin-install

Support

For support, please visit Endevver's (where I work) dedicated support site.

I am the architect and author of virtually all of Movable Type's documentation online, and I continue to provide services to Six Apart in order to expand their efficacy. In addition, I have provided training services to some of Six Apart's largest customers and can instruct individuals and teams on a variety of topics. Training services can be provided on-site or off according to each client's needs and schedule.

Courses

User Training - This 1 day course will provide authors, editors and administrators with the basics of using and administering their Movable Type CMS. 
Subjects include: site administration, content creation, pages, user administration and permissioning, the basics of site modification and customization, an overview of 3rd party plugins, and a comprehensive review of the entire application and what it can and cannot do.

Designer Training - This 1 or 2 day course provides designers with the tools and knowledge they need to become adept at designing and customizing web sites powered by Movable Type. Students finishing this course will have a strong foundation of knowledge in Movable Type's templating language, template module caching, template sets and theme creation, commonly used third party plugins, and site/publishing optimization.

Developer Training - This 1 or 2 day course teaches any developer how to build plugins to extend the core Movable Type application. Subjects include the Movable Type Registry, working with Movable Type objects, building custom data types, callbacks and events, working with jQuery and Movable Type's Javascript, creating new screens in the Movable Type application, and much, much more.

Operations Training - This 1 day course teaches system administrators on how to host and operate Movable Type. Students leaving the course will have strong understanding of how to optimize Movable Type, the Movable Type Publish Queue, and how to build out Movable Type clusters and network architectures that scale.

Movable Type and Perl for PHP Developers - this 1 day course is designed for PHP developers wishing to learn the basics of Perl, but most importantly how to apply their knowledge of PHP to developing web sites in Movable Type.

Learning Perl - this 5 day course can take virtually any person with a very basic understanding of scripting/programming and teach them the basics of the Perl programming language. This course is ideal for companies wishing to teach engineering, QA and operations teams the basics of the language and to prepare them for other courses designed to teach them the basic of developing custom applications and plugins for Movable Type.

Custom Package - Clients are also free to build a custom curriculum based upon their specific needs.

Full course outlines available upon request.

Javascript

Byrne is an experienced Javascript developer and has developed large scale applications that depend entirely upon either YUI or jQuery. See also:

• Tag Control for YUI - A simple widget to make the addition and removal of tags simple and intuitive.


• Filter Control for YUI - A widget, or UI control that automates the creation of a progressive filtering mechanism.

PHP

In addition to being an experienced Perl developer, Byrne is also incredibly versed in PHP. He has developed numerous large scale web applications build upon PHP as well as numerous open source libraries in use by sites across the Internet. See also:

• Test Run - A large scale test case management solution written entirely in PHP serving thousands of customers.


• MyPHPGoogleCheckout - An open source library for integrating with Google Checkout.


• PHP Paginator - A simple open source library that makes generating links to pages within a result set almost too easy.


Perl

Byrne is an experienced Perl programmer having served as the lead developer of the popular SOAP::Lite toolkit, and continuing to be one of the Movable Type's leading plugin developers and contributors.

Since leaving Six Apart I have been having fun working on a number of projects I just never could find the time for while working there. Of course, I am even more privileged to be working with iThemes who have been subsidizing much of the work I am doing and who also share a philosophy of giving back to the Movable Type Community in the form of numerous open source plugins.

The most recent plugin I am working on utilizes jQuery a great deal, a javascript framework I have been using more and more frequently because of its intuitiveness, terseness and huge breadth of samples to draw from. But simply dropping it into the Movable Type application leaves many of the UI components its spawns feel bolted on as opposed to a seamlessly integrated component.

So I took a little time to develop a simple jQuery Dialog Theme that makes the dialogs jQuery spawns feel more like the traditional Movable Type dialog. The result is a dialog that looks and feels no different than what users are accustomed to, but that is faster, snappier and more feature rich, allowing users to resize and move the dialog around on the screen. Take a look:

To use the skin you need to include the skin's css (downloadable below) on your page. Then when you spawn the dialog you need to set the dialog's class to "mt" like so:

$(document).ready(function() {
  $("#replyDialog").dialog({
    modal: true,
    width: 660,
    height: 495,
    dialogClass: "mt",
    autoOpen: false,
    overlay: { opacity: 0.5, background: "black" }
  });
});

Download the skin from the link below, and everyone thank iThemes for their continued support of Movable Type and their gracious contributions to the Movable Type Open Source community!

• mt.dialog.css

The Custom Header Plugin for Movable Type makes it easy for users to upload and customize the header for their blog. It uses javascript and Ajax to make the customization process as seamless, intuitive and painless as possible. No knowledge of HTML or CSS is required, but the theme you are using must explicitly support this plugin. Here are a list of features the plugin has:

• Upload and crop a photo or image to use as a header
• Automatically restricts your cropped image to the proper aspect ratio for your header (according to your theme's design)
• If you make a slight mistake, easily re-crop the image to fine tune your header exactly the way you want it.
• Your cropped header and the original file you uploaded is managed for you within Movable Type's asset management framework.

Download

• Download 1.0

Installation

This plugin is installed just like any other Movable Type Plugin.

Screenshots

Usage

Users

To use the Custom Header plugin you must first apply a template set to your blog that supports the plugin. You will know if you plugin supports the Custom Header plugin because a "Custom Header" menu option will appear under your Design menu.

To customize your header, select "Custom Header" from the Design menu. Then select a photo to upload and click the "Upload" button. A dialog will automatically appear allowing you to crop the photo you upload. When the area has been selected that you want to use for your header, click the "Crop" button.

That's it. Your header is ready to be used. Republish your blog and your header will appear.

Template Sets Known to Support Custom Header

• iThemes Essence

Designers and Theme Developers

To add support for this plugin to your theme or template set, you will need to edit your template set's definition within its config.yaml file. The definition is simple and defines the max width and height for the header that your users will be allowed to upload. The definition looks like this:

custom_header:
  max_width: 780
  max_height: 125

This definition should be placed within your template set's config.yaml like so:

template_sets:
  awesome:
    base_path: templates
    label: 'My Awesome Blog Theme'
    custom_header:
      max_width: 780
      max_height: 125
    templates:
      archive:
        category_entry_listing:
          snip...

Once this is in place and a users installs this template set, then a "Custom Header" menu option will automatically appear under the Design menu.

Template Tags

<mt:CustomHeaderAsset>

This template tag puts the current blog's header asset into context. That means that because the Custom Header plugin utilizes Movable Type's asset management framework you can utilize all of MT's asset related template tags in order to display all manner of information about your header. For example, this tag will display an HTML image tag for your header:

<mt:CustomHeaderAsset>
   <img src="<mt:AssetURL>" 
         width="<mt:AssetProperty property="image_width">"
         height="<mt:AssetProperty property="image_height">>
</mt:CustomHeaderAsset>

If there is no custom header associated with the current blog then this tag will return an empty string.

<mt:CustomHeaderMaxWidth>

This template tag returns the maximum width allowed for the custom header defined by the current template set.

<mt:CustomHeaderMaxHeight>

This template tag returns the maximum height allowed for the custom header defined by the current template set.

<mt:AssetParent>

This template tag puts the parent asset, or the asset from which the current asset was derived, into context. This is useful for example if you want to display not only the header image, but the original image from which the header image was cropped. For example, the following template code will display a thumbnail of the original image for the current header image:

<mt:CustomHeaderImage>
  <mt:AssetParent>
    <mt:AssetThumbnail width="200">
  </mt:AssetParent>
</mt:CustomHeaderImage>

Known Issues

• This plugin currently only works for Themes and Template Sets that explicitly support the custom_header directive in their configuration files.
• Your blog must be republished after uploading a new header.

Finally, the Photo Gallery plugin has been upgraded to work with Movable Type 4.2. At first I considered just upgrading the photo gallery templates, but after such a long time, I figured my patient users deserve a little bit more than that. So, over the past several days I have devoted a great deal of time to revamping the Photo Gallery plugin to provide additional and enhanced functionality for managing your photos and albums. Here is a brief list of changes for the Photo Gallery 2.1 plugin for Movable Type:

Manage Photos Screen

View all your photos, or just the photos from a specific album. With this new screen, photo management is done as it should be: as a grid of thumbnails, and not a tabular list of entries.

Edit Photo Dialog

Edit your photos, their title, caption, tags, and more, in a simple dialog triggered by clicking the photo's name on the photo listing screen.

Upgraded Templates

Doug Bowman's templates have been upgraded to work with the latest and greatest of Movable Type 4.2, including: enhanced javascript, comment threading, and more.

Template and CSS Fixes Galore

The templates and stylesheets used in your galleries will now work with any photo regardless of aspect ratio.

Menu and Navigation Enhancements

When working within a blog powered by Photo Gallery, unnecessary menu items are removed in order to optimize your workflow and movement around the application.

Enhanced Upload Process

The upload dialog has been enhanced to let you more easily create new albums as you upload new photos.

The new version of Photo Gallery is not 100% complete yet. I still have a lot of testing to do, fixes to apply to the HTML version of Doug Bowman's templates, and the usual rigmarole of bug fixes. If you are interested in helping me out, feel free to download the latest version of Photo Gallery 2.1 and let me know what you think.

This past year at Six Apart has been one of the best years of my professional career. The Movable Type team has risen to meet amazing challenges, and has helped to spur a renaissance within the Movable Type community: never has our ProNet community been more active, and never have so many unique, useful and powerful plugins been created on such a regular basis. But what is especially interesting to me is to see how the Movable Type team has been increasingly involved with other innovative Internet technologies that Six Apart helps to build and promote - from OpenID, to memcached, to OpenSocial, to opening up the social graph, to perlite, to building innovative and beautiful applications for the iPhone, and so much more.

But this year for me has been all about Movable Type, and never have I been more proud of a product. We have achieved so much, but nothing says "success" more to me then your CEO telling you that we need to hire more people to work on Movable Type. That just happened. And it feels great.

So if you are someone who would like to help contribute to an amazing product, an amazing team, and an amazing company then we want to hear from you. Currently we have a number of positions open:

• JavaScript / AJAX / Client-Side Engineer
• Web Applications Software Engineer
• Outreach and Community Manager
• Online Marketing Manager

If you are interested in learning more about any of these positions - feel free to contact me directly.

• Tips For Customizing Templates With Comment Forms In MT4
  Tim provides a nice article on how users can customize their comment form templates in MT4. He clearly outlines the things users should pay close attention to, like how to properly trigger javascript onload events. Thank you Tim!
  (tags: movabletype templates commenting forms javascript customization)
• The Neiman Marcus Pop-Up Book
  I am not sure I would ever pay $125 for a pop up book... well, maybe this pop up book.
  (tags: design photography cool)
• Movable Type Template Tag Cookbook
  The start of a Movable Type Template tag cookbook - a listing of the various things you can accomplish using MT's robust templating language.
  (tags: movabletype templates tags recipes tips)

If you have used Amazon Web Services and took a look at the data coming back, it doesn't take long to figure out that Amazon has come of with some kind of system for referencing product images. But until Anil pointed out to me the post Abusing Amazon Images did I realize just how extensive and amazing their system is.

For a while I had been contemplating enhancements to BookQueueToo, a plugin for MovableType, that involved giving users the ability to review the books and items from Amazon in their queue. And one of the features I wanted to give users was the ability to include an image in the post and then to select from a few image transformations to make the post more visually exciting.

I kept putting off writing some lame ImageMagick wrapper that would do what I needed, until I "found" a post about Amazon's image URL-based manipulation protocol. Low and behold, everything I wanted was already there: dynamic image resizing, drop shadows, image blur, image rotation, not to mention a number of other features I personally don't have any use for, but are cool nonetheless

So, I immediately began writing a little javascript routine that would enable someone to hack images from Amazon's product catalog on the fly and began integrating it into the next version of BookQueueToo. This is what I came up with.

Live Demo