Thursday, December 22, 2011

Free and Useful Adobe Illustrator Scripts with Scriptographer

Free and Useful Adobe Illustrator Scripts with Scriptographer: Some scripts may initially appear to be toy-like, but I recommend
taking a closer look at them as they might help you to create your own
unique style. Let’s take a look at, in my opinion, the most interesting and useful ones.

Wednesday, December 21, 2011

Textualizer is a lightweight (4kb minified) jQuery plugin for creating good looking effects on text.

The plugin accepts any number of sentences (or words) and can rotate them smartly and beautifully.

jQuery Textualizer

Once a sentence is about to rotate with the other one, the letters that will be re-used are kept and move to their new locations with several effects to choose from (fadeIn, slideLeft, slideTop).

It is possible to define the duration that each item will be displayed and also the duration of the transitions. Also, functions exist to stop or pause the rotation.

Wednesday, August 31, 2011

WebPutty Hosts and Maintains CSS For Your Site [Video]:
Need to maintain CSS from anywhere? Signup for a (currently) free WebPutty beta account to host and serve your site's Cascading Style Sheets (CSS). The in-browser CSS editor offers a side-by-side preview pane with instant updating and is compatible with CSS extention Sass (SCSS) and Compass, an open-source CSS authoring framework.. More »
Minus Is a Simple Drag-and-Drop File Sharing Service for the Web, Your Desktop, and Phone [File Sharing]:
You'll find no shortage of simple file-sharing services on the web (see previously mentioned ge.tt), but file-sharing app Minus sets itself apart with dedicated apps for nearly every platform (in addition to the browser-accessible webapp). More »


WebPutty Hosts and Maintains CSS For Your Site [Video]:
Need to maintain CSS from anywhere? Signup for a (currently) free WebPutty beta account to host and serve your site's Cascading Style Sheets (CSS). The in-browser CSS editor offers a side-by-side preview pane with instant updating and is compatible with CSS extention Sass (SCSS) and Compass, an open-source CSS authoring framework.. More »

Tuesday, July 05, 2011

CSS Lint – A Deeper Analysis For CSS Files: "
CSS Lint is an exciting open source project which helps finding the problems and inefficiencies in the CSS code.

As expected, it displays any parsing errors like mis-typed characters which may end-up in non-rendered rules.

CSS Lint

Other than that, CSS Lint checks for the common best CSS coding practices and warns you about the:

  • adjoining classes (which are problematic in IE7 and IE6)
  • empty rules which are inefficient
  • correct use of display (as some rules will be ignored if used together)
  • usage of too many floats, web-fonts and font-size declarations
  • heading styles to be declared once
  • and more..

The rules are pluggable, new ones can easily be added (the web interface is mentioned to be improved soon for making some checks optional).

As the website states "it will hurt your feelings but help coding better" : ).
Generate CSS For Sprite Images – Sprite Cow: "
With their increasing popularity, we are seeing more and more CSS sprite generators everyday.

Sprite Cow is another one which is open source and works very effective by auto-recognizing the different elements inside a single image.

So, you design the sprite image in your favorite imaged editing application, upload it to Sprite Cow and simply click (or click + drag) on each element to get their width, height and background-position as a CSS rule.

The application can select items in any size and also gives you the option of changing the background color.

Sprite Cow
Fractal: HTML-CSS Validation For E-mails: "
E-mail code validation is a painful job considering many e-mail clients/applications have a low-level HTML-CSS rendering support and many others have their own standards. Actually, it is worse than designing for the browser.

Fractal is a free-to-use web application for validating HTML-CSS code across 24 most-popular e-mail clients.

It simply works by pasting the code to the application and finding out if each line is validated, if not, why and in which e-mail clients.

Fractal

Best of all, Fractal doesn't come with only the bad news but also suggests fixes.

P.S. Besides the desktop and web-based e-mail applications, it also checks the code for the mobile as well.

CSS Color Spectrum Inspector – CSS Prism

CSS Color Spectrum Inspector – CSS Prism: "

While inspecting and editing a CSS file, it is not easy to understand which HEX value represents which color.


CSS Prism is a web-based CSS color spectrum inspector that loads the colors used in a CSS file as a grid and shows us in which rules they exist.


CSS Prism


The application also enables us to edit the colors with a color-picker and download the edited CSS file.


