Forem: Jakub Pomykała

What is CORS?

Jakub Pomykała — Tue, 18 Oct 2022 09:36:06 +0000

In this article, I will explain what CORS and CORS errors are and why you might run into them. I will present possible solutions and explain what preflight requests, CORS headers are, and why they are important in the communication between parties. The article assumes you have some basic knowledge of web development and the HTTP protocol. I tried to write the article in a way that is easy to understand for beginners and fill it with knowledge and try to avoid too many technical nuances that are not tightly connected with the CORS topic. If you spotted any mistakes or have any suggestions, do not hesitate to contact me. In some places, I made a simplification where a service means server and vice versa.

What is CORS?

Cross-Origin Resource Sharing (CORS) is an HTTP-based security mechanism controlled and enforced by the client (web browser). It allows a service (API) to indicate any origin other than its own from which the client can request resources. It has been designed in response to the same-origin policy (SOP) that restricts how a website (HTML document or JS script) loaded by one origin can interact with a resource from another origin. CORS is used to explicitly allow some cross-origin requests while rejecting others.

CORS is implemented primarily in web browsers, but it can also be used in API clients as an option. It's present in all popular web browsers like Google Chrome, Firefox, Opera, and Safari. The standard has been accepted as a W3C Recommendation in January 2014. Based on that, we can assume that it is implemented in all currently available and other than listed web browsers.

How does it work?

Everything starts on the client side, before sending the main request. The client sends a CORS preflight request to a service for resources with parameters in HTTP headers (CORS headers). The service responses using the same headers with different or the same values. The client decides, based on a CORS preflight response, if he can or cannot send the main request to the service. The web browser (client) will throw an error if the response does not meet the requirements of CORS preflight.

CORS preflight requests are sent regardless of the used libraries or frameworks to send requests from web browser. That's why you won't need to conform CORS requirements when working with API from your backend application.

CORS is not going to prevent users from requesting or downloading resources. You can still make a successful request
for a resource using apps like curl, Insomnia,
or Postman. CORS is only going to prevent the browser from accessing the resource if the
CORS policy does not allow it.

What is a CORS preflight?

When a browser sends a request to a server, it first sends an HTTP Options request. This is called a CORS preflight request. The server then responds with a list of allowed methods and headers. If the browser is allowed to make the actual request, it sends the actual request. If not, it shows an error and does not continue to send the main request.

CORS Headers

CORS headers are regular HTTP headers that are used to control the CORS policy. They are used in requests where the browser sends a CORS preflight request to the server, and the server responses with:

Access-Control-Allow-Origin indicates what origin can fetch resources. Use one or more origins, e.g.: https://foo.io,http://bar.io.
Access-Control-Allow-Methods indicates what HTTP methods are allowed. Use one or more comma HTTP methods, e.g.: GET,PUT,POST.
Access-Control-Allow-Headers indicates what request headers are allowed. Use one or more headers, e.g.: Authorization,X-My-Token.
Access-Control-Allow-Credentials indicates if sending cookies is allowed. Default: false.
Access-Control-Max-Age - indicates how long the request result should be cached, in seconds. Default: 0.

If you decide to use Access-Control-Allow-Credentials=true, then you need to be aware of the fact you cannot use wildcards * in Access-Control-Allow-* headers. It's required to explicitly list all allowed origins, methods, and headers.

See a full list of CORS headers.

Why is request blocked by CORS policy?

If you are a web developer, you have probably already seen or heard about CORS errors, and you have googled it many times to find the solution. The most common problem is that the browser blocks the request because of CORS policy. The browser will throw an error and show a log in the console:

Access to XMLHttpRequest at 'http://localhost:8080/' from origin
'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present
on the requested resource.

The CORS error above notifies a user that the browser couldn't access a resource (https://localhost:8080) from an origin (https://localhost:3000) because the server didn't allow it. It happened because the server didn't respond with Access-Control-Allow-Origin header with the origin or with a wildcard * in the CORS preflight response.

A request may be blocked by CORS policy not only because of the incorrect origin, but also incorrect HTTP header, HTTP method or Cookie header.

How to fix CORS error?

The fundamental idea of "fixing CORS" is to respond to "OPTIONS" requests sent from a client with proper headers. There are many ways to start responding with the proper CORS. You can use a proxy server, or you can use middleware in your server.

Remember that Access-Control-* headers are cached in a web browser according to the value set in Access-Control-Max-Age header. Please make sure that you clear the cache before testing the changes. You can also disable caching in your browser.

1. Configure your server

By default, if you are a server owner, you need to configure CORS responses in your server and this is the only way to address the issue properly. You can achieve this in multiple ways and on multiple layers of your app. The most common way is to use reverse-proxy, API gateway, or any other routing service that offers to add headers to the responses. There are many services that you can use to do this, some of them are: HAProxy, Linkerd, Istio, Kong, nginx, Apache, Traefik. If your infrastructure contains only an application without any additional layers, then you can simply add CORS support in the application code.

Here are some popular examples of enabling CORS:

Here you can find more examples of enabling CORS in different frameworks and languages: enable-cors.org.

If you cannot enable CORS in the service, but you still want to make request to it, then you need to use one of the following solutions described below.

2. Install a browser extension

Using a browser extension might be a quick and easy way to solve your problems with CORS in your developer environment. The biggest advantage of using a browser extension is that you don't need to change your code or configuration. On the other hand, you need to install an extension on every web browser that you use for testing your web application.

Browser extensions alter incoming preflight request by adding the necessary headers to trick the browser. It's a handy solution to work locally with the production API that accepts requests only from the production domain.

