highlight.js
"Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It's very easy to use because it works automatically: finds blocks of code, detects a language, highlights it."
JS  Code 
12 weeks ago
The Responsinator
Enter a URL, preview it on a few different "devices".
RWD  Utilities 
12 weeks ago
Stop the cascade · Deep Thoughts by Mark Otto
Mark Otto: "Find ways to isolate components and make them more durable by limiting the scope of their CSS. You’ll discover that components can be more easily rearranged without causing adverse effects and the amount of code necessary will likely decrease."
CSS  Well-Formedness 
12 weeks ago
On using h1 for all heading levels in HTML5 | 456 Berea Street
Roger Johansson: "You can keep using h1-h6 in HTML5, but you can also choose to use only h1 elements for all headings and rely on the HTML5 outline algorithm to sort out the heading hierarchy. If you do this, however, you should be aware that currently there is very little support for the HTML5 outline in web browsers, screen readers and developer tools."
HTML  HTML5  Markup  WDBP 
12 weeks ago
Gridset
"Gridset is a tool for making grids. It lets you create whatever type of grid you want: columnar, asymmetrical, ratio, compound, fixed, fluid, responsive and more. It serves multiple grids to your site based on breakpoints for different devices. Using it is as simple as embedding a link."
Type  CSS  RWD  Layout  Grids 
march 2012
Jules Vernacular
Indra Kupferschmid: "A fantastic blog about French lettering."
Type  Inspiration 
february 2012
CSS Column Breaks | Trent Walton
"Rather than using a more traditional HTML & CSS column/grid approach, I opted for column-count to keep everything extra efficient & scalable. The trouble is, sometimes content gets split across columns awkwardly."
CSS  Layout  Type 
february 2012
Remote-Tilt - emulate motion events
By including a single line of JavaScript you can emulate device motion events in your test page which can either be a regular browser or even a mobile emulator.
Mobile  Motion  Testing 
february 2012
LukeW | An Event Apart: Detail in Web Typography
Luke Wroblewski: "In his presentation at An Event Apart in Minneapolis MN, Richard Rutter walked through a preview of the detailed typographic control CSS3 will offer in the future. Here's my notes from his talk."
Type  CSS3  CSS  Richard-Rutter  OpenType 
january 2012
Selling Design
Part of Jeffrey Zeldman's MFA course curriculum: "For our opening get-acquainted session, we’ll focus on texts that explore the some of the most basic, traditional (and rarely taught) aspects of design professionalism from the worlds of web, interaction, and print design."
Design  Jeffrey-Zeldman 
january 2012
DirectWrite Text Rendering in Firefox 6
John Daggett: "In Firefox 6 we’ve added the ability to alter prefs that affect the underlying ClearType subpixel anti-aliasing that is used. [...] Because of the large differences between GDI and DirectWrite renderings for some fonts at small text sizes, for Firefox 7 we’ve implemented a pref that specifies a list of fonts for which GDI rendering will be used at sizes below 16px. By default the list contains fonts such as Arial, Tahoma, Verdana, Trebuchet MS, Segoe UI and Consolas. Downloadable fonts will always use DirectWrite."
Rendering  DirectWrite  Firefox  Type 
january 2012
DWrite rendering in Firefox | Typophile
John Hudson: "When Firefox 4.0 arrived, I was surprised to find that DWrite rendering was not active by default, and that I had to manually set some config flags in order to activate it (not something I'd be comfortable recommending to the average browser user). This week I wrote to John Daggett at Mozilla, and asked him to comment on this and whether there is any change in Firefox 5.0."
Rendering  DirectWrite  Firefox  Type 
january 2012
5 Tips to Optimize & Speed Up Safari 5 | Printed By Erik
Erik Shultz: "I have recently noticed a slowing factor when it comes to using Safari 5. I decided to look for some hack solutions to see if I could improve the usability of Safari from the point of view, page load speed."
Safari  Mac  Speed  Tips 
november 2011
UILayer
Rasmus Andersson: "UILayer provides a JavaScript API on top of WebKit for working with the concept of layers. Instead of manipulating DOM elements using a myriad of mixed concepts, you go though a single, well defined API."
JS  WebKit  DOM  Layers 
november 2011
How to deploy your code from GitHub automatically
Mark Christian: "I love GitHub. The more I use it, the more wonderful features I discover. I'd like to share one I just came across today, Service Hooks, and tell you how you can leverage them to have your production web site update to the latest code automatically, whenever you push a new version."
Git  GitHub  Development  Workflow 
october 2011
QBN Typecase: Recommended Fonts - a set on Flickr
Stephen Coles: "The QBN Typecase, a feature I created in 2005 for trendy design portal Newstoday. I am no longer editor of the column, but it was a good gig while it lasted. It entailed two of my favorite jobs: designing typeface specimens, and pushing fonts on the youths."
Type 
october 2011
iScroll 4
Matteo Spinelli: "iScroll 4 is a complete rewrite of the original iScroll code. The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element."
iOS  Scrolling  JS 
october 2011
Subtle Patterns | Free textures for your next web project
"Subtle Patterns is a collection of 88 high quality design patterns for you to use freely. New patterns added weekly. A project by Atle Mo."
Patterns 
october 2011
Minimum Viable Personality
Fake Grimlock for A VC: "MOST IMPORTANT STEP FOR BUILD PRODUCT IS BUILD PRODUCT. SECOND MOST IMPORTANT IS BUILD PERSONALITY FOR PRODUCT. [...] PERSONALITY IS API FOR LOYALTY."
Philosophy  Design  Community 
september 2011
umbrUI - CSS3 Shadow DOM styling
"Basically this demo is about selecting those special [Shadow DOM] pseudo elements and style them with CSS. And to make this Shadow-DOMing game even more fun, more rules: No images, no extra markup and no JavaScript (the browser already adds the functionality)."
Shadow-DOM  CSS  Forms 
september 2011
What the Heck is Shadow DOM?
Dimitri Glazkov: "[Browser developers] created a boundary between what you, the Web developer can reach and what’s considered implementation details, thus inaccessible to you."
Shadow-DOM  DOM  Web-Standards 
september 2011
How Do Browsers Render the Different CSS Border Style Values?
Louis Lazaris: "Just like form elements, you’ll never get these looking exactly the same cross-browser, and neither should you want to. But if nothing else, it’s interesting seeing how the different browser makers interpret these different values."
CSS  Browsers  Borders 
september 2011
Sassy Mother Effing Text Shadow
"There shouldn’t be more. I’d like to tell you that a masked gunman made me make a Lorenz Attractor in Sass. But the truth is that it was just bad judgement. For the love of all that is good don’t use this anywhere. The CSS is just out of control. View source at your peril."
CSS  text-shadow  Sass 
september 2011
Radio Buttons with 2-Way Exclusivity | CSS-Tricks
"Let's say you were tasked with creating a UI in which users can rate three candy bars from their most to least favorite. A grid of radio buttons isn't a terrible way to go about this."
HTML  JS  jQuery  Forms 
september 2011
Masonry CSS
Radu Chelariu: "CSS columns. Granted, their purpose is to display text in columns like a newspaper, but their display mode is exactly what’s needed to recreate the Masonry effect."
css  layout 
july 2011
Calligraphy Qalam
"A variety of interactive tools and information to help you learn more about calligraphy in the Arab, Ottoman and Persian traditions."
Lettering 
july 2011
WhatFont Bookmarklet
Hover on text, see the font being used. From Chengyin Liu.
Bookmarklets  Utilities 
april 2011
Point Size and the Em Square: Not What People Think
Thomas Phinney: "The challenging question is, what part of a 12-​​point font is 12 points high? For digital type, the short answer is 'none.'"
Type  Measurement 
march 2011
A Richer Canvas
Mark Boulton: "If [...] layouts are based on a system that defines its ratios from the content, then there is connectedness on two levels: connectedness to the device, and connectedness to the content."
Type  Measurement  Responsiveness 
march 2011
Using web fonts in desktop design apps
Elliot Jay Stocks muses on easy desktop versions of web fonts. My guess is that all of the solutions he proposes will come to be, and designers will prefer the easiest one.
Type  Web-Design 
march 2011
Humans TXT: We Are People, Not Machines.
"It's an initiative for knowing the people behind a website. It's a TXT file that contains information about the different people who have contributed to building the website."
Web  Culture 
february 2011
WordPress › Relevanssi - A Better Search « WordPress Plugins
"Relevanssi replaces the standard WordPress search with a better search engine, with lots of features and configurable options. You'll get better results, better presentation of results - your users will thank you."
WordPress 
february 2011
TrueType Hinting and Font Rendering
Tom Rickner for FontsLive: "It is a significant challenge to produce a font which renders the same pixels in multiple environments."
Type  Rendering 
february 2011
Web Fonts First Look
Lynda.com web fonts tutorial/introduction by James Williamson. Haven't watched it, but the TOC looks good.
Type 
february 2011
Exquisite Tweets
Collect lists of tweets to show Twitter conversations.
Twitter  History  Discussion 
february 2011
Watch Your Language
Chris Cashdollar: "Our industry needs to promote the idea of constructive criticism regarding visual design."
Design  Critique 
february 2011
Controlling Web Typography
Trent Walton: "Lettering.js is a solution, but perhaps it’s not the ultimate solution. […] Here’s a brief timeline recounting what’s already been discussed."
Type  JS  CSS 
february 2011
New Bulletproof Font-Face Syntax
Ethan Dunham: "The hack that makes this work is the '#' following the EOT filename. Seriously."
CSS  Type  @font-face 
february 2011
FontFriend 2.5
Matt Wiebe's very useful bookmarklet for testing type now has support for custom Font Family lists, including web fonts.
Type  JS  jQuery  Utilities 
january 2011
BigText Makes Text Big
"At its simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child DIVs to fit the width of the parent element."
jQuery  JS  Type 
january 2011
jQuery Backstretch by Scott Robbin
"Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page. The image will stretch to fit the page, and will automatically resize as the window size changes."
jQuery  JS  Design 
january 2011
Fontscape
"An independent directory of typefaces organized into categories."
Type 
january 2011
iKern: autospacing and autokerning for type designers
Igino Marini: "iKern is a mathematical model that describes the white space between the letters [and] is also a tool that uses the model to perform letterfitting."
Type  Type-Design 
january 2011
Font Remix Tools
A set of plugins by Tim Ahrens that help type designers harmonize glyph shapes, tune letters, and create different versions of glyphs for condenseds, extendeds, small caps, etc.
Type  Type-Design 
january 2011
Moving Highlight
Chris Coyier uses radial gradients and jQuery to produce a subtle highlight that follows a user's mouse.
CSS  jQuery  JS 
january 2011
Remove unused CSS - CSS Optimizer
"Our tool explores the pages of your site automatically, find the unused CSS selectors and creates new clean CSS files you can download."
CSS 
january 2011
The non-typographer’s guide to practical typeface selection
Like it says, by Cameron Moll. From 2005, but the advice is timeless. Shame about all of the link rot.
Type 
january 2011
CssUserAgent (cssua.js)
Script that adds UA-specific CSS classes to the <html> tag.
CSS  JS  Browsers 
january 2011
Some New Dimension for Fortune
David Jonathan Ross for Font Bureau: "Inspiration for the final logo came from a dollar bill I found in my wallet. Some of the lettering on the bill had not one, but two layers of shading behind them."
Type  Color  Dimension 
december 2010
CSS formatting
"Been thinking about formalizing a style guide for CSS as CSS3 includes some especially complex syntax."
CSS 
december 2010
A web standards holiday card from Typekit
Sean McBride explains the snowy CSS3 and JS details that went into this effort of his, Mandy Brown's, and Jason Santa Maria's.
CSS3  Typekit  Type  JS 
december 2010
Controlling text size in iOS Safari
Roger Johansson on viewport width settings and text zooming.
Type  CSS  HTML  iOS 
december 2010
TEFF Ruse designed by Gerrit Noordzij
Side-scrolling to view the character set is surprisingly nice.
Type 
december 2010
Mule Design Studio’s Blog: Giving Better Design Feedback
"Feedback comes from people paying a designer to solve business problems—people who may not be suitably impressed that you implemented a 16 column grid across a golden mean."
Design 
december 2010
Hardboiled Web Design
Video of Andy Clark's talk at DIBI 2010.
HTML  CSS  Web-Standards  Design 
december 2010
I wrote you a short letter / from a working library
Mandy Brown: "I believe our growing preference towards short form is not only the result of our famously declining attention spans, but also of our increasing desire to read: the longer the reading list, the more impatient I am with writing that doesn't get to the point."
Books 
december 2010
A closer look at TrueType hinting
Tim Ahrens for Typekit: "TrueType hinting [...] bends the contour of the letter into a slightly different shape before it is rasterized."
Type  Rendering  #wbfntdy  wbfntdy  from twitter_favs
december 2010
Sass - Syntactically Awesome Stylesheets
"Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin."
CSS 
december 2010
LukeW | Touch-based App Design for Toddlers
"Kids are an enthusiastic bunch. If they see something they like, one tap won't do. Tap, tap, and tap again is often the norm."
Kids  Design 
december 2010
24 ways: My CSS Wish List
What Inayaili de León would like to see made real. Lots of thoughtful typographic stuff here. Great list.
Type  CSS 
december 2010
Pro Git by Scott Chacon
"Here you can find the full content of the book, a blog with tips and updates about Git and the book and open source projects related to Git or referenced in the book."
Git 
december 2010
A successful Git branching model
Vincent Driessen: "In this post I present the development model that I’ve introduced for all of my projects (both at work and private) about a year ago, and which has turned out to be very successful."
Git 
december 2010
ALA: Get Started with Git
Al Shaw: "Though it may seem cryptic at first, this version control system could change the way you work with text, whether you’re writing code, or a novel."
Git 
december 2010
« earlier      
#wbfntdy 24-Ways @font-face AEA Animation Antialiasing Apps Art ASCII Backups Beverages Bookmarklets Books Borders Browsers Calendar Canvas CFF Chrome Classification ClearType Clothing CMS Code Color Comics Commerce Community Cooking Critique CSS css3 Culture Data Dave-Shea Design Development Dimension DirectWrite Discussion DOM Drawing Education Email epub Ethan-Dunham Family Firefox Fishing Font-Squirrel Fonts Forms Foundry FOUT GDI Git GitHub Grids Hinting History House HTML HTML5 IE Illustrator Images Inspiration Internet iOS iPad iPhone Javascript Jeffrey-Zeldman JeffVeen jQuery JS Keynote Kids Language Layers Layout Lettering Letterpress Mac Management Mark-Boulton Marketing Markup Math Measurement Michael-Bierut Mobile Motion Naomi-Atkinson OpenType Opera Organization Patterns PDF Peter-Bilak Philosophy Photography Photoshop Pixel-Density Presentations Print Productivity Publishing Redirect Rendering Responsiveness Richard-Rutter Ruby RWD Safari San-Francisco Sass Scale Scrolling Search Shadow-DOM Slideshow Software Speed SVG Taxonomy Testing Text text-shadow Texture Theming Thomas-Phinney tim_brown TimeSuck Timezones Tips Touch TTF Tumblr Tutorial Tutorials Twitter Type Type-Design Type-Sellers Type-Specimens Typefaces Typekit Typesetting Typography UI Unicode URLs Utilities Vassar via-Dan-Cederholm via-Jon-Tan Video W3C wbfntdy WDBP Web Web-Design Web-Fonts Web-Standards Web-Typography web_standards web_type Webkit Well-Formedness Windows Wireframes WOFF Wood Wordpress Workflow World-Cup Writing Zoom

Copy this bookmark:



description:


tags: