DEV Community: André Hatlo-Johansen

Vim - The ultimate text editor?

André Hatlo-Johansen — Mon, 28 Mar 2022 14:07:37 +0000

Vim

Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as "vi" with most UNIX systems and with Apple macOS.

Installation

Because we want an addon thats called You complete me, we cant use the standard vim that comes with the macbook pro.

To install the latest version, use homebrew:

brew install vim

Set the following infront of your path so when you use vim <file> it will open the version you just installed via homebrew.

In .zshrc copy it should look something like this:

export PATH="/usr/local/bin:$PATH

Now you have vim with python 8 so you can use all the features of your normal text editor in vim.

The Ultimate vimrc

The Ultimate vimrc is a collection of vimrc configurations to make easy the usage of vim.

To download the The Ultimate vimrc, you need to install the git client. If you need install it, use home brew:

brew install git

Now, download the vimrc files:

git clone https://github.com/amix/vimrc.git ~/.vim_runtime

To install the complete version, run:

sh ~/.vim_runtime/install_awesome_vimrc.sh

To install the basic version, run:

sh ~/.vim_runtime/install_basic_vimrc.sh

Developer || Slave

André Hatlo-Johansen — Mon, 28 Mar 2022 07:46:20 +0000

Grinding gears as a developer.

I've always wanted to know and build, ever since i was a child and first heard about a kid that built the web based game Mafia back in the late 90's using Javascript.

You have a motivation behind the actual part of you that is dreaming for the ultimate lego game, which in turn created me as a developer.

Now i can create and build WHATEVER I WANT! But most of the time that is not the case. Since development is a group based activity, because of bad libraries/code and novice examples that explain nothing but the basis of how you use them and hours of googling to find hacks. Making a developer slave away on his keyboard for hours on end, trying to create something he or she has baked in their mind.

Nothing is as tedious as banging your head on a keyboard, not getting the results you want when building your ultimate lego project.

This is when the burn in burnout starts as in a developer, pushing him self to the brink of madness trying to achieve something, anything which can show that he actually can call himself a developer.

Going through project on project from create-react-app to create-eth-app to create-next-app and just so much libraries to choose both to fetch data and to format data a developer, its like being a whole marathon at once only to be standing still on a treadmill, gliding into a public repo Narnia hell just hoping to complete something so simple set in their mind.

This is my take on developing personal projects. This is why i give up my personal projects and will be giving the job market another chance to shine light where i need it.

Give me a job which has a flexible work hours where i can focus my hours on work rather than hours on pay.

Give me a job that has both in house and remote options.

Give me a job which is innovating, creative and where you have the freedom to take a nap if your head is on fire.

We are all biological machines, we need sun, air, freedom and good food to create optimal code.

Code comes from the mind, where both freedom and curiosity lives.

Give your peers the freedom to take your software to new highs, because the freedom we have is the freedom we make.

Strict rules results in shitty and tightly bound spagetti code, drop mic.

And give all your developers MAC's and nothing else.

The workflow is like the natural thought process, easy and exciting at the same time.

Your very best the create engine-ere - André

GIT Command - Overwrite Trick

André Hatlo-Johansen — Mon, 28 Mar 2022 07:43:03 +0000

A short post to all those who have difficulty with repository hell. This Git command parts the sea, brings peace and makes the local repository die for your sins.

Especially in IntelliJ i was faced with this issue numerous times, not being able to switch branches without going through some kind of satanic IntelliJ ritual of saving the repo changes to a shelf.

The solution is here:

Force overwrite of local files from remote repository:

$ git fetch --all
$ git reset --hard origin/master

To download changes from some other branch

Use the following command:

$ git reset --hard origin/<insert_other_branch>

Git fetch downloads latest updates from remote, but doesn't merge or rebase in local files.

Thank the lord! The repo is resurrected back to its stable form!

Want to know more, check out the Git cheat sheet here!

IntelliJ IDE - Productivity Tricks

André Hatlo-Johansen — Mon, 28 Mar 2022 07:40:27 +0000

IntelliJ Tricks to boost productivity

IntelliJ is a smart IDE used to code Java/Scala/Kotlin. It uses something called Jetbrains to almost code for you. Here is my favorite summery of keyboard shortcuts which made me WAY more productive in this heavy IDE.

Moving the cursor

One word at a time:
- Ctrl + Cursor
Move cursor to beginning of line:
- Home
Move cursor to end of line:
- End

Moving the lines

Move line up:
- Shift + Alt + Up
Move line down:
- Shift + Alt + Down

Format code

Duplicate line:
- Ctrl + D
Delete line:
- Ctrl + Y
Parameter info:
- Ctrl + P
Comment out selected line:
- Ctrl + /
Comment out code block:
- Shift + Ctrl + /
Fold code block:
- Shift + Ctrl + -/+

Navigate through code

To class:
- Ctrl + N
To file:
- Shift + Ctrl + N
To symbol:
- Shift + Ctrl + Alt + N
Go back:
- Shift + Ctrl + <-/->
Find action:
- Shift + Ctrl + A
Search everywhere
- Searches classes/files/symbols/actions)
- Use tab to jump to type
- Shift + Shift

