Now, I use only two editors with extensions. VSCode & Hemingway Editor plus extensions like Spell Right, Grammarly.

Thanks to that I can keep a single source of truth for my articles on a git repository. I also avoid too much context switching.

1. Write the raw text in markdown using VS Code​

I write raw markdown text inside VSCode. Previously I used Typora which is a great editor but I missed my shortcuts and custom settings from VSCode.

Also, I wanted to simplify the process so reducing the number of editors seems like a good idea. I needed to use VS Code anyway to work with the blog's code & push changes to the git repository.

Protection from spelling errors​

I use Spell Right extension so all my typos are quickly pointed out.

Set up the extension to use proper language in markdown files. I decided to use English – United Kingdom dictionary as it is considered international.

To see the United Kingdom dictionary on the list you have to change spellright.groupDictionaries setting to false. Otherwise, you'll see only the "English" dictionary.

Settings for writings texts​

VS Code is predefined to write... code. The most important tweak I applied is word wrap. I don't like when my code is wrapped. I have this disabled for javascript etc. But while writing texts it is useful to be able to read a whole line with a single glimpse.

Here are my settings:

 "[markdown]": {
 "editor.wordWrapColumn": 80,
 "editor.wordWrap": "wordWrapColumn",
 "editor.quickSuggestions": false
  },
 "spellright.groupDictionaries": false

2. Copy & paste text to HemingwayApp editor​

Hemingway tells me which sentences are too long or complicated. It also points out all adverbs and non-essential words.

Improve grammar errors with Grammarly​

Grammarly works in Hemingway editor!

As a non-native English speaker, I often forget to add a/an/the articles. I make simple grammar mistakes as well. Grammarly helps me out here.

I was looking for quite some time where to use it. There is VS Code extension as well but I don't like having too many extensions.

Adding Grammarly to my browser saved me lots of work with copying content to yet another tool. Grammarly has its own editor which is pretty good. I don't involve it in the process as I want the process to be as easy as possible.

3. Copy content back to VS Code​

After some editing and polishing I copy the text back to VS Code and publish it to some internal audience. After some reviews I start to promote content on social media.

4. Create a hero image​

The last thing I like to do is to create a hero image. This is the image displayed when I publish a link to the blogpost anywhere on the internet.

I use Canva to create such images. I have created a template once and now I reuse it. I change title and add some drawing to make it unique among my other links.

Look at those two examples:

1. import { InputArea } from '~components/InputArea'
2. import { InputArea } from '../../../../../components/InputArea'

We will learn how to set up our environment to have the first variant working.

Aliases for src folder​

For this tutorial, I assume that we have a standard React Native file structure. We want to create aliases to directories inside the src folder.

├── App.js
├── __tests__
├── android
├── app.json
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── node_modules
├── package.json
├── src
│   ├── components
│   └── helpers
└── yarn.lock

Why is the tilde prefix ~ important?​

The custom prefix is helpful when it comes to distinguishing your local imports from third-party packages. One look and you know which imports are from the project.

Here are two examples with the helpers folder:

1. import something from 'helpers' // - without prefix
2. import something from '~helpers' // - with prefix

There is a package in the npm registry that is called helpers. If you decide to alias your helpers folder without any prefix then you risk a naming conflict.

I decided to stick with ~ as I haven't seen third party packages that use it. There are other popular prefixes as well — my recommendation is sticking with tilde

Install Babel plugin​

First of all, we have to add a proper plugin for the Babel compiler.

▶ yarn add --dev babel-plugin-module-resolver

Adjust Babel config​

Inside babel.config.js add plugins section. If it already exists, simply add module-resolver config like below. If you don't have this file. Then check for .babelrc or create one. All possible config files are listed in the docs.

module.exports = {
	// ... some other config
  plugins: [
  	// ... some other plugins
    [
      'module-resolver',
      {
        root: ['./'],
        alias: {
          /**
           * Regular expression is used to match all files inside `./src` directory and map each `.src/folder/[..]` to `~folder/[..]` path
           */
          '^~(.+)': './src/\\1',
        },
        extensions: [
          '.ios.js',
          '.android.js',
          '.js',
          '.jsx',
          '.json',
          '.tsx',
          '.ts',
          '.native.js',
        ],
      },
    ],
  ],
};

Options are as described:

1. root - a string or an array of root directories,
2. alias - a map of aliases,
3. extensions - an array of file extensions used in the resolver.

Regular expression as an alias​

To prevent adding each src subfolder separately we want to use a regular expression for path completion. You can see the docs about using regular expressions on babel-plugin-module-resolver Github page.

Restart metro process​

The last step to make it work is restarting the metro server. Simply use ctrl + c and then yarn start again in the terminal in your project.

If something is not working maybe you have to clear the cache - for that use yarn start --reset-cache command.

How to make VSCode alias autocomplete working?​

With the config above code will compile and work as expected. Now we would like to have autocomplete work with our newly created aliases (or IntelliSense as named by Visual Studio Code creators).

We have to enter jsconfig.json file (or create it if it's not working).

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

Inside jsconfig.json we have to specify two options: baseUrl and paths object. Here again, we are using a kind of regular expression to match all subdirectories in a single line.

TypeScript support​

What is interesting - in the TypeScript project I had to make a config a bit different to make it work:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {"~*": ["./src/*"]}, 
  },
  "exclude": ["node_modules"]
}

Notice the dot before src path. I don't know why it required such a change. Maybe you have some idea? Let me know!

You can also check config in the official docs for TypeScript aliases.

Restart TypeScript process in VSCode​

Autocomplete with new aliases should work immediately. If it is not maybe you have to restart TypeScript server (even for pure JS project as this server is responsible for autocompletion).

To do this open the command palette and type Restart TS server.

• easy to understand,
• scalable,
• reusable,
• minor boilerplate,
• hook centric.

After days of experiments, I managed to create a solution that made me satisfied. This article is a summary of my work. I believe this will be helpful to you.

How to use react-hook-form with React Native​

I decided to use react-hook-form as it gains more and more popularity and there are good reasons for that.

This article may be considered a forms tutorial in React Native.

You can use the approach presented in the article with formik or other similar packages of your choice. First read through the end and check if your form management package has similar API.

Imports, exports and other miscellaneous code like PropTypes is not included in code snippets to avoid overload. Examples are a simplified version of original files that can be found on git repository attached to this article.

0. Prepare project​

I've created new React Native project and prepared it for our example.

npx react-native init ElegantFormManagement

cd ElegantFormManagement

yarn && yarn start

1. Create login form UI without any logic​

Let's start with an easy task. We will create the wireframe of our form first. Add src/components directory inside the root of the project.

Now we need two new files Input.js and Login.js :

src
├── components
│   ├── Input.js
│   └── Login.js

Input.js​

Input.js is a wrapper for React Native's TextInput component. It has extended functionality to show label above the input field and (if provided) validation error beneath it.

<Label>{label}</Label>
<TextInput />
{isError && <Error>{error}</Error>}

A word about styling components​

styled-components will be used in the examples to make components more readable.

yarn add styled-components

Thanks to 'styled-components/native' (notice /native suffix) we can use React Native's components instead of HTML elements. For example styled.View instead of styled.div.

If you are not familiar with this method of styling this is a quick comparison:

const Label = styled.Text`
  color: ${COLORS.gray};
  font-size: 10px;
  letter-spacing: 2px;
`

// will look the same as:
<Text
  style={{
    color: COLORS.gray,
    fontSize: 10,
    letterSpacing: 2,
  }}
></Text>

Input.js code​

In the code below you can see that conditional rendering {Boolean(value) && <Something />} is secured by Boolean() function. If you are curious or don't understand why I did that read how conditional rendering in React Native may crash your app.

// src/components/Input.js
import styled from 'styled-components/native'

const Wrapper = styled.View`
  margin-bottom: 15px;
`

const StyledInput = styled.TextInput`
  border-color: ${(props) => (props.isError ? COLORS.red : COLORS.gray)};
  border-width: 1;
`

const Label = styled.Text`
  color: ${COLORS.gray};
  font-size: 10px;
  letter-spacing: 2px;
`

const Error = styled.Text`
  color: ${COLORS.red};
`

export const Input = ({ label, error }) => {
  const isError = Boolean(error)

  return (
    <Wrapper>
      {Boolean(label) && <Label>{label}</Label>}
      <StyledInput isError={isError} />
      {isError && <Error>{error}</Error>}
    </Wrapper>
  )
}

Login.js​

Login.js will be our form. For now, it is just mocked component. It consists of two input fields for username & password and a submit button.

// src/components/Login.js

const Login = () => {
  return (
    <View>
      <Input label='Username' />
      <Input label='Password' error="Password can't be blank" />
      <Button title='Login' />
    </View>
  )
}

App.js​

App.js is React Native's standard input starting scene. Remove everything from it and just render <Login /> form inside.

// App.js

const App = () => {
  return (
    <View>
      <Login />
    </View>
  )
}

Now our app looks like this:

To check full source code on this step visit branch 01-create-basic-ui on git repository.

2. Create a form​

The time has come to install react-hook-form package.

Install react-hook-form​

Stop your metro bundler and install the package using the following command:

yarn add react-hook-form

Now we are ready to introduce some logic into our UI <Login /> mock.

Import form's brain​

Our form will live inside an object returned by useForm() hook. Let's call this object formMethods.

Now import needed hook and add const formMethods = useForm() inside <Login /> component.

// src/components/Login.js
import { useForm } from 'react-hook-form'

const Login = () => {
  const formMethods = useForm()

  return (
    <Wrapper>
      <Input label='Username' />
      <Input label='Password' error="Password can't be blank" />
      <Button title='Login' />
    </Wrapper>
  )
}

Next, we will have to communicate with form fields. To achieve this we will pass formMethods to our Input components.

