Fork me on GitHub
Post Format

Thursday Roundup # 21

Live Weather Display Using CSS, jQuery and PHP

Live-Weather-Display-Using-CSS-jQuery-and-PHP

Want your website features the live weather conditions using the Geo location from anyone who looked at it? This article shows the time of day to be reflected depending on where they were based in the world, so somebody looking at the website in London, England would see a different style to someone looking at the website at the exact same time in San Diego, California. The goal was that people could see what the weather was like outside their window by looking at our website. Click here to read more

Generate Responsive Ideal Typography With Responsive Measures

Generate-Responsive-Ideal-Typography-With-Responsive-Measures

Responsive Measure is a simple script that allows you to pass in a selector (ideally the container where your primary content will go) which generates the ideal font size needed to produce the ideal measure for your text.

Multiple File Upload Plugin With Progress-Bar, Drag-and-Drop

Multiple-File-Upload-Plugin-With-Progress-Bar-Drag-and-Drop

It can handle multiple uploads by using XMLHttpRequest, and will fall back to an iframe-based solution in older browsers.

The default behavior of Fine Uploader is to immediately attempt to upload files as they are selected. One option allows you to simply queue all files, and then start uploading at a later time by calling uploadStoredFiles() on your Fine Uploader instance.

Making a Simple Drawing Application using RaphaëlJS

Making-a-Simple-Drawing-Application-using-RaphaelJS


Raphaël is a library for working with vector graphics in JavaScript. It uses SVG, and boasts support for pretty much all browsers – Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. Every object created is also a DOM object, meaning that you can treat them as such, adding event handlers the normal way.

In this tutorial, author is showing how to create a simple drawing application using Raphaël. It will just support basic line drawings, and you will be able to change the width and colour of the line.

Pretty Hover Effects with CSS and jQuery

Pretty-Hover-Effects-with-CSS-and-jQuery

This article shows how to create pretty hover effects for your images using jQuery and CSS. The plan is to use a clean mark up, adding the necessary elements on the fly. What this means is that we are starting from barebones image HTML tags, with title attributes only. This can come useful especially if you already have hundreds of images that you want to apply this effect on.

Mobile Web Development Framework: Tres

Mobile-Web-Development-Framework-Tres

Tres is a mobile web development framework based in Backbone.js. The idea is instead of using a bunch of jQuery plugins and whatnot, you’ll build your application as you’d build a regular Backbone app: you write the markup, declare the JS classes for each view, and style everything using CSS.

Color Vision Deficiency (Color-Blindness) Simulator For The Web: ChromaNope

Color-Vision-Deficiency-(Color-Blindness)-Simulator-For-The-Web-ChromaNope

ChromaNope is a color vision deficiency (color-blindness) simulator made for the web. The three most common types of color blindness are all represented in the simulation (Protonopia, Deuteranopia, and Tritanopia). It’s purpose is to help designers see their entire web design as a person with color-blindness might. This helps designers make informed decisions about accessibility by identifying potential problems that color-blind users might have, problems that might have otherwise gone unnoticed.

Portfolio Flipping Slider Using jQuery & CSS3

Portfolio-Flipping-Slider-Using-jQuery-CSS3

There are many ways on displaying portfolios, one of them is using grid style with slider effect for pagination. In this tutorial you will learn how to displaying our portfolio grid with flipping slider effect for pagination using jQuery & CSS3 Transform.

JavaScript Library For Creating Word Clouds: Word Cloud Generator

JavaScript-Library-For-Creating-Word-Clouds-Word-Cloud-Generator

Word Cloud Generator is a JavaScript library for creating word clouds. This library is great for generating tag-clouds and parts for infographics. The algorithm is incredibly simple: the plugin attempts to add a new word in the middle, but if a word intersects with previous words it finds a place for itself, pixel by pixel.

Metro Style Web Framework: BootMetro

Metro-Style-Web-Framework-BootMetro

BootMetro, a simple and flexible HTML, CSS, and Javascript for web apps that wants to use the “Windows 8 MetroUI” style, without the need to run on Windows 8.

Read / Write XLSX Files With JS: XLSX.js

Read-Write-XLSX-Files-With-JS-XLSX

XLSX.js is a library that converts base64 strings into object representations of XLSX spreadsheets, and vice versa. In other words, this library will allow you to read and write Excel-compatible XLSX files when paired with an appropriate file access mechanism.

Free Seamless Blueprint Photoshop Textures

Free-Seamless-Blueprint-Photoshop-Textures

A collection of seamless blueprint textures for your designs. Included are 10 different patterns in Photoshop .pat format, individual .png files and an example usage .psd file.

Free Tumblr Portfolio Theme: hasaportfolio

Free-Tumblr-Portfolio-Theme-hasaportfolio

hasaportfolio is a free theme that turns your tumblr into a portfolio. It features infinite scrolling so that all your projects can be seen on one page. It supports photo, video, and photoset post types. You can create custom pages and add links for your blog, resume, and email address.

Free Tumblr Portfolio Theme: Organ

Free-Tumblr-Portfolio-Theme-Organ

Organ is a tumblr theme inspired by organ pipes. Imagine that when you roll over the pipes you hear organ sound. You can use this theme on your own tumblr blog. It only uses CSS for the animation, so not all browsers are supported in the same way.

Magazine Style Free Responsive WordPress Theme: Newspaper

Magazine-Style-Free-WordPress-Theme-Newspaper

Subtle textures, beautiful typography and a modern responsive layout – that’s what Newspaper is about. Built to complement your content and images, Newspaper responsive WordPress theme screams quality web design. Included are features such as automatic slideshow, author bio section, ad placement, social links and a theme options page for faster customization.

Free Responsive Single Page Portfolio WordPress Theme: OnePager

OnePager is a free responsive single page portfolio theme for WordPress sites. Based on our previously released OnePager HTML Template it provides you the flexibility to either use static or dynamic version of OnePager.

No related posts.

Leave a Reply

Required fields are marked *.

*