You can find extensions in Google Web Store or in Mozilla Add-ons Library. In some cases, the default extension configuration might not be enough; make sure that the installed extension is configured properly. You should also be aware of that leaving the extension turned on indefinitely may cause problems on some websites. It's recommended to use them only for development purposes.

3. Disable browser CORS checks

You can disable CORS checks in your browser completely. To disable CORS checks in Google Chrome, you need to close the browser and start it with the --disable-web-security and --user-data-dir flags. By doing that, Google Chrome will not send CORS preflight requests and will not validate CORS headers.

# Windows
chrome.exe --user-data-dir="C://chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

# macOS
open /Applications/Google\ Chrome.app --args --user-data-dir="/var/tmp/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

# Linux
google-chrome --user-data-dir="~/chrome-dev-disabled-security" --disable-web-security --disable-site-isolation-trials

All of those commands above start Google Chrome in an isolated sandbox. They will not affect your main Chrome profile.

See list of all available flags for Google Chrome.

4. Set up a proxy server

If you are looking for a solution that doesn't require you to change the browser settings, then you should look at the proxy server solution. This option helps you to overcome CORS errors without changing anything in the browser itself. The idea of using a proxy server is to send all requests to your server, and then the server will send the request to the actual service you want to use. You can build a proxy server on your own in a language and framework of your choice. You will need to configure CORS and implement a functionality to pass requests received requests to another service.

Proxy server is a good solution if you don't have access to the service you intend to use. There are ready to use and open-source proxy server services, but you should always ensure that they are not trying to intercept your requests with authorization headers and pass them to any 3rd party service. Such security breaches could be catastrophic failure for you and potential users of the service.

List of open-source CORS services that you can find on the internet:

Please review the code of the newest version before using any of those services.

How to test CORS?

Using a browser to test your CORS configuration might be a tedious task. You can use a tool like CORS Tester, test-cors.org, or, if you are familiar with the command line, you can use curl to test your CORS configuration.

curl -v -X OPTIONS https://simplelocalize.io/api/v1/translations

Beware of false CORS errors

In some cases, when a service is behind an additional layer with rate-limiter, load balancer or authorization server, you can get a false CORS error. Blocked or rejected requests by a server should respond with error status codes. E.g.,:

401 unauthorized,
403 forbidden,
429 too many requests,
500 internal server error,
any other than 2XX or 3XX.

You may see that the request is blocked due to failed preflight request, but in fact, a service just rejects it. You should always check the status code and response body of the response to avoid unnecessary debugging. The browser properly alerts you when a CORS preflight request fails, but the reason for the failure is not necessarily connected to the CORS configuration.

Conclusion

In this article, I tried to explain what CORS is, and what are the most common problems with it. I suggested 4 ways to fix CORS issues and explained the advantages and disadvantages of each one. I also explained how to configure CORS responses properly and how to test them. Moreover, I showed what are the most common issues with recognizing false CORS errors. I tried to put everything in simple terms and avoid technical nuances. If you have any questions, doubts, or suggestions, please do not hesitate to contact me.

Happy coding!

Resources

🔎 How I integrated Algolia search with NextJS and markdown files?

Jakub Pomykała — Tue, 12 Apr 2022 00:00:00 +0000

Since 2019 I’m building a SaaS for translation management as a solo developer. Since the very beginning, I needed a place where I could post code samples, and explain people how to integrate different frameworks or how to use SimpleLocalize CLI to upload and download translation files. You can see Algolia search in action on SimpleLocalize documentation.

At beginning, I started using GitBook software because it was shining and trendy at the time. It was a good move, because when you start something new you don’t want to start from scratch on every level. The main goal is to deliver good quality code and value to the customers, all other things you can (or should) buy to save time.

Short story long, I wasn’t quite happy with the GitBook after couple of months, because it didn’t fit to my needs, I didn’t like the style, and I was spending too much time on adjusting and fixing links and so on. I decided to go with my custom documentation, and surprisingly everything went smoothly! The only concert was lack o good search ability which is available in all documentation solutions, or open-source Docusaurus.

Installation

Algolia search components and Algolia client installation

npm install react-instantsearch-dom algoliasearch --save

gray-matter a Markdown parser and globby for finding files

npm install gray-matter globby --saveDev

Configuration

import algoliasearch from 'algoliasearch/lite';
import {connectStateResults, Hits, InstantSearch, SearchBox} from 'react-instantsearch-dom';

const searchClient = algoliasearch(
  'APP_ID',
  'SEARCH_API_KEY'
);

Results component

By default, Algolia <Hits/> component shows all results when search query is empty. I adjusted the code to show results only if there are any results and data are loaded.

const Results = connectStateResults(({searchState, searchResults, searching}) => {
  const hasQuery = searchState && searchState.query;
  const hasResults = (searchResults?.hits ?? []).length > 0;
  const isSearching = searching;
  if (hasQuery && hasResults) {
    return <Hits hitComponent={Hit}/>;
  }
  if (hasQuery && !hasResults && !isSearching) {
    return <div>No results 😔</div>
  }
  return null;
}
);

Hit component

Hit component is nothing else as just a one search result. I stripped my styling to make it easier to copy-paste. 😄

import React from "react";

function Hit(props: any) {
  const content = props?.hit?.content ?? "";
  const words = content.split(" ").length;
  return (<a href={props.hit.slug}>
    <div>
      <h3>{props?.hit?.frontmatter?.title ?? "no title"}</h3>
    </div>
    <p>{props?.hit?.frontmatter?.excerpt ?? ""}</p>
  </a>)
}

export default Hit;

Search component