The Nr 1 Productivity killer

File tabs

When using intelliJ you collect file tabs of previous files you have looked through or coded in.

This makes for bad productivity since you would have to pause your work and close the tabs one by one.

Instead! Disable tabs and use the recent files function!

In the find action, search for "tabs placement"
Disable "tabs placement"
Then use the following shortcut to navigate your recent files:

Recent files
- Ctrl + E
- Search in recent files by writing the filename of the file you desire to look/work on.
Recent edited files:
- Shift + Ctrl + E

Code selection

Select line
- Shift + Home/End
Select words
- Shift + Ctrl + <-/->
Select characters
- Shift + <-/->
Extending selection
- Ctrl + W
Shrinking selection
- Shift + Ctrl + W

Code completion

Envoking smart code completion:
- Shift + Ctrl + Space
- Most usefull:
- After the new keyword in an object declaration
- In the list of parameters of a method call
- In return statements
- Shift + Ctrl + Space Twice
- Invokes smart code which completes:
- Static expressions
- Collections, lists and arrays
Static method completion:
- Ctrl + Space + Ctrl + Space

Postfix completion

What is postfix expressions?

Postfix notation is used to represent algebraic expressions.

Example:

public class PostFixCompletion {
    void method(Collection<String> s) {
        // Postfix expression:
        if (s == null) {
            //...
        }
    }
}

The method method takes in a colleciton of string s.
By writing s. then using the postfix completion shortcut: Ctrl + J
Will bring up a list of postfix expressions to choose.
Filter the list by writing:

nn / null -> Checks expression to be null.
notnull -> Checks expression to be not-null.
synchronized -> Produces synchronization statement.
try -> Inserts statement in try-catch block.
for -> Iterates over enumerable collection.
fori -> Iterates with index over collection
forr -> Iterates with index in reverse order.

Code Generation

Getter & Setter methods

Alt + Insert

Stub test, setUp, tearDown methods

Alt + Insert

Version Control tricks

Commiting changes:

Ctrl + K
- Brings up the built inn commit interface

Commit flow:

Inside the commit interface, the focus starts in the commit message box.

Write your commit message.
Go to your change list:

Shift + Tab

See the differance in a file:

Ctrl + D
Changes here are automatically sent to the change set.
Press Esc key to leave diff view.

Revert changes in a file:

Ctrl + Alt + Z
tab to the revert button
Press Enter key to confirm revert file.

Before commit actions:

Select to perform task before commit.

Press Tab button to move the focus to the Commit button
- Press Enter

VC Popup Menu

Get a popup list of alle VC operations directly from a keyboard shortcut
- Alt + Back Quote
Each list item is accociated with a number which you can access by pressing on your keyboard.
When selecting branch, search by typing in your search word.
- Intellij will automatically filter the branch list as your typing.

Reformat:

Tab to move selection one tab stop to the right
Shift + Tab to move selection one tab stop to the left
Ctrl + Alt + L to reformat current selection or current file
Ctrl + W to extend selection
Alt + 1 to move focus to the project tool window

TIP!

Use Ctrl + W to expand selection, then Ctrl + Alt + L to reformat the code.

Optimaizing imports

Imports can get messy when coding, which leads to libraries included that are not used.
This can be solved easily by using the optimizing imports shortcut:;

Ctrl + Alt + O

Optimize imports on the fly

When this is activated, intellij automatically changes and optimizes the imports as you code.

Shift + Ctrl + A to open the Actions popup search field.
Search for "optimizing imports on the fly" and activate it.

Only optimize imports on commited files

Ctrl + K to bring up the commit interface.
Select Optimize imports in the before commit field.
Select Commit

Navigate to Compilation Error

When compiling an application in IntelliJ you will receive errors in the event log.
Instead of using the mouse to click the error that will send you to the errors location, simply do this:

After a compilation error.
Press Esc.
Press Ctrl + Alt + Down to move to next error.
Press Ctrl + Alt + Up to move back to the previous error.
Then press Esc to move to the error location.

Bonus

Language injection

Other's

MultiCursor

ctrl + ctrl (hold last ctrl and move cursor)

Reactive Data Streams - quick rxJava Summary

André Hatlo-Johansen — Mon, 28 Mar 2022 07:36:43 +0000

