Full Frontal 2012 – Videos Online

December 6th, 2012 by Adrian

Full Frontal 2012

Videos from the Full Frontal conference (held at the beginning of November in Brighton) are now available to watch online. Remy Sharp has posted the videos to his YouTube account.

Check out the videos below …

  1. James Pearce - All you need is (angle bracket)body/(angle bracket)
  2. John Allsopp - Is HTML relevent in the era of web apps?
  3. Andrew Betts - Offline Rules
  4. Anna Debenham - Exploring the game console browser landscape
  5. Paul Kinlan - Building Web Apps of the future. Tomorrow, today and yesterday
  6. Rebecca Murphey - Writing Testable JavaScript
  7. Steven Wittens - Making things with Maths
  8. Chris Wilson - Tales of Suckage and Awesomeness

Posted in Conferences and Events, HTML5, Javascript, Presentation | No Comments »

Google Developers Live (GDL) Presents Make Web Magic

November 26th, 2012 by Adrian

Google Developers Live

Recently I’ve really been enjoying this video series by Google Developers Live. It’s called Make Web Magic, and it is a series of interviews with talented HTML5 developers who have released great work (usually on the Chrome Experiments site). To date there are three interviews on there. The host is Paul Irish (someone who knows what they are talking about) and it is a great way to pick up tips and tricks used by the experts. Check out the videos …


Make Web Magic | Part I – Michael Deal

Michael Deal

Michael’s website: http://mudcu.be


Make Web Magic | Part II – Mark Danks

Mark Danks

Mark’s website: http://www.danks.org/mark/


Make Web Magic | Part III – Hakim El Hattab

Hakim El Hattab

Hakim’s website: http://hakim.se

Posted in CSS3, Google, HTML5, Javascript, Presentation, Video, WebGL | No Comments »

Microsoft Build Conference – Videos Online

November 9th, 2012 by Adrian

Microsoft held their build conference a few days ago (October 30 – November 2) in Redmond. They have put some of the videos of those sessions online. Don’t be put off by the fact it is from Microsoft, there are some interesting things in there like HTML5 & CSS3, high-performance JavaScript and an introduction to TypeScript.

Day 1

Day 2

Day 3

Day 4

Posted in Conferences and Events, CSS3, HTML5, Javascript, Presentation, Video | No Comments »

Support Details – Browser/OS Specification

November 1st, 2012 by Adrian

Support Details – This is a handy site for clearly displaying important information about your  (or your clients) web browser and operating system.

It displays the following information:

  • Operating System
  • Web Browser
  • IP Address
  • Javascript enabled?
  • Cookies enabled?
  • Screen Resolution
  • Browser Size
  • Colour Depth
  • Flash Player Version

There is even a useful ‘Send Details’ feature which allows your client to automatically send their results back to you by email.

On a similar note, there is also a site called Codec Detect, which video and audio codecs their browser supports.

Posted in HTML5, Javascript, Video | 2 Comments »

PxLoader – A JavaScript Preloader

November 1st, 2012 by Adrian

This morning I thought I’d blog about PxLoader. This is a handy JavaScript library for handling the loading of files (eg. Images, Sounds, etc) and monitoring their progress. It was created by Pixel Lab, the people who made the HTML5 version of Cut the Rope. It looks pretty straight forward to use and the website has some nice clear examples and documentation.

NOTE: This is different to a JavaScript module loader such as RequireJS, which handles the dependancies of JavaScript modules.

A good alternative to this is PreloadJS, which is part of the CreateJS suite of tools (also available separately).

Or you can make your own asset loader.

Posted in Canvas, CreateJS, EaselJS, HTML5, Javascript | No Comments »

microjs – A search tool for JavaScript micro-frameworks

October 31st, 2012 by Adrian

microjs is an online tool by Thomas Fuchs for finding JavaScript micro-frameworks. Search by selecting what it is you are trying to do (eg. CSS animation or feature/browser detection) and the list of micro-frameworks will be filtered for you. All the frameworks are 5kB or less (the only exception to this is Backbone which comes in at 5.5kB). It is not a complete list by any means, but it has a lot of the popular ones and it is a great way to discover some new ones you may not be aware of. Worth a bookmark.

Posted in CSS3, HTML5, Javascript | No Comments »

-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 »

CodeKen 2012 – Online Conference

October 18th, 2012 by Adrian

