Whispers & Screams
And Other Things

Duplicate element ID's in the DOM

Short post today folks since its Friday :)

I've been developing quite a lot lately using Angular JS and React JS as I'm currently heavily involved with a startup preparing to release a new IoT product. The app is pretty complex with heavy calls to the server side database but that's not what we're going to talk about today. 

One of the things that seem very straightforward when you're building small UX is ensuring you have a unique array of element ID's in your DOM at any given time but, as the complexity increases, then so does the difficulty in maintaining a mental map of the DOM you have at any given time, especially if elements of your viewport are loading dynamically via ajax calls or whatever. 

The downside to having a duplicate element ID may not always be immediately apparent as it is not something that will always push an error to the console. This can result in confusing erratic behaviour from your application and often hours can be lost trying to work out what on earth is going on. 

By the time you eventually get to the bottom of the problem you realise that you've wasted hours searching for something that was ultimately such a basic error. 

So anyway, this happened to me once or twice over recent weeks. Our application loads dynamic data via ajax quite frequently and the issue I faced could sometimes be intermittent. The worst-case scenario.

After the dust had settled, I decided to create a tool for myself that I could use to quickly establish the presence or otherwise of duplicate ID's. This is what I came up with. Simply punch this code into the command line on your browser inspector console and hey presto!

var DOMElements = document.getElementsByTagName("*"), DOMIds = {}, duplicateIDs = [];

for (var x = 0, len = DOMElements.length; x < len; ++x) {

  var element = DOMElements[x];

  if (element.id) {

  if (DOMIds[element.id] !== undefined) duplicateIDs.push(element.id);

  DOMIds[element.id] = element.name || element.id;

    }

  }

if (duplicateIDs.length) { console.error("Duplicate ID's:", duplicateIDs);} else { console.log("No Duplicates Detected"); }

Feel free to use and abuse as you see fit. I hope this helps somebody out there save some hair :). Have a fab weekend.

Continue reading
82 Hits
0 Comments

Spotify SpotiFM Lastify Last.FM

As someone already devoted to another music platform my introduction to Spotify was met with not a little scepticism. ‘Surely this can’t be better than Last.fm, I thought to myself as I curiously downloaded the app and signed up.

Well it turned out I was wrong.

Well ok perhaps not completely wrong. A common theme amongst most folks is to position Spotify and Last.fm as direct competitors. While there are some superficial similarities, the case is oversimplified since Spotify and Last.fm each provide many unique features. The more I use both, the more I see how they can work together. Last.fm helps me discover new music and track my listening habits through the years and seems to be more of a social networking platform while Spotify sits on top playing most of the actual music.

In actual fact the two organisations are increasingly working together with the introduction of a new facility to scrobble tracks from Spotify to the Last.FM profile. If all this sounds like chinese to you and you like your music, I strongly suggest getting registered and giving both sites a try.

I personally dont use Last.FM to play much music anymore, opting instead for scrobbling from my home theatre PC running windows media player. I prefer to use the scrobbling feature to collect up all my listening habits into my profile and thus enable the social networking and music recommendation side of the platform using spotify to listen to tracks I dont actually have in my own library. Another cool feature of spotify is the ability to quickly import other peoples playlists into the app and listen straight away (www.spotifyplaylists.co.uk).

All in all its a fantastic combination which, when used in tandem with ones own MP3 music collection is about as good as Web3.0 for muso's can get.

