Being web designer is not easy. Not only do we need to have a good understanding about visual design, typography, information architecture, psychology and a plethora of other disciplines; in our work, we need to take care of so many details, so that our job becomes more and more time-consuming, requiring dozens of tools, attention span and an effective workflow for beautiful, timely and functional results.And this is where small time-savers become handy. Be it a handy checklist, batch installer, dummy image generator or converter from Excel spreadsheet to HTML — all these things can save us a couple of minutes every day, making our work easier and more efficient. And this is why we keep collecting them for Smashing Magazine’s readers. Whether you like lists or not: this one will probably help you find those little nuggets out there that will help you avoid headaches and stress. Below we present useful time-savers for web designers.You may want to subcribe to Smashing Magazine’s E-Mail Newsletter (32,600 subscribers) to keep updated about new useful tools, techniques and resources. The newsletter is sent out once every two weeks.[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]Time-Savers For Web DesignersLaunchListThis tool helps you review important items before the big launch. By default, the tool provides 28 items to be checked, but it also allows you to add custom items to the list. Each item can be commented on or crossed out. Once you’re done, you can send the report along with project’s details to multiple recipients via email. Alternatives: Ultimate Website Launch Checklist and Paul Boag’s The Ultimate Website Prelaunch Checklist.Pencil Project: Sketching and Prototyping with FirefoxPencil is an open source GUI prototyping tool. It contains built-in stencils for diagrams and prototyping, on-screen text editing with rich text support as well as standard drawing operations. Works in Firefox 3.5+.ZootoolZootool is a bookmarking website and tool for collecting images, documents, links and videos from anywhere on the Web. A bookmarklet allows you to collect items quickly and easily. You can then tag and organize your saved items in Zootool’s back end. You can also integrate Zootool with Tumblr, Twitter, Delicious and FriendFeed to share what you find. Screenshot via MacStories.BounceA fun and easy way to share ideas on a website. The tool allows you to make notes, write feedback in an overlay of every site and then share your notes with friends.Ninite Batch InstallerNinite lets you pick your favorite software from among an extensive list (Web browsers, messaging, media, images, documents, security, runtimes, file sharing, utilities, compression, developer tools and more), creates a batch installer for them and then installs them for you automatically. Alternative: Allmyapps allows you to bundle your favourite applications, install them in a single click and reinstall them whenever you need to.Support DetailsWhen in doubt, send your customers to this tool. Their data will be automatically read out of the browser (including Flash version, operating system, cookies, JavaScript status, screen resolution, browser size and more) and can be copied, sent directly to you via email or saved.MugTug’s DarkroomWhen you need to modify a picture but don’t have your favorite software on hand, you can use the all-in-one image processor MugTug’s Darkroom which was created for photographers. You are able to adjust levels, white balance, exposure, contrast and saturation and apply a few photographic effects. In addition, Darkroom allows to upload pictures from Picasa and Flickr. Alternatives: Pixlr and Sumo Paint.Visual Website OptimizerVisual Website Optimizer is undoubtedly the best A/B, split and multivariate testing software ever created by mankind.KeyonaryThis site a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 250 Photoshop shortcuts have been added. Simply type the name of application in the search box, and it spits out a long shortcut list.gridr buildrrrThis generators allows you to choose the grid for your layout, preview it online and generate the CSS code right away.Instant Blueprint – Create a web project framework in seconds.Instant Blueprint allows you to quickly create a web project framework with valid HTML/XHTML and CSS in only a matter of seconds, allowing you to get your project up and running faster!HummingbirdHummingbird lets you see how visitors are interacting with your website in real time. Hummingbird is built on top of Node.js, a new javascript web toolkit that can handle large amounts of traffic and many concurrent users.jsFiddleOnline Editor for the Web, with support of JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML and CSS. The tool lets you save and run your applications within the web browser.String: create a multi-language website or appEssentially, String is a version control for localization. This tool allows you to manage your language files – from PHP to PO to Rails to iPhone apps. You can invite users to translate your content, and keep track of changes. You can add new sections and languages as you go and then download your updated language files and place them in your app.TitanpadThis tool allows you to edit documents simultaneously with other users, highlighting each user’s edits in a different color. Editing is done in true real time. Nice solution for everybody who works collaboratively on text documents, whether in the same office or on the other side of the world.Pixelnovel Timeline: Version Control for Adobe PhotoshopThis tool basically integrates a Subversion client in Adobe Photoshop with an Adobe Photoshop plug-in. You can preview versions right in Photoshop and manage version control directly from Photoshop. Not free.0to255A simple tool that helps web designers find variations of any color. Simply pick the color that you want to start with and 0to255 gives you a range of colors from black to white using an interval optimized for web design. Then, just click the variation you want to use and the hex code is automatically copied to your clipboard.Load Impact: Website load/stress testThe tool lets you find out the performance limits of your website before you learn the hard way. It is an online service that simulates users accessing your site and creates test report graphs to find out how many users your site could handle.Ideone: Online IDE & Debugging ToolThis tool is an online compiler and debugging tool which allows to compile and run code online in more than 40 programming languages, among them C++, Java, JavaScript, Perl, PHP, Python and Ruby. Nice alternatives online: PHP Anywhere (online PHP editor) and CodeRun (allows you to develop, test and debug ASP.NET, PHP and Ajax applications online).Online Dummy Image GeneratorThis online tool generates dummy images for you site: you can specify size, background and foreground colors, image format and add custom text. You can also use shortcuts for several standard dimensions including ad sizes (mediumrectangle, skyscarper, leaderboard etc.), screen resolution sizes and video standards (ntsc, pal, hd720, hd1080).HiFi RegExp ToolRegular expressions can be a pain. The HiFi RegExp tool is 100% JavaScript using jQuery. This tool was created to help developers learn, practice, and compose regular expressions.TableizerClients often provide data in spreadsheet form, and reformatting it into HTML can be a real pain. This tool generates HTML tables out of spreadsheet data. Just copy and paste the cells from your spreadsheet, choose your options (font, font size and header color) and you have a properly formatted HTML table for your data.FollowUpThen: Easy Email ReminderIf you don’t mind sending your e-mails to a third-party, try this tool for easy email reminders. On your next email just include time-interval@followupthen.com and the tool will follow up after the time interval you specify. No account is required.Divine: Conversion tool from PSD to HTMLDivine is a plug-in that sits on top of Photoshop. Once you’ve finished designing in Photoshop, launch Divine plug-in in Photoshop, assign WordPress roles to the main elements (e.g. #footer, #header, etc.), and then the plug-in will prepare all the files you need. Once you set FTP access, the tool uploads the theme automatically to your server. Absolutely free.KaleidoThis tool allows you to create meaningful visuals for code and can be used to plan, organize and navigate code in a more intuitive way.SketchpadThis application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.Unicode code converterType or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut & paste the results into your document.Grid System GeneratorThis tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.ud.com namecheckThe tool checks availability of social usernames, domain names and trademarks.Typograph — Scale & RhythmA useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.ColorBrewer Intro – Selecting Good Color Schemes for MapsColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics. It is free to use, although we’d appreciate it if you could cite us if you decide to use one of our color schemes.CSS Inliner ToolIf you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.HTML Purifier – Filter your HTML the standards-compliant way!HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier removes malicious code (better known as XSS) and make sure your documents are standards compliant.RenderaRendera helps you learn HTML5 and CSS. Type in your HTML code and see it rendered in real-time. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports. The tool supports HAML and SASS, too.RegExrAn intuitive tool for learning, writing, and testing Regular Expressions.try ruby! (in your browser)This tool allows you to try out Ruby code in the prompt command line online. It supports Ruby’s built-in methods, and contains a step-by-step tutorial for Ruby newbies.Google Command LineGoogleCL is a command-line utility that provides access to various Google services. It streamlines tasks such as posting to a Blogger blog, adding events to Calendar, or editing documents on Google Docs.Tiny Fluid GridSimple tool that generates code for fluid grid-based layouts.Fonolo.comThis online tool lets you lets you skip the phone menus for hundreds of companies and makes it less frustrating to call large companies. For business owners, Fonolo allows your customers to actually see your phone menu options, before they call you.Producteev: Creating To-Do Lists with EmailsForward your important emails to task@producteev.com and the tool will create to-do lists on the fly and send you alerts when needed. It can be integrated in E-mails, IM, Web, iPhone, Gmail, Google Calendar etc.AddUse – User research made easyAddUse is a web based tool that helps you create, manage and present your user research in a simple, easy to use and cost efficient way. It’s a tool to use at any given moment in your development process. It presents the results from your user tests, surveys and questionnaires in a graphical way, efficiently helping engineering, marketing and management groups make the right decisions.bookwhenOnline registration for events, workshops, classes and courses. The free version allows for 150 events with 300 bookings per month.Further useful toolssee[Mike]code: tool for remote coding interviewThis simple tool lets you conduct a short coding interview remotely: it creates a disposable page for the job candidate and allows you to discover people who struggle to code on big or small problems.jsdo.itThis tool allows you to write code your browser, fork and modify any code, fix bugs and add features and also ask the community about your problems.JavaScript Error TrackingThe service tracks JavaScript errors that occur on your site and provides you with a stack trace to help you debug. Similar errors are grouped together.Old VersionOld Version has exactly that, the older version of some of your favorite programs. Why? Because newer is not always better. Sometimes the newer versions cause conflicts. This way, you can always go back to the older version that worked for you.OnbileOnbile is a free platform for creating and managing your Mobile Website version for iPhone, Android and Blackberry usersFree Bookkeeping, Accounting, & Tax Services; Self Employment & Freelance SuccessEasily import from online accounts to put your bookkeeping on autopilot and prepare taxes. Get up-to-date reports that give you visibility into your P&L, income, and expenses.iSendriSendr lets you send files to your friends directly, without uploading to a server.seekWPWordPress documentation search engine.speedtracerSpeed 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).the Awesome HighlighterThis tool lets you highlight text on web pages and then gives you a small link to the highlighted page.OpenWith.orgThis page provides detailed information about most file extension and links to free programs that can open and create each type of file.Last ClickKuku KlokOnline alarm clock and wake-up call for those of us who often work too much and fall asleep in front of the screen. Open the website, select the desired alarm time and set your favorite wake-up call. Keep the browser tab open. Happily, this online alarm clock works even if your Internet connection goes down. The available sounds are “Classic Clock,” “Electronic,” “Slayer Guitar,” “Military Trumpet” and “Cockerel.”What the Hex?Among the variety of methods of representing color values, some are easier to identify than others. The hexadecimal system, though, often looks incomprehensible. If you feel you know colors pretty well, then this is a simple game for you. All you have to do is match the hexadecimal code (which is actually a group of three hex numbers: #rrggbb) with the corresponding color. Of course, this is easier said than done, but you can adjust the difficulty by displaying between 2 and 48 possible answers.Would you like to see more similar round-ups on Smashing Magazine? Would you like to see more similar round-ups on SmashingMag?Market Research Related PostsYou may be interested in the following related posts:45 Incredibly Useful Web Design Checklists and QuestionnairesUseful Glossaries For Web Designers and Developers10 Useful Usability Findings and Guidelines50 Useful Design Tools For Beautiful Web Typography40 Desert Island Web Development Tools© Vitaly Friedman for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: time-savers, tools, useful
-
I posted to smashingmagazine.com
50 Powerful Time-Savers For Web Designers
http://feedproxy.google.com/~r/SmashingMagazine/~3/RHFm_2bQhhw/
- Tags:
- design
- workflow
- useful
- tools
- time-savers
June 28 2010, 6:17am | Comments »
-
I posted to smashingmagazine.com
50 Useful JavaScript Tools
http://www.smashingmagazine.com/2009/02/08/50-extremely-useful-javascript-tools/
By Jacob Gube JavaScript is a powerful client-side scripting language used in many modern websites and Web applications. In the hands of a skilled Web developer, JavaScript can enhance the user’s experience of the website and provide rich interactive components and features. But even though syntactically simple in nature, JavaScript is often difficult to author because of the environment it runs in: the Web browser. JavaScript’s popularity is evident in emerging technologies, such as Adobe AIR, which use it as a supported language for creating desktop-based applications. Below, you’ll find 50 excellent tools to help you achieve various tasks involved in authoring JavaScript code. You’ll find useful tools to speed up your coding processes, including debugging tools to hunt down places where your scripts break, unit testing and validation tools to test your scripts in various situations, security vulnerability scanners and code optimization tools to make sure your scripts are light as a feather. You’ll also find a few new and alternative JavaScript and AJAX frameworks to help you explore options beyond the big names (i.e. MooTools, jQuery, YUI, Dojo, Prototype), in addition to useful scripts to help you accomplish a host of design and development tasks related to JavaScript. Also, be sure to check out the following related posts:
75 (Really) Useful JavaScript Techniques 60 AJAX- and Javascript Solutions For Professional Coding jQuery and JavaScript Coding: Examples and Best Practices 50 Extremely Useful And Powerful CSS Tools
JavaScript/AJAX Authoring Tools
jQuery UI The jQuery UI allows you to design custom user interfaces for Web applications using the jQuery library. With jQuery UI, you can reduce the amount of code you write for common rich interactive features and website widgets. Be sure to check out the jQuery UI Demo page, which showcases some of the things you can accomplish using jQuery UI.
Google Web Toolkit The Google Web Toolkit (commonly referred to as GWT) is a framework for developing complex and fully featured AJAX-based Web applications. You write front-end code in Java that is later compiled into optimized and cross-browser-friendly JavaScript. GWT puts the focus on Web application development by reducing the need for testing and debugging JavaScript for browser quirks. Jx Jx is a JavaScript library for creating graphical user interfaces written on top of the MooTools framework. Jx is distributed with an MIT license and is well documented. Numerous examples as well as thorough and well-organized API documentation is available on the website.
Freestyle Webtop Toolkit Freestyle aims to reduce the complexity and time involved in deploying Web-based user interfaces by eliminating the separation of client-side and server-side development. With Freestyle, you focus on programming logic and UI design, and it handles the rest (i.e. cross-browser compatibility and DHTML and AJAX development).
Script# Script# is an AJAX and JavaScript authoring tool that allows developers to write in C#. It also allows .NET developers to leverage their existing knowledge and provides powerful tools associated with the .NET framework.
Aptana Jaxer Aptana Jaxer is the first “AJAX server” that allows developers to use their AJAX, HTML, JavaScript and DOM knowledge to create fully featured server-side-powered Web applications. With Jaxer, you can even write database queries in JavaScript syntax. Jaxer integrates very well with popular JavaScript libraries such as jQuery, Dojo and Ext JS. JS Regex Generator JS Regex Generator helps JavaScript developers write Regular Expressions for matching strings of text. This is commonly done for text-format validation, such as when checking if inputted text has the correct date and email format.
WaveMaker WaveMaker is open-source software for complete Web application development and deployment. You can find a host of demo applications built and deployed using WaveMaker on the Demo Applications page.
Documentation Tools
JSDoc Toolkit JSDoc Toolkit makes code documentation a breeze. Written in JavaScript, it helps developers automatically generate templates for JavaScript comments. It’s a great tool for managing large-scale applications developed by teams of developers who have different coding styles. jGrouseDoc jGrouseDoc is an open-source project distributed through Google Code under a modified BSD license. It lets developers document and manage their code comments using a format similar to Javadoc’s.
JavaScript Debugging Tools
Firebug Firebug is an extremely popular and well-regarded front-end debugging tool. It has all the features you’d expect from a JavaScript debugging tool, such as the ability to set breakpoints in your code so that you can step through your script. For people developing outside of Mozilla-based browsers, check out Firebug Lite, which is a JavaScript library you can include in your Web pages to access some of the features of Firebug.
Venkman JavaScript Debugger Venkman is Mozilla’s JavaScript debugger and an add-on for Gecko-based browsers. Venkman is a robust and fully featured JavaScript debugging environment, with a host of useful features and options, such as code profiling to inspect your script’s performance.
Drosera Drosera is an excellent debugging tool for Safari and WebKit-based browsers.
Opera Dragonfly Opera Dragonfly is a robust debugging environment for the Opera browser. Dragonfly allows you to view and inspect errors, debug your scripts and inspect and edit the DOM and CSS on the fly. NitobiBug NitobiBug is a browser-based JavaScript object logger and inspector. It runs on numerous browsers, including IE, Safari, Opera and Firefox. It is a powerful tool in helping developers build rich interactive AJAX applications. DebugBar DebugBar is an in-browser front-end debugger for Internet Explorer. Much like its Firefox counterparts, it has a robust set of features, such as DOM, JavaScript and cookie inspection. Be sure to check out Companion JS, which is a JavaScript debugging library to be used alongside DebugBar.
Internet Explorer Developer Toolbar Similar to Firebug, IE Developer Toolbar is an in-browser tool to help you debug front-end code in Internet Explorer. It’s especially handy as a debugging and inspection alternative to Firefox when you’re developing and testing in IE.
JavaScript Testing and Validation Tools
Test - JavaScriptMVC Test is a JavaScriptMVC component for easily setting up automated unit testing for JavaScript code. It lets you effectively test for DOM events (such as a key press or form submission), thereby lessening development time, oversight and errors associated with manual testing.
JsUnit JsUnit is a popular unit testing framework for JavaScript code. It’s a JavaScript port from another unit testing framework for Java called JUnit. JsUnit allows you to write test cases and provides tools for automated code execution. JSLint JSLint is a Web-based tool for verifying your JavaScript code for errors. It has a ton of features and settings that you can use to customize verification algorithms to suit your needs.
Crosscheck Crosscheck is an open-source testing framework for JavaScript. Crosscheck is unique because it works independent of environment: you can run tests outside of a Web browser, which avoids discrepancies that occur when testing in various browsers. YUI Test YUI Test is a suite of testing utilities that’s part of the YUI library developed by Yahoo!. It has numerous features, such as easy creation of test cases through an intuitive syntax, advanced failure detection and the ability to organize test cases by grouping them into test suites.
J3Unit J3Unit is an excellent object-oriented unit-testing framework for JavaScript. It gives you a host of options for writing automated test cases and has three modes: Static Mode, Local Browser Mode and Remote Browser Mode. Regular Expression Tool The Regular Expression Tool is an online utility that allows you to test your RegEx code against a sample test. It’s a handy tool to have around when you want to quickly test the efficacy of your regular expressions in a variety of example texts.
JavaScript Regular Expression Tester This is another handy tool for testing regular expressions within the Web browser.
JSLitmus JSLitmus is a lightweight tool for creating JavaScript benchmarks and performance tests, using an intuitive API.
Security Tools
AttackAPI AttackAPI is a framework for writing test cases of potential JavaScript exploits and vulnerabilities. jsfuzzer jsfuzzer is a fuzzing tool to help you write (and test for) attack vectors in JavaScript.
New and Alternative JavaScript and Ajax Development Frameworks
Clean AJAX Clean AJAX is an open-source framework for creating AJAX-based applications. Check out the demo page to see it in action.
SAJAX SAJAX is an excellent toolkit for developing AJAX-based applications. It supports PHP, Perl and Python.
JavaScriptMVC JavaScriptMVC is a Web application framework based on the MVC software architectural pattern. It speeds up Web development processes and lays down best practices, maintainability and standards as principles in a project’s development. qooxdoo qooxdoo is a simple and intuitive AJAX application framework. Be sure to check out the Demo Browser, a Web-based application that allows you to view demos of qooxdoo at work.
SimpleJS SimpleJS is a small and lightweight JavaScript library that provides developers with useful JavaScript functions for working with AJAX.
Image Manipulation and Graphing
Reflection.js Reflection.js automatically adds reflections to your images unobtrusively. Also check out instant.js, a similar script that adds an image border and tilts images on a Web page.
typeface.js typeface.js allows you to embed custom fonts on Web pages, freeing you from having to create images for HTML text. CanvasGraph.js CanvasGraph.js is a simple JavaScript library that lets you construct bar, line and pie charts using HTML’s canvas element.
flot flot is a JavaScript library for plotting data and has been tested to work in most modern Web browsers.
JavaScript Diagram Builder The JavaScript Diagram Builder is a JavaScript library that consists of a variety of objects and functions for constructing diagrams.
The Dojo Charting Engine The Dojo Charting Engine is a robust utility for creating components for data visualization, written on top of the Dojo Toolkit.
Useful Utilities and JavaScript Scripts
Processing.js Processing.js is a JavaScript port of Processing, the open-source data-visualization programming language. Check out examples that use Processing.js. AJAX Libraries API Google’s AJAX Libraries API allows you to serve popular JavaScript libraries using its CDN, which reduces the server load on your website. DamnIT DamnIT is an error-reporting service that allows you to gather feedback from beta testers after they’ve encountered a JavaScript error. This is perfect for live production testing and as a monitoring tool that helps you track errors and weak spots in your Web applications. ie7-js ie7-js is a JavaScript library that forces Internet Explorer to behave like a standards-based browser (like Firefox or Opera). It automatically fixes IE browser quirks and deviations from Web standards, as in the case of its box model. Lazy loader Lazy loader is a jQuery plug-in that delays the loading of images so that text content can load first, thereby making image-heavy pages load faster.
JavaScript Code Optimization and Minification Tools
JS Minifier JS Minifier is a Web-based tool for shrinking your JavaScript code to make it as lightweight as possible.
JSMIN JSMIN is a popular JavaScript minifier that removes unneeded characters (like spaces and tabs) and comments, thus reducing your script’s file size. YUI Compressor The YUI Compressor is another well-regarded JavaScript code-optimization tool developed by Yahoo!. Scriptalizer Scriptalizer is a helpful online tool for combining JavaScript files to reduce HTTP requests.
ShrinkSafe ShrinkSafe is a compression tool that reduces JavaScript file sizes. SlickSpeed Selectors Test SlickSpeed is a Web page for comparing the performance of the DOM object selection of various popular frameworks like MooTools and jQuery.
About the Author Jacob Gube is a Web developer, designer, and founder of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)
February 8 2009, 6:29pm | Comments »
-
I posted to smashingmagazine.com
50 Useful Design Tools For Beautiful Web Typography
http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
Typography is elegant when it is attractive and communicates the designer’s ideas. When chosen wisely and used carefully, it can be very effective in supporting the overall design. Designers are always exploring different techniques with type: some use images or sIFR to produce very beautiful typography, while others prefer CSS alone to get the typography just right. Today, we will look at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website. Below we cover typographic tools, useful typographic references, font browsers, typographic CSS- and JavaScript-techniques, hyphenation techniques, sIFR tools and resources, grids and related tools, free and commercial fonts, a guide to Web typography, examples of great Web typography. Please feel free to suggest further tools and resources in the comments to this post. And if you like this post please feel free to subscribe to our RSS-feed and follow us on Twitter . You may want to take a look at the following related articles:
50 Extremely Useful PHP Tools 50 Extremely Useful CSS Tools
- Typographic Tools Instead of doing your own testing, use the useful and time-saving tools below. They’ll help you play with typography and make choices by giving you a real-time preview of many of the available CSS font properties. HTML IpsumA useful little website created by Chris Coyier. It provides you with the standard Latin text already in HTML tags. Clicking on any of the blocks automatically copies the text to your clipboard!
TypechartTypechart lets you flip through, preview and compare Web typography while retrieving the CSS. You can browse different typographic styles. Each style corresponds to a style ID, which allows you to annotate prototypes and retrieve the CSS while coding. Another useful feature is that you can compare Windows (ClearType) rendering with Apple font rendering.
TTFTitles WordPress PluginThis plugin lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed (via hyperdjango).
FontstructFontStruct is a free font-building tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.
abcTajpu Firefox ExtensionType in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).
PXtoEMThis tool converts pixel-units to em-units using the 16px browser default size (via @briancray and @CasJam on Twitter).
Em CalculatorEm Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.
CSSTYPECSSTYPE v2 lets you preview your text as you modify it. You can set the font-family, size, color, letter-spacing, word-spacing, line-height and other properties. The CSS code can be generated easily once you are satisfied with the previews.
CSS-Typoset Matrix and code generatorThis tool (unfortunately, only in German) calculates font-sizes and line-height in em and px and presents them in a matrix. The tool computes both symmetrical and asymmetricam margin. Useful!
wp-typogrify WordPress Pluginwp-typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. Python-script for Django is available as well.
FontBurnerAfter you find the font that you would like to use, Font Burner gives you a chunk of code that you will insert into the head of your webpage. Provided you don’t have any stylesheet conflicts, the new font will show up on your site immediately.
Convert TrueType Font to sIFR Flash FileUpload your typeface and the tool generates the Flash-file (swf) and sends it to your e-mail. Text 2 PNG ConversionThis service provides you with the ability to convert you headlines and navigations to PNG images automaticlly. It works by adding a JavaScript file and selecting which tags to replace. Useful, for instance if you want to generate an image with an embedding e-mail-address. 7 Free Tools To Identify A FontA list of free online tools to speed up the identification process. 21 Typography Web Applications You Can’t Live Without 2. Useful typographic references Better CSS Font StacksA couple of useful font cascades for your CSS-stylesheet.
FontsMatrixMatrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite (via @lucianosb on Twitter)
Common fonts to all versions of Windows & Mac equivalentsThe list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as “browser safe fonts”.
Default Mac OS X 10.4 fonts list (via Elementiks)
Default Windows fonts list (via Elementiks)
3. Choosing a font Type TesterType Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.
STC fontBROWSERThis tools enables you to preview fonts installed on your system online.
Font PickerThis simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project. Also available as Adobe AIR application. FontTesterFont Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.
CSS Type SetCSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately (@jmreedy).
Flipping TypicalThis is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.
4. Typographic Techniques 12 Examples Of Paragraph TypographyA showcase of some interesting techniques for designing paragraphs, by Jon Tan. Some of these styles are experiments using pseudo elements and adjacent sibling selectors; browser support is not consistent.
Rendering Complex Type — Who’s got the Love?Learn how to create a complex typographic sample with pure CSS.
10 Examples of Beautiful CSS Typography and How They Did ItA lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.
typeface.jsWith typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR. So, instead of creating images or using Flash just to show your website’s text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as though your visitors had the font installed locally. It’s pretty easy to use: load the typeface.js library and some typeface.js fonts, then proceed as normal.
Facelift Image Replacement (FLIR)Facelift Image Replacement (FLIR) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that otherwise might not be visible to your visitors. The generated image is automatically inserted into your Web page via JavaScript and is visible in all modern browsers. Any element with text can be replaced, from headers (<h1>, <h2>, etc.) to <span> elements and everything in between! FLIR is SEO-friendly and only renders an image if JavaScript is enabled on the user’s browser. If you are using WordPress for your blog, you might find this plug-in useful to easily apply FLIR to your Web pages.
P+C DTRPHP + CSS Dynamic Text Replacement is a JavaScript-free version of the Dynamic Text Replacement method, allowing you to take a vanilla, standards-based (X)HTML Web page and dynamically create images to replace page headings, using only PHP and CSS. The technique is currenty unavailable for download.
Advanced Typography Techniques Using CSSWhile descriptions and basic uses of CSS typography controls have been beaten to death, many rich typographic capabilities of CSS are still not well documented. This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.
Typographic Contrast and FlowTypographic contrast is important because not every piece of content on a page has the same weight: some have greater significance than others. By creating contrast, you direct the reader’s attention to the important messages and also enhance visual appeal. Here are seven basic methods for creating typographic contrast, using size, typeface, color, case, style/decoration, weight and space.
5. Hyphenation OnLine HyphenationThis tool takes care of automatic Automatic hyphenation for texts and sites. The tool uses ­ and inserts hyphens in the right places to make the justified text look readable. The tool is a little bit buggy and not perfect, but is still useful. HyphenatorHyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation. 6. sIFR sIFR 2.0: Rich Accessible Typography for the MassessIFR (or Scalable Inman Flash Replacement) is a technology that allows you to replace text elements on the page with Flash equivalents. It uses JavaScript to target certain text page elements and replace them with Flash, which results in the same text but rendered in a new font. This means you are free to use any font you wish in your design, instead of being limited to a very small set of “safe” Web fonts. sIFR is easier to implement than any other image replacement technique. Instead of manually generating each header with an image editor, you’re able to skip the editor completely.
sIFR liteA solution similar to the original sIFR package, but smaller (3.7 Kb) than the original (22 Kb) and including even more nifty features. It auto-detects the color of text elements, is completely object-oriented, doesn’t use CSS selectors and targets elements by tag name and class. sIFRvaultA repository of sIFR fonts, rated, tagged and available for download. Users can submit their SWF-files as well. Please notice that you need to respect all copyright and licensing laws - some of the featured fonts appear to be commercial (via chrisjlee).
jQuery sIFR PluginThe jQuery sIFR Plugin is an addon for jQuery that makes it easy to replace text in a web page with flash text (sIFR). It gives you a function in javascript to replace text in a web page dynamically with sIFR (Scalable Inman Flash Replacement) text, using native jQuery functionality along with the jQuery Flash Plugin.
Multi color sIFR 2.0.1This version of sIFR supports strong, em and span-elements and can color parts of the headline in colors.
jQuery sIFR PluginThe jQuery sIFR Plugin is an add-on for jQuery that makes it easy to replace text on a Web page with Flash text (sIFR). The jQuery sIFR Plugin does all the work of figuring out the text, files, sizes, colors and any other configuration needed to convert text to a beautiful sIFR font, with consistent behavior across all major browsers.
sIFR GeneratorThe big disadvantage of sIFR is that creating sIFR files is a tedious task that also requires Adobe Flash Studio in order to create a .swf file with the font of your choice. At least, that was the big disadvantage until now. sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download. 7. Grids gridr buildrrrThis tool generates various grids on the fly and allows users to define the width of the grids, gutter as well as boxes for the layout.
The Grid SystemAn aggregator of articles, tools, books and resources related to grid-systems.
Typographic GridIf your website is heavy with text content, you will need to pay attention to the underlying grid. Check out Typography Grid, created recently by Chris Coyier: “I was just screwing around with typography and getting things to line up according to a strict horizontal and vertical grid. It was inspired by the Compose to a Vertical Rhythm article by Richard Rutter a few years ago, except uses unitless line height.” Check out the demo here.
Grid DesignerAnyone looking for a little help to get going with grid design should look at this handy tool. Grid Designer 2 lets you set variables for your layout, such as the number of columns, the width in pixels, gutters and margins. You can also set variables for the typography, so that you can control the size, weight, line height and other variables for your paragraphs and titles. After you set up your desired layout, all you have to do is export the CSS to use in your own design.
Vertical rhythm calculatorThis AIR application allows Web developers who use XHTML and CSS to build their pages to understand and calculate values for vertical rhythm. Enter your starting values in the application, and then you have the option of copying the resulting CSS code onto you clipboard for pasting into your existing style sheet.
8. Free and Commercial Fonts 40+ Excellent Freefonts For Professional DesignAn overview of over 40 excellent free fonts you might use for your professional designs in 2009.
60 Brilliant Typefaces For Corporate DesignOver 60 first-class commercial typefaces for corporate design.
80 Beautiful Typefaces For Professional DesignOver 80 gorgeous typefaces for professional design, based upon suggestions from designers and web-developers all over the world.
FontsquirrelA growing collection of free high-quality fonts. More high-quality free fonts.
Top 10 (Commercial) Fonts Of 2008This article lists this year’s most successful fonts on MyFont – in each genre. Based on sales numbers.
Clean font showcaseAn extensive collection of clean, legible free fonts.
Veerle Pieters’ 10 favourite typefaces
9. A Guide to Web Typography Good typefaces are designed for a purpose. Below, you will find very informative articles and guidelines, created by masters of typography to show us the overall effect that good type has on a project. On Choosing TypeA good article from I Love Typography on choosing the right typeface. The article explains everything from choosing between serif and sans-serif fonts to remembering to honor and read the content. It’s a great post for improving your typography skills.
The 100% Easy-2-Read StandardBest practices for good typography on the Web from Oliver Reichenstein.
Don’t be afraid of Serif FontsDavid Rodriguez discusses the advantages and disadvantages of sans-serif and serif fonts and suggests best practices. Elegant Web TypographyA great presentation by Jeff Croft about Web typography.
10 Common Typography MistakesThe goal of this post is to help designers and clients understand the importance of good typography skills and avoid some common mistakes. The Non-Typographer’s Guide to Practical Typeface SelectionCheck out Cameron Moll’s magic formula for picking the right typeface for your needs.
Make a list of those familiar typefaces that you trust and know will work well in a variety of projects. Supplement that list with a list of unfamiliar typefaces that address specific objectives for the project at hand. Test each typeface in small and large sizes. Test in both caps and lowercase.
The Principles of Beautiful TypographyThis is a great article that is actually extracted from the SitePoint book The Principles of Beautiful Web Design. The article goes into detail on fonts, letter forms, spacing, text size and more. It’s a great and informative read. Five Simple Steps to Better TypographyA series of articles by Mark Boulton that is highly worthwhile to read. 101 Typography Resources for Web DesignersA great list of typography-related resources from our author, Steven Snell. 10. Examples of Great Web Typography Some of the designs shown below demonstrate that sometimes less really is more. Others made it onto the list because they use text very well and demonstrate how the grid can be used to do wonders for the whole design. Jon Tangerine
Viget Inspire
works4sure
24ways
Alex Buga
Wilson Miner
Colour Pixel
Maxvoltar
Mark Dearman
Blogger Bake Off
Fixie Consulting
Drupalcon
Guilherme Neumann
Sursly
17 Stimulating Flickr Groups to Get You Typographically InspiredThis is a list of some of the best typography Flickr groups to feed your creative appetite.
17 Stimulating Flickr Groups to Get You Typographically InspiredIn this collection, you’ll find a variety of websites that showcase creative and functional uses of typography.
(al)
- Tags:
- useful
- typography
- tools
- Fonts
- CSS
January 27 2009, 8:00pm | Comments »
-
I posted to smashingmagazine.com
50 Extremely Useful PHP Tools
http://www.smashingmagazine.com/2009/01/20/50-extremely-useful-php-tools/
By Jacob Gube PHP is one of the most widely used open-source server-side scripting languages that exist today. With over 20 million indexed domains using PHP, including major websites like Facebook, Digg and WordPress, there are good reasons why many Web developers prefer it to other server-side scripting languages, such as Python and Ruby. Sure, PHP isn’t quick, but it is the most used scripting language in practice; it has detailed documentation, a huge community, numerous ready-to-use scripts and well-supported frameworks; and most importantly, it’s much easier to get started with PHP than with other scripting languages (Python, for example). That’s why it makes perfect sense to provide the huge community of PHP developers with an overview of useful tools and resources that can make their development process easier and more effective. This post presents 50 useful PHP tools that can significantly improve your programming workflow. Among other things, you’ll find a plethora of libraries and classes that aid in debugging, testing, profiling and code-authoring in PHP. You may also want to take a look at the following related posts:
50 Extremely Useful And Powerful CSS Tools 15 Helpful In-Browser Web-Development Tools
Debugging Tools
WebgrindWebgrind is an Xdebug profiling Web front end in PHP 5. It implements a subset of the features of kcachegrind, installs in seconds and works on all platforms. For quick ‘n’ dirty optimizations, it does the job.
XdebugXdebug is one of the most popular debugging PHP extensions. It provides a ton of useful data to help you quickly find bugs in your source code. Xdebug plugs right into many of the most popular PHP applications, such as PHPEclipse and phpDesigner. Gubed PHP DebuggerAs the name implies, Gubed PHP Debugger is a PHP debugging tool for hunting down logic errors. DBGDBG is a robust and popular PHP debugger for use in local and remote PHP debugging. It plugs into numerous PHP IDE’s and can easily be used with the command line. PHP_DebugPHP_Debug is an open-source project that gives you useful information about your PHP code that can be used for debugging. It can output processing times of your PHP and SQL, check the performance of particular code blocks and get variable dumps in graphical form, which is great if you need a more visual output than the one given to you by print_r() or var_dump(). PHP_DynPHP_Dyn is another excellent PHP debugging tool that’s open-source. You can trace execution and get an output of the argument and return values of your functions. MacGDBpMacGDBp is a live PHP debugger application for the Mac OS. It has all the features you’d expect from a fully featured debugger, such as the ability to step through your code and set breakpoints.
Testing and Optimization Tools
PHPUnitPHPUnit is a complete port of the popular JUnit unit testing suite to PHP 5. It’s a tool that helps you test your Web application’s stability and scalability. Writing test cases within the PHPUnit framework is easy; here’s how to do it. SimpleTestSimpleTest is a straightforward unit-testing platform for PHP applications. To get up and running with SimpleTest quickly, read through this pragmatic tutorial that shows you how to create a new test case.
SeleniumSelenium Remote Control (RC) is a test tool that allows you to write automated Web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. It can be used in conjunction with PHPUnit to create and run automated tests within a Web browser. PHP_CodeSnifferPHP_CodeSniffer is a PHP 5 script for detecting conformance to a predefined PHP coding standard. It’s a helpful tool for maintaining uniform coding styles for large projects and teams. dBugdBug is ColdFusion’s cfDump for PHP. It’s a simple tool for outputting data tables that contain information about arrays, classes and objects, database resources and XML resources, making it very useful for debugging purposes.
PHP Profile ClassPHP Profile Class is an excellent PHP profiling tool for your Web applications. Using this class will help you quickly and easily gain insight into which parts of your app could use some refactoring and optimization.
Documentation Tools
phpDocumentorphpDocumentor (also known as phpdoc and phpdocu) is a documentation tool for your PHP source code. It has an innumerable amount of features, including the ability to output in HTML, PDF, CHM and XML DocBook formats, and has both a Web-based and command-line interface as well as source-code highlighting. To learn more about phpDocumentor, check out the online manual. PHP DOXAn AJAX-powered PHP documentation search engine that enables you to search titles from all PHP documentation pages.
Security Tools
SecurimageSecurimage is a free, open-source PHP CAPTCHA script for generating complex images and CAPTCHA codes to protect forms from spam and abuse. ScavengerScavenger is an open-source, real-time vulnerability management tool. It helps system administrators respond to vulnerability findings, track vulnerability findings and review accepted and false-positive answered vulnerabilities, without “nagging” them with old vulnerabilities. PHP-IDSPHP-IDS (PHP-Intrusion Detection System) is a simple-to-use, well-structured, fast and state-of-the-art security layer for your PHP-based Web application. Pixy: PHP Security ScannerPixy is a Java program that performs automatic scans of PHP 4 source code, aimed to detect XSS and SQL injection vulnerabilities. Pixy takes a PHP program as input and creates a report that lists possible vulnerable points in the program, along with additional information for understanding the vulnerability.
Image Manipulation and Graphs
PHP/SWF ChartsPHP/SWF Charts is a powerful PHP tool that enables you to create attractive Web charts and graphs from dynamic data. You can use PHP scripts to generate and gather data from databases, then pass it to this tool to generate Flash (SWF) charts and graphs. pChart - a chart-drawing PHP librarypChart is a PHP class-oriented framework designed to create aliased charts. Most of today’s chart libraries have a cost; this one is free. Data can be retrieved from SQL queries or CSV files or can be manually provided.
WideImageWideImage is an object-oriented library for image manipulation, written in and for PHP 5. It’s a pure-PHP library and doesn’t require any external libraries apart from the GD2 extension. WideImageWideImage is a PHP library for dynamic image manipulation and processing for PHP 5. To be able to use the library, you should have the GD PHP extension installed on your Web server. MagickWand For PHPMagickWand For PHP is a PHP module suite for working with the ImageMagick API, which lets you create, compose and edit bitmap images. It’s a useful tool for quickly incorporating image-editing features in your PHP applications.
PHP Code Beautifier
PHP_BeautifierPHP Beautifier is a PEAR package for automatically formatting and “beautifying” PHP 4 and PHP 5 source code. PHPCodeBeautifierPHPCodeBeautifier is a tool that saves you from hours of reformatting code to suit your own way of presenting it. A GUI version allows you to process files visually; a command-line version can be batched or integrated with other tools (like CVS, SubVersion, IDE, etc.); and there is also an integrated tool of PHPEdit. GeSHi - Generic Syntax HighlighterGeSHi is designed to be a simple but powerful highlighting class, with the goal of supporting a wide range of popular languages. Developers can easily add new languages for highlighting and define easily customizable output formats.
Version-Control Systems
PhingPhing is a popular project version-control system for PHP. It is a useful tool for organizing and maintaining different builds of your project. xincxinc is a continuous integration server version-control system written in PHP 5 (i.e. continuous builds instead of nightly builds). It works great with other systems such as Subversion and Phing.
Useful Extensions, Utilities and Classes
SimplePieSimplePie is a PHP class that helps you work with RSS feeds. Check out the online RSS and Atom feed reader, which demonstrates a simple Web application that uses SimplePie.
HTML PurifierHTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier not only removes all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive white list, it also makes sure your documents are standards-compliant. Open source and highly customizable. TCPDFTCPDF is an open-source PHP class for generating PDF documents. htmlSQLhtmlSQL is a unique tool. It is a PHP class for querying HTML values in an SQL-like syntax. Check out the live demonstration of how htmlSQL works. The Greatest PHP Snippet File Ever (Using Quicktext for Notepad++)“A little something for all coders: a snippets file that I use for PHP coding. This is designed to be used with Quicktext for Notepad++, but feel free to adapt it to whatever text editor you prefer.” CreoleCreole is a database abstraction layer for PHP5. It abstracts PHP’s native database-specific API to create more portable code while also providing developers with a clean, fully object-oriented interface based loosely on the API for Java’s JDBC. PHPLinqLINQ is a component that adds native data querying capabilities to PHP using a syntax reminiscent of SQL. It defines a set of query operators that can be used to query, project and filter data in arrays, enumerable classes, XML, relational databases and third-party data sources. [via] PHPMathPublisherWith PhpMathPublisher, you can publish mathematical documents on the Web using only a PHP script (no LaTeX programs on the server and no MathML).
phpMyAdminIf you’re working with PHP, there’s a big chance you’re set up in a LAMP configuration. phpMyAdmin is Web-based tool for managing, building, importing, exporting and exploring MySQL databases. PHPExcelPHPExcel is a set of useful PHP classes for working with Microsoft Excel files. PHPExcel allows you to read Excel files and write to them. This is useful for dynamically generating Excel spreadsheets for downloading. PhormerPhormer is a PHP-based photo gallery management application that helps you to store, categorize and trim your photos online. xajax PHP Class Libraryxajax is a PHP class for easily working with PHP AJAX applications. It gives you an easy-to-use API for quickly managing AJAX-related tasks. Check out the xajax Multiplier demo and the Graffiti Wall demo to see the xajax PHP class in action. PHP User ClassPHP User Class is an excellent script that helps you create a system for user authentication (i.e. registration, log in, account profile, etc.). It’s a useful utility to have around if you require user registration for your Web applications. PHP-GTKPHP-GTK is a PHP extension for the GTK+ toolkit (a robust toolkit for developing GUIs). It is a suite of useful OOP functions and classes to help you rapidly build cross-platform, client-side GUI’s for your application.
PHP Online Tools and Resources
Minify!Minify is a PHP 5 app that can combine multiple CSS or JavaScript files, compress their content (i.e. remove unnecessary white space and comments) and serve the results with HTTP encoding (via Gzip/deflate) and headers that allow optimal client-side caching. This will help you follow several of Yahoo!’s Rules for High Performance Websites.
HTTP_StaticMerger: Automatic “merging” of CSS and JavaScript filesThis library automatically merges sets of static files (CSS or JavaScript) and speeds up page loading (by lowering the number of HTTP queries). It is recommended to use this together with caching reverse-proxy to minimize the response time. PHP Object GeneratorPHP Object Generator is an open-source Web-based tool that helps you quickly construct PHP objects and leverage object-oriented programming (OOP) principles in your code.
gotAPI/PHPgotAPI is a useful online tool for quickly looking up PHP functions and classes. Also check out the Quick PHP look-up widget example in case you’d like to include this awesome look-up feature on your website.
koderskoders is a search engine for open-source and downloadable code. It currently has over a billion lines of code indexed and isn’t limited to just PHP. PECLPECL is a directory of all known PHP extensions and a hosting facility for downloading and developing PHP extensions.
In-Browser Tools (Firefox Add-Ons)
FirePHPFirePHP is a Firefox extension that allows you to log data in Firebug. It has a variety of useful logging features, such as the ability to change your error and exception handling on the fly and to log errors directly to the Firebug console. To learn more about what FirePHP can do, check out the FirePHP guide on how to use FirePHP. For developers using the Zend PHP framework, you might find this guide on using FirePHP with Zend useful.
phpLangEditorphpLangEditor is a very handy Firefox add-on for translating language files and variables in your script.
PHP LookupPHP Lookup is a built-in search bar to help you quickly look up references to PHP syntax. PHP Manual SearchPHP Manual Search is a handy search bar that searches official PHP documentation from within your Web browser.
Frameworks for PHP
DwooDwoo is a PHP 5 template engine positioned as an alternative to Smarty. It is (nearly) fully compatible with its templates and plug-ins, but it is being written from scratch and is aimed to go one step further with a cleaner code base. CodeIgniterCodeIgniter is a powerful, high-performance, open-source PHP framework that helps you author PHP applications rapidly. CodeIgniter is known for having a light footprint, thereby reducing your server’s work. You can get up and running with CodeIgniter in a jiffy: it has an awesome online manual, a couple of helpful video tutorials and an active user forum.
YII FrameworkHere is a high-performance component-based PHP framework that is supposed to be more efficient than CodeIgniter, CakePHP, ZF and Symfony. An optimal solution for developing large-scale Web applications. Yii supports MVC, DAO/ActiveRecord, I18N/L10N, caching, jQuery-based AJAX support, authentication and role-based access control, scaffolding, input validation, widgets, events, theming and Web services. SolarSolar is a PHP 5 development framework for Web applications derived from the Savant templating engine. Solar uses the MVC architectural pattern and has a host of classes and functions for securing your Web app against SQL injection, cross-website scripting (XSS) and other common exploits.
symfonysymfony is an open-source PHP 5 Web application framework that is well known for its modularity and useful library of classes. To get up and running as fast as possible, you should check out the pragmatic symfony online tutorial called “The symfony 1.2 advent calendar tutorial,” which takes you through a step-by-step example of building your own symfony-based Web application. PEAR - PHP Extension and Application RepositoryPEAR is a popular framework and distribution system for reusable PHP components. The purpose of the framework is to provide a structured library of open-source code for PHP users, a system for code distribution and package maintenance and a standard style for PHP code. PropelPropel is an Object-Relational Mapping (ORM) framework for PHP 5. It allows you to access your database using a set of objects, providing a simple API for storing and retrieving data. {{macro}} template engine{{macro}} compiles initial templates into executable PHP scripts with very clean syntax (much cleaner than WACT and Smarty) and executes them very fast. The engine doesn’t use an XML-like syntax; there are only two data scopes, global and local, and no more data sources (all data is displayed with regular PHP variables); and the system supports all WACT features such as templates wrapping and including. Zend FrameworkThe Zend Framework by Zend Technologies (the creators of PHP’s scripting engine) is a popular PHP Web application framework that embraces the principles of PHP OOP; it’s very extensible and has built-in utilities for working with free Web service APIs, such as those of Google, Flickr and Amazon. QcodoQcodo is an excellent open-source PHP Web application framework. It’s subdivided into two parts: (1) Code Generator, and (2) Qforms. Code Generator handles the creation of object code and PHP and HTML front-end code from your data model. Qforms is an intuitive system for handling and creating complex PHP-driven HTML Web forms. Check out demos of applications that use Qcodo and presentational material that covers Qcodo.
SAJAXSAJAX is a JavaScript and AJAX application framework that works well with PHP (as well as several other server-side scripting languages). See SAJAX at work by going to Wall live demonstration. SmartySmarty is a popular PHP templating system to help you separate PHP logic and front-end code (HTML, CSS, JavaScript). It will keep your projects modular and easier to maintain. CakePHPCakePHP is one of the leading PHP frameworks for creating robust, fully-featured Web applications. CakePHP has an extensive and well-organized online manual. If you want to learn via video tutorials, check out the CakePHP screencasts.
Savant2Savant2 is another popular object-oriented PHP templating system. Instead of a special syntax unique to Savant2, you use PHP syntax to develop your project’s template. PHPSpecPHPSpec is a simple and intuitive PHP framework. It follows the Behavior-Driven Development principle and therefore allows you to write behavior-oriented code, oftentimes in plain English.
PHP IDEs and Editors
PHPEclipsePHPEclipse is a popular PHP source-code editor that is open source and runs on all the major operating systems, such as Windows, Linux and Mac OS. It has all the features you’d expect from a PHP source-code editor, such as code-folding, syntax highlighting, hover-over tool tips and support for XDebug and DBG.
PhpEDPhpED is an excellent IDE for Windows users. It is one of the most robust and feature-packed IDEs currently out on the market and has useful features such as a built-in source-code profiler to find bottlenecks in your PHP source code and excellent integration with third-party apps and services just as front-end code validation.
phpDesignerphpDesigner is a lightweight PHP editor/IDE that also handles front-end code and markup remarkably well. Check out the phpDesigner online tutorials, as well as screencasts on phpDesigner to help you learn more about the IDE.
Zend StudioZend Studio is an excellent PHP IDE for Eclipse. It’ll help you develop, deploy and manage Rich Internet Applications (RIAs) in an intuitive interface.
Aptana PHPAptana PHP is an open-source IDE extension/plug-in to be used in conjunction with Aptana Studio. To learn more, be sure to check out the online documentation about Aptana PHP. PDTPDT is a PHP Development Tools framework that’s part of the Eclipse project. PDT includes all the necessary tools for you to create PHP-based Web applications. VS.PhpVS.Php is a PHP IDE for MS Visual Studio, making it a great IDE for recently converted ASP developers who have used MS VS to develop Web applications. To get you up and running ASAP with VS.Php, check out Jcx.Software’s online tutorials as well as its online documentation. PHPEditPHPEdit is an excellent PHP editor/IDE with a ton of useful features and a very intuitive user interface. To learn more about why PHPEdit is a good IDE, read the 10 reasons to use PHPEdit and view the introductory screencast about PHPEdit.
Sources and Resources
PHP Function ReferencePHP Function Reference (PHPfr) is a Mac OS X dashboard widget that provides a fast look-up of information about the PHP Web programming language. 30 Useful PHP Classes and Components30 useful PHP classes and components that you can use to test, develop, debug and deploy your PHP applications. PHP advent 2008In December, phpadvent.org collected the wisdom of people in the PHP community who kindly donated their ideas and tips to see us through the new year. Useful in-browser development tools for PHP PHPClasses.orgA huge repository of various PHP classes. PHP Developer’s ToolboxVarious PHP-related resources in a brief overview.
Related articles You might also want to take a look at the following related posts:
50 Extremely Useful And Powerful CSS Tools 15 Helpful In-Browser Web-Development Tools
About the Author Jacob Gube is a Web developer/designer and founder of Six Revisions, a blog on Web development and design. If you want to connect with the author, you can follow him on Twitter. (al)
- Tags:
- useful
- Developers Toolbox
- tools
- php
January 20 2009, 8:00pm | Comments »
-
I posted to smashingmagazine.com
45+ New jQuery Techniques For Good User Experience
http://www.smashingmagazine.com/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/
by Noura Yehia JavaScipt libraries have made huge leaps and bounds in helping developers write code and develop products more quickly. jQuery is one of the most popular JavaScript frameworks, with powerful tools that improve the user’s interaction with Web applications. jQuery has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax. To help you take it up a notch, we share below some methods that can help you give visitors to your website an amazing user experience. Here are over 45 impressive jQuery plug-ins and techniques that have been recently created and that could make the development of your next website an easier and more interesting experience than the last. You may want to take a look at the following related posts:
jQuery and JavaScript Coding: Examples and Best Practices 75 (Really) Useful JavaScript Techniques 80+ AJAX-Solutions For Professional Coding 60 More AJAX- and Javascript Solutions For Professional Coding
Dynamic Content 1. Build A Login Form With jQueryIn this tutorial, we’ll create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.
Spoiler Revealer with jQueryA simple technique that hides some content first and fades it in once a link is clicked.
AJAX UploadThis AJAX file upload plug-in allows users to easily upload multiple files without having to refresh the page. In addition, you can use any element to trigger the file selection window. The plug-in creates a semi-transparent file input screen over the button you specify, so when a user clicks on the button, the normal file selection window is shown. After the user selects a file, the plug-in submits the form that contains the file input to an iFrame. So it isn’t true AJAX but provides the same user experience.
FCBKcompleteGive your users fancy Facebook-like dynamic inputs, with auto-complete and pre-added values.
Create Accessible Charts Using Canvas and jQueryThis tool is proof that you can use the <canvas> element to illustrate HTML table data. The idea is a good one: putting the data in a table allows it to remain accessible, while the chart can be shown for visual enhancement.
Form Manipulation 6. Radio Button and Check Box ReplacementThis jQuery tool replaces radio buttons and check boxes with a more appealing display.
- Submit a Form without a Page Refresh
January 15 2009, 8:00pm | Comments »
-
I posted to smashingmagazine.com
8 Useful WordPress SQL Hacks
http://www.smashingmagazine.com/2008/12/18/8-useful-wordpress-sql-hacks/
By Jean-Baptiste Jung Over the past 10 years, the MySQL database has become incredibly popular on the Web. Every WordPress blog is driven by a MySQL database, which contains the blog’s posts, settings, comments and much more. While plug-ins and even coding hacks can solve some problems and achieve some tasks, sometimes you don’t have any other choice than to execute SQL commands in phpMyAdmin or directly to the database via SSH. Let’s take a look at 8 useful SQL hacks for WordPress. Each section of this post presents a problem, suggests a solution and provides an explanation to help you understand the solution. 1. Creating a Backup of Your Database
The problem. While the tips in the rest of this post have been tested, you should definitely not try any of them without first having a proper backup of your MySQL database. The solution. To create a manual backup of your WordPress database, follow these simple steps:
Log in to phpMyAdmin and select your WordPress database. Once done, click the “Export” button located in the horizontal menu. Choose a compression method (personally, I use gzip), and click the “Execute” button. Your browser will ask you if you want to download the backup. Of course, select “Yes,” and then store it on your hard drive.
Explanation. Note that creating a backup of your WordPress database can be more easily executed with the WP-DB-Backup plug-in. WordPress users should install this plug-in if they have not yet done so and create regular backups of their data. 2. Batch Delete Post Revisions
The problem. Post revisions, a new WordPress 2.6 feature, can be very useful, but they also increase the size of your MySQL database. Sure, you can manually delete posts revisions, but that’s very long and boring work. The solution. The solution to this problem is simple: we batch delete post revisions by using a simple SQL query. The result can be almost unbelievable if you have a lot of posts: Your database size will be reduced by half!
Log in to phpMyAdmin and select your WordPress database. Click the “SQL” button. Paste the following code in the SQL command window: DELETE FROM wp_posts WHERE post_type = "revision";
You’re done. Depending on how many posts you had in your WordPress database, you may have saved lots of precious space!
Code explanation. The wp_posts table has a field named post_type. This field can have one of many values, such as “post,” “page” or “revision.” When we want to get rid of post revisions, we simply run a command to delete any entry in the wp_posts table in which the post_type field is equal to “revision.” Source:
How to: Batch delete post revisions
- Erase 5000 Spam Comments in a Second
The problem. True story: a friend of mine recently created his own blog and started to promote it everywhere on the Internet. After some weeks of intensive work, he spent some days on vacation without Internet access. When he came back home, he looked at his blog and saw… 5000+ comments awaiting moderation! Of course, most of them were spam, but he was actually about to check them all to make sure he did not delete a valid comment made by one of his regular readers. The solution. Happily, my friend told me about his spam problem. He had already spent 45 minute manually deleting spam when I showed him this useful SQL tip.
Log in to phpMyAdmin and select your WordPress database. Click the “SQL” button. Paste the following code in the SQL command window: DELETE from wp_comments WHERE comment_approved = '0';
Goodbye bad comments! Enjoy your spam-free database!
Explanation. The wp_comments table contains a field named comment_approved, which is a boolean value (1 or 0). Approved comments have a value of 1, and comments awaiting moderation have a value of 0. By running the above command, we simply delete any comments that haven’t been approved yet. Be careful. While this solution can be pretty useful if you have millions of spam comments to delete, it will also erase valid unapproved comments. If you don’t already use Akismet, install it now to prevent spamming. Source:
Mark asked: How to batch delete spam comments on a WordPress blog?
- Change the Post Attribution
The problem. When you installed WordPress, an “admin” account was created. Some bloggers make the mistake of using that account to write their posts, until they realize that it’s not personal at all. The solution. Modifying author attribution on each post takes a lot of time. Happily, SQL can help you get things done:
Log in to your phpMyAdmin and select your WordPress database. First, we have to get the right user IDs. To do so, open the SQL command window and execute the following command: SELECT ID, display_name FROM wp_users;
phpMyAdmin will display a list of user IDs associated with WordPress users. Let’s say that NEW_AUTHOR_ID is the ID of the more recently created author, and OLD_AUTHOR_ID is the original admin account ID. After you swap the NEW_AUTHOR_ID and OLD_AUTHOR_ID IDs, run the following command: UPDATE wp_posts SET post_author=NEW_AUTHOR_ID WHERE post_author=OLD_AUTHOR_ID;
That’s all. All posts previously attributed to admin are now attributed to whichever valid user you have selected.
Source:
How to: Change author attribution on all posts at once
- Manually Reset Your Password
The problem. In order to protect their blogs, people often pick strong passwords, such as u7*KoF5i8_. Of course, this is a good thing, but I have heard many stories of forgotten admin passwords. The solution. When you lose your password, WordPress can email you a link to reset it. But if you don’t have access to the email address recorded in the WordPress database anymore, or if you prefer just running a simple command instead, here is the hack.
Log in to your phpMyAdmin, select your WordPress database and open the SQL window. Insert the following command (assuming your username is “admin”): UPDATE
wp_usersSETuser_pass= MD5('PASSWORD') WHEREwp_users.user_login=adminLIMIT 1;You’re done. Your password has been successfully replaced by whatever you inserted in space above marked “PASSWORD.”
Explanation. User passwords are stored in the wp_users table. Of course, an MD5 hash is used to secure the password. We have to set up an “UPDATE” SQL request and use the built-in MD5() MySQL function to convert our password to MD5 and then update it. The “WHERE” clause ensures that we’re updating only the admin’s password. The same request without the “WHERE” clause would result in all passwords being updated! Source:
WordPress: How to reset a password manually
- Change Your WordPress Domain Name
The problem. Although it is not recommended, you may want at some point to change your domain name while keeping your blog and its data. Because WordPress records your domain name in the database, you have to change the database in order to connect your new domain name to your WordPress blog. The solution.
You guessed it: the first thing to do is log in to your phpMyAdmin and select your WordPress database. Click the “SQL” button to open the SQL command window. In order to change your WordPress URL, execute this first command: UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldsite.com', 'http://www.newsite.com') WHERE option_name = 'home' OR option_name = 'siteurl';
Then, we have to replace the relative URL (guid) of each post. The following command will do that job: UPDATE wp_posts SET guid = replace(guid, 'http://www.oldsite.com','http://www.newsite.com');
We’re almost done. The last thing to do is a search and replace in the wp_posts table to make sure that no absolute URL is still here: UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldsite.com', 'http://www.newsite.com');
You’re done. You should be able to log in to your WordPress dashboard using your new URL.
Explanation. To easily change our WordPress domain name, I took advantage of the super-useful MySQL function “replace,” which allows you to replace one term by another. Source:
Changer le nom de domaine d’un blog Wordpress sans encombres
- Display the Number of SQL Queries on Your blog
The problem. When trying to optimize your blog’s loading time, knowing the number of queries made to the database is important. In order to reduce queries, the first thing to know is how many queries are made on a single page. The solution.
This time, no need to log in to phpMyAdmin. Simply open the footer.php file in your theme and append the following lines of code: <?php if (is_user_logged_in()) { ?> <?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds. <?php } ?>
Save the file and visit your blog. In the footer, you’ll see the number of queries made to the WordPress database as well as the time it took to make them.
Explanation. Seems that many WordPress users aren’t aware of this useful function. The get_num_queries() function returns the number of executed queries during a page load. Note that the above code will only display the number of queries to logged-in users, because regular visitors and search engine bots don’t need to know about it. But, if you’d like to make it public, simply remove the if (is_user_logged_in()) conditional instruction. Source:
How to: Display page loading time + number of queries
- Restore Your WordPress Database
The problem. Let’s say, for some reason, such as a hacking or upgrade problem, you have lost your blog data or it has become corrupted. If you have a backup (and I hope you do!) you will have to import it to your WordPress database. The solution.
Log in to phpMyAdmin and select your WordPress database. Click the “Import” button in the horizontal menu. Click the “Browse” button and select the most recent database backup on your hard disk. Click the “Execute” button. If everything went well, your WordPress database is fully functional again.
About the author Jean-Baptiste Jung, a 26-year-old blogger from Belgium, blogs about WordPress at WpRecipes and about everything related to blogging and programming at Cats Who Code. You can stay in touch with Jean by following him on Twitter. (al)
December 18 2008, 3:35pm | Comments »
-
I posted to smashingmagazine.com
The Ultimate Web Developer’s Christmas Wish List
http://www.smashingmagazine.com/2008/12/17/the-ultimate-web-developers-christmas-wish-list/
By Glen Stansberry As the mistletoe is hung and egg nog served, friends and family of Web developers around the world are pulling their hair trying to figure out what to get someone who works on the Web for a living. Our loved ones typically have no idea what to get us for Christmas, because for many, our job and online world are very foreign places. Instead of getting the traditional pack of underwear, neck ties or socks, you can give your friends and family a nudge in the right direction with a gift idea from this list. Please notice that often it’s even a better idea to take a closer look at the blog of a web-developer to find a wish list containing concrete items that a designer, blogger or programmer would like to get for Christmas. It also makes sense to consider the environment of the web-developer — for instance, if you find an Apple logo on the back of his or her car, it is probably not a good idea to spend money on a Windows-application. If possible, pay close attention to the applications, frameworks and tools the web-developer uses. Once you know the environment, you can better find out what is needed and how an untraditional Christmas gift can become a pleasant Christmas surprise. It’s been said that “It is better to give than to receive,” so let’s help our friends and family give to us by providing an extensive list of tools that we’d love to see under the Christmas tree this year. Feel free to send this list to your relatives if you’d like to get a solid, useful gift for the upcoming holidays! 1. Ergonomic Office Chair Ergonomic office chairs are a bit of a pricey Christmas gift and may be out of most people’s shopping budget. High-quality chairs as a whole aren’t cheap, but when you take into account how long developers spend sitting in office chairs, they’re a small price to pay for health. Here are some highly reviewed ergonomic chairs:
Aeron ergonomic office chair: $674.
Freedom Chair by Humanscale: $700.
Stealcase Leap: $849.
Office Star Deluxe Ergonomic Leather Chair: $270.
- Ergonomic Keyboard Because Web developers usually spend anywhere from 8 to 12 hours per day on the computer (sometimes more!), a comfortable keyboard is an absolute must. However, many developers use whatever keyboard is shipped with their computer, and many times the keyboard isn’t very friendly to extended usage. Please notice that some web developers prefer to work with laptops instead of desktop PCs which is why it may be reasonable to look for an ergonomic mouse instead. Here are a few of the top ergonomic keyboards:
Kinesis AdvantageA little pricey, but one of the best: $299.
Microsoft Natural HandOne of the most recommendable ergonomic keyboards: $60.
Tru-Form Pro -Contoured Ergonomic KeyboardA highly rated Windows ergonomic keyboard: $80.
- Office Plants While it may not be high on the list of things a Web worker might want, a plant for the office is an extremely thoughtful gift. Studies have shown that plants make for much more productive work environments, because they improve air quality, control humidity and provide many other benefits. In fact, studies have shown that office spaces with plants actually improve creativity. Photo by misocrazy There are any number of household plants that can improve an office space. WikiHow has an excellent article on how to choose a good office plant for your Web developer.
- Visual Editors Visual editing applications can speed up the layout process of a website, providing quicker turnaround times. While not all Web developers use visual editors, many do use them to see what’s going on with their code. Dreamweaver is a robust Web authoring tool for both Mac and Windows users. It’s far and away the most popular of the Web editors. $399.
Coda is a beautiful Mac application that combines a powerful text editor, Subversion, CSS, file transfer and terminal all in a single window. The file transfer is done by the Coda makers’ excellent FTP-application Transmit. If you already own Transmit, Coda costs $85, without $99.
You can find more editors worth considering in our reviews CSS Editors reviewed, WYSIWIG-Editors reviewed and Source code editors reviewed. 5. Advanced Text Editor Text editors are lifelines for Web developers. Lots of time can be saved with text editors that have extended functionality. Auto-completion, language formatting and a slew of other features would be helpful when laying out a theme or programming Web functionality.
TextmateAn advanced text editor for Mac: $52.
UltraEditPopular professional Windows text editing application that boasts over 2 million users worldwide: $50.
BBEditAnother powerful text editor for Mac users: $125.
E Text EditorThe Windows equivalent of Textmate: $34.95.
Please notice: if a web-developer uses Notepad++, a robust freeware editor for Windows users, he or she will be very unlikely to switch to one of the above mentioned applications.
- CSS Editor CSS editors are very specific visual editors that pay attention only to CSS. They’re quite handy to have around for debugging code and quickly setting up website designs.
Style MasterA robust CSS editor for both Mac and Windows users: $60.
CSSEditThe Mac-only CSS editor that won the prestigious 2007 Apple Design Award for Best Development Tool: $39.
- Subversion Client Subversion is an excellent way for developers to work on shared code without having to worry about spoiling someone else’s updates. Subversion is also quite handy when it comes to backing up data and keeping versions of local files, which can be especially useful for designers wanting to store revisions of their work. The only downside to subversion is the learning curve. It can be quite tricky learning how to create, manipulate and sync your repositories. But a subversion client can make the learning curve much smaller with tools for streamlining your workflow, making updates, reverting to previous revisions and using diff to compare versions all within a client on your computer, no terminal necessary. Here are some of the best subversion clients:
VersionsA Mac-only subversion client that also interfaces with Beanstalk, a subversion host: €39.00 (approximately $52).
Tortoise SVNA freeware SVN utility for Windows. If a web-developer doesn’t know about SVN yet, he’ll never forget you if you’ll point him to it.
- Hosted Versioning Subscription What better complement to a nice subversion client than a subscription to a versioning service to remotely house your repository? If you’re using Subversion, then Beanstalk is an excellent SVN hosting service. Beanstalk offers a free account as well as higher levels of service with more repositories, users and storage, starting at $15 per month.
If you’re using Git, then GitHub is a popular online Git repository. It has a free plan if you’re running an open-source project, giving you up to 100 MB of space, otherwise GitHub offers monthly subscription plans starting at $7 per month.
- Creative Coffee Mugs
It’s a safe assumption that many designers and Web developers drink coffee or tea. Coffee mugs make great stocking stuffers, because they’re typically not that expensive, and it’s guaranteed they’ll be used. Web Urbanist has an excellent roundup of interesting coffee mugs that you can give as gifts this holiday season.
- Backup Software There is nothing more valuable to developers and designers than daily backups of their hard drive. Losing a hard drive is a Web worker’s worst nightmare, and any tool that can ensure it doesn’t happen is greatly appreciated.
MozyMozy is a simple solution that runs in the background and backs up the hard drive at set intervals. Both Windows and Mac users can enjoy this service for free if they’re backing up less than 2 GB of data. Otherwise, a $5 per month subscription is required.
Jungle DiskJungle Disk uses your Amazon S3 account to regularly back up your hard drive on Amazon’s servers. Available for Windows, Linux and Mac users for $20.
SyncbackIf you’re a Windows user, you can save money with the freeware utility Syncback, which schedules backups to an external hard drive. Lifehacker has an excellent tutorial on how to do this.
- Browsershots Browsershots is an incredible resource that every developer should have. Browsershots takes a screenshot of any Web page and allows you to test layouts across many different browser types and operating systems. Developers can see how their layout looks in IE on Windows, Firefox on Linux, and almost any other combination they can think of.
Browsershots offers a priority service that gives paying members immediate screenshot processing (which can otherwise take hours if many screenshots are requested). 12. Subscription to libraries or magazines Knowledge is the gift that keeps on giving. It’s definitely a good idea to give a web-developer subscription to a journal or magazine, or you can also consider a subscription for an online-library. For instance, O’Reilly is an excellent resource for the developer thirsting for knowledge. A Web development industry leader for many years, O’Reilly provides many great resources for those wanting to learn new languages, techniques and other development skills.
For a monthly fee, O’Reilly provides online access to its complete library, with a service called Safari. The Safari Bookshelf plan is $22.99 and restricts access to 10 books per month. The Safari Library plan offers more types of content (video, full downloads) and allows for unlimited access to its books for $42.99 a month. 13. Books, books, books There are plenty of books out there that a web developer would love to get for Christmas. It would be important to list all of them, but fortunately we and other bloggerse have selected some useful books already. Make sure that you select a gift that really fits to the interests of a person: no, not every web-developer is a huge fan of Swiss design and not every typographer would love to have a book on SEO optimization techniques. Here are some useful lists where you can find useful and interestind web-development related books:
Usability and Interface Design Books 30 Essential Books For Industrial DesignersSome useful books for web-developers are in the list as well. 25 Must Buy, Borrow Or Steal Books For Web Designers 40+ Books For Professional Design and Development 30 Delightful Graphic Design Books Useful Web Design Books Powerful Design Books
- Adobe Creative Suite 4 Web Premium If you’re feeling really generous this Christmas, then head on over to Adobe and snag the Adobe Creative Suite 4 Web Premium software package. While it is a tad expensive ($1,699), you’ll get 11 Adobe products that can greatly enhance a Web developer’s workflow. Photoshop, Dreamweaver, Illustrator and Fireworks are all included, along with many other programs. This software package is a virtual Swiss army knife for Web developers. If you give it to a Web developer, he will certainly never forget you.
Notice: while there isn’t a comparable set of free tools to match the Creative Suite 4 Web Premium package, Gimp is an open-source image editor that is supported across Linux, Mac and Windows platforms. If a web-developer is a Gimp fan, you may want to search for a useful Gimp-book out there. 15. iPhone Developer Program Many developers want to get more involved in the iPhone Developer program, which gives developers access to build and distribute iPhone apps through Apple. A standard program developer account costs $99.
An excellent complementary gift to the iPhone Developer program would be the iPhone Developer’s Cookbook: Building Applications with the iPhone SDK, an excellent tutorial that answers questions that the iPhone SDK documentation doesn’t answer.
- Password Management Software Nobody likes to remember all of their passwords, least of all Web developers. We may have tens or even hundreds of account, user name and password combinations to remember, many of which are used daily. Software that stores passwords is a perfect gift for any Web developer. There are plenty of software options, both free and paid, that help with password storage on any platform.
1PasswordHighly rated Mac software that stores your passwords and syncs data between different browsers and other programs: $39.95.
RoboformRoboform is another highly rated Windows password client that has won many awards, such as PC Magazine Editor’s Choice and Download.com’s Software of the Year: $29.95.
PasspackPasspack is an online solution for storing passwords. It offers a free account of up to 100 entries and a pro account for €10 ($13.50). Passpack
KeePassAn open-source password manager for Windows.
- Screen Capture Software Capturing screens is an almost daily routine with Web developers. A picture is worth a thousand words, and this is especially true with development. Many times, it’s easier just to show a screenshot of a buggy Web page than to try to describe what’s wrong. Here are a few screenshot services and software that can speed up this process.
SnagItWindows-only screen capturing software that quickly captures, edits and shares screenshots: $49.95.
JingJing is the little brother to SnagIt, because they’re both made by TechSmith. Jing quickly takes snapshots and allows simple editing and sharing via many online services. Jing is freeware.
SkitchSkitch is similar to Jing, except that the software only works for Mac computers. You can snap a screenshot, annotate, edit and upload the screenshot to skitch.com. Skitch is freeware.
- Project Management Software There are plenty of reasons for Web developers to use project management software: to collaborate with other project members, to organize their workflow and to generally stay on top of all that needs to be done when working on a project. Here are a few of the best project management and task manager software products.
BasecampLong considered the best project management tool, Basecamp is an excellent online service that tracks projects for many users. Basecamp offers a free basic plan, and extended plans start at $24 per month.
Action MethodAction Method is an excellent project management tool that allows you to add references, discussions and events to any project. Unlike services like Basecamp’s, Action Method allows you create unlimited projects with a paid account of $12 a month.
OpenProjOpenProj is an open-source project management solution for your desktop. It has been downloaded over 800,000 times since its launch.
activeCollabactiveCollab is another highly rated online project management software package. However, unlike Basecamp, activeCollab allows you to install the software on your own website and server. Plans start at $199 per year.
- Idea Capturing Tools Keeping ideas and thoughts together can be a struggle for developers and designers. Fortunately, there are tools that can capture and store the ideas.
EvernoteThis tool can be indispensable for capturing ideas anywhere. You can record a voice memo, take a screenshot, clip a Web page or just write a note. Evernote syncs your captured ideas online and locally, and it even has mobile access and an iPhone app. With Evernote, you’ll never let your Web developer lose an idea again. (Evernote even allows people to purchase the premium level plan as a gift.)
JottJott allows you to call a number and record an idea (or “jott”), and then the speech is converted to text. Jott is a free service but has extended plans starting at $39.50 a year.
Moleskine - Sometimes the best way to capture a thought is to write it down the old-fashioned way, with pen and paper. A moleskine is an excellent gift for those who prefer the paper method.
- Music or movies Because Web developers spend hours in front of the computer each day, it’s only natural that many will listen to music. Music is a gift that never wears out. Consider an iTunes or Amazon MP3 gift card.
A subscription to a music service is another great gift idea; for a monthly fee, you can listen to as much music as you want. Rhapsody music is a music subscription service that allows you to use (non-iPod) portable music players and your computer to stream any song, album or artist from its vast collection. Plans start at $12.99.
Another great idea is a high performance over-ear headphones that deliver the perfect atmosphere for a creative and enjoyable workflow. Some good examples of professional over-ear headphones are:
Sennheiser HD-555 Audiophile HeadphonesA comfortable, high-quality headphone system. Price: $98.99.
Bose® QuietComfort 2 Acoustic Noise Cancelling HeadphonesThis system has a noise reduction and quality sound for travel, work and home. AAA batteries guarantee a 40 hours average life. Price: $269.
the recent Consumersearch Headphones Review may provide you with more useful pointers to various headphones.
You may also consider buying a couple of DVDs with movies the web-developer will probably like. In the end, web developers are also people and yes, sometimes we do watch movies. Summary To conclude, here is a brief summary of some useful things that would put a smile on a web-developer’s face, make him or her happy and will definitely help to make the life of a web-developer easier:
ergonomic office chair, ergonomic keyboard or mouse, creative coffee mugs, office plants, visual editors, CSS-editors and text-editors, Subversion client, hosted versioning subscription, backup software, subscriptions to librarier or magazines (e.g. O’Reilly), books, books, books, Adobe Creative Suite 4 Web Premium, iPhone Developer Program, password management software, screen capture software, project management software, idea capturing tools, music, movies or headphones, even more ideas…
What’s your favourite gift? What would you like to get as a present for Christmas? Is something missing in the list? And what are you going to give to web developers for this Christmas? Share your thoughts, ideas and opinions in the comments! What gift would you like to get for Christmas? ( polls) About the author Glen Stansberry is the editor at Web Jackalope, a blog about creative Web development. You can follow him on Twitter. (al)
December 17 2008, 3:38pm | Comments »
-
I posted to smashingmagazine.com
10 Useful Techniques To Improve Your User Interface Designs
By Dmitry Fadeyev Web design consists, for the most part, of interface design. There are many techniques involved in crafting beautiful and functional interfaces. Here’s my collection of 10 that I think you’ll find useful in your work. They’re not related to any particular theme, but are rather a collection of techniques I use in my own projects. Without further ado, let’s get started. 1. Padded block links Links (or anchors) are inline elements by default, which means that their clickable area spans only the height and width of the text. This clickable area, or the space where you can click to go to that link’s destination, can be increased for greater usability. We can do this by adding padding and, in some cases, also converting the link into a block element. Here’s an example of inline and padded links, with their clickable areas highlighted to show the difference:
Obviously, the larger the clickable area is, the easier it is to click on the link because there is less of a chance of missing it. Converting links into block elements makes the text area span the whole width of the container, unless the width is specified otherwise. This makes it ideal for links located in sidebars. We can do it with the following code:
a { display: block; padding: 6px; }
Make sure to also add a healthy dose of padding to the links, because converting a link into a block only affects its behavior and width; adding padding ensures that the link is high enough and has some room to breathe. 2. Typesetting buttons Attention to every detail is what separates a great product from a mediocre one. Interface elements such as buttons and tabs are clicked on many times a day by your users, so it pays to typeset them properly; and by typesetting I mean positioning the label. Here’s a couple of examples of the kind of misplaced labels I sometimes notice:
At first glance they look okay, but notice that the text is placed too high because the lowercase letters have been used as a guide to align the text vertically in the center, like so:
However, if we use uppercase letters as well as lowercase letters with ascenders (”t,” “d,” “f,” “h,” “k” and “l”), the balance shifts upwards, making the label appear too high on the button. In such cases, we should set the type using the uppercase height as a guide — or set it a little bit higher if most of the letters are lowercase. Here’s what I mean:
This gives the whole button a more balanced look and feel. Little touches like this go a long way towards making your interface more polished and satisfying to use. 3. Using contrast to manage focus Similarly, you can also manage the focus of your visitors’ attention with contrast between elements. Here’s an example of a post headline and some meta information underneath regarding who posted the article and its date:
All the text is set in black. Let’s decrease the contrast between the meta information (the date and author’s name) and the background by putting the text in a light shade of gray:
The highest contrast element here is the headline, so it literally pops out at us. The other elements fade into the background. Here, I’ve chosen the author as the second-most important element, and the date as the least. The font also differs in size and style, but the contrast level can be very powerful. Let’s reverse the order of importance to date, author and headline:
You can see how effective it is in shifting focus: the date now pops out at you, while the headline fades away. This technique comes in very handy for information-heavy websites, such as blogs, forums and social networks, in which you want to make a lot of information easily scannable while still showing a lot of additional things, like dates. Fading the extras allows visitors to easily focus their attention on the most important pieces of text. 4. Using color to manage attention Color can also be used to effectively focus your visitors’ attention on important or actionable elements. For example, during the US presidential election, pretty much all of the candidates’ websites had the donation button colored red. Red is a very bright and powerful color so it attracts attention, and it stands out even more when the rest of the website is blue or another colder color. Warmer tones like red, yellow and orange are naturally bright and so tend to attract the eye. They also “expand” when set against colder colors like blue and green. This means that an orange button on a blue background looks like it’s flowing outwards and taking the front seat. Conversely, a blue button on an orange background contracts inward, wishing to stay in the background. Here’s a picture to illustrate:
Here’s a couple of examples of websites that use color effectively to direct users’ attention to the important elements:
Function features a “We’re Hiring” link on its jobs page. To ensure the link is not missed, the designers set it against a red background that pops out from the dark background header, effectively grabbing attention.
Causecast use color effectively. Four bright pink elements pop out at you: the logo, the feedback link, the donate link and the website description message. Want the “About” blurb on your website to grab the visitor’s focus? Make the background yellow. Want to make the “Join” button stand out? Color it orange. Make sure not to highlight too many elements, though; if you do, they may get lost in each other’s company. 5. White space indicates relationships One of the most crucial elements in an interface is the white space between elements. If you’re not familiar with the term white space, it means just that: space between one interface element and another, be it a button, a navigation bar, article text, a headline and so on. By manipulating white space, we can indicate relationships between certain elements or groups of elements. So, for example, by putting the headline near the article text we indicate that it is related to that text. The text is then placed farther away from other elements to separate it and make it more readable. Here’s an example in which white space could be improved:
The text looks all right and is certainly readable, but because the spaces above and below each heading are equal, they don’t separate each piece of text clearly. We can improve this by increasing the white space between each section and also by slightly tightening the line height of the paragraphs:
This results in more clearly defined blocks; we can easily tell which headings go with which pieces of text and can see the separate sections clearly. Good designers often squint or glance at their work from a distance, which lets them see the blocks of elements separated by white space as they merge together. If you cannot see these groups clearly then you may need to tweak your white space. 6. Letter spacing Web design is pretty limiting for typographers. But while there are only a few safe Web fonts and not a great many things you can do to style them, it’s worth remembering that we do still have some level of control. “Tracking” is a term used in the field of typography to describe the adjustment of spacing between letters in words. We’ve got the ability to do this with CSS using the “letter-spacing” property. If used with restraint and taste, this property can be effective in improving the look of your headlines. I wouldn’t recommend using letter spacing on the body text because the default spacing generally provides the best readability for smaller font sizes. Here’s an example of letter spacing in use:
And here’s the CSS code used for the above examples:
h1 { font-family: Helvetica; font-size: 27px; }
h2 { font-family: Helvetica; font-size: 27px; letter-spacing: -1px; }
h3 { font-family: Georgia; font-size: 24px; letter-spacing: 3px; font-variant: small-caps; font-weight: normal; }
The effect can be useful when you want to craft a more aesthetically pleasing or more original heading. Here, I’ve used only a couple pixels for letter spacing, but already it makes a big difference to the style of the font. 7. Auto-focus on input Many Web applications and websites feature forms. These may be search forms or input forms inviting you to submit something. If this form is the core feature of your application or website, you may want to consider automatically focusing the user’s cursor on the input field when the website loads. This will speed things up because users can start typing right away without having to click on it. A good example of this is Google and Wikipedia’s websites.
Upon arriving at Wikipedia.org, the search box is already highlighted, ready to accept text. To automatically focus on input fields, you’ll need a little bit of JavaScript. There are various solutions, and the one you should use depends on the functionality you want to achieve. The simplest way to do it would be to add the following to your body tag:
<body onLoad="document.forms.form_name.form_field.focus()">
Your form code should look something like:
<form method="get" name="form_name" action="#"> <input type="text" name="form_field" size="20" /> <input type="submit" value="Go" /> </form>
Now, every time the page loads, the text field called “form_field” will be automatically selected, ready for input. The only problem with this is that if your users want to return to the previous page using the Backspace key, they will be out of luck because they’ll just be deleting characters in the input field. Thankfully, Harmen Janssen has another simple JavaScript solution you can find here. Harmen’s script allows the Backspace key to go to the previous page when there are no characters left in the input field to delete. 8. Custom input focus While the default look of form elements suffices for most functions, sometimes we want something a little prettier or a little more standardized across various browsers and systems. We can style input fields by simply targeting it with an “id,” “class” or plain old “input,” like so:
input { border: 2px solid #888; padding: 4px; font-size: 1em; background-color: #F8F8F8; }
What’s more interesting is also being able to style the input field when it’s in focus; that is, the state it’s in when it has been clicked. To do this, we need to attach a “:focus” after the “input” property:
input:focus { border-color: #000; background-color: #FFFE9D; }
If you’re using custom backgrounds to style your input field, they may clash with some browsers and operating systems’ default focus styles. For example, here’s a screenshot of a custom-styled form clashing with the default blue OS X glow effect:
In such cases, you could also use the “input:focus” property to remove the default styling. The default blue glow in the screenshot above can be removed by disabling the “outline” property:
input:focus { outline: none; }
The blue glow effect will now be gone:
Obviously you would only want to remove the outline if you’re replacing it with your own styling, so that you don’t negatively affect the accessibility and usability of your forms. 9. Hover controls Some Web applications have extra utility controls, such as edit and delete buttons, that don’t necessarily have to be shown beside every item at all times. They can be hidden to simplify the interface and focus visitors’ attention on the main controls and content. For example, these hover controls are used in Twitter when you hover over messages:
These hover controls can be achieved with some simple CSS code, without any JavaScript. Simply style the <div> with the controls when its parent <div> is in a hover state. Here’s the code to hide and show the controls (using a <div> with the class “controls” inside a <div> with the class “message”):
.message .controls { display: none; } .message:hover .controls { display: block; }
When you hover over the “message” <div>, the “controls” <div> inside it will appear, along with all of its content, giving you the same functionality as shown in the Twitter screenshot above. There may be an issue with accessibility because screen readers may not be able to read the hidden <div>. There are plenty of other ways to hide the inner <div>, such as offsetting it with a negative margin that takes it off the page (e.g. “left-margin: -9999px”), coloring its text the same color as the background or simply placing another <div> on top of it. This technique should of course be used with restraint because you don’t want to hide your important controls; but if used correctly, it can be useful for cleaning up your interface by removing those extra utility links that you don’t want to show up at all times. Note that this doesn’t work in IE6, so you’ll need to override the hiding property in your IE6-specific style sheet or, if you don’t have one, simply use the following IE6-specific code inside the <head> section of your code:
<!--[if lt IE 7]> <style type="text/css" media="screen"> .message .controls { display: block; } </style> <![endif]-->
- Verbs in labels You can make options dialogs much more usable by thinking through the labels you use on buttons and links. If an error or message pops up and the options are “Yes,” “No” and “Cancel,” you have to read the whole message to be able to answer. Seems normal, right? But we can actually speed things up by using verbs in the labels. So, if instead of “Yes,” “No” and “Cancel,” we have “Save,” “Don’t Save” and “Cancel” buttons, you wouldn’t even need to read the message to understand what the options are and which action to perform. All the information is contained in the button labels.
Using verbs in labels on buttons and links makes the options dialogs more usable because the labels contain all of the information the user needs to be able to make a decision. To Conclude Hopefully, you’ve found a few new techniques that will be useful in your work. As always, using them effectively comes down to restraint and thoughtful implementation. For example, controls that appear on hover may clean up your interface, but they will also increase the learning curve because people may not notice these controls at first. But showing all controls at all times may not be the best strategy either because users would need to scan more things to find what they’re looking for. Striking the right balance between what you show and what you hide is a delicate art and is completely in your hands as the designer. Don’t use a technique just because it exists: use it if it makes sense in your context. About the author Dmitry Fadeyev is the founder of the Usability Post blog, where you can read his thoughts on good design and usability. (al)
- Tags:
- How-To
- useful
- Interface
- ui
- techniques
- interaction
- user
December 15 2008, 2:11pm | Comments »
-
I posted to smashingmagazine.com
50 Extremely Useful And Powerful CSS Tools
http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
We love useful stuff. For months, we have been bookmarking interesting, useful and creative CSS tools and related resources. We have been contacting developers, encouraging them to improve their tools and release their handy little apps to the public. Last year we prepared and published some of them in a series of smashing posts about CSS. Now again is the time to give these tools the attention they deserve. Big thanks to all designers and developers who contributed to the design community over the last months and years. We — our community and the design community — truly appreciate your efforts. Below, we present 50 extremely useful CSS tools, generators, templates and resources. We did not include “traditional” CSS tools, such as Firebug or the Web Developer extension, but tried to focus on rather unknown tools that are definitely worth a look. Some tools are new and some are old, but hopefully everybody will find a couple of new useful or at least inspiring tools. We strongly encourage you to develop these tools further, build on the ideas presented here, release new tools for the public and let us know about them. We would love to feature your handy tool in our next review. Please take a look at the following related posts:
Powerful CSS-Techniques For Effective Coding 53 CSS Techniques You Couldn’t Live Without CSS: Techniques, Tutorials, Layouts 75 (Really) Useful JavaScript Techniques
CSS and Typography
HyphenatorHyphenator.js brings client-side hyphenation of HTML documents to every browser by inserting soft hyphens using hyphenation patterns and Frank M. Liang’s hyphenation algorithm commonly known from LaTeX and OpenOffice. The goal is to provide hyphenation in all browsers that support JavaScript and the soft hyphen for at least English, German and French. Here is the server-side script that does the hyphenation. CSS Type SetCSS Type Set is a hands-on typography tool that allows designers and developers to interactively test and learn how to style their Web content.
TypechartTypechart lets you flip through, preview and compare Web typography while retrieving the CSS.
CSS-Typoset Matrix and code generatorA matrix table that presents font sizes and (symmetrical and asymmetrical) margins for various base font sizes — in pixel and em units. It also generates the source code on the fly. Created by Jan Quickels. Em CalculatorEm Calculator is a small JavaScript tool that helps you make scalable and accessible CSS design. It converts sizes in pixels to relative em units, which are based on a given text size.
Facelift Image Replacement (FLIR)Facelift Image Replacement (or FLIR, pronounced “fleer”) is an image replacement script that dynamically generates image representations of text on your Web page in fonts that might otherwise not be visible to your visitors. Written by Cory Mawhorter. How To Use Any Font With FLIR: Tutorial. Vertical rhythm calculatorThis tool converts pixel values to em values depending on the font size of the text. You can also set margins and paddings automatically, depending on the line height you’ve defined. Very useful.
typeface.jsInstead of just creating images or using Flash to show your website’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
CSS Online Tools
PSD2CSS OnlineA free online service that generates Web pages from Photoshop designs. By following the guidelines and naming conventions, you can precisely choose how the transformation from PSD to (X)HTML and CSS is done. Conditional-CSSConditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements for both individual browsers and groups of browsers.
MoreCSSMoreCSS is a design-oriented JavaScript library that allows you to write code for applying automatic hyphenation and creating pop-ups, tool tips, tab menus, zebra tables, advanced list styling and cross-browser opacity style. But the really special thing is that you can do these things as you would with regular CSS. px to emThis tool is what its developers call “px to em conversion made simple”. Type a base font size in pixels, and the tool will produce a complete pixel to em conversion table, making elastic Web design much easier to produce. CSS Frame GeneratorThis tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line. This may be a bit strange for you at the beginning, but if you get used to it you’ll find it much better.
CSS Redundancy CheckerYou can use this tool to find CSS selectors that aren’t used by any of your HTML files and that may be redundant. CleverCSSCleverCSS is a small markup language for CSS, and inspired by Python, that can be used to build a style sheet in a clean and structured way. In many ways, it’s cleaner and more powerful than CSS2. You can also work with variables. WordOffWordOff applies some rules to strip the cruft that is pasted into WYSIWYG editors from Word. For example, attributes are removed for all elements except <a>, <span> and <div>, empty elements are removed and consecutive line breaks are reduced to two. It also contains an API.
Postable“I absolutely hate having to switch all the ‘< ‘ and ‘>’ signs in my code to ‘<’ and ‘>,’ respectively. I also hate having to write “&” any time I want to include an ampersand. It makes including code snippets on my blog and whatnot extremely annoying, and today I finally got fed up.” This handy tool is a little app that will do all that for you. Created by Elliot Swan.
KotatsuKotatsu is a simple HTML table generator. The tool lets you attach classes to cells in the same column easily.
htmldevelopertoolsThis tool allows you to update your CSS files on the server in a browser window. Currently works only under IIS + .NET 3.5. An interesting idea. Could someone create a similar script for Apache? Let us know, and we’ll support your both financially and with the broad coverage of our magazine.
DeployDeploy is a free open-source Web application that allows you to choose the name of a project, the Doctype, whether you want a CSS reset or jQuery integration, and it creates a zipped, ready-to-use package with all specified files and folders. The tool has been optimized for Fluid, the Mac application that creates SSBs (site-specific browsers) for websites.
CSS EvolveCSSEvolve lets you play with many properties of a website, including the website’s color scheme, fonts, borders and more. CSSEvolve works through a process of simulated evolution in which you select website features that you like and refine them through multiple generations.”It uses a traditional blind watchmaker, user-driven genetic algorithm to drive CSS changes on a website of the user’s choosing. Basically, a set of mutated CSS variants are produced, the user selects changes that he or she likes, the algorithm randomly combines those changes through crossover and mutation and the process continues.” [ via ] Lorem 2This tool provides you with an “all around better Lorem experience.” It contains short paragraphs, long paragraphs, short list items and long list items to use in your wireframes. SelectORacleA small script that explains CSS selectors in plain English or Spanish. Particularly useful for CSS3 selectors. JS BinA Web app specifically designed to help JavaScript and CSS folk test snippets of code in a particular context and debug the code collaboratively. It allows you to edit and test JavaScript and HTML (reloading the URL also maintains the state of your code: new tabs don’t). Once you’re happy, you can save and send the URL to a peer for review or help. They can then make further changes, saving anew if required. Alternative: CodePaste or EtherPad.
CSS Text WrapperThe CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want.
Writing Tests Against CSSCSS is hard to test automatically. Do font sizes meet expectations? Does the layout width correspond to the initial mockup? This tool helps you spot changes in unexpected areas of a website’s layout and design. It can also extract rendered DOM values, such as text size, from a given Web page and compare them against expected values. This could be useful for both regression testing and assertion-based, test-driven development. Written in Python by Gareth Rushgrove. CSS Sprite GeneratorWith this tool, you can upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and generate the CSS for you. Sky CSS ToolAn online CSS authoring tool, Sky CSS allows you to create CSS classes almost without using handwritten code. A JavaScript-compatible browser is needed for proper functioning. CSS Tidy OnlineAn online version of CSS Tidy, a tool that allows you to keep your code clean by compressing the code. Web-Based Tools for Optimizing, Formatting and Checking CSSA huge compilation of some of the best free Web-based CSS optimizers/compressors, code formatters and validation services. By Jacob Gube. Grid Designer 2.4This tool enables you to create a grid by specifying the number of columns and the widths of the columns, gutters and margins. You can also specify typography in the same tool and export the final CSS and (X)HTML markup. You can also bookmark your grid and typography settings and create designs with spanning columns. Created by Rasmus Schultz.
Yahoo’s Secret Text-Sprite GeneratorBasically this is a URL you can hit that creates a perfect sprite-ready PNG graphic of text you add to the URL. Replace CSS Colors - EditorThis tool enables you to change the entire color scheme of your website without going through the CSS code. You choose your local CSS file, replace colors and then download the new CSS file. The Box OfficeThe Box Office lets you wrap, float or contour text around free-form images using CSS for (X)HTML pages. MinifyMeA small AIR application that can compress multiple CSS and JavaScript files into one and runs on your desktop.
cssdocCSSDOC is a convention for commenting in CSS to help individuals and teams to improve writing, coding, styling and managing CSS files. It is an adoption of the well known JavaDoc/DocBlock-based way of commenting in source code by putting style, DocBlocks and tags together. CSS Menu GeneratorThis tool generates vertical, horizontal and drop-down menus online. Various color schemes are available, and you can also customize the menus online. sheetUp - DOM Stylesheet LibrarySimplify the tedious task of manipulating style sheets contained in document.styleSheets. You can use the sheetup bookmarklet to integrate a built-in CSS/HTML-editor in your browser. CSS SuperScrubThis tool claims to significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls and intelligently grouping the remaining element names. DrawAble Markup LanguageDrawter Beta 2 gives you the possibility of literally drawing your website’s code. It runs on every single Web browser, which makes it really useful and helpful. Each tag is presented as a layer you have drawn.
Handy Kits For Designing With CSS
Regex Patterns for Single Line CSSIf you are formatting your CSS style sheets single-line, you may find Dan Rubin’s Textmate macro useful and helpful. “This macro retains a single blank line where your original contained two or more blank lines (helpful if you group your rules) and adds white space that matches my standard formatting preferences (which I find makes it easier to scan quickly).” And if you don’t use Textmate, you can use a regular expression instead; it is also provided in the post.
21 Excellent Dreamweaver Extensions for CSS Productivity and StandardsAn extensive overview of various Dreamweaver extensions, such as CSS Sculptor, CSS Menu Writer, Link Fader, CSS Layouts, Format Table, Style Switcher, etc. Graph PaperThis graph paper is made for visual designers, interactive designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a two-by-two grid. Plus, you’ll get a basic grid for drafting sitemaps or anything else that might come up. Starter Kit For Developers (PSD)This starter kit is a free Photoshop template that includes forms, grids, ad placeholders, dummy copy and other design elements (13 MB). CSSHttpRequestCSSHttpRequest (CHR) is a method for cross-domain AJAX, using CSS for transport. Similar to JavaScript, this works because CSS is not subject to the same-origin policy that affects XMLHttpRequest. Like JSONP, CSSHttpRequest is limited to making GET requests. Unlike JSONP, untrusted third-party JavaScript cannot execute in the context of the calling page.
In-Browser CSS Tools
Collection of Web Developer Tools, by BrowserSometimes it is not easy to keep track which tools are at a developer’s disposal (and which ones are actually useful). This article lists the best tools available and quickly describes how to activate, install and use them.
In-Browser CSS Tools: Firefox Extensions
Dust-Me SelectorsA Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all of the selectors from all of the style sheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they’re encountered. Aardvark Firefox ExtensionWith Aardvark, you can: clean up unwanted banners and surrounding “fluff,” especially prior to printing a page; see how a page is created, block by block; and view the source code of one or more elements. CSSViewerA CSS property viewer that displays all information about a design element. Dummy LipsumThis Firefox extension dynamically fills a selected field with Lorem ipsum text; the function is called via the context menu. Firefox: Test- und Entwicklungstools für Webentwickler | Dr. Web Magazin GridFoxGridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize and allows you to create the exact grid you based your layout on.
20 Firefox Add-Ons To Enhance Your Web-DevelopmentYet another overview of useful Firefox add-ons that can help developers create websites more efficiently. Among them are Codetch, Pixel Perfect, Link Checker and ColorZilla.
Coding and Programming With CSS
CSS Extra Coda Plug-inCSS Extra is a plug-in for Coda that gives you access to some dynamic CSS. Although it is not truly dynamic in that it will not force Coda to process the variables and settings, it gives you the commands to process the CSS instead. What this means is that you can have constants, bases and a layout module within your CSS. Edit in Place with JavaScript and CSSThis tool offers you more intuitive editing (in-place editing) of your documents and style sheets. The idea: in a selected area, the user can enter the markup or change the current value directly. Simple CSSSimple CSS is a free CSS editor that runs on Mac, Windows and Linux. It allows you to create CSS from scratch and modify existing sheets, using a familiar point-and-click interface. Freeware. AWKAWK is a very powerful programming language that you can use on the command line for advanced text processing. cssutilsA Python package for parsing and building CSS.
RESTful CSSA new method for organizing CSS that better maps on to the way that popular Web application frameworks are built. The examples are based on Ruby on Rails, but the concepts should be easily transferrable to other MVC frameworks. By Steve Heffernan.
New CSS Frameworks
CSS Drop-Down Menu FrameworkA cross-browser, modular framework that contains 14 customizable templates for designing drop-down-menus. BlueTripCSS FrameworkA full featured and beautiful CSS (Cascading Style Sheets) framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, 960.gs’s simplicity, and Elements’ icons, and has now found a life of its own. The framework contains 24-column grid, sensible typography styles, clean form styles, a print styleshet, an empty starter stylesheet, sexy buttons and status message styles. Hartija - CSS Print FrameworkHartija is a CSS print framework that attempts to unite the best CSS printing practices into one single CSS file. AM frameworkThis framework contains six basic templates: for fixed, fluid, one-column, two-column and three-column layouts, as well as a jQuery template. Introducing SenCSSA clean, minimal CSS template for new projects. TypogridphyTypogridphy is a CSS framework constructed to allow Web designers and front-end developers to quickly code typograhically pleasing grid layouts. formy-css-frameworkA CSS Framework for better form management. emasticEmastic is a CSS Framework. Its continuing mission: “to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.”
CSS Bookmarklets
Design BookmarkletDesign is a suite of Web design and development tools that can be used on any Web page. Encompassing utilities for grid layout, measurement (rule) and alignment (unit, crosshair), Design is a powerful and useful JavaScript bookmarklet. ReCSS: Reload your CSSThis little bookmarklet makes refreshing your CSS a breeze. It comes in quite handy when you’re developing dynamic applications. Tested in IE and Firefox. XRAYA bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to see the box model of any element on any Web page. MRIMRI is a bookmarklet for Internet Explorer 6+ and Webkit- and Mozilla-based browsers (including Safari, Firefox, Camino and Mozilla). You can use it to debug and test selectors. CSSFlyA tool for editing websites easily, directly and in real-time in your browser. 15 Must-Have Bookmarklets For Web Designers And DevelopersAn extensive list of 15 handy Web designer and developer bookmarklets. The whole pack can be downloaded and imported into Firefox.
Tools For Generating CSS Layouts
Construct Your CSSA visual layout editor based on Blueprint and jQuery. A video tutorial is available as well. You can use the keyboard to create layouts on the fly. By Christian Montoya. XHTML/CSS Markup GeneratorMarkup Generator is a simple tool created for XHTML and CSS coders who are tired of writing boring frame code as they just begin slicing work. Its main purpose is to speed up your work by generating (X)HTML markup and a CSS frame out of very intuitive, shortened syntax, so that you can jump directly to the styling of elements.
Dynamic Layout GeneratorThis tool generates cross-browser multi-column liquid designs and enables you to visually change the width and colors. You can drag the sliders to choose the width you want in your layout and preview the layout online. The CSS code is generated automatically. iStylr - Online CSS Template GeneratorAn advanced WYSIWIG online CSS-editor with syntax highlighting, drag’n'drop-functionality, template import/export, image manager, stylsheet sharing option and a visual DOM tree. A registration is required (OpenID-login is supported).
Blank CSS Layouts
The Only CSS Layout You NeedA collection of basic cross-browser layouts. Faux-Column CSS LayoutsThere are a total of 42 faux-column CSS layouts for downloading. All markup has been validated against a strict Doctype.
Fixed-Width CSS LayoutsThere are a total of 53 fixed-width CSS layouts for downloading. All markup has been validated against a strict Doctype.
___layoutsThe foundational ___layouts file offers five preset page widths, the option to have a fixed width or a text “zoom”-style scaling effect and two core templates that give you the ability to nest subdivided regions of one to four columns. The framework supports fluid-width layouts and fixed-width layouts.
CSS Layouts
100 Free High-Quality XHTML/CSS TemplatesIn this post, we showcase 100 free high-quality templates. Hopefully, some of them will save you some time in your design and development. While they are generally free for personal or commercial use, always remember to check the license first for any restrictions or guidelines. 45 Excellent Free Web Templates
Would you like to see more similar posts? Should SM publish more similar posts? (JavaScript, Ruby, PHP etc.) ( polls) Related Posts Please take a look at the following related posts:
Powerful CSS-Techniques For Effective Coding 53 CSS Techniques You Couldn’t Live Without CSS: Techniques, Tutorials, Layouts 75 (Really) Useful JavaScript Techniques
(al)
- Tags:
- design
- useful
- tools
- CSS
- development
December 9 2008, 2:12pm | Comments »
1 2