Full source code: 02-create-form on git repo.

3. Establish communication with form fields​

The biggest challenge in an elegant way of making things is to avoid too much "magic". Code needs to be easy to read but also understandable for other programmers. We write code for ourselves and our colleagues and not for the computer. If we would write code for the computer then we should use Assembly or even lower-level language.

React Context is just a little magic touch. It will simplify code and when used with care will not add much complexity to our solution.

What is React Context?​

Long story short instead of passing lots of component props we will provide the same information with so-called "context" to component's children. Then each child has access to the context through a hook 🎣.

Add FormProvider to pass form context​

I mentioned that our form lives inside formMethods. We have to pass the contents of this object to form fields. In this case, our fields are <Input /> components for username and password.

We put everything that is inside formMethods into context. To do this we have to import <FormProvider /> from react-hook-form. Now we pass everything from formMethods to FormProvider using object spread operator {...formMethods}.

import { FormProvider, useForm } from 'react-hook-form'

const Login = () => {
  const formMethods = useForm()

  return (
    <Wrapper>
      <FormProvider {...formMethods}>
        <Input label='Username' />
        <Input label='Password' error="Password can't be blank" />
      </FormProvider>
      <Button title='Login' />
    </Wrapper>
  )
}

Note that I'm not wrapping Button as a child of the FormProvider. It is a crucial element of our form as pressing it will submit the whole thing. We will interact with a button using good old props so it doesn't have to know everything that happens inside the form.

See branch 03-pass-context-to-fields

4. Add logic to the Input component​

Our UI skeleton of <Input /> is not doing anything yet except showing label and error. It doesn't provide props to manipulate <TextInput /> which is inside of it.

Pass props to Input​

We will use spread operator again to assign all Input props (except label and error) to object named textInputProps. Next, we have to pass this object to StyledInput which is just a styled version of standard React Native TextInput component.

// src/components/Input.js

export const Input = ({ label, error, ...textInputProps }) => {
  const isError = Boolean(error)

  return (
    <Wrapper>
      {Boolean(label) && <Label>{label}</Label>}
      <StyledInput isError={isError} {...textInputProps} />
      {isError && <Error>{error}</Error>}
    </Wrapper>
  )
}

Create FormInput wrapper​

We have a very simple Input component which is easy to test and expand in the future. Keep it this way.

We want to add logic into this component. Instead of adding the logic directly inside Input and tie it with our form management solution, we will create a new component. It will use Input internally and equips it with extra features.

FormInput takes control over Input​

FormInput takes a bit different props than Input. For example, it will decide internally about error, and value props of Input so we cannot pass such props to it.

We establish a connection with form headquarters. To achieve this we add useFormContext() hook which returns the object that we've passed through <FormProvider />. As an example, we can read all form errors accessing formContext.errors field.

Take a look:

// src/components/FormInput.js
import { useFormContext } from 'react-hook-form'

export const FormInput = (props) => {
  const { name, rules, defaultValue = '', ...inputProps } = props

  const formContext = useFormContext()
  const { errors } = formContext

  return <Input {...inputProps} error={errors[name]?.message} value={''} />
}

The name prop​

It is required for every field in the form to have a unique name. Therefore we pass name prop to every form field. It is an identifier of a field.

Errors object​

To show proper error on Input component access errors object from context. Then check whether there is an error message for our field errors[name]. If there are no errors then errors[name] is undefined - therefore we have to be careful. To access error message I use quite a new optional chaining operator (?.).

The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.

If there is an error message then Input will receive it. Otherwise, it will receive undefined.

useController​

We have a connection with form so let's use it! Well,... almost.

We will now use our form to store this FormInput's value. First, we have to create our field instance with useController hook. Take a look at the code example below:

// src/components/FormInput.js
import { useController, useFormContext } from 'react-hook-form'

export const FormInput = (props) => {
  const { name, rules, defaultValue = '', ...inputProps } = props

  const formContext = useFormContext()
  const { control, errors } = formContext

  const { field } = useController({ name, control, rules, defaultValue })

  return <Input {...inputProps} error={errors[name]?.message} value={''} />
}

In useController the most important config fields are name as mentioned before and control object. The connection between the field and form is established by providing the control object to the controller.

Keep in mind that control is a central point of the form, this is "the form's brain" I was mentioning before.

To add some restrictions for the field (e.g. maxLength, required) there is rules object. We can also use yup schema or custom resolver function.

field​

To keep the value and status of Input we have a field object.

From now on Input is controlled by field object so we pass value and event handlers (onBlur and onChange).

All properties of the field: { onChange, onBlur, value, name, ref }.

// src/components/FormInput.js
import { useController, useFormContext } from 'react-hook-form'

export const FormInput = (props) => {
  const { name, rules, defaultValue = '', ...inputProps } = props

  const formContext = useFormContext()
  const { control, errors } = formContext

  const { field } = useController({ name, control, rules, defaultValue })

  return (
    <Input
      {...inputProps}
      error={errors[name]?.message}
      onChangeText={field.onChange}
      onBlur={field.onBlur}
      value={field.value}
    />
  )
}

Notice that on Input component we use onChangeText prop to get string instead of event from input field: onChangeText={field.onChange}.

Login​

Change Input components to FormInput inside our main form view: Login.js.

I've also removed error prop from password Input as this is no longer demo view — it almost works!

LOGIN_FIELDS​

Forms can grow with time so it is wise to keep all constants in variables. I've created LOGIN_FIELDS const for field names. It prevents from making typos and searching for a minor bug for hours in the future.

// src/components/Login.js

const LOGIN_FIELDS = {
  username: 'username',
  password: 'password',
}

const Login = () => {
  const formMethods = useForm()

  return (
    <Wrapper>
      <FormProvider {...formMethods}>
        <FormInput name={LOGIN_FIELDS.username} label='Username' />
        <FormInput name={LOGIN_FIELDS.password} label='Password' />
      </FormProvider>
      <Button title='Login' />
    </Wrapper>
  )
}

Right now our form stores values and react to changes. Fields are connected with central formMethods object but we lack any validation and submitting. Let's dive into it in the next section.

To see full source check branch 04-create-form-input on a git repository.

5. Validate & submit​

To send data from a form we have to take care of the login button.

Create two handlers:

• onSubmit which takes a whole form as an argument when it is valid,
• onErrors which will handle errors in the form.

Now we pass handleSubmit function from formMethods to onPress prop of our button. handleSubmit function takes two callbacks as arguments — onSubmit and onError.

// src/components/Login.js

const Login = () => {
  const formMethods = useForm()

  const onSubmit = (form) => {
    console.log(form)
  }

  const onErrors = (errors) => {
    console.warn(errors)
  }

  return (
    <Wrapper>
      <FormProvider {...formMethods}>
        <FormInput name={LOGIN_FIELDS.username} label='Username' />
        <FormInput name={LOGIN_FIELDS.password} label='Password' />
      </FormProvider>
      <Button
        title='Login'
        onPress={formMethods.handleSubmit(onSubmit, onErrors)}
      />
    </Wrapper>
  )
}

No rules​

There are no rules so the form is always valid! At this point every button press will call onSubmit. onErrors is ignored. We have to add some restrictions for username and password.

Pass rules object as prop to FormInput. Notice that more complex rules as minLength are represented by an object and simple rule like required can be just represented by a string with an error message. To understand how rules works see react-hook-form docs.

At this point we could use yup schema instead of rules. Schemas are much more powerful in terms of form validation. I will not cover this here to not overcomplicate this article. If you're interested let me know in the comments! I can prepare "part 2" of adventures of the forms.

// src/components/Login.js

const Login = () => {
  const formMethods = useForm()

  const onSubmit = (form) => {
    console.log(form)
  }

  const onErrors = (errors) => {
    console.warn(errors)
  }

  return (
    <Wrapper>
      <FormProvider {...formMethods}>
        <FormInput
          name={LOGIN_FIELDS.username}
          label='Username'
          rules={{ required: 'Username is required!' }}
        />
        <FormInput
          name={LOGIN_FIELDS.password}
          label='Password'
          rules={{
            required: 'Password is required!',
            minLength: {
              message: 'Use at least 10 characters.',
              value: 10,
            },
          }}
        />
      </FormProvider>
      <Button
        title='Login'
        onPress={formMethods.handleSubmit(onSubmit, onErrors)}
      />
    </Wrapper>
  )
}

We have handled a very basic scenario of the login form. Now let's take a look at what we can improve in this simple solution.

To check full source code at this point check 05-submit-form branch on git repo.

6. Make every form field error-proof​

We mentioned before that form field requires name and form context. To achieve this we pass name through prop and we take context from useFormContext hook.

The assumption that the author of the code and every developer in the team will always pass proper prop and wrap our form in FormProvider is too optimistic. We have to make code error-proof.

It would be nice to give a proper message for the developer that something is forgotten. Unless we'd like to show our users one of those errors:

• TypeError: Cannot read property 'split' of undefined happens when you forget to pass name prop,

• TypeError: Cannot read property 'control' of null pops up when a field is not wrapped in FormProvider.

We could simply try to apply conditional rendering here like this:

//	... Don't do this:
const formContext = useFormContext()
if (!formContext || !name) {
  return null
}
const { field } = useController({ name, control, rules, defaultValue })
//  ...

But it would break React rule to not call hooks conditionally and if you have properly configured ESLint you'd see such error:

React Hook "useController" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return?

Another wrapper​

This might not seem so pretty at first glance but it makes things done:

• it keeps hooks call order always the same,
• makes the wrapped component safe.

In the code snippet below I renamed old FormInput component to ControlledInput and removed export from it to make it "private". This prevents importing of ControlledInput in other files in the project.

Next, I've created a new "public" component - the wrapper. Now this one is called FormInput and is exported from the file. Logic inside the wrapper is straight forward. It checks whether formContext or name is falsy and if this is the case wrapper returns <Input /> with a proper error message. I also block editing on those fields to make sure that integration tests fail.

