At Pretty, we like to keep up to date and use the best technologies available to us. The state of the internet is always progressing, and languages, libraries, and frameworks come and go - hopefully for the better for everyone. It finally feels like we are really moving forward, and with better browser support, device performance and connection speeds, progress is happening fast.

As a front end developer there have been lots of new things popping up over recent years, such as designing in browser, CSS precompilers like Sass and Less, and automated task runners such as Grunt and Gulp, tools that save many developers heaps of time.

The selection below are things I enjoy seeing used on sites and that also help me as a front end developer.

---

SVG

Pretty has long been fans of SVG and try to use it in productions as much as possible, such as in our Christmas card.

If you have knowledge of Adobe Illustrator or Sketch, you can get going with SVG straight away. The beauty of SVG is that it is fully scalable, will fit to any size at the same quality and usually at a smaller file size than raster images (jpg, png, bmp etc).

CSS Tricks has a great article if you are just getting started, and explains the methods for transforming and animating SVG.

Despite file sizes being relatively small, SVGo is a compressor to reduce the file size even more using Grunt. There is also a recently released javascript plugin deSVG, which removes bloat from inline SVGs.

Pretty has used SVG heavily on the sites we have built for ETX Capital. We have a lot of icons and UI elements which are perfect for SVG, and as the sites also have a large number of mobile visitors, SVG images are invaluable as they are lightweight and look sharp on mobile and tablets.

SVG is well supported on most browsers and devices, they also work great on higher pixel density screens and look crystal clear. No more slicing images in Photoshop! We are no longer in a 72dpi world, SVG's time is here!

Examples

See the Pen Optimized Inline SVG Icons by Ruandre Janse Van Rensburg (@ruandre) on CodePen.

See the Pen NES SVG Line Animation by Derek Palladino (@djp8543) on CodePen.

---

Video

With connection speeds and server infrastructure improving so much recently, video is now easily and widely available online almost instantly. Using video can really add an extra element in a website's design to communicate a brand, story or a walkthrough.

More and more I find websites with a full background video, or a large header video sometimes overlaid with logos or graphics. Video definitely stands out above static graphics and when made correctly can look amazing and much more interesting.

On a site we are currently building, we have shot time-lapse footage of the client's office which will be used as a large full width background video on the homepage. To ensure visitors can view the video without skipping or buffering, we have hosted it on Vimeo pro and serve 720p HD video using the direct MP4 link available to us. Testing from various computers and connections, the playback has been smooth and reliable.

In the wild

The Google calender app website, has great use of video to emphasise and help describe the parts of the app they are showcasing.

longstoryshortdesign uses a darkened video showing the team working and gives a great feel to how the company operates.

Tools

BigVideo.js is a great javascript solution for filling the full background with a video.

Demosthemes have written a great article explaining how to achieve the same effect as BigVideo.js but using HTML5 to play video and pure CSS to make the video cover fullscreen.

Examples

See the Pen Fullscreen HTML5 Page Background Video by Dudley Storey (@dudleystorey) on CodePen.

See the Pen Responsive Background Video by Daniel Riemer (@zitrusfrisch) on CodePen.

---

Animations

With Flash truly dead and buried, animation on the web is now widely supported. Any modern site you visit will no doubt have some sort of animation on it. This may be a big bold fading and scaling headline, or a more subtle transformation of a hover state on a social media button. Animations are here to stay, well adopted, easier than ever to write, and most importantly make sites a lot more fun to use!

Possibly the easiest way to introduce animation to your site is using the wonderful Animate.css by Daniel Eden, harnessing the power of CSS animations.

A recent CSS animation made by Toby appears on the Chelsea Textiles website. Try hovering on the Twitter button on the homepage.

Here are some examples of some cool animations I have spotted:

See the Pen Advanced animation path by LegoMushroom (@sol0mka) on CodePen.

See the Pen Gravity Animated Poster by Saransh Sinha (@saransh) on CodePen.

See the Pen App Icon - Radium by nicolazj (@nicolazj) on CodePen.

---

Javascript frameworks

Angular

The framework by Google, with a massive amount of users, huge support and tutorial community, Angular is definitely one of the big boys that won't be going away any time soon. There are many arguments for and against some of its architecture and features. With the recent announcement of a complete rewrite, a non-backwards compatible version 2 there is a lot of online chatter about Angular which makes for interesting reading.

React JS

React was made by Facebook to help the creation of interactive, stateful and reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React. React can perform on the client side but it can also be rendered server side, and they can also work together inter-operably. I am looking forward to experimenting with React, read more about it here.

And...

ECMAScript 6

ECMAscript 6 is the next generation JavaScript standard. It is a significant update to the language, and the first update since around 2009. The update will allow new features to be integrated to javascript and platforms and frameworks that use it. The features vary widely from completely new objects and patterns, to syntax changes and new methods on existing objects. The great thing with ES6 is that all of the changes are made to solve the problems developers come across, which in turn means they can create better products and tools and improve the web further.

---

In conclusion...

Obviously this selection just skims the surface of new and useful things to look out for in 2015 and I have focused on things that I have, will and hope to be using in production soon.