Ein interessantes Zwiegespräch zweier digitalen Assistenten. Fehlt nur noch Siri zum perfekten Kaffeeklatsch.

(Direktlink, via Martin)

Wenn Euch bei Anki Overdrive die KI zu viel in die Steuerung eingreift und Ihr auch gerne jenseits vorgebener Strecken Rennen fahren wollt, dann solltet Ihr einen Blick auf Dr!ft werden. Die Rennautos des Kickstarter-Projekts fahren auf jedem ebenen Untergrund und sollen realistische Fahreigenschaften haben. Bei Anki Overdrive müssen die Supercars und Supertrucks auf den Bodenplatten fahren, um sich orientieren zu können. Die KI versucht dabei sie immer in einer der vier Spuren zu halten. Das macht die Rennen einfach und lässt auch schon Kinder viel Spaß haben. Doch mit realistischen Rennen hat das wenig zu tun. Genau an diesem Punkt setzt Dr!ft an. Realistische Fahrphysik auf freier Rennstrecke Bei den Dri!ft-Autos handelt es sich um Modelle im Maßstab 1:43, die über eine realistische Fahrphysik verfügen sollen. Die Steuerung erfolgt über ein Smartphone, das per Bluetooth in Verbindung mit den Racern steht. Als Fahrer stehen Euch Gas, Fußbremse, Handbremse und die Lenkung sowie Zusatzfunktionen wie Licht, Starten und Stoppen des Motors zur Verfügung. Eure Fahrkünste haben also deutlich mehr Auswirkungen auf den Rennverlauf als bei Anki Overdrive. Die grüne Sonderedition gibt es nur bei Kickstarter. (© 2016 Sturmkind GmbH) Mit Beleuchtung für 24-Stunden-Rennen. (© 2016 Sturmkind GmbH) Die Steuerung erfolgt über die App auf dem Smartphone. (© 2016 Sturmkind GmbH) Bei Dr!ft ist Euer Fahrkönnen gefragt. (© 2016 Sturmkind GmbH) Smudo von den Fantastischen Vier hat seinen Spaß. (© 2016 Sturmkind GmbH) Mit einer Akkuladung sollen die Dr!ft-Racer 30 Minuten lang fahren können, bevor sie für rund 30 Minuten wieder an die Steckdose müssen. Ihr seid bei den Rennen nicht an eine feste Strecke oder spezielle Streckenbauteile gebunden. Die Mini-Flitzer sollen auf allen ebenen Untergründen wie Tischplatten, Holzböden, Fliesen oder sogar Flügeldeckeln fahren können. Ihr könnt Eurer Kreativität beim Streckenbau also fast freien Lauf lassen. Ihr sollt mit zehn oder auch sogar 30 anderen Autos auf die Rennstrecke gehen können. Theoretisch sollte das bei geeigneter Umgebung möglich sein, aber die Entwickler haben selber noch gar nicht genug Prototypen, um so ein großes Rennen zu starten. Für die Zukunft können sie sich vorstellen weiteres Zubehör, Tuning-Teile und Modellvarianten realer Autos anzubieten. Ob und wie schnell das geht, hängt auch vom Erfolg des Kickstarter-Projekts ab, das bereits 30 Tage vor dem Ende sein Ziel von 100.000 Euro geknackt hat. Preis und Verfügbarkeit Bei Kickstarter könnt Ihr Dr!ft noch bis zum 30. Dezember unterstützen. Je nachdem, wie schnell Ihr zuschlagt, erhaltet Ihr ein Rennauto für 129, 139 oder 149 Euro. Damit sind die Dr!ft-Autos zwar teurer als die Supercars von Anki Overdrive, aber dafür müsst Ihr auch keine speziellen Streckenteile zusätzlich kaufen. Die Auslieferung soll im August 2017 erfolgen.

Aktuelle News

Oh nein, nicht schon wieder…

Der ein oder andere erinnert sich vielleicht noch an die Schwachstelle in der Fritz!Box Firmware 2014. Damals wurden tausende SIP-Zugangsdaten, Logins für die Weboberfläche sowie die MyFritz! Zugangsdaten entwendet. Natürlich waren auch viele sipgate Kunden betroffen. Heute Nacht, fast drei Jahre später, spüren wir immer noch Nachwehen dieses Vorfalls.

Was genau ist passiert?

