DEV Community: Marius Reimer

Svelte with Rust and a GraphQL REST API Wrapper

Marius Reimer — Mon, 08 Feb 2021 03:10:59 +0000

GraphQL has become a new alternative for developing APIs other than the common REST approach. Being more lightweight by selectively requesting fields (querying) instead of transmitting unnecessary data just makes sense. With these and other benefits there also are disadvantages like the knowledge it requires to maintain, develop or offer such an API (not every customer wants GraphQL).

What you could do is to add GraphQL to your existing REST API, basically as a thin layer on top of it. This gives you the benefit of being able to use both. Of course, there is also the cost of maintaining both.

I decided to create a GraphQL server for the open source PokeAPI. For that, I've used Rust, with the Juniper GraphQL library, with Actix Web as a web server implementation. Serialization of objects has been done with Serde. The whole thing is a wrapper on top of the pokerust REST client. Lastly, I've built a small web interface with Svelte in form of a PokeDex which displays some basic Pokemon information.

You can find the source code on Github and the Svelte PokeDex UI here.

GraphQL

In GraphQL you have a single endpoint or URL that the client is communicating with. You can enable clients to authenticate, query (Read), mutate (Create, Update, Delete) data and also listen or subscribe to data changes. When the GraphQL server receives a query, it needs to resolve all data that is required. This can happen through different data sources, like a data base or REST api.

From an HTTP layer perspective, GraphQL is usually based on POST and not GET. Reason for that is mostly the limited amount of data that you can send (query) with GET. This also comes with the challenge of no client side caching. You may read more about it in this article.

Playground

GraphQL libraries often provide a playground, which is a tool to explore the API with. That is a pretty much self documented way to develop an API, similar to what you might know from the OpenAPI specification. You can explore the whole schema with it and test or execute queries. You can find an example here.

Rust

I chose Rust as a programming language because it aims to deliver high performance and an effective or safe way of memory management. The rough idea is that memory that you use or allocate is managed or freed after specific conditions. These conditions are defined statically on the language level, so that as long as it compiles, memory will usually be safely handled.

One of the best choices for Rust web server libraries currently is Actix Web. It provides ways to setup things like CORS and all necessary routes to the GraphQL endpoint. The main endpoint is defined via POST on /graphql and the playground via GET on /graphiql.

We can also take use of environment variables to change port and ip of the server without recompiling. This is where Dotenv can be helpful.

Query Example

There are different ways of creating the GraphQL schema. Either schema first, where you directly define the schema or code first, where your schema is generated based on the code that you have written. Juniper uses the code first schema approach, but there is an alternative schema-to-juniper generator.

This function translates to the query named pokemonByName. However, Juniper provides a way to adjust the final name. This can be useful for example if an object has the field move, which is a keyword in the Rust language. As you see in the query, we only want the height of the queried pokemon.

Object Conversion Trait

Traits in Rust are pretty much its way of an interface, so you can specify a set of shared behavior for types with it. Since we are using the pokerust library, we receive objects (structs) that are not fully compatible with Juniper. For example, some data types were i16 or similar, which are not natural to GraphQL. Basic data types in GraphQL are called Scalars.

You may create custom scalars for GraphQL with Juniper, but I have decided to just convert them to String. This is where the object conversion trait From<T> is useful. It allows to implement a type conversion so that you can do the following: let pokemon = GraphedPokemon::from(pokemon_to_convert).

Svelte

In the end, we want to display some data to make use of the GraphQL API. For that, I have decided to use Svelte as an alternative approach to React. To me, it felt much more native to "VanillaJS". This is already one of the features of Svelte. Besides that, there is no virtual DOM, so in the end you should have less JavaScript code that needs to do manipulation in the browser.

Code optimization is done at compile time. Also, state management is much simpler, by being reactive itself. Some downsides could be, as with every framework, that is less adopted, less popular and you may find less developers to maintain your code.

Showing Svelte code here would be a bit too much, but the syntax is quite easy to understand.

Deploying to Heroku

I have used Github Actions as a simple CI/CD. The Rust app is deployed to Heroku via Docker. I have added the pokeapi repository as a git submodule and deployed the Python app in the Docker container, too. On start of the container, both server are started and GraphQL server uses the local REST API. For Heroku, you have to make sure that your server's port can be changed via the PORT environment variable.

Conclusion

The technology stack of Juniper and Actix to build a GraphQL server is probably the best way to do it in Rust right now, even though Juniper is still pretty much in development where API changes are common. In practice, you would usually have a database, where Diesel is used. The way of creating a GraphQL schema via code is also not always the preferred way. Svelte is interesting to work with, had pretty much no dependencies to install and compiled fast.

Originally published at https://mariusreimer.com on February 8, 2021.

Typed Config via Context in React Native

Marius Reimer — Sat, 23 Jan 2021 14:22:51 +0000

Contexts are common in most programming languages or frameworks. They are mostly used to contain and share specific information or functionality across different parts of an application. Sometimes they are used to inject behavior depending on the use case, like testing or production. I explain how I have used React Context to share configuration data across a React Native app with TypeScript support.

In Android app development, the context is used to access application environment specific information. Things like starting new activities (app instances), services/broadcasts (like alarm clocks) or theme data is handled by that.

