This post is part 73 of 92 in the series Programming by Stealth

In the previous instalment we took our first look at using templates with JavaScript to create cookie-cutter content like Toast notifications more easily than building them up piece-by-piece with jQuery. We started our exploration of the topic with a look at HTML5’s new <template> tag. In this instalment we’ll introduce a third-party templating tool, Mustache, and see how it can take our templates to the next level with concepts like conditional and looped sections.

You can download this instalment’s ZIP file here.

Read more

Tagged with:

A few days ago Facebook founder and CEO Mark Zuckerberg shared a lengthy post laying out the vision that will be driving his company’s implementation of private messaging going forward. There was a lot to like in that message from a privacy point of view, but the scope was limited — this was not a revolutionary vision for transforming all of Facebook, just for evolving their private messaging offerings.

Big-picture-wise the post laid out six principles that will drive the evolution of private messaging on all Facebook-owned platforms — private interactions, encryption, reducing permanence, safety, interoperability, and secure data storage. Note that the interoperability Zuckerberg describes is between Facebook-owned services, not between Facebook services and services from competitors, so that’s not actually good news from a privacy point of view. This refers to Facebook’s plans to merge private messaging within all its products into a single messaging architecture. This is a privacy loss not a privacy gain, but there is a silver lining — the post promises the merging will be opt-in, and users will be able to choose to keep separate identities on the separate services if they wish. Obviously encryption is good, as is not keeping privately shared stuff for ever.

But, does any of this change the fundamental problem, Facebook’s business model? Nope!

Facebook will continue to make its money by offering users a free service in exchange for their personal information — Facebook remains freepi (and creepy)!

Read more

Tagged with:

We call the common business model where you give users something for free, and more for money Freemium. It’s a nice simple portmanteau of free and premium.

There’s another business model I think we badly need a word for — the one where users get to use something at no financial cost, but are made to pay, knowingly or un-knowingly, with their personal information instead.

I’d like to propose the word Freepi, pronounced like creepy to describe this Free-for-Personal-Information business model. It’s a combination of the word free and the initials pi for personal information. The fact that many companies who employ this business model do really creepy things just makes the word that much more appropriate.

If you value your privacy, beware companies with freepi business models, they’re very likely to do creepy things!

Related Posts:

Anyone who listens to my podcast contributions is probably sick of hearing me repeat the mantra to follow the money. If you want to evaluate whether or not a given product or services is likely to present a privacy risk, you need to start by figuring out how it’s financed. Why? Because the financing sets up the incentives that will ultimately drive the provider’s behaviour. You’ll generally have a good experience with a product or service when the provider’s incentives align with your best interests, and conversely, things will almost certainly go south when the provider’s incentives are opposed to your best interests.

When you pay for a product or service things are usually straight forward — you are the customer, so the provider is incentivised to keep you happy so you’ll keep giving them your money. Things can of course go sour even with paid products or services when the price you pay is below the economic cost of the product or service (e.g. Amazon & Google smart speakers and TV dongles), or, when the market isn’t free, and you’re locked in to a single provider in some way (e.g. broadband in the US). But still, most of the time, if you’re both the user and the customer, your privacy is unlikely to be exploited.

Where things tend to get more complicated is when we’re not paying for products or services with money. That’s when you really need to pay close attention!

We very rarely get physical things for free, so in this post I’m only concerned with online services that are financially free to use.

We need to start by acknowledging the obvious fact that it costs money to run any online service, so if you’re not paying into the pot, someone else must be. Who ever that is, that’s who the people running the service are incentivised to keep happy. In other words, the service provider is strongly incentivised to align their actions with the interests of the people who pay them. When you figure out who that is, you can usually figure out the incentives, and whether or not they align with your best interests.

Remember, sooner or later, quickly or slowly, every organisation eventually follows the incentives acting on it. Incentives might not be fast-acting, but they are relentless, so movement is inevitable!

I want to suggest four simple categories you can group online services providers into to help you figure out the incentives at play, and whether or not they align with your best interests — free, freemium, free-for-now, and what I’ve decided to call freepi (pronounced like creepy). Yes, it will be an over-simplification, but that doesn’t mean it can’t be a useful lens to look at the world through. The real world may be messy and complex, but most things still approximate our crude categorisations!

