No Comments

Breaking the bad, pushing a worse internet

June 3rd, 2014

Some (and not all are alchemy wizards) are claiming that users break the internet by disabling JavaScript.

What is JavaScript? It is one of the three (technical) pillars of websites. The other two are HTML and CSS.

All have a different function:

  1. HTML = content
  2. CSS = style
  3. JavaScript = functionality

The content consists of all the text and images (and officially video and sound) , the things you want on informational webpages. Style adds colours, margin, font-sizes and things like that, it makes the content more readable. Javascript adds functionality and interactivity to webpages. Or can turn websites from informational documents into applications.

So how can users break the internet?

Of course they can’t.

Users can disable images, so browsers don’t download them. Don’ t forget to re-enable them before starting shouting on Twitter…

Users can disable CSS or override CSS which is nice for colour-blind or other visually impaired people.

JavaScript is needed for applications, like like games,  navigation or photo-editing,  and it can make informational documents more dynamic. On informational websites JavaScript is not viable, but needed to serve advertisements.

Users can disable CSS and JavaScript historically. At first because it was new and well supported, later because  you don’ t always need  it. All three types, HTML, CSS and JavaScript are served in different files.  That means webpages will load faster with just HTML, instead of HTML, CSS and Javascript.

CSS is nice too, but JavaScript can be an annoyance. It is a script language that executes by forehand unknown scripts (from probably different sources) on a user computer.

JavaScript impacts severely:

  • speed
  • security
  • privacy
  • costs (on  paid/metered connections)
  • battery usage on mobile devices
  • memory usage, especially on devices with less memory

If you have been infected by a virus, it must have been while serving with JavaScript enabled.

So there are very good reasons  to disable JavaScript for users on at least a lot of unknown websites. You can always reload/refresh with JavaScript enabled, if you need it.

Cooking meth(ods) in business cuisines

Internet-companies read a different story: Javascript is the fuel for their money machine. Tracking users and serving advertisements is an indispensable part of their business model, with JavaScript they can track users and collect major users statistics. They can follow users over the internet, measure where you hover with you mouse, how long you read, how much you scroll and type, operate your microphone or webcam, where you are, what your friends read, collect images, tracking what and how fast you type.  Yes, every script has access to hat.

So companies need JavaScript much more then users. A little lie that `users are breaking the internet by disabling JavaScript` can help their business enormously, especially if you design a few sites that actually break the internet, because the do not work without Javascript. Or they mix-up style with functionality. Push JavaScript and make users hooked to JavaScript.

And then blame the user! You broke the internet! What fear can do for you.

Informational webpages that show no content without JavaScript is like delivering a newspaper without ink, well there is an accompanied stickersheet, just put the stickers on the right place. That sounds silly, and it is silly. The only way companies design such pages is that they force the users to enable JavaScript so they can collect and track and serve advertisements in return on all other pages. Yes, the first browser Google designed had no possibility of turning JavaScript off. Google still blocks all extensions that users can install to block unwanted JavaScripts running on their device. Companies push apps on phones instead of letting users use webpages, with apps they have better control and get access to more detailed user-profiles.

Yes, it’s all about money. And real money isn’t made with cooking simple food like chicken nuggets or serving simple content. You need something sneaky and hidden, you need something in return.

You can be sure about one thing: bringing internet to the poor for free means multinationals want to run programs on their phones, watches and glasses too. It’s business not charity out there.

No Comments

SVG text with pattern

April 5th, 2013

No Comments

Cheer Presto Prestissimo to the great Opera Singer

February 13th, 2013

I just posted this on the Opera Wishlist forum:

Please keep Opera Classic (=Opera Presto) around for some time(years) with just necessary security patches applied.

In honour of those who shed sweat and tears to design and build it, and for those that used it daily for work or leisure and for those that simply loved it.

Also keep it available because we need it as a testing tool, we need browser engine diversity. Opera Presto is one of the best standard compliant engines.

And most important, because we (developers) need it to test our `graceful degredation` and `progressive enhancement` skills: If our future developed sites aren’t accessible in `Opera Classic` we know we failed.

To all internet artists tweeting their songs: if your work doesn’t sound in the classic Opera, keep practising.

1 Comment

Responsive WebDesign and How to Disable Media Queries

January 18th, 2013

Horizontal scrolling is nasty, on both desktop and phones, so Responsive WebDesign comes in hand to adapt the width of a webpage to the width of a screen. That’s in the interest of most users.

