Posterous theme by Cory Watilo

50 Amazing Free Icon Sets

Advertise here with BSA


Every web designer loves to have high-quality icons at their disposal. While creating your own custom icons for your projects is an option, it’s rarely practical. There are plenty of quality icon sets available for purchase, but fortunately, there are also some free icon sets out there with professional quality. These free icons sets are some of the most useful and helpful resources because of the time they can save and because of the impact they can have on the sites that you are desigining.

The icon sets showcased here will be great additions to your arsenal. There are a wide variety of different types of icons, styles, and sizes. You’ll certainly find at least a few sets that you can put to good use in your own work.

Photography Icons

Photography Icons

Aroma

Aroma

Webcons

Webcons

Addictive Flavour

Addictive Flavour

Quartz

Quartz

Build Icons

Build Icons

Web Designer’s Icons

Web Designers Icons

Portfolio Icons

Portfolio Icons

WooFunction Icons

WooFunction Icons

Application Icons

Application Icons

Hand-Drawn Icons

Hand-Drawn Icons

Credit Card Icons

Credit Card Icons

Payment Method Icons

Payment Method Icons

Payment Icon Set

Payment Icon Set

E-Commerce Icons

E-Commerce Icons

E-Commerce Icons

E-Commerce Icons

E-Commerce Glossy

E-Commerce Glossy

E-Commerce Icon Set

E-Commerce Icon Set

E-Commerce Icons

E-Commerce Icons

Shopping Icons

Shopping Icons

Photoshop Tools Icons

Photoshop Tools Icons

3D Glossy Icons

3D Glossy Icons

Semi-Transparent Icons

Semi-Transparent

Mobile Icon Set

Mobile Icon Set

Cute Blogging Icon Set

Cute Blogging Icon Set

Soft Media Icons Vol. 1

Soft Media Icons Vol. 1

Soft Media Icons Vol. 2

Soft Media Icons Vol. 2

Medical Icons

Medical Icons

Basal Icons

Basal Icons

Social Media Icons

Elegant

Socializic

Socializic

Vintage Social Media Stamps

Vintage Social Media Stamps

Finance Icons

Finance Icons

Onebit

Onebit

Milky

Milky

Toolbar Icons

Toolbar Icons

Trainee Icon Set

Trainee

Gadget Icons

Gadget Icons

The Apple Armada

Apple Armada

Concave Mac Icons

Concave Mac Icons

August Interactive Vector Icons

Vector Icons

Retro Icon Set

Retro Icon Set

MimiGlyphs

MimiGlyphs

Pixel UI Icon Set

Pixel UI Icons

iconSweets

iconSweets

gCons

gCons

Petite Icons

Petite Icons

Mini Icons

Mini Icons

Pace Icon Set

Pace Icon Set

Finely Crafted Icon Set

Finely Crafted Icon Set


posted on Web Design Ledger: http://webdesignledger.com/freebies/50-amazing-free-icon-sets

knockout.js!!

如果說jQuery是林志玲,那麼knockout.js可比陳妍希,同樣讓人一見傾心!! 這就是我初見knockout.js的感想。

knockout.js是一套JavaScript UI程式庫,主要用來在網頁實現MVVM設計模式。MVVM已在微軟WPF/Silverlight/WP7中廣泛應用(延伸閱讀: InfoQ的簡要介紹、微軟的MVVM導論天空的垃圾場則有幾篇WPF MVVM入門範例),用白話來說:

在MVVM裡,UI操作涉及的資料被包成ViewModel類別,接著在UI輸入/顯示元素分別標註其對應到ViewModel某個屬性值。當程式碼改變ViewModel屬性值,其對應的輸入/顯示欄位元素便會自動更新;而在UI欄位填入不同內容,ViewModel的資料屬性也會立刻被修改為新值。

這種雙向繫結(Two-Way Binding)的概念,若使用傳統做法得在ViewModel的屬性修改事件寫程式將新值反應到某個顯示/輸入元素上,還得攔截輸入元素的onChange事件,用程式將最新輸入結果反應到ViewMode屬性上,瑣碎的實做細節蠻多的。而不管是Silverlight/WPF或JavaScript,MVVM程式庫的目標即在節省前述自行開發的工夫,只需在顯示/輸入元素上註明其對應的ViewModel屬性,之後全部交給程式庫自動處理,讓程式開發者能優雅地實現MVVM。