In Flutter, the purpose of the context property is to localize the widget inside the app's hierarchy tree. With that, you could also perform media queries to get the device size, or to retrieve theme data.

React Context

In React, same applies to React Native, context helps you with sharing data between different parts (components) of your application. It is to say that this has to happen top-down, so you have to provide data "early" in your application in order for child components to consume that data. This explain the two important concepts: Context.Provider and Context.Consumer.

As docs also state that you should only use React Context for global app information, such as user information or language settings. It generally helps you to share data between different nesting levels. Otherwise, you could pass data via props and/or compose different components, so that these components share specific state.

Frequent changes

Important to highlight is the fact of component re-rendering. You have to be careful about unnecessary rendering of components that consume a context that changes often. This could be solved by context splitting, means that you keep rarely changing data in the global context and create further contexts that only contain specific, frequently changing data.

In this example I used react-native-config to add environment specific that I then added to a app config via context. You can then easily put information to the .env file and consume that in the app. This could also be combined with a dynamic replacement of secrets for your application, so that you can keep sensitive data in your CI/CD for example. You can see an example in one of my apps. Please note that secrets will still appear in your application, since they are inside your JavaScript bundle. The benefit is that you can hide it in your version control.

Since we want to use the benefits of TypeScript, we will create an interface for the shared Config data. This will include some arbitrary data and a set of the secrets that we put in the .env file.

When setting up the context data, you want to have specified the initialStore for passing it to the context creator. From there on, we can export and later use the Context.Provider as a component wrapper. You could then export the created context and consume it using React.useContext or make it simpler by creating a wrapper hook called useConfig.

Finally, on top of wrapping your app in the context provider, you actually create its state and pass it to the provider. That way the context can be used to share the data. There you could also perform asynchronous loading of config data (often called hydration), for example to load changed theme or language preferences from the device.

And finally, you will see the usage of useConfig in the Example component. This way you can easily access config variables from any component of your React Native app.

Originally published at https://mariusreimer.com on January 23, 2021.

App Onboarding Experience in Flutter

Marius Reimer — Wed, 20 Jan 2021 23:41:43 +0000

Many mobile apps have a unique flow of experience that the user has to go through. A tutorial or onboarding screen can help with explaining the steps that the user has to do in the app. I show roughly how I created such a screen in Flutter. The source code can be found on Github.

The Important Widgets

Widgets that I have used in this example are the following:

SafeArea
Column, Row, Container, AnimatedContainer
Text, FlatButton
SvgPicture from 'flutter_svg'
Expanded, Padding
PageView

Important to highlight here are the first and last one. The SafeArea helps you using only the area of the phone that is safe to be used for designing. That is, rounded borders from certain devices. With help of the PageView you can create the horizontal page scroll effect.

First, we want to define the data that we use for the explanation screens. For that, a specific class ExplanationData will be defined, to hold these information. Each page has a specific background color, title, short description and an image on top. The image will handled as vector graphics via flutter_svg.

The Animated Page Position Indicator

The next code snippet shows the state handling of the PageView widget, so that we can track the current page index and programmatically (when pressing on a button) jump the next page. It also shows the create function for the page indicator circles. For each page we render a specific circle, with when the current page is selected, the circle is about three times wider. This gives a better impression of where the user is currently. Using the AnimatedContainer we can achieve a simple animation effect.

Lastly, you see a snippet of the horizontal PageView widget. Using the onPageChanged callback, we can track the current index, leading to a re-render of the page indicators. These indicators are generated with the help of List.generate and by using the length of the previously defined data, put into a Row widget.

Originally published at https://mariusreimer.com on January 20, 2021.

Animated Book Star Rating in React Native

Marius Reimer — Wed, 13 Jan 2021 16:48:37 +0000

Animations can make already good apps look and feel even better. It can improve the user experience by making actions feel more natural or living. One use case of animations are modals or pop ups, that dynamically display content on the screen. I will describe how you can create a modal in React Native, that opens and closes from/to the bottom.

In addition, the modal will have a vector-based star rating box, in order to make the user rate an item (in this case books). Also, the backdrop of the modal blurs the content behind it. This should make the modal fell more natural. Works on Android and iOS. You can find the full source code on Github.

The Modal

The Modal consists of several views, but the root should be positioned absolute, otherwise you may run into problems with your layout. Also, the modal needs an Animated.View component, that contains the PanResponder functionality, in order to handle the swipe events. For the blur effect, which is rather simple to achieve, @react-native-community/blur is being used. Note that the entire screen will be covered by the pan handler, since we also want to catch if the user clicked on the backdrop/blur view.

When it comes to the actual modal window, I set the height it to be 25% of the screen's height, as defined in MODAL_HEIGHT. As you will see later, we track the amount of pixels that the modal has been swiped down in a React reference as Animated.ValueXY.

Using the reference value, we can change the opacity of the modal window, depending on how far the modal has transitioned. For this, we will use interpolation, mapping the position (translation) of the modal window to an opacity value between 1 (fully open) and 0.5 (modal is out of screen).

