Front End Development Blog by Greg Babula

Responsive Typography

Fri, 25 May 2012 17:01:38 -0400

With the chaos of different screen sizes and a new generation of Web browsers, the design paradigms of layout and typography have shifted away from static layouts and system fonts to dynamic layouts and custom Web fonts. But screens have not just changed in size but also in pixel density. In other words: We do not just need responsive layouts, we also need responsive typefaces. To test that assumption, iA has created its new Website with responsive typography—with a custom typeface.

Convert your CSS files to LESS Css2Less is a simple tool for...

Fri, 25 May 2012 09:56:21 -0400

Convert your CSS files to LESS

Css2Less is a simple tool for converting your existing CSS files into LESS files. Just copy and paste your existing CSS files to convert them. You can even convert files locally by installing the css2less RubyGems.

Facebook Camera

Thu, 24 May 2012 13:47:45 -0400

Facebook Camera:

It’s about time. I know this seems a bit crazy given the recent (but not yet completed) Instagram purchase. But I had heard a few weeks ago that the app was really close to being done.

Remember, the Instagram deal was done very quickly by Zuckerberg himself. I imagine they figured there was no point scrapping all the work this team was doing — at first glance, the app looks great — especially since the plan is to let Instagram operate mostly autonomously. And again, the Instagram deal isn’t done just yet (but it will get done).

WYSIHTML5 - A Better Approach to Rich Text Editing

Thu, 24 May 2012 09:53:45 -0400

WYSIHTML5 - A Better Approach to Rich Text Editing:

Wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

Lessons From A Review Of JavaScript Code

Wed, 23 May 2012 10:01:05 -0400

Lessons From A Review Of JavaScript Code:

Reviewing code is possibly the single best technique to improve the overall quality of your solutions, and if you’re not actively taking advantage of it, then you’re missing out on identifying bugs and hearing suggestions that could make your code better.

The Toolbox

Tue, 22 May 2012 09:54:39 -0400

The Toolbox:

A collection of the best time-saving apps, tools, and widgets from around the web.

Browsers and Apps in 2012

Sun, 20 May 2012 20:31:49 -0400

Browsers and Apps in 2012:

It’s like this: The browser’s doomed, because apps are the future. Wait! Apps are doomed because HTML5 is the future. I see something almost every day saying one or the other. Only it’s mostly wrong.

8 web standards myths debunked

Fri, 18 May 2012 09:56:26 -0400

8 web standards myths debunked:

Lea Verou takes a look at some of the misconceptions of web standards, what the W3C and its working groups actually do and how the standardisation process works.

An Intro to CSS 3D transforms An excellent mini-site by David...

Thu, 17 May 2012 09:54:03 -0400

An Intro to CSS 3D transforms

An excellent mini-site by David DeSandro dedicated to CSS3’s 3D transformations.

EpicEditor

Wed, 16 May 2012 09:38:43 -0400

EpicEditor:

EpicEditor : An Embeddable JavaScript Markdown Editor

WYSIWYGs suck and they suck hard. Markdown is quickly becoming the replacement. GitHub, Stackoverflow, and even blogging apps like Posterous support Markdown now. This allows you to generate a Markdown editor with a preview, fullscreen editing, full CSS theming, and offline support.

Everything you need to know about HTML5 video and audio

Tue, 15 May 2012 10:33:18 -0400

Everything you need to know about HTML5 video and audio:

A very comprehensive article. In-depth coverage of HTML5 video concepts.

Roll Your Own Drag-and-Drop Handling (With Help From jQuery...

Sat, 12 May 2012 09:44:31 -0400

Roll Your Own Drag-and-Drop Handling (With Help From jQuery UI)

In this tutorial Jo Liss shows how to create your own low-level drag-and-drop handler with jQuery UI’s Mouse plugin.

How Browsers Work

Fri, 11 May 2012 09:35:21 -0400

How Browsers Work:

This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code.

Taming the SVG Beast

Thu, 10 May 2012 09:55:13 -0400

Taming the SVG Beast:

Andrew Baker looks at the rendering of SVG files in the browser, along with two rather different approaches to bring SVG files to the HTML5 Canvas, Ink2Canvas and Canvg.

Fluid CSS3 Sslideshow with Parallax Effect

Mon, 07 May 2012 13:02:55 -0400

Fluid CSS3 Sslideshow with Parallax Effect:

In this tutorial we will create a slideshow with a parallax effect using several CSS3 properties. The idea is to move the background positions of two backgrounds while sliding the container of the slides.

Fixie.js

Fri, 04 May 2012 11:57:41 -0400

Fixie.js:

By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

Screenfull.js - Simple cross browser wrapper for Fullscreen API

Thu, 03 May 2012 11:48:32 -0400

Screenfull.js - Simple cross browser wrapper for Fullscreen API:

The Fullscreen API is fairly new with growing support but the implementation varies across browsers. Screenfull.js is a simple script from Sindre Sorhus to change that, changing:

document.fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.documentElement.webkitRequestFullScreen; function requestFullscreen( element ) { if ( element.requestFullscreen ) { element.requestFullscreen(); } else if ( element.mozRequestFullScreen ) { element.mozRequestFullScreen(); } else if ( element.webkitRequestFullScreen ) { element.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT ); } } if ( document.fullscreenEnabled ) { requestFullscreen( document.documentElement ); }

if ( screenfull ) screenfull.request();

The source is on GitHub.

7 Reasons to Consider SVGs Instead of Canvas

Wed, 02 May 2012 09:50:00 -0400

7 Reasons to Consider SVGs Instead of Canvas:

SVGs are being neglected in favor of the canvas element? Craig cites several good reasons why your next project could benefit from using Scalable Vector Graphics

jQuery Endless Scroll

Tue, 01 May 2012 10:37:54 -0400

jQuery Endless Scroll:

Endless Scroll not only helps you build highly customisable infinite scrolling effects, it also offers features not commonly seen. Such features include:

The ability to up-scroll and prepend content to the beginning of the page
The ability to limit the number of available “pages”, i.e. data truncation
And there are more exciting features in the works, including SEO-friendly URLs!

Google JavaScript Style Guide

Sat, 28 Apr 2012 10:01:21 -0400

Google JavaScript Style Guide:

A JavaScript style guide to go along with Google’s HTML & CSS style guide

JavaScript is the main client-side scripting language used by many of Google’s open-source projects. This style guide is a list of dos and don’ts for JavaScript programs.

Here are some really good one’s

Always use semicolons
Declarations with var: Always
Use a variable initialized with a Function Expression to define a function within a block
Associative Arrays are not allowed
Because of implicit semicolon insertion, always start your curly braces on the same line as whatever they’re opening.
For consistency single-quotes (‘) are preferred to double-quotes (“)