如今,MVVM概念也被搬到網頁開發上,未來大家在ASP.NET MVC的展示中應就會常看到它。在JavaScript領域,過去也有些MVVM程式庫被提出來,例如: 微軟主導的jQuery Data Link Plugin(不過,它跟jQuery Template Plugin一樣,已停止發展,未來會由jsView及jsRender接替,但預估要到2012年中才會進入Beta階段),但顯然都比不上knockout.js所受到的關注與歡迎。

knockout.js的主要特色為:

  • 宣告式語法: 透過DOM元素Attribute宣告完成資料繫結(Data Binding),簡潔方便
  • 自動UI更新: 只要Model資料改變,UI立即反映
  • 相依性追蹤: 源頭資料變動時,可自動追溯所有關連的資料一起改變
  • 支援範本(Template): 開放自訂Template決定Model資料輸出結果,可滿足各式客製需求
  • 免費、Open Source
  • 純JavaScript - 可跟jQuery或其他JavaScript Framework併用無虞
  • 輕薄短小,Minified版本只有40KB,HTTP壓縮後只有14KB
  • 跨瀏覽器! 支援IE6+, FF2, Chrome, Opera, Safari(含行動裝置版本)

要開始體驗knockout.js,建議可由官方網站上超神奇的Web互動教學入門:

教學網站如上所示,網站左上區塊為操作說明,右上為HTML標籤區,右下方為程式碼區,左下區塊則可立即測試結果。按照操作說明,一個步驟一個步驟在HTML區及程式碼區輸入適當的標籤及程式碼,就能立即體驗knockout.js的魔力。另外,官方網站也有極其詳盡的Knockout API說明,則是深入了解knockout.js的有效途徑。

要在ASP.NET專案中體驗knockout.js,最簡單的方法是透過NuGet下載程式庫:

接著寫幾行程式,就能體驗MVVM的威力,如以下的範例:

<!DOCTYPE html>
<html>
<head>
<title>knockout.js First Lab</title>
<script src="../Scripts/knockout-2.1.0.debug.js"></script>
</head>
<body>
<input type="text" id="txtValue" data-bind="value: myValue" />
<span id="spnValue" data-bind="text: myValue"></span>
<script type="text/javascript">
var myViewModel =
{
myValue: ko.observable("Darkthread")
}
ko.applyBindings(myViewModel);
</script>
</body>
</html>

在以上網頁,我宣告了一個<input>一個<span>,並定義了只有一個myValue屬性的超簡單ViewModel: myViewModel物件。透過data-bind="value: myValue"將myValue屬性綁到<input>的value值,透過data-bind="text: myValue"將屬性反映到<span>中,而myValue需透過ko.observable()宣告,knockout.js才能偵測到屬性值的變化,以便連動所有相關的UI元素。最後,要呼叫ko.applyBindings()將myViewModel繫結到網頁元素上,由於本例未引用jQuery,無$.ready()可用,所以把<script>放在網頁的最後端以確保ko.applyBindings()在網頁元素都載入後才執行。

網頁運行後,<input>與<span>一開始會顯示Darkthread,試著改變<input>的值,可發現<span>會馬上反應修改後的結果。很酷吧!!

我對ASP.NET MVC 4提到的SPA(Single Page Application)很有興趣,而knockout.js是其中重要的一環,將陸續分享一些學習心得。

PS: SPA最簡單的比喻就是像GMail那種在同一個網頁中做完全部操作,不觸發任何PostBack的設計哲學。之前我在jQuery教學中也做過粗淺示範,但當時是純手工打造,未來在ASP.NET MVC架構下實現,已有許多現成配套,相關的3rd Party程式庫也更成熟,將會省力很多。


posted on 黑暗執行緒: http://blog.darkthread.net/post-2012-05-09-knockout-js-intro.aspx

Collective #10

Typometry Free Font

Collective10_14

A beautiful experimental geometric font from talented Emil Kozole.

Get it

Inspirational Website of the Week

Collective10_20

Impero has some really nifty effects with unusual shapes which gives this web design the special something.

Check it out

Texturise web type with CSS

Collective10_19

Learn how to create some beautiful texturised web typography in this .net tutorial by Trent Walton.

Read it

Responsive Grid System

Collective10_02

Try this fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Get it

Why you should care about CSS page performance

Collective10_03

Doug Stewart introduces some interesting points of CSS performance, why we should care about it and what actually matters.