Inspired by the (Reactive movement - manifesto)[https://www.reactivemanifesto.org/], rxJava is an implementation of Reactive Stream specification created by Netflix. Reactive streams is a concept for handling data streams asynchronous.

It is built by Netflix to be able to effectively reduce network chattiness. Their goal with rxJava is to allow the client to invoke a single "heavy" client request that is executed in parallel on the server.

Its concept is based on an Observable/Iterable type and Subscribing on these to send data streams async.

The following notes are not explained in high detail. Since in the process of writing this i switched to the Reactor library, because of upgrading to Spring Boot 2, which needs Java 8 and rxJava only runs Java 6. Both are based on a similar concept but different in structure.

Observable / Iterable

Observable data type can be thought of as a "push" equivaltent to Iterable which is "pull".

Iterable data type pulls values from the producer and the thread blocks until those values arrive.

The producer pushes values to the consumer whenever values are available.

Which creates an approach which is more flexible, because values can arrive synchronously or async.

`Observable` type

Adds two missing semantiqcs which are present in the Iterable type:

Producer can signal to the consumer that there is no more data available.
Producer can signal to the consumer that an error har occured.

This makes Observable and Iterable unified.

The only difference is the direction which the data flows.

Always return Observable, always request Iterable.

Creating an Observable from existing Data structures

From existing data structures:
Use the Observable just() and from() methods to convert objects, lists, or arrays of objects into Observables that can emit those objects.


Observable<String> o = Observable.from("a","b","c");

// Inserting a list into an observable
def list = [5,6,7,8]
Observable<Integer> o = Observable.from(list);

//
Observable<String> o = Observable.just("one object");

Creating an Observable via the `create()` method

Via the create() method, you can implement async i/o, computational operations, or even 'infinite' streams of data by designing your own Observable.

Synchronous Observable example:

Custom Observable that blocks when subscribed to (does not spawn an extra thread)

def customObservableBlocking() {
    return Observable.create(
        { aSub ->
            for (int i=0; i<50; i++) {
                if (false == aSub.isUnsubscribed()) {
                    aSub.onNext("value_" + i);
                };
        }
        // after sending all values we complete the sequence
        if (false == aSub.isUnsubscribed()) {
            aSub.onCompleted();
        }
    });
}

// Output:
customObservableBlocking().sub({ it -> println(it); });

Asynchronous Observable example:

Observable that emits 75 strings.
Doesn't block when subscribed to as it spawns a separate thread.

def customObservableNonBlocking() {
    return Observable.create(
        { sub ->
            final Thread t = new Thread(new Runnable() {
                void run() {
                    for (int i = 0; i < 75; i++) {
                        if (true == sub.isUnsubscribed()) {
                            return;
                        }
                        sub.onNext("value_" + i);
                    }
                    if (false == sub.isUnsubscribed())
                }
            });
            t.start();
        }
    );
}
// Output:
customObservableNonBlocking().sub({ println(it) })

Fetch a list of Wiki articles async, in Groovy:

def fetchWikiArticleAsync(String... wikiArticleNames) {
    return Observable.create({ sub ->
        Thread.start( {
            for (articleName in wikiArticleNames) {
                if (true == sub.isUnsubscribed()) {
                    return;
                }
                sub.onNext(new URL("http://en.wikipedia.org/wiki/" + articleName).getText());
            }
            if (false == sub.isUnsubscribed()) {
                sub.onCompleted();
            }
        });
        return(sub);
    });
}

// Output:
fetchWikiArticleAsync("Tiger", "Elephant")
    .sub({println "--- Article ---\n" + it.substring(0, 125); });

Transforming Observables with Operatiors

Chain operators together to transform and compose Observables
Async call customObservableNonBlock with chaining:

def simpleComposition() {
    customObservableNonBlocking().skip(10).take(5)
        .map({ stringValue -> return stringValue + "_xform" })
        .subscribe({ println "onNext => " + it })
}

skip(10) - Jumps to the 10th value
take(5) - Grabs the 5 next values
map(...) - maps each value and concatenates stringValue with _xform => $stringValue_xform
subscribe(...) - returns the mapped values with onNext => concatenated

This is an early rxJava summery. Switching to the reactor library instead, the concepts are the same but structured differently/more simply and accepts Java 8.

More information about rxJava, check it out here: (HERE)[https://github.com/ReactiveX/RxJava]

React Native: Boilerplates overview

André Hatlo-Johansen — Mon, 28 Mar 2022 07:34:07 +0000

It can take a few weeks (if not months) getting started with React Native, can boilerplates give a jump start to mobile development? And if so, which are the best?

There are three boilerplates worth considering:

Ignitee - 9,375 stars
Pepperoni App Kit - 4,453 stars
Snowflake - 4,399 stars

We will be taking a closer look at the most popular of them all, the ignite boilerplate.

Ignitee CLI

Ignite is now the 'hottest' CLI for React Native.

It includes boilerplates, plugins, generators and more.

Ignite requires a Node version of 7.6+ minimum, check your version by running:

node -v

Install Yarn for your system.

Then run the following commands to add the ignite-cli and to create your ignite boilerplate.

$ yarn global add ignite-cli

Ignite includes two primary boilerplates

Andross:

The tried and true (React Navigation, Redux, & Redux Saga)

It includes:

React Native 0.57.7
React Navigation 3.0.0
Redux
Redux Sagas
And more!

Bowser:

The latest and greatest (React Navigation, MobX State Tree, & Typescript)

This boilerplate includes:

React Native
React Navigation
MobX State Tree
Typescript
Reactotron (requires 2.x)
And more!

I won't go into detail about these services in this post. I will choose a preferred boilerplate after testing and explain the services more in detail in a future post.

How to:

Lets choose ignites newest boilerplate bowser.

First of all to start of a bowser boilerplate, simply run the following command and choose bowser from the terminal menu:

$ ignite new MyNewAppName
-----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------

An unfair headstart for your React Native apps.
https://infinite.red/ignite

-----------------------------------------------

🔥 igniting app BowserStyle
? Which boilerplate would you like to use? Bowser (React Navigation, MobX State Tree, & TypeScript)
> Bowser  *
> Andross

If you open your NewAppProject directory, you will see loads of files that come will the ignite boilerplate compared to the standard setup using react-native new or expo init command.

Run simulator:

For iOS:
  cd ProjectFolder
  react-native run-ios

For Android:
  cd ProjectFolder
  react-native run-android

To see what else Ignite CLI can do in the command line:

  cd ProjectFolder
  ignite

Project directory structure

The project structure is some more advanced that a simple react-native new / expo init default project structure.

The project structure will look similar to this:

ignite-project
├── app
│   ├── components
│   ├── i18n
│   ├── models
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
│   ├── environment-variables.ts
├── storybook
│   ├── views
│   ├── index.ts
│   ├── storybook-registry.ts
│   ├── storybook.ts
├── test
│   ├── __snapshots__
│   ├── storyshots.test.ts.snap
│   ├── mock-i18n.ts
│   ├── mock-reactotron.ts
│   ├── setup.ts
│   ├── storyshots.test.ts
├── README.md
├── android
├── ignite
│   ├── ignite.json
│   └── plugins
├── index.js
├── ios
└── package.json

Lets go deeper into the directories included in Bowser.

The `./app` directory:

Like when running the default structure commands, the app directory is present.

Inside the app directory, it will look similar to this:

app
│── components
│── i18n
├── models
├── navigation
├── screens
├── services
├── theme
├── utils
├── app.tsx
├── environment-variables.ts

components:
This is where your components live. Normally you would have components created with a .js file. Since bowser includes typescript, each component will have a directory containing a .tsx file, along with a story.tsx file. Optionally if the component is large, the component directory can include preset.ts, and props.ts files for better organisation.

i18n:
If you included the react-native-i18n service, this is where your translations live.

models:
This is where your models and model logic lives. Each model has a directory that contains the mobx-state-tree model file, test file, and other supported files like actions, types etc.

navigation:
Your react-navigation files live here.

screens:
The react screen component which takes up the entire screen and is part of the navigation hierarchy lives here. Each directory contains the .tsx file, assets or helper files.

services:
Services that interface with the outside world like REST APIs, Push Notifications etc, live here.

theme:
Your theme lives here, built including spacing, colors, typography, timing etc.

utils:
Shared files like helpers, utilities like date helpers, formatters etc are often placed here. If a helper or utility is only used by a specific component/model in your application the file should live with that component/model.

app.tsx:
Your entry point to your application. The main App component that renders the rest of the application. You can also choose if you would like to run the app in storybook mode.

The `./ignite` directory:

This is where the ignite CLI and all things ignite live. Generators, plugins and examples are included to help you get started.

The `./storybook` directory:

This is where stories will be registered and where the Storybook configs will live.

Storybook is a UI development environment for rapid iteration and testing of UI components. This allows you to visualise the different states of the individual components of your app and test the UI interactions.

The `./test` directory:

This is where your Jest configs and mocks live. As well as storyshots test files.

Attaching to Expo

If you are like me and use the expo toolchain to kick of your project, and you would still like to use one of Ignites boilerplates simply use the command:

expo init <AppName>
cd <AppName>
ignite attach
// Then choose which boilerplate you would like to use

This also works for:

create-react-native-app
create-react-app
normal Reach JS projects
empty directories

Not all plugins work in all environments, but many features of Ignite CLI are available.

For more info check out their documentation at https://expo.io/ !

Home Assistant - Lovelace introduction: Step 3

André Hatlo-Johansen — Mon, 28 Mar 2022 07:31:37 +0000

Home Assistant recently came out with their updated UI January 2019.

A ui called Lovelace it has now become their default ui interface. Taking a new approach for building user interfaces for Home Assistant.

Note! I had to cut this project short because of the timeframe for my new job, but here is a quick overview over my custom Lovelace UI which i was able to put together.

A dynamic UI with a whole new set of features:

24 card grid.
A UI editor.
Faster!
And fully customizable
- Cards have a list of attributes and options which can alter how your data is presented.
- Themes!
- Entity overriding privileges (name and icon).
- Custom cards built from the HA community.

This is whats so fun about this new platform is that the community is blooming. Make HA work for you!

Take a look at my UI in mobile view:

Home Assistant - Configuring devices: Step 2

André Hatlo-Johansen — Mon, 28 Mar 2022 07:26:36 +0000

If you haven't seen my last post on how to install Home Assistant on a Rapsberry Pi, check my previous post.

Requirements

Successfully installed Home assistant on a Raspberry Pi
Some type of smart device and gateway connected to your network

Configuration of devices:

Go to your HA web interface by typing http://ipaddress:8123 in your browser.

The main menu will look something like this:

The `Main menu`

Overview
- This is where your UI exists.
Map
- HA has a map interface for tracking and estimating time.
Logbook
- Here HA logs all events that happen in your smart home.
History
- Check out your sensors/devices/places history, how they act over time.
MDI Icon Index
- This is a custom icon page i added, i will get back to this and show you how this is done.
Configuration
- Everything you can do with HA gets configured here.

The `Configuration` menu

Select configuration in the main menu.

You will see a menu that looks something like this:

Home Assistant Cloud
- Sign up for the HA Cloud service, this makes it possible to use your interface from all around the world. Without any port forwarding.
Integrations
- All new devices on your network has to get setup here before anything else.
Users
- Add user accounts that can access HA web interface here.
General
- Here you can restart your server/core/groups/automations/scripts and validate your configuration files for quick debugging.
Persons
- Add people and connect them to the user account you would like.
Entity Registry
- An overview over all devices. Also possible to override naming for each device.
Area Registry
- Define the places in your home. For example bathroom, kitchen, livingroom etc. These places can then be assigned to each of your devices.
Automation
- Here is where the magic happens. Where you can automate your smart devices as you see fit. Turn off all lights after 23:00 or set the temperature up after 07:00.
Script
- Script actions to be used in Lovelace UI. For example create a restart HA script that calls action homeassistant.restart so you can easily restart the server from your UI.
Z-Wave
- You will probably not have this in your configuration unless you've activated z-wave in your configration.yaml file. Here is where you can add Z-wave nodes and configure them.
Customization
- Tweak entity attributes or add/edit customizations that override the enities attributes.

`Integrations`

In the configuration menu, go to Integrations.

Under Discovered you'll see all devices Home Assistant can find on your network.

Home assistant has made integrating devices as easy as pie. Just hit the button CONFIGURE and follow the steps:

IKEA tradfri integration

Click CONFIGURE next to IKEA TRÅDFRI.

Fill inn the Security Code from underneath your IKEA Trådfri Gateway.

Click Submit and accept the list of IKEA Trådfri devices HA lists up.

Phillips hue integration

Click CONFIGURE next to Philips Hue.

Locate your Philips gateway and press the button located on topp of the gateway.

Then accept all devices HA lists up in the next step.

Back in `Integrations`

You should now have a list of devices depending on what you have configured from integrations.

This is what my list looks like:

Developer tools

Underneath the Main menu you will see the Developer tools, this is worth mentioning since it will be used a lot during the device automation/configuration stage.

Services (remote control icon)
- Here its possible to run/test all services that HA has integrated.
States (< > icons)
- This is the place to have total control over ALL your entities.
- Check if their online, or if they exist at all.
Events (radio tower icon)
- I havent personally used this function much, but as far as i know this is the place to run events.
Templates (document <> icon)
- When doing advanced configuration with HA, its possible to create templates that act as sensors. This is the place to test your tempates and see if you get the return values your looking for.
About (info icon)
- The place to check your HA version or to check what the HA log is outputting.

Hope this gives a better understanding of the fundamentals of HA and how to configure devices on your network.

Want more?

Get familiar with Home Assistant by reading the docs!

Home Assistant - HA & PI: Step 1

André Hatlo-Johansen — Mon, 28 Mar 2022 07:21:09 +0000

Automating my home with home assistant and raspberry pi. How to install HA on the Raspberry Pi 3 B+ ?

There are almost 8.4 billion internet of things (IoT) across the world right now. The number of devices are expected to more than double the next couple of years to the stage of 20.4 billion in 2020. The problem with all these devices are that each and every brand of smart device has their own gateway and platform to automate and control. This is where Home Assistant steps in.

Home assistant is an open source platform where all your digital smart things can talk to each other. Implemented with an raspberry pi, you can shedual or command events for your smart devices (events as turn up heat when cold outside, or dim lights after 21:00).

Home assistant can run on any always connected operating system that supports Python 3 apps, and its very lightweight and small. Which makes it great to run on a Raspberry Pi.

My smart devices range from:

IKEA tradfri
- Bulbs
- Motion sensor
- Gateway
Philips hue bulbs and motion detectors
- Bulbs
- Motion sensor
- Temperature sensor
- Light sensor
- Gateway
Sonos
- Two speakers
Gooogle Cast
- Livingroom tv with Android OS
- Nvidea Shield on my bedroom tv
Z-wave
- Door/Window sensor
- USB gateway

To create a setup where all these different brands of devices can talk to each other i'll create a new home automation server on my Raspberry Pi 3B+.

Follow this guide for a easy setup. And follow my blog for more information, ideas and guides for Home Assistant that i will post in the near future!

Requirements:

Raspberry Pi 3B+ (Recommended)
Micro SD (At least 32gb)
Raspbian (Stretch light) installed on micro sd card

Installing Home Assistant on raspbian

Enable SSH

Assuming raspbian is already installed on the raspberry pi.

Make sure your connected to your local network, control by running ifconfig.

Activate SSH on the raspberry pi by running sudo raspi-config in the terminal window.

Then select Interfacing Options.

Navigate to SSH and select it.

Choose Yes and select Ok.

Then choose Finish.

Connect by SSH and install HA

To connect to your Raspberry Pi over SSH run the following command in terminal.

# Default password is: raspberry
$ ssh pi@piaddress

Change the default password by running:

$ passwd

Update your pi:

$ sudo apt-get update
$ sudo apt-get upgrade -y

Install dependencies:

$ sudo apt-get install python3 python3-venv python3-pip libffi-dev libssl-dev

Add a homeassistant user with groups dialout and gpio. Dialout is required for using Z-Wave and Zigbee controllers, while GPIO is required to communicate with Raspberry's GPIO.

$ sudo useradd -rm homeassistant -G dialout,gpio

Create a directory for the installation in /srv directory and set owner permissions to the homeassistant account:

$ cd /srv
$ sudo mkdir homeassistant
$ sudo chown homeassistant:homeassistant homeassistant

Then create and change to a virtual environment for Home assistant as the homeassistant account:

$ sudo -u homeassistant -H -s
$ cd /srv/homeassistant
$ python3 -m venv .
$ source bin/activate

Once the virtual environment is activated, run the following command to install a required python package:

$ (homeassistant) homeassistant@raspberrypi:/srv/homeassistant $ python3 -m pip install wheel

Last but not least, install Home Assistant:

$ (homeassistant) homeassistant@raspberrypi:/srv/homeassistant $ pip3 install homeassistant

To complete the installation, start Home Assistant for the first time.

(homeassistant) $ hass

This will create the .homeassistant directory under the home/homeassistant directory.

If the installation was successful you can reach the Home Assistant web interface on http://ipaddress:8121.

Autostart Home Assistant on boot

Since the raspberry pi will host the Home Assistant server i would like to create a deamon that autostarts Home Assistant on boot.

A service file is needed to control Home Assistant with systemd.

Create the template below with sudo rights with the following path /etc/systemd/system/home-assistant@homeassistant.service.

# /etc/systemd/system/home-assistant@homeassistant.service

[Unit]
Description=Home Assistant
After=network-online.target

[Service]
Type=simple
User=%i
ExecStart=ExecStart=/srv/homeassistant/bin/hass -c "/home/%i/.homeassistant"

[Install]
WantedBy=multi-user.target

Now reload systemd to make the deamon aware of the new configuration.

$ sudo systemctl --system daemon-reload

Enable the home assistant service to automatically start on boot:

$ sudo systemctl enable home-assistant@homeassistant.service

To start the service run this command:

$ sudo systemctl start home-assistant@homeassistant.service

Now go to your Home Assistant web interface by going to http://ipaddress:8123.

Next time we will show how to setup your smart devices in HA and configure them so that you can access them all.

Follow my blog for more information, ideas and guides for Home Assistant that i will post in the near future!

Want more?

Get familiar with Home Assistant by reading the docs!

React Native: State vs Props

André Hatlo-Johansen — Mon, 28 Mar 2022 07:12:46 +0000

The question that confuses most beginners in react.

What is the difference of props and state?

Lets clarify this.

Props includes data which we give to a component.

State includes data that is local or private to that component. So other components cannot access that state, it s completely internal to that component.

Lets say we have a Counters component.

import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
  state = {
    counters: [
      {id: 1, value: 0},
      {id: 2, value: 0},
      {id: 3, value: 0},
      {id: 4, value: 0}
    ]
  };
    render() {
    return (
      <div>        
        { this.state.counters.map(counter =>
          <Counter key={counter.id} value={counter.value} id={counter.id}>
          </Counter>
          )
        }
      </div>
    );
  }
}

export default Counters;

If you take a closer look at the render method of the Counters component:

<Counter key={counter.id} value={counter.value} id={counter.id}></Counter>

All attributes we are setting here are part of the props, the input to the Counter component.

We cannot access the state of this component. It is local and internal to that component.

Props is read only, for example lets look at the Counter component.

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    value: this.props.value
  };

  handleIncrement = product => {
    this.setState({value: this.state.value + 1});
  };

  render() {
    return (
      <div>
        <span className='badge badge-warning'>{this.state.value}</span>
        <button
          onClick={ () => this.handleIncrement({ id: 1 }) }
          className="btn btn-secondary btn-sm">click
        </button>
      </div>
    );
  }
}