Jumping forward to the actual content of the modal window, which will be a row of stars that the user can select for rating books. In order to know which star is being selected and at which part, we will use another PanResponder. We will do this because it makes position tracking much easier and reliable, than with just one responder. You also the see a onLayout callback, which is used to keep track of the star row's width, as later described. It had to be a React reference and not a state, because it is used in a PanResponder and thus would not work otherwise.

The Modal Responder allows you to keep track of touches inside the whole modal (except the star row). Before we actually allow a gesture to be tracked, we check if the touch is inside the window area (25% height). Otherwise, the touch would hit the backdrop area. Also, when the swiping down of the modal ends, we either close it completely or keep it open, defined by being less than 50% closed already. Move events will change the modal position, as described later.

For the Star Responder we will add the same behavior for when the gesture ends, as with the modal responder. But for the touch and move events, the star rating (here offset) is being calculated and set. If the user swipes down over a star, the change in y is being checked, and if its greater than a threshold, the modal position will change instead.

Spring Animation

In order to achieve a natural, slight bounce animation of the modal window, we will use a spring animation. When the modal window opens, it moves from the bottom of the screen up by its height. This is why we, to calculate that position, subtract the screen height (which is the full modal height) minus the targeted modal window height (25% of that size). Closing the window means moving it to the bottom, out of the screen, meaning the screen's height.

Tracking the Modal Position

The PanResponder fires events for touches that the user does on the modal. To track that position, we take the accumulated distance of the gesture since the touch started, as saved in dy. This is then saved as an animated value in a React reference and used for translateY and opacity, as mentioned before.

The Star

As the user touches the stars, we also want them to be able to select half stars. This requires a gesture tracking and evaluation, otherwise we could just a TouchableOpacity or similar to track clicks on a star. The row of stars will specifically track touches in this area. Somehow, we need to check the x position of where the user touches the star row.

With the pageX value, we can track the x position of where the user touches, in relation to the screen. There is an alternative, called locationX, but that caused problems on Android. To know which star is being touched, we need to know its position on the phone's screen.

This example is rather simple, so the calculation required knowing the star row width, as well as a single star size (plus its margin distance). If the user touches the first half of a star, its value is being evaluated to 0.5. Otherwise, the star would be selected as full.

In order to easily scale and fill a star, we will use a vector-graphics based solution via the react-native-svg library. This allows filling the star with a linear gradient, so that we can even fill a star by 27%, if needed. The LinearGradient will have two Stop definitions, which then adjust the filling via the offset prop.

Each star can then be filled via passing an offset with a range between [0, 1]. This then means you know how much to color each star, since its index is known via the root component. Simple subtraction then gives you the offset value.

Originally published at https://mariusreimer.com on January 13, 2021.

Image Scroll Zoom in React Native

Marius Reimer — Fri, 08 Jan 2021 23:49:35 +0000

When creating a scroll view for a mobile app, a common principle could be to have an image on the very top of the list. This could be to showcase the content of the page. Examples for this could be found in the Spotify app, where an album cover is shown first, followed by a list of its songs.

Scrolling up a list of items with an image on top, it can be a nice feature to zoom in the picture naturally. I describe how this can be easily done in React Native. In one of my current React Native apps, which is [open source] with full End-To-End and CI/CD setup, I have implemented this feature. The source code / component can be found on Github.

The basis of all here is the React Native ScrollView. This allows us to have content in a scrollable container. When hitting the end of the scroll container in one direction, you may see a bounce of the content. This can be manipulated by changing the boolean bounces prop. Since this is enabled by default, we should be good here.

Next, we need to track the y position of the content offset, so that we can change the image style later. For this, we use the ScrollView callback onScroll and map the offset to the Animated.ValueXY() reference and using the Animated.event for simplification, as you can see in the code.

In order to improve scroll event accuracy (allowing it to fire more frequently), we can set scrollEventThrottle to 1. However, this could cause performance problems, since more data is sent (over the bridge - serialized and sent to the JavaScript environment).

The image is the first item in the scroll view. In order to change its size dynamically, the view must be animated. You could either do this by using Animated.createAnimatedComponent for your own component, wrap a view inside an Animated.View or just use Animated.Image.

My approach to perform the image zooming is by changing scale and translateY from the style's transform prop. The idea is, that the scale increases to a certain value (20 in this example) in relation to a negative change of the contentOffset.y value. This means that the more negative (scrolling up, or over the top edge) the value gets, the more we increase the image's scale.

Now, you may notice an empty space on top of the image, the further you scrolled up. You might not want this, so what you could do is change the translateY value, also in relation to the changing contentOffset.y value. This should keep the image on top of the scroll view's container. You may need to play with the values a bit, since they can be different in your app.

Lastly, the content below the image may be a bit off when scrolling or zooming. If you don't want this, you could wrap these views in an Animated.View and also apply a change in translateY.

Originally published at https://mariusreimer.com on January 8, 2021.

Horizontal Card Carousel in React Native

Marius Reimer — Thu, 07 Jan 2021 12:51:29 +0000

A card carousel allows you to display data in a horizontal swipe view, in the form of cards. Each card has a specific snap position that the user may scroll to, instead of having a free scrolling. This should give a better experience in case the user has to choose between different categories for example. I will show how you can achieve create such a carousel view, with core React Native components.