CSS Prism is very useful for easily viewing the color palette and making sure it is consistent.


Besides inserting the URLs of CSS files manually, a bookmarklet is provided that eases this process.

Thursday, April 21, 2011

Customize The CSS Of Any Web Page & Share With Others Easily – CSS Pivot

Customize The CSS Of Any Web Page & Share With Others Easily – CSS Pivot: "

Sometimes, for any website -whether it is built by us or others-, we may want to quickly apply new CSS rules and see how the output will look like.


CSS Pivot is a free web application which enables us to accomplish this by loading the desired URL inside an iframe, apply new CSS rules and, best of all, share the result with everyone via an unique link.


CSS Pivot


The interface is simple-yet-functional; it seperates the original and custom CSS used so anyone can see the new rules. Also, with a click, you can toggle between the original and customized web page.


It is very functional when a friend asks for a CSS-related help, you are showing a customer how small updates can change their website or finding out "how your CSS version of a popular website will look like : )".

Thursday, April 14, 2011

Online Font Converter Converts Your Fonts to Practically Any Format for Free [Webapp]

Online Font Converter Converts Your Fonts to Practically Any Format for Free [Webapp]: "
Online Font Converter is a straightforward webapp that converts fonts in virtually any format to pretty much any other format. Generally this is an operation that requires costly software, but Online Font Converter handles it all for free. More »

Tuesday, April 12, 2011

lorempixum: Placeholder images for every case

lorempixum: Placeholder images for every case: "

lorempixum is a cool placeholder image service for html wireframers and prototypers. Set dimensions for a placeholder image, and optionally select a category and color or black and white, and the URL will provided will serve a random image for your html page.

Wednesday, March 09, 2011

8 Free Placeholder Image Services For Instant Dummy Images

8 Free Placeholder Image Services For Instant Dummy Images: "

When designing websites, images-to-be-used usually doesn't exist at first as it is the layout that matters the most.


However, the sizes for the images are usually pre-set and inserting some placeholder images help us better seeing/analyzing the layout.


Rather than creating these placeholder images manually, there are free to use services which can automate the process and save us time.


Here is a list of 8 free placeholder image services for instant dummy images:


Flickholdr


FlickHoldr


As the name tells it, Flickrholdr fetches images from the huge database of Flickr.


Besides the size of the images, it is possible to mention tags in the URL which is great for using related images in each spot.


Placehold.it


Placehold.it


The service is full-featured with the ability to mention sizes, image format (.gif, .jpg, .png) and can also display text.


The size of the images generated are displayed on them as well.



{placekitten}


Placekitten


Placekitten is thematic placeholder service that can display any size of kitten images.


There is also a jQuery plugin for dynamically changing any or all of your images to placeholder kittens with just a single line of code.


Dynamic Dummy Image Generator


DummyImage


DummyImage.com is a placeholder generator with a huge set of customization options including size, colors, text, multiple file types and preset sizes.


And, it is an open source script.


nosrc.net


nosrc.net


A simple generator where you can only define the width and height. Also, the source of the script is shared as well.


FPOImg.com


FPOImg.com


Again a simple service where you can mention a text to be displayed besides the sizes.


IpsumImage


IpsumImage


IpsumImage is a Google App Engine hosted, open source placeholder service (built with Python).


It is possible to customize the sizes, background-foreground colors and text to be displayed.


lowersrc


lowersrc


The service follows a different approach than others and requires a JavaScript to be installed and works without defining "image sources" but simply adding a specific class to each.


Other than sizes, colors and text, you can also set whether the image will be rectangle or a circle.

Microsoft asks for your help to remove IE6 from the Internet

Microsoft asks for your help to remove IE6 from the Internet: "


Once the most popular browser anywhere Internet Explorer 6 refuses to die holding back the entire Internet. Firefox, Chrome and independent groups including creativebits have been fighting IE6 for years with little success. IE6 is still very strong in some countries and has a 12% market share globally. That means serious businesses can't stop supporting IE6 just yet.


Getting rid of IE6 will mean we can start using web technologies that are only supported by modern browsers and not need to worry about backward compatibility. It would save a lot of time and nerves to developers. It would consequently save money to clients. And most importantly will help internet users enjoy a better web overall.


Microsoft now wants to help too. They launched a new site called IE6 Countdown that monitors the drop of IE6 usage. The goal: go below 1%, so everyone can just disregard IE6 for good. I think many designers will open a bottle of champagne that day.