Read it

Screenqueries

Collective10_05

Test your website on different viewport sizes using this awesome tool. You can even test your local sites. It’s still in Beta but it’s already super-useful and don’t forget to watch out for their upcoming responsive design gallery.

Try it

Arrrows: The Fully Scalable Icon Font

Collective10_06

Tired of creating those little arrows over and over again? Try Arrrows, a fully scalable icon font for your design. Get the free PNG icon set or buy the whole bundle.

Get it

Physijs – Physics plugin for three.js

Collective10_07

If you have worked with the three.js 3D programming framework, Physijs will be quite interesting to you if you want to add physics to your scene.

Read it

Above the Scroll: Does It Matter Anymore?

Collective10_08

Is it still important to consider the “fold” in web design? Carrie gives us this up-to-date exploration of why the “above the scroll” concept should be seen and applied as an evolved concept.

Read it

BEM: The Block, Element, Modifier Approach To Decoupling HTML And CSS

Steven Bradley dives into CSS best practices and introduces us to the BEM approach to develop websites. He argues why we should rethink some of our common CSS practices for creating scalable and maintainable websites.

Read it

How to Speed Up CSS Rendering

Collective10_09

Faraz Karimian tells us how to write our CSS efficiently for speedy browser rendering. Understand which types of rules are impactful and expensive.

Read it

Showing Product Information With CSS3 3D Transform

Collective10_10

In this in-depth tutorial, Hidayat Sagita will show you how to create some magic with CSS 3D Transforms.

Read it

Creating Android Dock Using jQuery & CSS3

Collective10_11

Another superb tutorial by Hidayat Sagita where he shows us how to create the Android dock using CSS3 and some jQuery awesomeness.

Read it

Responsive design – harnessing the power of media queries

Collective10_13

Responsive web design from Google’s perspective: get some important insight on how responsiveness is realized and how to use media queries.

Read it

Pilaca Free Font

Collective10_15

Pilaca is a free display font designed by Pier Paolo. It is quite powerful in 3d applications.

Get it

Subtle Grunge Minimal Iconset

Collective10_16

Rofikul Islam Shahin gives us this free social media icon set (vector files included).

Get it

Icon Design in 5 Steps – Free Icon Set from Ramotion

Collective10_17

Learn the main steps of icon design and see the beautiful end result. Denis Pakhaliuk from Ramotion writes about the icon creation process and offers a free icon set for download on Abduzeedo.

Read it

Toggles, Buttons and Sliders UI Redux PSD

Collective10_18

A beautiful set of useful UI Elements from Michael Donovan.

Get it

Viewport Sized Typography

Collective10_04

Chris Coyier introduces the new CSS3 values for relative lengths: vw, vh, and vmin. They are not quite supported yet, but you can get an idea how powerful and useful they will be for responsive web design.

Read it


posted on Codrops: http://tympanus.net/codrops/collective/collective-10/

5 Tips for Getting Featured on Top Design Blogs

Advertise here with BSA


No matter what sort of art you create – whether you are a graphic designer, painter, illustrator, digital artist, videographer, or any other type of artist – being featured on the web’s top art and design blogs can result in a huge surge of active followers, interested fans, and of course – paying customers. For artists, just like anyone else, a good amount of our time is spent trying to wring a living out of our craft and free publicity never hurt anyone in that respect. In fact, I know for certain that there have been some artists who were featured on sites I’ve written for that successfully launched (or in some cases relaunched) businesses that where all of a sudden profitable because they received so much attention they were able to convert some of those new eyeballs into customers.

If you read a lot of art blogs you’ve probably seen this scenario unfold: One art blog introduces a new artist and all of a sudden over the next week, month, or even year various posts about that artist’s work begin popping up everywhere. And because that first post set off a chain reaction in which every major art blog featured that artist, they are also featured on every middling to small art blog as well. This does not just happen every once in a while – it happens ALL. THE. TIME. In fact, it has to happen. It’s the nature of being a huge source for art/design trends. If another huge source posts something new and exciting all the others have to post about it too or risk being seen as irrelevant and out of the loop.

