Post 72: How to create evenly divided buttons that fills the entire space of the viewport on Android apps

I had to try different layout and read through several Stackoverflow posts until I could achieve what I wanted: buttons evenly spread on the viewport. At first I thought you can easily achieve that with a GridLayout. But no, you can achieve this with nested LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
    <!--tools:showIn="@layout/activity_test_widget"-->
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="test.TodoWidget">

    <LinearLayout
        android:layout_width="368dp"
        android:layout_height="439dp"
        android:orientation="vertical"
        app:layout_constraintVertical_weight="1"
        tools:layout_editor_absoluteY="8dp"
        tools:layout_editor_absoluteX="8dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/editTextTaskInput"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:hint="test"
                android:ems="10"
                android:inputType="textMultiLine" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_constraintHorizontal_weight="1"
            android:orientation="horizontal">

            <Button
                android:id="@+id/b1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="b1" />

            <Button
                android:id="@+id/b2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="b2" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            app:layout_constraintHorizontal_weight="1"
            android:orientation="horizontal">
            <Button
                android:id="@+id/b3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="b3" />
            <Button
                android:id="@+id/b4"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="b4" />
        </LinearLayout>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/nextButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_media_next"
        android:layout_weight="1"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"
        tools:layout_editor_absoluteX="328dp" />

</android.support.constraint.ConstraintLayout>

Post 71: Publish gitHub page with VueJS + Vue cli

1. Create a project on gitHub
2. clone that gitHub project on your computer with `git clone ...`
3. in your terminal, go to that project with `cd .....`
4. create a vue project in that folder with `vue create .`
5. install all dependencies `yarn install`
6. in the `.gitignore` file comment out the folder `/dist` (we will later publish our vueJS page in that `dist` folder and push it on gitHub)
7. create a new branch with `git co -b gh-pages`
8. create a new file `vue.config.js` with `touch vue.config.js`
9. in that file write: module.exports = { publicPath: ‘<my-project>’ }
10. modify the changes you want to make
11. test your changes with `yarn serve`
12. if you are satisfied we can build for production with `yarn build`
13. add the changes you want to push: `git add dist && git commit -m "Initial dist subtree commit`
14. push only the dist folder to your gh-branch on gitHub: `git subtree push --prefix dist origin gh-pages`. This part is very important. If you push everything into gitHub, then nothing will be displayed. The trick is to only push the `dist` folder on to gitHub. In order not to lose any changes, I would commit and push everything to `master` and on the branch `gh-pages`, I'd only push the `dist` changes  
15. go to gitHub and then to the settings
16. in the section gitHub pages you should see a link where your vueJS can be reached. Click on that and you should see the same page you see earlier with `yarn serve` 

Post 70: Remove blue background on form input fields in Chrome

Chrome adds a default blue background color in your form input fields, e.g. text fields or password input fields.

In order to remove it apply this styling

<style>  input:-webkit-autofill,  input:-webkit-autofill:hover,  input:-webkit-autofill:focus textarea:-webkit-autofill,  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,  select:-webkit-autofill,  select:-webkit-autofill:hover,  select:-webkit-autofill:focus {
    transition: background-color 5500s ease-in-out 0s;  }
</style>

Post 69: Git (merge|diff) tools and aliases

# based on http://blogs.pdmlab.com/alexander.zeitler/articles/installing-and-configuring-p4merge-for-git-on-ubuntu/



$ cd ~/Downloads

$ wget https://cdist2.perforce.com/perforce/r18.2/bin.linux26x86_64/p4v.tgz

$ tar zxvf p4v.tgz

$ sudo mkdir /opt/p4v

$ cd p4v-2018.2.1666551 # or the current version

$ sudo mv * /opt/p4v

$ sudo ln -s /opt/p4v/bin/p4merge /usr/local/bin/p4merge

vim ~/.gitconfig

[color]

ui = true

diff = true

branch = auto

status = auto

[alias]

new = checkout -b

co = checkout

ci = commit

cm = commit -m

cam = commit -am

ca = commit --amend # careful

st = status

br = branch

lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen--> %cr%Creset by %Cblue%cN <%cE>%Creset' --abbre

v-commit --date=relative

