DEV Community: Martin Anders

React (Native) Interview questions

Martin Anders — Thu, 06 Jun 2024 12:04:31 +0000

React Native Lead Developer Interview Questions:

Recently i had to interview someone to join my company. HR was requesting that I do a coding interview but did not like the idea. I prefer instead just to talk about different things that you can answer only when you really into the topic.

React Native

What do you like about React Native?
What do you dislike about React Native?
What is your experience with React Native upgrades?

React State Management

What state management solutions have you used in React Native?
What are the pros and cons of different state management approaches in React Native?
Can and should you use the Context API exclusively for state management in React Native?
What are some common challenges with state management in React Native?

Testing

What testing tools do you use in your daily work with React Native?
Are there any specific testing tools or frameworks you would like to use?
Can you explain the Testing Trophy concept and how it applies to React Native testing?
What is your philosophy on testing with React Native?

Feature Flags

Is it possible to conditionally execute hooks in React Native? If so, how?
Rules of hooks?
How would you implement feature flags in a React Native project?

General Questions

What was the hardest problem you had to solve in your last React Native app/project?
What was the coolest feature you implemented in your last React Native app/project?

Performance Optimization

What techniques have you used to optimize the performance of React Native apps?
How do you approach profiling and debugging performance issues in React Native?

Code Quality and Best Practices

What coding standards and best practices do you follow in React Native development?
How do you ensure code quality and consistency in a React Native project?

Collaboration and Teamwork

How do you ensure effective collaboration among developers in a React Native project?
How do you handle situations where team members have conflicting opinions or ideas?

How to apply responsive font sizes in Tailwind

Martin Anders — Sat, 24 Dec 2022 16:50:46 +0000

Tailwind CSS is a popular utility-first CSS framework that makes it easy to style your applications using predefined classes. One useful feature of Tailwind is the ability to apply responsive font sizes using media queries. In this blog post, we'll take a look at how to use media queries in Tailwind to apply responsive font sizes to your text.

Media queries in Tailwind

Tailwind includes a number of utility classes that allow you to apply styles based on the size of the viewport. These utility classes are prefixed with the size abbreviation, followed by a colon (e.g. sm:, md:, lg:, etc.). For example, you can use the sm: prefix to apply styles only on small screens, or the lg: prefix to apply styles only on large screens.

Applying responsive font sizes

To apply responsive font sizes in Tailwind, you can use the text- utility classes along with media queries. For example, to apply a larger font size on small screens and a smaller font size on large screens, you can use the following classes:

<p className="text-lg sm:text-sm">Small on small screens</p>

In this example, the text-lg class will be applied on all screen sizes, while the sm:text-sm class will apply a smaller size only on small screens.

Even though this is a valid solution it can be challenging in a bigger project to ensure that all devs use the same styles and responsive adjustments.

Creating a custom Typography component

While applying responsive font sizes using media queries and the text- utility classes is a simple and effective method, you may find that it becomes cumbersome to repeat this process for each element in your application. In this case, it may be more convenient to create a custom Typography component that encapsulates this logic and makes it easier to apply responsive font sizes to your text.

For example, you could create a Typography component like the following:

import React, { ElementType } from "react";

type Variant =
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "body"
  | "body-small"
  | "small";

interface Props {
  variant: Variant;
  children: React.ReactNode;
  className?: string;
  as?: ElementType;
}

const tags: Record<Variant, ElementType> = {
  h1: "h1",
  h2: "h2",
  h3: "h3",
  h4: "h4",
  h5: "h5",
  body: "p",
  "body-small": "p",
  small: "span"
};

const sizes: Record<Variant, string> = {
  h1: "text-5xl font-bold sm:text-4xl",
  h2: "text-4xl font-bold sm:text-3xl",
  h3: "text-3xl font-bold sm:text-2xl",
  h4: "text-2xl font-bold sm:text-1xl",
  h5: "text-xl font-bold sm:text-lg",
  body: "text-lg sm:text-md",
  "body-small": "text-md sm:text-sm",
  small: "text-sm sm:text-xs"
};

export const Typography = ({ variant, children, className, as }: Props) => {
  const sizeClasses = sizes[variant];
  const Tag = as || tags[variant];

  return <Tag className={`${sizeClasses} ${className}`}>{children}</Tag>;
};