You can help the cause too. Put the code MS provides that will suggest visitors to upgrade. And you can also share this post to let your friends know about this initiative.


"

Saturday, February 12, 2011

Effective Color Palette and Color Scheme Generators

Effective Color Palette and Color Scheme Generators: "Colors carry a lot of emotions in themselves; each color represents some mood and changes its nature when used in any combination with other colors."

Wednesday, February 09, 2011

Useful Web Services, Tools and Resources For Web Designers

Useful Web Services, Tools and Resources For Web Designers:

We know how hard it is to find good useful tools that all of your developers and designers out there spend hours searching for. And for that reason, we’re regularly collecting useful online web services, tools and resources — little time-savers that can boost every designer’s workflow and save time that would otherwise be required for mundane tasks.

You might have seen some of these tools in our Twitter stream or on our Facebook page, but certainly not all of them. We’ve prepared the most useful ones (yet not necessarily the most beautiful ones) in this handy overview for your convenience. Please share any further tools with us and our readers in the comments to this post. As usual, we express sincere gratitude to all designers and developers out there who create, maintain and improve these tools as their little side projects. You really make the difference, guys. Thank you.

You may want to check out our previous round-up, Time-Saving and Educational Resources for Web Designers, as well.

Useful Web Services, Tools and Resources

FontFuse: Gallery of Font Pairings
FontFuse is a font pairing design resource that displays font pairings and hence helps you compare and choose fonts. You can browse through fonts as well as font families, and explore the most recent, most popular and contest-leading font pairings.

Useful-web-services101 in Useful Web Services, Tools and Resources For Web Designers

Little Big UI Details
This site features tiny details that improve the user experience of websites and mobile apps. You’ll find some useful design techniques found by your colleagues across the Web. Also, share your favorite little things on the website as well. The collection is already very useful, with more design examples submitted every single day.

Useful-tool-115 in Useful Web Services, Tools and Resources For Web Designers

A Sampler Page
While physical books are traditionally well defined and structured objects, digital books live on screens that vary greatly in their dimensions. In this A List Apart article, Craig Mod dives into the similarities and differences of these media and presents the baseline for designers who want to produce beautiful and readable text on a tablet.

Useful-tool-127 in Useful Web Services, Tools and Resources For Web Designers

Readability: Enjoy Reading, Support Writing
Another handy little helper that gets rid of the unwanted clutter. Readability allows you to choose your preferred settings (font size, margin and style) and applies them to any website. Drag the bookmarklet with your saved settings into your bookmars bar or folder, visit the website of your choice, click on the bookmarklet and you get a good, comfortable read. Besides, readability offers a way to compensate writers and publishers without punishing readers. 70% of all membership fees go directly to the people who make the content.

Useful-tool-132 in Useful Web Services, Tools and Resources For Web Designers

Prey: Rest Safe
This tool is small but efficient open-source application that lets you track your laptop or phone in case it gets stolen or lost. Once the Prey agent is installed, it waits to be activated over the Web or via SMS, sending back information on its exact position.

Prey in Useful Web Services, Tools and Resources For Web Designers

Ge.tt
With Ge.tt you can turn any type of file into web content and share it instantly. You just click on and select files and share the files with your friends or publish the data online. You may want to check an alternative, Crate, as well.

Useful-tool-121 in Useful Web Services, Tools and Resources For Web Designers

Lanyrd: Get More Out of Conferences
Lanyrd is the social conference directory that lets you keep track of what is going on around you, both as a conference speaker and visitor. You can browse conferences by topic, see who the keynote speakers are and who might like to attend it with you. Follow intereresting conferences by checking out attendees tweets or browse slide, videos and podcasts of past events you might have missed. And you can check SmashingMag’s account on Lanyrd, too.

Useful-tool-102 in Useful Web Services, Tools and Resources For Web Designers

Dashkards: Dashboard Cheat Sheets For Your Favorite Mac Apps
The site presents keyboard shortcut cheatsheets for you favorite Mac apps to help you memorize them. Simply add the dashkards to your dashboard and save time.

Useful-tool-124 in Useful Web Services, Tools and Resources For Web Designers

Bundler: Manage Your Application’s Dependencies
Bundler manages application’s dependencies through many machines systematically and repeatedly. You can use the tool with frameworks (it works out of the box with Rails 3) and check out an application with a gemfile for development. A detailed instruction is available on the app’s main web page.