hist = log --pretty=format:\"%h %ad | %s%d [%an]\" --graph --date=short

type = cat-file -t

dump = cat-file -p

s = status --short

a = !git add . && git status

au = !git add -u . && git statustus

aa = !git add . && git add -u . && git status

ac = !git add . && git commit

acm = !git add . && git commit -m

put = push origin HEAD

get = pull origin HEAD

[merge]

keepBackup = false;

tool = p4merge

[mergetool]

prompt = false

[mergetool "p4merge"]

cmd = p4merge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"

keepTemporaries = false

trustExitCode = false

keepBackup = false

[diff]

tool = p4merge

[difftool]

prompt = false

[difftool "p4merge"]

cmd = p4merge "$LOCAL" "$REMOTE"

keepTemporaries = false

trustExitCode = false

keepBackup = false

Post 68: Webassembly example

Lately I wanted to dive into Web Assembly. The examples I found on the internet wouldn't work or information was missing. I would spend a couple of hours to figure it out. In order to save yourself time, I created this post.

I was inpsired by this post (but the project wouldn't run for me): https://medium.freecodecamp.org/get-started-with-webassembly-using-only-14-lines-of-javascript-b37b6aaca1e4#--respond

The file structure will look like this:
wasmDemo
|_index.html
|_scripts.js
|_server.js
|_squarer.wasm

So, everything is in one directory with now subfolder.

First go to the following page in order to write a C++ program:
https://mbebenita.github.io/WasmExplorer/

Let's write a squarer program:

int squarer(int i) {
  return i * i;
}

Paste that into the site above. Then compile it and download the `.wasm` file. Move that file into our folder "wasmDemo".

Next create a html file:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>WASM Demo</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<h1>WASM Demo</h1>

<script src="./scripts.js"></script>

</body>

</html>

Then create a js file:

let squarer;

function loadWebAssembly(fileName) {

return fetch(fileName)

.then(response => response.arrayBuffer())

.then(buffer => WebAssembly.compile(buffer))

.then(module => {

return new WebAssembly.Instance(module);

});

}

loadWebAssembly('./squarer.wasm').then(instance => {

squarer = instance.exports._Z7squareri;

console.log('Finished compiling! Ready when you are...');

});

Since we have to run it on the server, let's create a server.js file for our node server:

var http = require('http');

var fs = require('fs');

var path = require('path');

const PORT = 8080;

http

.createServer(function(request, response) {

var filePath = '.' + request.url;

if (filePath == './') {

filePath = './index.html';

}

var extname = String(path.extname(filePath)).toLowerCase();

var mimeTypes = {

'.html': 'text/html',

'.js': 'text/javascript',

'.css': 'text/css',

'.wasm': 'application/wasm'

};

var contentType = mimeTypes[extname] || 'application/octet-stream';

fs.readFile(filePath, function(error, content) {

if (error) {

response.writeHead(404);

response.end('404 Not Found');

} else {

response.writeHead(200, { 'Content-Type': contentType });

response.end(content, 'utf-8');

}

});

})

.listen(PORT);

If everything is correct, then start the application with `node server.js`

Now you can access the squarer function, that we wrote in C++ also in the js file or in the console.

Post 67: Set background image in ubuntu 18.04

Type in your terminal:

sudo gedit /usr/share/gnome-shell/theme/ubuntu.css

Then search for "lockDialogGroup". Replace the CSS query with the following:

#lockDialogGroup {
background: #2c001e url(file:///[fileLocation/filename.png]);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

Post 66: How to SASS

How to use SASS?

SASS stands for "Syntactically Awesome Stylesheets Sass". It is a CSS preprocessor and offers you stuff you can't do normally with CSS, e.g. mixins, loops, inheritence.

1. Create a new folder and "npm init"
2. "npm install node-sass"
3. Create a new folder "css" on the same level as "package.json"
4. Go to your package.json and write in the scripts key "start": "node-sass -o css scss"
5. Create a new folder "scss" and create a new file scss "main.scss" in it
6. In the main.scss file write:

.red { color: red; }

.red-dark { color: darken(red, 20%);}

    7. Go to your terminal and write "npm start"

    8. A new file "main.css" was created in the folder "css" for you.