Use InstantSearch component and search client which you configured in the previous step, put your index name, and use Algolia SearchBox component and our custom Results component with changed empty state behaviour which we created previously.

<InstantSearch indexName="simplelocalize-docs" searchClient={searchClient}>
    <SearchBox/>
    <Results/>
</InstantSearch>

I didn’t want to make it more complex that it needs to be, I overwrite some CSS properties in my stylesheets to hide a search button and reset button. I also added Bootstrap styling to the search box using SCSS @extend property. Simple and it does the job.

.ais-SearchBox-input {
  @extend .form-control;
}

.ais-SearchBox-submit {
  display: none;
}

.ais-SearchBox-reset {
  display: none;
}

Get markdown files to index

Now, it’s time to get all files which should be indexed and visible in the search results. I created a new index-docs.js file which I will be executed after every successful build on CI/CD server. All my documentation pages are in /docs/ directory. So I needed to write a script for converting it into an array of objects to populate Algolia search index.

import {globby} from 'globby';
import fs from "fs";
import matter from "gray-matter";
import algoliasearch from 'algoliasearch';

const pages = await globby([
  'docs/',
]);

const objects = pages.map(page => {
  const fileContents = fs.readFileSync(page, 'utf8')
  const {data, content} = matter(fileContents)
  const path = page.replace('.md', '');
  let slug = path === 'docs/index' ? 'docs' : path;
  slug = "/" + slug + "/"
  return {
    slug,
    content,
    frontmatter: {
      ...data
    }
  }
})

//algolia update index code

I’m getting all markdown files from /docs/ directory with globby,
reading content of the files with fs,
parsing files with gray-matter for markdown,
and doing some magic tricks to convert file path to slugs which are used.

In my case, slugs are the just file paths, where the file path looks like this /docs/{category}/{title}.md, for example:/docs/integrations/next-translate.md, so slug will look like this: /docs/integrations/next-translate/

In the end I’m getting an array of objects which looks like this:

[
    {
      "slug": "/docs/integrations/next-translate/",
      "content": "My article content for indexing",
      "frontmatter": {
        "category": "Integrations",
        "date": "2022-01-20",
        "some-other-properties": "properties"
      }
    }
]

Update Algolia index

Algolia provides a really simple and easy to use JavaScript client, so there no magic here. We are acquiring our index, and saving objects which we created in previous step.

const client = algoliasearch(
  'APP_ID',
  'ADMIN_API_KEY'
);
const index = client.initIndex("simplelocalize-docs")
index.saveObjects(objects, {
  autoGenerateObjectIDIfNotExist: true
});

Include index update in package.json

{
  "name": "simplelocalize-docs",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export -o build/ && i18n:download && index:docs",
    "index:docs": "npx ts-node --skip-project index-docs.mjs",
    "i18n:upload": "simplelocalize upload",
    "i18n:download": "simplelocalize download"
  }
}

You can execute the script manually by running npm run index:docs.

That’s it? That’s it! See the search in action on SimpleLocalize documentation page.

Number formatting in JavaScript

Jakub Pomykała — Thu, 02 Dec 2021 12:30:43 +0000

Discover the power of toLocaleString() function in JavaScript. Format numbers, currencies, and units without any 3rd party localization library.
In simple words, the toLocaleString() method converts a number into a string, using locale format. By default, it uses locale from web browser language but you can specify it manually.

Syntax

number.toLocaleString(locale, options);

Parameters

locale (optional) - if not provided, then the method will use the host environment's current locale (e.g.: default browser language)
options (optional) - object with formatting options

var exampleNumber = 123456.789;

exampleNumber.toLocaleString('pl-PL');
// output: 123.456,789

number.toLocaleString('ar-EG');
// output: ١٢٣٤٥٦٫٧٨٩

Limit to two significant digits

const price = 123456.789;
price.toLocaleString('en-IN', { 
  maximumSignificantDigits: 2 
});
// output: 1,23,000

Use default locale and custom number formatting

Put undefined as first parameter, to use default locale set in browser.

const price = 30000.65;
price.toLocaleString(undefined, { 
  minimumFractionDigits: 2, 
  maximumFractionDigits: 2 
});
// English output: 30,000.65
// German output: 30.000,65
// French output: 30 000,65

Change formatting style

Style property can have 3 different values:

decimal (default)
currency
percent
unit

In this article, we go through every style.

Style: Currencies

Use style property in options object with value currency to format number into a string.

const price = 123456.789;
price.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' });
// output: 123.456,79 €

price.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });
// output: ￥123,457

You can adjust currencyDisplay property to change currency formatting. Possible values are:

symbol (default)
code
name

const price = 123456.789;
price.toLocaleString('de-DE', { 
  style: 'currency', 
  currencyDisplay: 'code', 
  currency: 'EUR' 
});
// output: 123.456,79 EUR

price.toLocaleString('ja-JP', { 
  style: 'currency', 
  currencyDisplay: 'name', 
  currency: 'JPY' 
});
// output: 123,457円

Style: Percentages

Percentage localization is a non-trivial task in some languages.
Not in every language, percentage sign comes after a number.
For example, in Arabic languages.

const value = 0.767;
value.toLocaleString('pl-PL', { style: 'percent' });
// output: 77%

value.toLocaleString('ar-SA', { style: 'percent' });
// output:؜ ٧٣٪ ؜

Style: Units

Units style is the one of the most understated JavaScript locale features. It allows you format
number into any popular units with proper formatting for given locale.

Example with `liter` unit

Use unit property in options object to set a desired unit.

const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter'
});
// output: 3 l

You might also want to adjust unitDisplay property to show full word instead just one letter.

