instant-thinking.de

just enough to get you started and leave you confused

QuickLinks vom 29. August bis zum 09. Oktober

| Kommentare

Meine pinboard.in-Links vom 29. August bis zum 09. Oktober:

  • 1Password Anywhere for Chromebook - is a Chrome Extension for 1Password Anywhere use on Chromebooks. 1Password Anywhere for Chromebook uses the 1Password Anywhere feature. The gist is if your 1Password keychain lives in Dropbox, you can open an HTML file that will give you access to your 1Password data.
  • Kitchenplan - is a small tool to fully automate the installation and configuration of an OSX workstation (or server for that matter) using Chef. But while doing so manually is not a trivial undertaking, Kitchenplan has abstracted away all the hard parts.
  • PirateBox - is a DIY anonymous offline file-sharing and communications system built with free software and inexpensive off-the-shelf hardware. PirateBox creates offline wireless networks designed for anonymous file sharing, chatting, message boarding, and media streaming. You can think of it as your very own portable offline Internet in a box!
  • Localhomepage - A local home page for OS X web development. This is a small and simple local home page that automatically lists, and provides links to, your local sites.
  • Pencil - is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. A collection of flowchart shapes are also available for drawing diagrams.
  • wasavi - is an extension for Chrome, Opera and Firefox. wasavi transforms TEXTAREA element of any page into a VI editor, so you can edit the text in VI. wasavi supports almost all VI commands and some ex commands.
  • wendy - (W)atch (ENT)ire (D)irector(Y) is an inotify-based directory watcher. With wendy, you can watch event in a directory or on a file, and launch a specific command when an event occurs. The program is made the moire simple possible, to leave the room to unlimited uses. Be creative!
  • Chartist - You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.
  • MDwiki - is a CMS/Wiki completely built in HTML5/Javascript and runs 100% on the client. No special software installation or server side processing is required. Just upload the mdwiki.html shipped with MDwiki into the same directory as your markdown files and you are good to go!
  • Brackets - is a free open-source editor written in HTML, CSS, and Javascript with a primary focus on Web Development. It supports inline editing and live updates to Chrome of HTML, CSS and Javascript changes. It was created by Adobe Systems, licensed under the MIT License, and is currently maintained on GitHub. Brackets is available for cross-platform download on Mac, Windows, and Linux

Mit Javascript einen simplen, webbasierten Spielautomaten programmieren

| Kommentare

Es gibt viele Programmiersprachen in denen man einen einfachen Spielautomaten bauen kann. Die wohl am besten geeignete Sprache ist aber vermutlich Javascript. Mit Javascript kann das Spiel sowohl butterweiche Animation erhalten, als auch einfach auf verschiedene Plattformen portiert werden.

In diesem Post schauen wir uns zunächst an, wie ein Spielautomat funktioniert. Unter dem Namen Sittman and Pitt werden schon seit 1891 Spielautomaten betrieben. Seitdem haben sich Spielautomaten konstant weiterentwickelt um den Ansprüchen der modernen Spieler gerecht zu werden. Durch diese Entwicklung sind Spielautomaten nach wie vor eine der beliebtesten Freizeitbeschäftigungen der Welt.

Cryptologic, die Firma die das erste Online Kasino, InterCasino, seit 1996 besitzt, arbeitet immer noch weiter an der Site und hat die verfügbaren Spiele kürzlich auf HTML5 aufgerüstet um ein größeres Publikum zu erreichen. Der Code in diesem Post wird kein so schönes Ergebnis hervorbringen wie die Spiele der Firmen die sich auf das online gaming spezialisiert haben, aber dennoch ein Gerüst bieten mit dem gezeigt werden kann, wie ein online Spielautomat mit Javascript funktioniert.

Folgend befindet sich ein von Saurabh Odhyan erstelltes Spielautomaten-Tutorial. Ihre Lösung benutzt vor allem jQuery und verschiedene Plugins für die Animationen.

Odhyans Programm besteht aus einem Sprite, das den Spielautomaten in Bewegung bringt, drei Rädern und einem Button um die Räder zu drehen.

1
2
3
4
5
6
7
function Slot(el, max, step) {
    this.speed = 0; //speed of the slot at any point of time
    this.step = step; //speed will increase at this rate
    this.si = null; //holds setInterval object for the given slot
    this.el = el; //dom element of the slot
    this.maxSpeed = max; //max speed this slot can have
}

