Comments Off on Running browsers headless

Running browsers headless

April 26th, 2017

A headless computer is a computer running without a monitor or a display server, much like an internet server.

Running browsers headless means extra options to automate testing of websites and web apps. Chromium (on which Google Chrome is based) on Linux is able to run headless since version 57, but Ubuntu now already offers version 58.

How to run Chromium headless

chromium-browser --headless https://dev.webonomic.nl

At the moment `–headless` mode uses a different user-agent then normal mode.

user-agent headless mode chromium

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/58.0.3029.81 HeadlessChrome/58.0.3029.81 Safari/537.36"

user-agent normal mode chromium

"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/58.0.3029.81 Chrome/58.0.3029.81 Safari/537.36"

Run Chromium with different user-agent

chromium-browser --user-agent "Mozilla/5.0 (Windows NT 6.1; rv:45.0) Gecko/20100101 Firefox/45.0" --headless https://dev.webonomic.nl

This should work but it doesn’t (anymore). This cli switch must have been removed. Poorly documented.

Apparently Google doesn’t want to give you the opportunity to imitate a normal chrome with a headless chrome.

What about Firefox

As it seems, headless isn’t yet supported for Firefox, but developers are working on it.

Comments Off on Sorting with grid

Sorting with grid

April 12th, 2017

A while ago we showed you a way to use flexbox for sorting lists and tables. This month the powerful CSS Grid layout system went unprefixed in all major browsers.

In short Grid is for two dimension grids, while Flexbox is better suited for one dimensional layouts, like a nav bar. They can work together, a grid cell can be a flexbox container and vice versa.

The grid system is rather easy to grasp, it doesn’t have much surprises.

Let’s go over to the 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 grid order attribute for CSS.

<li style="grid-row-start: 7;">scstqehfr</li>

The main `win` of css sorting is you don’t need to modify the DOM, which is expensive in most browsers. That said, you need some CSS trickery to get tables look like tables at the moment a tbody has a grid or flexbox display-layout.

Read more about the Basic concepts of grid layout here.

1 Comment

Install Android browsers without Google Play

{}
March 13th, 2017

Android is the most used operating system for phones. Unfortunately software updates for android phones are not always available nowadays, so the only way to keep your phone secure and up-to-date, is to use a community driven version of Android.

Well, Android is open source, so you can always build something like LineageOS to get a recent version of Android for your device.

I certainly can recommend that. Even older phones are running quite nice, especially when all the proprietary (Samsung/Google) stuff is not installed. Don’t flash GAPPS and your phone feels like new.

Of course that means you don’t have something like Google Maps, but safety has a price, and to be honest, OsmAnd Maps is an excellent replacement.

Software for Android phones outside Google Play store

So now you have a recent LineageOS Android version on your phone, now you need software. You can use the F-Droid repository full of FOSS (Free and Open Source Software).

F-Droid

Opera Browser for Android outside the Google Play Store

You can find the Opera Browser, both the Mini, Mobile and the Opera Android version here:

https://www.opera.com/mobile/download/versions/

Firefox Browser for Android outside the Google Play Store

Firefox for Android is the only mobile browsers that has support for extensions. I can really recommend it.

You can find the Firefox browser, the apk package  here:

https://www.mozilla.org/en-US/firefox/android/all/

If you want to try out a beta version of Firefox for Android, you can find it here:

https://www.mozilla.org/en-US/firefox/android/beta/all/

And Firefox Aurora, the nightly builds:

https://www.mozilla.org/en-US/firefox/android/aurora/all/

When you use Android AOSP, you can have a hard time finding the right browser for your device. Don’t ask me why, but all those links are more or less unfindable, because they are hidden from search-engines.

<meta name="robots" content="noindex">

Hope we can help.

Android AOSP is a great operating system for phones, and more or less the only way to use an Android Phone safe and secure for more then two years.

1 Comment

Breaking the bad, pushing a worse internet (part II)

June 21st, 2015

In an earlier post we lamented the behavior of multinationals by dropping noble classic Internet principles like Graceful degradation and progressive enhancement to strengthen their business model at a high security and privacy cost for users.

Go to a site with JS disabled and you see Nada. Zilch. On Google, on Twitter, Facebook tells us it can do much without JS. Nonsense, that is their policy, it’s not your fault.

Read the rest of this entry »

Comments Off on Fixing Tracking Contact Form 7 with Google Analytics in WordPress

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 on Sorting with Flexbox

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.