const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter',
    unitDisplay: 'long'
});
// output: 3 litry

The shortest version you will get with narrow value in unitDisplay.

const value = 3;
value.toLocaleString('pl-PL', {
    style: 'unit',
    unit: 'liter',
    unitDisplay: 'narrow'
});
// output: 3l

List of JavaScript number locale units

Below, you can check all possible values for unit property.

acre
bit
byte
celsius
centimeter
day
degree
fahrenheit
fluid-ounce
foot
gallon
gigabit
gigabyte
gram
hectare
hour
inch
kilobit
kilobyte
kilogram
kilometer
liter
megabit
megabyte
meter
mile
mile-scandinavian
milliliter
millimeter
millisecond
minute
month
ounce
percent
petabyte
pound
second
stone
terabit
terabyte
week
yard
year

Kilometer per hour

You can combine two values using per keyword, like X-per-Y. For example kilometer-per-hour.
JavaScript will choose the best-fit localized pattern to format this compound unit.

const speed = 50.2137;
speed.toLocaleString('pt-PT', {
  style: 'unit',
  unit: 'kilometer-per-hour'
});
// output: 50,214 km/h

Terabyte per gram

The unit property doesn't have to make sense, it accepts any combination. 😊

const value = 50.2137;
value.toLocaleString('pl-PL', {
  style: 'unit',
  unit: 'terabyte-per-gram',
  unitDisplay: "long"
});
// output: 50,214 terabajta na gram

Resources:

About Core Web Tools

Jakub Pomykała — Mon, 08 Nov 2021 00:00:00 +0000

Core Web Tools is a directory with web tools for internet users. It’s created with minimal server usage for near to zero-carbon emission in mind.

Why?

There are a lot of great small utility apps on the web, and I think they are not getting enough attention. I wanted to make the app easy to use, that’s why there is no signup or tons of unnecessary stuff, just a list of links with small preview.

Features

List of tools, apps or services,
Option to save them for later.

Submission Rules

To be honest there are no restrictions in that matter. You can submit anything, but not everything will be added right away. You can add your small and clunky side-project, or big paid service. It’s hard to decide at this moment what tools should be listed.

For now the priority are small web apps that solve some problem using just a JavaScript in your web browser, no servers and so on; or apps which don’t have any fancy landing page to get visibility.

However, I added a few services which have paid options because they are actually used in this project, so I think they deserve being listed.

Fill submission form

Technology Stack

Database: JSON
Framework: NextJS
Hosting: Vercel
Cover: Bannerly
i18n: SimpleLocalize
Developer: @jakub_pomykala 😄

What’s next?

If the project will be used by more people than myself, I would like to review listed tools and posts them every week or month as collection of ‘My favourites’, ‘Designer Tools’ or ‘Web Developer 2021’.

Top 12 libraries for NextJS, React apps and React Native apps for i18n and react localization

Jakub Pomykała — Sat, 13 Feb 2021 16:17:09 +0000

Update 2021-02-22

Hey! If you want to read the most recent version of this post, then checkout the original post on my blog. I update it regularly! 🌱

Star awesome-i18n repository

A full list of localization libraries and tools on Github can be found on GitHub. Feel free to add your resources there. 🤙

⚛️ Libraries list for React localization

Checkout my list of the best React libraries wich I gathered. I focus mainly on ReactJS, React Native and Expo libraries.

1. react-native-localize

A toolbox for your React Native app localization

2. FormatJS

Internationalize your web apps with react-intl library. Check also FormatJS CLI for message extraction below!

3. FormatJS CLI

Extract messages from project with FormatJS library

4. react-i18nify

Simple i18n translation and localization components and helpers for React

5. react-persian

react-persian is a set of react components for Persian localization

7. react-i18next

Internationalization framework for React / React Native which is based on i18next. The i18next-community created integrations for frontend-frameworks such as React, AngularJS, Vue.js and many more.

8. bloodyowl/react-translate

Internationalization for react

9. next-translate

Easy i18n for Next.js +10

10. react-translated

A dead simple way to add complex translations in a React project

11. React-intl hooks

React-intl-hooks is a small and fast library that you can use to replace Format.js components.

12. SimpleLocalize CLI

SimpleLocalize CLI allows you to upload and manage translation keys in cloud for free!

1.Upload translation in JSON files and manage them in translation editor.

2. Manage them in translation editor

3. Download ready to use JSON files

👋 Thanks for reading! Follow me on Twitter

💼️ Why it's a good idea to keep e-mail registration in 2021

Jakub Pomykała — Fri, 12 Feb 2021 13:01:43 +0000

When I started working on my app for translation management in 2018, I knew it would be good to support single sign in option (SSO) with GitHub.

The service was created with intention that it will be used by developers, and developers have GitHub accounts! I even
advertised it as "Localization for Software Developers" or "developer-friendly localization". Although, it didn't get too much attention on Hacker News,
but hey! Now I can put Hacker News logo on my landing page and say "Featured on". 👌

As the time goes I implemented good old e-mail registration because I had ready to use code and open-source library for
Java Spring Boot to send e-mails. The most of the work was done.

Thanks to OAuth library for Spring Boot, I also added Google account login with ease. I only needed to add a few more lines in configuration file and voilà!
Visitors are able to create accounts by Google Profile. I couldn't add LinkedIn due to some problems, so I just left what I got in config and gave up. 😅

Eventually, I launched SimpleLocalize in late 2018. I started posting this project everywhere, ProductHunt, Reddit, dev.to, Medium and more.

After 2 years of application existence I gathered over 800 users and surprisingly most of them used Google to register.
It's about 550 accounts which used Google to create their accounts. It was a surprise for me. Only 20 people chosen GitHub (including me 😄),
and the rest used e-mail, or their accounts has been created by project admins.