Now you can user this component like this:

import Typography from './Typography';

// ...

<Typography variant="h1">Heading 1</Typography>
<Typography variant="body" as="div">Body text with div</Typography>
<Typography variant="small">Small text</Typography>

With this custom Typography component, you can easily apply responsive font sizes to your text in a way that's similar to how Material-UI does it. Simply pass in the desired variant (e.g. 'h1', 'body1') and the component will handle the rest.

Full example code you can find here:
Codesandbox

In conclusion, applying responsive font sizes in Tailwind is a simple matter of using media queries and the text- utility classes. Alternatively, you can create a custom Typography component that encapsulates this logic and makes it easier to apply responsive font sizes to your text. This can be especially convenient if you have many elements in your application that need to have responsive font sizes applied to them.

How to promote your NFT project

Martin Anders — Fri, 28 Jan 2022 23:44:45 +0000

Some days ago we finished our first NFT project.

COOLPHABET - The Cool Letters Crew

Website: https://www.coolphabet.art/
Twitter: https://twitter.com/CoolphabetNFT

Building this project was quite nice and we learned to much. Big thank you to _buildspace and DeveloperDAO for all the help to get into the web3 space.

But after building a cool project there is one important thing missing that you shouldn't forget: PROMOTION

Here are 4 ways to get some attention from people.

1. NFT project drop lists

There are a lot websites where you can list your project. The most of them are completely free, but you can get also additional promotion for some extra money. We listed our project on all of these websites:

https://www.nextnftdrop.com/
https://nftprojectlist.com/
https://upcomingnft.net/
https://nftcalendar.io/
https://upcomingnft.art/
https://rarity.tools/upcoming/
https://nft-list.io/
https://www.nftcatcher.io/
https://nftevening.com/
https://www.plotlion.com/nft-watchlist
https://nftgenie.pro/
https://nftaggregator.io
https://nftvibe.io/coolphabet/
https://nftdesire.io/
https://notfin.com/

2. Twitter

Twitter seams to me THE most important social media platform to promote your NFT projects. You should start as early as possible to get a follower base before your project is done. We made the mistake to start our twitter account AFTER we finished our project and just 2 weeks before the mint day. 🤦🏻‍♀️
We still need some more followers 😉

3. Discord

Discord is after Twitter the other main player when it comes to community building. Many projects start early with a own discord server to get user feedback and to build a relation with future customers. We don't have a discord server because we had already enough todos on our list but you should consider to use it.

Even if you don't have a custom server you still can use discord to promote your project in channels of other projects. You can look for channels like:

showcase
shill your project
show your content
boost your stuff

4. Tell everyone

Just tell your friends, your family or your work colleagues about your project. Post it on Instagram or Facebook. Or write articles like this one 🥳😉

Final thoughts

Build cool stuff, YES. But promotion should be part of your project from day one. You will need this to be successful. If you struggle to do this by yourself peer up with other people that have more experience and can help you.

Links:

Twitter Author: https://twitter.com/AndersCode
Website: https://www.coolphabet.art/
Twitter: https://twitter.com/CoolphabetNFT
Learn web3: _buildspace
Community: DeveloperDAO

Coolphabet NFT - from learning web3 to production

Martin Anders — Mon, 24 Jan 2022 21:44:30 +0000

In October i discovered _buildspace on Twitter. Buildspace is a very great place where you can learn some basic web3 stuff like coding SmartContracts for different blockchains like Ethereum or Solana. I did a course and it was very interesting and i was really motivated to build a real NFT project with the knowledge is learned there. Sooo, how we can start? The most important part for an NFT is some art, right? I'm just a poor coder without any design capabilities 🤪 but lucky me, my girlfriend is a professional visual designer, yipiiii. Let's go and create a cool NFT collection, could be just a matter of some hours.

Some hours??? Haha, Now 3 months later we are finally there. Our project is done 🚀🥳🍾

Coolphabet - The Cool Letters Crew

Coolphabet - The Cool Letters Crew is a NFT collection based on the ethereum blockchain. There are 216 unique letters, generated from all alphabetical characters and numbers. They come in six different color schemes and have a very fresh, beautiful and strong look. They are here to be yours! Be part of the crew!