Maybe this results in boring some readers who check a lot of blogs, but if you are that artist being featured it’s an enormous break. One day you’re toiling away in obscurity and a blog post later millions of people are looking at your work! But how do you get yourself featured? Well, the bad news is that nothing is certain. The first and hardest thing you must do is create work worth sharing. That means you actually have to have produced something special. If not, then this post won’t help you one bit because a blogger at any one of those big blogs will look at your work and move on to something else in about 10 seconds flat. If not faster. But if you have honed your craft, produced a body of quality work, and have a mind to get your work “out there” then the following five tips will help.

1. Get Your Work Online

This is so obvious you’re probably wondering why I even put it on the list, let alone as my number one. Two reasons: (1) It’s nearly impossible to get featured without a gallery of your work online; and (2) I am constantly running into talented artists that I would love to feature but can’t because they don’t have their work up anywhere. So for some reason that is beyond me, this needs to be said. Post your work online.

I’m a big believer that every artist should have a blog, but if I’m honest I have to admit that it’s not absolutely necessary. For some of you the idea of burdening yourself with a blog you have to update on a regular basis sounds about as fun as smashing your head against a wall. I get that, and it’s no big deal. But one of the big benefits to having a blog is that it functions as an online hub. One place where people can go to get updates and find out where else to follow you online such as facebook, twitter, pinterest, etc. It’s also a good place to host a shop, publish announcements for your next gallery show, product release, or anything else along those lines. But I’m getting off point. The point is, you need a place where someone like me can easily snag your work and create a post about it and you.

Any of the following platforms will work:

Obviously, there are more options out there but these will do for our purposes today. Pick the platform that best fits you and your medium and start publishing your work! It is the first and most important step.

2. Do Personal Projects

Personal projects are great for a number of reasons. They keep you sharp, show your passion for your craft, and allow you room to experiment in ways that you may not be able to on a client project. Here are a few examples of people who started personal projects and wound up creating a name for themselves in the art/design world.

Abduzeedo.com – Fabio Sasso created Abduzeedo in 2006 as a personal blog where he could post the things he was learning as a graphic designer in the form of free tutorials and resources. His blog is now one of the largest art/design blogs in the world. Additionally, in large part due to the attention his blog drew to his work (which is amazing) he is now the senior designer at Google. I’m sure you will agree, that is no small feat.

LostType.com – Riley Cran and Tyler Gaplin began Lost Type as a way to distribute a single typeface they had created. Over time the site has turned into one of the most unique and useful type foundries online. Especially for cash-strapped designers in need of great fonts and typefaces. They are a fantastic example of two guys turning a passion project into a business – and a lot of attention from the design community.

BeautifulSwearWords.com – Theo Olsen – who’s not even 21 until 2014! – began a fun little project on tumblr in which he creates hand drawn versions of swear words. Simple, fun, funny, and man has it got a lot of attention. He’s been featured all over the place for this project, not to mention making the jump to television thanks to a quick feature on Adult Swim.

There are a TON of other great examples like these but you get the idea.

3. Participate In Others’ Projects

Participating in ongoing projects initiated by others can be nearly as beneficial as starting one yourself. It’s basically the same as being featured on a popular blog in and of itself. Here are a few cool projects on my radar that I’ve seen get picked up and distributed in the art/design blogosphere.

Most popular blogs are always having competitions and giveaways so take advantage of that. Especially considering that if it’s a blog you would like your work featured on in the future, turning in a noteworthy entry to a competition they took the trouble to organize will put you on their good side and force them to look at your work. Participate as much as you can and if your work is good, people (especially bloggers looking for their next post) will notice.

4. Email Bloggers

Here is the easiest way to get your work noticed by a blogger. Send them an email like the one below.

Subject Line: [Interesting New Project Name]

Body: Hey Nathan,

I just wanted to drop you a link to my new art project.

[link]

Hope you enjoy!

[Name]
[Portfolio/Blog Link]

BOOM. Done. That is all you need. In fact, if you bury your link under an avalanche of words (even if it’s a really awesome explanation of your project) the email will probably go unread and the link un-clicked. The same idea can be executed in blog comments, facebook, twitter, or any other medium for contact.

5. Avoid A Flash Portfolio At All Costs

Piggy-backing off of number four, if I receive an email from someone who would like me to check out their online portfolio and I click on their link only to find that their portfolio is made in flash I will almost always close the window and move on to the next email.

Here’s why: Images in flash do not allow for right-click save nor are you able to drag and drop them into a folder. It’s a given that for just about every blog post an artist’s images will have to be resized, but add to that process a lengthy screen capture session and your portfolio is likely to get passed up. And if you have some sort of animation that cannot be paused the screen capture process just got five times longer because the screen captures have to be in time with the animation. Most bloggers, myself included, will not take the time to take that many screen captures when there are tons of other great resources available where that is not necessary.