Adding error messages makes it easier to debug when something goes wrong in the future. Thanks to this your automatic tests or QA team will detect instantly that something is wrong.

// src/components/FormInput.js

// "private" component - created from old "FormInput"
const ControlledInput = (props) => {
  const { name, rules, defaultValue = '', ...inputProps } = props

  const formContext = useFormContext()
  const { control, errors } = formContext

  const { field } = useController({ name, control, rules, defaultValue })

  return (
    <Input
      {...inputProps}
      error={errors[name]?.message}
      onChangeText={field.onChange}
      onBlur={field.onBlur}
      value={field.value}
    />
  )
}

// wrapper - our new FormInput
export const FormInput = (props) => {
  const { name, ...inputProps } = props
  const formContext = useFormContext()

  if (!formContext || !name) {
    const errorMessage = !name
      ? 'Form field must have a "name" prop!'
      : 'Form field must be a descendant of `FormProvider` as it uses `useFormContext`!'
    return <Input {...inputProps} error={errorMessage} editable={false} />
  }

  return <ControlledInput {...props} />
}

To see full source of FormInput.js at this point check branch 06-error-proof-fields.

What's next?​

With FormInput.js base you can similarly build other form fields like: FormChecbox, FormTextArea etc.

I could add more content here like:

• use yup schemas,
• describe how to focus password field from the keyboard,
• how to pass ref to FormInput,
• create a custom hook for shared form field logic,
• how to test form...

My first draft for this article contained all those things but it started to be overloaded! I can use it next time if you'd like to read it. Let me know!

I present a solution for mobile apps written in React Native, Unity, Android, iOS, Flutter and more but also for the Web! You can use single service to monitor all your products. The tool is Smartlook which is a powerful solution with lots of integrations and fast, responsive support.

Smartlook can be used for free but also has paid plans. No difference if you are using web or mobile, iOS or Android, regular mobile application or mobile game — this solution can be used without hiccup on all those scenarios.

After reading this you will have answers to those questions: how to track user activity on app, what is mobile app session recording and why record mobile app sessions.

This article contains affiliate links, which means that if you click that link and make a purchase, I will earn a commission. You pay nothing extra! Any commission I earn comes at no additional cost to you. When you decide to register to Smartlook please use link from this article. Moreover, this way you let me know that this content is interesting and support this blog.

I only recommend resources that I have used myself. These helped me to achieve my goals so it may be helpful also for you!

But what is app session recording?​

It's a video of your app being used by someone. Thanks to mobile app session replay you see how an app behaves on user's device, where user press on screen, what events are triggered, errors that happened under the hood and more based on your configuration.

Use cases — why it's a good idea to record sessions​

Some of you might think: "Why in the world my Android session recording would be helpful" or "What is the benefit of iOS app session recording". To show you mine benefits before we dive into technical details I would like to share practical use cases below.

New feature UX Analysis​

Release of an app update with new feature is always a big event. You are wondering if the users like it, do they even notice the changes? Maybe you introduced some errors with big new functionality. Maybe some button needs to be bigger or brighter.

While using in app session recording all those concerns can be measured. Combined video record and events deliver much information about usage. You can stop overthinking and forecasting if the update was good. With such data you can act immediately — for example increase conversion by hot-fix release with info bubble to new icon on menu.

Multiple real devices preview​

Testing an app on real devices is always an issue. There are farms of real devices to hire but for many companies or freelance devs it's too expensive solution. After tests on multiple simulators and few real devices there is often a decision to release and a team hopes for success. But how will you know that app looks terrible on some device or some particular feature doesn't work on some particular device manufacturer? Without good analytics you need to wait for user complaints and it can harm your reputation.

You may also find useful to preview app in specific region (city, country etc). It's very simple with Smartlook.

Session recordings + filters do the job. It's a bit tricky at first because very specific properties like screen_resolution or app_version_name are in API Identification section of filters.

My experience with Huawei & Google divorce​

