Stefan Feser

Front-end Developer

I am a freelance front-end developer based in Stuttgart, Germany. I love traveling and working remotely, photography and surfing. I'm also a lecturer at SAE Institute.

Follow me on Twitter, Instagram or GitHub

CREANDUM website

Front-end development for the relaunch of CREANDUM.com


Kleenup Webinterface

kleenup_leistung_hinzufuegen
Umsetzung des Webinterfaces für Kleenup – Die Software-Lösung für Gebäudereinigungsunternehmen im Auftrag von fortyone. Das Webinterface wurde als Single Page Application mit AngularJS entwickelt.


SAE Stuttgart Infoscreen

infoscreen-sae

Umsetzung des Front-ends mit ReactJS für den Infoscreens des SAE Stuttgarts.


JimDrive Magazin

jimdrive-magazin

Umsetzung des JimDrive Magazin Templates und Integration in bestehende WordPress Webseite.


JimDrive Landingpages

jimdrive-landing

Umsetzung verschiedener Landingpages für JimDrive mit Integration in bestehende WordPress Webseite. Die einzelnen Bereiche sind im Backend via Visual Composer editierbar und können beliebig eingesetzt werden.


VanillaJS webapp starterkit

Checkout my personal VanillaJS web app to kickstart a new app (Github).

I’m playing around with ES2015, Babel and Gulp. I don’t use any components or frameworks in this repository. (Only VanillaJS).
I’m trying to update it regularly. Feel free to use and modify it.

 

Components / Dev dependencies

There are already some basic components included:

  • Normalize-SCSS
  • Gulp

I use SASS as CSS Preprocessor.

 

Installation

You need to have Bower, Gulp and npm installed.

 

1.) Clone this repository:

git clone git@github.com:StefanFeser/basic-webapp.git cd basic-webapp 

 

2.) Install Bower components

bower install 

 

3.) Install Gulp modules/tasks

npm install 

 

4.) Inject Bower components in index.html

gulp bower-install 

 

5.) Run Gulp

gulp 

 

That’s it! If you have any questions feel free to get in touch.


Webseite Enztalsauna Besigheim

Enztalsauna Besigheim Webseite

Umsetzung des Internetauftritt der Enztalsauna Besigheim


alphaEOS Preiskonfigurator

alphaeos

Umsetzung des Preiskonfigurators und Integration in bestehende Webseite im Auftrag von hatchery.io


WordPress Webseite Meinheizstrom.de

meinheizstrom

Umsetzung des Front-Ends der Webseite meinheizstrom.de im Auftrag der E.VITA GmbH

  • Erstellung eines individuellen WordPress Themes
  • Tarifrechner und Bestellprozess in AngularJS (AngularJS Integration in WordPress)
  • Anbindung an REST API

Schichtplan Modul für SAE Intranet

sae-intranet-shiftschedule

Entwicklung des Front-Ends für den Schichtplan/Urlaubsplaner des SAE Institute Stuttgart.


Unterwegs arbeiten als Webentwickler

workremotely

Es ist schon etwas länger her, dass ich meinen letzten Blogartikel geschrieben habe. Wenn man hier etwas runter scrollt, dann sieht man hauptsächlich Bilder von den verschiedenen Plätzen, an denen ich mich in den letzten Jahren herumgetrieben habe.

Ich surfe extrem gerne und wer die geografische Lage von Europa im Kopf hat, der kann erahnen, dass es gar nicht so einfach ist, in Deutschland Wellen zu finden.
Deswegen ist surfen meistens mit Reisen verbunden.
Arbeiten und andere Verpflichtungen machen es nicht leichter, dem Ganzen nachzugehen.

Da ich zudem meinen Job als Webentwickler liebe, versuche ich seit längerer Zeit schon diese Dinge miteinander zu verbinden.

