Posts tagged with google
I’ve been doing a fair amount of work in Nuxt.JS of late. I’d previously used Next.JS but found React not to my liking and that Vue just fit better with my mental model/workflow.
It looks like this:
Google Trends is a great way of visualizing what trends to searches are over time. The default embed script tho will not work in your Nuxt.JS app.
If you paste it as-is you will see the error:
Uncaught SyntaxError: expected expression, got '&'
So we should tell Nuxt.JS to run the script only on the client using the
<client-only> tag. Now you will see:
Uncaught ReferenceError: trends is not defined
It appears that the second part of the embed code Google provides is trying to run before the first is ready. I’m not sure why this happens inside Nuxt.JS/Vue and not in a normal browser session but we can fix that by moving the initialization code into a function and then calling that function using the onload event on the primary script.
Now you will experience one of two things - either the page will reload with only Google Trends and not your content or you’ll get an error about the DOM being changed. This is due to the use of
document.write in the default embed code.
Thankfully Google includes a
renderExploreWidgetTo function which leads us to…
Instead of using the default embed code, adapt this version to your needs replacing just the contents of the
initTrends function with the part from your Google Trends embed code and viola!
If you need multiple charts you’ll need to create multiple divs and paste multiple blocks into
initTrendChart to ensure they are all initialized. You do not need multiple copies of the embed_loader script.
This also works just fine with markdown files used to render content via Nuxt Content.
My eagerly-awaited Chromecast arrived a couple of weeks ago. Despite the reports that Google had run out of Netflix codes my 3-month streaming code arrived a few days before by email – a great deal given that it is also valid for current Netflix customers too.
The requirements for using a Chromecast are:
- HDMI-capable display
- 2.4 GHz 802.11 b/g/n Wi-Fi network
- iOS device, Android device or laptop with Chrome
The box was quite small but contained everything you need and a couple of things you might not, specifically:
- Chromecast device – with HDMI at one end and Micro USB at the other
- Micro USB to USB cable – to provide power to the device
- HDMI extension cable – if Chromecast is obstructed from fitting in your HDMI port
- USB wall socket adapter – if you don’t have USB ports available
The device itself is a rather small affair about twice as long as a HDMI connector and a little wider and thicker.
Some people are upset that it needs a USB power cable given the promo shots show no such cable.
HDMI however only supplies 50ma of power wile USB supplies 500-900mA. Chromecast is a small computer with 1080p output and Wi-Fi so it’s going to be needing a lot more than HDMI can supply. If you were hoping HDMI 1.4 would address that you’ll be disappointed.
Given that your options are:
- Plug USB cable into TV USB socket (if it has one that is always-on)
- Use included USB wall socket adapter
- Find something in range with an always-on USB socket
My Yamaha receiver/amp is the hub for my system and all devices have to go through to get sound (it also makes switching device simpler).
My amp lives in a small confided space below my TV which reduces the Wi-Fi range but the Apple Time Capsule is near enough for a strong single and indeed the spare USB port it has provides power.
Once connected and powered up you’ll be presented with something like this on your screen which cycles through one of many beautiful background images both during setup and when idle. I’m not sure if the images are location-aware or Google chose it because they’re also in the bay area.
Chromecast starts up with it’s own temporary wireless network. Then you download one of the two setup programs for either Mac or Windows and it will switch you to that network (with no warning, I hope you weren’t downloading anything) and will prompt you for your Wi-Fi details. With any luck it will switch Chromecast over to that and it’s up to you to switch your machine back.
A WPS option would have eliminated the need for downloads and disconnects but given how few people know about WPS (it’s very hidden away on my Time Capsule) it’s an understandable omission.
The Chromecast is a very lightweight device and as such you need another device to control it. My wife and I both have iPad’s that are normally nearby so this is primarily the source of plays.
Basically the app looks as normal however you’ll see a little icon at the top right. I’m going to call this the “cast” icon as it’s also used in YouTube and the Chrome Cast plug-in. Tapping it shows which of your devices to play on. If something is already playing you get a blue bar at the top to let you jump in to control it:
Once the show or movie is playing you get artwork for the show and a bunch of controls to move forward/backward, change audio and subtitle options or go back. Hidden behind the stack of cards at the top is the episode menu for switching episode or season. This is useful as there isn’t yet a “post-play” experience to take you to the next episode automatically.
I ran into a problem that should your HDMI link be interrupted or your iPad sleep you may get the error I captured below. If you do you’ll need to quit the Netflix app and restart it to regain control.
Netflix for Android behaves in a very similar way to the iPad – the same blue bar while playing and a very similar during-playback experience and menu button. I’ve not included screenshots because it is so similar but I can put them up if anyone asks :)
Running the Silverlight based player from the website also reveals the cast icon tucked between subtitles and sharing on the playback control but only if it is running within Chrome and the extension is installed. This works on both the PC and the Mac despite Silverlight for Chrome on the Mac never becoming officially supported by Microsoft.
Firefox, Safari and Internet Explorer users are out of luck for now although it there is a possibility that Windows 8.1 and IE 11 with HTML5 based playback may have the option – I’ll have to try it and report back. (Windows 8.x DRM doesn’t work in a virtual machine)
I have a love-hate relationship with YouTube. I love the wide variety of content but hate the duplicate content, poor encoding, confusing channel organization, re-buffering and choppy full-screen performance on Chrome for Mac. (Works fine in Safari, how odd)
Thankfully Chromecast solves a couple of these. Re-buffering and full-screen performance are great here. Just find your video and hit the cast icon at the bottom right to choose where to start it in a similar way to Netflix.
When it’s already playing the Chrome Cast extension gets involved and shows you what is going on:
If you try clicking this icon to cast either YouTube or Netflix you’ll get a warning telling you to use the icons within the players themselves. This is a bit clunky and I would imagine Google will improve the interop here in the future so you can just always use the Cast button.
As well as video streaming you can browse web sites from Chrome using the Cast extension. Simply hit the Cast button on the toolbar and choose again where you want it to go:
There are also various options available to control how things look on the screen.
Rendering quality is okay from a distance but a mess close-up most likely due to the 720p limit and some sort of scaling going on. 1 pixel lines and curves are a mess as is small text.
Usability is okay as long as you are looking at your laptop and not your TV as there is no mouse pointer, context menus, toolbars and a second or two of lag even over fast solid Wi-Fi.
Weirdly selected text shows as selected and web sites with hover effects show that effect even with no mouse. I think these omissions and inclusions are simply the result of what Chrome renders via WebKit rather than a rational set of choices.
Oddly I received performance warnings on a MacBook Pro 2.6 GHz with no major apps running.
Usability and screen display quality were massively improved by choosing the semi-hidden and experimental “Cast entire screen”:
This could give offices a very cool and simple way to setup sharing for presentations in Keynote/PowerPoint without the dreaded hunt for the right cable or adapter that always seems to happen.
Lag was also improved when dropping down to lower resolutions.
It’s a great device but there is always room for improvement. I’d like to see:
- More video streaming services – Hulu & Amazon Prime
- Some music streaming services – Spotify & Pandora
- DLNA streaming support for existing media/libraries
- Native Mac OS X & Windows drivers to add Chromecast as additional wireless display
- Configure a source for background images when not in use
More streaming services are coming so that’s covered.
Getting DLNA support (or indeed Airplay for Mac loving friends) will probably require some open source efforts. Thankfully Google have the start of a Google Cast API/SDK available so that should just be a matter of time.
The wireless second display option would be awesome for developers, testers and presenters. Let’s hope somebody figures that out.
The Chromecast is a great device.
From the time we switched it as completely taken over our Netflix home viewing. We were using an Xbox 360 but the Chromecast:
- is faster to launch
- is quieter
- supports 1080p (the Xbox runs native 1080p on only a handful of titles, everything else is hardware up-scaled)
- supports Netflix profiles
- doesn’t play cheesy UI effect noises through my surround system
- uses less power
Additionally instead of watching YouTube on our laptops we just cast them over to the big screen and sound.
For $35 it’s an absolute steal.
Disclosure: As a former Netflix employee I have stock options in Netflix.
Typographica opened today with a critique of the Roboto font which boils down to this:
The similarity to Helvetica is obvious but that similarity can be drawn with many modern typefaces – the other comparisons are tenuous indeed:
- FF DIN has little resemblance other than having straight edges on rounded letters. Lots of faces do that. Envy Code R does extensively :)
- Myriad is more open in it’s white-space, ends t with a slant and features a different approach to shoulders on mnpqr
- Ronnia only shares the single horizontal stem which is also present in many monospace bitmap fonts
Yes, some of these differences are subtle when you put them side by side but subtleties are what give the typeface its character.
There are only so many ways to draw letters with consistency and readability especially if you want a modern sans look. That’s exactly why copyright refuses to cover letter-forms in the USA.
So coming to the font itself at first glance, yes, on my laptop it doesn’t look as pretty as Helvetica when blown up for comparison but here’s something you should consider.
Typefaces are designed for a specific environment
Consider the following typefaces:
- Bell Gothic has big counters and deep ink-traps so that high-speed printing on cheap paper retains the form
- ClearView Highway is designed to be quickly readable with headlight glare
- Cambria has many little flourishes that only look good with sub-pixel positioning
Use a typeface outside its intended environment and you’ll easily believe it’s a bad design, ugly or unrefined as those very characteristics that made it great for that environments completely fail to fit new surroundings.
Even the famous Helvetica has an environment of white-space, bold colors and clean-lines where it shines. That makes it a top choice for corporate logos.
Roboto is the work of independent type designer Christian Robertson and until I see it on a Droid device I’ll cut him and Google some slack – from the screenshots I’ve seen online it looks like a good fit.
You have to at least respect Google for continuing to improve typography by commission fonts. Microsoft are the only other major UI player doing this as Apple’s sole contribution to typefaces in the last 10 years has been a hack-job on the open-source Deja-Vu Mono to rename it Menlo, move some bars around and to trash the hinting in the process so they have something to replace the aging Monaco with.
If you want to download the font yourself here is a complete set of the files taken from the SDK (unlike the other zip floating around this one has all variants + the license).
Download Roboto (2015) Font Family (ZIP of TTF) (1.2 MB)
Tomorrow morning at 5am where I can enjoy an advanced fee scam! I’ve had these in email format before but never in my calendar…
Oddly there are no emails about this in my inbox and I sure didn’t tell it to add one to my calendar. As there is no ‘Report Spam’ link for calendar entries I had to return to calendar view, delete it from there and hope nothing else shows up.