According to previous paragraph I would like to share my own surprise during recording analyze. New Huawei doesn't contain Google services onboard. One of my apps use Google Maps therefore I didn't release it for AppGallery (Huawei's app store) as I assumed that it will not work. There is not impossible things for users though. Someone managed to install the app on brand-new Huawei smartphone and with Smartlook recording I was able to see that in fact my app works. Most of the features were working properly and in place of Google Map I saw white box with "This app won't run without Google Play Services, which are missing from your phone".

Better Support for your users​

Providing technical support for your app means that you are serious about your business. Unfortunately users that can explain what exactly went wrong are highly valued and... rarely seen. Additional questions often leads to more misunderstandings and stress for both sides - the user and worker that is trying to help.

In Smartlook you can add user fields to each session for example ID or email from your database. With user's ID you can check exact session that failed on video with additional events (screen navigation, button press, input interaction or custom ones) . Then if needed this piece of data can be provided to developers team with all specific information that otherwise would be guessed or your client would need to provide it with additional frustration. Imagine how this speeds up entire process. It's a win-win scenario.

App stability monitoring​

Filtering sessions with error is another feature that helps me to improve stability in the app. In case app did not handle any exception Smartlook will automatically report stack trace out of the box.

I use also other tools to report crashes but having only stack trace and events sometimes isn't enough. Video with exact timestamp and step by step events helps me analyse sessions that failed and improve app stability. When the app process is killed by the crash, video is going to be rendered and sent to the server once a new session is started.

If your app uses Crashlytics then you can integrate it with Smartlook! Then in Crashlytics dashboard, there should be a new SMARTLOOK SESSION URL key-value pair with link to your Smartlook dashboard. Once opened, you can directly play recording just before the crash. In the documentation there is section in Android and separately in iOS. React Native is only a wrapper for native libraries so you should be able to call Crashlytics setup from additional public SDK methods. That can be found in Android and iOS docs section.

Types of gathered Data​

Events​

The most basic analytical tool is events. With events you can track any action. A visit to screen, a click on a button or a function being used.

Smartlook gathers all press events by default. When user tap/press/click any interactive element such as button this will be logged.

Another basic event that is interesting is screen visit. Every change is monitored therefore you have statistics for each view in your app. This can be easily integrated with React Navigation and Unity. To track screen changes in some supported technologies Smartlook.trackNavigationEvent method from platform API needs to be called while changing screen.

Often we have to gather custom events to measure conversions. It as easy as call to Smartlook.trackCustomEvent method. You can add custom properties to have more information than just action occurrence. For example we can be interested how ofter people with role "customer" refresh list of products - we could track every refresh function call and add user's role as parameter.

Events can be used as filters to jump to a moment in recorded video when the tracked action happened. This saves time because you don't have to watch unimportant parts of a recording.

While watching a video of session and some event makes you wonder how many other people do this action you can instantly preview statistics or add it to Event Manager. This is a powerful tool to view statistics, compare data and setup email reporting or export data to file.

On the above image you can see Event Manager with two events occurrence comparison: Enter our new scene and Errors. I wanted to check if introducing our new feature increased number of sessions with app crash. In top right corner I expanded "more" section to show you currently supported options.

Video Recordings​

This is what distinguishes Smarlook from other analytical tools I have used. Efficient and privacy concerned video recorder. I mentioned in previous paragraph that events are common in such tools. Possibility to watch the process of app usage till some event happens is pure gold in improving usability. Simple list of events in chronological order will never give the same information as recording with those events attached on video players timeline. You can see where user hesitate, what takes longer than it should, where button is too small and taps don't hit the bounding box - using only event log you loose all those information!

Visitor journey is a section where recordings for specific user are kept in order. Thanks to this feature you can track returning user's behaviour. In some solutions single operation takes multiple enters into application - for example discussion about an issue in some programming tool before action "resolved" can be clicked.

Notes inside the video player. In Smartlook there is a possibility to pause a video and add note to specific time in video. If you want the whole team can be notified about new notes thanks to Slack integration.

You can also setup playback speed to slow down some actions or really speed up things. What also saves time while watching is automatic fast-forward for a replay - you can use an event to filter interesting interaction. Selected event will be displayed as a flag on the timeline and playback will start 5 seconds before the action occurrence.

Generate a link with exact time on video to share is a useful feature when working with a team. You just send a link with specified moment on the video and your coworker doesn't have to look for specific event on its own.

I personally like to filter by video duration. Usually videos that are shorter than 10-15 seconds are not showing anything worthy watching. There might be exceptions so it depends on the situation but keep in mind that this attribute is also well propagated and displayed on all views with to video recording.

Funnels​

Funnel is a sequence of events. Single event is an atomic value - a single action. While funnel is the whole operation that involves many steps happened one after another. For example making a purchase may be a process from search, entering item details, checking opinions modal, clicking purchase, fill payment form etc.

On each step of such complex procedure you lose customers. Thanks to funnel monitoring you are able to find where are the biggest drops of users. This gives you tools to improve your solution and make process more user friendly.

Another place where Smartlook's creators are ahead of competitors is preview of lost users sessions. On every funnel you can see how user interacted with an app when action was fulfilled but also preview of sessions where users decided not to go with your desired path. This is a powerful feature that not only shows percentage of lost users between specific steps but gives information why they decided not to make the next action.

What is also worth mentioning is a fact that when you create a new funnel there is no need to wait for data. Thanks to gathered data and created events you can see historical results instantly after funnel creation. Of course it's not the case when you want to track custom event or screen that don't exists yet but it's quite obvious.

Doubts​

Adding new tool into app should always make developers think about outcomes. I always do research because I don't want to add something that will increase amount of unnecessary work, issues or legacy code to maintain. This tool created two main concerns in my head which are described below.

Privacy​

Privacy was my biggest concern about session replay. When I saw the recording for the first time I had this strange feeling that I'm doing something... morally debatable. I wasn't comfortable at all with this videos. But after rethinking the whole topic I understood that actually it's not wrong at any way because:

• I don't know what the user is typing thanks to "sensitive views" masking mechanism. It covers all components marked as sensitive data with a single colour rectangle. Keyboard is replaced with "user interaction" box as well.
• All form input fields are covered. You can mask whole forms or single fields. You can also ignore elements so it will be displayed in recordings but values will not.
• In apps that I produce users are doing business as usual - it's nothing more than clicking on elements that I also click while testing. I guess it would be bigger challenge if my apps were social media or communicators because then I would need to mark almost all components as "sensitive".
• The company behind Smartlook is from the EU and their tool is GDPR compliant. General Data Protection Regulation (GDPR) is a regulation in EU Law on data protection and privacy in the European Union and the European Economic Area. Those rules are quite strict and you don't want to break them. Definition is on Wikipedia.

Impact on app performance​

Recording a movie on a smartphone that contains whole screen doesn't seem as good idea to me at first. I thought that it will make our app totally unresponsive and heavy especially for users with older devices. I'm happy to announce that I was wrong.

First of all you don't have to record everything and everywhere. In Smartlook's admin panel you have "Recording enabled" setting that can be disabled at any time. This propagates to all users and their devices are no longer doing extra work. It is very comfortable as you don't have to release new version of the app to just change config. For example if you want you're able to record few days after new feature was released and then stop recordings for as long as you wish.

More interesting settings that are manageable for web panel and can impact performance are: Recording quality, Recording frame rate and Rendering mode. For the rendering mode there are multiple options that are described more on Android or iOS docs. Good information is that the "move making" process is native and for React Native it is important because it doesn't lock JavaScript thread.

Smartlook is used for games analytics. In this industry performance is crucial. Every FPS that you lose is a unsatisfied player. Smartlook integrates well with Unity for Android and iOS. Take into account that Smartlook Unity iOS SDK works with Metal graphics API only. For Unreal Engine support is restricted to iOS devices only.

Mobile data uploads​

Sending videos through mobile data may make your users angry at some countries. There are places where mobile data packages are still very expensive so I was worrying about it. By default Smartlook will send all gathered data only through WiFi.

If you really want it then it's not restricted but use this setting with caution. There is an option that will allow data uploads using the end users' mobile data connection.

Setup done in a few clicks​

At first I wasn't really convinced that Smarlook will help my team. Then I checked how much work it is to add this tool to my app and it's really easy. Technically it is straight forward installation that takes few minutes (with in account creation counted in). Guide in docs is step by step and for React Native as well as Unity engine there is no rocket science to add the library. Things get even easier when your app is native Android or native iOS then all your work is to just download and import proper library.

Concluding if you are still not sure that Smartlook is for you - try it! Testing the solution is the best way to find out what are the benefits and considering that it takes almost no time to install so why not to check this out?

Smartlook Integrations​

Powerful tools fits into company's ecosystem. That is the case with Smartlook - number if integrations is high and still rising. Just to mention some tools that you might be using Smartlook integrates well with:

• Slack
• Google Analytics
• Google Tag Manager
• Sentry
• Wordpress
• Prestashop
• WiX
• Drupal

Discord support — devs for devs​

I had some questions about Smartlook with React Native and I was looking for support. It was nice surprise that the team of developers actually has specific Discord channel for technical support. We all know helpdesks where you need days to fix the issue and wait for response - there is no such thing in Smartlook company.

I was talking directly with developers who created the library and I had a premium level support although I wasn't even a real customer for them at the time! My issue was resolved in few sentences - they even created specific channel on Discord for my case to keep things organised. Such attitude toward the client is something worth to mention!

I would like to share with you the extensions that I have currently installed. I’m working as a React Native developer so JavaScript centric section will be the biggest one but not the only one!

There is a bunch of general-use extensions that will increase the happiness of your coding time. Doesn't matter what technology you are using!

Must have — My top 3 VSCode extensions​

Settings Sync​

Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist. Shan Khan

First and the only extension I install after changing workspace (new computer, fresh account, editor reinstall or disk formatting). I have all my extensions and settings stored safely on Github Gist. It is also useful to share with teammates to compare and customise their editors.

ESLint​

Integrates ESLint JavaScript into VS Code. Dirk Baeumer

Linter is the most important tool while writing JavaScript code.

I started my career with C# and other strongly typed languages with rich-featured IDEs. It is natural to me that when something is underscored red it will not work.

Without configured linter, you can make syntax error and you don't know it. You will be notified in the browser's console — it's too late. _In React you might be informed a bit earlier — still too late _

This extension gives you nice feedback in the exact moment of writing. In my team, we've configured git hooks that won't allow anyone to push project with linter errors. It makes project more stable. This also eliminates wasting time on pull requests. No more searching for typos or mistakes that are easily eliminated with a linter rule.

GitLens — Git supercharged​

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more Eric Amodio

I work in projects that have a long lifecycle. So I ofter work in files that were written by me or my teammates a long time ago. Then edited many times to satisfy business requirements.

Here is where git shows it's power with the whole history of the file. This extension gives me tools to navigate through the history of the file commit by commit. Like in a book - page by page. Using arrow buttons.

It also shows the last commit for each line with the date, message and author's name. I use it a lot to get the context of the code I'm looking at. Setting up mindset is much faster when you understand why somebody has written that line in this particular way.

VSCode extensions for React Native, React and JavaScript​

Auto Close Tag​

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text Jun Han

When I open some new tag it will automatically create closing tag for it. For example I type <Component> and this extension adds </Component> immediately. It works for JSX/TSX.

Auto Rename Tag​

Auto rename paired HTML/XML tag Jun Han

It is similar to the previous extension. When I edit one tag paired one will be edited as well so I don't need to revisit it. It works for JSX/TSX.

Auto Import​

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX steoates

Color Highlight​

Highlight web colors in your editor Sergii Naumov

Whenever I have a hex colour in my opened files the colour will be set as background of the string. For example {myColour: '#AA0000',} will highlight #AA0000 with red background.

ES7 React/Redux/GraphQL/React-Native snippets​

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax dsznajder

Basic snippets set. For example I write rafcp and it autocompletes my file with a React Arrow Function Component with ES7 module system. Basically this where $1 is name of the file.

import React from 'react'
import PropTypes from 'prop-types'

const $1 = (props) => {
  return <div>$0</div>
}

$1.propTypes = {}

export default $1

It's very big set and constantly improved.

Highlight Matching Tag​

Highlights matching closing and opening tags vincaslt

Very useful extension to highlight paired tag with underscore. It helps to navigate through JSX tree.

Name That Color​

Get a friendly name from a Hex color representation. Guillaume Doutriaux

I don't like to lose time to think: "should I name this colour just secondaryColor or make some sensible name for it like blueSky?". This extension names every hex colour. For example it can tell you that: #B10000 is Bright Red or even #bright-red.

Prettier - Code formatter​

Code formatter using prettier Esben Petersen

Format your React Native code automatically to avoid time-consuming unneeded discussions among your team. We do formatting on every commit. I also have tendency to press "Format Document" shortcut very often...

Remember to setup .prettierrc config file with Prettier docs to customise your formatting.

React PropTypes Intellisense​

PropTypes intellisense for React components Of Human Bondage

The extension finds React PropTypes and adds them to the suggestion list.

sort-imports​

Sort ES6 imports automatically. VSC Sort Import

I like to have my libraries imported at the top of the file and local files lower separated with newline. This extension makes it semi-automated.

exports autocomplete​

autocompletes javascript module exports from your project capaj

React Native Tools​

Debugging and integrated commands for React Native Microsoft

Debugger and multiple helper functions of React Native. If you like to do everything from editor instead keeping several terminals open — it will be good for you.

vscode-styled-components​

Syntax highlighting for styled-components Julien Poissonnier

Styled Components has multiple fans in React (and React Native) world. But using Tagged Template Literal as a string without colours is... ugly? Doesn't nice? Colouring is increasing your productivity and makes code more readable and I'm all into readability.

Other extensions​

Working with a team​

Jira and Bitbucket (Official)​

Bringing the power of Jira and Bitbucket to VS Code - With Atlassian for VS Code you can create and view issues, start work on issues, create pull requests, do code reviews, start builds, get build statuses and more! Atlassian

It gives me great pull-request experience without leaving the code editor. Much better than doing reviews inside the browser.

I make new branches out of Jira tickets without leaving the editor. I really like this extension and I recommend it to all Bitbucket users.

It is mostly useful if you are working with the team though.

GitLab Workflow​

GitLab VSCode integration Fatih Acet It gives preview of issues and merge requests created or assigned to you. It also extends VSCode command palette and status bar to provide more information about your project.

Marp for VS Code​

Create slide deck written in Marp Markdown on VS Code.

Marp, Markdown Presentation Ecosystem, provides the great experience to create beautiful slide deck. You only have to focus writing your story in Markdown document. Marp team

I'm a huge fan of Markdown. I also need to make a presentation from time to time so I decided to make my decks in markdown.

Extra profit — slides are easily convertible into the documentation. So I make two things with one effort.

This extensions brings Marp ecosystem inside VSCode. For example deck preview. If you are making presentations I encourage you to read more on their website.

Live Share​

Real-time collaborative development from the comfort of your favorite tools. Microsoft

This is great for pair programming. Especially useful with remote working and brainstorming with your team from home.

Improve coding experience​

All Autocomplete​

Create autocomplete items from open files in VSCode. Atishay Jain

Not everything is included in built-in autocompleter. Sometimes it is not possible for editor to understand context in the time of writing. When this happen it is useful to have just a list of used words — variable names, function names etc.

IntelliJ IDEA Keybindings​

Port of IntelliJ IDEA Keybindings, including for WebStorm, PyCharm, PHP Storm, etc. Keisuke Kato

For some time I was working with PyCharm then IntelliJ and it was easier at first to have the same shortcuts. Unfortunately It is not fully mapped so there is bunch of keybindings from IntelliJ and some from Visual Studio.

Usually when I need to do something in JetBrains tools it is easier for me to do it as I know many shortcuts. I don't know if I would recommend it if someone isn't migrating from those tools. I think it is better to use tools with basic settings unless you are fluent with some other tool and transition would cost too much effort.

Lorem ipsum​

Generates and inserts lorem ipsum text Daniel Imms

Helpful tool for prototyping. Instead of copy-pasting some dummy text from the web I just type a command lorem: Insert a paragraph or lorem: Instert a line.

Themes worth checking​

Brackets Light Pro​

A theme basic Brackets Light and more beautiful. EryouHao

One Monokai Theme​

A cross between Monokai and One Dark theme Joshua Azemoh

My favourite dark colour theme. It is the one :)