But although the adagium “Mobile First‘ has won ground lately which, more or less, made websites look simpler and made them more focused on content, a lot of websites keep there overloaded layout and simply hide content for mobile phones with media queries. In those cases it would be nice if you can disable/kill media queries to access the other content.

Bruce Lawson wrote an article about whether or not it would be nice to have native support for disabling RWB (Repsonsive Web Design). I guess, yeah, it would be nice, but why not add a disabled property to the specs/implementation for the CSSMediaRule-object. That would make it easy.

Access CSS and Stylesheets in javascript

To disable a (first) stylesheet, simply do this:


document.styleSheets[0].disabled

Yes, you can toggle them on/off with javascript.

A styleSheet  has a CSSRules property which contains a list of CSSStyleRule-objects and  CSSMediaRule-objects. The first are CSS-rules, the second mediaqueries, which have a CSSRules property with a collection of CSSRules.

CSS tree

document.styleSheets[0]
- cssRules
- CSSStyleRule
- cssText "body {max-width:80%;}"
- CSSMediaRule           "@media screen and (max-width: 800px) {...}
- cssRules
- CSSStyleRule
- cssText "body {width:100%;}"

Unfortunately nor a CSSStyleRule nor a CSSMediaRule-object has a `disabled` property. With other words, you can’t toggle them on/off.

A pity.

Bookmarklet

A simple bookmarklet/scriplet can do the job now, but using the proposed disabled property can make the code cleaner:

Disable MediaQueries / Responsive Webdesign

The code


[].slice.call(document.styleSheets).forEach(function(sheet) {
[].slice.call(sheet.cssRules).forEach(function(rule) {
if (rule.media){     rule.cssText = rule.cssText.replace(/(screen|all|handheld)/, "**$1**");}
});
 });

It wouldn’t be that difficult to write an extension, that let you choose which mediaquery to disable. I might just do that this weekend.

No Comments

Hipsters, High resolution and Mother Earth

November 11th, 2012

This post is about the discrepancy between a superfast internet – responsive images, high resolution displays, connection speed, HD video – and the economical footprint..

Nowadays there is a major buzz about the web that should serve the right image for the right device: a very detailed image for a high resolution (Retina) displays, a small, less detailed images for mobile phones on slow (3G) connections and, more detailed images for smartphones on fast WIFI connections.

Most discussed arguments are about resolution, connection type, speed, bandwidth and latency. What I miss is the economical part of the issue: money and `ecological footprint`. Sometimes you pay per MB on mobile networks (3G),  or on WIFI-networks at airports or hotels. I guess you’re happy with a low resolution advertisement image when you can save a couple of euros.

Not only real money, they’re other, so called external costs. Cost that are not paid for by the user. I still feel that watching a HD movie on YouTube has a bigger ecological footprint then a low resolution movie. It needs more servers, a bigger harddisk, wider bandwidth, in short more energy and hardware, so it raises the bill.  But in real life you probably don’t pay extra for it, maybe some waiting-time, because most providers offer `flat fee` subscription.

So Hipsters, if you do care about the Environment, better watch your internet movies on low resolution screens. Don’t buy the new Apple Retina screens, they’re the Hummers of the internet.

That said, they just started to talk about cost in the specs, and  they call it, euphemistically, a metered connection and describe it as an outstanding issue that is hard to implement.

As said before, most internet services are now provided as flat fee. I wonder if, and when, we will have actually start paying for real usage (Mbs). It’s economically a good idea, pay for what you get, and it will actually help to solve a couple of problems (hard to implement). Let’s see how fast problems are solved once you have to pay for it.

Maybe we will, some marketing theory claims you should raise the price, once you have a saturated market. For mobile internet, you actually pay a lot lately in the Netherlands, no flat fee anymore.  There is no fun in YouTube, it’s fucking expensive, the old newspaper is a bargain.

1 Comment

Shiny buttons with CSS3 radial gradients

November 1st, 2012

The current syntax for CSS3 radial gradients is as follows:

radial-gradient(<shape> <size>  at <position-x> <position-y>, <color-stop> [,<color-stops>] )

The older specification was:

radial-gradient(position,size and shape,color stops);

This post is about creating glossy CSS3 buttons with just one partial transparent radial gradient that can be re-used for several colors:

Make my day
Download Examples CSS
Try it out!
Submit

Read the rest of this entry »