To keep the example simple, we will fill the carousel view with cards (simple Views), that each represent a different color and a random word (lorem ipsum). Each card that is currently selected or active (in the middle of the carousel view), will have a slightly higher size than its neighbors. Also, the neighbor left and right from the active one will already be party visible. The size of the cards will change, depending on how far it is scrolled.

Generating the words to fill the cards can simply be done by taking a "lorem ipsum" sentence and then split it into words. The whole carousel view is based on the React Native FlatList, but could also just be replaced by a ScrollView. Important are the props, that have to be set specifically, to enable things like horizontal scrolling and snapping.

Most props like horizontal or data or the ones to disable the scroll indicators should be pretty easy to get. The interesting part is are the snapping props. Snapping in the scroll view should be centered, using snapToAlignment, which means that the cards are aligned to the center of the scroll view.

Setting the scrollEventThrottle to 1 increases the scroll position accuracy, but might cause performance problems, since more data is sent (over the bridge - serialized and sent to the JavaScript environment). We may also need to adjust the default settings for the content insets, which is the amount of the scroll view inner distance to its elements. Reason for that is the missing cards left and right of the very first and last ones.

When it comes to defining the width of the cards, we could either make them hard coded (like 500px), or specify it depending on the scroll view size. This can be achieved by using the onLayout callback of the FlatList and tracking the width in a state. The card size will then by 80% of the scroll view width.

The width of one card will also be the size of the important prop snapToInterval, because with that we define the stopping points the carousel effect (could also be called pagination). Another way would be to use snapToOffsets, but this requires an array of "break points", which would be interesting for content with different sizes. Also, the contentInset and contentOffset are set, which are needed for initial scroll and content adjustment.

At next, the scroll events will be tracked, to make the card animation possible. This can simple be done by using a reference via React.useRef and the Animated.event function for onScroll. That is just a code simplification, means you could also use setValue on the reference and use the function callback.

The most interesting part is the renderItem function, that renders a card for the FlatList. The container view needs to be animated (from React Native). What happens then is change the scale of the elements, depending on how far the user scrolled the scroll view content. This is where interpolation can be helpful. It maps an input range (content offset) to an output range (scale). Each card only cares about itself, as well as if the right or left neighbor is changing. This is why the boxWidth is multiplied by the according indices, for calculating their positions in the scroll view (content) container. Lastly, you see the change of the backgroundColor by calculating the rgb values arbitrarily according to the item's index.

Originally published at https://mariusreimer.com on January 7, 2021.

Books that I read in 2020

Marius Reimer — Sat, 02 Jan 2021 00:00:00 +0000

I'm listing and reviewing the books I've read in 2020 with the most important learnings for me personally.

The Snowball (Warren Buffet)

Interesting biography of the legendary investor Warren Buffet. What I found pretty interesting is that he (as many other business-successful people) has started really early (in his childhood), selling things. What you could conclude from that is that you should start early with making/keeping/growing money.

He also mentioned that he patience on finding the right time to invest, while keeping the focus on the value behind the company. That means, a company could have a higher, intrinsic value than what is perceived by the public (value investment).

Thinking, Fast and Slow (Daniel Kahnemann)

The idea is that humans basically have two different systems, that reflect their mind. System 1 operates automatically, quickly, with no effort and no sense of voluntary control and conclude tasks everyday life requires (like navigating and walking). System 2 requires more effort and attention and conclude tasks that require concentration (like solving complex math problems).

One thing that was really important to keep for me was the confirmation bias and fact of jumping to conclusions. Often, system 1 draws conclusions based on readily available, often misleading and wrong information, to take the decision off of system 2. If we have a believe about something to be true, we should not look for data that supports that, but rather data that contradicts it.

Also interesting was the fact that people tend to overweight recent experiences, means that if you have both positive and negative experiences, you would rather conclude the whole experience to be negative if the most recent event was negative. For example, if the last days of your vacation were bad, you would more likely conclude that the vacation was rather negative, even though you had plenty of positive experiences before.

Psycho-Cybernetics (Maxwell Maltz)

This is considered to be one of the best books in the psychology and self-help category. The author, Maxwell Maltz, professionally a cosmetic surgeon, observed the fact that people had believes about their portrait (like their nose) and after correcting them (via cosmetic surgery) they looked different physically, but they still saw themselves with the "disability". Maxwell brought the fact that people let past experiences define them in a negative way, making them not see who they really are, but who they think they are (self image).

Very important to remember was also that our brain does not distinguish between imagination and reality, so our thoughts influence "trick" us to believe that something is real, even though it is just imagined. You could see this in a positive or negative way, for example by having a clear vision/picture of who we want to be and regularly think/vision that picture.

The author also described the "success mechanism", that works in a way that our conscious mind is less helpful in solving problems, but our creative, unconscious mind much more. You may find a solution to a problem by not thinking about it actively, but by doing rather unrelated tasks. The success mechanism works by intensively thinking about the problem in as much detail as you can, then forget about the problem for some time (even days). The solution then often presents itself, by letting the mind work on it unconsciously.

The Power of Positive Thinking (Norman Vincent Peale)