Other languages support​

Excel Viewer​

View Excel spreadsheets and CSV files within Visual Studio Code workspaces. GrapeCity

I use it to have nicer CSV preview as I work a bit with those files.

shell-format​

shellscript、Dockerfile、properties、gitignore、dotenv、hosts、jvmoptions... DocumentFormat foxundermoon

It's like Prettier but for bash.

shellcheck​

An extension to use shellcheck in vscode Timon Wong

ShellCheck is an open source static analysis tool that automatically finds bugs in your shell scripts.

I write scripts in bash that make some project files transformations. CI scripts are also written in bash. It is useful to have modern editing experience in such a language — I'm not writing scripts often and its syntax is different than anything known to me. It doesn't forgive mistakes.

YAML​

YAML Language Support by Red Hat, with built-in Kubernetes and Kedge syntax support Red Hat

If you do anything with CI then your config files are usually in YAML. This extension gives you powerful support of the language.

XML Tools​

XML Formatting, XQuery, and XPath Tools for Visual Studio Code Josh Johnson

I installed it to have nice XML formatting features. I like auto formatting :)

Conditional rendering using inline If with logical && (AND) operator as React docs says:

You may embed any expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical && operator. It can be handy for conditionally including an element — React docs: Conditional Rendering

{someValue && (
  <View style={styles.field}>
    <Text>{someValue}</Text>
  </View>
)}

This handy solution is used by many and it’s nothing new for our community to see in the code. How and why it can crash your React Native app?

When using it widely in your App without proper attention sooner or later you will see this error (or worse scenario your users will see that the app crashed):

Invariant Violation: Text strings must be rendered within a <Text> component.

Then you see such an error in your logs and scratch your head because usually it works, it may crash for one particular data entry or after some small API change. What happened? Hint: someValue type matters.

The array example​

Another common example of javascript operator wrong usage is rendering something is array contains any elements:

// Sooner or later this code will surprise users.
// Just wait for an empty array.
{dataEntries.length && (
  <View>
    <Text>Visible only when array is not empty</Text>
  </View>
)}

Above example looks fine at a first glance. Array's length will be 0 which is falsy thus condition is not satisfied and following component is not rendered — simple. This reasoning is partially good but author might forgot about one little fact that will surprise users at some point. Let's take a closer look.

How logical AND && operator in JavaScript works?​

Let's see the docs again:

Operator	Syntax	Description
Logical AND (&&)	expr1 && expr2	If expr1 can be converted to true, returns expr2; else, returns expr1.
[...]
If a value can be converted to true, the value is so-called truthy. If a value can be converted to false, the value is so-called falsy.

Examples of expressions that can be converted to false are:

• null;
• NaN;
• 0;
• empty string ("" or '' or ``);
• undefined.

MDN docs: Logical operators

Developers love that possibility to treat variables as falsy. Assumption is that when your variable for some reason comes not initialized from backend or other data source you have secured the code from rendering this part of View.

It seems to be a good strategy. We don’t want to show our user nicely formatted undefined string. It’s better to show nothing than null or NaN as well.

Note that description of AND operator says that it returns expr1 or expr2. It always returns one of inputs — not converted. Again: it converts expr1 to Boolean and evaluates result but then returns original value not the converted one. Explained as pseudo code it should look something like this:

if (expr1 == true) {
  return expr2;
} else {
  return expr1;
}

Basically it is the whole gotcha but let’s dive into examples. I will use Boolean() JavaScript function to show you how values are converted.

String variable.​

Boolean('hello world')
// -> true

Boolean('')
// -> false

Boolean(' ')	// space
// -> true

'' && 'conditionally returned string'
// -> ''

'hello world' && 'conditionally returned string'
// -> 'conditionally returned string'

Empty string is falsy so AND operator will return '' because the condition is not fulfilled. Returning '' directly into ReactNative JSX will produce error Text strings must be rendered within a <Text> component and cause crash.

Numeric variable.​

Boolean(-1)
// -> true

Boolean(0)
// -> false

Boolean(1)
// -> true

0 && 'conditionally returned string'
// -> 0

1 && 'conditionally returned string'
// -> 'conditionally returned string'

Zero is falsy so logical AND operator will return 0 as the condition is not met. Returning 0 into ReactNative JSX will cause crash with Invariant Violation error again.

Other variable types worth mentioning.​

Boolean(null)
// -> false

Boolean(undefined)
// -> false

Boolean({})
// -> true

Boolean([])		// worth noting!
// -> true

From the above examples the most interesting from React Native developer’s point of view is array. Usually when we put array into conditional render we would like not to render anything if array is empty. Passing an empty array into logical expression without any preparation will mislead us. What one would need to do is to check whether length exists and is equal to 0.

Why React Native crashes?​

Rendering string in React Native must be wrapped with <Text>...</Text> component. But when we want to hide entire component when variable is empty with conditional rendering it may return an empty string directly into JSX. For example:

let optionalStr = ''

// [...] some logic that leaves `optionalStr` empty

{optionalStr && <Text>{optionalStr}</Text>} // crash

Now you know that above condition is not fulfilled therefore logical AND operator will return optionalStr directly into main JSX.

What about a numeric variable?​

Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. [...] — React docs: JSX in Depth

React tries to convert results of your expressions into a string, React element or array. This is why you see Invariant Violation: Text strings must be rendered within a <Text> component even if your variable was Number. It may be misleading while searching for this bug in a production code.

Why is it hard to find React Native conditional render error?​

This error is sneaky because it may take a long time before it shows up. You code may be working like a charm without any issues for months and suddenly something changes on API and type of that nullable variable changes suddenly to empty string or 0.

Why it works with variables that are null or undefined then? It will also work for booleans. React creators make our life easier and by default such variables are ignored in a JSX tree. It is special case and it will not be rendered.

React will also not crash when you put empty array directly into JSX as arrays can render multiple elements.

// below expressions will not crash your React Native app
<View>
  {false}
  {true}
  {null}
  {undefined}
  {[]}
</View>

React for web — zero appears​

Developing a website in React and not converting variable into boolean will also break things but not as much as on native platform. For web empty string or 0 will be rendered. It is normal string and those can be rendered in HTML. For empty string it is usually missed and everything works well as nothing appears on the screen. It may be spotted when one try to conditionally render numeric variable as some strange 0 appears on the site. But nothing crashes and users are not upset as much.

How to make conditional rendering safer?​

Just make sure to convert every variable into Boolean before using logical AND && operator.

You can do it multiple ways:

Double negation — !!dangerousData​

It’s an easy quick fix that will work and some experiments says that it’s execution time is faster than Boolean(dangerousData).

I do not recommend it though.

This solution’s main pitfall is a human factor. Someone in your team could think that it is pointless to do double negation as it goes from true -> false -> true. It may lead to “refactor” that will create potential crashes in the future as this error may not reveal itself at first. My number one principle while coding is readability.

Classic conversion — Boolean(dangerousData)​

This seems readable but as I mentioned above some say that it is slower in execution time so make your own research and decide if it is OK for your particular case. We can find news that in modern browsers it is optimized. You may also use some transpilers to change it before it goes to final code.

Rethink components architecture.​

Maybe you don’t need as many conditional renders in the component. Every component should be small and have simplified logic as much as it can. I have seen many overly complicated components with nested conditional renders and believe me it’s not something easy to maintain as your code grows.

Use Element variable​

In simple components sometimes you can use trick from React documentation with if and variable assignment preceding return.

// ...
  let message = <Text>'Hello there!'</Text>
  if (isVillain) {
    message = <Text style={styles.deepVoice}>'General React'oni!'</Text>
  }

  return <View>{message}</View>

Component is a function (if else in render)​

In class components it would be — render method is a function.

In function, you can call return inside if statement and it will not execute further on. It will have the same result as with Element variable above. We don’t need else here because when condition is satisfied execution will go on, otherwise it will be stopped on first render.

// ...
  if (isVillain) {
    return (
      <View>
        <Text style={styles.deepVoice}>'General React'oni!'</Text>
      </View>
    )
  }

  return (
    <View>
      <Text>'Hello there!'</Text>
    </View>
  )

Conditional (ternary) operator​

You can also use conditional operator (ternary expression) condition ? passed : failed but be aware that nesting those will destroy readability of your code. My advice is to set up no-nested-ternary rule for ESLint otherwise your code can become this: const thing = foo ? bar : baz === qux ? quxx : foobar; but with lots more of code because components rises very quick in amount of letters. Multiple elements inside nested ternary operator will make render complicated and unreadable.

// ...
  return (
    <View>
      {isVillain ? (
        <Text style={styles.deepVoice}>'General React'oni!'</Text>
      ) : (
        <Text>'Hello there!'</Text>
      )}
    </View>
  )

Explaining the array example (from the introduction)​

Just to remind you I was showing this example:

{dataEntries.length && (
  <View>
    <Text>Visible only when array is not empty</Text>
  </View>
)}