Read more

Tagged with:

This post is part 72 of 92 in the series Programming by Stealth

Templating is a very important concept to get to grips with as you move from web pages to web apps. You need the ability to design some generic HTML and then easily inject data into it. Every UI popup has a standard form, but the information being displayed changes each time its invoked. Similarly, apps often use some kind of card interface to show a collection of similar items, those are basically the same piece of HTML being re-used with different data over and over again. Clearly, you want to be able to easily create a template for one card, and then re-use it over and over again.

I’ve been trying to find the perfect moment to insert this topic into the series, and it struck me that Bootstrap Toasts would make a simple but informative example around which to introduce the topic. So far we’ve been generating toasts by building them up piece-by-piece with jQuery, starting with a tag, setting the text, setting some attributes and properties, adding some classes, appending tags together, and so on. The code works, but it’s cumbersome to write, and worse still, difficult to debug and maintain. Hopefully you’ve been thinking to yourself ‘there must be a better way?’, because if you have been, you’ll be very well motivated to ingest this instalment!

You can download this instalment’s ZIP file here.

Read more

Tagged with:

This post is part 71 of 92 in the series Programming by Stealth

The challenge set at the end of the previous instalment was to build a simple timer web app. This was a much more substantial challenge than those I’ve been setting in the previous handful of instalments, and in involved re-familiarising yourself with concepts we’ve learned before, but not used for some time. For those reasons this instalment will primarily revolve around my sample solution to the challenge. I’ll go through it in much greater detail than I have been doing recently.

It would be a shame to go through an entire instalment without any new content though, so we also meet one very simple but very useful little Bootstrap component, the Spinner. Learning about the spinner sets us up nicely for a new challenge — two simple but important improvement to the timer web app we just built.

You can download this instalment’s ZIP file here.

Read more

Tagged with:

This post is part 70 of 92 in the series Programming by Stealth

In this instalment we’ll continue our recent focus on Bootstrap components primarily intended for use in web apps rather than on web pages. We’ll look at a pair of components designed to notify of something — modal dialogue boxes, and so-called toast notifications.

Different notifications require a different UI, hence there being two components, Modal, and Toast. However, both are quite similar in the sense that you will most probably be triggering them via JavaScript. Unlike the other components we’ve seen so far, these will not be visible to the user when the page loads, they’ll make their presence felt at some later time in response to some kind of event.

You can download this instalment’s ZIP file here.

Read more

Tagged with:

This post is part 69 of 92 in the series Programming by Stealth

In the previous instalment we learned how to use Navs for creating navigation bars, and learned how to use Dropdowns to add expandable menus to our Navs. In this instalment we’ll meet Bootstrap’s ultimate navigation component, the Navbar. This is a powerful component designed to act as the menubar at the top of websites or web apps.

You can download this instalment’s ZIP file here..

Read more

Tagged with:

This post is part 68 of 92 in the series Programming by Stealth

In this instalment we’ll get our first look at Bootstrap’s so-call Nav component, a menu designed to facilitate navigation around a website, within a page, or within a web app. In the previous instalment we met Dropdowns for the first time, and saw how Dropdowns filled with buttons can be used within web app UIs. We ended by noting that Dropdowns come in two flavours, buttons and links. In this instalment we’ll learn how to use the link-flavour of Dropdowns within Navs. Finally, we’ll learn how to use Navs to create tabbed content regions within a web page or web app.

You can download this instalment’s ZIP file here.

Read more

Tagged with:

This post is part 67 of 92 in the series Programming by Stealth

In this instalment we’ll start a two-part look at the Bootstrap Dropdown component. This component can be used to add pretty dropdown menus to both web app UIs and website navigation bars. In this instalment we’ll look at the first of those uses, and then in the next instalment we’ll look at navigation bars in general, which we’ve not seen before, and then Dropdowns within navigation bars.

You can download this instalment’s ZIP file here.

Read more

Tagged with:

« go backkeep looking »