This book is pretty focus on religion and god. It is said that god will help you, heal you, solve problems for you if you believe in it, remove negative feeling, thoughts and have faith. The interesting part for me here was the banish of self-doubt, that often originate from values and experiences of our childhood. Positive thinking will help you achieve your goals. You should practice inner happiness, not worry about eventual negative outcomes and keep a regular routine "praying" of picturing/visioning and imagining of a thing or goal.

The Crowd: A Study of the Popular Mind (Gustave LeBon)

It gives interesting insights on the psychology of the crowd. The majority of men, especially those in large groups/masses, do not have clear or reasoned ideas on a subject outside their own specialty. People join mass movements to get rid of their responsibility of life and different burdens that they have, leading to a feeling of connectedness and strength.

Influence - The Psychology of Persuasion (Robert B. Cialdini)

In 6 principles, it is explained why people say "yes". This is interesting to know, since everyone is either influencing someones else and/or is influenced by someone. The first, reciprocation, is giving back what another person gave us (someone gives you a present - you want to give them one too). The second, commitment and consistency, is that we usually stay fixed on an opinion that we have taken stand on (like to say that we have a specific political standpoint). The third, social proof, is that we do what the people around us is doing, because we assume it to be true (like laughing to a joke in a group, even though you did not understand it). The fourth, liking, relates to agreeing to people that we feel physically attracted, similar to or received compliments from (for example finding out that your neighbor does the same sport as you). The fifth, authority, is simply the fact that we are taught to follow orders from people with higher authority, like police men. The sixth, scarcity, tells that the fear of loss is greater than the desire to gain, so that the more available something is, the less we desire it (for example limited time offers in stores).

How You Decide: The Science of Human Decision Making (Ryan Hamilton)

It is commonly estimated that humans make around 35000 decisions a day. Most of them (approximately 95%) may happen unconsciously. Different parts of the human's brain make different decisions and react and are triggered differently. The emotional part of the brain (limbic system) handles lots of information in an unconscious way, learns by try-and-error and is heavily steered by the hormone dopamine (something has a high reward will likely be repeated in the future, even though it is short time). The logical part of the brain (neo-cortex system) can see things from a different/rational perspective, by controlling emotions and do rational decisions (like in emergencies). However, the logical part cannot deal with as much information as the emotional part.

Blackout (Marc Elsberg)

This is a book that does not fit into my usual selection, but it tells a great story that I can highly recommended. In summary, the energy (power) connections in Europe start to fail. This follows a chain of reactions all over the cities, that cause panic. That was really interesting to see, because it shines light on things that you might only think about when you heard about it. For example: no energy means no water flush, means no water or toilet usage. Sooner or later, this may increase the infection risk, because dirt accumulates.

Range - Why Generalists Triumph in a Specialized World (David Epstein)

This book is almost an anti these to the famous "10000 hours" rule to achieve mastery in a field (as outlined in the book "Mastery" by Robert Greene). The author outlines that generalists, rather than specialists, will be needed more and more in the future. The reason for that is the rapidly changing environments that most field bring with them, requiring a broad set of skills and creativity to solve problems.

Specialization could make you blind to all possibilities of solving a problem. The idea is that you try different things, fail fast, learn and apply. Applying conceptual knowledge from one domain to another or a new one is key here.

The Hard Thing About Hard Things - Building a Business When There Are No Easy Answers (Ben Horowitz)

The main saying of this book is that there is no recipe for situations when things get hard. Throughout the book, there were a number of advices and stories that were told that may help with hard things. There was also the fact of having artificial deadlines to increase productivity, or having less people that are the single point of decision, just to prevent being a task being stuck at one person.

12 Rules for Life - An Antidote to Chaos (Jordan B. Peterson)

The author described 12 rules that can help you with you and your life. I'm not going to write them down here, since that is too much. The most important things for me were that you should hang out with people who are where you want to be, support you and are positive. Also, you should reward yourself for doing unpleasant things that you don't want to do. Also, the "stand up straight with your shoulders back" rule can be helpful to remember, to act more dominant which will make you less anxious, more confident and more likely to attract positivity.

The Wisdom of Insecurity - A Message for an Age of Anxiety (Alan Watts)

This book is pretty strong about spirituality and self-help. The author describes that in the modern age, people tend to crave for a feeling of insecurity (even though this does not exist) and so fear things that are not real, causing anxiety. This can be solved by living in the present moment, rather then holding on present experiences or future projects. He brought the example of a person that must undergo a surgery in some weeks and has no pain, but instead of living in the present, he is occupied with thoughts of possibly dying or cancelling the surgery. Other things that the author mentioned were perception of time, self and reality for being the root of all insecurity.

Inner Engineering (Sadhguru)

Inner Engineering goes into the topic of spirituality. Sadhguru, the author, talks deeply about his experience with meditation and yoga. Happiness comes from the inside, not from another person or the outer world. It is told that, when we change something or reached a certain goal, we become happy. But the author describes that this is what prevents us from being happy, since everything happens right now, in this moment and within us. So the search for happiness should happen in ourselves. Also, responding to life events (responseability) is meant in a way to increase freedom by being able to respond to events consciously.

The Anatomy of Loneliness - How to Find Your Way Back to Connection (Teal Swan)

