Fork me on GitHub
Post Format

Thursday Roundup # 11

Font Stack Builder: Build And Preview Your CSS Web Font Stacks

Font-Stack-Builder-Build-And-Preview-Your-CSS-Web-Font-Stacks

Cascade of typefaces in the CSS font-family property specify your choices, and your visitors see whatever they have available, in order of your specified importance:

font-family: Arial, Tahoma, Times New Roman, Times, serif;

Font Stack Builder helps to create robust CSS font-family declarations. The font stack builder shows the probability that your preferred fonts are displayed on Windows, Mac and Linux Web browsers.

Website Color Scraping Made Easy

Website-Color-Scraping-Made-Easy

ColrGrabr makes it easy to scrape the colors of a specific website by simply entering the URL of the website or using its bookmarklet.

Free Themes For Twitter Bootstrap: Bootswatch

Free-Themes-For-Twitter-Bootstrap-Bootswatch

Bootswatch is a collection of free themes for Twitter Bootstrap. Very simple to use, download a CSS file and replace the one in Bootstrap, no messing around with hex values.

A jQuery Plugin For Single page Web Sites: Pagify.js

Pagify is a simple jQuery plugin that simply replaces the contents of a div with content from other html files. This free plugin is lightweight and far less than 100 lines of code, well commented and easy to understand and extend! Get started by only specifying a list of pages or customize animations, default pages and caching!

Ultimate Guide On JPEG Optimization For The Web

Ultimate-Guide-On-JPEG-Optimization-For-The-Web

Image compression is found in every native media format. However the difference between GIF, PNG, and JPEG is how the information is compressed and display on-screen. There are so many tips for composing great image media published on the web, and yet many designers still do not understand some of the fundamentals.

In this guide author shares a few ideas for proper JPEG compression. You want to optimize your images to decrease webpage load times while also holding a decent level of quality. It’s all about finding balance between file sizes and screen depiction. There is no perfect solution for designers to follow. It takes some initial practice, but once you understand JPEG compression it becomes much easier developing websites in the future.

Define And Maintain Consistent Coding Styles With EditorConfig

Define-And-Maintain-Consistent-Coding-Styles-With-EditorConfig

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readibly and they work nicely with version control systems.

Mobile Web in High Resolution

Mobile-Web-in-High-Resolution

With the advent of high DPI device screens like Apple’s retina display, creating high resolution apps has become a standard for native app developers. But what about us mobile web folks? Most elements like text and images are automatically handled for us by the browser and display in the highest resolution possible. But when we use CSS styles like borders and shadows, 1px really ends up becoming 2px (at least on the retina display). So in order to create a higher resolution experience we need a way to set less than 1px borders.

Vendor Specific CSS3 Properties: cssFx

Vendor-Specific-CSS3-Properties-cssFx

cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!

It support many CSS3 properties including Border radius, box shadow, flex box, RGBA, gradients, multiple columns, border image, transforms, transitions, opacity, inline-block and ellipsis.

Free HTML jQuery Portfolio Template: Mini HTML vCard

Mni HTML vCard is a free HTML jQuery vCard portfolio template. It is a jQuery powered single-page, mini website that can be used to display personal porfolio for user and show case products for startups.

  • Image Gallery for Portfolio with Pagination and Lightbox Support
  • Fully-functional PHP Contact Form with Validation
  • Cross Browser Compatible
  • Easy to Customize – Very Little HTML Knowledge Required

Build Data Applications In Pure JavaScript And HTML: Recline.JS

Build-Data-Applications-In-Pure-JavaScript-And-HTML-ReclineJS

Recline.JS is a simple but powerful library for building data applications in pure Javascript and HTML. The Recline Library consists of 3 parts: Models, Backends and Views.

Recline supplies components and structure to data-heavy applications by providing a set of models (Dataset, Record/Row, Field) and views (Grid, Map, Graph etc).

A Github Repo Info JavaScript Widget: HubInfo

A-Github-Repo-Info-JavaScript-Widget-HubInfo

HubInfo is a jQuery plugin to show information about your GitHub repo. HubInfo is handy if you want to showcase all your GitHub repos in one page.

Game News Portal Free PSD Template

Game-News-Portal-Free-PSD-Template

Free Small (16×16) UI PSD İcons

133-Free-Small-UI-Icons-PSD

A set of beautifully designed 133 small UI PSD icons. Very handy for web sites and web applications. This PSD icon set comes with 16×16 size.

Make A Pie Chart Using HTML5 Canvas Element: Easy Pie Chart

make-a-pie-chart-using-html5-canvas-element-easy-pie-chart

Easy pie chart is a lightweight jQuery plugin that uses HTML5 canvas element to render and animate simple pie charts for single values. These chars are highly customizable and very easy to implement.
You can pass number of options to the initialize function to set a custom behavior and look for the plugin.

How to: Creating a Slider Control with the HTML5 Range Input

How-to-Creating-a-Slider-Control-with-the-HTML5-Range-Input

HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users. There are a number of options to choose from in terms of configuring your range inputs, such as defining the range values and steps. With a little JavaScript, you can capture and respond to user interaction with the range slider control.

This tutorial shows how to create a basic HTML5 range input slider to resize an image, with a JavaScript function updating elements in the page as the user alters the range. At the moment, Internet Explorer and Firefox do not support the range input, but the WebKit (Safari and Chrome) and Opera browsers do.

Things Not to Do when Designing Responsive Layouts

Responsive Layouts – this is perhaps one of the most discussed topics on web design forums and communities. In fact, responsive layout has become de facto standard for modern web designs. It is majorly because of huge proliferation of hand held devices like tablets and smartphone, and availability of display screens of all sizes and resolutions (I myself use Internet on as big as my 23 inches LED display and as small as 3 inches display screen of my Xperia X10 mini).

Animated CSS3 Progress Bar

Animated-CSS3-Progress-Bar

A free, colorful, cross browser compatible animated progress bar built with CSS3. It features smooth transition with width and color; no JavaScript involved!

jQuery Social Media Share and Bookmark Plugin: jsShare

jsShare is a jquery plugin that helps you easily share your contents with popular social media applications easily, all social media like Facebook, Twitter provide APIs for applications to share contents from other applications. jsShare encapsulates the internal sharing logic and provides you neat and compact interface to add social media sharing functionality to your web pages and applications easily.

jsShare is rendered as compact button by default, width is toggled upon clicking. jsShare also has a cool fish eye animation effect for social media buttons, which can be turned off by setting value of animate parameter to false.

Related Posts

  1. jQuery Social Media Share and Bookmark Plugin: jsShare
  2. Thursday Roundup # 7
  3. Thursday Roundup # 6
  4. Thursday Roundup # 9
  5. Thursday Roundup # 10

One comment

  1. Pingback: Thursday Roundup 11 | EGrappler

Leave a Reply

Required fields are marked *.


− 7 = one