umaar

You can "blackbox" certain code in DevTools so it doesn't pollute your debugging sessions, made a gif of how it works & what it results in: https://umaar.com/dev-tips/128-blackboxing/

For the data maps which the Medium article displays, I used: https://github.com/ericfischer/datamaps initially. If there's interest, I can try to get my scripts onto GitHub. They:

a) Include Node.js scripts for converting raw big data (the raw Shazam stream) into something usable for visualisations.

b) Contain Node.js scripts & utilities for automating the creation of maps focussed on particular geographic locations.

c) Contain client side JavaScript for displaying all the individual map tiles onto an interactive map & Google Maps API code to query for places of interest (like a club, shopping center) which may explain heavy usage of Shazam in a particular location.

For the globe, which is unrelated to the datamaps, here's the original WebGL globe which someone did in 2011: https://github.com/cedricpinson/globetweeter

The Wikipedia edits version of the globe I did: https://github.com/umaar/wiki-globe - happy to do a write up of this if people think it'll be useful.

I really enjoyed working at Shazam. One of my favourite parts were the hackdays, got to learn a lot. Here's a write up of visualising music recognitions: https://medium.freecodecamp.org/data-visualisation-with-1-bi...

I've been planning to do more write-ups from past hackdays, such as building a functional Shazam experience in client side JavaScript and other visualisations. For example one time, I repurposed a WebGL globe to plot music recognitions over it. I don't have access to the Shazam tag stream anymore, but you can get a feel for how this looked as I've applied near real-time Wikipedia edits on the globe instead: https://umaar.com/globe/

Some other Console tips in DevTools: https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fumaar.c...

Here's a gif I made showcasing Server Timing with Node.js + Chrome DevTools: https://umaar.com/dev-tips/136-server-timing/

Ok thank you for explaining! Curious about the $0 bit though

As an example, say you own a single share in Shazam, are there any ways to figure what that one single share could be worth? - Assuming Shazam is bought for $100 Million.

Generally, I'd say: keep it short and digestible. Also watch out for extra noise on the screen, otherwise it'll distract the viewer. And having an ending transition can be useful for understanding when the gif is done, since their looping nature can make this aspect confusing.

Software: Typically Screenflow. It has a built in Gif preset which I'll sometimes use, or if better compression is needed: https://gist.github.com/dergachev/4627207

I guess you're talking about the Modern DevTools course which Dev Tips links to, thanks! I'm working on new course content every week or so.

If you want to influence future content, check out: https://github.com/umaar/dev-tips/issues/27

Thank you, means a lot!

If you're interested in staying up to date with Chrome DevTools, I run this project called Dev Tips: https://umaar.com/dev-tips/

It contains around 150 tips which I display as short, animated gifs, so you don't have to read much text to learn how a particular feature works.

I run Dev Tips: https://umaar.com/dev-tips/ which is aimed at web developers.

Once a week, I send out an animated gif showcasing a Chrome DevTools/Node.js trick.

You can use the Google Cloud Vision Label Detection API (or the Microsoft Computer Vision API) to have a webpage recognise and audibly announce what it sees through the camera, all using web technologies.

I wrote a post on how I did this here: https://umaar.com/dev-tips/118-cloud-vision-image-detect-jav...

Appreciated, glad you enjoy them.

Some more tips on Chrome DevTools here: https://umaar.com/dev-tips/

Gif of the feature in action: https://twitter.com/umaar/status/570595687924166656

Thanks, that's very kind of you.

I create a Dev Tips Daily 5 days a week: https://umaar.com/dev-tips/ - It's basically a gif showcasing a DevTools feature.

Nice.

FYI: I infrequently post some of these tips to Google+: https://plus.google.com/+UmarHansa with detailed descriptions. Also on Twitter: https://twitter.com/umaar with less description.

Yeah, also that list is specifically excluding the "strict" filters. There's also: - defcon.org - ethicalvoiceforanimals.org.uk (don't know why) - hackthissite.org - rapidshare.com - gaylifeuk.com/helplines-a-support-groups.html

I was curious as to what URLs are blocked by some ISPs in the UK. Here's a (maybe NSFW) list: http://uk-blocked-sites.herokuapp.com/

Added in some documentation here: https://github.com/umaar/Chart.js/tree/master/docs (there's no CSS however)

Nice work! Any plans on updating the Github repo https://github.com/adrianleb/harmogram with this version?

Reason I ask, I wouldn't mind contributing a feature where the user can select their own microphone input as the audio source and have the paper.js visualisation react accordingly.

I think http://caniuse.com handles this situation quite well (try searching for something). Notice the short delay between a keypress and the URL updating.

I posted a tutorial about Chrome Dev Tools recently, it's a bit long though http://net.tutsplus.com/tutorials/tools-and-tips/chrome-dev-...