The author describes that every human experiences loneliness to a degree, while separating between one that can be solved by being around other people, and one that cannot. The latter is the genuine loneliness, which can lead to a sense of isolation and separateness to others. It is stated that survival as a human race depends on the capacity to be connected. Loneliness is an epidemic with devastating implications. Three main concepts are key here: Separation, Shame and Fear.

Shame is an instinct (or unconscious) reaction, like the fight-or-flight response that causes us to react, or nowadays overreact to stimuli (like notifications on phones) fully automatically as an evolutionary result. We may withdraw from other people by avoiding them or acting in a not authentic way, making it impossible for them to understand yourself.

Fear is pushing something away from us and separating from it. It may be the result of rejection, disapproval or abandonment. Interesting to know is that we do not fear the unknown, but rather a similar, traumatic situation from the past. Fear is a part of you and can be resolved by resolving past experiences.

The Culture Map - Breaking Through the Invisible Boundaries of Global Business (Erin Meyer)

This is interesting especially for everyone who works in a company with people from different international origins. It shines a light on how different cultures react to situations, like meetings, conversations or reviews. For example, some cultures are more open to direct feedback, or maybe want to say "no" when they rather say "this can be difficult to fit in my schedule".

Simple Settings List in React Native

Marius Reimer — Tue, 15 Dec 2020 17:03:10 +0000

There are many libraries that provide a way to create a settings screen or list for your React Native app. I show a simple way to achieve this with basic or no dependencies.

You can find the source code here. In essence, we use the React Native SectionList for a structured or sectioned partition of the list. Alternatively, you could use a FlatList or even ScrollView if you have a small amount of items to put in your list. For imaging, you would use react-native-svg or alternatively the React Native Image. Persistence, if needed for things like a dark mode switch, could be achieved by react-native-async-storage.

The SectionList

The most interesting feature about the SectionList is its sectioned data handling. You can pass the data via sections, its function to render items via renderItem and its function to render the section header via renderSectionHeader.

Structured data is required for the Section List. Each section has a header and a bunch of items. You can define this structure for yourself. This means, you could also add elements like a header icon, as you can see in the orange box.

When you put this data in the SectionList, when using TypeScript, types for the rendering function should be automatically inferred. This makes writing these functions much easier. It also prevents possible errors by enforcing types on sections, for example to require an array type.

The Section Item and Header

When looking closely, you may have also noticed that the Section Item has rounded borders, if they are first or last in the list. This can be achieved by comparing the current render index against the sections data that you put into the SectionList.

The Section Header is also a rather simple component. It needs to render the title and icon that you specified.

Originally published at https://mariusreimer.com on December 15, 2020.

TikTok Animation in React Native

Marius Reimer — Fri, 11 Dec 2020 17:22:02 +0000

The TikTok app has a pretty interesting loading animation. It has two horizontally aligned circles that seem to rotate its positions, seemingly in a circle. I wanted to create a similar behavior in React Native. The source code can be found here.

Initially, the spinner consists of two colored circles.

As soon as the red circle moves “below” the blue one, its overlapping shape turns into the background color. A similar “black” effect could be achieved by using the mix-blend-mode CSS property, if you are on the web. However, this does not exist in React Native.

The red circle moves all the way through the blue circle.

At half time, the red circle is left to the red circle. This triggers the back animation, so that the red circle moves back to its initial position.

The Code

First, we need to declare the shared variables. For managing the animated values, we use the useSharedValue hook. This has a behavior similar to React.useRef, means that is does not trigger re-render of the component. The react-native-reanimated library uses the JavaScript Interface (JSI), which means good performance due to synchronous JavaScript <-> Native calls.

The following code shows how to change a shared animated value. After the component has been mounted, we start the animation timer. Using a combination of withRepeat, withSequence and withTiming, the timer counts from 1 to -1 and back, in a loop.

Depending on the current time value, we need to change the x and radius values. The library changes values automatically, means that you do not need to trigger most things, following the declarative concept. However, you need to put those changes (to change animated style or props) in specific hooks. In this example, we only need to change the component's props, so we will use useAnimatedProps.

To actually change radius and x, we will use interpolation. We will simply "map" the input range from -1 to 1 to a specific output range. For x, we switch both circle's positions. For the radius, we change according to the initial value. Similar things apply to the second circle.

Animate React Native SVG

In order to change component props via animated shared values, you need to pass the useAnimatedProps output to the component. This will only work, when the component is actually animated via Animated.createAnimatedComponent and you change native props of native views.

The circles are now animated, but still need to have the clipping effect. In order to achieve this, we need to define a ClipPath mask, that includes both animated circles.

Finally, we will render three circles. First is for the render red circle. The last two are for the green one and its background, which have the same position and size. The green circle applies the clip path. As you might notice, one output of useAnimatedProps could only be applied to one component, so the props had to be duplicated. This feels like a hack, but makes sense if you view it from a native perspective.

Originally published at https://mariusreimer.com on December 10, 2020.

Faster React Page Loads With Lazy and Suspense

Marius Reimer — Tue, 28 Jul 2020 20:00:27 +0000