export default Counter;

Look closer at the helper method handleIncrement, which increments the counter by one:

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

If we update the handleIncrement method to update the props.value like this:

handleIncrement = product => {
  this.props.value = 0;
  // this.setState({value: this.state.value + 1});
};

And we increment it in the view, we would get this error:

So react does not allow you to change any props to any component.

If you would like to modify the input during the lifecycle of a component, you have to get that input and put it in the state like initially done in the handleIncrement method:

handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};

More information about state and props

For more information about state and props visit the react docs.

Starting a React Native project with Expo

André Hatlo-Johansen — Mon, 28 Mar 2022 07:07:05 +0000

For React Native we need node, Watchman, React Native CLI and Xcode.

node:

A javascript package manager.

Watchman:

A service for watching changes in files and trigger actions when files are changed.

React Native CLI:

A command line interface module for React Native.

Xcode:

Apples IDE to test your application on an Iphone simulator.

1. Install `node` and `Watchman`

Install node and watchman using Homebrew.

brew install node
brew install watchman

2. Install React Native CLI

Install React Native CLI with the node package manager (npm).

npm install -g react-native-cli

3. Install Xcode and the Xcode Command line tools.

Install Xcode from the app store.

In Xcode preferences, go to locations and download the Xcode CLI found at Command Line Tools.

