Filament Group

Lots of rationalization in here—it's always been needed. I complained about the lack of <include src="..."> when building my first site in '94/95, with simpletext and/or notepad! It was not in the early spec, and seems someone powerful wouldn't allow it in later. So everyone else made work arounds, in any way they could. Resulting in the need being lessened quite a bit. My current best workaround is the <object data=".."> tag, which has a few better defaults than iframe. If you put a link to the same stylesheet in the include file it will match pretty well. Size with width=100%, though with height you'll need to eyeball or use javascript. Or, Javascript can also hoist the elements to the document level if you really need. Sample code at this site: https://www.filamentgroup.com/lab/html-includes/

+1 Also worth checking out: https://www.filamentgroup.com/lab/font-events.html

I smell filament group(http://www.filamentgroup.com/). Anyone know who led the design?

I apologize that it came off as harsh; it is good, technically, but I also think it's very important to stress what something like this can't do. There's a big mentality right now that "single page apps" are the hotness - and they ARE - if done right. > do you still make your site accessible for IE3? No... I subscribe to the ideas behind progressive enhancement, so I don't have to make that choice. An application can be built that works everywhere, for every technology, with little development overhead (and in my experience, the lowest-experience-first PE approach generally leads to better code anyway.) This isn't just theory - I've done it with apps large and small, and it works. I highly suggest http://filamentgroup.com/dwpe/ to find out more. > best-case you're only talking about first-page speed I'd also argue that that's what matters most to visitors - numerous studies show that there's a dropoff as that first page takes longer to load. Here we have the difference between loading a page, being useful, and then loading scripts vs loading an (empty, so faster) page, load libraries, load templates, then load data, then push the template to the screen. Additionally, if you're doing server rendering, you can probably cache that first hit at the web server level and avoid even hitting the web application at all. The difference won't matter if you have a tiny app, so you don't have much js to download - but it will make a big difference if you have anything…

I've come across this technique here [0] to try it on <object> elements, but sizing is even more difficult there. [0]: https://www.filamentgroup.com/lab/html-includes/

I previously missed https://www.filamentgroup.com/lab/introducing-the-new-responsive-desig… and now that I've read it I can't say I feel I missed out on a foundational text.

Select elements are pretty decently style-able nowadays [0], though the options in the dropdown don't seem to be supported (at least in Firefox). https://www.filamentgroup.com/lab/select-css.html

Here's another approach: https://www.filamentgroup.com/lab/html-includes/ <iframe src="/images/includespost/htmlexample.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe> Given that Googlebot will render and use JavaScript now, I'd be intrigued as to whether this works with it, but client side it seems OK.

Filament Group has Tablesaw which is another take on this idea. Javascript based but I think the results are a bit better https://www.filamentgroup.com/lab/tablesaw.html

Right, so yes, number shouldn't be used to invoke the numeric keypad. Got it. I agree with another commenter that it would be better if it were called magnitude. Still, even when it's the correct thing to do I still think it's a bad feature because it can be accidentally triggered. There's a gotcha in Safari when using pattern for zipcodes or anything that can have a leading 0: https://www.filamentgroup.com/lab/type-number.html#support-leading-zer…

You might think this is just "they didn't bother implementing that", but in fact some people considered this a feature and browsers added "flash of invisible text" as a feature. http://www.paulirish.com/2009/fighting-the-font-face-fout/ (There are also some interesting ramifications to these various techniques for the various "icon fonts" that seem to be all the rage these days.) http://filamentgroup.com/lab/bulletproof_icon_fonts/

Check out http://www.filamentgroup.com/examples/daterangepicker/

Has anyone played / tested this with regard to the responsive image hack/trick by the filament group : http://filamentgroup.com/lab/rwd_img_compression/

Yup, I'm implementing a variant of this + FilamentGroup's nice show column javascript thing[0] [0] - http://filamentgroup.com/lab/responsive_design_approach_for_complex_mu…

To add to this... http://filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_… Same one? Seems to have a slick interface that does not require an apply button, does provide ranges and customizable range options, although it does not have easy keyboard input either.

A good implementation I've seen of something like this is a responsive version of data tables. Essentially, the data in the table is prioritized, and shown or hidden based on the available real-estate, along with the ability to override the defaults. Demo available here: http://filamentgroup.com/examples/rwd-table-patterns/

My app uses a lot of these: I generally hand generate them however due to the range always changing. From an astetics standpoint, when I have two times I personally like a slider with two handles. in GCal I'm always dragging my apointments longer and shorter in the overview, not in the details. My "solution" is to use two select boxes with the times, and then use this plugin to convert it to a slider: http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select…

This redesign is all over filament's home page, so it looks like they indeed were. EDIT: http://filamentgroup.com/lab/introducing_the_new_responsive_designed_b…

I wish it were possible to delay the loading of images using JS. That would allow them to be swapped for images that were the appropriate resolution for the device looking at them. This is this big issue with responsive web design. There is a solution, but it requires both modifying HTML and additional HTTP requests: http://filamentgroup.com/examples/responsive-images/

Nice idea, and I like the design. Looks like you've got people using it. I was a bit confused as to where to begin though. Am I to create my own list of 101 things, or are there some suggested lists I can start with? Also: try preloading the images in your stylesheets (or using sprites). There's a noticeable flash when I hover over the sign-up button as signuphover.png is loaded for the first time. I'm fond of this jQuery plugin, which makes this painless: http://www.filamentgroup.com/lab/update_automatically_preload_images_f…