Just because you can: GUI icons with pure CSS

// Inspired by an elegant piece of CSS code by +Lea Verou, creating the WiFi code (see it here http://bit.ly/wificss), I searched for other examples of this and found this little gem: A demo of 84 icons created with just CSS by +Nicolas Gallagher.

Nicolas calls it's a "technical exercise" but given that this was done back in 2010 and support for the methods used is much wider now, the code should be working in all modern browsers. 

You can see it in action and dig into the code here http://bit.ly/css-gui-icons

Charts with Javascript: even more ways to kill Flash

// Javascript-powered chart solutions is a favorite topic of mine, so here are a few more options for you- NVD3 (http://nvd3.org/) builds upon the powerful D3 library and currently supports 11 different interactive chart types

- Rickshaw (http://code.shutterstock.com/rickshaw/) also built on D3, can be used for live-data time graphs with 4 customisable chart types

_ gRaphaël (http://g.raphaeljs.com/) is based on Raphaël and has 4 different chart types including a dot chart

- YUI charts (http://yuilibrary.com/yui/docs/charts/) is part of the YUI library and supports 7 chart types

- Polychart.js (http://polychartjs.com/) has 5 chart types which can be combined.

Depending on your situation and needs any of this could work, but surely NVD3 stands out. For more on the topic, see here http://bit.ly/g-chart

Draft: cloud text-editing for any anything anywhere

// I've written about #Draft already a few days ago http://bit.ly/g-draft when it was "just" a web-based text #editor for #Dropboxand Google Drive with version control and collaboration features.But I need to write again as a #Chrome extension was released that redefined how you can use Draft. I'll just copy the developer's (+Nathan Kontny) description:

Any webpage that you can write on, you can now use Draft with. Your blog, Gmail, Twitter, Facebook, even comment boxes on websites like Reddit and Hacker News. Just place your cursor in the box you want to write in, click the Chrome Draft extension, and Draft will open up in a new Chrome Tab. Choose an already written document or something new to write in Draft (any text from the original text box will carry over). When you're done, there's a menu button to paste your work back into the text box you came from.

As I write this post on Draft, it's a much better experience of writing without all the noise of Google+'s interface. Highly recommended, get Draft here http://bit.ly/draft-chrome

Twitter Cards: Engage!

// Just 6 days after my submission for inclusion on the #TwitterCards program, I got in and in the screenshot you can see the result: whenever someone tweets a URL of my blog, an "expanded view" will be available with a title, short description, thumbnail, my name and #Twitter handleIt also works on the mobile (iOS at least) app. See it live here http://bit.ly/t-cardtweet and read more about it here http://bit.ly/g-twitter-cards

Improve links to your site on Twitter with Twitter Cards

// Announced since last July, Twitter Cards is Twitter's equivalent (or "answer" if you like tech drama) to the Open Graph. By defining a set of #meta #tags in your #HTML code you can provide instructions to #Twitterin order to display an "expanded" preview of your page, when your page's URL is included in a tweet.Twitter Cards come in 3 types:
- summary: The default card, which includes a title, description, thumbnail image, and Twitter account attribution.
- photo: A Tweet sized photo card.
- player: A Tweet sized video/audio/media player card.

Basically, you can use the first for article pages (think of blogs), the second for pages where the main content is a photo (e.g. Instagram) and the third one for pages of videos (e.g. YouTube).

The structure of the meta tags are similar to #OpenGraph and you can read about it in the official documentation (http://bit.ly/twittercards). While Twitter re-invented the concept of meta tags for describing a page for social media consumption, they acknowledged that having duplicate meta tags is kind of silly, so if you already have the OG tags of title, image, url and description in your code, they will be recognised for their twitter equivalents (you still need to add a couple of twitter tags though).

The feature is still in development, simply adding the tags on your site will not do anything yet. You need to submit a form (http://bit.ly/t-cards-form) asking to be included in the beta.  Twitter promisses to respond to you in "a few weeks". Until then, you can try out your page on the preview tool (http://bit.ly/t-cards-preview). If you have a WordPress blog, you can use the Twitter Cards plugin (http://bit.ly/wp-twitter-cards) which does (almost all of) the job for you.

If you have gone through the process and can share some feedback on how this worked for you, post in the comments :)

Tracking shares before they happen (or even if they don't happen)?

// A tricky question poped up in my Quora home page: Is it possible to check, if somebody requested your site's #meta #tags ?The logic behind this is that you could track social shares even if the user doesn't complete the process (load's up the URL on Facebook or a sharing widget) and then quits.

My suggestion and response on Quora was that one can use the og:image tag. Declare a specific image that is only used on the og:image tag. Then check the Apache logs for requests to that image.

You will have when someone started the sharing process. You won't have when the shared page is shown in Facebook, because what is shown is a cached thumbnail that Facebook keeps. On that thought, you might want to have a dynamic URL for the image because the first time someone starts the sharing process, Facebook creates the cached copy (which is stored for some time)

Alternatively to the Apache logs part, you can set up some PHP/whatever script as the URL, allowing you to create a dynamic URL but also keep track of the requests in a database (easier than running analytics on Apache logs).

I haven't tried this, but I don't see why it wouldn't work, at least in part. It all comes down to Facebook/Twitter's cache systems and how often their cache is refreshed. It might also be worth looking into adding a random variable at the end of the og:url so that when someone tries to share the page (from a FB/Twitter button on the page for example) it would be a new URL and it would not be cached. Of course this would probably mess with share/like counts of the page.

That said, Twitter has their own set of  meta tags (because using the OG tags would be a discrace apparently), described here http://bit.ly/twittercards

Further thoughts on this are welcome :)

How to create an infographic from your Google Analytics data

// Well, there's not much to say here. People love #infographics for visualising information and numbers in an easy to consume manner. People also love #GoogleAnalytics for an endless amount of #statisticsabout their website.Now you can combine both with a few clicks on the free tool by Visual.ly. The process is relatively simple, you connect +Visually with your GA account, select the website you want the report of, and you're done. You get a result for the last week, like the one shown on the screenshot (you get the typical long form, but I've re-arranged it to fit better on a page). You can also set to have a weekly report sent to your e-mail address.

Try it out here: http://bit.ly/visually-ga

Found via +Jules Stuifbergen

Does your company know what the internet is?

//_UPDATE_: The situation has been sorted out, the project is back online normally http://bit.ly/chartjs

// Yesterday I wrote (http://bit.ly/g-chartjs) about Chart.js, a new library for javascript/canvas-based charts. A day later, the site is down with a note shown in the screenshot, basically explaining how the developer's employer doesn't like the idea of #OpenSource.

Here's the outcome so far after a few hours:
- The code was removed from the original Github repository but of course has been copied (here http://bit.ly/chartjs-fork along with at least 92(!) forks) and it's not about to be ever deleted completely
- The angry commentators at Hacker News are already looking for the name of the company http://bit.ly/chartjs-hackernews

This is bound to get some press soon...

That said: this wasn't a ground-breaking piece of technology. There is no case that it was any kind of competitive advantage for the company (plus the whole IP issue is ambiguous as this was a university project of the developer). The company had nothing to lose with this being released as open source, only to gain from the publicity of one of their employees releasing a successful open source project.

But if you don't know what the internet is, you're bound to act like an idiot...

Chart.js: cross-browser, animated, HTML5 charts

//Non-Flash charts is a favourite topic of mine (see more here http://bit.ly/g-chart), basically because charts have been one of the last things Flash could do that HTML couldn't. This of course has been changing a lot the last few years. 

Another very recent (released yesterday!) example of is Chart.js. It packs: 
- 6 animated chart types: Line, bars, radar, pie, polar area and doughnut
- Canvas-based vector output which means crystal clear graphics at any resolution
- Cross-browser support on modern browsers, support for IE8 and below through ExplorerCanvas
- No Flash = Mobile-ready (kind of obvious since it's HTML5 but worth noting) 
- Lightweight and very good documentation (for a 0.1 release) 

Get Chart.js here http://bit.ly/chartjs

(Found via +Michael Mahemoff and +Stephen Bond)

Blog redesigned - comments?

// I hadn't touched my blog's design for a bit over year, so I thought it was time for a refresh. Yes, In case you haven't noticed, I have a blog at which contains a full (an indexed) archive of all my Google+ posts. 

So over the last 20 months I have ended up writing about a big variety of topics and I realised people probably would not want to scroll through the entire article to get to the next one. So the content on the homepage and category pages needed to be "compressed". Also the big header was taking up to much space, pushing everything down. 

With that in mind, this redesign set out to achieve the following: 
- Provide a cleaner layout with emphasis on content (kind of obvious but still) 
- On the home page and category pages, give instant access to more content 
- Improve navigation options by replacing the drop-down menu with a list of categories
- Remove social media junk (there were all sorts of buttons) that had gathered over the years

You can see the before (left) and after (right) on the screenshot. Check out the site here http://bit.ly/giannopoulos 
What do you think?

(Masonry effect using Isotope by David DeSandro. Fonts used are Homenaje by Constanza Artigas Preller and Agustina Mingote and Roboto by Christian Robertson, you can find them on Google Web Fonts)

Add icons to your links with CSS3

// A lovingly quick way to add icons next to your links that I just saw in +Lea Verou's (of W3C) site: all you need is a simple line of #CSS3 code.

a[href^="http://twitter.com"]::before { content: url("twitter.png"); }

See it live at http://lea.verou.me/

The Ultimate Browser Detection Fail

// So here's a screenshot from #Google #Nexus , running Google's #Android browser, showing a page on a Google service (Google Groups). We notice two things happening: 

1) Google's page can't identify Google's browser correctly and instead mistake it for #Safari
2) Google engineers can't (or wont?) make a page of relatively simple (in terms of features) web service to run on Safari, one of the two biggest mobile browsers, disregarding the fact that both browsers use the same engine.

I've recently switched from Safari to #Chrome due to better memory usage but these kind of ridiculous "games" really need to stop...

CSS Paint times and a Faster Web Experience

// At a perhaps an alarming rate, web sites are becoming more and more like complete applications, see for example the refreshed +The Next Web or +Mashable). This means that looking into initial page loading times is not enough. We need to monitor how the web page reacts at user input. 

+Addy Osmani has been posting a lot about this topic, check out his article DevTools: Visually Re-engineering CSS For Faster Paint Times http://bit.ly/VfpHen

Change your scrollbars with jQuery NiceScroll

// For some time changing the look of #scrollbars has been quite tricky but the last couple of years this has become easier. Probably one of the best is a #jQuery  plugin call NiceScroll. Now in version 3 it features:

- simple installation with just a line of code for any div or the whole page 
- support for cursor/mouse wheel/keyboard
- support for all browsers (even IE6) and touch devices
- zoom feature that showcases just a specific div 

Get NiceScroll here http://bit.ly/11zztgv

Finally, an awesome UX tutorial

// Answering the question "What are the best resources for learning bleeding-edge web, UI and UX design?" on Quora, Colm Tuite, UI/Visual Designer & Developer, decided to write one of this own. The result was an extensive post / #tutorial  with 10 steps to a decent (if not great) start in learning about #UX. To sum up: 

1. Discover the problem
2. Get to know your users
3. Learn to #wireframe properly
4. Communicate effectively
5. Guide your users
6. Encourage your users
7. Reward your users
8. Learn the basic fundamentals (HTML, CSS, JS, Ruby, Python etc.)
9. Learn visual #design
10. Study. Study. Study.

Read the full article here http://b.qr.ae/XNmOQH

History: G+ Activity Log for the rest of the Web

// I recently wrote http://bit.ly/Vx6wiE asking for a #Google+ activity log, a page where you could see all the posts you +1ed or commented on. The problem is, if someone doesn't interact with the post after you, you can't easily find it. 

It turns out something like this is on the works. +Shamil Weerakoon pointed me to the direction of the #Google #HistoryAPI. Announced back in June of last year at Google I/O, it promises to allow websites to post updates of actions you take around the web to Google's archive. If the concept sounds familiar it is because #Facebook has already done with #OpenGraph http://bit.ly/YG2e9B

The History #API is still in development but you can get a taste of it already. You can have in a single page, the archive of pages you +1ed around the web (not G+ posts), videos you viewed on YouTube, apps you got from Google Play, photos from Instant Upload and searches you have made (although that last one hasn't appeared on my page so far). People concerned with #privacy  should be reassured by the fact that you can select per source who can see your history (i've set everything to "only me"). 
 
Click here to learn more http://bit.ly/WARdDg and here http://bit.ly/WzOOce to sign-up. And here's another #googleplusrequest : Do the obvious, integrate this with Google posts and comments! :)

Photobox: CSS3/jQuery image gallery

// There are probably thousands of #lightbox  solutions but here is fancy one, straight from the refreshed #jQuery   #plugins  site (http://bit.ly/YBFQye):

Photobox promises to be a lightweight image gallery modal window script which uses only #CSS3 for silky-smooth animations and transitions. The goal was to create an image #gallery script that uses GPU rendering to move things around, instead of the old fashioned #javascript way (e.g. most other scripts in existence).

The visual result is what you see in the screenshot, check out the demo and download it here http://bit.ly/114QgYz 
Official support includes Firefox, Chrome and IE8+, although Safari had no issues with it as well. 

15 Years of Apple.com

// A collection of #Apple 's home page layouts since 1997!
http://www.slideshare.net/choehn/15-years-of-applecom-15990876

Going Fullscreen with HTML5

// Up until recently, having a web page running in full screen was not possible, left only for #Flash -based sites. The best you could do was remove the menu/location bars but still the window frame remained.

This has changed with the #HTML5 #Fullscreen API which allows handling full-screen capability of the browser via #javascript . Support for this exists in modern browsers http://bit.ly/10IhvXN, with the exception of Internet Explorer of course. The feature is actually in use on Google+ (press space when you view a photo to enter full screen) as well as Facebook (through an "Options" menu choice).

For more details on adding this to your site, see this analysis of the related functions http://bit.ly/XXunVA by John Dyer, including a jQuery code example. There is also another #jQuery plugin implementing the spec, screenfull.js, here http://bit.ly/Yn2c6s
(Screenshot from the Mozilla demo page http://bit.ly/TldSoH)

Tinycon: favicon alert bubbles

// If you are building a web application, here's a nifty solution for alerting the your user of something new, like a new message or a reminder: 

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don't support canvas or dynamic favicons.

See it in action and get it here http://bit.ly/YhEsk2