Category: JS

Tablesaw: A Flexible Tool for Responsive Tables

Following lots of early experiments with responsive tables, we came to the conclustion that any approach to “responsive tables” needs to address a few key points:

First and foremost, it needs to flexibly reformat table layouts in a way that’s suitable for compact screens, without removing any data outright from the markup

tablesaw-stack

If any data are hidden by default, it should provide some method to let users to access that information (we can’t make assumptions about what data will be relevant based on the screen size)

Tablesaw lets developers apply rules to determine display presentation layout, data priority, and adds a range of extensions to give users control over data display and interaction.

source

Blast.js: Blast text apart to make it manipulable

View demos at source link.

Overview
Blast.js separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.

Blast’s uses include typographic animation, juxtaposition, styling, search, and analysis.

Blast is highly accurate; it neither dumbly splits words at spaces nor dumbly splits sentences at periods. Features include: 1) By traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page. 2) Automatic class and ID generation make text manipulation simple. 4) Blast can be fully undone with a single call. 5) All Latin alphabet languages and UTF-8 characters are supported.

The elements Blast generates can be accessed through both CSS and JavaScript by referencing auto-generated class names or iterating via jQuery/Zepto’s eq() function.

blast,js-screenshot

source

Foundation: A New Grid

New grids for new experiences and applications. Highly recommended.

Using a Hammer When You Need a Nail Gun
Building things is hard. Building things with the wrong tools is even harder. The web has changed over the past several years and will continue to rapidly change. We’re racing away from an advertising web that discusses things to a web of doing and creating things.

The shift from native apps to web apps has begun. Yet, we’re using the wrong tool to build these web apps — hacking away at frameworks and grids meant for marketing sites. In other words, we’re still swinging a hammer when we could be shooting a nail gun.

A 960° Look at the Grids of Internet Past
Nearly every grid system today is based on the same principals of the 960 Grid — a grid nearly a decade old — that has affected how nearly every site is coded today. A model that uses rows and columns, set to 12 or 16 numbered increments, to create nearly any layout.

The 960 Grid allowed for rapid prototyping on the web and lowered the learning curve for designers to wrangle code. It gave us the start. And more powerful frameworks emerged offering UI libraries, predefined styles and JavaScript capabilities, yet the same grid style remained.

Over the last three years, Foundation has taken this grid style and made huge improvements in functionality. We were the first framework to go responsive with the grid and also the first to take the grid mobile-first. We’ve built upon it, adding offsets, source ordering right-to-left options and block grids. We’ve even harnessed the awesome power of Sass to have powerful Mixins that allow designers to build fully semantic markup with little-to-no presentational classes.

These things are all great, but they were still built for a different type of web experience.

Web Apps are the Future
As we said above, the web is changing. We’re transitioning to a more app-centric web. It’s time our grids followed suit.

source

Framer Studio – Rapid Prototyping (Framer.js)

Framer Studio is built on Framer.js, an open source framework for rapid prototyping. Framer allows you to define animations and interactions. It runs on mobile devices, too.

Generate
Generate assets out of Sketch and Photoshop to set up new projects.

Animate
Animate any layer in 3D space with spring physics and bezier curves.

Perform
Hardware accelerated for high framerates, with CSS Transforms.

Flexible
Works on desktop, mobile and tablets. Plays well with WebKit.

source

How we make RWD sites load fast as heck

RWD: Responsive Web Design

In the past year I’ve spent a lot of time researching page loading performance, both for our ongoing client work here at FG and for my soon-to-be-released book for A Book Apart. In the process, I’ve reaffirmed my belief that we don’t need to compromise the well-known benefits of a responsive layout in order to make our sites load as fast as heck.

In this post, I’ll outline some recent observations and approaches to delivering sites for speed and broader access, and link out to various tools we are using to facilitate our approach. All of the tips mentioned in this post are implemented on this very site, and we’ve tested them heavily to ensure that they’re working as well as they can.

source

Famou.us – Javascript Library for iOS Animations

Famo.us is a free, open source JavaScript framework for creating smooth, complex UIs for any screen.

Famo.us is the only JavaScript framework that includes an open source 3D layout engine fully integrated with a 3D physics animation engine that can render to DOM, Canvas, or WebGL.

Choosing a development platform is more than just a technical decision—it’s a career decision. Whether you’re a seasoned developer expanding your skills, a designer looking to bring your ideas to life, or just learning to code, we’re building Famo.us for you.

Getting started is easy. Famo.us University will teach you to code in Famo.us with lessons, live code examples, and real app projects. And the Famo.us community is always here when you need help.

source