Aufbau eines CSS Files

Wieso?

Eine einheitliche und saubere Struktur bei einem CSS File, sowie auch bei jedem anderen Code ist kein Hexenwerk, vereinfacht jedem das Lesen und sorgt für eine deutlich bessere Übersicht.
Bei Webseiten kann man sich zwischen dem Mobile- oder Desktop-First Ansatz entscheiden. Hier wird der Mobile-First Ansatz verwendet.

Struktur

• Definition der lokalen Variablen (in dem größten umschließenden "Container")

  .container:local {
    --headline-font-size: 16px;
    --headline-line-height: 24px;
  

...

Example Action

Action types werden über enums typisiert.

import { Action } from 'redux';

export const key = 'general';

export enum StartActionTypes {
  START = 'START'
}

export function start() {
  return {
    type: StartActionTypes.START,
  };
}

export interface StartAction extends Action {
    type: StartActionTypes;
}

Example Reducer

Jeder Reducer definiert seinen eigenen State-Type und nutzt den definierten Action-Type aus der entsprechenden action.ts.

import { StartAction, StartActionTypes } from './actions';

...

JSON Dateien können mit folgendem Code typisiert werden (als any).

typings.d.ts

declare module “*.json” {
    const value: any;
    export default value;
}

Um TypeScript zu verwenden, kann nach dieser Anleitung gegangen werden.

Hinweise:

• Zum Hinzufügen von TypseScript im Projekt muss yarn installiert sein
• js werden zu ts Dateien, falls mit JSX dann werden sie zu tsx.

Browser ViewController
Zuerst legt man einen eigenen ViewController für die Browser View an. Dieser ruft lediglich die Website auf und wird dafür genutzt um die Navigation Bar zu customizen und um auf Websiten mit goBack() zu navigieren. Die Webview kann als Fullscreen View hinzugefügt werden.

class BrowserViewController: UIViewController {
init(url: URL, title: String) {
        self.url = url
        webView = UIWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        webVi...

Verschiedene Schemes in React-Native einrichten

Mehrere Versionen einer App einzurichten, benötigt einige Anpassungen in Android Studio und Xcode. Außerdem wird react-native-schemes-manager benötigt.
Die Einrichtung erfolgt nach dieser Medium Anleitung.

Appdafuer Naming Konvention: Appname-Server.[Debug/Release]
Debug: JS Dateien auf dem Rechner.
Release: JS Dateien in der App / auf dem Handy.

Die Einrichtung für iOS kann unter [diesem Vi...

Zuerst fügt man eine Scroll View mit einem Frame in der Größe des Bildschirms hinzu.

scrollView = UIScrollView(frame: view.bounds)
scrollView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
scrollView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(scrollView)

Die Konstanten der Leading-, Trailing, Top- und Bottom-Constraints werden auf 0 zur Superview gesetzt. Anschließend erstellt man eine Container View, die eine Subview der Scroll View ist und eine Stack View, die eine Subview der Container View ist...

Problem

Wenn man unter developer.apple.com unter Devices eine neue UDID hinzugfügt, wird sie in der Regel zu den automatisch von Xcode erstellten Provisioning Profiles hinzugefügt. Man kann sich aber nie ganz sicher sein, ob das lokale Provisioning Profile jetzt schon aktualisiert wurde oder nicht.

Lösung

Mit dem Quicklook Addon ProvisionQL kann man sich das lokale Profil nochmal ansehen und überprüfen ob die UDID hinterlegt ist.
Dazu klickt man in Xcode unter Project neben dem Provisio...

Hier erfahrt Ihr, wie Ihr euch ein cooles Terminal mit tollen Tools zusammenbauen könnt.

In Prinzip folgt der Aufbau folgender Anleitung, welche auf GitHub zu finden ist.

What Terminal is Felix Using

Jedoch weicht die Einrichtung des Tools 'z', welches ich nur ausdrücklich empfehlen kann, von der Anleitung ab. Dieses kann nämlich ganz ei...

Neues React-Native Projekt erstellen

1. Schritt - Projekt ziehen.

• Das Initialisieren eines Projekts beinhaltet viel Boilerplate Code. Deswegen gibt es ein Appdafuer Starter Projekt. Clone also das React Native Starter Projekt von GitLab.

2. Schritt - Updaten der Dependencies

• Das Startprojekt sollte eigentlich aktuell sein, aber dies sollte nochmals vor Projektbeginn überprüft werden. Ist die React-Native Version die aktuelle? Gibt es eine neue Version von React-Navigation? ...

Man lässt die Versionsnummer in den iOS und Android Projekten unangetastet.

Die Versionsnummer wird nur in der package.json version geupdated.

Das Deployment der App sollte nur über den Continious Integration Server passieren.

Dieser liest in seinem fastfile die Versionsnummer aus der package.json und setzt sie in den jeweiligen Projects:

iOS:

fastfile

    package_json = load_json(json_path: "../package.json")

    increment_version_number(
      version_number: package_json['version']
    )
    
    increment_build_number(buil...