Posts Tagged ‘web design’
February 16th, 2010
Social media often seems like a load of crap, so I’m releasing these Poopy Social Icons: 36 different icons in 3 crappy sizes: 48×48, 64×64, 128×128.
Feel free to use the Poopy Social Media Icons on any site personal or commercial. No attribution is necessary but please link back to this post or retweet it if you like using these. Thanks!
Download the Poopy Social Media Icons
The Poopy Social Icon set covers 34 different social media outlets with an extra icon option for both Twitter and Digg. If I missed any, please let me know.
Tags: design, freebies, icons, social media, traffic, web design
Posted in web design | No comments
December 8th, 2009
TranslateThis is a new Javascript widget that provides 52 languages of translation by leveraging the Google Language API.
Installing TranslateThis couldn’t be easier—simply copy and paste the widget code anywhere on your website, you don’t have to upload any files or change any settings.
Besides being easy to use, TranslateThis also provides many attractive features for developers. First off, requests to the Language API run in Javascript, so the translation is pretty fast. Additionally, the script is lightweight, weighing in at just over 11kb with another 7kb of imagery. And since it doesn’t depend on any Javascript library, TranslateThis can be implemented on any website without additional overhead. Finally, TranslateThis has been tested in all modern browsers and its user interface is designed to be straightforward and seamless.
Get your own TranslateThis Widget
Read the TranslateThis Documentation
What can you customize in TranslateThis?
Tags: AJAX, analytics, cross-browser, customization, downloads, front-end, javascript, performance, plugins, translation, web design, webdev, widgets
Posted in front-end, webdev | No comments
July 13th, 2009
I’m happy to announce the release of QuickFlip 2, a major reworking of the jQuery plugin that flips any piece of HTML markup over like a card. The new version is faster and even easier to use—simply call the flip animation through a jQuery selector and the QuickFlip will flip the front panel to show its back. The flip effect is similar to the UI animation on the iPhone
Download QuickFlip 2 for jQuery
Read the QuickFlip documentation
QuickFlip works by using an animation shortcut that is barely noticeable when flipped quickly (hence the name). This shortcut improves performance while allowing the flip effect to work smoothly with any piece of markup regardless of images, backgrounds or CSS.
It provides an attractive alternative to other slower and more resource heavy Flash and jQuery flip animations. However if you want a smoother option with … Read more…
Tags: animation, front-end, javascript, jQuery, performance, plugins, UI, web design, web2.0, webdev
Posted in webdev | 58 Comments
June 2nd, 2009
Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything else to scroll at a different pace than the web page when a user scrolls around. The parallax effect that results is an easy way to create an illusion of depth on your website.
Basic use of the Scrolling Parallax plugin is extremely easy. Simply pass the path to an image, and the plugin takes the image and stretches it to the window width and 150% of the height. The extra 50% of the height is scrolled down along with the document, smoothly reaching the end at the same time as the page.
The Scrolling Parallax plugin is also very versatile. There are a wide variety of options including scrolling faster, slower, looping and reversing the animation and tiling the … Read more…
Tags: animation, downloads, front-end, javascript, jQuery, open source, parallax, performance, plugins, web design, webdev
Posted in webdev | 12 Comments
May 7th, 2009
Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.
While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and ContactPop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for … Read more…
Tags: AJAX, best practices, blog, CSS, customization, forms, front-end, javascript, jQuery, PHP, plugins, unobtrusive, web design, web2.0, webdev
Posted in webdev | 33 Comments
March 24th, 2009
It’s time for developers to stop complaining about web typography. Custom font embedding has been around for years, and it has finally gotten to the point that typography nerds can be equally happy with the fonts on a website as they are with the Photoshop comps. Many of the things that were a total pain to support previously have become a piece of cake. Leading, kerning, and all the major typography buzzwords have been handled for some time. Even drop shadows and Photoshop-style font rasterization options such as ’strong’ and ‘crisp’ are now fully supportable.
So let’s make sure that we don’t become dinosaur developers, and get up on these modern methods of custom font embedding.
In this article we‚Äôll cover all types of font embedding, from older image replacement methods to embedding fonts with Flash, as well as native browser methods and even full Javascript … Read more…
Tags: best practices, cross-browser, CSS, flash, front-end, ImageMagick, javascript, licensing, typography, w3c, web design, web history, webdev
Posted in front-end | 13 Comments
November 30th, 2008
Translate-It is a free tool that makes multi-language translation easy to implement on any website. With just a few lines of Javascript you can quickly include up to 34 languages of internationalization on your site.
Download Translate-It.
The web is a global community with rapidly growing international markets. Translation allows sites to reach broader audiences, and tools like Google Translate and Yahoo’s Babelfish have made the web more accessible. While accessing these translation tools is often too cumbersome for your site’s visitors, leveraging these tools is relatively simple for developers.
(more…)
Tags: best practices, blog, customization, downloads, front-end, javascript, translation, web design, web2.0, webdev
Posted in general web | 19 Comments
October 20th, 2008
QuickFlip is a jQuery plugin I wrote that uses a CSS trick to cause a div, paragraph or any other piece of HTML markup to flip like a card. With a result similar to the UI animation on the iPhone, this jQuery plugin is easily integrated into your webpage to make any portion appear to flip and show its back.
When a flip occurs, the front panel is split in half with Javascript. The right and left halves slide into one another, and afterwards the opposite occurs with the back panel. While it‚Äôs not as smooth as some Flash animation, it all happens so quickly that it really looks like the panel is flipping over (more…)
Tags: animation, CSS, downloads, front-end, jQuery, plugins, web design, webdev, widgets
Posted in front-end | 27 Comments
February 26th, 2008
Everyone knows the value of improving your workflow. Well it turns out I work a whole lot faster on a Mac, both in web development and web design. I think the OSX developers must have thought a great deal about workflow, because Mac has a lot of great features: from much more drag-and-drop integration between programs than windows, to little things like the mouse command to fly out all windows or show the desktop (this saves me so much time). But workflow on a Mac goes much deeper than these features.
Web development is great on a Mac, since the programs you need for coding run very quickly and the terminal is really handy for doing lots of things, its really easy to move between the terminal and the finder/other programs. Also since the terminal is Shell based, its … Read more…
Tags: apple, cross-platform, integration, mac OSX, shell, web design, webdev, workflow
Posted in personal | 2 Comments
August 8th, 2007
Over the past couple days I’ve been redesigning my website.First, I made a design for my website in Illustrator that I’m happy with. What’s better is that I was able to implement it fully in a matter of minutes because of the clean template structure I used previously. I had wanted for some time to add some flare to the site, but not to do too much, since I would never want to detract from the content. I hope this design is successful, I don’t think it’s too flashy. Please let me know what you think. Next, I made a lot of minor appearance changes and cleaned up a good amount of the code, fixing up a few sections that had had minor bugs for some time. This is mostly done, but I’m still not happy with the video playback JavaScript. It works fine in FireFox but InternetExplorer shows … Read more…
Tags: cross-browser, illustrator, SEO, web design
Posted in personal, webdev | No comments