Third-party libraries, images and huge amount of static data can all influence your application bundle size. This can cause unexpected high loading times, which may lead to a bad first site impression. React.Lazy and React.Suspense are common techniques (as of mid 2020), to perform code splitting for bundle size reduction and speeding up page load. In this article I want to show quick you may add code splitting to your React application, highlighting the differences in performance (Lighthouse benchmark/check).

The base application

The idea is that we have a React component, that just displays some static data from a JSON file. I have chosen the programming-quotes-api in order to have some data that makes sense. This data is not being fetched at runtime, but put into a local JSON file, which means it will be bundled into the application. To make the data a bit bigger, I have duplicated its content.

The app boilerplate was created by the common create-react-app tool as described here. From there on, I have created a React component, call it VeryBigJokesList, that displays the static content.

import React from 'react'

import preDefinedJokes from './preDefinedJokes.json'

const VeryBigJokesList = ({ jokes = preDefinedJokes }) => {
  if (!Array.isArray(jokes)) {
    return <p>No jokes found.</p>
  }

  return (
    <ul>
      {
        jokes.map((joke, i) => <li key={i}>{joke && joke.en}</li>)
      }
    </ul>
  );
}

export default VeryBigJokesList;

The non-lazy (eager) case

Usually, I would just import the VeryBigJokesList component and render it in the App component, created by the boilerplate.

import * as React from 'react';

import VeryBigJokesList from './VeryBigJokesList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div style={{ maxWidth: 600 }}>
          <VeryBigJokesList />
        </div>
      </header>
    </div>
  );
}

export default App;

This causes to the user load all content from VeryBigJokesList when loading App, since it will be “placed” in the same final bundle. When building the application via yarn build or npm run build, you will see a list of all bundled files of your application.

As you can see, the main bundle is yellow highlighted, indicating that its size may be too big. This makes sense, since the JSON data that VeryBigJokesList includes is roughly this size. When running a Lighthouse performance check, you should also see some loading specific issues.

The lazy case

When planning to use React.Lazy, you mostly need to consider the fact that VeryBigJokesList is being exported via export default and is put as a child (of any depth) of a React.Suspense component. Suspense allows you to render a fallback component (like a loading indicator), while its content is loading.

import * as React from 'react';

const VeryBigJokesList = React.lazy(() => import('./VeryBigJokesList'));

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <div style={{ maxWidth: 600 }}>
          <React.Suspense fallback={<p>Loading list...</p>}>
            <VeryBigJokesList />
          </React.Suspense>
        </div>
      </header>
    </div>
  );
}

export default App;

Adjusting VeryBigJokesList to load lazily was rather simple. If everything worked well, you should see a loading text, before the list is displayed. When building the application, you should also see a difference.

The main bundle size has decreased dramatically, since the static JSON content has moved to a different chunk of the bundle. When running a Lighthouse performance check, you should see a difference in loading times.

Originally published at https://mariusreimer.com on July 26, 2020.

Custom Text Highlighting with CSS

Marius Reimer — Sun, 26 Apr 2020 16:45:17 +0000

Some websites do different things to highlight specific text phrases. This could be text that the user should pay attention at (like a warning), or is just very important (like an item price). I was curious on how to do that.

The solution is very simple: via CSS, background image and inline span. First, you need to create the image that you want to put as a highlight behind your text. I just used Gimp and a brush tool until I was okay with the result. The image has to be exported as a scalable vector graphic (svg).