Bundler in Useful Web Services, Tools and Resources For Web Designers

BuildorPro
BuildorPro runs through your browser, and so the browser becomes your development environment — meaning that every time you change your code by hand or through the visual tools, the changes are instantly reflected in the design window. Currently in beta.

157-useful in Useful Web Services, Tools and Resources For Web Designers

Zerply: Present Yourself Professionally
With Zerply you can present yourself, discover and connect as well as converse and collaborate. By setting up a professional profile, you can tell people who you are and what sites you use.

Useful-tool-118 in Useful Web Services, Tools and Resources For Web Designers

Prevue: Sharing Tool for Designers
Prevue is a free concept sharing tool that helps you upload in a simple and elegant way by organizing and sharing your work with others. Either share individual projects with clients, or turn all your projects and designs into a beautiful and clean portfolio to share with the world.

Useful-tool-134 in Useful Web Services, Tools and Resources For Web Designers

Git Immersion
Git is a fast version control system which can be downloaded on this site. Git Immersion is a very detailed guide to Git, with examples and practical tips for developers.

Useful-tool-125 in Useful Web Services, Tools and Resources For Web Designers

Wirify: The Web as Wireframes
This tool is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks. Wirify is a useful tool that shows the balance of a website that the eye perceives only unconsciously.

Wireframe in Useful Web Services, Tools and Resources For Web Designers

Open with Photoshop Firefox Extension
If you are looking for nifty time-savers, this little Firefox add-on is the perfect companion for any Web or graphic designer. Instead of saving images first, you can just open them directly in Photoshop via a single click. If Photoshop is already running, it opens the image in a new window; otherwise, it launches the program.

Open-with-photoshop in Useful Web Services, Tools and Resources For Web Designers

Scr.im: Email Address Shortener
Scr.im lets you use a shortened URL to give out your email address safely and securely in forums. Just enter your email address on Scr.im, and it gives you a link to a page with your email address, with security to prevent bots from viewing it.

Scrim in Useful Web Services, Tools and Resources For Web Designers

Compfight: Flickr Search Engine
Compfight is a Flickr search engine for images licensed under Creative Commons (or other) licenses. They pull their results directly from Flickr and gives you multiple options to restrict your search.

Useful-tool-103 in Useful Web Services, Tools and Resources For Web Designers

Browserling: Interactive Cross-browser Testing in Your Browser
Browserling offers you a graphical web console to do cross-browser testing without leaving your own browser. A helpful way to try out your creations. The virtual browsers run live enabling you to type and click away just as if you were running the actual browser. Paid and free options are available.

106-useful in Useful Web Services, Tools and Resources For Web Designers

User Feedback and Concept Testing with Verify
Verify is the fastest way to collect and analyze user feedback on screens or mockups. See where people click, what they remember, or how they feel about a Web design.

146-useful in Useful Web Services, Tools and Resources For Web Designers

foxGuide: Photoshop Guides Inside Firefox
foxGuide is a Firefox extension that displays horizontal and vertical guides. These guides appear as thin lines that float over the webpage. You can move or remove them just the way you do it in Photoshop.

147-useful in Useful Web Services, Tools and Resources For Web Designers

GridBookmarklet
The tool allows you to interact with a grid directly inside the Web browser. (Most alternatives involve overlaying a static grid image onto the page.) Just drag it to your bookmarks toolbar, and then any time you want to check that everything is properly aligned, click on the bookmarklet, and a grid will be overlaid on the current page.

Grid2 in Useful Web Services, Tools and Resources For Web Designers

URLi.st: Share and Sync Your Links
URList not only enables you to create and save link lists easily and share them via Twitter or email with coworkers and friends, but also lets you access those links from anywhere. And creating lists is dead easy. Just drag URList’s bookmarklet to your browser’s bookmark bar and click it whenever you want to add a link to the group of links.

Useful-tool-114 in Useful Web Services, Tools and Resources For Web Designers

Spritebox: Create CSS from Sprite Images
Spritebox is a WYSIWYG tool to help Web designers create CSS classes and IDs from a single sprite image. It is easy and free to use and is based on the principle of using the background-position property to align areas of a sprite image into block elements of a Web page. You may want to check out CSS Sprite Generator, too.