Aktuell sitze ich auf Sri Lanka in einem kleinen „Coffee Point“ circa 50 Meter vom Strand entfernt. Seit zwei Monaten bin ich unterwegs und surfe, arbeite und genieße die warmen Temperaturen. In diesen zwei Monaten habe ich einiges an Erfahrungen gesammelt, was das remote Arbeiten auf Sri Lanka oder Bali betrifft und diese Erfahrungen möchte ich hier mit der Welt teilen.

 

Digitale Nomade?

Ich würde mich selbst nicht als digitale Nomade bezeichnen. Ich finde es für mich wichtig meine Homebase in Deutschland zu haben und werde das vorerst auch nicht ändern.

Wer also einen Artikel darüber erwartet, wie man zu Hause alles aufgibt, um in der Welt herum zutingeln, den muss ich leider enttäuschen. Dazu gibt es anderswo lesenswerte Seiten (Nomadslist) und Blogartikel (Travelistly).

Das remote Arbeiten muss auch nicht unbedingt auf einer exotischen Insel passieren. Viele meiner Aufträge laufen schon immer ohne jeglichen persönlichen Kontakt ab. Ich arbeite derzeit für Agenturen, Startups und an diversen anderen Projekten. Alles was ich quasi dazu benötige ist mein Laptop und Internet. Wo wir auch beim wichtigsten Punkt wären.

 

Getting Online

Für viele Dinge, die mit meiner Arbeit zu tun haben, benötige ich schnelles, zuverlässiges Internet. WIFI im Hotel, Flughafen oder der schönen Strandbar ist entweder unverschämt teuer oder reicht gerade aus, um ein „Ich lebe noch“ an die Eltern via Whats App zu schicken.
Hier auf Sri Lanka ist es aktuell noch sehr schwierig gut funktionierendes Internet zu finden. Die meisten öffentlichen WIFIs werden über Router angeboten, die das Mobilfunknetz nutzen. Sobald mehr als 3 Leute ihren Facebook Feed checken, kann man es quasi vergessen damit zu arbeiten.

Die Lösung:
Zum nächsten Handyladen fahren (Tuk Tuk – 2€) und sich eine eigene Prepaid Mobilfunk Simkarte ergattern. Für 11 GB Datenvolumen habe ich gerade mal umgerechnet 12€ gezahlt. In dreieinhalb Wochen mit normalen Surf- und Arbeitsverhalten wurden davon 6 GB verbraucht. Und selbst wenn das Datenvolumen aufgebraucht ist, kann man es dank Prepaid einfach wieder aufladen.

Die Verbindung reicht für die meisten Dinge auch souverän aus. Die komplette Insel ist zugepflastert mit Mobilfunkmasten, was einem auch direkt am Strand angenehme 3G Geschwindigkeit ermöglicht.

Dasselbe gilt auch für Bali. Hier gibt es 8 GB Datenvolumen für ca. 10€ mit wirklich guten LTE. Die Karten kann man an fast jedem Straßenstand kaufen, ohne seinen Reisepass vorzeigen zu müssen.
Voraussetzung für das Ganze ist natürlich ein simlockfreies(!) Handy, das Tethering kann, um via persönlichen Hotspot auch mit dem Laptop online gehen zu können.

So kann man ziemlich gut online arbeiten, egal wo man sich gerade befindet. Bali hat natürlich deutlich mehr Plätze oder Cafes, die gutes WIFI anbieten, sowie diverse Coworking Spaces.

 

Remote Webentwicklung

Dennoch sollte man einige Dinge schon im Voraus beachten, wenn es um die Entwicklung geht. (Achtung jetzt wirds etwas spezifisch. Wer nur Bahnhof versteht, kann ja solange ein paar Bilder von Sri Lanka anschauen).

Das Internet ist nicht immer hundertprozentig zuverlässig. Auch kann ein Tropenregen die Verbindung für einige Zeit einfach mal unbrauchbar machen.

Ich empfehle deswegen jedem, der von unterwegs Webseiten, Apps, APIs o.ä. entwickeln möchte, sich vor dem Trip (oder an einem Platz mit schnellen Internet) eine gute offline Entwicklungsumgebung einzurichten.

