Adobe Flash becomes Animate CC and allows output to HTML5 Canvas
For nearly two decades, Flash Professional has been the standard for producing rich animations on the web. Because of the emergence of HTML5 and demand for animations that leverage web standards, we completely rewrote the tool over the past few years to incorporate native HTML5 Canvas and WebGL support. To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed
Adobe Animate CC, starting with the next release in early 2016.
Read more from the source: Adobe Flash Professional Team Blog
CSS flex-box sounds like a lot to learn, but we need to start using it right now
The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.
Many designers and developers find this flexbox layout easier to use, as positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while new CSS Grid Layout Module is emerging to handle the large scale layouts.
Read more from the source: Scotch
Try this cool effect that uses SVG Gaussian blur, a color matrix and color blend to make two circles join together like drops of liquid
Lucas Bebber is the originator of some of the most creative effects I’ve ever seen on the web. So much so I couldn’t resist
SVG filters have good support, but not all browsers support them being applied to regular DOM elements, notably Safari. However, they do work at least on Firefox and Chrome, even the Android version, and the filter degrades nicely if it doesn’t work. If you absolutely need the effect to work, consider using SVG elements instead of DOM elements.
Read more from the source: CSS-Tricks
HTML5 Boilerplate is out with some great improvements and support dropped for IE6 and IE7
HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
Highlights of version 5 changes:
– Update to jQuery 1.11.2.
– Update to Modernizr 2.8.3.
– Add /.editorconfig file (#1561, #1564).
– Remove IE 6/7 hacks from main.css (#1050).
– Remove IE conditional classes (#1187, #1290).
Read more from the source: html5boilerplate.com
iOS 8 brings critical new features to Apple mobile device browsers including WebGL, Promises, IndexedDB and SPDY
iOS 8 is also significantly faster than iOS7 in every area with a 4x improvement in document.querySelectorAll. iOS 8 also adds better support for GPU rendering which boosts performance of intensive graphical applications by almost double.
Read more at sencha.com
Use chapter markers, preview thumbnails and timeline search to give a rich experience with HTML5 video
The HTML5 element makes embedding videos into your site as easy as embedding images. And since all major browsers support since 2011, it’s also the most reliable way to get your moving pictures seen by people.
A more recent addition to the HTML5 family is the element. It’s a sub-element of , intended to make the video timeline more accessible. Its main use case is adding closed captions. These captions are loaded from a separate text file (a WebVTT file) and printed over the bottom of the video display. Ian Devlin has written an excellent article on the subject.
Beyond captions though, the element can be used for any kind of interaction with the video timeline. This article explores 3 examples: chapter markers, preview thumbnails, and a timeline search. By the end, you will have sufficient understanding of the element and its scripting API to build your own interactive video experiences.
Read more from the source: Mozilla Hacks – the Web developer blog