famfamfam.com: Home

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.famfamfam.com/","20150905055814","https://web.archive.org/","web","/_static/", "1441432694"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <title>famfamfam.com: Home</title> <link href="/web/20150905055814cs_/http://www.famfamfam.com/themes/alphasimple/styles/alphasimple.css" rel="stylesheet" type="text/css"/> <link rel="Shortcut Icon" href="/web/20150905055814im_/http://www.famfamfam.com/favicon.ico" type="image/x-icon"/> <link rel="alternate" type="application/rss+xml" title="famfamfam.com news" href="feed.xml"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="mssmarttagspreventparsing" content="true"/> <meta name="robots" content="all"/> <meta http-equiv="imagetoolbar" content="no"/> <meta name="description" content="famfamfam is the personal website of Mark James"/> <meta name="keywords" content="uk, united kingdom, england, birmingham, php, html, css, xhtml, xml, flash, icons, developer, web design, web designer"/> <meta name="author" content="Mark James"/> <meta name="copyright" content="Mark James"/> <meta name="revisit-after" content="7 days"/> <meta name="geo.position" content="52.5251;-1.9052"/> <meta name="geo.region" content="GB-BIR"/> <meta name="geo.placename" content="Birmingham"/> <meta name="geo.country" content="GB"/> <meta name="ICBM" content="52.5251;-1.9052"/>  <script src="/web/20150905055814js_/http://www.famfamfam.com/mint/?js" type="text/javascript"></script> <script src="/web/20150905055814js_/http://www.famfamfam.com/themes/alphasimple/scripts/sifr.js"></script>  </head>  <body> <div id="container-outer"> <div id="container-inner"> <div id="header"> <div> <h1><a href="/web/20150905055814/http://www.famfamfam.com/"><span>Famfamfam</span></a></h1> </div> </div> <ol id="breadcrumbs"> <li class="active"><a class="first" href="/web/20150905055814/http://www.famfamfam.com/">Home</a></li> </ol>  <div id="content-outer"> <div id="content-sidebar"> <ul id="menu"> <li><a class="active" href="/web/20150905055814/http://www.famfamfam.com/">home</a> <div> <ul> <li><a href="/web/20150905055814/http://www.famfamfam.com/archive/">archive</a> <li><a href="/web/20150905055814/http://www.famfamfam.com/about/">about</a> <li><a href="/web/20150905055814/http://www.famfamfam.com/lab/">lab</a> <div> <ul> <li><a href="/web/20150905055814/http://www.famfamfam.com/lab/flash/">flash</a> </li> <li><a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/">icons</a></li> <li><a href="/web/20150905055814/http://www.famfamfam.com/lab/php/">php</a></li> </ul> </div> </li> </ul> </div> </li> </ul> <img id="side-header" src="/web/20150905055814im_/http://www.famfamfam.com/themes/alphasimple/images/side-header.gif" alt=""/> <ul id="side"> <li><a href="https://web.archive.org/web/20150905055814/http://www.naturlex.de/Forever-Living-Products/Trinkkur/Aloe-Vera-Gel-15.html">Aloe Vera Saft GEL</a></li><li><a href="https://web.archive.org/web/20150905055814/http://www.quickdict.de/">Wörterbuch</a></li><li><a href="https://web.archive.org/web/20150905055814/http://insightimage.com/">Insight Image</a></li><li><a href="https://web.archive.org/web/20150905055814/http://www.eleganceweddingcarhire.co.uk/">Elegance - Wedding Cars in Sutton Coldfield, Birmingham and the West Midlands</a></li> </ul> </div> <div id="content-inner"> <h2>Home</h2> <p>Welcome to famfamfam.com, personal site and web playground of Birmingham (UK) based developer Mark James.</p>  <h3>Silk icons - That's your lot</h3> <p class="date">11:11pm 12th March 2006</p> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/silk-icons-thats-your-lot/">Permalink</a></p> <p> After a hiatus for website updates, I have spent a little time tidying up the free Silk web icons, adding a few of the many requested icons and a sprinkle of others to complete the set. The original idea was to add another 100 or so and call it a day, but the closer I got to 1000 of the little things, the more it felt right to make it up to a nice round figure. <p> <p> So here we go, ‘<a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/">Version 1.3</a>’ of the Silk web icon set, with <strong>1000 icons </strong>, including report icons, some new picture icons, some small XHTML/CSS buttons, and some hardware drive icons. The feed icons have been brought into line with new standard, and all icons have been compressed to lower the filesize. For the sake of my inbox and my sanity, I'm now calling this set complete. </p> <p> <table class="preview-table"> <tr> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/application_form.png" alt="Silk icon: Form" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/book_addresses.png" alt="Silk icon: Address Book" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/webcam.png" alt="Silk icon: Webcam" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/css_valid.png" alt="Silk icon: Valid CSS" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/camera.png" alt="Silk icon: Camera" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/date.png" alt="Silk icon: Date" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/door_in.png" alt="Silk icon: Exit" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/drive_cd.png" alt="Silk icon: CD Drive" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/feed.png" alt="Silk icon: Feed" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/lorry.png" alt="Silk icon: Lorry/Truck" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/map.png" alt="Silk icon: Map" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/picture_add.png" alt="Silk icon: Add picture" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/pictures.png" alt="Silk icon: Pictures" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/report.png" alt="Silk icon: Report" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/telephone.png" alt="Silk icon: Telephone" width="16" height="16"/></td> </tr> </table> </p> <p> In other news, my RSS feed is working again (thanks to everyone who bought it to my attention every other day), and I'm moved over to my <a href="https://web.archive.org/web/20150905055814/http://www.dreamhost.com/">new web host</a>. I will be making a couple of updates to the flags soon, then I hope to move on to something that requires a little less squinting.</p> <p>Go download the <a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/" title="Silk icon set">Silk icon set</a>. They're free, so you have no excuse not to.</p>   <h3>Another 212 Silk icons</h3> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/another-212-silk-icons/">Permalink</a></p> <p class="date">9:47pm 4th October 2005</p> <p> The free icon set has been getting pretty consistent downloads for a while, and with 500 of the little things, its not too hard to guess why. Of course, that hasn't stopped you talented and hungry developers asking for yet more icons, and who am I to refuse? In between buying a swanky new iPod nano, and lying in bed feeling rather ill, I have been trying (moderately hard) to satisfy your every icon need. <p> <p> Now with over <strong>700</strong> icons, and including such oft-requested icons such as: users in suits, zoom icons which are not so horrifically ugly, media player buttons, and file type icons (amongst others). Here comes ‘<a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/">Version 1.2</a>’. </p> <p><a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/" title="Silk icon set">Silk icon set</a></p>   <h3>Even more silk icons!</h3> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/even-more-silk-icons/">Permalink</a></p> <p class="date">11:55pm 10th September 2005</p> <p> The feedback on the silk icons was totally unsuspected in volume, but nevertheless thoroughly warmed my cockles. Thanks for everyone who linked, blogged about, delicious'd, or insulted me in spanish about them, and much thanks to the people who have started using them in some (pretty good looking) websites and web applications. Thats what they exist for, of course. <p> <p> Anyhow, without further ado, I am releasing the next version of the Silk icons, the shockingly titled ‘<a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/">Version 1.1</a>’. Now containing exactly <strong>500</strong> icons. </p> <p>Sorry to everyone who suggested an icon which I havn't got around to making yet, keep your eyes peeled. <a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/" title="Silk icon set">More information about the silk icon set (and download link)</a></p>   <h3>After Eight Mint</h3> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/after-eight-mint/">Permalink</a></p> <p class="date">0:35am 6th September 2005</p> <p class="preview" style="width: 80%;"><strong>Update</strong>: There are few Mint-inspired icons available at <a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/lab/icons/mint/">http://www.famfamfam.com/lab/icons/mint/</a></p> <p> Something has got to be pretty interesting to convince me to delay sleep, and statistics can often be that thing. Again with minty Shaun-Inman-flavoured news, my site is now sporting spinkee new <a href="https://web.archive.org/web/20150905055814/http://www.haveamint.com/">Mint</a> statistics logging. All the hype pointed to a release date of <del>tommorow</del> <ins>today (it <em>is</em> after midnight, after all)</ins>, which left me rather flatfooted when it was released early, just minutes before I was planning to get an early night's sleep. Anyhow, heres a preview of my first ever Mint-tracked site hit (mysql, depressingly): <img src="https://web.archive.org/web/20150905055814im_/http://www.famfamfam.com/archive/after-eight-mint/mint_preview_1.gif" alt="Preview of Mint stats" style="float: none; border: 1px solid #F0F0F0; display: block; margin: 20px;"/> The interface really is lovely, although I'm a little tentative in proclaiming the wonders of Mint, the reasons for which can await a post at a later date when I am more awake. </p> <p> The installation gave me a few troubles, from quickly scouring the code trying to hunt down my problem, I realised that I needed the <code>ALTER</code> priviledge set up for my SQL user to install ‘Pepper’ (modules). There is currently no feedback on problems like this, it repeatedly told me it was installing fine. The only other problem was the slightly jarring feeling when you first load up the stats, the default pepper was unloaded, causing slight worry. </p> <p> Finally though, I get to return to beautiful sleep. Writing Pepper will have to wait. </p>   <h3>Hopping with Shortstat</h3> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/hopping-with-shortstat/">Permalink</a></p> <p class="date">9:50pm 4th September 2005</p> <p> Shaun Inman's <a href="https://web.archive.org/web/20150905055814/http://www.shauninman.com/plete/2004/06/shortstat-again">ShortStat</a> software is nothing but addictive, especially with the addition of the <a href="https://web.archive.org/web/20150905055814/http://jehiah.com/projects/pathstats/">PathStats</a> extension. But never one to be satiated, and always one to be aroused by interactive visualisation of just this kind of data, I have quickly knocked together the TravelStats extension, which displays a directed graph of the pages on the site, with the thickness of the lines displaying the relative amount of people who 'hopped' between pages. <a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/shortstat/hops.php"> <img src="https://web.archive.org/web/20150905055814im_/http://www.famfamfam.com/archive/hopping-with-shortstat/travelstats_preview_1.gif" alt="Preview of a travelstats hop graph" style="float: none; border: 1px solid #F0F0F0; display: block; margin: 20px;"/> </a> For a live preview, visit <a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/shortstat/hops.php">http://www.famfamfam.com/shortstat/hops.php</a> (Requires java). The graph uses the <a href="https://web.archive.org/web/20150905055814/http://prefuse.sourceforge.net/">prefuse interactive visualization toolkit</a>, and the data is an XML file produced by a short hand-rolled PHP script. It is all a little haphazard at the moment, held together with bits of string and duct tape, I will release the code if it seems as if anyone cares to actually visit enough. </p> <p> In similar news: <a href="https://web.archive.org/web/20150905055814/http://haveamint.com/">Mint</a>, the spiritual successor to ShortStat, will be apparently released on the 6th, undoing all of my hard(?) work. Stats software is not hugely tricky to write, but as always Mr Inman and friends also manage to add just that extra spikle of minty-freshness. Various bloggers have been evangelising their beta copies, all strangely on the same day, and it does look interesting. Not that I am peppermint-green with envy at all (<em>*wink*</em>). </p>   <h3>Silk icon set released!</h3> <p class="date">10:30pm 31st August 2005</p> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/silk-icon-set-released/">Permalink</a></p> <p> One of the main reasons for finally getting famfamfam.com online is the completion of this new, open-source icon set for websites and web applications. <a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/">“Silk”</a> is a smooth icon set, containing over 300 16-by-16 pixel icons in strokably-soft PNG format, and growing all the time based on requests by you. They work equally well on light and dark backgrounds, and they don't cost a penny (release inspired by the <a href="https://web.archive.org/web/20150905055814/http://www.el73.be/drunkey-love/icons/">Drunkey ♥ Love icon set</a>). </p> <p> <table class="preview-table"> <tr> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/accept.png" alt="Icon sample: Accept" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/arrow_redo.png" alt="Icon sample: Redo arrow" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/calendar_edit.png" alt="Icon sample: Edit calendar" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/cart.png" alt="Icon sample: Shopping cart" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/chart_line.png" alt="Icon sample: Line chart" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/coins.png" alt="Icon sample: Coins" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/disk.png" alt="Icon sample: Disk" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/emoticon_grin.png" alt="Icon sample: Happy emoticon" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/folder_key.png" alt="Icon sample: Folder key" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/transmit_blue.png" alt="Icon sample: Transmit" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/world_link.png" alt="Icon sample: World (link)" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/wand.png" alt="Icon sample: Wand" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/printer_add.png" alt="Icon sample: Add printer" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/weather_rain.png" alt="Icon sample: Weather, rain" width="16" height="16"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/silk/icons/page_save.png" alt="Icon sample: Save page" width="16" height="16"/></td> </tr> </table> </p> <p>Use them to your heart's content, and don't forget to leave ideas for additions to the set! <a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/silk/" title="Silk icon set">More information about the silk icon set (and download link)</a></p>   <h3>Flag icons released!</h3> <p class="date">11pm 30th August 2005</p> <p class="permalink"><a href="https://web.archive.org/web/20150905055814/http://www.famfamfam.com/archive/flag-icons-released/">Permalink</a></p> <p> Lots of websites and software use data about countries, especially web applications that do statistics or user identification. One would expect that good looking country flags would be abundant, yet having Googled long and hard, I came up with very little. This, plus a week with little to do, resulted in the following icon set. </p> <p> <a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/flags/">“Flags”</a> contains 239 small flag images in both PNG and GIF format, one for pretty much every country in the world. It's all free for any kind of use (although theyre not big enough to wave around on your local holidays). </p> <p> <table class="preview-table"> <tr> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/af.gif" alt="Flag icon sample: AFGHANISTAN" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/al.gif" alt="Flag icon sample: ALBANIA" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/bb.gif" alt="Flag icon sample: BARBADOS" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/br.gif" alt="Flag icon sample: BRAZIL" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/ca.gif" alt="Flag icon sample: Oh canada!" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/cv.gif" alt="Flag icon sample: CAPE VERDE" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/de.gif" alt="Flag icon sample: GERMANY" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/hk.gif" alt="Flag icon sample: HONG KONG" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/ie.gif" alt="Flag icon sample: IRELAND" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/mo.gif" alt="Flag icon sample: MACAU" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/mx.gif" alt="Flag icon sample: MEXICO" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/pt.gif" alt="Flag icon sample: PORTUGAL" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/tr.gif" alt="Flag icon sample: TURKEY" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/us.gif" alt="Flag icon sample: UNITED STATES" width="16" height="11"/></td> <td><img src="/web/20150905055814im_/http://www.famfamfam.com/lab/icons/flags/icons/gif/fam.gif" alt="Flag icon sample: Famfamfam!" width="16" height="11"/></td> </tr> </table> </p> <p>Get downloading and start using! They are all named by the correct country code for the country, and there are even a couple of extra icons for us Britons. <a href="/web/20150905055814/http://www.famfamfam.com/lab/icons/flags/" title="Flags icon set">More information about the flags icon set (and download link)</a></p>  </div>  <br class="clear"/> </div> <div id="footer"><a type="application/rss+xml" href="/web/20150905055814/http://www.famfamfam.com/feed.xml">famfamfam news feed</a></div> </div> </div> <script type="text/javascript"> //<![CDATA[ if(typeof sIFR == "function"){ sIFR.replaceElement("#content-sidebar h3", named({sFlashSrc: "/themes/alphasimple/flash/fonts/expressway.swf", sColor: "#DDDDDD", sCase: "upper"})); sIFR.replaceElement("h2", named({sFlashSrc: "/themes/alphasimple/flash/fonts/expressway.swf", sColor: "#FF0B5B", sCase: "upper"})); sIFR.replaceElement("h3", named({sFlashSrc: "/themes/alphasimple/flash/fonts/expressway.swf", sColor: "#FF0B5B", sCase: "upper"})); sIFR.replaceElement("h4", named({sFlashSrc: "/themes/alphasimple/flash/fonts/expressway.swf", sColor: "#FF0B5B", sCase: "upper"})); }; //]]> </script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://web.archive.org/web/20150905055814/https://ssl." : "https://web.archive.org/web/20150905055814/http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-7030123-1"); pageTracker._trackPageview(); } catch(err) {}</script> </body> </html>

CINXE.COM

famfamfam.com: Home