Go to Components and download a simulator of your choice, preferably the newest.

4. Starting a React Native project

Now you can run these commands in your terminal to start of a React Native project:

react-native init MyApp
cd MyApp
react-native run-ios

This will initiate a React Native project, and showcase it in an iOS simulator that should look similar to this:

Expo

Expo is a free toolchain built around React Native like react-native to help build native iOS and Android projects.

The toolchain provides tools to simplify development of React Native apps by supplying components of users interface and services that are normally available in third-party native React Native components. All these you can find in Expo SDK.

Simply install the Expo CLI and run the simulator by running the following commands:

npm install -g expo-cli
expo init MyApp
cd MyApp
npm start

The last command will start Metro Bundler, which is a HTTP server that compiles the JavaScript code of our app using Babel and serves it to the Expo app.

You will also notice it pops open the Expo Dev Tools, a control panel for developing your app, in your default browser.

Open the app on your phone or simulator

Looking at the Expo Dev Tools, you have available options on which type of simulator you would like to run (Android or iOS). And you have the option to scan the QR code to run the app on your phone in real time using Live Reload.

All you have to do is download the Expo app on either Android or iPhone and scan the QR code, and you are ready to go.

React Native Documentation:

Learn more about how React Native works by looking at the docs.

TypeScript syntax summary

