DEV Community: Daniel Koprowski

Coding in Quiet: How I Solved Slack Noise as a Developer

Daniel Koprowski — Sun, 21 Apr 2024 00:00:00 +0000

In today's fast-moving tech environment, staying focused is a significant challenge for developers like you and me. Between constant emails, messages, and notifications, it's easy to lose track of what we're working on.

This blog post is for developers who struggle to maintain their concentration amid all these distractions. I'll share stories that might feel familiar and offer straightforward advice on reducing distractions to focus better on our work.

I'll share my journey on staying connected without sacrificing my precious deep work time.

Slack: My Biggest Distraction

My average day used to be interrupted by Slack notifications all the time. This made it hard to do any deep, focused work. Chat apps are supposed to help us communicate, but instead, they often make me feel like I need to reply right away. This can take up most of my day, leaving little time for the work I actually need to do.

Foundational Step: Establishing Expectations for Asynchronous Communication on Slack

Recognizing the severity of this issue, I started by setting clear expectations with my team: Slack is for asynchronous communication, not a hotline to my immediate attention. This understanding is vital for the effectiveness of any further actions.

Keep in mind that this has to be done openly. Some people are used to instant replies and might get the wrong idea of why you're silent while "active." The most straightforward tool to inform them is to set up a proper status icon and description.

Adjusting Notification Settings for Maximum Focus

Understanding the primary function of each communication tool is key. Once that's established, it's crucial to customize the notification settings to minimize distractions.

Here’s how I fine-tune mine for better focus:

Selective Notifications: I set Slack to alert me only for direct messages and mentions. This filters out the noise, allowing me to pay attention to what really matters.
Silent Alerts: I disable sound for all notifications. The visual indicator of notification is there if I take a moment to glance, ensuring I don’t miss anything critical without constant sound interruption.
Slack Notifications on Mobile: I turn these off completely. This ensures my phone doesn’t pull me away from deep work sessions. When I grab my phone, it can lead to accidental doomscrolling pretty quickly.

Quick Win: Silent Slack Notifications

One surprisingly effective change I made was to turn off sound notifications for Slack. I still get the push notifications but without any sound. This minor tweak has made a big difference.

How It Works: When I'm coding and deeply focused, I usually don't even notice the silent notifications popping up, which is great—it means I'm not pulled away from my work. If something urgent comes up, I'll see the red dot on the app during my next scheduled break or when I naturally shift tasks, which is usually within the next hour. This way, I don't disrupt the flow of communication with my team, but I also don't let it interrupt my focus.

This approach has been a game-changer. By removing the immediate, reflexive need to check Slack at every ding, I've found more peace and productivity in my workdays. It's a simple step that any developer can implement right away, and it's helped me balance the need for team communication with my need for uninterrupted coding time.

Embracing Slack Reminders for Future Tasks

Why? Even with less aggressive notification settings, navigating the digital workplace means constantly dealing with incoming messages that require action. While not all demand immediate attention, ignoring them isn't an option either. I've discovered a strategy that allows me to maintain focus on my immediate tasks while ensuring nothing slips through the cracks.

What? My go-to solution is utilizing Slack's reminder feature. I use it a lot. It enables me to earmark important tasks for later attention, recognizing their importance without allowing them to interrupt my current focus.

How? Integrating reminders into my daily routine involves a few key steps:

Set Reminders: Upon receiving an important but non-urgent task, I immediately set a reminder for it in Slack. I don't even need to set the deadline, I can click "Save for later".
Utilize the "Later" Section: These reminded tasks are then automatically sorted into the "Later" section. This acts as my personalized to-do list, which I can attend to at the right time.
Flexible Review: Instead of scheduling specific times, I review the "Later" section when I take a break from current tasks or in between meetings, during times reserved for "shallow" work. This flexible approach ensures that I address these tasks without detracting from periods of deep concentration.

Benefits:

Minimizes Task Switching: By employing reminders, I stay engaged with my current work, avoiding the mental strain associated with frequent task switching.
Guarantees Task Completion: Reminders give me the confidence that no critical task will be overlooked, freeing me to concentrate fully on the task at hand.
Organizes Tasks Effectively: The "Later" section serves as a centralized hub for tasks awaiting my attention, keeping them organized and ready for when I'm available to tackle them.

With reminders, every significant task is taken care of in due course, allowing me to remain focused and efficient on my current projects.

Adopt Async Communication with the Unreads View