<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@600&display=swap" rel="stylesheet">
    <style type="text/css">
      body {
        font-family: 'Baloo Bhaina 2', cursive;
        background-color: #fffdf8;
      }
      .highlighted-text {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMjAwMTA5MDQvL0VOIgogICAgICAgICAgICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+Cgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgICB3aWR0aD0iMWluIiBoZWlnaHQ9IjAuNWluIgogICAgIHZpZXdCb3g9IjAgMCAzMDAgMTUwIj4KICA8cGF0aAogICAgICAgIGZpbGw9IiNmZmUwMDAiIHN0cm9rZT0ibm9uZSIKICAgICAgICBkPSJNIDEyLjAwLDQ4LjAwCiAgICAgICAgICAgQyAxMi4wMCw1MC4wOSAxMS43OSw1NC45OSAxMi42MCw1Ni43MgogICAgICAgICAgICAgMTUuNTksNjMuMTggMjYuMDksNTYuNjQgMzMuMDAsNjMuMDAKICAgICAgICAgICAgIDMwLjg0LDYzLjE4IDIzLjA1LDYzLjg3IDIxLjgwLDY1LjAyCiAgICAgICAgICAgICAxOC4wMiw2Ny44OCAyMS4yOSw3Ni4zNSAyMS44MCw4MC4wMAogICAgICAgICAgICAgMjEuODAsODAuMDAgMjEuODAsODYuMDAgMjEuODAsODYuMDAKICAgICAgICAgICAgIDIxLjgwLDg2LjAwIDQwLjAwLDg3LjAwIDQwLjAwLDg3LjAwCiAgICAgICAgICAgICAzOS45Myw4OC44OCA0MC4wNiw5MS4wNCAzOC45OCw5Mi42OQogICAgICAgICAgICAgMzcuNTEsOTQuOTMgMzUuMTUsOTQuNzUgMzIuNTksOTYuMjAKICAgICAgICAgICAgIDI4LjMzLDk4LjYxIDI2Ljg3LDEwMi4yMiAyNy4zNCwxMDcuMDAKICAgICAgICAgICAgIDI3LjM0LDEwNy4wMCAzMC4wMiwxMjMuNDEgMzAuMDIsMTIzLjQxCiAgICAgICAgICAgICAzMS44MiwxMjUuNzUgNDAuMDEsMTI3Ljk1IDQzLjAwLDEyOC4wMAogICAgICAgICAgICAgNDMuMDAsMTI4LjAwIDg3LjAwLDEyOC4wMCA4Ny4wMCwxMjguMDAKICAgICAgICAgICAgIDg4LjA4LDEyMS41NiA5MS4xNiwxMjEuODAgOTcuMDAsMTIyLjA0CiAgICAgICAgICAgICA5Ny4wMCwxMjIuMDQgMTA5LjAwLDEyMy4wMCAxMDkuMDAsMTIzLjAwCiAgICAgICAgICAgICAxMDkuMDAsMTIzLjAwIDEyOC4wMCwxMjMuMDAgMTI4LjAwLDEyMy4wMAogICAgICAgICAgICAgMTI4LjAwLDEyMy4wMCAxODIuMDAsMTIyLjAwIDE4Mi4wMCwxMjIuMDAKICAgICAgICAgICAgIDE5NC41OCwxMjEuOTcgMTg4LjQyLDExOS4wMyAyMDEuMDAsMTE5LjAwCiAgICAgICAgICAgICAyMDEuMDAsMTE5LjAwIDI0My4wMCwxMTkuMDAgMjQzLjAwLDExOS4wMAogICAgICAgICAgICAgMjQzLjAwLDExOS4wMCAyNTguMDAsMTE4LjAwIDI1OC4wMCwxMTguMDAKICAgICAgICAgICAgIDI1OS41MywxMDkuMTAgMjY2LjAxLDExMy4zNyAyNzAuNDAsMTA5LjE1CiAgICAgICAgICAgICAyNzIuNjEsMTA3LjAzIDI3Mi4zMCwxMDAuODUgMjcyLjAwLDk4LjAwCiAgICAgICAgICAgICAyNzIuMDAsOTguMDAgMjgwLjAwLDk3LjAwIDI4MC4wMCw5Ny4wMAogICAgICAgICAgICAgMjgwLjAwLDk0LjEwIDI4MC4yNiw4OC41NSAyNzkuMjYsODYuMDIKICAgICAgICAgICAgIDI3Ni40OSw3OC45OCAyNjQuNjMsNzYuODggMjU4LjAwLDc2LjAwCiAgICAgICAgICAgICAyNjUuMTUsNjkuMTkgMjc2LjQwLDczLjAzIDI3NC44NSw2Mi4wNAogICAgICAgICAgICAgMjc0LjQ3LDU5LjM1IDI3My43Myw1OC44NSAyNzIuMDAsNTcuMDAKICAgICAgICAgICAgIDI4MS42OCw1My43NyAyODEuMDAsNTQuMjggMjgxLjAwLDQ0LjAwCiAgICAgICAgICAgICAyODEuMDAsNDQuMDAgMjU4LjAwLDQyLjM4IDI1OC4wMCw0Mi4zOAogICAgICAgICAgICAgMjUwLjAwLDQwLjg0IDI1MS40OCwzOC4wMyAyMzUuMDAsMzguMDAKICAgICAgICAgICAgIDIzNS4wMCwzOC4wMCAxODkuMDAsMzkuMDAgMTg5LjAwLDM5LjAwCiAgICAgICAgICAgICAxODkuMDAsMzkuMDAgMTc3LjAwLDM5LjgyIDE3Ny4wMCwzOS44MgogICAgICAgICAgICAgMTc3LjAwLDM5LjgyIDE1OS4wMCwzOC4wMCAxNTkuMDAsMzguMDAKICAgICAgICAgICAgIDE1OS4wMCwzOC4wMCAxMjguMDAsMzguMDAgMTI4LjAwLDM4LjAwCiAgICAgICAgICAgICAxMTYuOTAsMzguMDIgMTIwLjE2LDM5LjQwIDExMy4wMCw0MC42NwogICAgICAgICAgICAgMTEzLjAwLDQwLjY3IDk3LjAwLDQyLjE3IDk3LjAwLDQyLjE3CiAgICAgICAgICAgICA5Ny4wMCw0Mi4xNyA4Ny4wMCw0My44MyA4Ny4wMCw0My44MwogICAgICAgICAgICAgODcuMDAsNDMuODMgNTcuMDAsNDUuMDAgNTcuMDAsNDUuMDAKICAgICAgICAgICAgIDU3LjAwLDQ1LjAwIDMyLjAwLDQ4LjAwIDMyLjAwLDQ4LjAwCiAgICAgICAgICAgICAzMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCAxMi4wMCw0OC4wMCBaIiAvPgo8L3N2Zz4K');
        background-position: 50% 50%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <p>This is a <span class="highlighted-text">special</span> title</p>
  </body>
</html>

After the image is created, you could either keep it as a file or convert it to a base64 string to be used within css. Important is, that the background-image resizes by covering the element, does not repeat and is centred.