André Hatlo-Johansen — Mon, 28 Mar 2022 07:05:35 +0000

I use this blog to store information I may need to refresh up on at a later date.

Reference to FlavioCopes blog, a great place to learn.

TypeScript is one of the fastest rising technologies of 2018. This brief summary is filled with what you need to know to understand its key concepts.

TypeScript is built by Microsoft. Its open source, developed public at https://github.com/Microsoft/TypeScript.

A superset of ECMAScript 2015, also know as ES6, which means that any valid JS is also valid TypeScript.

Run npm install -g typescript to globally install the TypeScript compiler on your system, available to you using the tsc command.

Create an app.ts file.

Write your first program:

const greet = () => {
  console.log('Hello world!')
}
greet()

As you see, its just plain JavaScript, but stored in a .ts file.

Compile the program using the tsc app.ts command.

The compiler compiles the program into a new file: app.js, with this content:

var greet = function () {
  console.log('Hello world!')
};
greet();

Just like old JavaScript, the TS compiler compiles TypeScript to ES5 by default, which means that its almost guaranteed to be suppored by all modern browsers.

To change the compilation target to another version, for example to ES2018 run the following:

`tsc app.ts --target ES2018`:

const greet = () => {
  console.log('Hello world!');
};
greet();

Here almost nothing changed except for the additional semicolons.