SimpleLocalize offers project sharing where you can add team member by e-mail and then account is automatically created for them.
Their accounts are always created using 'e-mail' method.

I noticed that every person who used GitHub or Google to register, after trying the service wanted
to move its account to business e-mail. The second option was that they were creating a new account with company e-mail,
and asking me to move their projects to the new account. This is something what should interest every bootstrapper. Don't kick out
the e-mail registration, people still use it to create accounts using business e-mails instead personal accounts!

In conclusion, my project is now targeted to more professional organizations and small/medium agile team.
I needed to change my plans, to make sure I can provide support fast enough. 💪

I also plan to add Microsoft login in the near feature.
Many corporate employees use Outlook and Microsoft ecosystem.
They will more encouraged to create an account in the system and try it out.
They will not have to remember a password to e-mail accounts and use their personal accounts.
In the further feature it would be great to add more corporate solutions like OpenID.

Follow me on Twitter 👋

Post was originally posted on https://jpomykala.com

Easy Localization: 7 tips to make your work faster

Jakub Pomykała — Tue, 12 Jan 2021 11:31:23 +0000

Did you find out a smart way to handle i18n, and it didn't work again? Checkout our 7 tips how to make your localization better and easy to maintain. We worked for over 4 years with many companies on their i18n localization systems. Now we are sharing our experience with the audience!

Use unique translation keys

For each translation use separate translation key. do not try to cheat the system. This may result with changing translation in multiple places which may not fit in all places. It's hard to discover such problems later. Try to keep one i18n key per translation. This will allow you to precisely edit content in place where you want.

Don’t capitalize with CSS

When you try to cheat the system using one key in multiple places you will notice that in some places you need capitalized translation and somewhere you don’t want to use this. Solution is to use unique translation keys for every
place, and capitalize it properly. Remember that different languages have different grammar rules. Not in every language we capitalize the days of week. Many users will easily notice the grammar issues, and this can cause they won't stick with your application for a long.

Use same translation keys in buttons

If some action in your service does the same thing, then you should use the same translation key every button. This is the one of a few places where you should use the same translation key. Thanks to that you will always keep the context. Same wording will help you users to understand what they are doing. Be consistent, users will thank you and more easily understand the system.

Don’t nest translations

How many times did you tried to create fancy directory structure to get everything clean and tidy? Probably many. After a few days you end up with the same mess which you had, because instead of searching the correct directory you just put files to ‘temporary’ directory. It looks like the same with the translations.

In many i18n libraries it’s a common approach to use nested translations like following:

{
  "nav": { 
    "buttons": 
        { 
          "get-started": "Get Started"
        }
  }  
}

Don’t do this, this tidiness is artificial, and it won’t help. Imagine that your app will evolve because the only constant in software development is change. Moving translations around will be a nightmare. After some time translation key may not belong anymore to some parent node.
Then you will have to choose which key should go to another nested group.

Keep flat structure

If you think that keeping translation in 'groups' is a good idea then consider using prefixes. In some scenarios it is a good idea, for example for navigation keys, or buttons. You can use category for each translation keys like following
nav-product-solution
or
nav.product-solution

It makes sens because you will exactly know which translation will be changed.

Consider i18n management

Translation management is being more and more important topic when your project grows. Many i18n libraries uses JSON files to keep translation files. The structure varies but in general all of them looks similar. The biggest i18n problem is that it’s very hard to handle without a proper tools. Image that every of translations are packed into separate json file named: "en.json", "de.json", "fr.json", "it.json" and every file contain structure like this:

{ 
  "sign-in": "Sign In",
  "get-started": "Get Started",
  "register": "Register",
  "logout": "Logout",
  "close": "Close"
}

Adding a translation to many files can be frustrating and slow down the development process. Now you need to send it to translator or translate it on your own using DeepL, Google Translate or Microsoft Translate.
Creating localized apps or games can be really annoying in such conditions. That is why we created SimpleLocalize. Clean, simple, and user-friendly system for handling i18n. We provide many i18n library integrations including i18next, FormatJS, Android and iOS. Translation keys can be easily extracted from the projects, uploaded to translation editor and downloaded back on local disk. Our localization command-line tool can simplify this process. Book a demo with me to see how your life can be easier with the SimpleLocalize!

Finding unused translation keys

One of the biggest problems in agile teams is that system changes and evolving fast! That causes problem with the translations which must keep up with a product evolving. It’s easy to add a new translation in code and ping translators. But what happens when your product now contains 10x times more translations keys than the beginning? Many of them are still useful but not used, the key has been changed, but the meaning is still valid, so it’s hard to say if we can remove it or no. The solution is SimpleLocalize system which will help you in finding out which translation keys is not used in the code. Integrate your project with our translation management service and sort translation keys by last occurrence! To extract translation keys from the project files you can use our Localization CLI Tool. It’s open source, so it can be used in enterprise project.

Conclusions

App localization is not the easy topic. Many people tried to find out the new smart way of handling it, many of them failed due to over-engineering stuff. How about keeping everything simple, and clean? Try to always follow the KISS rule, every professional software developer will tell you that!

This post has been originally posted on SimpleLocalize Blog. Link: https://simplelocalize.io/blog/posts/easy-localization/

📢 Startup advertising: Stick with the bubble

Jakub Pomykała — Mon, 11 Jan 2021 14:57:45 +0000

I work as a software developer for more than 7 years now. For that time I spent many years in companies which were struggling with
getting traction and more customers.