Now you understand that what really happens in above code is returning length to directly into JSX. It happens when length is falsy and it comes from logical operator implementation.

To simplify the example and make things more visible lets assume that dataEntries.length is 0 and following View with Text component is <Component />. Now we have:

{0 && <Component />}

This expression returns 0 which is converted to string '0' and you can see it as an error in React Native or as an extra character on the web.

The quickest fix possible is to make sure that we don't depend on falsy value but on boolean false.

Here are multiple fix scenarios:

Double negation​

{!!dataEntries.length && <Component />}

Classic conversion​

{Boolean(dataEntries.length) && <Component />}

Inline condition​

{(dataEntries.length > 0) && <Component />}

Ternary operator​

{dataEntries.length ? <Component /> : null}

Refactor, rethink, make it safe​

let coditionalComponent = null

if(dataEntries.length > 0){
	coditionalComponent = <Component />
}

Do you have other way to render on specific condition? Write it on Twitter or comments under this article. Let's talk about your observations with this problem.

First thing worth to notice is Nozbe’s multi-platform ability. You can use this to do list app on desktop - Windows, Mac, Linux, mobile - Android, iOS, iPad and web. Yes, there is official Nozbe for Linux package! They even have an app for Apple Watch.

Nozbe has a free plan as well as a premium one.

This article contains affiliate links - when you decide to register to Nozbe please use link from this article, so you will get a free month of premium account as a gift! Moreover, this way you let me know that this content is interesting and support this blog.

1. Mobile and desktop quick add widget​

Absolutely my top reason why I’m stick with Nozbe for longer. My previous to do app experience usually finished within few months of using. Simply adding a new task was too energy consuming.

It takes single tap on mobile or one shortcut on desktop to see quick add widget. It appears on top of your current window, so you can add task immediately when it pops into your head. Shortcuts described below.

For iPhone and iPad you can use quick add directly in Spotlight search box. On Android I use widget on my main screen and it pops up Quick Add input field.

It’s the fastest and best optimised way to add a task to a to-do app I have ever seen.

2. Nozbe hashtag syntax - stay focused on your work​

Second thing that makes my life easier and I especially love this as a programmer is a hashtag syntax. Simply type task in a specific format and it is sorted, prioritised, commented, set due date and more… It limits the number of clicks you have to do to accomplish your goal - which is adding task to your system.

Described above quick add widget supports this syntax as well as main input field inside the app.

Why do I like it? Because I don’t like when I’m forced to click, drag, select etc. form UI. It slows me down and distracts me from what I was going to do.

For example assume that we want to add a task to publish this blog post and

• set deadline to tomorrow,
• move it to a project “Blog”,
• setup time needed to 1h,
• add a category “Computer”,
• add a comment.

It would be lots of clicking in other apps. With hashtags, we can accomplish this with one liner: Publish post about Nozbe #Blog #Tomorrow #1 h #Computer ## Remember to write something nice about hashtags. Nozbe autocompletes those keywords so user don’t need to remember any of this! You can type # and choose with arrows option that suits you best. Keyboard only!

3. Nozbe keyboard shortcuts​

Back for a while to the keyboard context. Here are useful keyboard shortcuts:

1. Quick add task hotkey:

   You may need to enable it first in Settings -> General

   • Windows, Linux: Ctrl+Shift+Space
   • Mac: Control+⌘+T
   • Web: Space - works only on app website

2. Create new task:

   • Windows, Linux: Ctrl+N
   • Mac: ⌘+N
   • Web: A

3. Navigate through task list (helpful on weekly review):

   • use buttom/up arrows to select task
   • use left/right to arrows to open/hide task details

4. Mark task as done

   • Windows, Linux: Ctrl+D
   • Mac: ⌘+D

Missing shortcuts:

• I would like to use only keyboard but there are missing shortcuts - navigating through projects list and categories lists. With those shortcuts we could use keyboard only but until then we still need to use touchpad or mouse.

4. To do list app for couples​

Shared list of tasks can improve your relationship. I’m not joking right now - using productivity tools and knowledge doesn’t need to narrow only for business purposes. We have started using Nozbe for household tasks and it works amazing. Another example is planning a journey together when you divide some tasks between two of you.

Creating a project “Home” with you and your partner as participants is natural and not interfere with your private projects. Simply “invite people” to desired project and that's it. Both of you see only shared projects.

Beware that it will limit excuses about “forgetting about something” so use this tool with caution! :)

5. Push notifications with plan summary to prepare one day ahead​

Small, yet highly mobilizing feature. You can set up mobile app to send push notifications not only when task is going to happen next few minutes. Nothing is permanent - user can set according times or even disable those notifications.

In the evening you can receive notification with tasks for next day to prepare your mind for upcoming challenges or modify it.

Next summary notification can arrive in the morning with all tasks that you need to complete today. This is your ally. You can briefly plan this day in your mind with one look at notification or go into detail clicking on it.

You can also think about sync with google calendar - it is a quick process and gives nice view for calendar planning. Consider setting up notifications properly to avoid double reminders. There is a special checkbox in Nozbe settings for it.

6. Community and productivity resources​

Nozbe is not only the app. It may be your whole productivity ecosystem if you let it.

Creators of the app are people focused on productivity. They record podcast, write a blog, course, moderate facebook support groups, record youtube videos and more. There is a book about productivity! (Book is described below).

I highly recommend not only download the app but also gain knowledge from creators about workflow with Nozbe or tasks in general. All functions are here for some reason and additional reading may give you “Aha!” moments that will change your way of dealing with to do lists.

The materials that they create are universal. If you decide to switch to another app you will take the knowledge with you.

7. Book from the creator of Nozbe added to subscription​

10 Steps to Ultimate Productivity by Michael Sliwinski. This book is essential set of good productivity habits. I recommend reading it whether you are interested in the app or not.

Book is quite short - my printed version has 145 pages full of content. No fillers just ready receipts to improve reader’s ability to have meaningful time.

For me the best advice was “Step 8: Review your system regularly” with my favourite quote:

Weekly Review must be done at least once a month.

It was so much fun to read this for the first time. Weekly reviews were a game changer for me. Previously it was like a single piece of puzzle that I was missing.

I’m a big fan of productivity apps and I have experience with several of them. Usually those apps got stuffed with items and system was slowing me down. Then I was moving to another app - sometimes with exported tasks from previous one that never ended well.

Answer to my problems was regular review of the system and this book explained to me why it is so important. I highly recommend reading this chapter and the whole book for your own benefit.

You can get the book as a gift from Nozbe when you decide to buy a paid subscription. I think it is the cheapest way of receiving the book. Nozbe premium gives you unlimited number of projects, productivity reports and other goodies - when you decide to go premium you can feel the whole power of the program.

You can also order only the book. Simply visit it's Amazon listing

8. To-do app is not enough? Check Nozbe HOW templates!​

There is a mechanism of creating public project templates for others to use. It is called Nozbe HOW and is often used with hashtag #NozbeHOW on Twitter. Great opportunity for content creators to engage the fans. For regular user - ready to do lists with common problems divided into easy steps.

Examples? Here you go:

• The Pomodoro Technique in 5 steps – my template
• How to make Weekly Review – from Nozbe CEO
• How to make a good code review

Above examples are from the official Nozbe HOW website.

Interested in the app?​

Register to Nozbe using my referral link and receive free ONE MONTH of premium account!

1. Download and install JDK​

If you want to develop for Android you will need to install Java and set environment variables.

Open the Oracle website and download newest JDK.

On the next view choose your version (Windows?):

Then click through Java installer.

>>> More on this blog: How to organize Unity project directories?

2. Setup Java environment variables​

For Android / Unity purposes its only required to set up PATH variable. To do this you can install useful program called Patheditor. Otherwise, you can google how to setup PATH environment variable.

If you would like to setup other environment variables for Java here are the examples:

JAVA_HOME : C:\Program Files\Java\jdk1.8.0_112
JDK_HOME : %JAVA_HOME%
JRE_HOME : %JAVA_HOME%\jre
CLASSPATH : %JAVA_HOME%\lib;%JAVA_HOME%\jre\lib
PATH : other-entries;%JAVA_HOME%\bin

Make sure that PATH doesn't contain references to another Java installation directory.

3. Download Android SDK.​

Go to the bottom of the website and find Get just the command line tools section. We don't need Android Studio here. Choose command line tools like on the image below:

Unzip this to desired SDK location.

4. Install SDK components​

Now we need to install Android components. We are not using Android Studio so we will need to run console.

To install those things we will use console tool called 'sdkmanager.bat'. It is inside \tools\bin\ directory of [Your AndroidSDK location] — in my example it was directly in custom folder on C: drive.

If you would like to check newest packages versions simply run sdkmanager.bat --list command. To run scripts in *.bat you need to enter command line. To do this get into [AndroidSDK]\tools\bin\ and in directory bar write cmd like on gif below:

Don't rely on versions below — those was newest while I was writing this tutorial.

Install required packages like this:

sdkmanager.bat platforms;android-27
sdkmanager.bat platform-tools
sdkmanager.bat build-tools;27.0.1
sdkmanager.bat extras;google;usb_driver

6. Setup locations in Unity​

Go to Edit/Preferences/External tools and setup paths according to locations you have choosen:

That's it. Now you can proceed with steps from Unity documentation. From third step or so.

>>> More on this blog: Why VS Code is the best IDE for Unity dev. What extensions are great?

... a few steps further. You are ready to become Unity Android Developer! Take a look below for even better start.

What is Visual Studio Code? Is this some other version of Visual Studio? NO! It has as many similarities with his big brother as JavaScript and Java... It has similar name and was made by Microsoft — that's it — it is whole new editor. Smaller, lighter, multiplatform.

Free. Open source. Runs everywhere.