Play around with TS to JS compilation, check out https://www.typescriptlang.org/play/.

TYPING

Most important functionality provided by TypeScript is the type system:

static types
interfaces
type interence
enums
hybrid types
generics
union/intersection types
access modifiers
null checking

It resembles languages like Go or C, so if you've coded these languages you already know how this works. Unike dynamic languages like Python or Ruby, this is all new.

The type system allows adding types to:

variables
function arguments
function return types

Giving a more rigid structure to your programs.

This is how:

You define a string variable in TypeScript:

const greeting : string = "hello!"

A function accepts an argument of a specific type:

const multiply = (a: number, b: number) => {
  return a * b
}

You declare their return value:

const multiply = (a: number, b: number): number => {
  return a * b
}

Valid types are:

number
string
boolean
enum
void
null
undefined
any
never
Array
tuple

any is a type that identifies, as its name says, any type.

CLASSES

Like JavsScript, you declare classes like this:

class Car {

}

Defining class fields:

class Car {
  color: string
}

Fields are public by default. You can set a field to be private or protected:

class Car {
  public color: string
  private name: string
  protected brand: string
}

Private fields can only be accessed by the class that its declared in.

Protected fields can only be accessed by deriving classes.

TypeScript also has static fields, which are class fields instead of object fields:

class Car {
  static numberOfWheels = 4
}

initialize fields with a constructor:

class Car {
  color: string

  constructor(theColor: string){
    this.color = theColor
  }

}

Shorthand syntax to make it simpler:

class Car {
  constructor(public color: string){}

  printColor() {
    alert(this.color)
  }
}

(new Car('red')).printColor()

A field can be read only:

class Car {
  readonly color: string
}

in this case its value can only be set in the constructor.

Class methods:

class Car {
  color: string
  constructor(public color: string) {
    this.color = color
  }
  drive() {
    console.log('You are driving the car')
  }
}

You create objects from those classes, like in JavaScript, using the new keyword:

const myCar = new Car('red')

You can extend an existing class using the extend keyword:

class ElectricCar extends Car {
  //..
}

Call super() in the constructor and in methods to call the extended class corresponding method.

ACCESSORS

Getters and setters:

class Car {
  private _color: string

  get color(): string {
    return this._color
  }

  set color(color: string) {
    this._color = color
  }
}

ABSTACT CLASSES