Der Automat wird vier Funktionen haben: Start, Stop, Anzeige der finalen Position eines Rades und Reset.

  • start() – Startet ein Rad
  • stop() – Stoppt ein Rad
  • finalPos() – Findet die Endposition des Rades wenn gestoppt wurde
  • reset() – Reset für die nächste Runde

Dann müssen noch je ein Objekt für jedes Rad und Werte für die Geschwindigkeit der Drehungen erstellt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var a = new Slot('#slot1', 30, 1),
    b = new Slot('#slot2', 45, 2),
    c = new Slot('#slot3', 70, 3);

Slot.prototype.start = function() {
    var _this = this;
    $(_this.el).addClass('motion');
    $(_this.el).spStart();
    _this.si = window.setInterval(function() {
        if(_this.speed < _this.maxSpeed) {
            _this.speed += _this.step;
            $(_this.el).spSpeed(_this.speed);
        }
    }, 100);
};

Slot.prototype.stop = function() {
    var _this = this,
        limit = 30;
    clearInterval(_this.si);
    _this.si = window.setInterval(function() {
        if(_this.speed > limit) {
            _this.speed -= _this.step;
            $(_this.el).spSpeed(_this.speed);
        }
        if(_this.speed <= limit) {
            _this.finalPos(_this.el);
            $(_this.el).spSpeed(0);
            $(_this.el).spStop();
            clearInterval(_this.si);
            $(_this.el).removeClass('motion');
            _this.speed = 0;
        }
    }, 100);
};

Nachdem die Räder langsamer geworden sind wird ihre Endposition anhand der aktuellen Position berechnet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Slot.prototype.finalPos = function() {
    var el = this.el,
        pos,
        posMin = 2000000000,
        best,
        bgPos,
        i,
        j,
        k;

    el_id = $(el).attr('id');
    pos = document.getElementById(el_id).style.backgroundPosition;
    pos = pos.split(' ')[1];
    pos = parseInt(pos, 10);

    for(i = 0; i < posArr.length; i++) {
        for(j = 0;;j++) {
            k = posArr[i] + (imgHeight * j);
            if(k > pos) {
                if((k - pos) < posMin) {
                    posMin = k - pos;
                    best = k;
                }
                break;
            }
        }
    }

    best += imgHeight + 4;
    bgPos = "0 " + best + "px";
    $(el).animate({
        backgroundPosition:"(" + bgPos + ")"
    }, {
        duration: 200
    });
};

Um das fertige Ergebnis der Autorin zu sehen klicke hier. Außerdem stehen die im Code benutzten Bilder auf dieser Seite zum Download bereit. Für die Animation dieses Spiels wurde Spritely benutzt, das Programm kann hier heruntergeladen werden.

QuickLinks vom 30. Juli bis zum 28. August

| Kommentare

Meine pinboard.in-Links vom 30. Juli bis zum 28. August:

  • Pollen - is a publishing system that helps authors create beautiful and functional web-based books. Pollen includes tools for writing, designing, programming, testing, and publishing.
  • A Soft Murmur - Ambient sounds to wash away distraction. A Soft Murmur uses HTML5 audio with jQuery and jQuery Mobile. It should work in most modern web browsers. It will not work in Safari on iOS (iPhones and iPads) due to limited support for HTML5 audio.
  • The best part of playing Solitaire - is the Solitaire effect.
  • Übersicht - lets you run system commands and display their output on your desktop in little containers, called widgets. Widgets are written using HTML5, which means theyare easy to write and customize, can show data in tables, charts, graphs … you name it, can react to different screen sizes.
  • nemex - is a tiny app that helps you to track and curate ideas and projects. It’s self-hosted and based on markdown.
  • Quassel IRC - is a modern, cross-platform, distributed IRC client, meaning that one (or multiple) client(s) can attach to and detach from a central core – much like the popular combination of screen and a text-based IRC client such as WeeChat, but graphical. In addition to this unique feature, we aim to bring a pleasurable, comfortable chatting experience to all major platforms (including Linux, Windows, and MacOS X as well as Android smartphones), making communication with your peers not only convenient, but also ubiquitous available.
  • Comskip - is a free mpeg commercial detector. It is a windows console application that reads a mpeg file and analyses the content based on a large amount of configurable parameters. After analysis it generates a file in various possible formats containing the location of the commercials inside the mpeg file.
  • Glowing Bear - is an HTML5 web frontend for WeeChat that strives to be a modern and slick interface. It relies on WeeChat to do all the heavy lifting (connections, servers, history, etc) and then provides some nice features on top of that, like content embedding (images, video) and desktop notifications. The main advantage, though, is that you can access it from any modern internet device without having to worry about ssh connections or terminal emulators.
  • flappyvird - by Yasuhiro Matsumoto is a version of Flappy Bird for Vim. To play it, type :FlappyVird, and then press space to jump. It’s an exquisite work of ASCII art, complete with a Japanese-style emoticon for the bird.
  • Streisand - sets up a new server running L2TP/IPsec, OpenSSH, OpenVPN, Shadowsocks, Stunnel, and a Tor bridge. Either locally or on your favourite cloud host. It also generates custom configuration instructions for all of these services. At the end of the run you are given an HTML file with instructions that can be shared with friends, family members, and fellow activists.