Wir verwenden hierfür meistens Vagrant. Vagrant ermöglicht eine komplette, reproduzierbare Entwicklungsumgebung lokal auf dem eigenen Rechner. Somit haben alle Entwickler die selbe Umgebung mit allen wichtigen Dingen wie API, Datenbank etc. zur Verfügung.

Dadurch funktioniert es auch ohne Internet wunderbar. Wichtig ist nur, alles schon im Voraus zu installieren. So einen kompletten Serverstack via 3G herunterzuladen, macht definitiv keinen Spass.

Bei einem anderen Projekt waren die REST API und verschiedene Assets nur online verfügbar. Dadurch ist es manchmal gar nicht so einfach daran zu arbeiten.

 

Für mich als Front-end Entwickler ist es enorm wichtig die Webseiten in den unterschiedlichen Browsern zu testen und ggf. Bugs zu debuggen. Da ich Mac User bin, wird das Testen im Internet Explorer ziemlich schwer von unterwegs. Wer keinen zusätzlichen Laptop mitschleppen möchte und sich wie ich auch nicht Parallels oder ähnliches installieren will, dem kann ich Browserstack.com empfehlen. Hier funktioniert das Testen in den unterschiedlichen Browsern auch von unterwegs wunderbar.

 

srilanka-madiha

Arbeitsplatz

Das Arbeiten in der Hängematte, Strandliege oder an der Strandbar macht Spass und ist verlockend, kann aber auf Dauer ziemlich unbequem und vermutlich auch ungesund werden.
Natürlich sollte man beim Reisen immer so wenig wie möglich einpacken. Trotzdem empfehle ich hier lieber drei Unterhosen und T-Shirts weniger einzupacken, und dafür Bluetooth Maus, mobile Tastatur und einen guten, transportablen Laptopständer im Gepäck zu haben. Euer Rücken wird es euch danken.
Ein paar weitere Dinge, die euch das Finden des schönsten Arbeitsplatzes erleichtern:

  • langes Ladekabel (Mac) oder eben gleich ein mobiles Verlängerungskabel. Man glaubt gar nicht wie wenig Steckdosen so Palmen haben.
  • rudimentäre Putzutensilien, um den Laptop fresh & clean zu halten. Das Salz in der Luft bringt die (USB) Ports gerne mal zum Rosten.
  • genügend SD-Karten, um Daten abzulegen. SD Karten sind mittlerweile so klein und können trotzdem so viel Daten speichern. Besser als jede erschütterungsempfindliche, externe Festplatte.

Kommunikation

Dass die Kommunikation mit dem Team oder Kunden das Wichtigste überhaupt ist, sollte eigentlich jedem klar sein. Da draussen finden sich zu haufen Artikel, die sich genau mit diesem Thema beschäftigen.
Ein paar Erfahrungswerte bekommt ihr aber trotzdem.

Wenn man im Ausland arbeitet, kann die Zeitverschiebung die Kommunikation in großen Teilen beeinflussen. Sri Lanka ist 4 1/2 (ja 1/2, warum auch immer) Stunden voraus, was wirklich sehr angenehm ist. Man kann morgens noch 2 Stunden surfen gehen, etwas in der Hängematte relaxen oder im besten Fall voraus arbeiten, bis die ersten E-Mails von zu Hause eintreffen.

Bali wiederum ist 7 Stunden voraus, was ich als eher unpraktisch empfand. Dadurch ist man häufig noch spät abends am Skypen oder E-Mails beantworten.

 

Wie schon erwähnt gibt es unzählige Tools, die einem das remote Arbeiten und Kommunizieren deutlich leichter machen. Hier meine Favoriten:

  • Slack (wers nicht kennt hat die letzten Monate verschlafen)
  • Skype: Erstaunlich gute Sprachqualität im ausländischen Mobilfunknetz. In Deutschland habe ich immer das Gefühl, dass Skype und Mobilfunk sich noch nicht richtig vertragen. Zusätzlich nutze ich Skype, um die unverschämt hohen Roaming Gebühren zu umgehen und habe eine Skype Nummer, um auch im Ausland telefonisch erreichbar zu sein.
  • Projektmanagement Tools / Ticketsysteme sind unerlässlich für eine reibungslose Kommunikation und Arbeitsteilung. Durch die Tickets weiß man leicht, wer was gerade macht und wer was wann gemacht hat.
  • Zusätzlich verknüpfe ich gerne die Tools miteinander. Ticketsystem mit Gitrepository, Git mit Slack usw.
  • Redbooth, Github Issues, Trello um ein paar zu nennen.