That’s not to say it never happens. I’ve definitely gone to the trouble of doing this before for someone who’s work I thought was too good to pass up. I’ve also passed on a bunch of people I thought were worthy of being featured because I had a lot of deadlines that day and couldn’t spare the extra time. So why take the chance that when someone discovers your work and wants to put it in front of millions of people they decide not to because of a dumb flash animation?

Final Thought

As I mentioned above, nothing is certain. These are not “five steps to automatically getting your work on top art/design blogs” but in my experience these tips range from absolutely necessary to at least a solid step in the right direction. If you have any tips/tricks of your own that you would like to share, please feel free to do so in the comments below. Or if you think I’m full of it, I’ll be happy to discuss your objections as well :)


posted on Web Design Ledger: http://webdesignledger.com/tips/5-tips-for-getting-featured-on-top-design-blogs

筆記-Greasemonkey Script載入jQuery的簡便方法

寫Blog文章分享技術心得的好處之一,便是能結識來自四方的達人高手。前幾天貼了一篇用Greasemonkey Script寫RunKeeper記錄匯入外掛的Coding4Fun文章,JavaScript達人Ammon留言,照慣例又補上了寶貴資訊,其中一項是關於Greasemonkey 0.8版後的新功能--@require宣告

在學習程式的過程中,會陸續接觸到各種情境,如果熱情足運氣好,歷經大小挑戰還沒有被搞到心灰意冷改行賣雞排,你多半能逐漸蒐集齊全解決大小問題的程式範本,成為別人口中很會寫程式的老骨頭。即使遇到很奇怪的需求,也有辦法從口袋掏出個小錦囊來,咔答咔答寫一段Code把問題解決掉。但有趣的是,技術會演進、平台會改版、軟體會升級,五年前寫下的小錦囊,記載要準備汽化燈/瓦斯燈才夠一夜露營照明之需,若沒有人告訴你這年頭LED燈泡配上鋰電池,輕巧無易燃風險就能提供相近的照明,你應該會繼續帶著去漬油跟汽化燈開開心心去露營,雖然還是達成相同目的,卻錯過了應用新技術、新科技省時省力的機會。所以囉,身為開發人員,不斷地補充新資訊是很重要滴,但像Greasemonkey久久才用一次,自然就較少持續關注它的演進發展,我想如果不是Ammon提醒,多年前學會Greasemonkey Script動態載入jQuery的做法,我應該會一直沿用到六十歲吧! 哈~ 因此,分享程式碼或參與Open Source專案,等同邀請所有網友一起來Code Review,常有意外收獲,以此彌補盲點,避開了古人說的"獨學而無友,則孤陋而寡聞"陷阱,各位愛寫程式的阿宅們,分享好處多多,真的~

學會個小技巧也能離題扯上大半天,肯定是"初老",不,是"中老"症狀的"易感嘆愛嘮叼"徵兆。回到主題,以我的實例看一下改用@require的效果。

原本我是這麼寫的:

// ==UserScript==
// @name           Marathon's World-RunKeeper Plugin
// @namespace      darkthread.net
// @include        http://www.marathonsworld.com/app/training.php?*
// ==/UserScript==
 
var GM_JQ = document.createElement('script');
GM_JQ.src = 'http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js';
GM_JQ.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(GM_JQ);
function GM_wait() {
if(typeof unsafeWindow.jQuery == 'undefined')
window.setTimeout(GM_wait,100);
else { $ = unsafeWindow.jQuery; addRunKeeperPlugin(); }
}
GM_wait();
 
