Bi-Weekly Frontend News

Collective #43

Inspirational Website of the Week

Collective43_graphicarchitecture

Cheval Blanc's Randheli slideshow is our pick this week. It has a slick smoothness and and an interesting sidebar navigation. The typography with the cut-out letters enhances the elegant design.

Check it out

Why moving elements with translate() is better than pos:abs top/left

Collective43_paulirish

After Hugo Giraudel asked the fundamental question on Twitter, Paul Irish explains why moving elements using translate() is better in terms of performance than using absolutely positioned elements and move them manipulating their top/left values. Also check out Chris Coyier's article A Tale of Animation Performance.

Read it

Christmas Experiments

Collective43_christmasexperiments

Christmas Experiments is an advent calendar made by digital artists. Discover some interesting and creative experiments everyday until Christmas.

Check it out
Advertisement

Parallaxin'

Collective43_paralaxin

Paul Lewis explains the options and issues you are facing if you are trying to create a smooth parallax effect for your project.

Read it

Free Font: Flenja Regular

Collective43_Flenja

Flenja is an interesting font family with a lot of character by Sascha Timplan. The regular version is for free.

Get it

HTML5 Bones

COLLECTIVE43_HTML5BONES

Ian Devlin created this "back-to-basics" template that will help you get going in HTML5. Because of its helpful inline comments, it can also be used as a guide when building your own HTML5 page from scratch.

Check it out

Scrolling Performance

Collective43_ScrollingPerformance

Another insightful article from HTML5 Rocks by Paul Lewis about scrolling performance and how to understand and tackle performance issues related to it.

Read it

GruntStart

Collective43_gruntstart

GruntStart by Tim Svensen gives you the building blocks to quickly get started with Grunt to create an optimized website. Lint, minify and concatenate CSS and JavaScript, and provide simple loss-less image compression throughout a project build.

Try it

CSS Masks – How To Use Masking In CSS Now

Collective43_cssmasks

Christian Schaefer digs into CSS Masks and shows us some brilliant techniques that can be used right away.

Read it

A Responsive Off-Canvas Menu

Collective43_OffCanvasMenu

A great responsive off-canvas menu using CSS transforms and transitions by David Bushell.

Try it

Dcovery: Travel Research Organizer

Collective43_dcovery

Dcovery is a new app that promises stress-free travels by allowing you to collect and organize travel information in a smart way.

Check it out

jQuery.Shapeshift

Collective43_shapeshift

Inspired heavily by the jQuery Masonry plugin, Shapeshift by Scott Elwood is a jQuery plugin that will dynamically arrange a collection of elements into a grid in their parent container (like on Pinterest).

Get it

Pure CSS no smoking picto

Collective43_nosmoking

With only two elements, Hugo Giraudel re-created the no smoking sign with CSS. It's a great example of how clip:rect() can be used to create shapes.

Check it out

Time to update your CSS3

Collective43_CSS3

A great reminder from David Storey about how to update your CSS3 and which prefixes are actually needed and which ones are not.

Read it

Interactive Guide to Blog Typography

Collective43_guidetypography

A great interactive guide that will help you understand important typography fundamentals.

Check it out

Webcam Toy

Collective43_webcamtoy

Paul Neave's projects are all mind-blowing and one of his latest projects, the Webcam Toy, got featured as a Chrome Experiment. You can do some fun stuff with your webcam, go and check it out.

Try it

Giving Content Priority with CSS3 Grid Layout

Collective43_gridlayout

An in-depth tutorial by Rachel Andrew about how to use the new CSS3 grid layout.

Read it

Free Font: Myra Caps

Collective43_myra

An interesting font with beautiful digit design by Sergiy Tkachenko.

Get it

Zodiac Signs

Collective43_Zodiac

A lovely set of zodiac signs by Finbarrs Oketunji.

Get it

Free Font: Boffin Regular

Collective43_Boffin

Boffin is a nice, technical typeface by Evolutionfonts and the regular weight is offered fro free.

Get it

Live Album Previews with CSS3 and jQuery

Collective43_albumphoto

A tutorial by Martin Angelov from Tutorialzine on how to create a script for previewing the contents of an album with a slideshow-like animation.

Check it out

Underneath – A Creepy Web Font Kit

Collective43_underneath

A font face that is great for creepy grungy titles by WeGraphics. The download includes everything you need in order to use this font in a web project, including HTML and CSS.

Get it

How to Create a Windows Store app using HTML and JS

Learn how to create a windows store app from this tutorial by the team at MSDN for WebAppers.

Read it