To define an abstract class there needs to be a class that extends it, and implements its eventual abstact methods:

abstact class Car {
  abstract drive()
}

class SportsCar extends Car {
  drive() {
    console.log('You are driving a sports car')
  }
}

INTERFACES

Interfaces build upon basic types. Use an interface as a type, and its interface can contain other type definitions:

interface SetOfNumbers {
  a: number;
  b: number;
}

const multiply = (set: SetOfNumbers) => {
  return set.a * set.b
}

multiply({ a: 1, b: 2 })

An interface can also be an interface for a class implementation:

interface Car {
  name: 'string'
  new (brand: string)
  drive(): void
}

class SportsCar implements Car {
  public name

  constructor(public brand: string) {
    //..
  }

  drive() {
    console.log('You are driving a sports car')
  }
}

FUNCTION FEATURES

Functions can have optional parameters using the ? symbol after the parameter name:

class Car {
  drive(kilometers?: number) {
    if(kilometers) {
      console.log('Drive the car for ${kilometers} kilometers')
    } else {
      console.log('Drive the car')
    }
  }
}

Parameters can have default values:

class Car {
  drive(kilometers = 10) {
    console.log('Drive the car for ${kilometers} kilometers')
  }
}

Functions can accept a verying number of parameters by using rest parameters:

class Car {
  drive(kilometers = 10, ...occupants: string[]) {
    console.log('Drive the car for ${kilometers} kilometers, with those people on it:')
    occupants.map((person) => console.log(person))
  }
}
(new Car()).drive(20, 'Andre', 'Peter', 'Roger')

ENUMS

A great way to defined named constants.

enum Order {
  First,
  Second,
  Third,
  Fourth
}

Simply reference Order.First, Order.Second etc.

You can assign values to constants explicitly:

enum Order {
  First   = 0,
  Second  = 1,
  Third   = 2,
  Fourth  = 3
}

or use strings:

enum Order {
  First = 'FIRST' ,
  Second = 'SECOND',
  Third = 'THIRD',
  Fourth = 'FOURTH'
}

GENERICS

A new feature not available in many programming languages. You can create a function, interface or class that works with different types, without specifying the type up front.

It is mutable, so if you change the type at compile time, the compiler will throw an error.

We could do this by omitting types to all or using any.

But with generics all the tooling is going to be able to help us.

Example:

function greet<T>(a: T) {
  console.log('Hi ${a.name}')
}
greet({name: 'André'})

The T symbol identifies a generic type.

the type can be resistricted to a certain class family or interface, using the extends keyword:

interface Greetable { name: string }
function greet<T extends Greetable>(a: T) {
  alert('Hi ${a.name}!')
}
greet({ name: 'André'})

WANT MORE?

We just went over the basics of TypeScript, go to the official docs for more!

DEV Community: André Hatlo-Johansen

Vim - The ultimate text editor?

Vim

Installation

The Ultimate vimrc

Developer || Slave

Grinding gears as a developer.

GIT Command - Overwrite Trick

Want to know more, check out the Git cheat sheet here!

IntelliJ IDE - Productivity Tricks

IntelliJ Tricks to boost productivity

Moving the cursor

Moving the lines

Format code

Navigate through code

The Nr 1 Productivity killer

File tabs

Code selection

Code completion

Postfix completion

Code Generation

Version Control tricks

Commiting changes:

Commit flow:

VC Popup Menu

Reformat:

Optimaizing imports

Optimize imports on the fly

Only optimize imports on commited files

Navigate to Compilation Error

Bonus

Language injection

Other's

MultiCursor

Reactive Data Streams - quick rxJava Summary

Observable / Iterable

Observable type

Creating an Observable from existing Data structures

Creating an Observable via the create() method

Synchronous Observable example:

Asynchronous Observable example:

Transforming Observables with Operatiors

React Native: Boilerplates overview

Ignitee CLI

Ignite includes two primary boilerplates

Andross:

Bowser:

How to:

Project directory structure

The ./app directory:

The ./ignite directory:

The ./storybook directory:

The ./test directory:

Attaching to Expo

Home Assistant - Lovelace introduction: Step 3

Home Assistant - Configuring devices: Step 2

Requirements

Configuration of devices:

The Main menu

The Configuration menu

Integrations

IKEA tradfri integration

Phillips hue integration

Back in Integrations

Developer tools

Want more?

Get familiar with Home Assistant by reading the docs!

Home Assistant - HA & PI: Step 1

Automating my home with home assistant and raspberry pi. How to install HA on the Raspberry Pi 3 B+ ?

Requirements:

Installing Home Assistant on raspbian

Enable SSH

Connect by SSH and install HA

Autostart Home Assistant on boot

Want more?

Get familiar with Home Assistant by reading the docs!

React Native: State vs Props

More information about state and props

Starting a React Native project with Expo

1. Install node and Watchman

`Observable` type

Creating an Observable via the `create()` method

The `./app` directory:

The `./ignite` directory:

The `./storybook` directory:

The `./test` directory:

The `Main menu`

The `Configuration` menu

`Integrations`

Back in `Integrations`

1. Install `node` and `Watchman`