function addRunKeeperPlugin() {
blah blah...

改用@require寫法後:

// ==UserScript==
// @name           Marathon's World-RunKeeper Plugin
// @namespace      darkthread.net
// @include        http://www.marathonsworld.com/app/training.php?*
// @require        http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.js
// ==/UserScript==
blah blah...

很省事吧?! 僅以這則筆記分享向Ammon大致敬。

另外,這回還多學到@resource可以預先載入CSS之類的內容,在Greasemonkey Script中可用GM_getResourceText("resource_name”)取出內容,再用GM_addStyle()設定頁面的Style。最後,再補充一個GM_log(),可以在執行期間將偵錯用資訊輸出到主控台,讓Greasemonkey Script的偵測工作簡單一些。以上這些Greasemonkey專屬指令都可以在Greasemonkey Manual-API - GreaseSpot找到詳細說明,開始寫作前不妨看一下。


posted on 黑暗執行緒: http://blog.darkthread.net/post-2012-05-05-greasemonkey-load-jquery.aspx

20 Simple, Yet Clever Logos

Advertise here with BSA


When it comes to design, things don’t have to be complicated in order to be effective. Although, it can be tempting to over design and try to work in lots of detail, it’s not always the best way. This is especially true when it comes to logo design. Usually, the best are the ones that do more with less. Here is a collection of very inspiring logos that take this approach, and rely on cleverness rather than eye candy.

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos

Minimalistic Yet Clever Logos


posted on Web Design Ledger: http://webdesignledger.com/inspiration/20-simple-yet-clever-logos

Crossfading images in a ListView

I’ve recently been doing some work with ListViews that contain images populated from a server. In this scenario the ListView shows a default image and once the required image is downloaded it then displays the downloaded image. Below shows two screenshots of the TED app one showing a ListView with default images, and the other showing the ListView once the images have been downloaded.




The TED app is an example of a really nice android app and it works great. But if you try it, and watch closely as the listview populates the images, you’ll notice that once each image is loaded the default TED image disappears and the downloaded images appears. There’s no transition, one disappears and the other appears. This is ok but does create a slightly jarring experience, in the real world we’re not accustomed to things just appearing and disappearing.


To help create a better experience what we can do is create a transition between the two images. In this case a crossfade transition would work well. Gradually fading the default image out and downloaded image in. Here’s a video showing an example App’ that I created with this crossfade transition.




This video shows an example app that I wrote to test the crossfade transition on the images in a  ListView. It’s a simple app that just downloads images from a Picasa JSON feed. Hopefully you’ll agree that the crossfade of the images is a nice addition and really adds to the user experience.


To do this I first looked at the TransitionDrawable in the Android libs. This looked like a good candidate as it allows two drawables to be associated with it  that you can then crossfade between. Unfortunately this class didn’t quite work for the scenario of transitioning in Listviews as it assumes that you have both drawables when the TransitionDrawable is created. Obviously in this scenario we don’t have both drawables until the second drawable has been downloaded from the server.  

So with a little more searching I then found a class called CrossFadeDrawable that is part of the Shelves app created by Romain Guy. This class is in fact very similar to TransistionDrawble but it also has methods that allow the setting of the end (downloaded) drawable, so it doesn’t need to have both drawables defined up front. The CrossFadeDrawble was almost exactly what I needed , but there was still one more thing that needed to be fixed.

The original CrossfadeDrawble assumed that the start Image (default image) and the end image(downloaed image) would be of the same dimensions. This was not the case in my scenario. What I wanted was something that would scale the downloaded image to fit inside the default start image.



The last thing to do was to add a tweak to the CrossfadeDrawable so that it would use a matrix transformation to scale the downloaded image until it would fit into the dimensions of the default (start) image.

So that was all that needed to be done to create the crossfade transition. Of course since we are using a list view we still have to create an Adapter to populate the list and an Async task to download the images and update the CrossfadeDrawable.



posted on Interfuser: http://www.inter-fuser.com/2012/04/cross-fading-images-in-listview.html

Collective #8

PSD Buttons

Collective8_01

Alessio Atzeni gives us a beautifully clean set of of UI Buttons in this free PSD.

Get it

CreateJS Suite

Collective8_02

CreateJS is a super-suite of useful libraries and tools for creating interactive, HTML5 based web content. As they are modular, the libraries can work independently from each other. You can also mix them and use them as needed. Check out the featured projects to see some of them in action.

Try it

Mobile-First Responsive Web Design

Collective8_03

In this HTML5 Rocks tutorial, Brad Frost shows us step-by-step how to create a responsive website which is designed with the mobile-first strategy.

Read it

Beercamp: An Experiment With CSS 3D

Collective8_04

Tom Giannattasio, this year’s Beercamp website organizer, shares some amazing techniques and insights of the 3D experience that pushes the boundaries of what can be done with modern web technologies such as SVG and CSS 3D transforms. Make sure to see the website in action: http://2012.beercamp.com/

Read it

CSS Selectors

Collective8_05

If you need a complete reference of CSS Selectors then this is the right site. It’s a great overview with links to live examples and visual indication for browser support.

Check it out

Let’s Talk about Semantics

Collective8_06

Mike Robinson explains the importance and of semantics in HTML and how to employ HTML5 for writing meaningful markup without getting lost in the confusion that surrounds it.

Read it

Tracking Scroll Depth

Collective8_07

If you have a website you might have wondered how far down users scroll to see the “below-the-fold” content. Rob Flaherty from Ravelrumba explains how to use jQuery Scroll Depth to record and report scroll events to Google Analytics in order to see the scroll percentage.

Try it

heatmap.js

Collective8_08

Create heatmaps of a website with this JavaScript library that employs HTML5 canvas.

Get it

PageSlide

Collective8_09

Have you ever wondered how to slide the whole website and reveal a sidebar panel a lá Path? With this jQuery Plugin you can simply do that and create a really nice effect for showing optional content. Don’t forget to check out the responsive demo.

Get it

Responsive Viewport Units

Collective8_10

The new CSS3 values and units vh, vw, and vmin are arriving and it’s time to meet these cool kids. David Storey introduces them and shows us how to use them in a responsive example.

Read it

Refactoring >14,000 lines of CSS into Sass

Collective8_11

How do you turn a CSS mess into slick high-performance CSS? You use SASS! Eugene Fedorenko will show you how he did it at Beanstalk and what the advantages over “handcrafted” CSS are.

Read it

10 High-Quality Photography Icons

Collective8_14

Iconshock has designed this amazingly detailed icon set for the readers of the Vandelay Design blog. The set includes 10 high-quality photography-related PNG icons.

Get it

About CSS Variables

Collective8_12

Now that the CSS Variables Module Level 1 is an actual Working Draft of the W3C, you might be interested in how CSS Variables work. This is a short overview with a couple of examples.

Read it

How to use CSS to hide links without href?

A very interesting question on Stackoverflow about an interesting little problem with even more interesting answers. It will help you undertstand more about CSS Selectors.

Read it

200 Free Icons

Collective8_13

Inventicons gives us this fabolous icon set for free. It includes many useful UI icons and is free for personal and commerical use.

Get it

Alphageometry – Decorative Typeface

Collective8_16

This is not a font in the classical sense but letters in vector format that you can use to create beautiful decorative illustrations.

Get it

cookie.js

Have you ever worked with Cookies in JavaScript on your website and find it too messy? This small and independent JavaScript library will help you with setting, getting and removing cookies in the most simple way. It has some very useful methods, accepts several paramteres and allows chaining.

Get it

Premium Pixels Icon Set

Collective8_15

Matt Gentile did it again: a super-slick icon set, including the Photoshop custom shape file.

Get it


posted on Codrops: http://tympanus.net/codrops/collective/collective-8/

23 Inspiring Examples of Contact Pages

Advertise here with BSA


When designing a website we need to think about every aspect, from header to footer, from landing page to about us page, and even the contact page. It’s important to make sure the design is great all the way through. So today we decided to gather a few examples of how websites are displaying their contact page. Some dedicate a complete page to make the user get in contact. Others use a section inside the about page, while some have the contact information on the sidebar or footer. Whatever way you decide to display your contact space, make sure to take good care of this specific section because it can get the user’s attention or scare them away (and this could cause you to loose your next client/user).

Planoform

Inspiring Contact Pages

Studio8169

Inspiring Contact Pages

Academy

Inspiring Contact Pages

Denise Chandler

Inspiring Contact Pages

Oliver Spencer

Inspiring Contact Pages

Studio Chirpy

Inspiring Contact Pages

fffunction

Inspiring Contact Pages

Bobadilium

Inspiring Contact Pages

caseybritt.com

Inspiring Contact Pages

Campbell Harrison

Inspiring Contact Pages

Whiteboard

Inspiring Contact Pages

Ineo Designlab

Inspiring Contact Pages

Level

Inspiring Contact Pages

The Barrelhouse Flat

Inspiring Contact Pages

Rosie Lee

Inspiring Contact Pages

FO

Inspiring Contact Pages

TokioLab

Inspiring Contact Pages

Haus

Inspiring Contact Pages

Second Story

Inspiring Contact Pages

Ache

Inspiring Contact Pages

Modo Luce

Inspiring Contact Pages

roundrobin studios

Inspiring Contact Pages

Stephan Rizon

Inspiring Contact Pages

Awwwards
CSS Design Awards
The Best Designs


posted on Web Design Ledger: http://webdesignledger.com/inspiration/23-inspiring-examples-of-contact-pages

9 jQuery Mistakes you Shouldn’t Commit

Advertise here with BSA


jQuery is so easy to use that sometimes we just forget that it’s not CSS. While using CSS, we don’t have to give much thought to performance, because it’s so fast that it’s not worth the effort to optimize it. But when it comes to the real world, jQuery can drive developers crazy with performance issues. Sometimes you lose precious milliseconds without even noticing it. Also, it’s so easy to forget about some functions and we keep using the old (and not-so-good) ones.

Let’s take a look at a few of the most-common-and-easiest-to-fix mistakes while using jQuery in your projects.

1. You aren’t using the latest jQuery version

Each version update means higher performance and several bug fixes. The current stable release is 1.7.2, and I’m pretty sure you know about plenty of sites developed using 1.6 and below. Ok, ok, you can’t just update every old site for every jQuery update (unless your client is paying you to do so) but you should at least start using it for your new projects. So, forget about this local copy and just grab the latest release every time you start a new project.

2. You aren’t using a CDN-hosted copy of jQuery

How many unique visitors you`ve got last month? I bet the number is still under 1 billion, right?
So you’d better use Google’s copy of jQuery instead of yours. If your user still has the cached file of Google’s website (or from many other sites that uses its CDN) his browser will just get the cached version, improving a lot your website’s performance. You can use it by copying & pasting this HTML:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

3. You aren’t using a fallback for CDN version

I know I said Google is awesome and stuff, but they can fail. So, every time you rely upon external sources, make sure you have a local fallback. I’ve seen this snippet in the HTML5 boilerplate source code and just found it amazing. You should use it too:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

4. You aren’t chaining stuff

While doing common operations, you don’t need to call the element every time you want to manipulate it. If you’re doing several manipulations in a row, use chaining, so jQuery won’t need to get the element twice.

Instead of this:

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

Use this:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5. You aren’t caching stuff

This is one of the most important performance tips. If you’ll call an element at least twice, you should cache it. Caching is just saving the jQuery selector in a variable, so when you need to call it again you’ll just reference the variable and jQuery won’t need to search the whole DOM tree again to find your element.

/* you can use it this way because almost every jQuery function returns
the element, so $mydiv will be equal to $(“#mydiv”); also it’s good to
use the $mydiv so you know it’s a jQuery caching var */

var $mydiv = $(“#mydiv”).hide();
[.. lot of cool stuff going on here …]
$mydiv.show();

6. You aren’t using pure js

Specially for attributes modification, we have several built in methods to get stuff done with pure javascript. You can even “convert” jQuery objects back to DOM nodes to use them with simpler methods, like this:

$mydiv[0].setAttribute('class', 'awesome'); //you can convert jQuery objects to DOM nodes using $jqObj[0]

7. You aren’t checking plugins before including in your site

You know, jQuery is not the hardest thing in the world to code. But good JS (and jQuery), that is pretty hard. The bad news is that while you aren’t a good programmer, you’ll have to rely on trial and error to find out what is good and what isn’t. A few points you must be aware of while including a plugin in your project:

  1. File Size (the easiest to check!) – if a tooltip plugin is bigger than jQuery source, something is really wrong;
  2. Performance – You can try it with firebug and others. They give you easy to understand charts to you’ll know when something is out of place;
  3. Cross-browsing – Test, at least on IE7, but Chrome, Firefox, Safari and Opera are good ones to try also
  4. Mobile – Don’t forget that everything is getting mobile. See if the plugin works, or at least doesn’t crash your mobile browser

8. You aren’t open to remove jQuery

Sometimes it’s just better to remove it and use simple ol’ CSS. Actually if you want, for instance, an opacity hover, or transition can be done with CSS along with good browser support. And there’s no way jQuery can beat plain CSS.

9. You are using jQuery for server side tasks

I know that masking and validating are good, but don’t rely just on jQuery for those. You need to recheck everything on the server side. That is especially important if you are thinking about using AJAX. Also, make sure everything will work with JS disabled.

So, it’s your turn!

Do you have anything you think should be on this list? Share your thoughts!


posted on Web Design Ledger: http://webdesignledger.com/tips/9-jquery-mistakes-you-shouldnt-commit