vague, but exciting

the porous city - design - web

/

/

email me

/

about

Modern Javascript for ancient web developers
Useful resources and reassuring commentary

Also Medium's design is nice and friendly to those of us whose eyes are giving up in protest after years of looking at too-small text on glowing screens.

Visualize the CSS color function
Colorme

I absolutely do not need this, but ... direct manipulation!

Webrings 2k16
Okay, idea: have a javascript widget you can insert on article pages on your blog. This widget collects basic tracking data, offers the ability to follow the author, and depending on how the author configures it can do a few other things: display related articles the user might want to read, let users fav articles, and let users comment on articles (using Twitter OAuth, maybe with Medium's highlighting UI.)

Basically it's Medium for the decentralized web, or an up-to-date version of webrings. To replicate Medium's success there would have to be editorial judgment applied to who can join the network, but it would be interesting to have an "unlimited class" version of the widget where the only control exercised is what's necessary to avoid malicious activity (easier said than done, I know.)

If you have all this stuff you can create a site to serve as a front door, or several front doors for different topics. You can also create composite RSS streams, a social layer (mention other users in comments, or even in the main body of an article - the crawler could look for twitter handles or links to in-network sites in article text.) Oh, and you're well-placed to create a boutique ad network, assuming you sign up the right people.

The tracking data would be anonymized, of course, despite the impact on ad revenue. I want to make the tracking data fully public, as well, to emphasize how non-creepy it is.

Like Medium, it could turn into a drug if the traffic angle works out, but that would be a good problem to have. And you can drop out any time, the only thing you lose is the comment history (and the service could offer an export feature for that.)

Someone's gotta have tried this, right?

I don't retreat, I reload

Style on the web: hyperlinks
Writing Hyperlinks: Salient, Descriptive, Start with Keyword

Tagent: the concept of a hyperlink is overloaded. It seems weird that by default links to completely different domains are represented the same way as links to a paragraph on the current page.

Safari on iOS sets the size and scale of the viewport to reasonable defaults that work well for most webpages, as shown on the left in Figure 3-9. The default width is 980 pixels.

Even if your page doesn't have any style information, or any size information of any kind. Just put a blob of text in a <body> tag and your iPhone will figure you must want to view it a tenth of an inch high.

Icon usability
"... if it takes you more than 5 seconds to think of an appropriate icon ..." then don't rely on an icon there. Nielsen/Norman on icon usability.

I will figure out the need later
I want to create a timeline with Timeline by Verite.

linkdump

All the clarity and rigor you want from a basic reference source. Five stars.

Don't ask why I need these, but thank god.

Hi, I am totally going to steal your web design.

Rules are more useful than guidelines, if they're correct. (And I think these are correct, or at least I'm not badass enough to be breaking them.)

ruler
Ruler

Six Apart gets it. A lot of companies would try to unify TypePad/LiveJournal/Vox to serve nebulous branding objectives. 6A recognizes they're overlapping but separate products that need distinct identities.

Anyway, Vox might be cool. I'm sick of crappy, walled-off social networking sites.

FINALLY A GOOD DHTML OUTLINER.

With collaborative nonsense.

I'm never, ever going to use this, but that's some crazy shit.

Yahoo! Libraries for Web Development
UI Code Library -AJAX-yjavascript
Design Pattern Library - including links to where a pattern is used by Yahoo

(some people seem to think that prototype [documentation] and dojo are better)

see also: Ajax Patterns

GTDTiddlyWiki
Source of code & ideas for improvments to my homebrew system - which could be said to be "moving slowly", I prefer to compare it to slow but sure geological processes...

Update: above link is broken, but this works, and the 43folders wiki has a lot of stuff to say.

Phil Gyford: My New Site
Some sick ideas: "pages for individual weblog entries ... [show] relevant contextual information: any photos I took the same day, what I was reading that day, any links I posted, and what music I listened to most that week." Well, obviously! Shit.

Yet Another Javascript Reference
I swear to God, you guys won't recognize this site in six months. It will have, like ... tag storms.

roundup of some PIM-type ajax apps
Am primarily linking this because Backbase and Protopage could be useful templates for what I want to do with this site's UI. (Actually, having looked more closely at them now, perhaps I'll go for something less ... bad.)

The Come To Me web
"The metaphor and model in the 'I go get' web was navigation and wayfinding. In the 'come to me' web a model based on attraction."

Subtraction
Khoi Vinh's blog. He's now in charge of designing NYTimes.com; his old company Behavior did the new Onion site.

A List Apart: Smarter image hotlinking prevention
Need to start administering a few bitchslaps around here.