Previously I was using Visual Studio with ReShaper. It is great IDE but I was always frustrated that it takes a lot of my disk space and it's so big, have so many things that I will never use and I had to wait until it start. I just felt that it was too complicated for my needs.

Quick look​

Visual Studio Code really works on each platform. I'm using it on Ubuntu and Windows and everything works just fine. I also know people who are using it on Macs without issues.

On VS Code you have a console... this with some shortcuts is all you need to fully use power of this editor. While writing this post (in VS Code) I simply press ctrl+p and type >mark then console automatically hint me three things I could make and I choose option Markdown: Open preview to the side — no clicking just writing.

Settings are stored in json. If you want to customize something you have second json with User Settings which will overwrite default ones.

Same thing with Color Theme. My favorite in Visual Studio was always Monokai which in case of reinstallation I always had to download and import as settings, then go to settings and change it. So many clicks! Here I press ctrl+` and choose it from predefined ones. This theme works best for me.

Extensions​

You have to understand that this editor is small and light because it comes clean. In this form it is great replacement for Notepad++ (or other light editor you are using to edit single scripts). Then if you have more sophisticated needs you are visiting thing called Extensions and install everything you need! There are many official addons created by big companies and unofficial created by people.

You are able to choose keymap from editor you like the most. Simply install it as extension.

Some extensions which I'm using:

• C#
• Debugger of Unity
• Unity Tools
• IntelliJ IDEA Keybindings
• Unity Code Snippets (by Kleber Silva)

>>> More on this blog: How to organize Unity project directories?

Newbie observations​

One click on file in Explorer opens preview mode which means that this file is shown to you but it's name is in italics and if you click other file this one will be closed and other one will get into preview mode. It was quite strange for me at the beginning. Edit mode will enable automatically when you start to write something in file or after double click file in Explorer.

When you are debugging and press F12 to get into method definition or variable declaration you may be jumped into other file. This other file will be in preview mode and there is no back button. To go back you have to use shortcut. With my bindings it is ctrl + alt + left arrow.

I'm using a lot of multiline edit alt + click. In previous editor I needed addon to do it — here it is build in. But there is no built in column selection.

Right now this is one and only editor I am using. Previously I had one editor to work (Visual Studio), other one to edit some random files (Notepad++) and online one to write blogposts (Ghost.js built-in). Now I'm doing everything in VS Code. I also recommend enabling right-click option Open with Code in your OS.

Unity integration​

Code supports Unity and Unity supports Code :). Debugger runs faster than the one in Visual Studio. MonoBehaviours, snippets and coding works as it should. In my opinion this is ideal choice for Unity devs because of it's light working. We have other things to consume our resources while running project than IDE. Another thing is multiplatform support — some of us are creating on Macs, some on Windows and some on both. I reckon that changing editor each time may be frustrating — use VS Code everywhere instead.

Improvements suggestion​

There are things I would love to see in VS Code soon. Maybe some of them are available but somewhere out of my knowledge.

Displaying string in debugger. When I was debugging API in my app, and I got json as server response I could only see first 20-30 signs of this string, the rest of it was cut and replaced with ... symbol. It is very annoying because I had to do extra Debug.Logs just to see what this string contains. I was searching for solution in settings without success.

Git. Source control works nice but it really needs to be polished to convince me to leave SourceTree and use built-in tools. For example there is no nice branches preview. The one available here looks nice but it is not as usable as I would like to. Code lacks in single line staging feature. It is great in SourceTree that I don't need to stage & commit whole file. I can choose exact lines which I want to put into repository.

UPDATE December 2017 In v1.18 we've got new git features: git status in file explorer and single change staging!

Unity methods mark. While using Visual Studio with Resharper (+Unity plugin) I saw directly which methods belong to Unity. On the left bar, next to Unity methods like for example Start(), Update() or OnCollisionEnter() was displayed Unity logo. It was really helpful. I remember most of Unity method names but when you see logo near Unity methods and nothing near your custom methods it is easier to maintain clean code.

Resources​

• VS Code
• Unity integration

Motivations​

Previously this blog was hosted on my own VPS Ubuntu server. It was great at the beginning. Configuration and all that stuff weren't so difficult as I firstly though. Possibilities of that approach were limitless and sometimes I was uploading my games or do other experiments on that server. All fun. Then I decided that each service I'm working on should have a separated server. So I did. Finally, it was a really good decision but now I have multiple servers and multiple responsibilities. Few month ago my private cloud server broke — something with Linux kernel or server's HDD. Rather, service provider's error than mine because the server was working great for more than a year. The thing is, I had troubles because all my files needed to be moved elsewhere. I began to consider — what if my blog's server will break? Do I have backups? Yep. Do I want to lose half of day (yeah half...) just to restore things as it should be? Nope!

Here comes GitHub Pages. Simple solution. You have static Markdown files which are converted to blog posts. No database, no server, no safety threats, no costs! All you need is love git repository!

Posts can be written in Markdown or HTML. All post files must begin with YAML Front Matter which is simply key: value list of properties. It looks like this:

---
title: I've moved to GitHub Pages
date: 2017-06-12 16:00:00
tags: lifestyle
---

In this YAML Front Matter header, you can specify things like header image, post title, description, date, layout, tags and much more. Search in the Jekyll's documentation for more info.

Another great thing is a migration of your current blog to GitHub Pages. You can easily migrate here from Wordpress, Ghost.js, Joomla, and others.

Restrictions​

These are static files. No server-side code can be running here. So if you are using your current blog server to run some scripts or other services it cannot be done here.

No GitLFS support — as I know not many people is using LFS (large file storage) but I do. Repository for the video blog or the photo blog will increase drastically with every change of binary files. You can host binaries elsewhere and embed them to your Pages blog but host this here is a poor idea.

For custom domains, there is no out-of-the-box SSL solution.

Not all Jekyll plugins can be used on GitHub Pages. There is a list of allowed ones. So if you already have a blog running on Jekyll be sure that plugins you are using aren't necessary anymore. This limitation has security impact because there is no risk to run some malicious code from custom plugins.

Instructions​

The first configuration and using is rather straight forward. I'm not familiar with Ruby hence it took me few hours to understand the idea behind Jekyll.

The best solution for me was first creating an empty website with index.html on it. Ensure that this works and then start over again. Then I've found a great Jekyll theme called Minimal Mistakes and do as they said in instructions. After a while, I understood where are config files, what to change and how to adjust theme for my needs.

There is plenty of ready to use themes. Many are of poor quality but some (as this I use) look really professional. Great thing is that you can customize all as you need. All CSS code and layouts are open so you can change as you wish.

I will not repeat online resources. I encourage you to make similar way as mine described above. On the bottom of this blog post, you can find useful links.

Ready to go​

To sum it up. This is my beginning with GitHub Pages. If I will find some pros or cons I will definitely update this post and notify you by Twitter. For now, it looks like a perfect solution for blog or product page.

Resources​

• GitHub Pages
• Jekyll official page
• Jonathan McGlone guide for GitHub Pages beginners
• Jekyll import tools
• Jekyll plugins on GitHub Pages site
• Minimal mistakes theme

Last Thursday (02 march 2017) Michał Warkocz talked about design patterns which had the highest number of votes on facebook poll. Michał is a team leader in Goyello company. He is also a mentor, trainer, certified .NET developer, agile enthusiast, information safety specialist and web application specialist. This is what I'm talking about when I say "experienced" ;)

We were listening about:

• Chain of Responsibility
• Factory
• Object Pool
• Strategy
• Adapter
• Proxy

The whole event took about 1.5h and it was placed in Faculty of Mathematics, Physics and Informatics of Gdańsk University.

My observations​

I was curious about Object Pool pattern because I have never heard about it before. As I understood this pattern is all about efficiency. This creates objects once and keeps them in some collection bag for further usages. It prevents from excessive memory allocations and deallocations. Looks pretty useful for game development - initializing many objects in update function may be a bad idea. Quite interesting but dangerous approach. Michał mentioned that this pattern is problematic in maintain and debug.

About other patterns I heard only partially because of my role on this event - I was a photographer. A good thing about this is that I have found a new setting on my camera - the silent mode. On previous events, shutter sound was so loud that I was embarrassed by making photos at all. I'm sure that I was distracting speakers. Now I can make photos without interruption and it's great. I also discovered that silent mode doesn't always work. For example, when I was making a panoramic photo I had to disable it (my camera rebelled). For panoramic photography of people - it is not a good idea. When somebody moves the photo may be fuzzy in that place. A better option would be 180 degrees photo but it needs a special camera.

Photos​

References​

1. Kuznia.co (PL) - our student organization webpage
2. PonadProgram #9 - Design patterns (PL)
3. Photos from the event
4. Object pool in Unity (EN)

Use cases​

Work​

This is the most important requirement - what will you do with this mouse? If you are web designer it would be good to have at least two extra navigation buttons for next and previous site. Extra scroll wheel to horizontal page movement is also a good idea. Navigation buttons

For graphic designers I would recommend a mouse for MMO Gaming. This mouses has a lot of extra buttons and as my knowledge about Blender says - you will need all of these buttons. Simply assign favorite shortcuts to extra buttons and have everything under thumb. MMO Mouse

Another thing is your workplace -if you have one. Otherwise, if you are always in a way, think about portability and multi-surface support of your mouse. Nowadays most of the laptops have built-in Bluetooth module so you no longer need to remember about USB receiver.

Battery. Many people think about batteries as a necessary evil and consider cables. But times when you needed to have two AA Stick batteries are hopefully ending. I have rechargeable battery built-in my mouse. It has micro-usb socket in front of mouse so I can charge and use at the same time. Charging is needed few times a month but it takes approximately 1-2 hours. Micro-USB socket

Presentations​

Yeah, you can use your mouse for presentations instead of presenter. Less stuff you have in your pocket, fewer problems with batteries etc. you have. That mouse should be wireless and good looking. It should also have invisible for human eye laser sensor (so called laser mouse) - you don't want to blind your audience. left: optical mouse; right: laser mouse

Good mouses have multi-role support for programmable buttons. Just create new role called presentation and you are almost ready to go. Software for presentations have shortcuts for next/previous slide so again - attach these shortcuts to programmable buttons. It's great feature that you have always one extra pointing device in case of emergency.

Entertainment​

I use my mouse as remote control while watching movies or listening to music. How? I have a role called entertainment where my scroll wheel is volume, next and previous are used to change songs in Spotify and my two extra programmable buttons are play/pause and stop. Main buttons are always untouched because it's common that you need to do some small things like change window or check something on the Web.

Gaming hardware​

Gaming devices often have great quality.

Many mouses have plastics glides. In gaming mouse you will have metal glides. It gives you less friction and durability. You have guaranteed that this is not the first element which will be rundown. Right: Metal glides after one year of use

Gaming stuff is also precise. Gamers love their high DPI and fast reaction speed. I'm sure that graphic designers will appreciate this feature. Maybe there are other professions that requires precise pointing device but it's not so obvious to me right now.

Things for gamers are made for hours and hours of sitting in front of the computer. It has to be ergonomic. Mouse with bad shape used eight hours every day can be really uncomfortable. Recently this is one of the most important requirement for me.

Absent button in your work mouse also can be really irritating. I encourage you to choose great mouse for your home computer set. Then if you have other in your office - try to buy the same model for work. Habits are harder to adjust 2 times a day than change mouse in office. Fit hardware to yourself - not other way around. So consider buying two mice or...

One Mouse to rule them all​

One Mouse to rule them all, One Mouse to plug them, One Mouse to bring them all and at the workplace control them.

- Not Tolkien

There are mice that you can take with you anywhere. Plug them to many devices and switch device to control with single button click. Without plugging USB and cables - Bluetooth takes care about connection. Usually such computer mice have one remote USB stick (for main device) and Bluetooth support for other. It's easy to imagine that you can use one device for your PC, tablet, (console?) and office computer.

Important features​

• programmable buttons
• ergonomics
• multi-role
• built-in rechargeable battery
• multi-surface

Examples​

• Bloody R3 - I'm was using mouse for over three yeara. It was great.
• Razer DeathAdder - wired mouse with similar shape as photos in the article
• Logitech MX Master - This mice supports multi-device option
• Logitech MX Master 2S - Updated version of above mouse
• Logitech MX Master 3 - Current version of my favourite mouse
• Logitech G600 - MMO Mouse with many additional buttons

We need creative work when we want to plan something (eg. to-do list for today, phase of project, blog-post), to create something (eg. game level, gift for somebody) or in other cases that need to be carefully thought through. And remember

Thinking without making a note is waste of time.

Why? Because as David Allen said:

Your mind is for having ideas not holding them

Notepad​

) Clean sheet of paper. Great. What now?

Everything!

You can draw, write, underline and much more. You can do anything you want, you are the master here. You can say that you can do the same things in popular editors but in editors...

• You can't do whatever you want

Even if you have great editor with cloud storage and stylus support it always will have some limitations. These are programs so somebody wrote it. Somebody tried to figure out how you will use it and they did their job great. The thing you need to remember is that their target was to create something as flexible as clean sheet of paper. So why not give a chance to paper?

• You can't focus on your task

Ok, maybe you are a super productive person and focusing on something among all that apps, notifications, chats, emails and other stuff isn't a challenge for you. My congratulations. But I cannot do this, my friends neither. I assume that other people have the same problem. Paper will never distract you as it only takes things, thoughts, ideas and keeps them.

Pencil​

It must be a pencil. Not a pen or something permanent. You shouldn't be afraid of what you can note or draw. Fear kills creativity. With a pencil you can always correct things, do new attempts over and over again. It's really important because you can always rearrange your notes. Your mind constantly rearranges your thoughts so your notes cannot be permanent, it has to change.

Physical things instead of digital?​

No! Combine them. Notepad and pencil are great for creativity, ideas but it is only first phase. Then you need to store all this work and paper has many disadvantages in storing. You only have one instance of your work, so if you lost it - it's gone forever. You will not have a big notepad and pencil always in your pocket, it's rather impossible, so if you will have some great idea in train/walk/classroom and don't write it instantly you will lose it. So after first phase go to some modern tool for notes like mentioned OneNote or other great software with cloud storage and mobile app. You should always have your notes with you.

Tools​

• Pencil
• Notepad
• Nozbe - my favorite to-do list management tool. It's based on GTD!
• Notion - great app to store notes
• The Fabulous - this app gave me idea to write this post

Work on multiple projects, together with many developers taught me that some general solutions have to be developed due to the fact that now most frequent pattern is a mess. I have lost few hours of my life just because files were in the wrong place. One can think this is only cosmetic improvement or it can be done later. But this minor detail can improve your team work and save unnecessary confusion.

Keep your files in proper directories​

This is where I could finish but... In Unity we get an empty Assets folder so we can do and use it to whatever we want. That's what I call freedom :) But be responsible!

• Bad idea: Put everything into this folder without any order.
• Good idea: Create some directory structure
• The best idea: Create universal structure where everything has its place

But how should I prepare such structure?​

Look at your last projects. Which files could be packed together? Which of them you had used most frequent?
Also think about your team. Solution should be intuitive for everyone.

I mostly work on small projects - few scenes, few team members. For bigger games I would rather adjust files per scene/level or functionality. Despite this in my case the best directory structure is as below:

|- Assets
    |- Editor       //special folder
    |- Resources    //special folder
    |- Plugins      //special folder
    |- Extensions
    |- Scenes
    |- Scripts
    |- StaticAssets
        |- Animations
        |- Animators
        |- Effects 
        |- Fonts
        |- Materials
        |- Models
        |- Prefabs
        |- Shaders
        |- Sounds
        |- Sprites
        |- Textures
        |- Videos

Here you have full list of so-called Special Folders. We are using such order with my team from about year now and it works well. I don't remember any situation that we needed to add some new folder (of course we use some subfolders with this)

Automatic solution​

Don't worry. You don't have to create all these folders manually. I'm creating few tools facilitating starting up with new project. One of them is Unity Project Tree Generator.

This little plugin will generate mentioned directory structure in few moments. It will also add .keep file to each folder just because git ignores empty directories. If you have existing project with some structure created - it's OK - it will only create new folders if you don't have them. It will not edit or remove anything.

Of course it is your project so you can change your directory tree as you want. To do this just look at GenerateDirectory method in CreateProjectTree class.

Sounds little scary.​

It may seem to be a futuristic idea but it’s already happening! Every smartphone, browser, search engine and even small blogs are collecting data about you. Why? Because they want to know you. Why? To show you better commercials of things that you probably would buy – and it’s OK because why should you watch some uninteresting Ads? It would be waste of your time.

But returning to our case. If we let our machines to know even more about us, and some intelligent people will build great tools - this could really improve our lives! Everyone can have its own personal assistant. If we will be confident enough we can give this virtual personality our money to make online shopping instead of us! And other robots will pack it and deliver it with drone to our doors in hours when we are currently at home. Sounds good? But such improvements of course have a price.

Is it OK for humanity or against us?​

• First of all, as I mentioned above our privacy will be an abstract word. All this enormous amount of sensitive data can be used in many ways. Some criminals could use it to their nasty purposes. Governments can manipulate society and market in more efficient way. Even worse – corporations can manipulate governments.

• Second, what about our sense of existence? Some people will use all this free time to create art, develop themselves, spend it with family and being happy. But some of us can lose themselves. Having too much of free time could demoralize many people. Others can lose their ability to survive without machines.

• Last but not least, “Rise of the Machines” – yeah, Terminator scenario.

My opinion​

I would give it a chance. Maybe I’m not a reliable person because I’m an IT geek and I consider myself as a part of this society that would know what to do with some extra free time. The other thing that I think is the future that is already knocking to our doors. The question is – who will let this enter?

And there we have Babun​

I have been using it for about six months right now and I'm really pro console guy right now :)

A few words from the authors :

"Babun has a very small microkernel (cygwin, a couple of bash scripts and a bit of a convention) and a plugin architecture on the top of it. It means that almost everything is a plugin in the babun’s world!" - babun.github.io

Introduction to the Babun Project from Tom Bujok on Vimeo.

So - why do I use it? Mostly because it has features like:

• built in pact package manager - turns your terminal into even greater environment
• SSH
• Git shell
• UNIX tools on Windows
• Linux style copy/paste - click right mouse-button to paste something or highlight to copy
• Option "Open Babun here" on right click - open terminal with current directory as path
• looks awesome!
• open source with growing community

I will focus here on its pre-configured git features​

First of all the console looks like this:

Out of the box we have all common used information in one-liner well prepared prompt. Username and hostname are visible on window title bar.

As you can see on authors' website there is bunch of git aliases:

gitalias['alias.cp']='cherry-pick'
gitalias['alias.st']='status -sb'
gitalias['alias.cl']='clone'
gitalias['alias.ci']='commit'
gitalias['alias.co']='checkout'
gitalias['alias.br']='branch'
gitalias['alias.dc']='diff --cached'
gitalias['alias.lg']="log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %Cblue<%an>%Creset' --abbrev-commit --date=relative --all"
gitalias['alias.last']='log -1 --stat'
gitalias['alias.unstage']='reset HEAD --'

Usage of git status -sb alias:

For me it is a little nice tool which makes my daily routine work much nicer. I always wanted to have great terminal on Windows and definitely it is the answer to my needs.

Interested?​

See product's website or check their Twitter for more information.

Interest fact In real life term -Baboon- is used to name Old World monkeys. Here you have some wiki page about it.