Raubtier Tyrannosaurus Rex

| Kommentare

Der Sohn und ich betrachteten verschiedene Dinosaurier in einem Prospekt der Firma Schleich und unterhielten uns über deren Einordnung in Herbivoren und Karnivoren1. Es entspann sich bei der Betrachtung der oben stehenden Seite in etwa2 der folgende Dialog:

  • Linus: Das ist ein Pflanzenfresser. Weil er Pflanzen frisst.
  • Dennis: Ja, genau. Wie eine Kuh.
  • Linus: Ja, wie eine große Kuh! Mit großen Hörnern!
  • Dennis: Richtig.
  • Linus: Und wie heißt der?
  • Dennis: Das ist ein Tyrannosaurus Rex.
  • Linus: Und das ist ein Fleischfresser. Ein Raubtier!
  • Dennis: Ja, da hast du Recht.
  • Linus: Weil, der frisst nämlich Raupen!
  • Dennis:

Kinder sind das allercoolste…

  1. Seit dieser Szene aus Jurassic Park nenne ich die aber eigentlich immer Vegetarosaurier und Fleischosaurier. Auch die menschlichen Ausgaben, stets ein großer Spaß…

  2. Dies ist ein Gedächtnisprotokoll…

QuickLinks vom 06. Juni bis zum 30. Juli

| Kommentare

Meine pinboard.in-Links vom 06. Juni bis zum 30. Juli:

  • Git-ftp - is a FTP client using Git to determine which local files to upload or which files should be deleted on the remote host. It saves the deployed state by uploading the SHA1 hash in the .git-ftp.log file. There is no need for Git to be installed on the remote host.
  • CSVfix - If you have any dealings at all with data and databases, then you almost certainly will have to deal with comma-separated values (CSV) data. Unfortunately, the CSV files you are given, or are required to produce, never seem to be in quite the right format for your particular business application. And because of the structure of CSV records, using standard text processing tools like sed, awk and perl is not as simple as it might be. CSVfix aims to provide a solution to these problems. It is a command-line stream editor specifically designed to deal with CSV data.
  • Hyperion - is an opensource ‘AmbiLight’ implementation controlled using the RaspBerry Pi running Raspbmc.
  • daemonize - runs a command as a Unix daemon. As defined in W. Richard Stevens’ 1990 book, UNIX Network Programming (Addison-Wesley, 1990), a daemon is “a process that executes ‘in the background’ (i.e., without an associated terminal or login shell) either waiting for some event to occur, or waiting to perform some specified task on a periodic basis.”
  • AirSonos - is a small server written in node.js to add AirPlay support to a Sonos network.
  • Gitblit - is an open-source, pure Java stack for managing, viewing, and serving Git repositories. It’s designed primarily as a tool for small workgroups who want to host centralized repositories.
  • Pixel Winch - is a screen measurement app with a unique approach. Rather than overlaying complicated controls on top of your existing workflow, it combines aspects of a traditional image editor with the quick access of a modal interface (similar to OS X’s Launchpad or Dashboard).
  • Babun - is a Windows shell you will love. Would you like to use a linux-like console on a Windows host without a lot of fuzz? Try out babun!
  • XKeymacs - is a keyboard utility to realize emacs like-useability on all windows applications. With XKeymacs you can use emacs keybindings with any windows application. You can create a keyboard macro and assign any shortcut key too. You also get bash-like command completion in your DOS shell. If you do not know Emacs, Xemacs, Mule or Meadow, you probably want nothing to do with XKeymacs.
  • osxc - installs software on your mac and configures it automatically, just by writing a few lines of code. Lost everything on your hard drive? osxc got your back, don’t waste your time reinstalling your dev environment. Want to experiment new configuration? just try it, your configuration repository is versioned.

