-prefrix-free

October 30th, 2012 by Adrian

Following on from my previous post regarding CSS vendor prefixes, I thought I would also highlight Lea Verou‘s project -prefix-free. This is a small JavaScript file that dynamically updates your CSS to include the vendor prefixes for you (ie. you don’t need to write any vendor prefixes in your CSS code.

CodePen has the option to use -prefix-free by clicking on the cog icon in the top-right of the CSS panel. You’ll then see a checkbox called ‘Prefix free’.

Posted in CSS, CSS3, HTML, HTML5, Javascript | No Comments »

Prefixr

October 30th, 2012 by Adrian

Today I came across Prefixr by Jeffrey Way from NetTuts. This is a pretty nifty online utility that goes through your CSS code and generates all the vendor prefixes for you. Pretty handy.

There are also a whole bunch of plugins available for your code editor of choice. For example, Sublime Text 2, Notepad++, TextMate, Espresso, Coda.

A similar tool to this is CSS3 Maximizer, but this doesn’t seem to do animation keyframes like Prefixr does.

Posted in CSS, CSS3, HTML, HTML5 | No Comments »

HTML, CSS & JS Online Code Editors/Playgrounds

October 10th, 2012 by Adrian

Over the last year or so there has been increase in the number of online HTML, CSS & JS editors. These are usually intended to demo small snippets of code that can be saved and shared. The feature sets of each service differ slightly, so you may need to try a few before you find the one that suits your specific requirements. Here are a few to get you started (with the most popular/fully-featured near the top). Many of these are based on CodeMirror or ACE.


jsFiddle – This is probably the most popular of these type of tools. It is pretty comprehensive and allows you to save and share your code. It includes HTML, CSS and JavaScript. You can choose from a wide range of pre-defined JavaScript frameworks, and you can also link to your own if it is not listed. It supports SCSS (Sass 3) and CoffeeScript if you are into those. You can choose from a variety of DTDs and modify the <body> tag (if needed). It has buttons for tidying up your code and JSLint support is included. The documentation is pretty comprehensive and the UI is nice and clean and easy to use. There is no code completion or code hinting as you type and your code doesn’t automatically run (you have to click the ‘Run’ button, or use the keyboard shortcut, to see your results). jsFiddle’s Twitter account is here.


JS Bin – This was created by Remy Sharp and is gaining in popularity. By default it has shortcuts to a huge list of JavaScript libraries, which you can include in your code. It supports many different flavours of HTML, CSS and JavaScript meta-languages (templating) like Markdown, Jade, LESS, Stylus, CoffeeScript, Processing, Traceur and TypeScript (Zen Coding is also supported). It has in in-built Console panel and the Output panel is automatically updated as you type. It automatically saves your code and there are a variety of sharing options. JavaScript error checking is provided via JSHint. A nice simple and clean tool, but again, no code completion or code hinting. A couple of great features it does have though is called Codecast (which enables people to watch as you type) and and Remote Rendering (which can be used to view your output on multiple devices in realtime). The documentation and help is pretty good too and the editor can be customised in great detail. Remy has done a fantastic job with this and he is always adding new and improved features. Follow JS Bin on Twitter.


Codepen – This tool was co-created by Mr CSS-Tricks (Chris Coyier) himself. It has a nice clean and well presented UI and the homepage is great for seeing other people’s demos (picked by the staff, or ranked as ‘popular’ or ‘recent’). The sharing and embedding options are good and forking other people’s projects is really easy (you can also see various Stats and Comments too). You can choose from a selection of colour schemes for the code editor (and select from three different fonts). Like jsFiddle and JS Bin, there is support for a variety of templating tools like HAML, Markdown, Slim, LESS, SCSS, SASS and CoffeeScript. It has built-in support for CSS Normalize, CSS Reset-prefix-free and Modernizr, and shortcuts to the latest versions of a few of the most popular JavaScript libraries. I think the strongest feature of this site is the way other people’s demos are showcased and easily accessible. This seems to be where all the cool kids hang out!


Dabblet – This tool was created by the very talented Lea Verou (who now works for the W3C), (check out her ‘Projects‘ page). This tool is focused on HTML and CSS (not JavaScript) and provides syntax highlighting and realtime updates. I particularly like the popup panels for CSS colors, gradients,  pixel dimensions, degrees and seconds. Plus the easy slider to increase the font size of the text in your code editor is handy. It has support for -prefix-free built in (it was created by Lea too) and is tightly integrated with github:gist. dabblet itself is open source and made available on github.


HTML5 Rocks Playground – This playground is really intended to show predefined examples of HTML5 code. You can’t use it to write your own snippets that can be saved and shared. But, for seeing how to do things (by the experts) in HTML, CSS, JavaScript this site is really great. Worth bookmarking.

jsdo.it

jsdo.it is a Japanese online playground that has some very talented individuals using it. It is the sister site to the Flash AS3 online playground wonderfl. It pushes other peoples creations to the homepage (which is good for inspiration) and allows you to fork their code and modify it as you like. There are categories too (such as Application, User Interface, CSS, Game etc) which is useful. You can ‘Fav’ other peoples creations and you can ‘Follow’ them too (like you can on Codepen).


Tinkerbin – This editor has the basic features (separate panels for HTML, CSS, JavaScript and Output, but not resizable by dragging) and support for HAML, SCSS, SASS, LESS and CoffeeScript. You can save your snippets (each save is assigned it’s own unique short URL which you can pass on to other people) but it is pretty limited and doesn’t have some of the advanced features that jsFiddle, JS Bin and Codepen have.


Fiddle Salad – With this editor, you choose your coding style up-front. You are presented with the options of HTML (or HAML, Zen Coding, Markdown, CoffeeCup, Jade), CSS (or LESS, SCSS, SASS, Stylus), JavaScript (or CoffeeScript, Python, Roy), and then you hit the ‘Go’ button to start. The interface looks pretty busy (and not as clean as some of the other tolls listed above), but it does include a handy ‘Documentation’ panel which provides you with links to W3C’s CSS and HTML documentation, as well as jQuery (and the templating engines mentioned). Also, all the UI panels can be moved and resized which is pretty handy. Once you dig a little deeper you’ll realise that a lot of time and effort has gone into making this quite a fully featured tool. It has several different frameworks and libraries for you to choose from and select for import. It also has a number of ‘Tools’ such as validation and beautify tools (though some of these are just links to external websites). One thing that this has that some of the other tools don’t is code completion and code hinting (very useful in CSS). Overall I think this tool shows promise, but at the time of writing it doesn’t quite have the polish of jsFiddleJS Bin or Codepen.


ztxt – This is open source and available on github (thanks to Zevan Rosser). There is not a hosted version of this, the intention is that you download a copy of ztxt and then either run it locally using MAMP (or WAMP), or you host it on your own live webserver. I like the way that it can be used locally and allows access to your local filesystem. More information on ztxt can be seen on YouTube here.


Tinker – This is fairly bare-bones, but it does have a clean UI (with draggable editing areas) and offers syntax highlighting and saving (to a unique short URL). Clutter-free and to the point. It is open source and available to download from github (thanks to Chiel Kunkels).


CSS Desk – Created by Josh Pyles, this editor is for HTML and CSS only (no separate JavaScript). It has syntax highlighting, line numbers and realtime output. I like the fact that it allows you to easily save your edit out as a downloadable HTML file. You can save your snippet to a unique short URL for sharing. Minimal, but functional for CSS demos.


Liveweave – Created by Amit Sen, this tool requires you to have all your CSS and JavaScript in the HTML page (there is not separate panels like the other editors). It allows you to save your page as a downloadable HTML file which is handy. But for me, the killer feature (which most of the other editors don’t have) is auto-completion and code completion, a very useful addition (who can possibly remember all those CSS attributes and values?)


Cssizer – This tool (built by David Morrow) is also designed for HTML and CSS (not JavaScript) and has a limited feature set. However it does have syntax highlighting, realtime preview, and saving of snippets to a unique short URL (which get saved for you if you login using Twitter). You can also validate your code with an automated link to W3C. It is also open source and available to download from github.


pastebin.me – Created by Dale Harvey as a personal project, this tool is pretty bare-bones. A single editing panel with a non-realtime output panel. No syntax highlighting or features that the other editor have. It is available to download from github.


Html5Snippet – This is quite a slick editor with a number of saving and sharing features. I like the way you can download your code as separate files (.html .css .js) in a ZIP file. The editor also includes a huge list of predefined JavaScript frameworks and libraries. You can follow Html5Snippet on Twitter here.


Google Code Playground – This is similar to the HTML5 Rocks Playground, in that it is intended to demonstrate pre-written chunks of code (not as an editor for you to create your own and save) that you can tweak to see the results. The great thing about this is that it is chock-full of fantastic examples of accessing Google APIs, ranging from Google Translate and Google Calendar, through to Google Search, Maps and YouTube. If you are planning on using a Google API, it is worth checking here first to see if there is an example that will help. The link to the documentation is context sensitive, depending on what type of example you are viewing at the time.


TheCodePlayer – At the time of writing this site doesn’t allow you to create your own snippets and save them. But it does allow to play back the creation of their example HTML, CSS and JavaScript examples, which is very nice. It looks like in the future they are planning on opening the editor up for public use, to allow you to contribute your examples. I’d say ‘Keep an eye on this one’. Follow their Twitter stream here.

That pretty much wraps it up for now. I’m sure there are a bunch of other ones I’ve missed off this list (eg. Plunker), let me know in the comments if there is one I should take a look at. Enjoy!

Posted in CSS, HTML, HTML5, Javascript, Sample Code, Tool | 1 Comment »

swffit – Smart Flash Resize Script

February 5th, 2010 by Adrian

I remember stumbling across swffit ages ago, but never really gave it much thought at the time. However, a little while ago I put a small Flash site together (www.beauseat.com) for a friend, and it was scaled to fill the browser window. But when you resized the browser down to a small size you lost some of the navigation at the bottom. But today I re-found swffit, and it was just what I needed. It is really easy to use and just works!

Check out the swffit site and Google Code site

Thanks Miller Medeiros

Posted in Flash, HTML | 6 Comments »

What’s What on Adobe Labs (at a glance)

July 23rd, 2009 by Adrian

Adobe Labs

I find it is not very easy on Adobe Labs to quickly and easily see what all the current projects are. Just seeing a list of names like Durango and JamJar doesn’t really tell you very much at a glance, and it takes a little while to click through each one in turn to find out what they all are. So here is a list of all the current projects and a short summary (copied and pasted) from their respective pages.

Acrobat.com Presentations

A better way to create, edit, and share presentations with others online. Built on the Adobe® Flash® platform, Acrobat.com Presentations looks and behaves like a desktop presentation application but operates inside a web browser.

Acrobat.com Tables

a better way to work with others on data and information — such as task lists, schedules, contacts, sales numbers, etc. — that are typically created and shared in spreadsheets or simple databases. Built on the Adobe® Flash® Platform, Acrobat.com Tables looks and behaves like a desktop application but operates inside a web browser.

Alchemy

Alchemy is a research project that allows users to compile C and C++ code that is targeted to run on the open source ActionScript Virtual Machine (AVM2).

Blueprint

Blueprint is a plugin for Adobe® Flex® Builder™ 3 and Adobe Flash® Builder™ 4 that allows users to query for Adobe Flex and Adobe Flash code examples found on the Web directly inside of the development environment.

BrowserLab

BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web.

ColdFusion 9

The ColdFusion 9 public beta release unveils three main themes: unrivaled developer productivity, deep enterprise integration and simple work flow with Adobe Flash® Builder™, Adobe AIR® and AJAX to create expressive applications.

ColdFusion Builder

Adobe ColdFusion Builder is an Eclipse based IDE for ColdFusion development that is deeply integrated with ColdFusion 9. Now you can manage your entire ColdFusion development cycle from concept to production all in one easy to use tool.

Configurator

Configurator is an open source utility that enables the easy creation of panels (palettes) for use in Adobe Photoshop® CS4. Specifically, Configurator makes it easy to drag and drop tools, menu items, scripts, actions, and other objects into a panel design, then export the results for use inside Photoshop. These panels leverage the support for Adobe Flash® built into Photoshop, making it possible to drag and drop audio, video, images, and even other SWF files into a panel design.

Distributable Player Solution

The distributable player solution enables developers to create rich applications for the latest version of Adobe® Flash Lite® and directly distribute their content to millions of open OS smartphones, providing a better on-device user experience.

Durango

Durango is a framework that allows developers to build Adobe® AIR™ applications that can be customized by end-users. Durango allows developers, designers and end-users to easily mashup independent components to create new applications or extend existing Durango-enabled applications. These “mashable” components can be visual or non-visual (e.g., web services). Designers and developers can rapidly create prototype applications and then generate Adobe Flex® MXML source projects for further development. End-users can take parts of their favorite applications and bring them together in new ways.

Flash Builder 4

Welcome to the Adobe® Flash® Builder™ 4 (formerly Flex Builder) public beta release on Adobe Labs. The first thing that you’ve already noticed is that we are renaming Flex Builder to Flash Builder. This name change will create a clear distinction between the free open-source Flex framework and the commercial IDE.

Flash Catalyst

Adobe® Flash® Catalyst™ is a new professional interaction design tool for rapidly creating user interfaces without coding. Transform artwork created in Adobe Photoshop® and Adobe Illustrator® into functional user interfaces. Create interactive prototypes with the ability to leverage them in the final product. Publish a finished project as a SWF file ready for distribution. Work more efficiently with developers who use Adobe Flash Builder™ 4 to create rich Internet applications (RIAs). Designers use Flash Catalyst to create the functional user experience then provide the project file to developers who use Flash Builder to add functionality and integrate with servers and services.

Flash Collaboration Service

Adobe Flash Collaboration Service is a Platform as a Service that allows Flex developers to easily add real-time social capabilities into their RIA (rich Internet applications). Comprised of both Flex-based client components and a hosted services infrastructure, Adobe Flash Collaboration Service allows you to build real-time, multi-user applications with Flex in less time than ever before. And because Acrobat.com hosts the service, issues like deployment, maintenance, and scalability are taken care of for you.

Flash Player 10

Adobe® Flash® Player 10, code-named “Astro,” introduces new expressive features and visual performance improvements that allow interactive designers and developers to build the richest and most immersive Web experiences.  These new capabilities also empower the community to extend Flash Player and to take creativity and interactivity to a new level.

Flex Builder 3 for Linux

Flex Builder Linux is a plugin-only version of the Flex Builder that you can use to build Flex applications on Linux. Feedback from previous alpha releases has been very positive, and we are pleased to continue offering this version.

Flex 4 SDK

Welcome to the Adobe Flex® 4 SDK beta release on Adobe Labs (previously code named Gumbo). This release marks an expanded role for the Flex framework, now supporting both developers creating Flex applications and designers using Adobe® Flash® Catalyst™ to create interaction design.

Hub

Hub is a client Adobe® AIR® application that connects to Adobe LiveCycle® ES services for the purpose of generating PDFs or assembling different PDFs into packages.  It demonstrates how to connect a client desktop to LiveCycle ES services using Adobe Flex® Remoting. The drag-and-drop client interface allows the user to upload files, watch the progress and retrieve the content back to the desktop with a single gesture. Hub was developed in response to customer requests for a client connector to Adobe LiveCycle ES.

InContext Editing

Welcome to the free preview of Adobe InContext Editing, the first Adobe hosted service developed for web professionals. Adobe InContext Editing is an online service that allows designers to create, manage, and control editable web pages. Web designers can use Dreamweaver CS4 to easily create editable or repeating regions, specify editing options or define CSS styles made available to authors. Content editors and publishers can also use Adobe InContext Editing to update website content through their browser — without learning HTML, installing software, or compromising design integrity.

JamJar

We invite you to see for yourself the kind of interactive, visually attractive, and scalable rich internet application that can be developed using Flex 2 technologies. JamJar provides a private and persistent canvas for small groups to easily exchange digital content in order to Plan events, Exchange ideas, Manage projects, Centralize information and Share files and images.

knowhow

knowhow is a technology preview that delivers single-click, contextual access to relevant help information from a panel in Adobe® Creative Suite® 3 software. knowhow gives users access to a wide variety of information—basic tool descriptions and short cuts, Adobe Help content, as well as community-generated tutorials, tips, and techniques on the web.

LiveCycle Data Services 3

LiveCycle Data Services server makes it possible to easily integrate Flex with Java/J2EE based applications.

Mars Project

The Mars Project is an XML-friendly representation for PDF documents called PDFXML. PDF, an ISO standard format, is the global standard for trusted, high fidelity electronic documentation. The PDFXML file format incorporates additional industry standards such as SVG, PNG, JPG, JPG2000, OpenType, Xpath and XML into ZIP-based document container. The PDFXML plug-ins enable creation and recognition of the PDFXML file format by Adobe Acrobat Professional and reading of PDFXML-format files by Adobe Reader software.

Photoshop.com Mobile Beta

the easiest way to upload, view, and share photos online from your Windows Mobile phone. Getting started is simple. All you need is a supported Windows Mobile® handset and a Photoshop.com membership. Available only to U.S. consumers as a free beta download.

Pixel Bender

The Adobe® Pixel Bender™ technology delivers a common image and video processing infrastructure which provides automatic runtime optimization on heterogeneous hardware. You can use the Pixel Bender kernel language to implement image processing algorithms (filters or effects) in a hardware-independent manner. The Pixel Bender graph language is an XML-based language for combining individual pixel-processing operations (kernels) into more complex Pixel Bender filters.

Spry framework for Ajax

The Spry framework for Ajax is a JavaScript library that provides easy-to-use yet powerful Ajax functionality that allows designers to build pages that provide a richer experience for their users. It is designed to take the complexity out of Ajax and allow designers to easily create Web 2.0 pages. The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. Spry also provides easy to build and style widgets, providing advanced page elements for end users.

Stratus

Adobe® Flash® Player 10 and Adobe AIR® 1.5 introduce a new communications protocol called the Real-Time Media Flow Protocol (RTMFP). The most important features of RTMFP include low latency, end-to-end peering capability, security and scalability. These properties make RTMFP especially well suited for developing real-time collaboration applications by not only providing superior user experience but also reducing cost for operators. In order to use RTMFP, Flash Player endpoints must connect to an RTMFP-capable server, such as the Stratus service. Stratus is a beta, hosted rendezvous service that aids establishing communications between Flash Player endpoints. Unlike Adobe Flash Media Server, Stratus does not support media relay, shared objects, scripting, etc. So by using Stratus, you can only develop applications where Flash Player endpoints are directly communicating with each other.

Text Layout Framework

Welcome to the beta release of the Text Layout Framework for Adobe® Flash® Player 10 and Adobe AIR® 1.5. The Text Layout Framework is an extensible library, built on the new text engine in Adobe Flash Player 10, which delivers advanced, easy-to-integrate typographic and text layout features for rich, sophisticated and innovative typography on the web. The framework is designed to be used with Adobe Flash CS4 Professional or Adobe Flex®, and is already included in the next version of Flex, code named Gumbo. Developers can use or extend existing components, or use the framework to create their own text components.

Wave

When a friend posts a status update or there’s new content on your favorite site, be the first to know.  Adobe® Wave™ software gets the information you care about right to your desktop.  Click on the Adobe Wave badge on a website you want to follow and you’re ready to go.  Best of all, you’re in control: you choose which sites can contact you.  If you’re no longer interested, turning it off is a click away — Adobe Wave does not share your email address with websites. With Adobe Wave, get all of your notifications through a single application. You don’t have to worry about downloading a separate notification application for each website. To find out more, click on a notification to take you to a browser pointing right where you want to go.  Built with Adobe AIR® technology that has been installed over 200 million times, Adobe Wave lets you see all your most recent alerts at a glance.

XMP Library for ActionScript

Welcome to the XMP Library for ActionScript v1.0 preview. Adobe® Extensible Metadata Platform (XMP) is a labeling technology that allows you to embed data about a file, known as metadata, into the file itself.  XMP is an open technology based on RDF and RDF/XML.

Posted in ActionScript 3.0, Adobe, AIR, Flash, Flash Catalyst, FlashLite, Flex, HTML, Mobile | 1 Comment »

Displaying alternate Flash movies using SWFObject

March 27th, 2008 by Adrian

I use SWFObject regularly to embed my SWFs in the HTML page. But was not sure how to display alternate SWFs depending on the Flash Player version installed on the end user’s machine. However, I have just come across a blog entry by David Stiller that clearly explains how to do it.

http://www.quip.net/blog/2008/flash/using-swfobject-for-more

Posted in Flash, HTML | No Comments »

Special Characters Cheat Sheet

February 26th, 2008 by Adrian

Special Characters Cheat Sheet

I quite often find myself needing to find codes for special characters and then having to track down a website that lists the type of code I am after. Sometimes I need Unicode, other times I need ASCII, and other time I need URL Encoded values. Things like a list of key codes and escape sequences are also handy to have. So, to make mine (and your) life easier, I have put together a Special Characters Cheat Sheet (PDF) that lists all the characters from 0 – 255 (ASCII) and their other corresponding code values.

You can download the Special Characters Cheat Sheet (PDF) here

Here are some useful links to the Adobe Flash LiveDocs

Here is a little Flash 8 (AS2) movie that displays charCodeAt, escape, getCode, getAscii and Key.CONST

Flash 8 AS2 Source Code here

In AS3 there are a few more event properties we can access such as ctrlKey, shiftKey and altKey. There are also many more static constants which are mapped to certain keys on the keyboard. Here is the Flash 9 AS3 version of the above movie.

Flash 9 AS3 Source Code here

UPDATE 20/03/09: Lee Brimlow has just made me aware of a useful online tool for converting between Unicode and other representations such as Hex, CSS Escape Sequences and Percent Encoding for URIs. The tool is called Unicode Code Converter v6 and has been written by Richard Ishida.

UPDATE 28/10/10: Another really useful tool I have found is from Till Schneidereit and it lets you convert text in to Unicode ranges (and vica-versa) which can be used in Flex Font Embed meta tags.

UPDATE 09/11/11: Here is another Unicode Range Generator created by Gen Ichino

Posted in Actionscript 1.0 & 2.0, ActionScript 3.0, Flash, HTML | 2 Comments »