Eventually, at some point every manager wanted to invest some time in online marketing when the lead generation by networking was not enough.
Obvious and easy way? Pay for ads and get more customers. It never worked. I also tried to buy ads for my projects.
In most cases it's useless, I was getting more views and clicks. I never get an e-mail or customer

👺 Don't buy ads

If you ever wondered if it's worth to create a campaign on Facebook then... it's not. Consider hiring an expert for that or don't do it on your own.
I've never hired someone to run my campaigns, so my expirience may not be valid, but many of you probably would try to run ads on your own.

I created more than 20 different campaigns on Facebook and other social platforms, and I've never meet a customer
who saw my ad on Facebook or Google. Recently, I read an article about spending on digital ads at Uber and it made me thinking if online marketing is still a thing in 2021.
Maybe the targeting was wrong, or maybe I should put much more money on it to make it effective. The only difference which I noticed was more page views.
Follow the next steps in this post before you buy ads.

😇 Find good backlinks

Don't flood Reddit or any other side project aggregator with your links. It won't improve the SEO because everybody can post there a link.
Try to find places where not everybody can post about you and try to appear there. In 00's URL exchange was a popular way of getting more traffic on your website. Today this is still relevant.
Try to appear in places which are related to your project.

👨‍🔧 Fix SEO first

When I was creating landing pages, I got brief knowledge about SEO. I knew I need some links, keywords, good titles maybe and not copied content.
After I finished death march for features in my projects in 2020, I started thinking: 'how to increase my sales'. I knew I probably need to write some tutorials,
but then I discovered ahrefs. I bought 7 days trial and started checking all the issues which I got on SimpleLocalize

I didn't realize how much work I need to do to fix all of these issues. Unique page title, keywords, text with good contrast, good descriptions for every page. Go through ahrefs SEO checklist
to fix your issues if you don't want to buy a service yet. It's not cheap, but it's worth to subscribe.

All my rankings started going up after adjusting a few HTML tags. It was extremly easy thanks to react-helmet. I also moved my docs from GitBook pages to GatsbyJS, so this also helped a lot.

🛁 Join to the bubble

This is the final advice which combines all advices from above. By fixing your SEO and using backlinks it's easy to join to the bubble.
By bubble, I mean 'being among all other websites which are similar'. People who will need your service or something similar to your service will find you later or sooner.
They will compare you with your competitors and choose the right option. You don't need to put $$ into adverts or flood Reddit to a get traction.

and happy new year! 😄

ReactIntl and ReactJS interantionalization with SimpleLocalize.io

Jakub Pomykała — Fri, 20 Nov 2020 00:13:31 +0000

Start with FormatJS library (originally react-intl)

Today I will show you how localize React application using formatjs.io library (originally yahoo/react-intl).
Please notice that this is not the only popular library for React app localization. Second popular library is i18next which supports much more frameworks than FormatJS.
If you are interested in i18next integration, you can check our tutorial here.

Create a sample project

I will start with something simple. I will create a new project using create-react-app

yarn create react-app simplelocalize-react-intl-example

Install dependencies

Add react-intl library to your newly created project.

# Using NPM
npm i -S react react-intl

# Using yarn
yarn add react react-intl

Add Language Context

In this project I will use Context to keep translations and option to change language in realtime.

import React from 'react';

const LanguageContext = React.createContext("en");

export default LanguageContext;

`react-intl` configuration

Let's create main configuration

import React from "react";
import {IntlProvider} from 'react-intl'
import LanguageContext from "./LanguageContext";

class SimpleLocalize extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      messages: undefined,
      language: "en"
    };
  }

  componentDidMount() {
    this.setupLanguageMessages(this.state.language);
  }

  setupLanguageMessages = (language) => {
    const projectToken = "5e13e3019cff4dc6abe36009445f0883";
    const translationsUrl = `https://cdn.simplelocalize.io/${projectToken}/_latest/${language}`;
    return fetch(translationsUrl)
      .then((data) => data.json())
      .then((messages) => this.setState({language, messages}));
  };

  render() {
    return (
      <LanguageContext.Provider
        value={{
          changeLanguage: (language) => this.setupLanguageMessages(language)
        }}>
        <IntlProvider
          locale={this.state.language}
          messages={this.state.messages}>
          {this.state.messages ? this.props.children : null}
        </IntlProvider>
      </LanguageContext.Provider>
    )
  }
}

export default SimpleLocalize;

This wrapper will keep translations in our LanguageContext and it will also provide a function to change language in fly.

Project `translationsUrl` variable

Create a SimpleLocalize.io project to get your unique messages variable. For this demo project you can use the messages from the example above!

Activate `react-intl` in application

Now lets use our newly created SimpleLocalize wrapper to provide translations for React application

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import SimpleLocalize from "./SimpleLocalize";

ReactDOM.render(
    <SimpleLocalize>
      <App/>
    </SimpleLocalize>,
  document.getElementById('root')
);

Done! React will now fetch translations from SimpleLocalize CDN and provide them to your app.
Let's check how to use it in the source code.

Using translations in the app

Now, let's use translations, and create very simple web page.

Usage

Checkout how use it.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import {FormattedMessage} from "react-intl";
import LanguageContext from "./LanguageContext";

function App() {

  return (
    <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>

          <img src={logo} className="App-logo" alt="logo"/>
          <p>
            <FormattedMessage id="DESCRIPTION"/>
          </p>

          <a
            className="App-link"
            href="https://simplelocalize.io"
            target="_blank"
            rel="noopener noreferrer"
          >
            <FormattedMessage id="LEARN_MORE"/>
          </a>
        </header>
      </div>)}
    </LanguageContext.Consumer>
  );
}