Diese Methoden sind für viele Agenturen und Entwicklerteams natürlich nichts neues. Dennoch findet man häufig noch Arbeitsweisen und Kommunikationskanäle, mit denen man sich selbst im Weg steht. Nur E-Mail oder Google Drive sind einfach keine sinnvolle Lösung für ein gutes Projektmanagement.

 

Backups

Last but not least sind natürlich – wie zu Hause auch – die Backups extrem wichtig. In vielen Ländern stehen Handys, Laptops & Co ganz oben auf der Diebstahlliste. Mir ist zum Glück bisher noch nichts in der Richtung passiert. Dennoch hört man immer wieder Geschichten von gestohlenen Laptops o.ä.

Passiert so etwas fünf Tage vor Projektlaunch, kann das ganz schön kritisch werden.

Aus diesem Grund lege ich meine wichtigsten Dokumente, Dateien und Projekte immer zusätzlich noch mal irgendwo online ab, um im worst case auch von einem anderen Rechner darauf zugreifen zu können.

Tools wie Dropbox, Synology Cloudstation, Git uvm. ermöglichen das Ganze ohne großartigen Mehraufwand und geben letztendlich ein besseres Gefühl, wenn man die Geräte mal im Appartement/Hostel oder sonst wo zurücklässt.

Eine gute Elektroversicherung, die auch bei Diebstahl im Ausland greift, ist zusätzlich eine gute Idee.

 

Der nächste Trip ist schon wieder in Planung und ich werde versuchen wieder häufiger über solche Dinge zu berichten.

Bis dahin freue ich mich über Feedback oder eure Erfahrungswerte zum remote Arbeiten.


Intranet Web Application für SAE Institute

sae-intranet-1

sae-intranet-2

Entwicklung des Front-Ends für das Intranet des SAE Institute Stuttgart.

Die Webapplication basiert auf AngularJS und kommuniziert mit dem Backend via RESTFul API


Landingpage für Flug XXX

flugxxx


3filmnerds.de

Deutscher Film-Blog: Spoilerfreie Reviews und Kritiken. Aktuell oder etwas älter, Mainstream oder Arthaus-Kino.

3filmnerds


CPM Sindelfingen

Konzeption, Design und Umsetzung der Webseite von CPM Gesellschaft für Projektmanagement in Sindelfingen.

cpm-sifi


Mönig Immobilien

Konzeption, Templateentwicklung und Umsetzung der Webseite von Mönig Immobilien.

mönig


Paymill – The Payment Engineers

Bei der Entstehung der Webseite von Paymill.com war ich als Frontend Entwickler für die Umsetzung des Userinterfaces tätig.

paymill-500x312

Auftraggeber: Paymill GmbH / Rocket-Internet

Zeitraum: Juli 2012 – Dezember 2012


Flowinmedia.de

flowinmedia


SAE Institute Landingpage

Umsetzung der deutschen Landingpage des SAE Institute.

sae-landingpage-500x281


Art-JAMS.com

Art-JAMS.com ist eine Kreativ-Community für Bilder, Texte und Videos. Die Webseite enstand als Studentenprojekt an der SAE München.

art-jams-500x312

Aufgaben:
Meine Aufgaben bestanden in der Projektleitung, Konzeption und Design der Webseite, sowie die technische Umsetzung in Zusammenarbeit mit Gabriel Wettinger.

Auftraggeber: Art-JAMS Team


Roxburry Hoodies

Umsetzung der Webseite von Roxburry.net – Oversized Hoodies for skiing and snowboarding.

roxburry-490x306