
I started the transition to [MDX](https://mdxjs.com/) because I was using [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) for image optimization. It provides an `Img` component and the component replies on webpack's `require` call to import images. Therefore, I cannot import images dynamically and wrap every `<img>` within `Img` in `MDX provider's components` which is used to customize Markdown-parsed parts, like `<a>`, `<img>`, `<p>`, etc.

So I import `Img` and explicitly place it where there is a picture:

```
import Img from "react-optimized-image";

## Hi LA

<Img src={require("assets/images/welcome-to-usa.jpg")} alt="LA airport" webp />;
```

The existence of JSX content makes it hard to use something like [gray-matter](https://github.com/jonschlinkert/gray-matter) to extract frontmatter from MDX document to read metadata.

Well. Right after I typed these words, I start to wonder if this is actually possible, with some extra step to remove the frontmatter before MDX gets processed. And yes, there is a page on how to use `gray-matter` with MDX 😅. See [Custom Loader](https://mdxjs.com/guides/custom-loader).

## Custom Loader

As long as we can handle frontmatter in MDX, we could follow NextJS's doc on [building a blog](https://github.com/vercel/next-learn-starter) to generate a table of contents.

> Update:
>
> After I wrote this post, I did some work to adopt this approach.
>
> There seems to be some extra work if you want to use the custom loader with NextJS.

After completing the custom loader script, I need to add the loader before MDX's, which involves changing babel configurations.

With NextJS, we better use plugins to help change babel configurations. Here is the full `next.config.js` to add our custom loader to the chain:

```js
const withPlugins = require("next-compose-plugins");

const withMDX = require("@next/mdx")({
  options: {
    remarkPlugins: [
      /* some plugins */
    ],
    rehypePlugins: [
      /* some plugins */
    ],
  },
  extension: /\.mdx?$/,
});

const withFrontmatter = (nextConfig = {}) => {
  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      config.module.rules = config.module.rules.map((rule) => {
        if (rule.test && rule.test.test(".mdx")) {
          return {
            ...rule,
            use: [...rule.use, require.resolve("./plugins/frontmatter")],
          };
        } else {
          return rule;
        }
      });

      if (typeof nextConfig.webpack === "function") {
        return nextConfig.webpack(config, options);
      }

      return config;
    },
  });
};

module.exports = withPlugins([
  [withFrontmatter],
  [
    withMDX,
    {
      pageExtensions: ["ts", "tsx", "mdx"],
    },
  ],
]);
```

`./plugins/frontmatter` should be where you place the custom loader script.

Be aware that plugins/loaders run in the order of last to first.

## Alternative Path

There is another way of doing this which involves using JS code in MDX and Babel parsing.

### Export Metadata

It's worth mentioning that you can treat the whole MDX file as a module and access JS objects that are exported from it.

For example, with the following MDX content:

```
export const metadata = {
  title: "Generate Table of Contents for MDX Posts with NextJS",
  date: "2021-02-04T17:27:00.000+08:00",
  description:
    "I've rewritten my blog (this blog) several times, the latest of which is built with MDX and NextJS. With frontmatter not being an option, I had to find a MDX-compatible way to generate the table of contents for my posts.",
};

# Hi

It's me.
```

The constant `metadata` will be passed as a prop into MDX's provider component `wrapper`, which shall be used like this:

```tsx
const components = {
  wrapper: ({ children, metadata }) => <Something />,
};

<MDXProvider components={components}>
  <MainStuff />
</MDXProvider>;
```

Here, `children` is a React component rendered from your MDX content and `metadata` is the constant that gets exported from the file. `<Something />` can take advantage of those props.

### Table of Contents

This is sufficient for a single document. However, if you are trying to generate the table of contents for all your MDX documents in NextJS. There is no conveneint way to get those props. The easiest way that I found is to use `Babel` to parse the `export const metadata` JS code and manually extract them during NextJS's `getStaticProps` phase.

Assuming exports are separated from the main content with a newline, we could do the following to find what `metadata` is exported:

```ts
const ast = require("@babel/parser").parse(
  fileContents.split("\n\n").find((t) => t.startsWith("export const metadata")),
  {
    sourceType: "module",
  }
);

const metadataAst = ast.program.body[0].declaration.declarations.find(
  (d) => d.id.name === "metadata"
);

const properties = metadataAst.init.properties;

const metadata = properties.reduce(
  (acc, cur) => ({
    ...acc,
    [cur.key.name]: cur.value.value,
  }),
  {}
);
```

- Find the `export const metadata` code block.
- Parse it into AST.
- Get `metadata`'s corresponding AST node's properties.
- Reconstrcut the object from them.

This solution does its job, but it's not elegant or robust as the first one.


I've rewritten my blog (this blog) several times, the latest of which is built with MDX and NextJS. With frontmatter not being an option, I had to find a MDX-compatible way to generate the table of contents for my posts.

Generate Table of Contents for MDX Posts with NextJS


> TL;DR
>
> For anyone that only wants pre-compiled static libraries of openssl and curl, check out this repo [robertying/openssl-curl-android](https://github.com/robertying/openssl-curl-android) and its releases.

> Note:
>
> The way of compiling the libs have been drastically changed since I wrote this post. The following only serves as a demonstration of ideas. Please refer to [robertying/openssl-curl-android](https://github.com/robertying/openssl-curl-android) for the latest working scripts.

Compiling openssl and curl can be a natural request if you are integrating some C libraries into your Android project. Android use four ABIs that are not compatible with modern desktop environments, so we will have to `cross-compile` those libraries to be able to run them on mobile devices.

## Cross Compiler

`Cross-compilation` is generally easy if we get the right `cross-compiler`. What `cross-compiler` do we have for Android? It is included in `NDK`! Once you have NDK installed, you will find corresponding cross-compilers inside its bundle.

For macOS users, it will be located in `$ANDROID_NDK_HOME/toolchains/llvm/prebuilt/$HOST_TAG` where `$ANDROID_NDK_HOME` is the `ndk-bundle` path and `$HOST_TAG` is the identifier for your OS. Find your `$HOST_TAG` in [Android NDK docs](https://developer.android.com/ndk/guides/other_build_systems#overview).

## Autotool based build system

We can build some simple C files together with the cross compiler. However, openssl and curl are both complex and large projects using a GNU-autotools-like build system. This means we still need to use their own build system and we need to rightly configure so the final binary is built for Android ABIs.

## openssl

`curl` needs a SSL library so we will build openssl first.

We can find build instructions on its [repo](https://github.com/openssl/openssl/blob/master/NOTES.ANDROID). It is pretty in detail. Simply follow the instructions and you shall be able to compile the library.

Here is one of my scripts:

```shell
# You need to set `$MIN_SDK_VERSION`, `$ANDROID_NDK_HOME` and `$HOST_TAG` first
export TOOLCHAIN=$ANDROID_NDK_HOME/toolchains/llvm/prebuilt/$HOST_TAG
PATH=$TOOLCHAIN/bin:$PATH

./Configure android-arm64 no-shared \
 -D__ANDROID_API__=$MIN_SDK_VERSION \
 --prefix=$PWD/build/arm64-v8a
```

Just a few caveats:

1. Using `llvm` seems better if you are compiling on macOS, so put `$ANDROID_NDK_HOME/toolchains/llvm/prebuilt/$HOST_TAG/bin` into `PATH`. Then autotools can use the right compiler for the job.
2. The corresponding arguments for four ABIs are `android-arm64`, `android-arm`, `android-x86` and `android-x86_64`.
3. You can add `no-shared` to `Configure` if a static library is wanted.
4. Pay attention how `./Configure` is called -- _there is no dash or option name_.
5. Add `--prefix` because we do not want the library to be installed on the system which is default.

After calling `Configure`, autotools will generate correct Makefiles for the ABI.

Then run:

```shell
make
make install
```

You will see all `include`, `lib` and `bin` in `prefix` directory.

> For a full script, see [build-openssl.sh](https://github.com/robertying/openssl-curl-android/blob/master/build-openssl.sh)

## curl

`curl` does not use `Configure` for Makefile generations but a similar one named `configure`.

Before all, we first need to generate a special header file to proceed with the building.

Run `./buildconf` in `curl` directory, or you will get a `not found` error for `curl_config.h` because it is generated by `buildconf`. Just run it for a relatively short time and kill the process, `curl_config.h` will be available.

Building `curl` is a little trickier than with `openssl`. We need to declare all cross-compiling tools first to make it work.

For example, to compile against `arm64` ABI, we need to first export the following environment variables:

```shell
# arm64
export TARGET_HOST=aarch64-linux-android
export TOOLCHAIN=$ANDROID_NDK_HOME/toolchains/llvm/prebuilt/$HOST_TAG
PATH=$TOOLCHAIN/bin:$PATH
export AR=$TOOLCHAIN/bin/$TARGET_HOST-ar
export AS=$TOOLCHAIN/bin/$TARGET_HOST-as
export CC=$TOOLCHAIN/bin/$TARGET_HOST$MIN_SDK_VERSION-clang
export CXX=$TOOLCHAIN/bin/$TARGET_HOST$MIN_SDK_VERSION-clang++
export LD=$TOOLCHAIN/bin/$TARGET_HOST-ld
export RANLIB=$TOOLCHAIN/bin/$TARGET_HOST-ranlib
export STRIP=$TOOLCHAIN/bin/$TARGET_HOST-strip
export SSL_DIR=$PWD/../openssl/build/arm64-v8a
```

`SSL_DIR` is for locating `openssl` if we want to use `SSL` with `curl` later.

Then we have the standard autotools' way:

```shell
./configure --host=$TARGET_HOST \
            --target=$TARGET_HOST \
            --prefix=$PWD/build/arm64-v8a \
            --with-ssl=$SSL_DIR \
            --disable-shared
```

Here we only compiled static ones. Building shared libraries with some ARM ABI may cause problems. It may be a bug with NDK toolchains so I recommend sticking to static ones.

You can continue adding more options to disable functions, reducing the library size.

Then run:

```shell
make
make install
```

Find all stuff in `prefix` directory.

> For a full script, see [build-curl.sh](https://github.com/robertying/openssl-curl-android/blob/master/build-curl.sh)

## Summary

You can also combine all the environment variable setup in shell scripts. See [my-build.sh](https://github.com/robertying/openssl-curl-android/blob/master/my-build.sh) for example.

Checkout this [repo](https://github.com/robertying/CampusNet-Android/blob/master/app/src/main/cpp/jni) and also this [post](/posts/use-android-ndk-with-different-build-systems) to see how to integrate compiled static libraries into an existing Android project, including `Android.mk` setup and `JNI` configurations.


Although Android has already had a lot of helpful utilities for requests, we still need curl where we may integrate some C libraries which use curl. Since we now use SSL everywhere, it is also important to make openssl to work with Android too. Compiling the two popular libraries for Android seems an easy job, but there is not really a tutorial for this or any instruction to look for, hence this article.

Compile openssl and curl for Android


For those who want to jump into implementation, please check out [the Android repo](https://github.com/robertying/CampusNet-Android).

- For autotools integration, see [jni](https://github.com/robertying/CampusNet-Android/tree/master/app/src/main/cpp/jni). The autotools project is [tunet-c](https://github.com/robertying/tunet-c).

- For CMake and Android-side configurations, see [module gradle](https://github.com/robertying/CampusNet-Android/blob/master/htmltidy/build.gradle) and [app gradle](https://github.com/robertying/CampusNet-Android/blob/master/app/build.gradle). The CMake project is [htmltidy](https://github.com/htacg/tidy-html5).

## Autotools integration

For autotools project, it's _usually_ easy to set up a small-scale project. Find a `Makefile.am` template and add your source and header files. Even if you need some external libraries, you can just add `-llibname` to the compiler, while installing these libraries are as simple as some package manager commands.

One `lib/Makefile.am` for my project `tunet-c` (simplified):

```makefile
libportal_la_CPPFLAGS = -I$(srcdir)/../openssl/include -I$(srcdir)/../openssl/include/openssl
noinst_LTLIBRARIES = libportal.la
libportal_la_SOURCES = portal.c portal.h list.c list.h utf.c utf.h parser.c parser.h utf8proc.c utf8proc.h sds.c sds.h cJSON.c cJSON.h
```

Here I used relative paths for include paths, but it's also fine if you have `openssl` installed and make sure they are in include search paths.

So what's the problem? It seems I have all the files under the directory. Well, this is only the `lib` directory and I need to compile against `openssl` and `curl` ultimately.

See `src/Makefile.am` (only shows the part for exported C library, not the whole CLI):

```makefile
lib_LTLIBRARIES = libtunet.la
libtunet_la_CPPFLAGS = -I$(srcdir)/../lib
libtunet_la_SOURCES = tunet.c tunet.h
libtunet_la_LIBADD = ../lib/libportal.la $(CRYPTOLIB) $(CURLLIB)
```

`$(CRYPTOLIB)` and `$(CURLLIB)` are defined by `configure.ac` where you check whether some necessary libs exist in your system. For a well set up build environment, they will be equal to `-lcrypto` (part of `openssl` lib) and `-lcurl` after running `./configure`.

Yes, this is easy for almost every Unix-like system. However, Android do not have `openssl` and `curl` built in and we do not have an `apm (Android Package Manager)` to install them :p. We must build `openssl` and `curl` from source. I will talk about how to achieve this in [the following post](/posts/compile-openssl-and-curl-for-android). Let's just assume we have already had three static libraries -- `libssl.a`, `libcrypto.a` (those two are `openssl` libs) and `libcurl.a` built for all Android targets (x86, arm, arm64, etc.).

Now we want to add them to our existing Android project so we can use `libtunet`.

### Android.mk

First, create a file named `Android.mk` inside directory `jni`. `JNI` stands for `Java Native Interface` which allows you to use C functions in Java code and the other way around. It seems a convention to put those configuration files inside `jni` so I will do the same (some also put `jni` inside `cpp` directory just beside `java`).

```makefile
include $(CLEAR_VARS)
LOCAL_MODULE := ssl
LOCAL_SRC_FILES := ../openssl-curl-android/build/openssl/$(TARGET_ARCH_ABI)/lib/libssl.a
LOCAL_EXPORT_CFLAGS := -I$(LOCAL_PATH)/../openssl-curl-android/build/openssl/$(TARGET_ARCH_ABI)/include
include $(PREBUILT_STATIC_LIBRARY)

include $(CLEAR_VARS)
LOCAL_MODULE := crypto
LOCAL_SRC_FILES := ../openssl-curl-android/build/openssl/$(TARGET_ARCH_ABI)/lib/libcrypto.a
LOCAL_EXPORT_CFLAGS := -I$(LOCAL_PATH)/../openssl-curl-android/build/openssl/$(TARGET_ARCH_ABI)/include
include $(PREBUILT_STATIC_LIBRARY)

include $(CLEAR_VARS)
LOCAL_MODULE := curl
LOCAL_SRC_FILES := ../openssl-curl-android/build/curl/$(TARGET_ARCH_ABI)/lib/libcurl.a
LOCAL_EXPORT_CFLAGS := -I$(LOCAL_PATH)/../openssl-curl-android/build/curl/$(TARGET_ARCH_ABI)/include
include $(PREBUILT_STATIC_LIBRARY)
```

The above three blocks are all the same.

1. First, we do `include $(CLEAR_VARS)` which is necessary for `Android.mk`.
2. Then, we name the library we are including into the Android project. Here for example, we have `curl` for `LOCAL_MODULE`, then later we can use `libcurl` to point to this static library.
3. Since we are including a static library, `LOCAL_SRC_FILES` refers to the prebuilt `.a` file. I cross-compiled these libraries ahead of time and put them in the path shown above ([next post](/posts/compile-openssl-and-curl-for-android) will be on this topic).
4. `LOCAL_EXPORT_CFLAGS` is usually for making the library's include files to be seen in the rest of the Makefile.
5. `include $(PREBUILT_STATIC_LIBRARY)` says this block is about a prebuilt static library. We can also use _shared_ one. Visit [NDK docs](https://developer.android.com/ndk/guides/android_mk) for more information.
6. Just to mention, `$(TARGET_ARCH_ABI)` is a helpful macro to be equal to the ABI you are building for. So I can always link the right architecture of the libraries.

With three blocks, we have told NDK to include these three prebuilt libraries. Now let's check out the part for our final lib -- `libtunet` for Android.

```makefile
include $(CLEAR_VARS)
LOCAL_C_INCLUDES := $(LOCAL_PATH)/../openssl/include $(LOCAL_PATH)/../curl/include $(LOCAL_PATH)/../tunet-c/cJSON $(LOCAL_PATH)/../tunet-c/sds $(LOCAL_PATH)/../tunet-c/utf8proc
LOCAL_MODULE := tunet
LOCAL_SRC_FILES := tunet-jni.c ../tunet-c/src/tunet.c ../tunet-c/lib/portal.c ../tunet-c/lib/parser.c ../tunet-c/lib/list.c ../tunet-c/lib/utf.c ../tunet-c/utf8proc/utf8proc.c ../tunet-c/sds/sds.c ../tunet-c/cJSON/cJSON.c
LOCAL_STATIC_LIBRARIES := libcurl libssl libcrypto
include $(BUILD_SHARED_LIBRARY)
```

Most of the lines are similar. I just need to point out the following:

1. `LOCAL_C_INCLUDES` is for what its name implies. I haven't tested if its redundant and `LOCAL_EXPORT_CFLAGS` is sufficient.
2. Here `LOCAL_SRC_FILES` refers to all source files. Luckily we do not need to include header files as we do in regular `Makefile.am`.
3. `LOCAL_STATIC_LIBRARIES` are libraries we need to compile against. We use the three declared earlier here.
4. Finally `include $(BUILD_SHARED_LIBRARY)` build the whole `libtunet` library so we can use it in Java using `System.loadLibrary("tunet");`.

> Notice:
>
> In `LOCAL_SRC_FILES`, it seems ok to use relative paths, but not for `LOCAL_C_INCLUDES`. Use macro `$(LOCAL_PATH)` instead.

Now we've completed the setup. Now we need to add this `Android.mk` to our Android project. You can do this in `Android Studio` but either way you will get the following result in your `app/build.gradle`:

```groovy
android {

    ...

    externalNativeBuild {
        ndkBuild {
            path file('src/main/cpp/jni/Android.mk')
        }
    }
}
```

### Android.mk

This file is for general configuration. I just added one line to it:

```makefile
APP_ABI := all
```

to build for all ABI variants. Nothing fancy.

Hooray! 🎉 Now if you build the project and generate an APK, you can see `libtunet.so` in it.

### JNI bridge file

Although you can load the native library now, you cannot use it in Java yet. We need a bridge file to convert C functions and types to Java's.

Wait! I forgot to explain one file in `Android.mk` above. In `LOCAL_SRC_FILES`, there is one `tunet-jni.c` and this is our bridge file.

Let's take a look:

```c
#include <jni.h>

#include "../tunet-c/src/tunet.h"

JNIEXPORT void JNICALL Java_io_robertying_campusnet_helper_TunetHelper_tunetInit(JNIEnv *env,
                                                                                 jobject this,
                                                                                 jstring path) {
    tunet_init();
    CA_BUNDLE_PATH = (char *) (*env)->GetStringUTFChars(env, path, NULL);
}
```

The Java types in C are defined in `jni.h` so we need to include it in the first place. `JNIEXPORT <return-type> JNICALL` is necessary if this function needs to be used in Java.

One that needs mentioning is the function name and arguments.

- `Java_io_robertying_campusnet_helper_TunetHelper_tunetInit` is named because my package name is `io.robertying.campusnet` and `tunetInit` is a member function in class `TunetHelper`. `TunetHelper` is in a subpackage in `io.robertying.campusnet` package.
- `JNIEnv *env` and `jobject this` are Java stuff that we can get in C functions so that we might do some conversion from C data to Java objects. The rest of the arguments are passed in the order of Java arguments getting passed.
- In this function, I use `GetStringUTFChars` in the `env` to convert a Java String named path to C char\* type data.

Now for this simple JNI function, we have completed C side setup. Java side work is much easier:

```java
package io.robertying.campusnet.helper;

...

public class TunetHelper {

    private native static void tunetInit(String caBundlePath);

    ...

}
```

In short, just add `native` for declaration and make sure:

1. Arguments are consistent: `String caBundlePath` with `jstring path`.
2. `Java`, package name, class name and function name concatenated to be C side function name.

> Notice:
>
> The rest of the `tunet-jni.c` file may contain some conversions between Java class defined enum and C int defined enum. Check out Stack Overflow if you find yourself confused.

Okay! Now we can finally use C functions in our Android project. 😋

## How about CMake?

To be honest, Google recommends using `CMake` for NDK now. But for libraries like `openssl` and `curl`, they do not have `CMakeLists.txt` out of the box. So I think using `ndk-build` (i.e. `Android.mk`) is easier.

`htmltidy` is a `CMake` project. And it's _so_ easy to use it with `NDK`.

**Add it to your gradle configuration and you are done.**

Well my problem is Android cannot have different build systems on the same module! The module I am talking about refers to `app` now. Every project should have that one by default.

We have used our `Android.mk` on module `app`. 😅 So let's make a new module. You can add a new module to the same project using `Android Studio`. It's called `Android Library` if I remember it right.

After that, we can see another `build.gradle` for this module. I named it `htmltidy` so it's in `htmltidy/build.gradle`:

```groovy
apply plugin: 'com.android.library'

android {
    compileSdkVersion 28

    defaultConfig {
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0.0"

        externalNativeBuild {
            cmake {
                arguments "-DBUILD_SHARED_LIB:BOOL=OFF"
            }
        }
    }

    externalNativeBuild {
        cmake {
            path file('../app/src/main/cpp/tunet-c/tidy-html5/CMakeLists.txt')
        }
    }
}
```

`externalNativeBuild` links the CMake project to your project using its `CMakeLists.txt`. And that's it! Now `libtidys` gets built every time we build module `htmltidy`. `arguments "-DBUILD_SHARED_LIB:BOOL=OFF"` is to only build a static library.

### Integrate CMake module to existing NDK

Let's say my `libtunet` later requires some functions from `libtidya` (htmltidy) so I added the same block to my `Android.mk`:

```makefile
include $(CLEAR_VARS)
LOCAL_MODULE := tidy
LOCAL_SRC_FILES := ../../../../../htmltidy/.externalNativeBuild/cmake/$(APP_OPTIM)/$(TARGET_ARCH_ABI)/libtidys.a
LOCAL_EXPORT_CFLAGS := -I$(LOCAL_PATH)/../tunet-c/tidy-html5/include
include $(PREBUILT_STATIC_LIBRARY)
```

Just a slight difference: we need point `LOCAL_SRC_FILES` to module `htmltidy`'s build dir. Here `$(APP_OPTIM)` is either `debug` or `release`, so we can keep `libtidya` in sync with the whole app.

And in the final `libtunet` setup:

```makefile
include $(CLEAR_VARS)
LOCAL_C_INCLUDES := $(LOCAL_PATH)/../openssl/include $(LOCAL_PATH)/../curl/include $(LOCAL_PATH)/../tunet-c/cJSON $(LOCAL_PATH)/../tunet-c/sds $(LOCAL_PATH)/../tunet-c/utf8proc -I$(LOCAL_PATH)/../tunet-c/tidy-html5/include
LOCAL_MODULE := tunet
LOCAL_SRC_FILES := tunet-jni.c ../tunet-c/src/tunet.c ../tunet-c/lib/portal.c ../tunet-c/lib/parser.c ../tunet-c/lib/list.c ../tunet-c/lib/utf.c ../tunet-c/utf8proc/utf8proc.c ../tunet-c/sds/sds.c ../tunet-c/cJSON/cJSON.c
LOCAL_STATIC_LIBRARIES := libcurl libssl libcrypto libtidy
include $(BUILD_SHARED_LIBRARY)
```

Add `libtidy` to `LOCAL_STATIC_LIBRARIES` because we name it `tidy` earlier in `LOCAL_MODULE`.

### App build sequence

Everything seems perfect now. However, you will sometimes find out when compiling `libtunet`, `libtidys.a` is missing.

It is because module `htmltidy` is built before module `app`.

In `app/build.gradle`:

```groovy
dependencies {
    implementation project(':htmltidy')

    ...
}
```

Declare `htmltidy` as an implementation so it gets built before `app`.

You also need to change the setting here in `settings.gradle`:

```groovy
include ':htmltidy', ':app'
```

So it will compile module `htmltidy`. _This addition or the module order seem somehow unnecessary. I don't know..._

Alright, now you are free to use a CMake C project with an autotools C project, integrated into your awesome Android Java using the magic of NDK!

_Two build systems in one harmony..._ 😊


I have been working on an Android app with which I wanted to integrate my previously written C library. It uses GNU autotools to generate Makefiles and build from them. Later on, I also needed a library which uses CMake. This post talks about the way I implement the two C library of different build systems with Android NDK to use them in my app.

Use Android NDK with Different Build Systems


## Inside campus

This is a good place to put some pictures of UofU campus. 😎

### Football

![football stadium](/images/football-stadium.jpg)

Utah's football is famous all over the country in NCAA and many people would come from other cities to see the match. They all are held in this stadium. The University also has a fan organization called MUSS. You can basically get cheaper tickets and special T-shirts to watch the game with other enthusiastic members. They have their own special seats and pre-game events. This is quite amazing if you are really into sports.

Unfortunately I did not go to any football game.

### Foam party

_Foam party_ is something I never heard of before coming to America. People dance in foam generated from some machine and it was just like a club. **EDM and crazy people!**

![foam party](/images/foam-party.jpg)

### Aditional facilities

There are also a lot other facilities to spend free time with. Students get _**free gyms and swimming pools**_.

I've also found out a game room with game consoles. Just beside it is a bowling room.

![bowling room](/images/bowling-room.jpg)

## Out in the City

We had a chance to watch a baseball and a soccer game in the city.

### Baseball

It was fun that we sat in an open area on one side of the field. There were lots of families with kids. They put some blankets on the grass and made it look like a picnic while kids were running wildly for fun. Parents like to take kids to the games and those kids probably would grow interest and join to play the game afterwards.

![baseball grass](/images/baseball-grass.jpg)
![baseball children](/images/baseball-children.jpg)

But the baseball game was _too long and kind of boring_. It took almost 4 hours, but the crowd seemed always excited. Out of tradition, they would sing a special song and make beats to cheer whenever possible. It was overall nice to be in such atmosphere.

### Soccer

Real Salt Lake vs New England Revolution. It seemed Americans like soccer no less than football. The stadium was full and the crowd went crazy after each goal. In the end, it was 4:0 (_I don't really remember but it was a big number_) and Salt Lake won! It was so exciting to see the victory in real!

![soccer](/images/soccer-game.jpg)

### Rodeo

It's really hard to understand what a rodeo is before actually seeing it. It is a special in the wild west because it's about horses and cowboys! You can see cowboys (even _**cowgirls**_!) trying their best to do complicated or dangeous actions on the field. You have to stand the heavy smell from horses, though. 😉

![rodeo](/images/rodeo.jpg)

### State fair

The state fair is quite like canivals or temporary amusement parks in China. A lot of local stuff was presented and plenty of equipments for kids to have fun with. It was really felt like going into some rural market. Everything was so raw and simple. The rodeo was part of the fair, actually.

![state fair](/images/state-fair.jpg)

## High in the mountains

![trail](/images/trail.jpg)

I also went to the mountains. Americans like hiking! People climb mountains or walk on the trail.

I hiked to one of the peaks, _Ensign Peak_. It was really amazing to see the sunset just in time.

![sunset](/images/sunset.jpg)

You can get a full view of SLC on the mountain. **It is so small a city.**

![SLC birdview](/images/slc-birdview.jpg)

On the road back to campus, you can see the city hall (_or state capitol?_). The building was in some style you see a lot in the States. Once I noticed there seemed to be many people dancing to DJs' music on the space in front of the building and it was fun!

![city capitol](/images/city-capitol.jpg)

## Amazing skies

In SLC you can see various skies. The scenery is extremely beautiful when the sun's going up or down. Snow can add more flavors to skies.

![SLC sky 1](/images/slc-sky-1.jpg)
![SLC sky 2](/images/slc-sky-2.jpg)
![SLC sky 3](/images/slc-sky-3.jpg)
![SLC sky 4](/images/slc-sky-4.jpg)
![SLC sky 5](/images/slc-sky-5.jpg)


Besides study, we exchange students were arranged to take part in many events. They were good ways to get to know a foreign country, its culture and people. Since SLC is not an ordinary city, there was plenty of special stuff to do.

Four Months in the U.S. Part III


![engineering building](/images/engineering-building.jpg)

## Overview

Although University of Utah is a public school, the size of a general class wouldn't exceed around 100. We have an _almost 300_ seat classroom in Tsinghua University. I believe 100 would be the most appropriate--**you have enough freedom and privacy, and are accessible to teachers**.

Courses are labeled by _department abbreviations and numbers_. Bigger numbers means more difficulty. It's very convenient and helpful to be able to spot and differentiate between courses when registering. For example, you can guess `CS 1100` would be an introduction course for Computer Science freshmen, while `CS 6520` seems to be a graduate course which may require some prerequisites and have more challenges.

Students in one course come from different years of study. This is quite a common phenomenon, which you barely see in Chinese universities where most of the courses are already planned to meet certain prerequisites. What surprised me most was there were many students who were already a mother of children or with a husband. It was really amazing to see people who should already graduate by now returned to study further, in the midst of bitter and sweet life.

## Course organization

Most of the courses in UofU are taught in class and homework is published afterwards. Two of my courses this semester, however, are in the form of _learning by videos, practicing in class and consolidating via homework_, which is similar to [MOOC](https://en.wikipedia.org/wiki/Massive_open_online_course). The interesting thing is I used to see this form only in liberal arts courses in China, but not something that works for engineering courses.

We can learn on YouTube from those videos shot by the professor. They are almost everything you need to master in courses. So in class, the professor just gave more examples and some tasks for volunteer students to try out. We would get all the scripts and files generated in the process after class, which was very useful for final reviews. For computer science courses, we did not ususaly get small quizzes. Instead, there were a certain number of homework that required a lot of time and energy to complete. This was very challenging, since you sometimes had to work on multiple from different courses in the same time.

![CS building hall](/images/cs-building-hall.jpg)

## Professors

There may not seem to be many differences between professors in China and the States. Probably because of the smaller size of class, professors can have better connections with students. Professors give lectures and ask if anyone has questions. That's it!

## Exams

One particular thing about exams I had in UofU is that professors always gave out a sample exam, whether it was something new with the same setting of coming exams or was a copy of last year's exam. This is really helpful for students to get a hold of what's coming. They also don't have the need to crave for previous exams, since they are already presented by professors, which means you always share _the information equality_ with fellow students.

## Students

I don't know if this is common in all American universities or just in UofU, students seem to have worse mathematic ability compared with Chinese students of the same age. But this is also something I hear about often in China, so I was not so surprised to see that students raised hands for very simple questions related to maths or plain concepts. On second thought, I think that _having the courage_ to raise questions in class can be accounted for the situation. You **cannot** know how many Chinese students may have stupid questions if they all are unwilling to talk it out aloud.

On the other hand, I also found some students who were active in class to be very smart--they always follow teachers' lectures and often point out what teachers have said wrongly.

Students also tend to solve questions in class, instead of asking questions in private with teachers after class. I've seen the latter a lot. It may have something with shyness or selfishness that they don't really want others know about the answers.

## Moments

### Fun

On one Computer Systems class, there was a demo to use a specific command. But see what happened when all the class were trying to figure out the correct spelling.

![class spelling mistake](/images/spell-mistake-in-class.jpg)

### First poster

This was my first poster for Natural Language course! It was nice to have this kind of experience.

![poster for Natural Language](/images/poster-natural-language.jpg)

### Favorite professor

Hope [Matthew](http://www.cs.utah.edu/~mflatt/) wouldn't mind my taking this picture, would he? 🙃

![favorite professor](/images/my-favorite-professor.jpg)


After settling down in SLC, study became a rather routine part. Courses in the U.S. are certainly different from those in China. From a Chinese student's perspective, students in the University of Utah, or should I say in the States, are somewhat very special.

Four Months in the U.S. Part II


At the beginning of 2018, my thoughts of going abroad thrived after we were given opportunities to take part in exchange programs from all over the world. I believe I've always wanted to visit the U.S., whether because of its advancing technologies or its diversity in people. I was only able to choose the University of Utah so that I could finally end up in America. It turned out _to be not so bad_, after all. Besides, I really would like **a change of mind** and some air far away from the heavy school work of my home university. So I decided to go.

## First stop - Los Angeles

![LA airport](/images/welcome-to-usa.jpg)

I had to transfer in Los Angeles before flying to Salt Lake City. First time I ever set my foot on U.S soil, I was so nervous and careful even when passing the security because all I thought of was _they may shoot me simply for doing something that seemed "suspicious"_. Yeah, _seriously_. Guess I was really terrified by the gunshot news. 🙃 People were all nice and patient, though. I didn't run into any trouble.

I got to take a first look at the city. It was dry and sunny. There was not much to see but only some tropical trees. I don't really like this kind of environment myself.

## 2002 Winter Olympics - Salt Lake City

I didn't know much about SLC except that it held 2002 Winter Olympics. I did do some research ahead of time but most of the impressions were about _strange_ Mormons. In general it was still a mystery before my arrival.

![SLC first view](/images/slc-first-view.jpg)

First impression: **clean and empty**! There are fewer cars and people. The city center is not big, making you hard to believe it's the state capital. You only get buses and trains (they are called Trax there) for public transportation. It's not so convenient as in China but Americans all have cars which makes public transportations less important in a wild west city.

![trax station](/images/trax-station.jpg)
![SLC view 1](/images/slc-view-1.jpg)
![SLC view 2](/images/slc-view-2.jpg)

University of Utah campus shares the same quality with the city. It's on the east side of the city and 30 minute ride far from it.

![campus bridge](/images/campus-bridge.jpg)
![campus Olympics residence](/images/campus-olympics-stone.jpg)

Large area of the campus was used for 2002 Olympics and also built as a result of it. I could see the buildings on campus were all pretty new and fresh. You cannot really sense their age unless you take a look at those bronze boards near the entrances with building dates branded on.

![board with date](/images/board-with-date.jpg)

### Live

Exchange students are required to live on campus. This was really nice and I didn't have to go through much trouble as some of my classmates in New York. The cost for apartment rooms, however, was indeed expensive even for the locals. I shared an apartment with two other roommates. We had a living room, a kitchen, two bathrooms and each one's own room. It was quite a nice setting.

![kitchen](/images/apartment-kitchen.jpg)

It would be much cheaper if people can make meals themselves in the United States. So a kitchen can be very useful. We got a fridge, a microwave and ovens... Everything! But my roommates seemed to only be able to cook instant noodles. 😂 Also, it was _way better_ to have one's own room both for study and entertainment. I didn't have to worry about being disturbed by night owls or early birds. 😋

One thing that was worth mentioning was the dryer. It is _**soooo nice**_ to have one at home. Clothes come out dry, fluffy and warm, saving you lots of time to hang them up. Speaking of this, we can use all the washing machines and dryers **for free**!

We also had RAs (Residence Assistant or Administrator?) to help out around and organize community events. Though I did not find many to be interested (or _at least myself_ :p), their ideas were generally simple and educating.

![house summer](/images/house-summer.jpg)
![house winter](/images/house-winter.jpg)

### Buy

The biggest difference for a foreigner in the U.S. to sense would probably be the prices. A bottled coke is generally $1.75, which is almost 12.25 yuan and **3.5 times** of its price in China (3.5 yuan). So If you do not earn dollars yourself, daily goods can be too much to afford. However, those goods manufactured from modern and industrialized assembly lines are fairly cheap in America itself if not compared abroad.

Another significant point worth noticing is that almost every item you see in the supermarket is _large or multi-packed_ that are so-called **family packs**. So indeed as people would say, cheaper stuff is much more tailered for big families, which you can barely see in China nowadays.

I got the Amazon Prime Student membership for free and thus had been using the benefits a lot. Prime members have access to two-day shippings which is almost standard in China (_you do not need any membership to enjoy the priviledge_). The service, however, was way better. I cannot count the times when I asked Amazon to get me a refund or cancellation, and they just did it, fast, responsive and willingly. I also tried Amazon's new Prime Now from the Whole Food they bought. It provides same-day shippings with a high bar of prices to get it for free, though. Goods from Whole Food were good but expensive, not something normal families can afford, I guess.

The last but not foremost thing is **Black Friday**! I did not go out to join the crowds, but I did spend a lot money online. Discounts were huge. Amazon processed refund or return requests efficiently during the Christmas season. On the contrary, you always need to wait until the shopping season to end in order to get these issues taken care of in China.

### Eat

![pizza](/images/pizza.jpg)

I would say the United States is _the desert of food_. You cannot really enjoy the food unless going to someplace expensive. This may sound arbitrary but it is what I felt. Burgers, pasta, pizza, sweets and ice cream. They are common American things to eat.

At first, I was excited to eat at the buffet place near the dorms. They have everthing listed above.

![American breakfast](/images/american-breakfast.jpg)

But I really had nothing else to choose and became bored. So if you are someone from outside the States, you'd better cook _yourself_. 😒

Apart from dining near the dorms, we could also choose to go to some fast food restaurant at school. I still remembered the first time I have ever bought a bagle. I was completely confused when they asked which kind of bagle (the bread) to choose, since I _cannot understand a word_ about bagles. It tasted good, but the price was too much to match the taste.

One restaurant I like best, though, is Panda Express! Many would say it's not _real_ Chinese cuisines. It's true. Something like **Orange Chicken** made me want to vomit immediately because it smelled so sour. I like **Kung Pao Chicken**! It's spicy and juicy!

The general price for a **bowl** of Panda Express is around $9 in Utah. Kind of expensive for me. But I later found out you also need to spend around $9 for one McDonald's meal. I guess eating out would not be a viable option if you want to save money.

Speaking of McDonald's, I have to mention Starbucks as well. One interesting aspect about Starbucks is the price of a coffee is _almost the same_ between China and the States. `$6 and 40 yuan`. In comparison, one McDonald's meal is _less than_ `$9 * 7 = 63 yuan` in China. You can see how Starbucks earns money in China, without any _price localizing_.

![pumpkin cake](/images/pumpkin-cake.jpg)


I decided to go on an exchange program in the U.S. last year for a change of mind. Four months in Salt Lake City, a beautiful and quiet place in the state of Utah has really given me something new to feel and think about. Life is completely different and there is much to explore.