Categories
Support

Adobe Edge noConflict fix

Recently our designer here at Skynet Solutions, Inc. started playing around with Adobe Edge, which helps create animation using HTML5, CSS3, and JavaScript. He sent over some files and asked me if I could get them to work on our website. The request sounded simple enough. However, I quickly ran into issues since Edge uses jQuery and Skynet has a strong history of using a different library, Mootools. I realized this and put it in noConflict mode, yet it still didn’t work. Even though Edge was passing the noConflict variable jQuery, it was not using it the entire time within itself; often the variable it renamed it to was overwritten by another variable or function.

The attached file can overwrite the original folder “edge_includes.” I left the original files for reference which have a appended underscore before the file names.

You will still need to do slight editing on your project file that it provided which is rather simple. At the bottom of the file I started with:

/**
 * Adobe Edge DOM Ready Event Handler
 */
$(window).ready(function() {
 $.Edge.initialize(symbols);
});
/**
 * Adobe Edge Timeline Launch
 */
$(window).load(function() {
  $.Edge.play();
});

I simply added the noConflict() function and changed the four instances of “$” to “jQuery”.

/**
 * Adobe Edge DOM Ready Event Handler
 */
jQuery.noConflict();
jQuery(window).ready(function() {
  jQuery.Edge.initialize(symbols);
});
/**
 * Adobe Edge Timeline Launch
 */
jQuery(window).load(function() {
  jQuery.Edge.play();
});

Download “edge_includes” files.

(Source: Skynet Solutions)

By Blaine Schmeisser

Categories
Design

Staying Above Water

Staying on top of web trends, design trends, and social trends can seem very daunting at times, but keeping your head above water on these subjects is essential for web/graphic designers. Software is also something to be mindful of in this profession. Knowing the lifespan or progression of the software programs and tools that you use can help you prepare and be ready for the future.

Recently there has been a lot of discussion over the use or lack of use of programs such as any web-based media player, but mainly Flash. Debating these programs’ value or usefulness is determined by your love for the software and how it may or may not work for your particular application.

The latest trend is mobile access, and the main push is Apple. Like it or not, Apple’s decision to not support Flash has caused much debate. Regardless of your personal views on the subject, the fact remains that Flash will be phased out or replaced; even Adobe realizes this.

Earlier this month, Adobe released Edge as the successor to Flash. It is my impression that this program will replace Flash, however that is only speculation on my part. Edge will allow all current browsers to display a video or animation without the need to have a ‘player’ or more commonly, the need to update your player. Adobe Edge uses CSS3 and ‘HTML5’ to be written for you as the development is happening in their WYSIWYG. It is currently available as a beta download on their site. I strongly suggest that all current designers be aware of and download this application.

(Source: Skynet Solutions)

By Clint Smith

Categories
Support

Developer Tools

Every developer has a unique set of tools he or she uses to help develop web applications. The main tools anybody will use are browser extensions, although there are still plenty of tools in the clouds that can be used to help developers. Here are some of them:

Browser Tools

Web Developer Toolbar

FirefoxChrome

Not quite as common as Firebug but just as useful. The Chrome version is not quite as extensive due to the API restrictions. There are plenty of tools that help you debug JavaScript applications, modify and view cookies, measure parts of a page without throwing it into Photoshop, re-size the page to specific sizes for checking compatibility, shortcut links to validate all the elements on your page, and much more.

Firebug

Firefox

This is one of the most common extensions that almost every developer has. It has essential tools for checking and modifying the generated HTML, debugging scripts, and viewing detailed errors. There are plenty of tutorials to help you get familiar with this tool. Chrome has an existing alternative to Firebug that is already installed.

Spell Checker

Firefox

Modern browsers already have a spell check for things you write into input fields or text areas. I also find it useful to Spell Check full pages, such as pages I dynamically created. I simply visit all the pages on the site to check for bad links and/or layout errors, then click a button to make sure every thing is spelled correctly.

DownloadThemAll!

Firefox

Simply click the button and download as many elements on the page you want. I’ve used this a few times to download documentation that was only available on the web. Doing this allows me to not rely on a website for documentation, since it could cease to exist, thus causing the documentation to no longer be available.

Tamper Data

Firefox

This tool allows a user to see all data submitted in an HTTP request, which is useful for debugging JavaScript applications that would require a lot of HTML to replicate a form submission. Unfortunately, Chrome does not have an equal extension for this. A similar item exists in their already installed developer tools, however it’s read-only. Firebug also has a similar read-only tool.

Online Tools

Google Libraries

Often new projects don’t always have the libraries you need yet. This tool allows you to hotlink to lots of JavaScript libraries and frameworks. Some developers choose to never host libraries and just use this for its ease of use and shared bandwidth cost.

JsFiddle

This is a very handy tool for sharing JavaScript. You pick a library, add some JavaScript, CSS, and HTML and see a live preview in front of you. If you are collaborating with a co-worker, you can send him a link to it, then he can make edits and send you a new link.

Web-Safe Fonts

Typically a designer will tell you which fonts to use when slicing their PSD’s, however there are plenty of instances when you could be unsure about a font. The designer may not have used a web-safe font. This tool lets you see a few web-safe fonts and pick from the list, making it faster than waiting for your designer to get back to you.

CSS Lint

This tool is more for telling you what you did wrong. There are a few items I disagree on, but I’ll spare you the drama. It does point out a lot of obvious items you could be improving.

CSS Compressor

I like to format my code as much as I can when going live with my applications, and CSS is no exception. Input your CSS into this tool, select a few options, and you will have compressed CSS code you can use for live sites.

JavaScript Beautifier

This tool is one of two formatting tools that deal directly with decompression. It will take messy code and make it easier for you to read.

JavaScript Compressor

This does the opposite of the one listed above by compressing all of your JavaScript, which I find helpful. When going live with applications, it’s always best to compress your JavaScript for faster loading times.

JSON Formatter

In lots of the applications we create, we make AJAX requests sending JSON back and forth. The downfall is JSON needs to be sent without formatting, which helps you read it a bit better and tells you if it’s valid or not. You can compress and format JSON with this single tool.

Instant SQL Formatter

Often, you may output SQL that is dynamically generated so you can test it. This happens a lot when debugging older applications. The downfall is longer queries are more difficult to read unless formatted.

(Source: Skynet Solutions)

By Blaine Schmeisser