Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘BSD License’ Category

Due to how the text rasterizer works, fonts look heavier on OS X and iOS, compared to to other operating systems.

And, trying to close this gap with per-browser CSS styles is a common pattern.

Type Rendering Mix

Type Rendering Mix is a tiny JavaScript library that allows to apply styles only when Core Text is used (iOS and OS X) in order to achieve a more consistent rendering while preserving the accuracy of sub-pixel antialiasing.

Also, Type Rendering Mix can be used to disable web fonts when no antialiasing is applied.

It works by auto-adding some styles to theelement that represent the rasterizer and anti-aliasing support on the browsers and leaves the rest to us (creating the styles).

A/B testing is a “must” (almost for any website) to analyze the performance of “scenarios” in web pages.

Sixpack is an open source A/B testing tool which has a unique feature: being language-agnostic. It doesn’t limit you running an entire test in a single language but you can start with one and end up with another (like JS + PHP code can be used for the same test).

Sixpack A/B Framework

There are libraries for PHP, JavaScript, Ruby + Python and it comes with a beautiful, interface to view the results.

The core is built with Python + Redis and all the interaction is done via a REST API.

Web Tracing Framework, by Google, is a set of tools and scripts for analyzing the performance of any JavaScript-related code.

It is mostly ideal for JavaScript-heavy apps and may not be necessary for standard web pages where JavaScript is only used for simple interactions.

There is a manual embedding option and a Chrome extension for getting internal browser data and command line tools (or Nodejs support) for processing this data.

Web Tracing Framework

The framework allows us to choose which methods/events to track and visualizes them in a friendly interface.

A “heap tracking” feature helps finding “how the memory is used by every function” to optimize when necessary.

It works on most modern browsers (in Chrome with all the features) and can be extended.

Lately, Codrops had published an article that was sharing a list of page transitions.

The article consisted of transitions that move, fade, scale, rotate or slide elements.

Daniel Silver has wrapped them to a single CSS + JS file (elementTransitions.js) and more than one animatad element can be used in a single page.

Also, these transitions can now be triggered directly with HTML tags.

Element Transitions

Tracking.js is a standalone JavaScript library for tracking data received from cameras in real-time.

The data tracked can be either colors or humans which means we can trigger JavaScript events when a specific color is detected or a human/face body appears and moves.

It has a very easy-to-use API with few methods and events (which is more than enough).


This opens so many doors in developing stuff that reacts to movements and colors like drawing in a web app with gestures, playing games with a specific-colored controller, etc.

I suggest you watch the demo video provided to see the power of the library, it is really exciting.

It is so good to see new and quality frameworks are being introduced regularly by the web design/development community.

Pure is a fresh one that is created by Yahoo!. It uses Normalize.CSS and doesn’t use any JavaScript but only HTML-CSS.

Pure by Yahoo!

The framework is built with responsive layouts in mind and has styles for typography, grids, forms, buttons, tables and navigation.

Markup used is very simple and the whole framework is pretty lightweight (5.7KB minified and gzipped).

Also, it is modular and styles for each module can be used separately.

When working on any mapping-related projects (like Google Maps integration), icons built specifically for them can be very handy.

Maki is a free set of “point of interest” icons that is perfect for web-based mapping interfaces.

Maki - Point of Interest Icons

The set includes 73 icons, comes in 3 sizes and both in PNG + SVG.

Besides standard markers, there are items for airport, bus station, police, restaurant, grocery and more.

  • Tags:
  • Filed under: BSD License, Design, Icons
  • It is pretty hard to find a simple-yet-functional and good looking datepicker script.

    The most popular one is probably the jQuery UI's picker but it is heavy in size for any project that actually does only need a datepicker.

    Pikaday - JavaScript Datepicker

    Pikaday is a standalone JavaScript datapicker which is small in size (<5kb) and can work well with Moment.js if advanced formatting is needed.

    The design of the picker can be easily customized with CSS (the default style already looks good) and offers "quick year switching".

    Infinite-Social-Wall is an open source PHP-MySQL application for presenting any social activity in a Pinterest-like interface.

    The application can actually grab the content from any number of given RSS feeds but it has built-in styles and icons for social networking sites like Twitter, Reddit, Instagram, Github and more.

    Infinite Social Wall

    It makes use the awesome Isotope plugin for the layout and can scroll infinitely by loading new items while scrolling.

    Infinite-Social-Wall uses the database for storing the parsed content from the feeds in our not to parse them each time.

    For anyone willing to create such a self-updating website, the application is a very handy resource.

    Socialite.js is a JavaScript library for having more control over social sharing buttons.

    The library is lightweight (2kb minified-gzipped), standalone and helps the social widgets to load when you want them or only when needed/requested to speed up web pages.


    It has support for the major players: Twitter, Google+, Facebook, LinkedIn, Pinterest, and Spotify. There is no need to install the widget codes for each library as Socialite.js does that for you.

    And, the library is extensible, any new social networks can be added with ease.

    Uptime Robot