→ \

, without skipping levels. Instead of styling elements with CSS, use HTML (for example, \ for important text instead of just making it bold with CSS). This helps screen readers understand the content structure and improves SEO. Test legibility with the phrase "Illicit 0bserver in COde 8uilding" to spot fonts that confuse characters like I, l, 0, and O. Images, icons, and alt text Images must be readable to all users, including those using screen readers. Decorative visuals should not distract from the content, while informative images should enhance understanding. To make your images accessible: Use descriptive alt text for all meaningful images. Alt text should convey the purpose and content of the image, not just its appearance. Image accessibility with alt-text usage Use role="presentation" or empty alt="" for decorative images. Avoid using images of text. Instead, use CSS for text styling. If you must use text in an image, provide a text alternative in the alt attribute. Ensure icons have clear labels using aria-label or aria-labelledby attributes. Aria-labels are used to provide additional context for screen readers. For example, if you have a button with an icon but no text, you can use aria-label to describe its function. Animation & motion preferences Motion should enhance, not distract. Some users may find animations disorienting or triggering, making it crucial to provide options for reduced motion. To make animations accessible: Avoid flashing elements or autoplay effects. Animations that flash more than three times in one second can trigger seizures in users with photosensitive epilepsy. Respect users who prefer reduced motion nad provide a way to disable animations or reduce motion effects. Use animations to enhance understanding, not distract. For example, use subtle transitions to indicate changes in state (like a button press) rather than flashy effects that draw attention away from the content. Offer static alternatives when animation is essential. Auto-loop and pause buttons on video The prefers-reduced-motion media query detects user preferences for reduced motion. You can use it to apply styles that respect these preferences: Keyboard navigation Not everyone uses a mouse. Keyboard accessibility benefits everyone, from power users to people with motor disabilities. To ensure keyboard accessibility: All interactive elements must be reachable with Tab, Enter, Space, and arrow keys. This includes links, buttons, form fields, and custom controls. Ensure that the tab order is logical and intuitive. Use visible :focus styles to show which element is selected. Pro Tip: Use the tabindex attribute to control the tab order of elements. Use tabindex="0" for elements that should be focusable in the natural tab order, and tabindex="-1" for elements that should not be focusable. At SimpleLocalize, we ensure that all our UI components are keyboard-navigable. For example, our translation editor allows users to navigate through translation entries using the keyboard. Check our our blog post on using translation editor keyboard shortcuts for more tips. Forms and error handling Forms are common points of failure in accessibility, especially if they are not properly labeled or do not provide clear feedback. Email address form example To make forms accessible: Use semantic HTML for form elements:\ elements associate labels with form controls. Placeholders should not replace labels. They disappear when the user starts typing, which can be confusing. Clearly identify required fields. Mark them with aria-required="true" and provide clear instructions for optional fields. Use aria-describedby to link inputs to error messages and instructions. Provide real-time validation and error messages that are clear and actionable. Use aria-live regions to announce errors without disrupting the user's flow. Dark mode Dark mode isn't just a UI trend. It reduces eye strain and improves readability for many users. Dark mode is often preferred in low-light environments or by users with light sensitivity. Dark mode accessibility example Make it accessible: Use a high contrast ratio between text and background. Don't just invert colors; ensure legibility is preserved in both light and dark themes. Avoid pure black (#000000) against pure white (#FFFFFF), which can create harsh visual edges. Instead, use softer shades like #121212 and #F5F5F5 to reduce eye strain. Make sure all UI states (hover, focus, disabled) are still visually distinct in dark mode. Test color accessibility in both light and dark themes. A color combination that passes WCAG in one mode may fail in the other. Respect system preferences with the prefers-color-scheme media query. It automatically applies the user's preferred color scheme based on their operating system settings. Pro Tip: Allow users to manually toggle between light and dark modes. Not everyone wants their system setting to dictate how your UI looks. Also consider giving users custom color settings, such as: A high-contrast color theme Dyslexia-friendly text colors Option to reduce visual clutter by simplifying palettes Dark mode settings example These small customizations can make a big difference, especially for neurodiverse users, users with low vision, migraine, or other conditions that affect how they perceive color and contrast. Accessibility & Localization Accessibility isn't just visual. Language is one of the biggest accessibility barriers on the web today. Even well-designed UIs can become confusing if the translation is unclear, machine-generated, or culturally off. That is why accessibility and localization go hand-in-hand. Effective localization goes beyond simple translation: Use the correct lang attribute on your pages and elements. Don't rely solely on machine translation. It often misses context and can result in confusing or misleading labels. Check your translated UI. For example, a "Sign In" button translated into Polish might say something correct grammatically, but completely fail to convey what the button actually does. Incorrectly translated button example Use ARIA labels with translated text in components. Support writing systems properly. Some languages like Japanese use multiple alphabets. HTML's \ tag can help show pronunciation aids (furigana), which are especially useful for younger users or learners. Japanese ruby example At SimpleLocalize, we believe accessibility and localization go hand in hand. If your app supports multiple languages but the translated version is broken, confusing, or unreadable, it's not accessible. WCAG: The standard for web accessibility The Web Content Accessibility Guidelines (WCAG), created by the W3C define how to make the web accessible to people with a wide range of disabilities. At the core of WCAG are four foundational principles, known as POUR: Perceivable: Users must be able to perceive content (e.g., using text alt for images, captions for videos). Operable: Interface elements must be usable via keyboard or assistive tools (accessible forms, clear navigation). Understandable: Content should be predictable and readable (simple language, consistent layout). Robust: Works across different browsers and assistive technologies (valid HTML, use of ARIA roles). WCAG levels of conformance WCAG defines three levels of conformance: Level A: The minimum level of accessibility which includes basic requirements like providing text alternatives for images and videos, keyboard navigation, basic forms accessibility, and ensuring that content is readable and understandable. Level AA: The strong level of accessibility that includes all Level A requirements plus additional criteria like color contrast, more advanced form accessibility, and ensuring that content is navigable and understandable for users with various disabilities. Level AAA: The highest level of accessibility. This level is often not feasible for all content, but it is the ideal goal for maximum accessibility. Level AA should be your target for most websites, as it balances accessibility with practical implementation. It includes requirements mentioned earlier, such as color contrast, text alternatives for images, and keyboard navigation. WCAG Level AA compliance checklist Use this checklist as a quick reference to ensure your website meets WCAG 2.1 Level AA accessibility standards: Perceivable \[ ] Text alternatives: Provide descriptive alt text (≤ 125 characters) for all non-text content, including images, charts, and videos. \[ ] Color contrast: Maintain a contrast ratio of at least 4.5:1 for normal text and 3:1 for large or bold text. \[ ] Multimedia alternatives: Include captions for audio, transcripts for video, and audio descriptions where necessary. \[ ] Zoom and resizing: Ensure content can be resized up to 200% without loss of functionality or content. \[ ] Responsive design: Design layouts that adapt smoothly across different screen sizes and orientations. Operable \[ ] Keyboard accessibility: All functionality must be available via keyboard alone, without requiring a mouse. \[ ] Focus visibility: Use visible focus indicators on all interactive elements (e.g., links, buttons). \[ ] Navigation aids: Provide mechanisms such as skip links, consistent menus, and breadcrumbs for easier navigation. \[ ] Consistent navigation: Ensure navigation structure and placement are consistent across pages. \[ ] Avoid time limits: Do not impose time limits unless necessary; if unavoidable, offer controls to extend or disable them. \[ ] Motion and animation: Avoid excessive animation and allow users to reduce or disable motion effects. Never use flashing content that blinks more than 3 times per second. \[ ] Gesture-based navigation: Ensure that all functionality is available without requiring complex gestures (e.g., pinch-to-zoom). Understandable \[ ] Clear headings and labels: Use descriptive headings and labels for all content, including forms and buttons. \[ ] Readable text: Write in plain language, avoiding jargon, long sentences, or complex terms. \[ ] Error identification: Clearly identify errors in forms and provide suggestions for correction. \[ ] Error prevention: Provide users with the ability to review, correct, and confirm before finalizing actions (e.g., submitting forms). \[ ] Accessible forms: Ensure all form fields have labels and clear instructions; group related elements logically. \[ ] New windows: Warn users when links open in a new window/tab (e.g., with text or an icon). Robust \[ ] Accessible tables: Use semantic HTML (\, \, \) so screen readers interpret tables correctly. \[ ] Downloadable content: Make PDFs and other files accessible, and indicate file type and size in the link text. \[ ] Sitemap or search: Offer a site search or sitemap to help users locate content efficiently. \[ ] CAPTCHA alternatives: Provide accessible alternatives (e.g., logic puzzles, email verification) for users who cannot complete traditional CAPTCHA challenges. Practical UX tips for an accessible experience Accessibility is not just a checklist—it's a mindset and a habit. It becomes far more effective when it's baked into your team's daily processes, tools, and collaboration. Build accessibility into your design system A shared design system is a powerful tool for scaling accessibility: Use accessible components by default: buttons with clear focus states, properly labeled form fields, contrast-compliant colors. Include ARIA guidelines and accessibility usage tips directly in design specs (e.g., in Figma or Sketch). Provide designers with an approved color palette that meets WCAG contrast ratios. Create reusable patterns (e.g., skip links, modals, alerts) that are already tested for accessibility. Use SimpleLocalize's plugin for Figma to make sure translations are accessible right from the design stage. It allows you to manage translations and ensure that texts are displayed correctly in your designs in different languages. Collaborate across roles Accessibility isn't just a developer's job. It works best when everyone on the team shares the responsibility: Designers should plan for keyboard navigation, clear labels, and scalable typography. Copywriters can use plain, concise language and avoid ambiguous labels like “Click here.” Translators should ensure that translated content is clear and contextually appropriate. Developers should structure HTML semantically and use ARIA thoughtfully, only when needed. Testers/QA should include assistive tech testing (e.g., screen reader basics, keyboard-only nav) in standard test cases. Test with real assistive technologies Automated tools can catch many issues, but real-world testing is where accessibility wins: Try your website with a screen reader like NVDA, VoiceOver, or TalkBack. Navigate your app using only the keyboard, no mouse or trackpad. Check your layout and interactions in high contrast mode and with zoom enabled. Observe how your UI behaves with prefers-reduced-motion and prefers-color-scheme enabled. Even just a few minutes of testing with these tools can reveal major usability issues you wouldn't catch otherwise. Start with the most critical user flows, like logging in, filling out forms, and navigating key pages. Create an accessibility checklist that fits your stack Having a shared, realistic checklist can help your team catch issues early: Are headings structured semantically? Can all interactions be completed without a mouse? Are all images and icons properly labeled with alt text? Do all form fields have associated labels? Do form errors have clear, accessible feedback? Are language attributes (lang) applied correctly? Are animations and dark mode tested for clarity and comfort? Integrate accessibility checks into code reviews, design QA, and even CI pipelines using tools like: axe-core Pa11y Lighthouse Think content-first, not color-first Accessible design starts with clear communication, not just compliance: Write UI text that's action-oriented and unambiguous. Avoid vague phrases like "Learn more" or "Submit." Give users enough context to understand links, buttons, and instructions, especially in translated content. Tip: Involve localization reviewers early to ensure translated UI strings remain clear and accessible in every supported language. Check out our guide on how to control the quality of your translations using the review status. Conclusion Website accessibility isn't a feature—it's a foundation. It improves SEO, enhances usability, and opens your product to a broader, more diverse audience. Whether you're building a dashboard, an e-commerce site, or a mobile app, inclusive design begins with inclusive communication. Start small: fix contrast, structure your headings, and test with a screen reader. Over time, build accessibility into your workflow, not as an afterthought, but as a default. ]]> developer tips design designer ui ux accessibility https://simplelocalize.io/blog/posts/software-translation-vs-other-types https://simplelocalize.io/blog/posts/software-translation-vs-other-types Tue, 17 Jun 2025 00:00:00 GMT software localization translation management https://simplelocalize.io/blog/posts/best-practices-in-software-localization https://simplelocalize.io/blog/posts/best-practices-in-software-localization Mon, 09 Jun 2025 00:00:00 GMT developer tips software localization https://simplelocalize.io/blog/posts/introducing-mcp-server https://simplelocalize.io/blog/posts/introducing-mcp-server Tue, 03 Jun 2025 00:00:00 GMT Settings > Credentials, and start the server using the command line or directly in your AI agent. Summary We hope that the new MCP Server for SimpleLocalize will make it easier for developers to manage translations in their projects using AI agents. With the ability to create, update, and manage translations using natural language prompts, you can streamline your localization workflow and focus on building great applications. ]]> tutorial software localization developer product updates ai mcp https://simplelocalize.io/blog/posts/custom-integration-for-simplelocalize https://simplelocalize.io/blog/posts/custom-integration-for-simplelocalize Thu, 08 May 2025 00:00:00 GMT with the language you want to use for your integration. You can find the list of available languages here. TypeScript To generate TypeScript interfaces along with an Axios-based client, run: This command will generate a folder containing all the files you need to start using the SimpleLocalize API in your TypeScript project. Java You can also generate Java code for the SimpleLocalize API using the OpenAPI Generator. Here’s a basic command to generate the full client: If you only want to generate model classes (without full API client logic), use the following command: Python You can use the following command to generate Python code for the API: Please refer to the official generators documentation for more information. Note: It's recommended to NOT generate model classes during the build process, as this can lead to breaking your build if we make any (even minor) change to the API. Good practices 1\. Add the 'Authorization' header When you are using the SimpleLocalize API, always include the x-simplelocalize-token header—this is required for every request. Optionally, you can also include the Authorization header with a Personal Access Token (PAT). While it doesn't do much currently, it may allow enhanced functionality in the future, such as identifying which user made a request or applying user-level permissions. 2\. Set client name You should include the x-simplelocalize-client header in your requests. This is optional but strongly recommended, as it helps us identify and support your integration more effectively. 3\. Use the latest API version Always use the most recent version of our API. We frequently release improvements and new features—using the latest version ensures access to the newest capabilities and best performance. 4\. Be nice to our API You should always be nice to the API—not just SimpleLocalize's, but any API you work with. This means that you should Avoid sending large bursts of requests or overwhelming the server with simultaneous calls. Keeping your requests within reasonable limits helps prevent rate-limiting or temporary blocks and ensures a smoother experience for all users. 5\. Never expose API keys in client-side code Never use your API key in frontend code or expose it to end users. In the past, there was a case where a developer accidentally included the API key and all the translation management logic directly in the production frontend. This caused a flood of requests to the API from unaware users just browsing the website. Eventually, the project hit its rate limits, and the API became blocked for the developer. Always handle translation updates and API interactions securely on the server side to avoid similar issues. 6\. Be prepared for changes We are constantly working on improving our API, and we are adding new features and endpoints. This means that you should be prepared for changes in the API. While we don’t remove or break existing endpoints, we do add new fields to responses as the API evolves. Most modern clients handle this gracefully, but if you're using a stricter parser (like Java’s RestTemplate), make sure your deserialization logic is flexible or updated regularly. 7\. Encode request parameters When you are sending request parameters to the API with translation key or namespace, you should always encode them. Use URLEncoder.encode() in Java, or encodeURIComponent() in JavaScript to encode the request parameters. Failing to do so may result in failed or incorrect updates due to malformed requests. Conclusion We’ve put a lot of care into designing and maintaining our API, and we’re always working to make it better. While we occasionally add new fields to enhance functionality, we make sure even our oldest endpoints continue to work as expected—ensuring your existing integrations remain reliable. Think there’s an endpoint missing that would help your integration? Or maybe an existing one could return more data? In such cases, contact us directly. If you need logos or icons for your integration, check out our brand assets page. And if you’d like help or want to be featured on our website, don’t hesitate to reach out. We’re here to support you in any way we can. ]]> developer integration javascript automation tips https://simplelocalize.io/blog/posts/introducing-intellij-idea-plugin https://simplelocalize.io/blog/posts/introducing-intellij-idea-plugin Wed, 30 Apr 2025 00:00:00 GMT tutorial software localization developer product updates https://simplelocalize.io/blog/posts/recover-translations-simplelocalize https://simplelocalize.io/blog/posts/recover-translations-simplelocalize Tue, 29 Apr 2025 00:00:00 GMT json developer tutorial software localization https://simplelocalize.io/blog/posts/introducing-markdown-editor https://simplelocalize.io/blog/posts/introducing-markdown-editor Thu, 17 Apr 2025 00:00:00 GMT tutorial software localization translation management product updates markdown translation editor https://simplelocalize.io/blog/posts/translation-keys-order https://simplelocalize.io/blog/posts/translation-keys-order Wed, 16 Apr 2025 00:00:00 GMT json developer tutorial software localization https://simplelocalize.io/blog/posts/context-in-localization https://simplelocalize.io/blog/posts/context-in-localization Tue, 01 Apr 2025 00:00:00 GMT tips translation management software localization translator auto translation https://simplelocalize.io/blog/posts/introducing-assistant https://simplelocalize.io/blog/posts/introducing-assistant Wed, 26 Mar 2025 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/managing-common-translation-keys https://simplelocalize.io/blog/posts/managing-common-translation-keys Mon, 10 Mar 2025 00:00:00 GMT tutorial software localization translation management tips https://simplelocalize.io/blog/posts/introducing-automatic-snapshots https://simplelocalize.io/blog/posts/introducing-automatic-snapshots Mon, 27 Jan 2025 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/tofu-symbol https://simplelocalize.io/blog/posts/tofu-symbol Tue, 21 Jan 2025 00:00:00 GMT tips translation management developer https://simplelocalize.io/blog/posts/introducing-translation-memory https://simplelocalize.io/blog/posts/introducing-translation-memory Tue, 10 Dec 2024 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/introducing-vscode-extension https://simplelocalize.io/blog/posts/introducing-vscode-extension Tue, 19 Nov 2024 00:00:00 GMT tutorial software localization developer product updates https://simplelocalize.io/blog/posts/automatic-message-extraction-with-ai https://simplelocalize.io/blog/posts/automatic-message-extraction-with-ai Wed, 30 Oct 2024 00:00:00 GMT tips tutorial translation management developer ai ai translation https://simplelocalize.io/blog/posts/introducing-public-suggestions https://simplelocalize.io/blog/posts/introducing-public-suggestions Mon, 28 Oct 2024 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/step-by-step-localization-workflow-for-developers https://simplelocalize.io/blog/posts/step-by-step-localization-workflow-for-developers Thu, 10 Oct 2024 00:00:00 GMT Configuration File -> Environment Variable (API Key only). Now, your CLI commands can look like this: Remember, that SimpleLocalize CLI looks for the configuration file in the current working directory. Head to the documentation to learn more about configuration file. Source file as a source of truth This approach may not be suitable for every project, but it’s worth mentioning. If you’re a solo developer or the only one responsible for translations, you can treat the source file as the source of truth. Overwriting existing translations If you decide to use source.json as the single source of truth, you might want to use the --overwrite parameter during the upload process. This updates translation texts in the editor with the translations from the source file without deleting any translations not present in the file. Update existing translations Deleting translations not present in the source file If you want to delete translations that are not present in the source file, you can use the --delete parameter. This will remove any translation keys (along with their translations) that aren’t in the source file. However, this option can lead to data loss, so it’s generally not recommended. Instead, consider deleting old and unused translation keys through the editor. Check out our article on how to find and delete unused translation keys. I’ve deliberately included a typo in the command to avoid accidental execution. Delete not present translation keys Automatically accept all source translations If you want to mark all source translations as accepted, you can use --options MARK_AS_ACCEPTED parameter, which will automatically accept all translations that are uploaded. Mark all translations as accepted Automations for localization workflow One of the great features of SimpleLocalize are no-code automations that you can configure in your project. It's a great option to speed up the localization workflow and make it more automated, especially if you are working in a small project. Automations for localization workflow I've configured one automation that will run every time I change or add new translations via CLI. That means the automation will run every time I upload source.json, but the automation will run only for changed or added translations. It's a great way to speed up the process of translating new keys. Auto-translate strings on source translations upload In the video, you can see how the automation is triggered after uploading the source file with changed translations for ACHIVEMENTS and ACTIVITY.COMMENT_ADD. The system recognizes the changes and triggers the automation that automatically translates the updated keys into other languages. It's like magic! ✨ You can write in 5 languages simultaneously without any extra effort beyond uploading a file with source translations. Isn’t that amazing? Conclusion In this article, I’ve walked you through setting up a localization workflow for developers. I’ve shared valuable tips and best practices learned over the years, and as a bonus, I’ve shown you how to automate the process using SimpleLocalize automations to instantly translate new keys after uploading the source file. ]]> tips tutorial translation management developer https://simplelocalize.io/blog/posts/namespace https://simplelocalize.io/blog/posts/namespace Tue, 08 Oct 2024 00:00:00 GMT tutorial software localization translation management developer https://simplelocalize.io/blog/posts/introducing-statistics https://simplelocalize.io/blog/posts/introducing-statistics Tue, 10 Sep 2024 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/introducing-comments https://simplelocalize.io/blog/posts/introducing-comments Fri, 06 Sep 2024 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/introducing-character-limit https://simplelocalize.io/blog/posts/introducing-character-limit Thu, 05 Sep 2024 00:00:00 GMT tutorial software localization translation management product updates https://simplelocalize.io/blog/posts/how-to-localize-nextjs-app-i18next https://simplelocalize.io/blog/posts/how-to-localize-nextjs-app-i18next Fri, 30 Aug 2024 00:00:00 GMT tutorial translation management developer react nextjs i18next react-i18next https://simplelocalize.io/blog/posts/how-to-translate-webpage https://simplelocalize.io/blog/posts/how-to-translate-webpage Thu, 22 Aug 2024 00:00:00 GMT tutorial translation management developer https://simplelocalize.io/blog/posts/markdown-translation-editor https://simplelocalize.io/blog/posts/markdown-translation-editor Mon, 12 Aug 2024 00:00:00 GMT Blockquote For a complete list of Markdown formatting options, you can refer to the Markdown Guide. How to translate markdown files? Translating Markdown or larger text files can be a time-consuming and error-prone process, especially if you are working with multiple files or languages. You need to ensure that the formatting is preserved, and that the translations are accurate and consistent across all files. Using a translation editor can help you streamline the translation process and ensure the accuracy and consistency of your translations. Set up your project in SimpleLocalize SimpleLocalize is a translation management platform that offers a Text Editor feature for translating Markdown and other text files. To get started, sign up to create your account, and create your project. E.g., my project is called "Blog posts" for all my blog posts that I want to translate. New project in SimpleLocalize Add languages Once your project is created, head to the Languages tab and add the languages you want to translate your markdown files into. For example, I would like to translate my blog posts into Polish and Spanish. Languages list Learn more about adding languages in SimpleLocalize. Upload your markdown file In the SimpleLocalize translation editor, one Markdown file is one translation key. You can add your markdown file to the translation editor by clicking on the Create translation keys button. There, add the translation key, so the identifier for the markdown file, e.g., the file name. Click on the "Create" button to add the translation key. Create translation keys The key will be added to the translation editor. Now, let's set the editor type to Markdown. Right-click on the key and select Manage key. There, change the editor type from regular text to Markdown. Changing editor to Markdown in Manage key Once you have set the editor type to Markdown, you can open the editor by clicking on the text field with the Open in Text Editor option and paste the content of your markdown file. Opening Markdown in Text Editor Translate the markdown file Your markdown file is now ready for translation. Open the Text Editor and start translating the content of the file. You can adjust the editor, e.g., by putting the source text on the left and the target text on the right, to make the translation process easier. Markdown text editor Here are some tips for translating markdown files: Preserve formatting: Make sure to preserve the formatting of the original file, such as headers, lists, bold and italic text, links, and images. Show line numbers: If you are working with a large file, you can enable line numbers in the editor options to keep track of the content. Use placeholders: If the markdown file contains placeholders, such as variables or dynamic content, make sure to keep them in the translation. Check links and images: Verify that all links and images in the file are correct and working in the translated version. Auto-translation of Markdown files For faster translation of markdown files, you can use the auto-translation feature in SimpleLocalize. This feature allows you to automatically translate the content of the file using machine translation services such as Google Translate, DeepL, or OpenAI. To auto-translate a markdown file, click on the Auto-translate button in the Translation Editor in the language you want to translate the file into. The content of the file will be automatically translated, and you can review and edit the translation in the text editor. Auto-translating text in Markdown Auto-translation is a great starting point for translating large files, as it can help you save time and effort. However, when using auto-translation, make sure to review the translated content carefully to ensure its accuracy, quality, and formatting. Conclusion Translating Markdown files can be a complex and time-consuming process, especially when working with larger files or multiple languages. Using a translation editor like SimpleLocalize's Text Editor can help you streamline the translation process and ensure the accuracy and consistency of your translations. Keeping all your translations in one place and using features like auto-translation can help you save time and effort and deliver high-quality translations for your content. ]]> tutorial software localization translation management markdown https://simplelocalize.io/blog/posts/ai-translations-chatgpt https://simplelocalize.io/blog/posts/ai-translations-chatgpt Tue, 23 Jul 2024 00:00:00 GMT auto translation translation management openai chatgpt ai translation https://simplelocalize.io/blog/posts/ai-translations https://simplelocalize.io/blog/posts/ai-translations Mon, 22 Jul 2024 00:00:00 GMT auto translation translation management openai chatgpt deepl google translate machine translations https://simplelocalize.io/blog/posts/translation-quality-review https://simplelocalize.io/blog/posts/translation-quality-review Tue, 09 Jul 2024 00:00:00 GMT tutorial software localization translation management quality assurance https://simplelocalize.io/blog/posts/automations https://simplelocalize.io/blog/posts/automations Wed, 26 Jun 2024 00:00:00 GMT tutorial software localization translation management automation https://simplelocalize.io/blog/posts/translation-editor-tags https://simplelocalize.io/blog/posts/translation-editor-tags Fri, 31 May 2024 00:00:00 GMT tips translation editor translation management software localization https://simplelocalize.io/blog/posts/chatgpt-deepl-context https://simplelocalize.io/blog/posts/chatgpt-deepl-context Fri, 17 May 2024 00:00:00 GMT deepl openai chatgpt tips auto translation https://simplelocalize.io/blog/posts/deepl-google-translate-openai-comparison https://simplelocalize.io/blog/posts/deepl-google-translate-openai-comparison Thu, 25 Apr 2024 00:00:00 GMT 50,000 input tokens \* $0.0000005 per input token = $0.025 5000 translation keys \* 200 tokens for command and context -> 1,000,000 input tokens \* $0.0000005 per input token = $0.50 50,000 translated characters -> 50,000 output tokens \* $0.0000015 per output token = $0.075 This sums to: $0.025 + $0.50 + $0.075 = $0.6 per translating 50 000 characters into another language. Conclusion In conclusion, all three platforms - DeepL, Google Translate, and OpenAI - offer high-quality translations that are accurate and natural. However, there are some differences in terms of style and naturalness, with DeepL and OpenAI producing more natural-sounding translations compared to Google Translate. When choosing a translation service, it's important to consider factors like accuracy, quality, cost, and speed. DeepL and OpenAI are great choices for high-quality translations, while Google Translate is a good option for quick and convenient translations. If we compare DeepL and OpenAI, DeepL offers a more straightforward pricing model with very natural translations, while OpenAI provides more flexibility and customization options at lower costs but with a bit more complex pricing model. However, in all cases, machine translation should be treated as a starting point for further editing and proofreading by a human translator, especially for more complex texts or specialized terminology. A translation review by a professional translator can help ensure that the final text is accurate, natural, and culturally appropriate. ]]> deepl google translate openai chatgpt auto translation machine translations tips https://simplelocalize.io/blog/posts/data-i18n-key-translation-extraction https://simplelocalize.io/blog/posts/data-i18n-key-translation-extraction Wed, 17 Apr 2024 00:00:00 GMT Credentials' section of your project. In the configuration, we have specified the following options: projectType - type of project that the CLI will use to extract translation keys and translations, searchDir - directory where the CLI will search for matching files for the project type, uploadPath - specifies the file which should be uploaded, uploadFormat- specifies the format of the file that will be uploaded, uploadOptions - additional options for the upload process, e.g., REPLACE_TRANSLATION_IF_FOUND to overwrite translations if found. By default, translations will only be added if they are not found. You can learn more about the configuration options in the Getting started with CLI page. Extracting translation keys and translations Now, we can run the following command to extract translation keys and translations from the website and upload them to SimpleLocalize: The CLI will search for all HTML files in the ./public directory and extract translation keys and translations from the elements with the data-i18n-key attribute, and store them in the extractions.json file. Next, we will upload the file to SimpleLocalize: Uploading translations with CLI The CLI will upload the extractions.json file to the SimpleLocalize project specified in the configuration file. The --languageKey option specifies the language in which the translations have been extracted. Make sure to replace en with the correct language code, and make sure that the language exists in the project. After the upload is complete, you can see the translation keys and translations in the SimpleLocalize Translation Editor. Uploaded translations in the Translation Editor Managing translations From now on, you can manage translations in the SimpleLocalize Translation Editor. You can add more languages to the project and run auto-translation to translate the content. Once you are done, you can publish the translations to the CDN to serve localized content to the users. The Cloudflare Workers that we configured in the previous tutorial will handle the routing and serve the localized content based on the user's preferred language. Conclusion In this tutorial, we've shown you how to extract translation keys and translations from a website and upload them to SimpleLocalize using the SimpleLocalize CLI. In the following tutorials, we will show you how to: use the accept-language header to detect the user's preferred language, use the Cloudflare Workers KV to store and serve the localized content, and configure Worker routes to match your website domain and path. Stay tuned for the next tutorials! ]]> developer cloudflare integration tutorial https://simplelocalize.io/blog/posts/how-to-translate-with-openai https://simplelocalize.io/blog/posts/how-to-translate-with-openai Tue, 26 Mar 2024 00:00:00 GMT deepl google translate openai chatgpt auto translation machine translations tutorial https://simplelocalize.io/blog/posts/best-practices-for-translation-keys https://simplelocalize.io/blog/posts/best-practices-for-translation-keys Wed, 20 Mar 2024 00:00:00 GMT json developer tutorial software localization https://simplelocalize.io/blog/posts/cloudflare-website-localization https://simplelocalize.io/blog/posts/cloudflare-website-localization Tue, 27 Feb 2024 00:00:00 GMT developer cloudflare integration tutorial https://simplelocalize.io/blog/posts/what-is-translation-key https://simplelocalize.io/blog/posts/what-is-translation-key Mon, 26 Feb 2024 00:00:00 GMT json developer tutorial software localization https://simplelocalize.io/blog/posts/hosted-flag-icons https://simplelocalize.io/blog/posts/hosted-flag-icons Mon, 12 Feb 2024 00:00:00 GMT developer ui language selector design designer https://simplelocalize.io/blog/posts/deepl-glossary https://simplelocalize.io/blog/posts/deepl-glossary Thu, 08 Feb 2024 00:00:00 GMT deepl auto translation tutorial machine translations https://simplelocalize.io/blog/posts/delete-unused-translation-keys https://simplelocalize.io/blog/posts/delete-unused-translation-keys Sun, 21 Jan 2024 00:00:00 GMT software translation process translation management tutorial continuous-localization https://simplelocalize.io/blog/posts/manage-translation-changes-with-review-status https://simplelocalize.io/blog/posts/manage-translation-changes-with-review-status Tue, 19 Dec 2023 00:00:00 GMT translation management tutorial continuous-localization automation https://simplelocalize.io/blog/posts/simplelocalize-webhooks https://simplelocalize.io/blog/posts/simplelocalize-webhooks Sat, 02 Dec 2023 00:00:00 GMT Create your Slack app Activate Incoming Webhooks to allow accepting requests from SimpleLocalize Add new Webhook to Workspace to generate the webhook for SimpleLocalize Configuring Slack webhook Check Slack docs for more information about configuring your webhook URL Next, paste your webhook URL from Slack to the SimpleLocalize Webhook configuration and choose trigger actions: Slack webhook configuration Send test webhook to check if the connection works! Click on the test option to get an instant sample notification on Slack if the setup is correct. Save the webhook and that's all! You will get a short message on Slack with the update details whenever trigger actions happen. slack-notification Discord webhook If you are communicating with your team using Discord, it's very easy to set up webhooks and notifications about translation updates. In Discord, go to Edit Channel, and next to Settings. Choose the Webhooks option and click the New Webhook button. Discord will automatically create a webhook for you, so you can just open it to get your webhook URL. Next, activate the webhook in SimpleLocalize. Choose Discord when adding a new webhook, select notification triggers, and hit the Create webhook button. Setting up Discord webhook In less than a minute, you can set up instant notifications about your translation updates! Use cases Thanks to SimpleLocalize Webhooks and integration with Slack, Discord, or Microsoft Teams, you can improve and help automate localization workflows with your team by: Instant team communication. When your development team is busy with a crucial software release and needs a quick translation update, SimpleLocalize Webhooks alert the team on Slack or Discord about the change. This ensures everyone is informed and can adjust their work, avoiding potential delays. Automated quality checks. Before a big product launch, your QA team needs to validate translations. When translations are published to the testing environment, a webhook automatically notifies QA members, allowing them to focus on testing specific translations and maintaining a high-quality localized product. Workflow notifications. Webhooks notify team members automatically when translation keys are created, updated, or deleted, streamlining the workflow. Thanks to that, everyone is on the same page and can adjust their tasks without the need for manual communication. Custom workflow alerts. Using SimpleLocalize's default webhook option, you can integrate notifications into your custom workflow. For instance, set up a webhook to notify your project management tool when translations are successfully auto-translated, promoting transparency and collaboration. Multi-channel updates. SimpleLocalize Webhooks can send notifications to both Slack and Discord channels simultaneously. This guarantees that, regardless of the preferred communication platform, all team members receive timely updates on translation changes, encouraging cross-channel collaboration. Conclusion SimpleLocalize Webhooks ensure your translation team stays instantly updated on crucial changes, fostering smooth collaboration. Whether it's through workflows or notifications on Slack and Discord, these webhooks make translation management easy and efficient. Start using SimpleLocalize Webhooks for a more connected and responsive team experience in your localization projects. Important links: Sign up to SimpleLocalize Docs about all webhook integrations Contact us and give feedback ]]> tutorial translation management slack webhooks discord developer https://simplelocalize.io/blog/posts/localization-with-figma-plugin https://simplelocalize.io/blog/posts/localization-with-figma-plugin Tue, 14 Nov 2023 00:00:00 GMT World\". Uploads screenshots of frames with text elements and key screenshots. Synchronization settings Translation key creation Decide how the translation keys should be created in SimpleLocalize from your text elements. By default, the key format is my-frame.button.continue. For example, the Next button in my design will be created with the translation key welcome.button.next. You can adjust this configuration by changing the case, separator, using frame as a key namespace, or including the page name. Key creation settings Figma: Push translations to SimpleLocalize And now it's time to synchronize all texts from your Figma design with SimpleLocalize. On Push translations, Figma will send all text elements from your design to your SimpleLocalize project. Synchronizing translations to SimpleLocalize You can send only selected elements to SimpleLocalize to test the integration and make sure all texts are created correctly as translation keys. If some were not correct, you can easily delete problematic keys using Bulk Actions. SimpleLocalize: Add translations At this point, the texts from Figma are already SimpleLocalize translation editor, so it's time for translation. You can add translations manually, edit the texts directly in the translation editor, or invite translators to help you with the job. You can also use auto-translation for quick translation. Auto-translating strings from Figma Customize the translation editor for more comfortable and effective work. Figma: Get translations When your translations are ready in SimpleLocalize, you can now download them to Figma. Click on the Pull translations button to update all texts and available languages. Pulling translations from SimpleLocalize Figma: Switch your design language Now, you can also check how your design looks with texts in different languages. In SimpleLocalize plugin, go to the language selector and try changing the language to another one. See how the texts on your design change. Getting texts in different languages from SimpleLocalize Conclusion In conclusion, the SimpleLocalize Figma plugin is a transformative tool that simplifies the connection between design and localization. Providing a seamless interface and collaborative features ensures that your design not only speaks every language but speaks it well. Get started today and localize your design with ease! ]]> tutorial translation management figma design ui designer integration https://simplelocalize.io/blog/posts/bulk-actions-updating-multiple-translation-keys https://simplelocalize.io/blog/posts/bulk-actions-updating-multiple-translation-keys Wed, 25 Oct 2023 00:00:00 GMT tutorial software localization translation management https://simplelocalize.io/blog/posts/invite-team-members-and-translators https://simplelocalize.io/blog/posts/invite-team-members-and-translators Mon, 02 Oct 2023 00:00:00 GMT software localization translation management tips tutorial https://simplelocalize.io/blog/posts/translation-keys-database https://simplelocalize.io/blog/posts/translation-keys-database Tue, 05 Sep 2023 00:00:00 GMT software localization translation management internationalization tips https://simplelocalize.io/blog/posts/how-to-update-app-translations-automatically https://simplelocalize.io/blog/posts/how-to-update-app-translations-automatically Fri, 18 Aug 2023 00:00:00 GMT software localization translation management internationalization translation hosting continuous-localization https://simplelocalize.io/blog/posts/how-to-auto-translate-json-files https://simplelocalize.io/blog/posts/how-to-auto-translate-json-files Mon, 31 Jul 2023 00:00:00 GMT json developer tutorial software localization openai chatgpt https://simplelocalize.io/blog/posts/how-to-get-started-with-tms https://simplelocalize.io/blog/posts/how-to-get-started-with-tms Tue, 27 Jun 2023 00:00:00 GMT internationalization translation management tutorial software localization https://simplelocalize.io/blog/posts/translation-editor-keyboard-shortcuts https://simplelocalize.io/blog/posts/translation-editor-keyboard-shortcuts Thu, 16 Mar 2023 00:00:00 GMT translation management tips software localization https://simplelocalize.io/blog/posts/flags-as-language-in-language-selector https://simplelocalize.io/blog/posts/flags-as-language-in-language-selector Tue, 14 Mar 2023 00:00:00 GMT ui language selector design designer https://simplelocalize.io/blog/posts/list-of-country-flag-icon-projects https://simplelocalize.io/blog/posts/list-of-country-flag-icon-projects Fri, 10 Mar 2023 00:00:00 GMT developer ui language selector design designer https://simplelocalize.io/blog/posts/create-language-selector-with-nextjs-and-tailwind https://simplelocalize.io/blog/posts/create-language-selector-with-nextjs-and-tailwind Thu, 09 Mar 2023 00:00:00 GMT developer ui language selector design designer https://simplelocalize.io/blog/posts/simplelocalize-tips-and-tricks https://simplelocalize.io/blog/posts/simplelocalize-tips-and-tricks Tue, 07 Mar 2023 00:00:00 GMT tips i18n developer translators https://simplelocalize.io/blog/posts/what-is-icu https://simplelocalize.io/blog/posts/what-is-icu Thu, 02 Feb 2023 00:00:00 GMT developer javascript i18n localization icu https://simplelocalize.io/blog/posts/java-internationalization https://simplelocalize.io/blog/posts/java-internationalization Sat, 19 Nov 2022 00:00:00 GMT tips i18n developer java https://simplelocalize.io/blog/posts/spring-boot-simple-internationalization https://simplelocalize.io/blog/posts/spring-boot-simple-internationalization Fri, 18 Nov 2022 00:00:00 GMT tips i18n developer java https://simplelocalize.io/blog/posts/how-to-translate-without-hiring-translators https://simplelocalize.io/blog/posts/how-to-translate-without-hiring-translators Tue, 08 Nov 2022 00:00:00 GMT deepl google translate auto translation machine translations https://simplelocalize.io/blog/posts/12-localization-acronyms https://simplelocalize.io/blog/posts/12-localization-acronyms Wed, 12 Oct 2022 00:00:00 GMT internationalization software localization translation management https://simplelocalize.io/blog/posts/what-is-cors https://simplelocalize.io/blog/posts/what-is-cors Tue, 04 Oct 2022 00:00:00 GMT Modify Response Header Nginx: modify configuration file, Traefik: use middlewares, Spring Boot: use @EnableCORS annotation, Express.js: use app.use(cors()), Next.js: use request helpers. 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 a 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. Use browser extension to overcome CORS error Browser extensions alter incoming preflight requests 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 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. All of those commands above start Google Chrome in an isolated sandbox. They will not affect your main Chrome profile. Disable security in Google Chrome to overcome CORS error 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 functionality to pass received requests to another service. Use proxy server to overcome CORS error 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: https://github.com/Freeboard/thingproxy https://github.com/bulletmark/corsproxy https://github.com/Rob--W/cors-anywhere 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 or, if you are familiar with the command line, you can use curl to test your CORS configuration. Free and open-source web-based CORS tester 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 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy https://enable-cors.org/ https://stackoverflow.com/a/42024918/1133169 ]]> developer cors tips https://simplelocalize.io/blog/posts/how-to-optimize-website-for-ai-translation https://simplelocalize.io/blog/posts/how-to-optimize-website-for-ai-translation Fri, 19 Aug 2022 00:00:00 GMT deepl google translate auto translation machine translations tips developer openai chatgpt https://simplelocalize.io/blog/posts/7-benefits-from-translating-your-app https://simplelocalize.io/blog/posts/7-benefits-from-translating-your-app Tue, 26 Jul 2022 00:00:00 GMT internationalization translation management tips software localization developer https://simplelocalize.io/blog/posts/what-is-simplelocalize https://simplelocalize.io/blog/posts/what-is-simplelocalize Thu, 30 Jun 2022 00:00:00 GMT translation management software localization i18n https://simplelocalize.io/blog/posts/next-i18next https://simplelocalize.io/blog/posts/next-i18next Mon, 23 May 2022 00:00:00 GMT next-i18next nextjs developer react localization https://simplelocalize.io/blog/posts/software-localization https://simplelocalize.io/blog/posts/software-localization Sat, 30 Apr 2022 00:00:00 GMT internationalization software localization translation management https://simplelocalize.io/blog/posts/next-translate https://simplelocalize.io/blog/posts/next-translate Thu, 07 Apr 2022 00:00:00 GMT next-translate nextjs developer react localization https://simplelocalize.io/blog/posts/translation-editor-explained https://simplelocalize.io/blog/posts/translation-editor-explained Fri, 25 Mar 2022 00:00:00 GMT tutorial tips translators developer software localization translation management translation editor https://simplelocalize.io/blog/posts/multi-file-upload-download https://simplelocalize.io/blog/posts/multi-file-upload-download Fri, 18 Mar 2022 00:00:00 GMT product updates https://simplelocalize.io/blog/posts/how-to-use-auto-translation https://simplelocalize.io/blog/posts/how-to-use-auto-translation Thu, 10 Mar 2022 00:00:00 GMT or (). Simply wrap the text, like here: There are {charsCount} characters left, to exclude it from translation. This option will help you translate texts with code snippets inside. Excluding selected words or phrases. In Auto-translation settings, you can create a list of words or expressions that will be excluded from auto-translation. You can put there your company name or other proper names that you don't want to get translated. auto-translation settings Auto-publishing translations to CDN to the latest environment – if you are using SimpleLocalize translation hosting, auto-translated keys can be deployed to your development or staging environment directly. Translating keys if no translation is available – if your source language has no translation, SimpleLocalize can use the key to work as the source for your translation. With auto-translation, you can translate your app or website to a new language with just a few simple steps that we describe below. How to translate your app with Google Translate or DeepL? There are only 3 simple steps to auto-translate your app or website using SimpleLocalize. First, import your existing keys and translations to SimpleLocalize. Second, run auto-translate option. And final step, export ready to go translation files and add them to your project repo, or upload them with one click using SimpleLocalize translation hosting. Import your translations to SimpleLocalize There are multiple ways of importing translations to SimpleLocalize. You can use Excel, JSON or CSV file formats or import them automatically using CLI or API. Check out documentation for all details and instructions. Import translations window Start auto-translation When your existing translation files are already imported to SimpleLocalize, you are good to go and start working on missing translations or add new languages to your project. Auto-translation is a great help in the translation process. It can speed up the translation by providing a base for translator's review. Auto-translate single translation Sometimes you just need some help with translating a single translation key. Here comes our quick auto-translate option, which you can use directly in the translation editor in all editor views. Just click on the auto-translate icon in the language you are working on, confirm the settings and source language and hit Auto-translate. How to auto-translate a single string in Translation Editor Within a second, you can have a ready translation, without copying and pasting texts back and forth to the editor and machine translation provider. Auto-translate languages To translate all translations from selected languages, or all languages at once, go to the Languages. There, you can use the option Start auto-translation for selected language or Auto-translate all to use machine translation for all languages (more selected ones) with one click. Auto-translate language When you choose one of those options, you will see auto-translation settings with extra options. Select a translation service (DeepL or Google Translate), decide on extra options and start translation. You will see translation progress in the languages view. Start auto-translation window Export translations for your project When the translations are ready, you can export the files and upload them to your project source code. Translation can also be updated automatically with SimpleLocalize CLI or CDN hosting. Export translations to file Automatic translation option is available in all SimpleLocalize plans, you can test it now and see how it works in your project. Create account in SimpleLocalize to start managing translations more efficiently and expand your business to new levels. YouTube: How to quickly auto-translate JSON files? Auto-translation advantages Translating a website or app is a significant step in the process of expanding your business. It is a necessary part of localization, and will help you reach more customers who don't speak your native language. There are many benefits to auto-translation, such as saving time and money on translation services. It also allows you to translate your website into any language without having to know the language yourself. It significantly speeds up the translation process, and using a translation management system, like SimpleLocalize, will help you to keep track of all changes in your project localization.  ]]> deepl google translate auto translation machine translations tutorial https://simplelocalize.io/blog/posts/better-project-languages-management https://simplelocalize.io/blog/posts/better-project-languages-management Thu, 03 Feb 2022 00:00:00 GMT product updates excel https://simplelocalize.io/blog/posts/excel-translation https://simplelocalize.io/blog/posts/excel-translation Sun, 28 Nov 2021 00:00:00 GMT excel auto translation translation management deepl software localization https://simplelocalize.io/blog/posts/github-actions-for-localization https://simplelocalize.io/blog/posts/github-actions-for-localization Sun, 28 Nov 2021 00:00:00 GMT github developer integration https://simplelocalize.io/blog/posts/number-formatting-in-javascript https://simplelocalize.io/blog/posts/number-formatting-in-javascript Sun, 28 Nov 2021 00:00:00 GMT javascript developer https://simplelocalize.io/blog/posts/i18n-tips-and-tricks https://simplelocalize.io/blog/posts/i18n-tips-and-tricks Sat, 27 Nov 2021 00:00:00 GMT HTML element to mark these up correctly: This ensures proper rendering across browsers and devices. Avoid using images for furigana, as they don't scale well and are not accessible. Ruby usage in a Japanese website 11\. Try pseudo-localization to catch issues early Pseudo-localization is a technique where you replace original text with “accented” versions or add padding to simulate translation: This helps identify hardcoded strings, layout and truncation issues, or missing translations before real localization starts. 12\. Support right-to-left (RTL) languages Languages like Arabic, Hebrew, Persian, and Urdu require right-to-left layout support. This is not just text direction, but full mirroring of your UI: Use dir="auto" or dir="rtl"at the document or component level. Mirror layout direction: navigation, icons, progress bars, sliders, etc. Use logical CSS properties: instead of margin-left, use margin-inline-start instead of float: left, use float: inline-start Test your UI with RTL languages to ensure everything displays correctly (e.g. with lang="ar" and dir="rtl" set in \.) Check out the guide on RTL styling 101 for more details on how to implement RTL support. 13\. Extract translatable texts properly Hardcoded strings are localization's biggest enemy. Use i18n frameworks (e.g., react-intl, i18next, vue-i18n) that extract strings from your code. Avoid putting user-facing text in: JS logic (e.g., if (error === "User not found")) CSS (e.g., content: "Loading...") You can use AI to help extract translatable strings from your codebase. Check out our blog post on automatic string extraction with AI for more details. Example of extracted strings 14\. Avoid concatenating translatable strings Concatenation creates grammar and context issues. Instead of: Use Even better: use pluralization support for locale-aware grammar: Make those variables clear for translators. TMS like SimpleLocalize provide a translation editor that allows translators to see the context and variables used in the string. 15\. Use locale-aware sorting When sorting lists, use locale-aware functions to ensure correct order: This sorts items according to the rules of the specified locale, taking into account case and accents. 16\. Provide fallback translations Don't leave users with missing translations. E.g., if fr-CA isn't available, fall back to fr or even en. Use a fallback mechanism in your i18n library: 17\. Use a translation management system (TMS) A TMS like SimpleLocalize helps you manage translations efficiently: Centralize all your translations in one place. Automate updates and sync with your codebase. Collaborate with translators and reviewers. Track translation progress and run QA checks. Provide in-context editing for translators. Integrate with your CI/CD pipeline for seamless updates. Support multiple file formats (JSON, YAML, etc.). Using a TMS saves time, reduces errors, and improves translation quality. It also allows you to scale your localization efforts as your product grows. Try SimpleLocalize and see how it can make your localization process smoother and more efficient. ]]> tips i18n developer https://simplelocalize.io/blog/posts/ui-design-language-selector-examples https://simplelocalize.io/blog/posts/ui-design-language-selector-examples Sat, 13 Nov 2021 00:00:00 GMT language selector design developer designer accessibility ui https://simplelocalize.io/blog/posts/gatsby-i18n https://simplelocalize.io/blog/posts/gatsby-i18n Mon, 09 Aug 2021 00:00:00 GMT element. Now we can use LinkTranslated same as a regular \ tag from HTML. We can pass a href property with base link to some page, and it will be converted into a translated link. Learn more about hrefLang attribute. I used Location component from @reach/router, to get access to the location object. Add a wrapper for IntlProvider The main role of this component is to simplify a usage of \ on every page. Add translations Create a i18n-translations.json file with translations for all languages. Managing a big JSON file like this might be hard and done only by a software team. This is the reason we created SimpleLocalize where you can manage JSON files like this with ease, automatically upload and download them and use OpenAI, Google Translate or DeepL to auto-translate the texts. Try it for free now Configure multi-language page generation Now, edit your gatsby-node.js configuration file and override onCreatePage function like below. Many things are happening here, right? Let start from the beginning. First of all, import translations.json file from root directory Use deletePage to remove default page created by Gatsby Iterate over all languages from i18n.js Add /{language} to path if the language is not the default one Get translations for given language from messages object Add language and messages to a page context Use createPage to recreate a page with a new path and translations Create a first multi-language page Create index.js in /src/pages directory and paste code below: SimpleLocalize Component will provide a \ and intl object for \ components. Create second multi-language page Create file about.js in /src/pages directory and paste code like below: Result Now, start your project with npm run develop and you should see Multi-language Gatsby project example Full code can be found on GitHub: github.com/simplelocalize/multi-language-gatsby-example Message extraction Uploading extracted translation keys to translation editor In the repository, you will also find additional scripts in package.json. I installed @formatjs/cli as a devDependency to extract all translations and IDs from \ components. I used simplelocalize-cli to upload found IDs and download ready-to-use translations. Scripts explanation: npm run extract script will extract translations to i18n-extracted.json npm run sync script will upload found translation keys from i18n-extracted.json and download the latest translations from the server to i18n-translations.json Once you change a translation in JSON file, you need to restart GatsbyJS to see the effect. Sometimes you might not see a changed translation, then you need to run npm run clean before npm run develop. Editing translations in SimpleLocalize Below you see a screenshot from a sample project which I pushed on GitHub. Now, I can manage all translations from one place, add more languages and use OpenAI ChatGPT, DeepL or Google Translate to automatically translate them and use in my Gatsby page. Manage your translation strings in Translation Editor Multi-language content with properly used hrefLang attributes will score much higher in SEO results. ]]> gatsby react-intl format-js react i18n developer https://simplelocalize.io/blog/posts/lazy-loading-resources https://simplelocalize.io/blog/posts/lazy-loading-resources Fri, 06 Aug 2021 00:00:00 GMT ) in which you want to provide translations. ]]> react localization javascript json translations lazy loading developer typescript https://simplelocalize.io/blog/posts/how-to-translate-app-automatically https://simplelocalize.io/blog/posts/how-to-translate-app-automatically Wed, 04 Aug 2021 00:00:00 GMT deepl google translate openai chatgpt auto translation machine translations tutorial https://simplelocalize.io/blog/posts/how-to-keep-translations-up-to-date https://simplelocalize.io/blog/posts/how-to-keep-translations-up-to-date Tue, 13 Jul 2021 00:00:00 GMT software translation process translation management translation hosting tutorial continuous-localization developer https://simplelocalize.io/blog/posts/language-vs-locale https://simplelocalize.io/blog/posts/language-vs-locale Mon, 10 May 2021 00:00:00 GMT locale language vs locale translation management software localization i18n https://simplelocalize.io/blog/posts/what-is-translation-management https://simplelocalize.io/blog/posts/what-is-translation-management Thu, 22 Apr 2021 00:00:00 GMT software localization translation management https://simplelocalize.io/blog/posts/customer-specific-translations https://simplelocalize.io/blog/posts/customer-specific-translations Fri, 26 Mar 2021 00:00:00 GMT customer-specific translation software localization customer context translation management https://simplelocalize.io/blog/posts/translation-importance https://simplelocalize.io/blog/posts/translation-importance Tue, 09 Mar 2021 00:00:00 GMT internationalization software localization translation management https://simplelocalize.io/blog/posts/the-most-popular-react-localization-libraries https://simplelocalize.io/blog/posts/the-most-popular-react-localization-libraries Fri, 12 Feb 2021 00:00:00 GMT javascript react typescript nextjs react-native expo developer https://simplelocalize.io/blog/posts/what-is-hreflang https://simplelocalize.io/blog/posts/what-is-hreflang Wed, 03 Feb 2021 00:00:00 GMT attribute in HTML, there is another important attribute that serves a different, but equally vital, SEO purpose: hreflang. Let's explore what hreflang is, how it works, and how to implement it correctly. What is hreflang? The hreflang attribute is used to tell search engines which language and optionally which region a specific page is targeting. It helps Google and other search engines serve the correct language or regional version of your content to users in different locations. Unlike the \ attribute, which identifies the language of the page content, hreflang acts as a mapping tool: it tells Google about alternate versions of the same content in other languages or for other regions. A typical hreflang value includes: Language code: A two-letter code representing the language (e.g., "en" for English, "es" for Spanish in ISO 639-1 format). Region code (optional): A two-letter code representing the country or region (e.g., "US" for the United States, "ES" for Spain, "CL" for Chile in ISO 3166 format). Format: hreflang="language-region" (e.g., en-US, es-ES) Check out or blog post on differences between language and locale for more details. Where to use hreflang? You can specify hreflang in three places: In the \ section of your HTML document using \ tags In HTTP headers (for non-HTML resources like PDFs) In XML sitemaps Using all three methods is allowed, but not required. Choosing just one is sufficient, and combining them does not provide extra benefit. Most common method: in the HTML \ Each page should reference all alternate versions, including itself. This is known as bidirectional linking: if Page A references Page B with hreflang, Page B must also reference Page A. You can use tools like the W3C Link Checker to validate URLs and ensure they are correct. Why hreflang is important Correct hreflang implementation helps: Serve the right content to users based on their language and region Improve SEO by avoiding duplicate content issues Enhance user experience by directing users to the appropriate version of your site Increase visibility in search results for different languages and regions Search engines treat hreflang as a strong signal when determining which page to display in localized search results. Without it, your Spanish-speaking visitors in Chile might end up on your English homepage which is not ideal for engagement or conversions. Best practices for hreflang implementation Here are some best practices to follow when implementing hreflang: Each language/region version must list all other versions, including itself Use valid language and region codes Insert the tags in the \ before scripts Use hreflang generators or SEO tools for accuracy Include an x-default tag to handle unmatched languages The x-default value is recommended by Google as a fallback when no specific language or region matches the user's preferences. Example of a subpage with hreflang Here is an example of how to implement hreflang for a contact page that is available in multiple languages: It shows the contact page in English, Spanish (Spain), and Spanish (Chile). Each version is linked to its corresponding URL, allowing search engines to understand the language and regional targeting of each page. Note that in the URL the language and region are included as subdirectories (e.g., /es-ES/ for Spanish in Spain). This is a common practice, but you can also use subdomains or ccTLDs (country code top-level domains) if preferred. Check out our blog post on URL structure for multilingual websites for more details. rel="alternate" vs. rel="canonical" When using hreflang, you will often encounter two other attributes: rel="alternate" and rel="canonical". rel="alternate" tells search engines that the page is an alternate version in a different language or format (like mobile). rel="canonical" indicates the preferred version of a page when there are multiple pages with similar content. These two can coexist, but make sure your canonical URL is consistent across versions and does not conflict with the alternate links. Example: FAQ Do I need hreflang if my website targets only one language? No. If your site is built for a single language or region, hreflang is not necessary. Use the correct \ attribute instead. What about country-specific domains like .it or .fr? Search engines will assume a country focus based on the top-level domain (TLD), so if you are targeting another audience (e.g., English users on a .it domain), it's best to use hreflang to clarify your intent. Can I use hreflang without translating the page? Technically yes, but it's not recommended. Hreflang is intended to distinguish content that is either translated or localized. If all versions are in the same language with no regional customization, hreflang may confuse search engines rather than help. What happens if hreflang tags are incorrect or missing? Google may ignore them entirely. If you use invalid language/region codes, mismatched links, or unidirectional references (Page A points to B, but B doesn't point back), the tags won't be used. This could lead to the wrong version showing up in search results or no regional targeting at all. Is it okay to have multiple hreflang tags with the same language code? Only if the region codes are different. For example, having both es-ES and es-CL is valid because they represent different Spanish-speaking audiences. But using multiple hreflang="es" tags with different URLs is invalid. Should I use hreflang on every page or just the homepage? You should add hreflang tags on every localized version of every page, not just the homepage. Each translated page must reference all other language versions of that same page, not just the domain root. Can hreflang be used with JavaScript-rendered websites? Yes, but with caution. If you are injecting hreflang tags with JavaScript, make sure they are rendered before search engine crawlers parse the page. For best results, include them server-side in the static \ section. Does hreflang influence rankings? Indirectly. Hreflang doesn't boost rankings like backlinks do, but it improves relevance, which can reduce bounce rates and increase engagement. That in turn supports better performance in search results. What's the difference between localization and translation in this context? Translation is simply converting content from one language to another. Localization goes further: adapting content, tone, currency, date formats, and cultural references for a specific region. Hreflang supports both. Learn more about software localization in our blog. Conclusion Adding hreflang helps localize your website content and ensures that search engines show users the most relevant version of your site. It enhances SEO, user experience, and can reduce bounce rates by serving content in the visitor's preferred language. SimpleLocalize can help you manage translations and localization smoothly. Start with our free trial today and optimize your multilingual experience with ease! SimpleLocalize translation management platform ]]> hreflang seo developer https://simplelocalize.io/blog/posts/easy-localization https://simplelocalize.io/blog/posts/easy-localization Mon, 11 Jan 2021 00:00:00 GMT internationalization translation management tips software localization https://simplelocalize.io/blog/posts/2020-12-26-should-i-translate-my-app https://simplelocalize.io/blog/posts/2020-12-26-should-i-translate-my-app Sat, 26 Dec 2020 00:00:00 GMT tips software localization translation management https://simplelocalize.io/blog/posts/introducing-api-keys https://simplelocalize.io/blog/posts/introducing-api-keys Sun, 15 Nov 2020 00:00:00 GMT product updates https://simplelocalize.io/blog/posts/formatjs-reactjs-internationalization https://simplelocalize.io/blog/posts/formatjs-reactjs-internationalization Wed, 07 Oct 2020 00:00:00 GMT usage is very easy: React will convert FormattedMessage tag into span tag and put concrete translation into it. You can also use \ which will also produce a message with HTML inside span tag. A sample translation key could look like the following: Switch between languages In the presented example, I used LanguageContext.Consumer to provide function. This function can trigger language change and fetch proper messages from the CDN. You need Language.Consumer tag only in places where you would like to change the language. It's not needed for \ tags. Let's try it! Note that translation works in real-time! How cool is that? Very cool! React Localization with FormatJS See live version Project code is available on GitHub. Translation management for FormatJS FormatJS is a great tool for translating your React app. It is intuitive and not too complicated to introduce to your project. Using react-intl together with SimpleLocalize can really speed up the translation process with great auto translation tools (OpenAI, DeepL or Google Translate), many integrations and easy to use i18n online editor. It's a great help in development process thanks to SimpleLocalize CLI for FormatJS, which extracts all translation keys from your project with a simple command. i18n online editor Check our docs for FormatJS integration in SimpleLocalize and translate your app in our feedback-driven app. Get in touch or send us your feedback at contact@simplelocalize.io. ]]> react react-intl format-js tutorial i18n developer software localization https://simplelocalize.io/blog/posts/i18next-reactjs-localization https://simplelocalize.io/blog/posts/i18next-reactjs-localization Thu, 01 Oct 2020 00:00:00 GMT react i18next i18next-backend tutorial continuous-localization developer https://simplelocalize.io/blog/posts/start-with-software-project-localization https://simplelocalize.io/blog/posts/start-with-software-project-localization Sun, 26 Jul 2020 00:00:00 GMT translation management software localization https://simplelocalize.io/blog/posts/yahoo-react-intl https://simplelocalize.io/blog/posts/yahoo-react-intl Fri, 26 Jun 2020 00:00:00 GMT react react-intl format-js developer