Some other useful counterparts to the two core apps are shown below:

    • freshspotify – Tracks newly released music on Spotify and compares it with your favourite artists on Last.fm. Subscribe to artist RSS feeds (or email) to be notified of updates. This is a really useful service: you can browse the site (which nicely summarizes the new Spotify releases) and sign in whit a google account to add artist alerts based on your Last.fm profile (up to a maximum of 100 artists).




    • Spotify.fmFrank Quist’s new and improved webtool to list the latest Spotify releases of all your favourite artists on Last.fm. Also has a neat RSS feed and the ability to search based on both username or tag and search on similar artists.




    • Spotify updates from Last.fm – This app can look for any artist in your library (not just your top 50 artists) and lets you specify the playcount range to consider too. It will also return recommended artists, so this is a great way to discover more music from artists you’re perhaps not too aware of, and complements the other apps well. Developer OnDistantShores (who is also responsible for the excellent Universal Scrobbler) promises more updates soon, including the option to specify a tag and search new releases by artists with that tag: brilliant!




    • Last.fm Spotify Search – Script that adds a wee green note icon next to tracks, albums and artists on Last.fm’s website. To use, install Greasemonkey then add the script. You can then click the note icon to search in Spotify. I find this one really useful, it saves on typing and binds Last.fm and Spotify together nicely.




    • Lastify - A plug-in that bolts onto the regular Spotify client and lets you Love, Ban, and Tag tracks back to Last.fm.




    • Last.fm + Spotify + Find new albums – Newly updated, this webapp tells you what’s new in Spotify based on your Last.fm Top 50 artist favourites. It can also match against recommendations: a great way to discover new bands. Results are grouped by when they were added to Spotify and let you click both the album/single and artist. There’s also an RSS feed you can subscribe to, and the app now lets you filter to view only singles or albums as well as as “show tracks” dropdown for each album.




Groups


    • Spotify – The best Spotify group on Last.fm, leader Faz regularly checks in and updates the Shoutbox, and there are always active discussions going on.




    • Scrobble for Spotify – Originally set-up before Spotify had a scrobble feature, the Scrobble for Spotify group continues to attract new members.

 

Continue reading
815 Hits
0 Comments

Furby on steroids?? Meet Chumby

ChumbySay "Chumby" and an image of a squat beanbag with a touch-screen comes to mind--that is, if you know what a Chumby is.

Steve Tomlin, is the genius behind the evolution of the Chumby from a single gadget that can pull weather, music, news, photos and trivia from the Web into an assortment of "powered by Chumby" devices.

Tomlin, Chumby Industries' chief executive,  has spent the past few months striking partnerships with some of the largest consumer electronics companies, including Sony, Broadcom, Marvell and Samsung. The partnerships will enable the port of Chumby's open-source operating system to a wide range of gadgets, including TVs, Blu-ray players and clock and tabletop radios, some before the end of the year. 

Tomlin, who prefers consumers to think of Chumby as a content and media business, based on an ecosystem of widgets and third-party developers has a vision of Chumby's future that centres on bringing a personal multimedia Web experience to as many connected consumer electronics as possible. He is quoted as saying: “Selling someone an LCD in a plastic frame with a memory card is not a compelling product… The challenge is to reinvent how to share photos and media.”

The first Chumby-powered photo frame will be able to display content from photo sites Flickr and Photobucket, along with accessing social networks, such as Facebook and Twitter, as well as news feeds, Internet radio and weather forecasts. Content can be be pushed to other ‘powered by Chumby’ devices so that, for example, users can share photos with other members of their Chumby social network. Chumby's software recognizes other Chumby owners, so users will be able to share photos by "pushing" them over the air to their friends.


Gadgets such as the now extinct Nabaztag and Chumby hope to fill a burgeoning space in the phenomenon to merge the online world with the offline world and it is surprising that there have not been more of these types of product released to the market place.


This will surely change greatly over the coming 12 months.

Continue reading
697 Hits
0 Comments

Revolutionary new UK plug

This is such a great idea and as usual with the greatest ideas, oh so simple.

Continue reading
Tags:
550 Hits
0 Comments

Pearltrees

http://www.youtube.com/watch?v=pRjooxoNXx4

Pearltrees was in private beta until last month. This innovative Web 2.0 app allows web users to build visual "maps" that organize web pages visually using "pearls" within a tree structure, see the picture above. Via a browser add-on, internet users can transform their daily browsing experience into a visual "pearl tree" and share it with other Pearltrees members.

I like the concept a lot but it needs some user interface improvements, such as allowing actions from a contextual menu: delete, add as friend, play the map, explore neighborhood (and more) should be accessible with a right click. Moving pearls around is easy (drag and drop) but the overall navigation could be improved. Keep in mind that this application is still in early stage and the team is releasing new features and updates regularly. The ability to embed a pearl in a blog or website has been launched on Monday (look at it in the photo gallery). Try it and send your comments to the Pearltrees team using the feedback button.
Continue reading
628 Hits
0 Comments