Web Development

Design / Web Development — No Comments
12
Mar 12

Glyphs, Icons, Pictograms, Free!

I've been a long time user of the famfamfam.com icon library but recently I've been looking for something fresh. Here are some very nice choices for your icon greed :)

Entypo by +Daniel Bruce
Over 100 icons in EPS or as OpenType font. Free with attribution (you can donate, 50% goes to wikipedia)
http://bit.ly/wEuNiE

+GLYPHICONS by +Jan Kovařík
350 icons in 16×16 PNG. Free with attribution (royalty free options available with additional AI, PSD files)
http://bit.ly/xKQ1Dw

Fugue by +Yusuke Kamiyamane
A very large icon (16×16 PNG) collection with a total of 3.346 variations! Source files provided as well. Free with attribution (royalty free option available)
http://bit.ly/w5AWz3

Enjoy! :)

In album 2012-03-12 (3 photos)

Entypo

Google+: View post on Google+

Web Development — 2 Comments
11
Mar 12

Advanced text-around-image wrapping

Not magic, JavaScript

Here's a small gem of #jQuery coding: jQSlickWrap is a #plugin which allows for easily wrapping your text around images, respecting the image's content, as you would do in a DTP program.

The specs:
- Client-side, Sliced and Diced Sandbags using HTML 5's new <canvas /> element
- CSS-based padding
- Sandbag "resolution" is configurable
- Written with Progressive Enhancement in mind
- Optional "bloom" mode provides ultra-precise padding

Works in Firefox 3.5+, Chrome, Safari 4+, Opera 11+, but not in Internet Explorer (degrades to "regular" wrapping). See the image below for a demonstration and get it here http://bit.ly/wSG1ou

Google+: View post on Google+

Web Development / WordPress — No Comments
10
Mar 12

Google+Blog for WordPress v.1.1.2

I had previously wrote http://bit.ly/yNwPxo about +Daniel Treadwell's Google+Blog plugin which imports your #GooglePlus posts into #WordPress . I've been a happy user ever since so I'm jumping to the opportunity to post about it again as it has recently been updated.

These are changes of v.1.1.0 although it has been silently been updated to 1.1.2 (bug fixes I guess):
- Support for importing from multiple Profiles/Pages
- New option to exclude posts containing a given hashtag
- Posts shared via Google Reader will now be imported
- Hashtag character set expanded and related bugfixes
- Updating your settings no longer forces import (unless specified)

More details and download link here http://bit.ly/yTIeAQ

Google+: View post on Google+

Web Development — No Comments
9
Mar 12

Want Apple-styled maps on your site?

In the new version of iPhoto announced two days ago, #Apple has dropped using #GoogleMaps in favor of +OpenStreetMap, an open-source initiative for map data.

Given that Apple was kind enough to NOT give credit to #OpenStreetMap (see more http://bit.ly/xM3YGt) I'd say it's ok to use Apple's map tiles on your website. And you can do just that if you check the source code here http://bit.ly/xCguI9
More information on OSM can be found at www.openstreetmap.org

Apple tiles

Google+: View post on Google+

Fun / Web Development — No Comments
8
Mar 12

The Inverse Thumbnail Malfunction

Web development fail of the day: when the full-sized image is (much much) smaller than the thumbnail :)

Google+: View post on Google+

Web Development — No Comments
7
Mar 12

Develop for mobile faster with Adobe Shadow

At least that's the promise of #Adobe 's newest lab experiment: Adobe Shadow

The official description: Adobe® Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

In essence, Adobe Shadow adds an extension on Google Chrome on your Mac/PC and you additionally download an iOS or Android app on your mobile device(s). The #mobile and desktop devices are linked over wifi and whatever you browse on your desktop is shown on your mobile device(s).

You can get Adobe Shadow here http://adobe.ly/yATd0E
or watch the demo here http://adobe.ly/zoujVb

Google+: Reshared 1 times
Google+: View post on Google+

Web Development — 2 Comments
6
Mar 12

Gantt charts with Javascript

I've been using an old #jQuery plugin called "jquery.gantt" with limited features and it was time for an upgrade. My search ended with JSGantt, an open source #javascript solution that covers everything you would want:
- Task, (collapsible) task groups & milestones
- Multiple dependencies
- Multiple formats (day, week, month, etc)
- Data loading through XML

Get JSGantt here http://bit.ly/wxeDbO
For an alternative, see dhtmlxGantt http://bit.ly/AEvOr8 (doesn't do multiple periods though, it's only on an daily format)

Google+: View post on Google+

Web Development — No Comments
6
Mar 12

MySQL ordering alphabetically with empty strings last

Here is a small #MySQL tip: Say you want to order your query results alphabetically, but keep the empty fields last, what do you do? If you do
SELECT string FROM table ORDER BY string;
You will get ‘ ‘, ‘ ‘, ’1′, ’2′, ’3′, ‘A’, ‘B’, ‘C’

But if you do
SELECT string FROM table ORDER BY ! ASCII(string), string;
You will get ’1′, ’2′, ’3′, ‘A’, ‘B’, ‘C’, ‘ ‘, ‘ ‘.

Tip found at www.wonkabar.org

Google+: View post on Google+

Social Media / Web Development — No Comments
4
Mar 12

Social Media tracking with ThinkUp

There are various solutions (with varying paying options) if you want to monitor your #social network efforts but there is also an open-source solution. +ThinkUp, led by +Gina Trapani, is a web application that can provide you statistics on your #Facebook , #Twitter and #Google + accounts and pages. Included are likes, reshares and responses per posts, followers and page like per day, etc.

It is also a self-hosted solution, which means that you get to avoid giving access to your data to another corporation, or be subject to ads and marketing efforts. Plus it is a great way to give your clients an additional tool for their marketing efforts.

You can see an example of the output here http://bit.ly/wiWH4j , it is my Google+ profile (this is optional, you can keep your statistics private). See also Gina's twitter stats page http://bit.ly/xgVHzv If you want to test it out, I have also opened the registrations on my personal installation for the next few days http://bit.ly/yCaxcH

To install it yourself, you just need a web hosting account with PHP/mySQL (a quick Amazon EC2 solution is also supported although I didn't try it). Setup and installation is rather easy with quite clear instructions.

You can learn more about ThinkUp and download the code at the official site http://bit.ly/xMOw1e

Google+: View post on Google+

Web Development — No Comments
26
Feb 12

Right-click menus in HTML5

The image below is from the future. :) It shows a context-related right-click menu implemented with just a few lines of #HTML5 code. This is already part of the official HTML 5 spec but is only supported by Firefox at the moment. The spec describes menus that are related to a section, can have sub-menus and even support icons.

Check out how to do it in the example by +David Walsh at http://bit.ly/zmMKJ6 (via +Chris Coyier)

If you can't wait for the future, here's a #jQuery solution http://bit.ly/Aii4rq

Google+: Reshared 9 times
Google+: View post on Google+

← Older Entries
Newer Entries →