162-useful in Useful Web Services, Tools and Resources For Web Designers

Joliprint
This is an online tool that generates PDFs from Web pages. Granted, it is not the only tool that does this, but it is easy to use and versatile. People can use it as a bookmarklet, pulling it into the Favorites toolbar of their browser and clicking as needed. Joliprint generates a clear, reader-friendly two-column layout, free of ads and navigation elements, and it does it pretty well. Sometimes it removes too much content, though, such as readers’ comments. If you’d like an alternative, give Web2PDF or Notforest a try.

Jolly in Useful Web Services, Tools and Resources For Web Designers

Entitifier
Cleaning up text for the Web can be time-consuming and prone to error. But if a client delivers content in Microsoft Word or a similar format, then cleaning it up is a necessary evil if you don’t want to end up with characters that don’t display properly online. Entitifier does the hard work for you. All you have to do is enter HTML or text, and it escapes nasty characters that should be entities. Just don’t enter text with inline PHP or HTML5 tags, because the tool doesn’t work well with them yet.

The Email Address Obfuscation Debate
Superuser has an interesting discussion about email obfuscation, with opinions from a number of users. Included also are different techniques for accomplishing obfuscation, empirical data about its effectiveness and links to other discussions and articles. One interesting technique is to use the obscure unicode-bidi and direction CSS properties and write the email address backwards: for example, moc.elpmaxe@zyx. Plenty of interesting ideas worth learning and discussing. (cc)

Email in Useful Web Services, Tools and Resources For Web Designers

Quick CSV Data Convertor
As Web designers, we constantly receive data in Excel and other spreadsheet formats. This works fine when you just need to view the data on your computer. But when you need to upload it to and display it on the client’s website, it becomes a huge pain. This tool takes a CSV or tab-delimited file in Excel and converts it to JSON, XML, ActionScript and other Web-friendly formats instantly. If you want to convert your spreadsheet data to HTML, you might want to give Tableizer a try.

Instant Blueprint
Instant Blueprint is a way to create a web project framework. In a very short time you can get your project up and running with valid HTML/XHTML and CSS. It’s a simple online form where you enter the required information and markup id tags. Then you select options such as, javascript library and document type. This then generates the blueprint you need to get your project going.

Interaction-Design.org: HCI, IxD, UX, IA, Usability, and More
This website is a growing library of documents, references and useful articles about interaction design. Leading personalities of the respective branches are asked to contribute to every topic including videos and commentaries.

jQuery Deconstructed
The Deconstructed series is designed to visually and interactively deconstruct the internal code of JavaScript libraries, including jQuery, Prototype and MooTools.

Last Click

Humans.txt: We are People, Not Machines
Humans.txt is an initiative founded by a group of Spanish enthusiasts with the idea to give credit to the humans behind Web projects. Start your own humans.txt now and stick it in the website’s root folder, right next to robots.txt. Fill the file with whatever info about the contributors you like. Be a part of the initiative and help establish the standard for humans.txt.

Spacelog Apollo 13
This site allows you to explore transcripts of radio communications between the Apollo 13 crew and the NASA personnel back at Houston. You can check out photographs taken from the ground as well as by the crew in space. If you’re interested in space missions and the history of Apollo 13, this is the site for you.

Spacelog in Useful Web Services, Tools and Resources For Web Designers

Google Art Project
The Google Art Project lets you visit all the great museums around the world and offers interactive 360° tours. High zoom levels give you astounding close-up impressions of the masterpieces, getting that close would probably be impossible in reality. You can even create your own virtual tour and showcase your own great tableaus.

Web-services-010 in Useful Web Services, Tools and Resources For Web Designers

Liveset: Now the Concert Comes To You
This service allows you to watch live concerts on the Web and on mobile devices in HD. Once you’ve become a member, you can claim digital tickets and enjoy the show on your large screen at home, together with your friends or family.

170-useful in Useful Web Services, Tools and Resources For Web Designers

How To Build a Corporate Website (Comic Strip)
Unfortunately, very sad, yet very true.

Sad-true in Useful Web Services, Tools and Resources For Web Designers

How Would You Like Your Graphic Design?
A nice Venn diagram that helps you (and maybe your client) resolve dilemma on getting fast, cheap, free and great graphic design. Pick two out of four.

Web-services-008 in Useful Web Services, Tools and Resources For Web Designers