Autor: paul

Mobile First: Wie ging das noch mal in echt mit der Entwicklung aufm Smartphone – als Erstes?

Level 1: Das kann jeder – Browser „klein ziehen“

Die einfachste Variante ist das Browser Fenster „schmal“ ziehen, das gibt einen ersten Eindruck, so müsste man dann auch anfangen, wenn man „Mobile First“ entwickeln will.

Level 2: Google Chrome Developer Tools

device-toolbar-google-chrome-dev-tools

In den Chrome Developer Tools kann auch auf eine (emulierte) mobile Sicht umschalten, bei Bedarf sogar mit „Geräterahmen“ für das Auge, ich glaube Chrome setzt auch den User Agent etc korrekt in diesem Modus.

Level 3: Echtes Endgerät

mobile-first-entwicklung-iphone

Das mobile Gerät (in meinem Fall iPhone 5S) liegt vor einem, ich garantiere, es gibt immer etwas, das findet man nur „auf dem echten Gerät“.

Tipp: Damit der iPhone (iPad) Screen nicht immer nach ein paar Minuten zum Strom sparen ausgeht über Einstellungen -> Anzeige & Helligkeit -> Automatische Sperre -> Nie die Funktion ausstellen.

2017-05-12 17.27.13

 

Tipp2: Wer mit echtem Gerät bzw. echten Geräten direkt vor Ort arbeitet, dem empfehle ich BrowserSync, das automatisch die Seite nach einer Änderung (HTML, CSS oder JavaScript) neulädt, scrollen und clicks zwischen allen Clients syncron hält.

Was habe ich vergessen?

Die Emulatoren, welches Level sind die?

 

Laravel Mix: Analyze Webpack Bundle Size

npm install webpack-bundle-analyzer --save-dev

In „webpack.mix.js“ require the new module

const BundleAnalyzerPlugin = require('webpack-bundle analyzer').BundleAnalyzerPlugin;

Still inside „webpack.mix.js“ use mix.webpackConfig() to dynamically merge the new plugin into the default mix Webpack config:

// Custom webpack config
mix.webpackConfig({
    plugins: [
        new BundleAnalyzerPlugin()
    ]
});

Build the assets

npm run dev

webpack-bundle-analyzer will run and open the result of the analysis at http://127.0.0.1:8888/ on your local machine.

Two more Tipp´s

On the command line use „npm list“ to get an overview about your package tree.

Use „mix.extract()“ to seperate often chaning sources from the ones which will be not so likely to change (vendor etc).

Laravel Homestead mit PHP 7.0

Ihr wollt eine Laravel Homestead Virtual Box mit PHP70 zum Laufen bekommen? Dann ist diese Anleitung wie für euch gemacht, los gehts:

Ist Virtualbox installiert?

vboxmanage -v

Ist Vagrant installiert?

vagrant -v

Ins Homeverzeichnis wechseln

cd ~

Dann das Homestead Git Repository clonen in den Ordner „Homestead-php70“

git clone https://github.com/laravel/homestead.git Homestead-php70

In den „Homestead-php70“ Ordner wechseln

cd Homestead-php70

Den „v3.1.0“ Branch auschecken

git checkout v3.1.0

„init.sh“ Script ausführen

bash init.sh

Die Homestead Version per „version: 0.6.0“ downgraden, dass passiert in der Datei „~/.homestead/Homestead.yaml“. Info: Neuere Homestead Versionen erwarten die Datei „Homestead.yaml“ direkt im Pfad des lokalen Git Repositories und  nicht mehr unter „~/.homestead/Homestead.yaml“.

nano ~/.homestead/Homestead.yaml

So soll „~/.homestead/Homestead.yaml“ für PHP 7.0 aussehen:

ip: "192.168.10.20" # Change ip to avoid conflicts with already running boxes
memory: 4096 # Increase RAM for the box
cpus: 1 
provider: virtualbox 
version: 0.6.0
name: "homestead-php70" # use -php70 suffix to avoid naming conflicts with existing boxes

Danach im Ordner „~/Homestead-php70“ Homestead starten

vagrant up

Quellen

  • https://laravel-news.com/using-older-versions-of-homestead
  • https://laravel.com/docs/5.4/homestead

Homestead Subdomain Configuration

