More PWA to Ya! (Progressive Web Apps, Part 1)

More PWA to Ya! (Progressive Web Apps, Part 1)

It’s project kickoff time, and you’re having a conversation with your client about what form the application will take:

Client: I’m thinking mobile app. Our users will definitely be using this on the go.
Dev: Sure, we can do a native mobile-
Client: Mind you, we’ll want a desktop version too. We’ll need to use it from the office.
Dev: Okay, well, a responsive web app-
Client: One of our priorities is definitely ease of access – we’ll need the app accessible from the home screen, ’cause who has time for typing in URLs, amirite? We’ll also want it to be useable offline, whenever people want to.
Dev: Ye-yeah, no problem, we can wrap your web app in a webview, bundle it up as a native app, and-
Client: Yeah, cool. So they’ll just be able to go to the site and install the app, right?
Dev: Well, no, they’ll have to download it from the appropriate App Store.
Client: Eh, that’s a no-go – this is internal only, we can’t have it showing up in the app stores. Didn’t I make that clear from the start?
Dev: …

The term your client was looking for is Progressive Web App – an application that acts like a responsive web app when accessed from the browser on any device, but can be installed to mobile devices like a native application. The link above makes the case for PWAs, so we won’t belabour the point – if you’re still here, it’s because you’re convinced it’s time to build a PWA.

(more…)

Go Fetch! (JavaScript Fetch API)

Go Fetch! (JavaScript Fetch API)

Long ago, we briefly brushed upon the topic of what has made jQuery such a valuable part of the web developer’s toolset for such a long time – namely, a cleaner interface for interacting with the DOM, and the $.ajax abstraction over XMLHttpRequest.

These days, I would go a step farther and discuss how it has positively influenced browser APIs. jQuery offered a way to find elements using their css selectors, and this eventually gave us document.querySelector and document.querySelectorAll. More recently, browser developers have taken another page from jQuery’s playbook and introduced a new, Promise-based API for making asynchronous requests, and so much more – Fetch.

Why go Fetch? Let’s take a look.

(more…)

Interactive SVG Charts With D3 – Part 2

Interactive SVG Charts With D3 – Part 2
Adding tool-tips to an interactive chart.

Adding tool-tips to an interactive chart.

This is Part 2 of a three part tutorial exploring building interactive charts with D3. Part 1 can be found here.

Other blog posts which can be used as introductory material to this series:

This tutorial is Part 2 in a multi-part tutorial exploring interactive SVG charts. We will pick up where we left off in Part 1 by adding tool-tips to each data point in the chart which become activated when a mouse hovers over a point. (more…)