tech support 8

  • Subscribe to our RSS feed.
  • Twitter
  • StumbleUpon
  • Reddit
  • Facebook
  • Digg

Thursday, 6 September 2012

Use Twitter's New Embedded Timeline without Slowing Your Page

Posted on 10:27 by Unknown


Update: September 7, 2012




I misunderstood how browser load external JavaScript files when that load itself comes from embedded script. Ben Ward explained it to me and referenced this handy article, Thinking Async.




The gist of the article is that using JavaScript to write in a call to a JavaScript file causes the browser to load the external script asynchronously.




While it may be like wearing suspenders with a belt, I'm still going to leave my async edits in my Twitter embedded timeline calls.




Original Entry





Yesterday Twitter announced its new embedded timeline feature for web sites. The gist is that you drop a block of code on your site and users will see the timeline for the selected account as if they were viewing it on Twitter.com — embedded media, expanded links, etc.




This is a new feature and is likely to change, even if the how-to Twitter post isn't too clear on that. I say that it will change because of language in the developer documentation like No other customization options are available at this time, as well as the slew of requests for more type styling options (among other customization requests) on the Twitter Embedded Timelines Questions page(s).




There are also known bugs. If your domain has a hyphen in it, then this won't work. If you are using Opera Mobile, Android 2 or 3 default browser, or an iPad, then the swipe-to-scroll gesture doesn't work (I already reported that one).




Another issue that Twitter may not consider a bug is how the script to embed the timeline is loaded. Currently if you have an embedded tweet or the old embedded timeline on your page and Twitter is down (fail-whale down), then your web page will take quite a while to render. This is a function of how browsers load JavaScript. The browser won't finish rendering the page until it has loaded all the JavaScript or given up (a timeout, which can take minutes).




While there are JavaScript functions that can mitigate this, those don't come into play until the script has downloaded. Instead, HTML5 has a couple attributes for the script element that apply here — async and defer. Essentially these tell the browser it can render the page before the script is downloaded. Since Twitter content is often just add-on content for your existing page, this is the right approach.




Instead of spending a thousand words explaining how this attribute works, I refer you to the WHATWG specification using an embedded tweet where I manually insert the async attribute:



If you use JavaScript and don't know about async/defer HTML5 attributes, you should read up and use: whatwg.org/specs/web-apps…

— Adrian Roselli (@aardrian) September 6, 2012




The new embedded timeline feature doesn't make it quite that easy. Twitter gives you code to drop on your page that has no script element into which you can casually paste async. The script element is generated by JavaScript, which looks like this:




<a class="twitter-timeline" href="https://twitter.com/aardrian" data-widget-id="243755160277487616">Tweets by @aardrian</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>




Many of the people who may drop Twitter timelines into their web site are not JavaScript coders. So I whipped up a quick modification you can make to that pre-generated script that will drop the async attribute where it needs to go:




<a class="twitter-timeline" href="https://twitter.com/aardrian" data-widget-id="243755160277487616">Tweets by @aardrian</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.async=true;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>




The js.async=true; tells the Twitter function to drop an async into its script reference when it gets created. The generated chunk of code will look like this:





<script src="//platform.twitter.com/widgets.js" async="" id="twitter-wjs">




Now if Twitter goes down again (which it will) your page won't hang as a result.
I have also asked Twitter to consider including async in its standard copy-and-paste code.




I have eight (8!) examples of this in play on my Buffalo food truck page, where I have embedded the timelines of the current crop of food trucks in the area so I can check them all at once while aimlessly wandering the streets in a hunger stupor.




If you have a better solution, I am all ears. Please drop it in the comments with any other feedback.

Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Posted in html, JavaScript, social media, standards, Twitter | No comments
Newer Post Older Post Home

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Popular Posts

  • Browser Performance Chart
    Jacob Gube has posted a handy chart over at Six Revisions titled " Performance Comparison of Major Web Browsers ." He tests the c...
  • Google Dashboard: What Google Knows about You
    Google announced a new service/feature today, Google Dashboard . Given all the services Google offers and all the ways you can interact with...
  • Facebook, HTML5, and Mis-Reporting
    My Twitter stream and the headlines of sites across the web yesterday lit up with Facebook's CEO blaming its stock price (failure to mee...
  • App Store Meta Tags
    Why yes, Dominos, I'd love to tap again to get your real home page to order a pizza when I could have done it right here, below your ove...
  • Speaking at Mom 2.0 in Houston, TX
    I will be in Houston this week to speak at the Mom 2.0 Summit (Feb. 18-20, 2010, Houston, TX). To make it a little easier to describe, here...
  • Codepen Has Handy Sharing Tools for Devs
    There are plenty of online resources for playing around with code right in the browser, no server of your own needed, that you can then shar...
  • History of Eye-Tracking as Research Tool
    If you've ever wondered what eye-tracking is and where it came from, there is a historical breakdown in the article A Brief History of E...
  • Opera: Presto! It's now WebKit
    Opera is replacing its Presto rendering engine with WebKit (Chromium, really, when you factor in the V8 JavaScript rendering engine). Big n...
  • The Science of Trust in Social Media
    I am one of those people who always needs to see proof of some assertion, evidence to back up a claim. While I can accept anecdotal evidence...
  • Developer Discusses Dyslexia and Dyscalculia
    Sabrina Dent , a web designer hailing from Ireland, has blogged about her struggle with dyslexia and dyscalculia and web applications today...