Why? In chat-like apps, I always feel the Fear Of Missing Out (FOMO) when I don't answer immediately. Clicking in a friend's name or channel on Slack will turn it to a "read" state so I feel the obligation to actually read through - even when I'm busy with other tasks.

What? There is a special view, though which allows you to peek at those messages. From this view, we can decide if it is important enough to keep it as "unread" or just mark it as "read" and not bother with this message anymore. It looks a little bit like an email client where, on the left, we see everything that isn't been read yet, and we can go through those messages quickly.

How? This view might not be enabled by default in your Slack environment. Here are instructions on how to enable the Unreads view:

Click your profile picture in the sidebar. (image from Slack.com)
Select Preferences from the menu.
Click Home.
Under Always show in the sidebar , check the box next to the "Unreads" item.

What if? The usability of this view grows even more thanks to the support of good keyboard shortcuts. I navigate with arrows and mark some as "read" using the Esc key. More about shortcuts and mobile features of this view can be found in the Slack help article.

Final word

This shift in perspective towards our digital tools has been a game-changer. Recognizing the asynchronous nature of chat apps allows me to manage my focus and productivity better. Other steps like app usage routine, changing settings or notifications are grounded on this idea.

It’s about setting boundaries and remembering that in the realm of software development, uninterrupted time is not a luxury—it’s a necessity.

How to configure import alias in React Native

Daniel Koprowski — Tue, 25 May 2021 00:00:00 +0000

Import aliases are better for maintenance and more readable. Learn how to set up them in React Native!

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:

root - a string or an array of root directories,
alias - a map of aliases,
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.

Thanks for reading

👉 Check out latest React Native tips on my Twitter

👉 Stay updated about new tutorials on my Newsletter ✉️

Handy form validation in React Native with react-hook-form useController

Daniel Koprowski — Tue, 02 Feb 2021 00:00:00 +0000

Managing forms in React Native is different than in web React. We don’t have shortcuts and HTML to register field through ref. I wanted to create a handy solution that satisfies those requirements:

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

After days of experiments, I managed to create a solution that made me satisfied and 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.

The methodology presented in the article could be also used 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 will not be 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}.

// src/components/Login.js
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.

We 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!

Production Ready Forms

While working on this article I decided that I’ll create production-ready forms for React Native! The library of components and whole views that you could reuse in your app.

For example ready-to-use registration form, login form, app opinion form, chat etc. Everything that could speedup work of React Native developer or a team. I will also prepare a ready App with all those forms - you will be able to download it and adjust for your needs.

I get so excited that I acquired a domain: productionReadyForms.com.

I will notify you when this package is ready! You can leave me your email in the newsletter form on the website.

Twitter

Check out my Twitter account. I write mostly about React Native, JavaScript and Productivity.

// Detect dark theme var iframe = document.getElementById('tweet-1356637159046975489-200'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1356637159046975489&theme=dark" }

Conditional rendering in React Native may crash your app

Daniel Koprowski — Sun, 26 Apr 2020 00:00:00 +0000

Very soon after start of creating first app every developer needs to render component in one way or another depending on props. When one start searching, the first answer is inside React documentation. The answer is “Conditional Rendering”. But after a while many of us starts facing errors in React Native (or wrong rendering in React for web) that seems to jump on occasionally to reappear some time later. This article will explain what is happening and how to prevent further mistakes.

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 may 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 ('' [..]);

undefined.

MDN docs: Logical operators

Operator	Syntax	Description
Logical AND (`&&`)	`expr1 && expr2`	If `expr1` can be converted to `true`, returns `expr2`; else, returns `expr1`.

Developers love that possibility to treat variables as falsy. Assumption is that when your variable for some reason comes not initialised 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 upno-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 conditionalComponent = null

if(dataEntries.length > 0){
    conditionalComponent = <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.

// Detect dark theme var iframe = document.getElementById('tweet-1254862220829196289-422'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1254862220829196289&theme=dark" }

8 convincing reasons why Nozbe is the best GTD to do list app

Daniel Koprowski — Mon, 13 Apr 2020 00:00:00 +0000

Over a year now I’m using Nozbe as core of my GTD system. This todo app became my productivity booster. Why am I stick with it after multiple attempts to use other products of this category? Read on to find out.

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:

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

Create new task:

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

Navigate through task list (helpful on weekly review):

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

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:

Above examples are from the official Nozbe HOW website.

Interested in the app?

Organize your Unity project directories structure!

Daniel Koprowski — Thu, 24 Mar 2016 23:00:00 +0000

Organize your workplace! Unity devs do not dispose of any common solution for this issue. It’s time to change it.

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.