MacBook Pro mit einer SSD aufrüsten: Speed Baby!

| Kommentare

Mein Computer ist ein Apple MacBook Pro (early 2011) mit hochauflösendem 15” AntiGlare Display, einer 2 GHz Intel Core i7 CPU und 8 GB RAM. Das ist auf dem Papier so weit immer noch eine schnelle Maschine.

In der Praxis wird das Gesamtsystem allerdings durch die verbaute 500 GB Toshiba-Festplatte mit 5400 RPM ausgebremst. Und zwar nicht zu knapp.

Die Messung mit dem Black Magic Disk Speed Test ergibt auch sehr wohlwollend betrachtet lediglich schlappe 40 Megabyte/s im Lesen und so gerade eben 28 Megabyte/s im Schreiben.

Die Festplatte nutzt die verfügbaren 6 Gigabit/s Bandbreite1 des internen SATA 3 Anschlusses also nicht wirklich aus…

Gerade bei Vorgängen die auf viele, relativ kleine Dateien auf der Platte zurückgreifen, dreht die CPU Däumchen während sie auf die Anlieferung der Datenhäppchen wartet. Das sind bei mir vor allem:

Insbesondere dann, wenn Arbeit mit dem Fotoarchiv und ein2 gleichzeitiger Backuplauf zusammenkamen, war eine angemessene Schwuppdizität in egal welchem Programm kaum mehr zu erzielen.

Glücklicherweise ist der Festplatte als Flaschenhals relativ einfach beizukommen: Man ersetze sie schlicht mit einer SSD. Diese auf Flash-Speicher basierenden Laufwerke sind Festplatten in allen technischen Belangen, vor allem aber bei der Zugriffsgeschwindigkeit, überlegen. Dafür sind Festplatten, besonders wenn man Kapazitäten ab 500 GB betrachtet, um Größenordnungen billiger.

Alternativ hätte ich natürlich eine günstigere, kleinere SSD mit ca. 128-256 GB erwerben können und dann sehr mit meinen Daten haushalten3. Oder die Festplatte mit einem OptiBay-Adapter anstelle des Superdrives in das MacBook Pro einbauen und dort die großen Daten, also in meinem Fall vor allem das Fotoarchiv, lagern. Das erschien mir aber wie eine unvollständige Lösung des Problems, ich wollte gerne alle Daten auf schnellem Flash-Speicher liegen haben.

Nach einigen Jahren4 der Marktbeobachtung habe ich mich nun bei nur ganz knapp über 200 € für eine 500 GB große Samsung 840 evo SSD entschieden. Und ich bin mit diesem Stück Hardware sehr glücklich.

Um es tl;dr-kurz zu machen: Alles was die Leute über SSDs sagen ist wahr. Hat man einmal an einem SSD-basierten System gearbeitet, so gibt es kein Zurück mehr. Never ever will ich noch mal mit einem Computer arbeiten, dessen OS auf rotierenden, magnetischen Scheiben liegt5. Die SSD ist meiner Meinung nach das beste und sinnvollste singuläre Hardware-Upgrade für Computer seit den seeligen Zeiten der 3D-Beschleuniger-Karten anno 1995. Yes, it’s that good.

Wie glücklich genau eine SSD macht, wie die SSD in das MacBook kam und wie meine Daten von den magnetischen Scheiben in die Flash-Zellen übertragen wurden, das alles folgt nach dem Klick…

QuickLinks vom 10. April bis zum 06. Juni

| Kommentare