CodeKen 2012 is an online conference happening on Tuesday 6th November 2012 via Google Hangouts On Air. The speakers include Seb Lee-Delisle talking about his PixelPhones project and Estelle Weyl talking about mobile web development. The schedule can be seen here. The schedule mentions Day 1 and Day 2, but elsewhere on the site it says it is a one day event, so I’m not sure which it is. Anyway, go ahead and register, so that you are notified about the start nearer the time.

Posted in Conferences and Events, CSS, Generative Art, HTML5, Mobile, OpenFrameworks, Physical Computing | No Comments »

Web Platform Docs

October 18th, 2012 by Adrian

Recently a new community initiative was created by the W3C called the Web Platform. The idea is that it will become the ‘go to’ resource for documentation relating to open web technologies. This is supported by a number of large high-profile companies such as Google, Apple (though not listed on the homepage), Microsoft, Adobe, Facebook, HP, Nokia, Mozilla and Opera.

It is currently in Alpha, but in the future it “will have accurate, up-to-date, comprehensive references and tutorials for every part of client-side development and design, with quirks and bugs revealed and explained.

Let’s just hope the content it is not as dry and verbose as the original W3C standards documentation.

Posted in CSS, HTML5, Javascript, Tutorials | No Comments »

The Graphical Web

October 17th, 2012 by Adrian

Last month there was a conference held in Zurich, Switzerland at the Institute of Cartography and Geoinformation called The Graphical Web. It used to be called SVG Open, but this time the name change is to reflect the wider graphical web technologies (SVG, Canvas, CSS transitions, CSS transforms, tooling etc).

You can see what the schedule was here. One of my favourite speakers was there, Joshua Davis.

The main reason for this blog post is to highlight the fact that they recorded all the sessions and have put them online for free. There are some really interesting sessions here. Check them out below …

Here is a full list of the sessions …

Enjoy!

Posted in Conferences and Events, CSS, Design, Generative Art, HTML5, Infographics, Presentation, SVG | 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 »

Adobe Edge Web Fonts – Preview

October 3rd, 2012 by Adrian

Sample of the acme font

I have put together a webpage that previews all the (currently available) Adobe Edge Web Fonts.

You can view ALL the fonts here.

Note: The JavaScript may take a few seconds to load.

Posted in Adobe, Edge Animate, Fonts, HTML5, Javascript | No Comments »

Adobe Edge – Preview 6 now available

May 14th, 2012 by Adrian

Adobe Edge logo

On Friday Adobe released Edge (Preview 6) on Adobe Labs. This latest version includes the following updates:

  • Built-in lessons: First-timers and newbies, rejoice! We have six new tutorials built right into Edge, to help new users get familiar with the basics.
  • Coding: A new code panel gives you a complete view of the actions code in your project, and the code editor has a new full code mode.
  • Publishing: Easily import your projects into Adobe’s Digital Publishing Suite with InDesign CS6, or Apple iBooks author. We also have a new Static HTML Markup feature for SEO benefits, and Google Chrome Frame support for better fidelity on older browsers.
  • Symbols: You can now copy/paste and import/export symbols from one project to another.
  • Languages: Edge is now available in French, German, Japanese, Italian, and Spanish. Just go to the ‘Help’ menu to change it.
  • Other cool stuff: The Preview in Browser function is now compatible with Adobe Shadow, auto-keyframe mode has been improved, editable time codes are back, and so much more to make Edge more efficient.

Download the latest version here.

Here are some useful links to help get you up-to-speed …

Adobe Edge Preview Microsite
http://edge.adobe.com/whatisedge.html

Edge Team Blog
http://blogs.adobe.com/edge/

A version by version list of new features
http://edge.adobe.com/features.html

Mark Anders on AdobeTV – Introducing Edge Preview 6
http://tv.adobe.com/watch/adobe-edge-preview/introducing-edge-preview-6/

Mark Anders on AdobeTV – Getting Started with Adobe Edge
http://tv.adobe.com/watch/adobe-edge-preview/getting-started-with-adobe-edge/

Adobe Edge on Labs
http://labs.adobe.com/technologies/edge/

Adobe Edge Twitter Feed
http://twitter.com/#!/adobeedge

Edge Preview Discussion Forum
http://forums.adobe.com/community/labs/edge/

Adobe Edge Runtime API
http://www.adobe.com/go/edge_api_016_en

Joseph Labrecque’s Video Tutorials
http://inflagrantedelicto.memoryspiral.com/2012/05/adobe-edge-preview-6-released/

Other Resources
http://edge.adobe.com/resources.html

Posted in Adobe, Animation, Edge Animate, HTML5, Javascript | No Comments »