I'm going to get my flickr photos to show up here like this guy.

SynthAxis
Colors! Um. Manipulate them and ... stuff. Supposed to be useful to web designers.
Colors!

the elements of user experience
Us consultants love these one-slide frameworks. Isn't that right, Eric?

aphex twin discography
In 2020, when I finally redesign this site, I will rip off that page shamelessly.

topographic page layout
better than the Turn On Table Borders bookmarklet

htmlarea
dhtml wysiwyg html

commentblogger bookmarklet
Post comments to other people's blog entries and to your own blog, all at the same time.

why tables for layout are stupid
Eventually turns into kind of a step-by-step guide to how web design is really supposed to work.

a list apart: urls! urls! urls!

IndyJunior
Make a clickable Flash map.

easyRGB color harmonies
Color is a big new scary world for me.

snapgallery
Hurrah! "snapGallery is a fast, easy way to create a quick web gallery of pictures."

User Interface Engineering -- "Seductive Design for Web Sites"
  1. Give users what they want.
  2. Give them (ideally related) other suggestions while they're sated and digesting.
The "engineering" part of the organization's name is a bit of wishful thinking, but I applaud the idea.

Man, this page is ugly, huh? Too boxy. Too many dotted lines. I was originally proud of how how no-frills functional it was -- leads your eyes to the right place, an appropriate proportion of space given to the different elements, and that's it. Fuck your little aesthetic delicacies, man, I'm here to get some work done!

Only it's starting to make me physically ill, just looking at it. Given how long it took me to come up with this design, though, I'm guessing it'll be a while before a state of grace is achieved.