Meine pinboard.in-Links vom 10. April bis zum 06. Juni:

  • Cloudmarks - is a Safari extension that works with cloud bookmarking services Pinboard, Delicious, Kippt, and Google Bookmarks. Cloudmarks lets you access your cloud bookmarks in a convenient popover window without interrupting your browsing.
  • contacts - gives you access to view and search all your records in the AddressBook database.
  • OpenRefine - is a power tool that allows you to load data, understand it, clean it up, reconcile it to master database, and augment it with data coming from Freebase or other web sources. All with the comfort and privacy of your own computer.
  • cliutils - is a library of functionality designed to alleviate common tasks and headaches when developing command-line (CLI) apps in Ruby.
  • GitBook - is a command line tool (and Node.js library) for building beautiful programming books and exercises using GitHub/Git and Markdown. An editor is available for Windows, Mac and Linux.
  • Fuck Off As A Service (FOAAS) - provides a modern, RESTful, scalable solution to the common problem of telling people to fuck off.
  • DynaHack - A NetHack variant with UnNetHack’s new content/challenges, NitroHack’s UI, GruntHack’s random magical items, and more.
  • play - is an employee-powered iTunes-based client-driven distributed music server for your office. Also it can prepare your taxes.
  • iTunes-Volume-Control - This app allows you to control the iTunes volume using volume up and volume down hotkeys.
  • Tumult Hype - Using Tumult Hype, you can create beautiful HTML5 web content. Interactive content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.

Hochzeitstag

| Kommentare

Heute vor vier Jahren haben Kathi und ich geheiratet.

Ich wünsche der besten Ehefrau der Welt und mir eine wundervolle seidene Hochzeit1 und freue mich auf das nächste Jahr im aufregenden Hafen der Ehe.

  1. Es gibt wirklich wunderliche Listen im Internet…

QuickLinks vom 17. März bis zum 09. April

| Kommentare

Meine pinboard.in-Links vom 17. März bis zum 09. April:

  • dategrep - searches the named input files for lines matching a date range and prints them to stdout. If dategrep works on a seekable file, it can do a binary search to find the first and last line to print pretty efficiently. dategrep can also read from stdin if one the filename arguments is just a hyphen, but in this case it has to parse every single line which will be slower.
  • Normbrief mit Markdown - Mit diesem Stylesheet (CSS) kann man mittels Markdown private Briefe oder auch Geschäftsbriefe verfassen. Dabei wird das Anschriftsfenster von Briefumschlägen berücksichtigt. Der Briefkopf mit Bank- und Kontaktdaten erscheint in einer zweiten Spalte.
  • Comic Neue - Comic Sans wasn’t designed to be the world’s most ubiquitous casual typeface1. Comic Neue aspires to be the casual script choice for everyone including the typographically savvy. The squashed, wonky, and weird glyphs of Comic Sans have been beaten into shape while maintaining the honesty that made Comic Sans so popular. It’s perfect as a display face, for marking up comments, and writing passive aggressive office memos.
  • TreeSheets - is the ultimate replacement for spreadsheets, mind mappers, outliners, PIMs, text editors and small databases. Suitable for any kind of data organization, such as Todo lists, calendars, project management, brainstorming, organizing ideas, planning, requirements gathering, presentation of information, etc.
  • AltDrag - gives you the ability to move and resize your windows in a new way. When running, you can simply keep the Alt key depressed and then click and drag any window. Besides just moving windows, you can resize, maximize and close them too. AltDrag simply allows you to do more with less mouse movements.
  • Tabula - is a tool for liberating data tables trapped inside PDF files. If you’ve ever tried to do anything with data provided to you in PDFs, you know how painful this is - you can’t easily copy-and-paste rows of data out of PDF files. Tabula allows you to extract that data in CSV format, through a simple interface.
  • fzf - is a general-purpose fuzzy finder for your shell.
  • wkline - is a WebKit-based statusline utility for tiling window managers. It displays a HTML-based statusline in a WebKit web view. It provides a smooth looking statusline with CSS transitions and effects, and the possibility of having a transparent background with effects without a desktop compositor running.
  • After Dark in CSS - Do you longingly reminisce about the days when flying toasters graced your screen? Do words like “Confetti Factory” and “Daredevil Dan” make your heart skip a beat? If so, then never fear — CSS is here! Using modern CSS techniques like animations and transforms, we can imitate several of your favorite After Dark(tm) screensavers.
  • httpie - is a command line HTTP client. Its goal is to make CLI interaction with web services as human-friendly as possible. It provides a simple http command that allows for sending arbitrary HTTP requests using a simple and natural syntax, and displays colorized responses. HTTPie can be used for testing, debugging, and generally interacting with HTTP servers.