It’s Okay to be An Average Developer

Adam Kiss — Sun, 13 Dec 2020 16:26:12 +0000

You do not have to code 13 hours a day.

You do not have to be up to date with the latest libraries and frameworks.

You do not have to write top libraries.

You do not have to build 3 side projects in parallel.

You do not have to be accepted at Facebook, Amazon, Google or your local hyped company.

You do not have to be a specialist in Frontend, Backend, Machine Learning, Augmented Reality whilst knowing your way through AWS, and oh, let’s not forget, also work on your Flutter and React Native side projects in the evenings!

You don’t have to, because…

Being Average may just be The Best for You

Employers are mostly searching for developers they can trust. For developers that can get their assigned tasks done in their own pace. For average developers.

Remember, there are very few people that are truly exceptional. These developers, well, you can see from a thousand miles. They quickly get up the ladder and are put into tech lead roles. A lot of responsibility. Stress. Long workings hours. Would you even want that if that’s not what you were born for?

The vast majority of us are average. We get our tasks done. We solve problems. And that, in most cases, is perfectly fine!

About Guilt

We all get that nasty feeling sometimes! Am I doing enough? Am I learning, building, hustling enough? Am I enough?

Do not feel guilty that you did not work on your side project on Saturday evening!

Do not feel guilty that you haven’t had the time to experiment with the latest frameworks!

It’s fine!

As long as you get your tasks done at your own pace, you should feel pretty darn good about yourself!

As long as you are conscious enough to know that you will always need to learn new things on some occasions, do not let the complicated and quickly changing world of programming overwhelm you.

Progress & Opportunities

Take everything in at your own pace.

Learn, experiment and build in your free time only when you feel like it.

Do not do it out of obligation, as this only puts more unnecessary stress on you and won’t get you anywhere.

Remember, most of the jobs are filled by average developers. You, me, the average Joe.

Learn, experiment and build only out of fun and passion!

If you liked this short opinion post, feel free to follow me and my newsletter at https://adamkiss.net. I would love that!

Internationalize your React App In 5 Easy Steps With React Intl

Adam Kiss — Sun, 13 Dec 2020 16:11:34 +0000

What is Internationalization?

Internationalization is the term used for making a website suitable for multiple locales (i.e. one or more places and/or languages).

Internationalization is oftentimes shortened to i18n as it starts with an “i”, ends with an “n” and there are 18 other characters in between. Developers just love their abbreviations, don’t they?

A good internationalization framework should provide a decent DX (developer experience) without taking up a lot of implementation time.

React Intl

The library this article presents is called React Intl. With more than 800,000 monthly downloads it’s one of the most used tools for internationalization in the world of React.

React Intl can do a lot more than just choosing messages/strings based on the locale. It can also format numbers and dates based on it!
In this article, however, only the messages aspect of it is covered as this is what most people are mainly looking for.

React Intl will now be presented in the context of a React app bootstrapped with create-react-app, using English and German as demo languages.

The repository with the working code can be found here: https://github.com/adamkss/react-intl-demo.

1. Adding the dependencies

First of all, React Intl has to be added as a dependency by running: yarn add react-intl.

We also need one more dependency to add, and that is extract-react-intl-messages. This development depndency will be used to extract the internationalized messages into their own language files. Thus, run: yarn add -D extract-react-intl-messages.

In order for extract-react-intl-messages to work, make sure to also create a .babelrc file in the root of your project with the following content:

2. Creating the locale specific files

Each locale to be supported needs to have its own file which stores the localised messages in JSON format.

Create a new folder called translations, and create en.json and de.json. Both should be, for now, empty:

Let’s also create an index.js in the translations folder which will export the translations themselves:

3. Wrap your React tree with React Intl’s provider

The React tree must be wrapped withr react-intl’s IntlProvider so the internationalized messages become accessible in each and every component.

IntlProvider expects 2 important props: the actual locale and the internationalized messages selected by the locale.

In the above example the locale is hardcoded. In general, you should either check the browser’s default language (via the navigator object: navigator.language), geo locate the user or let them simply select from a language list.

4. Start defining the messages

Each internationalized message should have an ID and a default value. Defining a default value is not mandatory, but it’s good if you start building your webpage in one language.

Defining an internationalized message is as simple as using the FormattedMessage component of react-intl:

Let’s define a simple React component which shows this greetings message and use it in the app:

This would show us the default message:

5. Adding messages in another language

As pointed out in the beginning of this article, all messages are stored in the language specific files (in this demo’s case en.json and de.json).

We must use the development dependency we added (extract-react-intl-messages) to fill these out with the keys (IDs) of our messages. For example, the greetingsMessage we used above.

For this we need to add a new script called extract-intl to the package.json's scripts key right below the react-scripts:

This script, extract-intl, runs extract-messages with a few arguments:

-l: defines the available locales, in this demo en(universal English) and de(universal German)
-o: defines the location of the internationalized JSONs (de.json and en.json)
-d: defines the default locale, in our demo it is set to English. Based on this argument, extract-messages copies the default messages we define in the code to the default locale’s JSON, in our case en.json

After running this command via yarn extract-intl, take a look at the two JSON files:

You can see that the default language’s localized file has been filled out with the default messages present in the code, whilst the other language file only has the keys. The values are now ready to be defined there as well!

The German version of greetingsMessage can be manually set by modifying de.json:

Now, to try it out, the German locale (de) needs to be passed to IntlProvider, which in turn will use all the German messages defined in de.json:

By doing this modification (swapping the locale passed to react-intl), we now get the German message, without having needed to actually touch the code of the component:

Great! Here is a summary of what needed to be done for internationalization:

Define the languages and language files
Use the <FormattedMessage> component with the ID of the internationalized message to get the message based on the currently selected locale
Run yarn extract-intl to fill out your localisation JSONs with the existing message IDs. This also automatically inserts the default messages (defined in the code) into the default language’s JSON (set in the extract-intl command)
Fill out the rest of the JSONs (languages) with the correct values
Change the locale passed to IntlProvider based on your needs (by the user’s region, manually, by the browser’s language etc.) which automatically inserts the right messages in your app from the selected locale!

Other ways to access the messages

Sometimes you cannot use the <FormattedMessage> tag to get/define a message. Think about the situation where the title attribute has to be set on an HTML element.

No worries! React Intl provides us with a hook and a HOC (higher order component you wrap your component with) that we can use to get access to the intl object (hook for functional components and a HOC, injectIntl, for class based components):

In closing

React Intl provides a clean and simple way to internationalize your application 🌍. Feel free to give it a try!

Thank you for reading this article all the way through, you rock!

If you liked the content, I would love if you subscribed to my newsletter by visiting https://adamkiss.net/!

DEV Community: Adam Kiss