Phone Size Show the actual size of a phone on your screen! Adjust the settings in the top bar so they match your monitor (try to be as precise as possible). You can use offset to increase or decrease the size of all the phones. To add a phone, simply select one from the selection box and to remove it, click the remove button underneath it. When you hit “Toggle Screens”, every phone will show the same picture, cropped to the resolution of the screen. More candy = higher resolution.
Source: phone-size.com
Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17” laptop screen or an iPhone.
Source: getskeleton.com
Playing with matrices is a tool for generating a CSS Matrix.
Source: peterned.home.xs4all.nl
Speed Tracer is a tool to help you identify and fix performance problems in your web applications. It visualizes metrics that are taken from low level instrumentation points inside of the browser and analyzes them as your application runs. Speed Tracer is available as a Chrome extension and works on all platforms where extensions are currently supported (Windows and Linux).
Using Speed Tracer you are able to get a better picture of where time is being spent in your application. This includes problems caused by JavaScript parsing and execution, layout, CSS style recalculation and selector matching, DOM event handling, network resource loading, timer fires, XMLHttpRequest callbacks, painting, and more.
Source: code.google.com
Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
Firebugis always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.
Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.
Source: getfirebug.com
Hex Editor - A simple hex editor that allows you to view and edit raw file data.
Image Editor - A hardware-accelerated image editor with the ability to work in frames mode for animations or layers for for building composite images. Uses pixel-shaders and multiple-CPU capabilities for fast image processing.
Movie to Animated GIF Converter - A simple utility that allows you to convert a portion of (or an entire) MPEG, AVI or WMV movie to an animated GIF. There is also a version available for Windows 7 that supports MP4 files.
Geometry Sandbox - This application allows you to place several simple geometry objects (points, lines, circles, etc.) in a workspace, graph them, and see relationships between them.
GIF Frame Extractor - A simple utility to extract frames from an animated GIF and save them as a JPEG or PNG.
WMV Screen Capture v0.5 - A utility that captures the activity on your screen to a WMV video file.
Animated Cursor Maker - A simple utility to build an animated cursor from a series of still images (JPEG, PNG, etc.).
Calculator - A simple equation based calculator with support for user variables.
AVI Screen Capture - A utility to capture the activity of the full screen, a specific window, a rectangular region within a specific window (new with this release), or a rectangular area that follows the mouse cursor, to an AVI video file.
Source: evanolds.com
Audacity is a free, easy-to-use and multilingual audio editor and recorder for Windows, Mac OS X, GNU/Linux and other operating systems. You can use Audacity to:
- Record live audio.
- Convert tapes and records into digital recordings or CDs.
- Edit Ogg Vorbis, MP3, WAV or AIFF sound files.
- Cut, copy, splice or mix sounds together.
- Change the speed or pitch of a recording.
Audacity is free software, developed by a group of volunteers and distributed under the GNU General Public License (GPL).
Free software is not just free of cost (like “free beer”). It is free as in freedom (like “free speech”). Free software gives you the freedom to use a program, study how it works, improve it and share it with others. For more information, visit the Free Software Foundation.
Source: audacity.sourceforge.net
ProtoFluid - Rapid Prototyping of Adaptive CSS and Responsive Design.
Prototype CSS on a multitude of device screen sizes, orientations and browsers.
Preview adaptive designs and target CSS3 compliant browsers using Media Queries.
Particularly suited to the early development of fluid layout based web applications.
Use all your favourite web browser development tools like Firebug.
Supports iPad for webkit, touch-based environment testing.
Source: protofluid.com
ColorPicker.com Quick Online Color Picker Tool for In-Browser Development.
Source: colorpicker.com
Language Subtag Lookup App - BCP 47 language tags are built from subtags in the IANA Subtag Registry. This tool helps you find or look up subtags and check for errors in language tags.
Language Subtag Lookup App provides information to guide your choices. Use it to:
- Find a subtag by searching for text in the descriptions
- Look up one or more subtags
- Check whether a hyphen-separated tag is valid and well-formed
- List all tags of the following type
Source: rishida.net
Open Icon Library is a free and open Icon collection. Over 10,000 Unique Icons. Free for anyone to use on you computer, website or any other project. The library is not a theme. Its a centralized source for icons to cover all your needs. The goal is to cover all common apps, operating systems, mimetypes, devices, and country flags.
Open Icon Library includes:
- 2272 application icons
- 258 International flags icons
- 238 Device icons
- 69 Operating system icons
- 731 Mimetype icons
- 596 Action icons
- 273 Status icons
Source: openiconlibrary.sourceforge.net
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.
Use Fiddler to track and analyze HTTP traffic in and out of the browser.
Source: fiddler2.com
Diacritics - All You Need to Know to Design a Font with Correct Accents
Diacritics is a Font Accent design sharing site for designers and developers of fonts. At Diacritics you can:
STUDY - Get all you need to create typefaces with correct accents at one place.
SHARE - Share your typographic knowledge with colleagues all over the world.
EDIT - Simply edit or correct information about diacritics or languages.
Source: diacritics.typo.cz