21 sipgate basic Kunden wurden die SIP-Zugangsdaten entwendet und missbraucht. MyFritz! ist eine Funktion, die es dem Besitzer ermöglicht, seine Box unter einem eigenen Namen von überall zu administrieren. Das Ändern dieses Passworts kann leicht vergessen werden (oft wird der Dienst getestet und danach vergessen). Aus diesem Grund kann es passieren, dass damals gehackte Fritz!Boxen, trotz aktueller Firmware und neuem Passwort für die Benutzeroberfläche immer noch angreifbar sind; und genau das ist heute Nacht passiert. Die betroffenen Geräte sind völlig verschiedene Modelle (7270, 7390, 6360, 7490, 7330).
Der Vorgang war immer gleich. Zuerst ein Testanruf in die USA, danach so viele Anrufe in eine teure lettische Mobilfunkgasse bis das Gesprächsguthaben aufgebraucht war. Um die Calls abzusetzen, nutzen der oder die Täter Softphones (eyeBeam und VaxSIP) sowie einen (vermutlich gehackten) Asterisk Server. Dabei registrierten wir IPs aus den USA, UK und Tschechien. Der Gesamtschaden beläuft sich auf 590 EUR.

Was ist zu tun?

Alle betroffenen Kunden wurden umgehend von uns informiert und gebeten folgende Schritte durchzuführen:

1. Aktuelle Firmware aufspielen
2. Neues Passwort für die Benutzeroberfläche der Fritz!Box vergeben
3. Neues Passwort für MyFritz! bzw. dieses deaktivieren (wenn es nicht gebraucht wird)
4. Neue SIP-Zugangsdaten im eingeloggten Bereich generieren lassen und in der Fritz!Box konfigurieren

An dieser Stelle möchten wir noch einmal alle Fritz!Box Benutzer dafür sensibilisieren, nicht genutzte Dienste zu deaktivieren und von Zeit zu Zeit die Passwörter zu ändern.

 

Der Beitrag 2014…da war doch was mit Fritz!Boxen? erschien zuerst auf Willkommen im sipgate blog.

Am Wochenende haben sie wieder einen erwischt. 26 Jahre alt. Auf der Bundesstraße 301 in der Nähe von Freising. Der Mann hatte eigentlich nichts angestellt. Keinen Unfall verursacht. Nichts getrunken. Keine Drogen im Blut. Aber irgendwas war da. Das spürten die Polizisten. Irgendetwas, das die Kollegen aus der Pressestelle sehr glücklich machen würde. Auch das ahnten sie.

Kurz darauf hielten sie den Wagen an. Und tatsächlich, es war, wie sie vermutet hatten. Ihr Verdacht bestätigte sich. Die Kollegen aus der Pressestelle brachen am Telefon in Jubel aus. Sie versprachen, bei der Weihnachtsfeier am Freitag dafür einen auszugeben. Dann legten sie auf und machten sich an die Arbeit. Endlich konnten sie den Journalisten das liefern, was die unbedingt haben wollten: Meldungen von Menschen, die ohne Führerschein Auto fahren:

Die Nachricht fiel kurz aus. Dem Mann war sonst wirklich nichts vorzuwerfen. Schade eigentlich, fand man in der Pressestelle. Da hatten die Kollegen in Oldenburg anderthalb Wochen zuvor mehr Glück gehabt. Und sie hatten nicht mal jemanden anhalten müssen. Der Mann war zu ihnen gekommen. Er hatte sich am Eingang gemeldet und dabei gleich zugegeben, dass er gar nicht mit dem Auto hätte fahren dürfen. Den gierigen Journalisten hätte das bestimmt schon gereicht. Aber dann erzählte der Mann auch noch, dass er gekommen sei, um sich bei der Polizei zu bewerben. Kurz danach stellte sich heraus, dass er auch noch Drogen genommen hatte. Ein Hauptgewinn:

Als Polizei-Pressesprecher erlebt man so etwas nicht alle Tage. Als Journalist schon gar nicht. Dabei sind Menschen, die ohne Führerschein ein Auto in Bewegung setzen, eigentlich gar nicht so selten. Es kommt sogar öfter vor, dass die fehlende Fahrerlaubnis gar nicht das einzige Problem ist:

Oder noch besser:

Es muss gar nicht zwingend Alkohol sein:

Die Journalisten nehmen ja alles. Der Fahrer kann auch stocknüchtern sein. Dann braucht er eben ein anderes Problem:

Und sei es nur ein kleines:

Am besten ist natürlich, wenn alles zusammenkommt:

Journalisten kriegen nie genug von dem Zeug. Sie müssen nur das Wort „Führerschein“ lesen, schon läuft ihnen der Speichel aus dem Mundwinkel.

Auf der Journalistenschule haben sie gelernt: Eine Nachricht muss wie ein Küchenzuruf sein. Jemand ruft aus dem Esszimmer in die Küche, und gleich erscheint ein Kopf zwischen den Türrahmen und fragt ungläubig: „Wirklich?“ Ein Satz, der alle Aufmerksamkeit an sich reißt — das ist ein Küchenzuruf. Und wenn „Autofahrer fährt ohne Führerschein“ keiner sein soll, dann weiß man’s wirklich auch nicht mehr.

Das kann jeder zu Hause ausprobieren. Abends aus dem Esszimmer ein paar Neuigkeiten in die Küche rufen. Aber immer dran denken: Wichtig ist der Führerschein. Ohne den kann man’s vergessen. Den Satz „Mann fährt jahrelang ohne Verbandskasten“ kann man in die Küche rufen, so oft man will. Da erscheint zwischen den Türrahmen niemand.

Wobei — das muss man dazusagen — man immer Pech haben kann. Führerschein hin oder her. Der Mensch gewöhnt sich an alles sehr schnell. Und wer ständig die gleichen Geschichten in die Küche ruft, darf sich nicht wundern, wenn irgendwann niemand mehr da ist, der antworten könnte.

Das wissen natürlich auch die Journalisten. Sie haben sich längst darauf eingestellt. Irgendwann haben sie sich an einen Tisch gesetzt und zusammen über die Frage nachgedacht: „Wie fesseln wir eigentlich sonst unsere Leser?“

Ratlose Gesichter sahen sich an, bis irgendwer zögerlich fragte: „Mit Meldungen über Jubiläen und runde Geburtstage?“

„Genau. Mit Meldungen über Jubiläen und runde Geburtstag“, sagte der Chefredakteur.

Die anderen nickten. Seitdem wenden sie das Prinzip auch auf die Führerschein–Meldungen an:

Ab dem 40. Jahr — viele wissen das gar nicht — überreichen die Polizisten bei der Kontrolle eine Flasche Sekt:

Ab dem 50. Champagner:

Und ab dem 55. trinken sie sogar mit. Daher ist dieser Fall in den Archiven kaum dokumentiert, denn nach dem gemeinsamen Umtrunk kommt es oft gar nicht mehr zu einer Meldung an die Pressestelle.

Die Journalisten — das sollte man hier auch noch erwähnen — stoßen in der Redaktion schon ab dem fünften Jubiläum mit einem Prosecco an. Wahrscheinlich erklärt das überhaupt erst die große Begeisterung für die Führerschein-Meldungen.

Beim 60. Jubiläum öffnen sie schon nach der Mittagspause eine Flasche Schnaps. Und vielleicht ist das dann eine Erklärung für diese Gewichtung:

The following is a guest post by Pieter Biesemans. Pieter is a front-end developer at Audience where he loves styling things with SCSS. He's going to dig into what I'd call a bonafide CSS trick.

The web is a rather vertical place. You read a web site like you read a physical page: left to right, top to bottom. But sometimes, you want to step away from the verticality of it all and do something crazy: make a horizontal list. Or even crazier, a horizontal site!

I’d be nice if we could do something like this:

/* This isn't real */
div {
  scroll-direction: horizontal;
}

Unfortunately, that’s not going to happen. It’s not even on the roadmap for CSS.

That's too bad, as at the company I work for this would be quite useful. We do quite a few web presentations. Presentations are a very horizontal thing - usually slides have a 4:3 or 16:9 radius. This means we always have a struggle between the horizontality of presentations and the verticality of web technologies. And by we, I mean me. But if there’s one thing I like, it’s a challenge.

Another Use Case

The specific use case that led to me digging into this idea that a customer wanted to show all their products on a single slide. Of course, their product catalog was way too big to put in a single view. So we decided to split them up into three categories, each horizontally scrollable. So the three most prominent product in each category were visible and less important products were still easily accessible.

A Non-JavaScript Way

There are, no surprise, numerous ways to do this in JavaScript. Some of them are on this very site.

I was curious if it was possible to do in pure CSS. The solution ended up being fairly straightforward:

• Create a container with items
• Rotate the container 90 degrees counterclockwise so the bottom is to the right
• Rotate the items back to correct-side up

Step 1) Set up the container

Make a <div>, and make a bunch of child elements.

In this example, our side-scrolling container will be 300px wide, with 8 items of 100×100px each. These are arbitrary sizes; they could be anything.

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

The height of the container will become the "width" and vice-versa. So below, the "width" of our container will be 300px:

.horizontal-scroll-wrapper {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

Now the children:

.horizontal-scroll-wrapper > div {
  width: 100px;
  height: 100px;
}

Step 2) Rotating the container

Now we rotate the container -90 degrees with a CSS transform. And there you have it: a horizontal scroller.

.horizontal-scroll-wrapper {
  ...
  transform: rotate(-90deg);
  transform-origin: right top;
}

There’s just one tiny issue: our children have rotated too, and now anything within is on its side.

Step 3) Rotate the children back upright

How would we go about getting the children upright again? Rotate them back using another, opposite CSS transform.

.horizontal-scroll-wrapper > div {
  ...
  transform: rotate(90deg);
  transform-origin: right top;
}

Step 4) Fixing the positioning

It’s starting to look alright, but there are still some issues.

By rotating the wrapper using the top right as an anchor point, our left side has shifted by the width of the container. If you find this difficult to understand, just put your finger on the top right corner of a page and rotate it. The solution: shift it back with translateY.

Better. But the first item is still missing, due to the same phenomenon happening to the items. We could fix this by giving the first child a top margin of its width or by translating all items the same way we did the wrapper. The easiest way I’ve found though is to add a top padding to the wrapper equal to the item width, creating a kind of buffer for the items.

.horizontal-scroll-wrapper {
  ...
  transform:rotate(-90deg) translateY(-100px);
  ...
}

Demo

See the Pen Horizontal scroll (simple example) by Pieter Biesemans (@pieter-biesemans) on CodePen.

Here's another where you can see non-square children:

See the Pen Horizontal scroll (extensive example) by Pieter Biesemans (@pieter-biesemans) on CodePen.

Compatibility

I have tested on the devices immediately available to me.

Device	OS	Browser	works?
Desktop	Win10	Chrome 54	Y
Desktop	Win10	Firefox 47	Y (w scrollbars)
Desktop	Win10	IE11	Y (w scrollbars)
Desktop	Win10	Opera 41	Y
Desktop	Win10	Vivaldi 1.4	Y
Laptop (touch screen)	Win10	Chrome 54	N
Samsung Galaxy S3	Android 4.3	Chrome Mobile 52	Y
Samsung Galaxy S6	Android 5.0	Chrome Mobile 52	Y
Nexus 6P	Android 6	Chrome Mobile 52	Y
iPad2	iOS	Chrome Mobile 52	N
iPad2	iOS	Safari Mobile 9.0	N
iPad Air 2	iOS	Safari Mobile 9.0	N

Desktop

Since the styling of scrollbars is currently only supported by WebKit/Blink, Firefox and IE still show the ugly gray ones. You could sniff this out with JavaScript and hide them completely, but that’s stuff for another tutorial.

Using the mouse scroll wheel works great on desktops. My laptop was a different matter, though. Both the touchscreen and the touchpad acted as though the div was not rotated.

Mobile

I was kind of surprised to find that Android actually understood that the container had been rotated, and let you scroll sideways by swiping left and right.

iOS on the other hand did not play nice. It acted like the container did not get rotated, so you have to swipe up and down to scroll sideways, which of course is counterintuitive. Also, swiping left and right moves the items up and down in their wrapper, which is unexpected and weird. Setting the overflow to hidden does not alleviate this issue.

Conclusion

According to Can I Use, CSS transforms are currently supported by over 93% of users (at the time of this writing, November 2016), so there’s no issue there.

Beware of using this in production, though. I have tested this on some devices, but not at all extensively or in depth.

The greatest issue is with touch inputs that requiring you to swipe up and down to go left and right. A possible solution would be to include a message on your site explaining this, but you’d have to rely on people actually reading your message. And even then it’d still be counterintuitive. Another possible solution would be to capture the touch input with JavaScript on those devices, but then you’d be better off just doing the whole thing in JavaScript and foregoing this CSS hack completely.

Pure CSS Horizontal Scrolling is a post from CSS-Tricks