convore.json/groups/feedback/use-embedded-css-classes-to-do-avatars-as-background-images-instead-of-img-elements/messages.json

[{"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174860.248543, "message": "+y", "group_id": 88, "id": 49293}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174800.433445, "message": "also, they have facilities for shortening long reply chains", "group_id": 88, "id": 49290}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174562.1020341, "message": "Hear me out here, I know this sounds *wild*", "group_id": 88, "id": 49276}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174696.454587, "message": "DOM node minimization can have a very positive effect at scaling to something like that", "group_id": 88, "id": 49281}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174724.383316, "message": "and write out a one-liner CSS for it", "group_id": 88, "id": 49285}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174729.014554, "message": "No, but that's mine.", "group_id": 88, "id": 49286}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174746.1482329, "message": "what you're suggesting is that they maintain cached copies as CSS, no?", "group_id": 88, "id": 49288}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297175056.225709, "message": "$('body').append($('<style>').attr('type', 'text/css').text(\"a { border: 1px solid red; }\"));", "group_id": 88, "id": 49302}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297175058.0841329, "message": "so it does ;)", "group_id": 88, "id": 49303}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174713.6947269, "message": "And remove the IMG element and replace with a class=\"{username}\"", "group_id": 88, "id": 49283}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174759.696454, "message": "That way, you also don't have to instantiate a new image object per line, just for the one first call", "group_id": 88, "id": 49289}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297175112.8828709, "message": "and the URL doesn't change, so if you've seen that person in other rooms recently, it should be cached.", "group_id": 88, "id": 49307}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174612.2635069, "message": "Currently, you have three elements for each line message: a SPAN, an A and an IMG", "group_id": 88, "id": 49277}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174669.1665671, "message": "By the time people come in droves to this site, some threads will quickly get to well over 500 lines, and if you don't paginate at all (not sure if you do already), some can get to 5000+ easily.", "group_id": 88, "id": 49279}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174694.4350059, "message": "You could easily remove the span and add the user class to the <a>", "group_id": 88, "id": 49280}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174704.1191521, "message": "Yep, exactly my suggestion", "group_id": 88, "id": 49282}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174722.6196179, "message": "err. that's not really my suggestion.", "group_id": 88, "id": 49284}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174736.5026209, "message": "and they can't do that really b/c they're pulling from gravatar.", "group_id": 88, "id": 49287}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174815.875818, "message": "like lazy loading the initial messages. You have to scroll to the top and click a \"show older lines\" button", "group_id": 88, "id": 49291}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174858.4075551, "message": "Ah oka", "group_id": 88, "id": 49292}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174891.743876, "message": "But yes, they can do that - nothing about gravatar that prevents you from writing out the URL into a CSS line e.g.   background: url({gravatar-url}) 0 0 no-repeat;", "group_id": 88, "id": 49295}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297175101.131712, "message": "I would imagine that most of them are cached b/c you're making the same request for members online now", "group_id": 88, "id": 49305}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174935.227452, "message": "right. and you could likely do that dynamically with javascript, I imagine, when someone new contributes.", "group_id": 88, "id": 49296}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174937.8390579, "message": "But that CSS line needn't be in a .css file, it can be either stored per topic or dynamically created when the page is loaded, using only the gravatars of the people being displayed", "group_id": 88, "id": 49297}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297174940.4151199, "message": "though I'm not 100% sure it would reparse the CSS", "group_id": 88, "id": 49298}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174946.0835371, "message": "It will", "group_id": 88, "id": 49299}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297174975.5035191, "message": "CSS adjustments to stylesheets are reflected just fine, I have done this before", "group_id": 88, "id": 49300}, {"user_id": 544, "stars": [{"date_created": 1297175047.1154771, "user_id": 12}], "topic_id": 1900, "date_created": 1297175029.7201049, "message": "That way, the DOM gets a good deal fewer elements and longer threads can be shown without performance impact", "group_id": 88, "id": 49301}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175077.9517219, "message": "Also, it would probably greatly reduce the load on Gravatar, because every time you do a new line now, it creates a new image which makes a new call - and not all of them are cached.", "group_id": 88, "id": 49304}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175106.9189301, "message": "I have noticed this because sometimes I write a new line and my message shows up but it has to wait a blink of an eye to also load in the image\u2014even though there are 20 occurrences of my image in the page already.", "group_id": 88, "id": 49306}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175125.0012009, "message": "Should be, but as I've noticed, isn't always.", "group_id": 88, "id": 49308}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175170.0396891, "message": "Also, another thing: if they ever switch over to using history management and pushState, then not having a ton of IMG elements to nullify would be a HUGE boon.", "group_id": 88, "id": 49309}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175248.640327, "message": "Right now, if they were to add history management to the site to prevent new page loads when navigating and only push in the new content, they'd have to manually nullify each IMG object to minimize memory impact. Not the case if you use CSS and classes w/background images.", "group_id": 88, "id": 49310}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297175296.885345, "message": "(though that might still require you to nullify each unique image just the one time, I've not experimented with that yet so I've no idea how well browsers manage that in memory)", "group_id": 88, "id": 49311}, {"user_id": 521, "stars": [], "topic_id": 1900, "date_created": 1297178615.8550799, "message": "yeah, thats how I do it and I'm not adding nearly as many elements to the page :) works for me (haven't tested with load yet)", "group_id": 88, "id": 49335}, {"user_id": 4, "stars": [], "topic_id": 1900, "date_created": 1297194369.768579, "message": "@KuraFire I have to admit this is a pretty interesting idea... Any real world examples you know of? @chrisdrackett you say youre doing this somewhere can i see perhaps ;)", "group_id": 88, "id": 49494}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297194631.9634049, "message": "I don\u2019t know of any real world examples off the top of my head that are still around, alas.", "group_id": 88, "id": 49505}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297194886.7942071, "message": "I suppose you want to continually add them to.", "group_id": 88, "id": 49534}, {"user_id": 4, "stars": [], "topic_id": 1900, "date_created": 1297194386.984884, "message": "also thanks for all the feedback so far guys!", "group_id": 88, "id": 49497}, {"user_id": 521, "stars": [], "topic_id": 1900, "date_created": 1297194789.9483609, "message": "@etmaguire when shelfworthy 2.0 comes out sometime in the next decade I'll have an example...", "group_id": 88, "id": 49522}, {"user_id": 521, "stars": [], "topic_id": 1900, "date_created": 1297194800.8041289, "message": "actually, I hope to get something out in the next couple months", "group_id": 88, "id": 49524}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297194859.9675601, "message": "@etmaguire seems like it could be as simple as adding <style type=\"text/css\"> {% for user in users %}img.{{ user.username }} { background-image: url('{{ user.gravatar_link }}');  }", "group_id": 88, "id": 49530}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297194911.0017419, "message": "@justinlilly That would be the page load; you'd give the style elem an ID attribute and add to it as people chime in additionally", "group_id": 88, "id": 49535}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297195000.3253989, "message": "so you could make that <style type=\"...\" class=\"etmaguire user\">  then function checkForStyle(user) { if (!$('style.'+user+'.user').length) { add_user_to_styles_dynamically }}", "group_id": 88, "id": 49542}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297195033.879986, "message": "so that would look with style elements with class of user and class of $username, if it doesn't exist, call the add function", "group_id": 88, "id": 49546}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297197390.827801, "message": "So you're eliminating 2 tags for each message while only adding 1 tag per user, which still saves.", "group_id": 88, "id": 49630}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297197400.5424881, "message": "saves users/messages or something like that.", "group_id": 88, "id": 49631}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297197256.8340859, "message": "@justinlilly You don't want a style element for each user, that'd defeat the whole point here...", "group_id": 88, "id": 49628}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297197339.60286, "message": "@KuraFire I don't think so. The point here is that you currently have <span><a><img></a></span> for each message. With this method, you would have <a> for each message and <style> for each user.", "group_id": 88, "id": 49629}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297203749.510272, "message": "Adding many style elements is really not a good strategy when simpler solutions are presented, I'm just saying.", "group_id": 88, "id": 49781}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297203941.2139201, "message": "Can you succinctly restate your proposal? My eyes are blurring with this text stream.", "group_id": 88, "id": 49788}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297203964.701041, "message": "You're saying a single <style> tag with many users in it then?", "group_id": 88, "id": 49790}, {"user_id": 218, "stars": [], "topic_id": 1900, "date_created": 1297203978.545922, "message": "and that style tag gets appended to for each user that talks?", "group_id": 88, "id": 49791}, {"user_id": 545, "stars": [], "topic_id": 1900, "date_created": 1297208247.2097809, "message": "I support this endeavor.", "group_id": 88, "id": 50007}, {"user_id": 521, "stars": [{"date_created": 1297277262.077976, "user_id": 544}], "topic_id": 1900, "date_created": 1297207491.3291521, "message": "and with a single style element its even less bits!", "group_id": 88, "id": 49967}, {"user_id": 521, "stars": [{"date_created": 1297277265.567919, "user_id": 544}], "topic_id": 1900, "date_created": 1297207463.7279999, "message": "right, then you only have to add a single users icon once", "group_id": 88, "id": 49963}, {"user_id": 544, "stars": [], "topic_id": 1900, "date_created": 1297277286.7839651, "message": "I starred Chris's comments because they're exactly what I suggested, in clear and succcint format.", "group_id": 88, "id": 51901}]