export default App;

Using `<FormattedMessage/>` in application code

<FormattedMessage/> usage is very easy:

<FormattedMessage id="YOUR_TRANSLATION_KEY/>

React will convert FormattedMessage tag into span tag and put concrete translation into it. You can also use <FormattedHTMLMessage id="TRANSLATION_WITH_CSS"/> which will also produce message with HTML inside span tag.
Example translation key could look like following:

TRANSLATION_WITH_CSS = This is my <strong>text</strong>

Switching between languages

In presented example I used LanguageContext.Consumer to provide function. This function can trigger language change and fetch proper messages from the CDN.

 <LanguageContext.Consumer>
      {context => (<div className="App">
        <header className="App-header">
          <div>
            <p>
              <FormattedMessage id="USE_BUTTONS_BELOW"/>
            </p>
            <button onClick={() => context.changeLanguage("en")}>English</button>
            <button onClick={() => context.changeLanguage("es")}>Spanish</button>
            <button onClick={() => context.changeLanguage("pl")}>Polish</button>
            <hr/>
          </div>
          //...
        </header>
      </div>)}
    </LanguageContext.Consumer>

You need Language.Consumer tag only in places where you would like to change the language. It's not needed for <FormattedMessages/> tags.

Let's check it!

Notice that translation is done in realtime! How cool is that? Very cool!

Checkout live version

Project code is available on GitHub.

i18next and ReactJS interantionalization with SimpleLocalize.io

Jakub Pomykała — Thu, 01 Oct 2020 21:44:19 +0000

Background

We took original post inspiration from an awesome guy called Aryclenio Xavier Barros, who presented sample app for localizing app with i18next. You can read it here.
We expanded the idea by adding section about integrating i18next with translation management system.

How to start with i18n in ReactJS?

Thanks to that ReactJS is super popular library we got so many options. The most popular i18n libraries are i18next and yahoo/react-intl. Today I will show you how to integrate i18next into your ReactJS application.

Create a sample project

I will start with very beginning and I will create sample app in ReactJS with TypeScript

yarn create react-app simplelocalize-i18next-example --template typescript

Install dependencies:

npm install --save react-i18next i18next i18next-http-backend i18next-browser-languagedetector

No we are ready to start!

Configuration

I will create i18n.ts file where I will put whole i18next configuration, after that we will import this file in index.ts.
My i18n.ts looks as following:

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use (initReactI18next)
  .init({
    // default/fallback language 
    fallbackLng: 'en',
    ns: ["default"],
    defaultNS: "default",
    //detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    },
    backend: {
      loadPath
    }
  })

export default i18n;

Project `loadPath` variable

Create a SimpleLocalize.io project to get your unique loadPath variable. For this demo project you can use the loadPath from the example above!

Enable `i18next` in application

Configuration is completed when you import i18n.ts file in index.ts just by adding import './i18n'; Whole index.ts file should looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import './i18n'; // import i18next configuration (!!)

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

We are done! i18next library is ready to use.

Using translations in the app

Now, let's use translations, and create very simple web page.

Import `useTranslation` hook

To import the i18next hook we use the following code:

import {useTranslation} from "react-i18next";