ib design pipeline




  • ib - make a list of all the places that would need to change for a more automated fields/serialization solution - including re-writing old entries when adding / removing fields - then, add a second timestamp (minor revision)

  • rss feed of comments on ib

  • when logged in, display private categories
  • at end of category list, display "uncategorized" link
  • here's an idea about how list UI could work: mouseover near list item bullet, bullet is highlighted and horizontal box pops up, first line excerpt from text, below, buttons: delete, move to top of doc, top of section, bottom of section, mark as done, then a button for each _Section_ (move to that section - maybe left side prepends and right side appends?)
  • just switch to Markdown - that or make _bold_ and *italics* work
  • switch to flat tagging structure, including, yes, private tags
  • email pair support - config apache to include cookie info in logfile?

  • i want a two-pane AJAX interface, like Yojimbo, with tags on the left and a list of entries on the right
    • should be able to tag tags, so on the left you have the tag you're looking at, a list of tags that are tagged with it, and (maybe) a list of things it's tagged with
    • left pane: browse mode (see above), list: by # entries, by mod date...

  • smarttext->html happens in javascript _only_. page loads with hidden textarea(s) with entry text, then adds entry html to the DOM tree
    • incidentally, add in-page editing to this, and you're close to a situation where every entry is a self-contained file (see TiwyWiki) - add Groove and you now have an offline-capable wiki (assuming the relative links will find their way back to the docs stored in Groove)
  • debug expand/collapse on IE
  • expand/collapse +/- bullet images
  • "views": on a per-entry basis, be able to choose a "view" - module used for editing/viewing, e.g. to-do list view with clicky UI shit and shit
  • microcontent-type display
  • rate entries: how? slider? stars? hmmm
  • checkbox: "this is a category"
    • what happens to child entries/categories if parent is no longer a category?
      • they just get moved up the hierarchy (ie, they get their former parent's categories)
    • what if a category entry is private?
      • check vip cookie, if yes, display in italics wherever categories are listed, if no don't display
    • what needs to happen for this to occur?
      • add checkbox / entry field
      • change get_categories()
      • display stuff as "category (parent 1, parent 2, ...)"


  • feed builder isn't stripping tags right - leaves alt text from images

  • passwordless editing
  • every entry has a "last major modified" date and a "last modified" date
  • then, implement some sort of version control system: view old versions of an entry, rollback to a version.
  • THEN in-place editing (which auto-saves, with no cancel button?)

  • cron job on imac to backup ib data code via ftp

  • mobile - cookieless login, links to next actions by project (based on first word? up to first dash?) link to single-line new entry box

  • timed events/comments (ie, way to postdate a timestamp on a new post)
  • comments in single post mode

  • mindmap-style editing via ajax or whatever
    • nodes are just titles until you open them up
      • can default to nodes open or closed
    • smart about stuff: eg, pasting a hyperlink on a node makes the node a link
    • category nodes are special: just containers for links to other nodes (?????)
  • this may or may not simplify things: but analysis and synthesis as two separate activities? (ie analysis: trad. outliner/mindmap mode, quick keystrokes to add children/peers; synthesis: re-drawing as a non-hierarchical concept map, marking stuff as categories)
    • hey wait a minute, yeah: tags and then playlists on top of those (for like "LA Music") or whatever

  • ability to check off items in lists (see basecamp to-do lists)
  • script to auto-move Notes with leading "-"s to ibnextactions on phone/Outlook sync?

also see: notes about the PIM i want to build

ok: start with succinct problem definition? maybe even use cases?
  • want to add structure to entries (outliner/mindmapper)
  • want more rational tagging structure (Music/LA, Other/LA, Music/Events -> Music, Events, LA - but with easy access to intersections: Music LA, Music LA Events)
  • want faster, 100% keyboard-based editing etc

why am i resistant to storing work notes in ib?
  • concerns about confidentiality
  • no search for private entries
  • not available offline (ah ha!)

stuff i've done!
  • fuck it, let's just make titles the first line
  • make the entry title the html page title
  • striphtml
  • private check sets edit screen bkgrnd gray
  • smart lists v1
  • before in-place editing: write changes to _two_ files, ibcurrent.db and ibfull.db. ibcurrent is what gets displayed; old versions of revised entries are cleaned from ibcurrent.db. ibfull has every version of everything.
  • keyboard shortcut to expand/collapse all

youngpup.net
I will learn your "new-school DHTML", Aaron Boodman. Then I will use it to destroy you! (jawdrop)

Backlinks
Want this -- yes, another Ted Nelson thing.

Web Nouveau promotes the use of table-less CSS design and lists qualifying weblogs. I understand why table-less design is a good idea from a high-level structure vs content perspective, but I'm not yet convinced from a practicality perspective -- which browsers will this work with? is it really worth the extra effort? Maybe they can convince me.

This is me, too. I've got enough room over there to post a bunch of new sets. It'd be a shame to use the domain name just to host a few mp3s, though, so...maybe I'll play around a bit.

I just got nervous and went to check whether I spelled 'oblique' right. I suppose that eliminates any snottiness I may have had about my vocab-smarts.

kaliber10000 is back. Major hub for super-hip web design. Wonder how they'll adapt to a post-sans-serif era.

domapi is a collection of DHTML components designed to work with 5.0+ browsers. Some of it is overkill, some of it looks useful.

this is now a test entry
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. (not just pseudo-latin)

A concise taxonomy of UI design patterns. All of these are pretty obvious, but this is still a useful reference.

A simple perl script to ping weblogs.com to notify them that your blog has changed.

Other
Games, Video, History, Berlin, Activism, Friday, Clothes, Feminism, San Francisco, Podcasts, Quizzes, Sports, Statistics, Personal care, CrowdFlower, Travel, Minnesota, Transportation, Law, Geography, Bicycling, Politik, Life hacks, Toys, L.A., Housing, Boston, Food & Drink, Agriculture, Surfing, NYC

Tech
a11y, Javascript, Audio, Open, RSS, Shopping, Social, Net, Storage, Wearables, Product Management, Hardware, Web analytics, Business, Mobile, Security, Medical, Visual, WRX, barcamp, Crowdsourcing, s60, Web, OS, Development, Collaboration, Data, MacOS, PIM, Automobile, Energy

Music
Good tracks, Musicians, Mailing lists, History, Shopping, Reviews, Streams, Booking, Business, Labels, Making, Mixes, Hip-hop, Lyrics, Mp3s, House, Videos, L.A., Events, Boston

People
Vocations, Weblogs, Enemies, ADD, Friends, Heroes, Health, Family, Languages, Me, MOTAS, Subcultures, Stories, Gossip, Working with, Life hacks, Exercise

Commerce
Personal finance, Web, Real Estate, Investing, Macroeconomics, Insurance, Shopping, Microfinance, Personal services, Non-profit, Taxes, Marketing and CRM, International Development, IP Law, Management consulting

Arts
Movies, Animation, Comix, Visual, Literature, Humor, Burning Man, Rhetoric, Outlets, Sculpture, iPad bait, Events, Spoken Word, Poetry

Design
Type, Cool, Data visualization, Web, Tools, IA, Process, Furniture, User experience, Architecture, Algorithmic, Presentations

Science
Zoology, Networks, Psychology, Statistics and Data, Environment, Physics

Travel
Uganda, Vagabond '08, Kenya, Kingdom of Siam

Photos
Photos I Wish I'd Taken, Friends, Moblog

Philosophy
Mind

One Acre Fund

Subscribe to this site's rss feed