The following 3 preconditions must be fulfilled so that Homestead will work with a subdomain setup

  1. The subdomain resolves to the correct VM guest IP (edit your hosts file)
  2. In Homestead.yaml there is an according entry under „sites“ which maps the subdomain to the correct document root dir
  3. Nginx listen to the subdomain (Servername)

WordPress: Clear floating image with editor button

When you have a floating image and text, where its height is less then the floated image high, following content will also float around the image.

A solution is to use an element which clears the float before the following content.

For a editor friendly solution I propose the following steps:

  1. There is the ClearBoth plugin which replaces the shortcode „[clearboth]“ with a „br“ element with clearing.
  2. Use Visual Editor Custom Buttons to add a new button to the editor which adds the „[clearboth]“ shortcode into the editor

 

iOS 10.2: Share Route in Apple Maps

A somehow hacky way to use the location in calendar events or contacts in google maps app:

  1. Tap the address, Apple maps opens
  2. Tap route 
  3. Tap your favorite route (not the green „Go“ Button)
  4. Scroll to bottom
  5. Tap „share“
  6. Tap „Route-Apps“
  7. Tap „route“ behind google maps

Mobile Safari: Unreliable click events (iOS iPad iPhone)

Problem

I experienced problems with an unreliable click event on iPad / iPhone when the element which has an „onClick“ function is not an anchor element.

Solution

After switching from a „div“ element to an „a“ element the „onClick“ functions works fine.

In depth info here https://github.com/facebook/react/issues/134

Concerned Stack

  • React
  • Zurb Foundation Sites
    • in this case: div element with „.button“ class
  • Mobile Safari

Die Plenitude Economy

Unsere Welt ist stressig und an vielen Stellen ungerecht. Das Geld reicht vorne und hinten nicht und die Arbeit wächst uns über den Kopf. Nebenbei beuten wir die Umwelt immer mehr aus, sodass die Rohstoffe knapp werden und die Umweltverschmutzung immer weiter zunimmt. Doch was können wir dagegen tun? Das center for a new American dream (https://www.newdream.org/) hat darauf eine klare Antwort: Plenitude Economy. Was das genau ist, erklären sie in einem anschaulichen Video (https://youtu.be/HR-YrD_KB0M). Das Ziel des Konzepts ist es, neue Lösungen und Modelle einer zukunftsfähigen Entwicklung zu präsentieren, die unser Leben der verbessern sollen.

Sowohl in den USA als auch in vielen Ländern Europas ist Arbeitslosigkeit ein großes Thema. Des Weiteren wird der soziale Spalt immer größer – die Reichen werden immer reicher und die Armen immer ärmer. Die Politik reagiert auf diese Entwicklungen mit einer Expansion der Industrie. Doch damit einher geht eine stärkere Belastung der Umwelt und eine höhere Ausbeutung der Ressourcen. Somit ersetzen wir ein Problem mit dem nächsten. Doch das kann nicht die Lösung sein. Nach der Plenitude Economy gibt es einen besseren Weg, bei dem man umweltbewusst agieren und parallel Arbeitsplätze schaffen kann.

Die Grundlage des Konzepts ist es, seine Zeit grundlegend anders zu gestalten. Wir verbringen einen Großteil unseres Lebens auf der Arbeit. Diese hohe Belastung führt zu Stress, Unwohlsein und Krankheiten. Würden wir alle weniger arbeiten, würden mehr Stellen frei sein und wir hätten gleichzeitig mehr Kapazität, uns um wichtigere Dinge zu kümmern. Da wir natürlich auch weniger Geld verdienen würden, würde es sich anbieten, sich mit DIY (do it yourself) Projekten zu beschäftigen. Das ist zum einen umweltfreundlich, fördert unsere kreative Ader und spart jede Menge Geld ein. Ein weiterer Punkt ist das soziale Miteinander. Hat man mehr Freizeit, setzt man sich stärker mit den Nachbarn auseinander und formt eine soziale Gemeinschaft. Es entwickeln sich sharing-Konzepte und man spart Ressourcen, indem man soziales Kapital aufbaut.

vgu

Im Grunde beschreibt das Konzept Plenitude Economy Verantwortung für unseren Lebensstil zu übernehmen und Respekt gegenüber unseren Mitmenschen und der Umwelt zu zeigen, um unser aller Leben besser werden zu lassen.