function App () {
  const {t, i18n} = useTranslation ();
  //...

The t variable is a function used to load translations for given key.

Using `t` in application code

t usage is very simple and clean:

t("USE_BUTTONS_BELOW")

in HTML it would look like following:

 <p>{t("USE_BUTTONS_BELOW")}</p>

Switching between language

Now it's a time to add option to switch languages. I will use simple buttons without any fancy CSS styles. :) I added 3 buttons for English, Spanish and Polish language.

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

function App() {
  const { t, i18n } = useTranslation();
  return (
    <div>
          <p>
            {t("USE_BUTTONS_BELOW")}
          </p>
          <button onClick={() => i18n.changeLanguage("en")}>English</button>
          <button onClick={() => i18n.changeLanguage("es")}>Spanish</button>
          <button onClick={() => i18n.changeLanguage("pl")}>Polish</button>
        </div>
  );
}

export default App;

Let's check it!

Notice that translation is done in realtime! Cool!

Checkout live version

Project code is available on GitHub.

Software project internationalization - quick look

Jakub Pomykała — Tue, 08 Sep 2020 09:59:28 +0000

Localization in mobile/web applications

The most important thing in any software translation process is localization. While introducing your mobile or web app or any other product to another market, it’s important to adjust it for the particular location.
Localization is the process of targeting your product for specific group of users, defined by their location. In other words, the product or service you provide will be more suitable for a particular country or area thanks to the localization.

Why should I focus on localization?

Localization significantly improves user experience by making texts in your app more readable and understandable for particular group of users - they can react with the product more naturally, in the environment they know and feel good with, which brings only good results for your product. More languages you offer in your product, more users and customers you can attend.
Translation with localization included, brings many more benefits to the final product than with a simple translation of the text. Moreover, localization gives your product a soul, like it's designed specifically for a group of users in specific location.
Localization is in opposition to one universal product designed for everyone. It refines and adapts content for local needs which makes the product more suitable for specific recipients. As a result, you can create a unique relationship between your product or company and the person who is using it.

How localization works?

Localization is based on adapting the content to the product recipient. It means that instead of using simple translation, you need to search deeper, understand the language culture of your users. It's important to notice, that a word in English translated to another language, may have more than one meaning and very often it can't be translated literally. Therefore, it's crucial to understand different cultures and language differences to localize the product successfully so it’s as familiar as possible for the users.
Another example are symbols which may have different meaning in different languages and cultures. Furthermore, there are multiple variations of languages. As an example, Spanish is different in Madrid, in Malaga and in Buenos Aires or Bogotá. Words in the same language may have totally different meaning used in different parts of the world. That's why the localization is important - you want users to react positively to your product, accordingly to the way you designed it to be.

Why localization is important?

Improves customer satisfaction. Localization shows to your customers that they are important for you and you take care of them by providing with the product that’s adjusted for their culture, customs and needs.
Helps increase customers base and expand your business.
Improves your SEO.

Should I use localization tools?

There are multiple tools on the Internet that will help you automatize the process of localization. See below how exactly they work:

They help you automatize the process of translation and localization and deliver product faster for specific locations
You can control the whole translation and localization progress in one app
Changes can be deployed with one click so they are updated immediately
You can easily track all changes in translations and see previous versions
They give you an option to translate for multiple languages
Easy interface helps translators to focus more on the localization
You can work with your team on multiple projects at the same time, online
They optimize your workflow
and much more!

Get your free trial account on SimpleLocalize to check all the features and test it on your product!

Why handling i18n in software projects is tough

Jakub Pomykała — Fri, 04 Sep 2020 22:26:27 +0000

Have you ever thinking about adding more languages to your application? Does it make sens to do it? Will you get more customers? Or will it make your existing customers happier? Or maybe you would like to look more professional than your competitors? Let's make it clear - yes, your app will look much more profesional if you will give your clients more languages to choose besides English which is language of the Internet by default. Every big tech company provides more than English language in their apps.

Background history

When I was creating my first big B2C web application I knew I will need to support more languages than only English. I wanted to reach more mature people who often don't know English at all. Application initially was designed to support 5 languages:

English, because it's by default the Internet language
Polish, because I'm from Poland and I wanted to reach people like my parents who would like to use this app in their first language
Spanish, because my girlfriend knows this language very well
Italian, because we planned to add places from Italy
French, because my girlfriend would like to learn this language 👩‍🎨

I started working on the coding side and my girlfriend was taking care about everything else including translations. We noticed very quickly that i18n... is though...

I was using ReactJS to create PlaceFlare.com so I decided to go with yahoo/react-intl from FormatJS.io as my primary i18n library. It was very easy to configure and to use. The problem was with handling i18n keys and translations for more than one language.

Why maintaining i18n is so hard

Basically it was very hard to handle and maintain all i18n keys because every language translations were packed into separate JSON objects or even separate JSON files like en.json, it.json and so on.

Making changes was hell! When I needed to update an i18n key in code, I had to do the changes in every translation file, and in the end I needed to update the translation itself to match it.

How I solved problem which I created

I came up with the simple software solution. We started keeping translations in Excel files like shown below.

So I provided a small Java app to convert such Excel file to format required by FormatJS library. More problems come up later, like finding i18n in application code, also i18n key changes were still a nightmare, keeping one Excel file which should be always up-to-date, more and more problems to solve.

How I improved my clunky solution

Very quickly I turned everything what I learned into small simple SaaS project which I called SimpleLocalize.io I think I solved most of the problems with i18n app translations.

The biggest advantage of SimpleLocalize.io is that you can use any i18n library you want. SimpleLocalize CLI will extract i18n keys from application source code, push them to the cloud where you can edit it and publish to the CDN which will make it easy to fetch and use in app.

Forem: Jakub Pomykała

What is CORS?

What is CORS?

How does it work?

What is a CORS preflight?

CORS Headers

Why is request blocked by CORS policy?

How to fix CORS error?

1. Configure your server

2. Install a browser extension

3. Disable browser CORS checks

4. Set up a proxy server

How to test CORS?

Beware of false CORS errors

Conclusion

Resources

🔎 How I integrated Algolia search with NextJS and markdown files?

Installation

Configuration

Results component

Hit component

Search component

Get markdown files to index

Update Algolia index

Include index update in package.json

Number formatting in JavaScript

Syntax

Parameters

Limit to two significant digits

Use default locale and custom number formatting

Change formatting style

Style: Currencies

Style: Percentages

Style: Units

Example with liter unit

List of JavaScript number locale units

Kilometer per hour

Terabyte per gram

Resources:

About Core Web Tools

Why?

Features

Submission Rules

Technology Stack

What’s next?

Top 12 libraries for NextJS, React apps and React Native apps for i18n and react localization

Update 2021-02-22

Star awesome-i18n repository

⚛️ Libraries list for React localization

1. react-native-localize

2. FormatJS

3. FormatJS CLI

4. react-i18nify

5. react-persian

7. react-i18next

8. bloodyowl/react-translate

9. next-translate

10. react-translated

11. React-intl hooks

12. SimpleLocalize CLI

1.Upload translation in JSON files and manage them in translation editor.

2. Manage them in translation editor

3. Download ready to use JSON files

💼️ Why it's a good idea to keep e-mail registration in 2021

Easy Localization: 7 tips to make your work faster

Use unique translation keys

Don’t capitalize with CSS

Use same translation keys in buttons

Don’t nest translations

Keep flat structure

Consider i18n management

Finding unused translation keys

Conclusions

📢 Startup advertising: Stick with the bubble

👺 Don't buy ads

😇 Find good backlinks

👨‍🔧 Fix SEO first

🛁 Join to the bubble

and happy new year! 😄

ReactIntl and ReactJS interantionalization with SimpleLocalize.io

Example with `liter` unit

`react-intl` configuration

Project `translationsUrl` variable

Activate `react-intl` in application

Using `<FormattedMessage/>` in application code

Project `loadPath` variable

Enable `i18next` in application

Import `useTranslation` hook

Using `t` in application code