Website: https://www.coolphabet.art/
Twitter: https://twitter.com/CoolphabetNFT
Opensea: https://opensea.io/collection/coolphabet

Mint will start on 31.01.2022 18:00 UTC

What you should know when you like to do the same

It's a huge step from building a sample project to finish a real world project. There is so much stuff to do to reach your goal. Here are some important insights what we discovered while building this project.

Writing the smart contract

For me it was very cool to learn how to write code for a worldwide super computer. Solidity is a nice language and as a Typescript developer like me you feel comfortable very fast.
But there is one thing that is very scary to me: When the smart contract is deployed to the blockchain it will be there forever and you can't change it anymore. As a developer this seems to be like a nightmare 👻. You have to be really really sure that the stuff you write will work. You have to test it very well. Imagine your NFT project is super sucessful, you earned a shitload of money and then you want to withdraw it and BOOOM -> contract error <- ARRRGGHHHHHH.
To solve this problem you could either use code that is battle tested like [the openzepplin contracts(https://openzeppelin.com/contracts/) or write unit tests to check the functionallity of your custom code. The final contract you can find here:
Ethercan contract

Building the website

This part is pretty easy for a web developer. You can use the framework of your choice and then you just have to learn the api of ether.js to build a web3 site that can interact with the smart contract.

Deploying the smart contract to the ethereum mainnet

Last week our website and the smart contract were ready to deploy. Let's go and deploy. But wait - how do we do this? How expensive is it to deploy a contract to the mainnet? What if there are some errors? Will we loose all the money when the deployment fails? AHHHHHHH, anxiety, stress. All this stuff was in my head.

Calculate the deployment costs

To get an impression how much money you need to deploy a smart contact you can do this

check a testnet deployment of your contract, i.e. https://rinkeby.etherscan.io/tx/0xc445ea69e155a692b7f9008af3d309598e4f75051bc612ff5978522ed46dea73
find "Gas Limit & Usage", for our contract it is 3,678,612 Gas
get the current gas price here, it's 192 while i'm writing this here
multiply both numers 3,678,612 * 192 = 706,293,504 GWEI
convert GWEI to ETH here 706,293,504 GWEI = 0,703568 ETH Cool, now we know how much ETH we approximately need in our wallet to deploy the smart contract.

Find a good time for deployment

As you can see the price is directly depended on the gas price. Here you can see a nice graph of the last weeks prices for every hour of the day. Find a good time where the price is low. The beginning of the week is normally less expensive then the weekend. Just be patient BUT prepared to do the deployment when the price is low.

Deploy to mainnet

When i started the project i used hardhat and alchemy to develop, test and deploy. Deployments to the rinkeby testnet were always easy and fast, so let's change the credentials and deploy to the mainnet.

hardhat run scripts/deploy.ts --network mainnet

And wait ...
and wait ...

Mhhhh after 5 min still running without any output. Damn. What if this fails and all the money is gone? Can i abort this deployment? What should i do?

I checked other solutions and decided to give Remix a try. The advantage of using remix is that you can use your browser metamask wallet to deploy the contract instead of doing it from your computers command line. Find the deploy button and hit - boooom!

YEEEESSSSS, here we go. Coolphabet is live in the Ethereum Mainnet with deploy costs of 614.48 USD. 🥳🥳🥳

Promotion

Now comes the hardest part - how can we promote our NFT project? A good start are nft drop lists like nextnftdrop, upcomingnft and others.
Some sites are free, other sites want a fee to add your project.

Another very important promotion channel is Twitter. You could follow and like us if you would like to help us 😉

Final thoughts

It was pretty fun to enter #web3, learn all the fundamentals and deploy our first smart contract for the eternity to the ethereum blockchain. Feel free to contact us if you have some ideas for new projects and need help with design or development.

How to get parts of an typescript interface

Martin Anders — Mon, 05 Oct 2020 16:15:57 +0000

Today i wanted to extract a part of an already existing complex typescript type or interface.

It's very difficult to google something when you don't know what to search for. This post will help you if you have one of these questions:

How to get a nested type?
How to get parts of an interface?
How to get type of array elements?
How to extract optional properties of a type?

I searched for this by myself and was not happy with the results.

So let's start

Let's say we have this type:

type Person = {
    name: string
    age: number
    // nested object
    address: {
        street: string
    }
    // nested array
    tags: string[]
    // optional object
    info?: {
        eyeColor: string
    }
}

Extract basic parts

To extract specific parts of this type we can use lookup types

type Name = Person["name"]
type Age = Person["age"]
type Address = Person["address"]
// deeply nested access is also possible
type Street = Person["address"]["street"]

Extract type of array elements

To get the type of an typed array like tags we can use the lookup type for arrays:

type Tag = Person["tags"][0]

Optional properties

But how get the type of optional properties like info correctly? Let's say we want the type of eyeColor. To get base type of optional types properties correctly we have to use NunNullable type

type Info = NonNullable<Person["info"]>
type EyeColor = Info["eyeColor"]  // string

Get type from Array values

const languages = ['de', 'en', 'fr', 'it'] as const;

// extract type from languages above
export type Language = typeof languages[number]; // same as de" | "en" | "fr" | "it"

Final thoughts

Another day for me with more typescript enlightenment 😆. Hope this post can help you as well.

Modern State Management with Overmind.js

Martin Anders — Mon, 27 Jan 2020 14:44:38 +0000

Handling state in an application is like juggling with data. This article is about a very interesting way of handling state in your React app with Overmind.js

Why Overmind?

There are many tools for state management out there like Context-API, Redux, MobX or MST. So why we want another one?

In my latest client project I used context based state together with Apollo Client. I'm a huge fan of React Hooks and together with Context-API it's a very nice way to handle state in your application. It seemed to me that I didn't need any bigger state management solution like Redux anymore. In the beginning this was totally fine and I was happy with this approach but after two months the app became bigger and complexity was growing. I wasn't happy anymore and I decided it's time to switch to a different solution.

Back in the days I used and liked Redux a lot and I felt very comfortable with it, but it always had a smell of "too-much-code" for small stuff. On the other hand I never really used MobX but heard only good things about it. After doing some research I found new library called Overmind which locked pretty interesting.

Combining the best together

Overmind was created by Christian Alfoni with the goal to give the best developer experience as possible and also to have strong TypeScript support. The framework internals are hidden to the developer and the API is very simple and straight forward.

strong TypeScript support
very simple API
good documentation and easy to learn
great devtools

I think one of the best things you get with Overmind is that you have fully typed code nearly for free.

Defining state

Define your state as a simple object. Even if it is Typescript you can define your state as simple like this:

const state = {
  // title: string
  title: "", 
  // count: number
  count: 0,  
  // foo: Foo | null
  foo: null as Foo | null,
}

HINT: Don't use undefined or ? in your state because it is just considered an anti pattern. Any undefined value on a state will not show up in the devtools, it will not be passed to server or saved in local storage.

Everywhere you use the state you have full TypeScript support and code completion. SIMPLE, right?

Derived state

Derived state are computed values based on other state. In Overmind you define your derived state directly next to the state.

Here we define a computed state variable, doubleCount. It is important to note that the function is memoized by default and runs only when count has changed.

const state = {
  count: 0,
  // memoized function that only executed when count change
  doubleCount: (state) => state.count * 2
}

In Redux you would have to write selectors and use libraries like Reselect to memoize the calculation. But not in Overmind, it's already included. SIMPLE, right?

State mutation

All state mutations are done with actions. Actions have access to your state and can directly change properties.

function incCount(state) {
  state.count = state.count + 1
  // hint: you get fully typed state and actions here
  state.count = "three" // TS Error: Should be number
}
function resetCount(state) {
  state.count = 0
}
function setCount(state, value) {
  state.count = value
}

HINT: You can't mutate state outside the actions, this means you can't accidentally try to change them in your views.

There is no spread madness like in Redux that comes with immutability. Just change what you want to change. SIMPLE, right?

Side effects

Effects allow you to decouple your app completely from 3rd party APIs. You can read more about them here: overmind effects.

From the docs: Developing applications is not only about managing state, but also managing side effects. A typical side effect would be an HTTP request or talking to localStorage. In Overmind we just call these effects.

Effects should be "initialized" in the onInitialize function of Overmind. There you can provide them with all stuff they need like getters for getting current state or actions to execute.

export const onInitialize = ({ state, effects, actions }) => {
  effects.myCoolEffect.initialize({
    getSomeState: state.partOfState,
    onMoviesLoadSuccess: actions.setMovies
  })
}

Access state and actions in components

To get state in a component you have to connect it to Overmind. This is done with the useOvermind hook that provides state and actions. All you have to do is to deconstruct the hook result and you have all you need.

function Counter() => {
  // hint: you get fully typed state and actions here
  const {
    state: { count },
    actions: { incCount }
  } = useOvermind()

  return (
    <div>
      Count: {count}
      <button onClick={incCount}>INC</button>
    </div>
  )
}

This is all? Yes, it is nuts how easy it is to get state and actions into your components. But wait: How can we prevent the component from rerendering when other parts of the global state have changed, like the title? Our component is only interested in the count property and only wants to rerender if this value changes.
Guess what: Overmind nows exactly which parts of the state the component is using and updates the component only when this part of the state changes. SIMPLE, right?

Mutation tracking

Overmind is using mutation tracking instead of immutability, you can read more about this concept here: immutability vs. mutation tracking.

Christian Alfoni: How you detect the changes and update the UI should just work and be performant! With mutation tracking you put your faith in the system. It relieves you of the mental load of figuring out how components update, it just works and optimally so.

Powerfull devtools

Overmind comes with very powerfull devtools. You can use the VSCode extension or use the standalone version

npx overmind-devtools

You can see all your state and derived state, it's even possible to change it directly inside the tool. You can also see all executed actions with their payload and what part of the state they changed. Sending an action? Sure, you can do this as well.

The view of your app is just an implementation detail. You can write and execute your whole application logic without any views, just with the help of the devtools. This is amazing and SIMPLE, right?

Functional programming style

I'm a big fan of functional programming paradigms, that were introduced with React and became the default in the React world after the release of hooks. Overmind perfectly fits into this. You write only functions, there is no need for classes.
When I had a look in MobX this was a big downside for me because all the examples use classes and I don't want to use classes anymore if possible.

What about pure functions? Mhhh yes sure, Overmind actions are not as pure as regular reducers. In practice it's not a real downside to me because you can test your actions very easy anyway.

Documentation and learning curve

Overmind has a very good documentation. I read it, started to try it in my appliaction and after 3 hours I had refactored my whole app.
The framework internals are hidden to the developer and the api is very simple and straight forward. There is no additional hidden stuff to learn like reselect, redux-sagas, redux-thunk etc.

Cool side note: this was super easy, I was very confident to do the changes because I used react-testing-library. The tests were testing the functionallity of the components without implementation details. I had to do only very little adjustments in test initialization.

After few hours you should already feel very comfortable. Back in the days it took me weeks to wrap my head around Redux. I tried also MobX (while learning Overmind) and it is much harder to read through the docs and to understand all this observer and observable stuff if this is completly new to you.

Running examples

Here you can see a working example on Codesandbox:

Codesandbox Example TypeScript

Summary

I'm so happy I found Overmind, it makes really a lot of fun to use and it simplyfied my app completely. I hope this article can help to convince you to give it a try.

DEV Community: Martin Anders

React (Native) Interview questions

React Native Lead Developer Interview Questions:

React Native

React State Management

Testing

Feature Flags

General Questions

Performance Optimization

Code Quality and Best Practices

Collaboration and Teamwork

How to apply responsive font sizes in Tailwind

Media queries in Tailwind

Applying responsive font sizes

Creating a custom Typography component

How to promote your NFT project

1. NFT project drop lists

2. Twitter

3. Discord

4. Tell everyone

Final thoughts

Coolphabet NFT - from learning web3 to production

Coolphabet - The Cool Letters Crew

What you should know when you like to do the same

Writing the smart contract

Building the website

Deploying the smart contract to the ethereum mainnet

Calculate the deployment costs

Find a good time for deployment

Deploy to mainnet

Promotion

Final thoughts

How to get parts of an typescript interface

So let's start

Extract basic parts

Extract type of array elements

Optional properties

Get type from Array values

Final thoughts

Modern State Management with Overmind.js

Why Overmind?

Combining the best together

Defining state

Derived state

State mutation

Side effects

Access state and actions in components

Mutation tracking

Powerfull devtools

Functional programming style

Documentation and learning curve

Running examples

Summary

Useful Links