No Comments

Fixing Tracking Contact Form 7 with Google Analytics in WordPress

October 1st, 2014

Contact Form 7 advices to add this code to the Additional Settings field at the bottom of the contact form management page

on_sent_ok: "_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);"

Actually that is a bad idea. Be tracked by Google is not every one’s favourite idea of a free internet, so people block Google Analytics either by any tracker blocker, like Ghostery or Disconnect, by Googles official `opt out extension` or by simple blocking the script in a firewall.

Yes, Internet is the only one place on earth you have to `opt-out` to live quiet and peaceful.

When a user has blocked the Analytics script and visits your contact form, he can’t submit it. It will not submit nor show any error-message. It will do nothing, except show an obscure JS error in the console.

`Uncaught exception: ReferenceError: Undefined variable: _gaq`

To fix this, wrap your code up in a try and catch, so it won’t stop on the error and submitting will not halt:

on_sent_ok: "try{_gaq.push(['_trackEvent', 'Contact Form', 'Submit']);} catch(e){}"

Integrating Contact Form 7 and Google Universal Analytics this way is more robust.

Comments Off

Sorting with Flexbox

August 13th, 2014

The Flexible Box Layout Module is a very powerful tool to style your webpages. It offers simple solutions for things like `the Holy Grail`

Here we do a dirty sorting trick:

Just push the buttons or table header to sort the stuff.

How does it work

Sort the elements on text and write the order attribute for CSS.

<li style="order: 7;">scstqehfr</li>

Then set the elements to display flex on the ol element:

.sorted{
     display:flex;
     flex-flow:column;
     flex-direction:column;
 }

Be aware:

Sorting this way is kind of superficial, it’s only ordered through CSS: It will show the elements in different order, but in the DOM there is no change at all. So traversing or accessing elements can be surprising, it will go in original/DOM order.

Sorting an table through Flexbox ruins the layout, because it resets the display property from `table-*` to `flex-*`. An additional trick to write the width explicitly is needed to maintain layout.

Comments Off

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 not widely supported, later because you don’t always need  it. All three types, HTML, CSS and JavaScript are served in different resources/files.  That means webpages will load faster with just HTML, instead of HTML, CSS and Javascript, because less resources have to be downloaded, and HTTP-requests are quite expensive.

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 visiting websites 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 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, see what’s in your clipboard, 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 that.

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 sites do not work without JavaScript. Or they mix-up style with functionality. Push JavaScript and make users hooked to JavaScript. Especially target the mobile platform, because phones are a more valuable source for private information than desktops.

And if a users wants some privacy, blame the user! To disable JavaScript is a crime. You break the internet! What fear can do for you.

Smart-phones are stupid-phones and worse

A phone isn’t something you control, a smart-phone is controlled by major multinationals that run programs on your phone and collect information 24 hours a day and that info is continuously send to the cloud owned by the multinationals.

How much does a smart-phone phone home compared to real user initiated telephone calls. I would say a 100 times. Disconnect your phone from the internet, it can’t do anything any more. Stupid isn’t it? Smart means in control of some major company.

A smart-phone is a kind of ankle_monitor. The new Android wear will undoubtedly have an indestructible variant for individuals under house arrest or parole.

Only the first take is free

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. 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, because with apps they have better control and get more and easier access to 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 the poor guys phones, watches and glasses too. It’s business, not charity out there.

Comments Off

SVG text with pattern

April 5th, 2013

Comments Off

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.