Categories

  • accessibility
  • Adobe
  • analytics
  • Apple
  • apps
  • ARIA
  • Bing
  • Blink
  • Brightkite
  • browser
  • Buzz
  • Chrome
  • clients
  • css
  • design
  • Facebook
  • Firefox
  • Flash
  • fonts
  • food
  • Foursquare
  • g11n
  • geolocation
  • globalization
  • Google
  • Gowalla
  • html
  • i18n
  • ICANN
  • infographic
  • Instagram
  • internationalization
  • internet
  • Internet Explorer
  • JavaScript
  • JAWS
  • Klout
  • L10n
  • law
  • localization
  • Lynx
  • Mapquest
  • Microsoft
  • mobile
  • Netscape
  • ning
  • Opera
  • patents
  • picplz
  • Plus
  • print
  • privacy
  • project management
  • QR
  • rant
  • RSS
  • Safari
  • SCVNGR
  • search
  • SEM
  • SEO
  • social media
  • Sony
  • speaking
  • standards
  • SVG
  • touch
  • translation
  • Twitter
  • typefaces
  • usability
  • UX
  • Verizon
  • video
  • W3C
  • WAI
  • WCAG
  • WebKit
  • whatwg
  • Wired
  • WOFF
  • xhtml
  • Yahoo
  • YouTube

Blog Archive

  • ►  2013 (39)
    • ►  December (1)
    • ►  November (7)
    • ►  September (4)
    • ►  July (3)
    • ►  June (2)
    • ►  May (5)
    • ►  April (3)
    • ►  March (6)
    • ►  February (2)
    • ►  January (6)
  • ▼  2012 (63)
    • ►  December (2)
    • ►  November (4)
    • ►  October (5)
    • ▼  September (5)
      • Recent W3C HTML5 Updates
      • Reviewing Twitter's New Profile Header
      • Facebook, HTML5, and Mis-Reporting
      • Page-Level Container Discussion for HTML5
      • Use Twitter's New Embedded Timeline without Slowin...
    • ►  August (4)
    • ►  July (6)
    • ►  June (7)
    • ►  May (7)
    • ►  April (8)
    • ►  March (5)
    • ►  February (3)
    • ►  January (7)
  • ►  2011 (67)
    • ►  December (5)
    • ►  November (7)
    • ►  October (5)
    • ►  September (4)
    • ►  August (8)
    • ►  July (3)
    • ►  June (8)
    • ►  May (3)
    • ►  April (1)
    • ►  March (6)
    • ►  February (6)
    • ►  January (11)
  • ►  2010 (100)
    • ►  December (8)
    • ►  November (7)
    • ►  October (5)
    • ►  September (10)
    • ►  August (7)
    • ►  July (11)
    • ►  June (12)
    • ►  May (6)
    • ►  April (8)
    • ►  March (10)
    • ►  February (5)
    • ►  January (11)
  • ►  2009 (51)
    • ►  December (9)
    • ►  November (6)
    • ►  October (21)
    • ►  September (13)
    • ►  August (2)
  • ►  2003 (3)
    • ►  October (1)
    • ►  January (2)
  • ►  2002 (9)
    • ►  December (1)
    • ►  June (3)
    • ►  April (1)
    • ►  March (3)
    • ►  January (1)
  • ►  2001 (1)
    • ►  February (1)
  • ►  2000 (4)
    • ►  October (1)
    • ►  July (1)
    • ►  June (1)
    • ►  January (1)
  • ►  1999 (7)
    • ►  November (1)
    • ►  September (2)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
Powered by Blogger.

About Me

Unknown
View my complete profile