JS Nation

JSNation 2024

Computer ethics is the set of agreed upon principles that govern the use of technology, and integrating ethical frameworks into the decision-making process reflects a commitment to fostering a compassionate technological landscape. Incorporating ethics early in the product development cycle can avoid exclusions and financial losses, and can be done through premortems and check-ins. Promoting proactive inclusivity involves validating and prioritizing goals, conducting user testing, and following the Association for Computing Machinery's Code of Ethics. Additional resources include books on computer ethics and the Design Justice Network.

As technology continues to advance at an unprecedented rate, it is becoming increasingly important for those in the tech industry to understand the ethical implications of their work. The decisions that engineers and tech leads make can have far-reaching consequences for individuals, communities, and even entire societies. Without a solid understanding of computer ethics, it is all too easy for technology to be developed and deployed in ways that harm rather than help. In this talk, we will discuss the importance of computer ethics in  tech and why it is crucial that engineers and tech leads receive training in this area. We will cover a range of topics, including ethical considerations surrounding data collection and privacy, algorithmic bias and fairness, and the ethical implications of emerging technologies such as AI and robotics. Drawing on both my own experience as a software engineer and relevant case studies, we will review examples of how ethical considerations have played out in real-world scenarios. Finally, we will discuss how engineers and tech leads can integrate ethical considerations into their work.   Computer ethics is an important and relevant topic that deserves more attention. As technology continues to evolve and become more intertwined with our daily lives, it is essential that we ensure that those responsible for designing and developing these technologies understand the ramifications of their work.  In the fast-evolving tech world, grasping computer ethics is vital. Tech choices impact people and society profoundly. This talk stresses ethics training for engineers, covering data privacy, bias, AI, and real-world cases. It's essential as tech becomes integral to daily life.

Ethically Wired: Computer Ethics for Technologists

Selam Moges

Today's Talk covers internationalization with the Powered Language Bundle and leveraging AI capabilities. It emphasizes the importance of planning AI roles and workflows, customizing content locally, and understanding different content types. The translation process involves linguistic analysis, accurate system instructions, and experimentation with different communication methods. The workflow includes using Express Server and Storybook for translations, connecting metadata with the user interface, and integrating AI technology responsibly for efficient and effective results.

AI chatbots are closest to a human conversation model which makes communication effortless and accurate. It can be powerful tool for translating smaller chunks of text presented in common languages. Learn how compelling chatbot prompts can revolutionize your communication and translate hundreds of documents enriched with HTML text formatting and code blocks in one chat.

Internationalization (i18n) With AI-Powered Language Model

Sintija Birgele

JSNation 2023

Today's Talk explores the impact of I18n and DEX for developers, the challenges of I18n, and the importance of understanding different approaches. It discusses determining languages and regions using IP address, browser settings, and URL patterns. The Talk also covers translation loading, using the i18xProvider, and addressing issues such as URL parameters and maintaining translation files. Additionally, it explores connecting with a Content Management System, implementing folder level translation, and utilizing code splats for dynamic routes.

Accessibility, better DX, and performance get a lot of attention as it improves better UX significantly. Plus, it gives satisfaction to devs by seeing the significant improvements. But how about internationalization? A fun fact: Over 70% of the users in the world access non-English content. In this talk, I'll show you more surprising facts about internationalization and what are scalable approaches. You'll see examples with libraries for frameworks with a few different logic to implement different internationalization layouts.

i18n Was the Missing Piece: Let 70%+ of the Users in the World to Access Your Apps 

Arisa Fukuzaki

React Summit

React Summit 2023

The Workshop covered various topics such as introduction to localization and Remix, project setup, creating components, implementing content and internationalization, differences between Remix and Next.js, configuring internationalization, updating titles and navigation, introduction to Contentful, content model and localization, and dynamic routing. Key points include the importance of localization for target regions, the capabilities of Remix as a framework, the process of setting up a Remix project and configuring internationalization, the use of Contentful for managing content, and the implementation of dynamic routing in Remix.

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website. Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps

Localizing Your Remix Website

Harshil Agrawal

JSNation 2022

This Talk discusses building JavaScript apps with internationalization in mind, addressing issues such as handling different name formats, using Unicode for compatibility, character encoding bugs, localization and translation solutions, testing in different languages, accommodating translated text in layouts, cultural considerations, and the importance of enabling different languages for users. The speaker also mentions various open source tools for internationalization. The Talk concludes with a reminder to avoid assumptions and embrace diversity in the World Wide Web.

At Adobe we build products for the world, this talk with provide a high level overview of internationalization (i18n), globalization (g11n), and localization (l10n) best practices. Why these are important and how to implement in design, UX, and within any JS codebase - using vanilla JS examples, and top open source library recommendations.

Building JS Apps with Internationalization (i18n) in Mind

Naomi Meyer

React Summit 2022

I'm going to talk about localisation in the real world and how Sanity, a platform for structured content, focuses on content as data and flexible internationalization. Sanity allows for multiple languages in different markets, providing customization options for content visibility based on location. The platform offers a flexible approach to content creation and customization, allowing organizations to internationalize their content based on their specific needs. With Sanity's query language and the brand new version of Sanity Studio, developers have more flexibility than ever before.

i18n isn't easy, but with careful planning of your content model I'll show you how to structure the setup, authoring, and querying of localized content. Covering whole-or-part translated documents, the difference between market and language-specific content, ways to author that in a CMS like Sanity, and ways to query for it on frontends like Next.js and Remix.

Localization for Real-World Use-Cases: Key Learnings from Onboarding Global Brands

Simeon Griggs

React Advanced

React Advanced 2021

Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.

Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How do Localise and Personalize Content with Sanity.io and Next.js

Thanks for joining my talk on end-to-end internationalization. I'll walk you through internationalizing a React app, covering translated strings, currency and date formatting, translator management, and injecting translated strings back into the app. The constants used throughout the app define localization settings and translations. The React Intel library is used for managing translations, and custom functions are created for consistent date and number formatting. The translation process involves extracting strings, using tools like PO Edit, and compiling the translated strings into JSON files for the React app.

There are some great libraries that help with i18n in React, but surprisingly little guidance on how to handle i18n end-to-end. This talk will discuss best practices and practical advice for handling translations in React. We will discuss how to extract strings from your code, how to manage translation files, how to think about long-term maintenance of your translations, and even avoiding common pitfalls where single-language developers tend to get stuck. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

End-to-end i18n

Luke Ehresman

React Finland

React Finland 2021

Did you know that 50% of users will NOT use the English version of your application, if it supports multiple languages? For ambitious high-growth businesses, going global is not "if" but "when" so it's important to recognize the importance of localization, especially in large multi-team projects. This discussion will explore the depths of localization in Agile companies and what can be achieved with a Continuous Localization system. I'll share some common issues we faced with multi-language products and how localization automation helped us to scale the process across many product teams within the company. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Continuous Localization in Enterprise Web Projects

Ante Tomić

JSNation Live

JSNation Live 2020

This Talk explores the UTF-8 encoding and its relationship with emojis. It discusses the history of encoding, the birth of Unicode, and the importance of considering global usage when building software products. The Talk also covers JavaScript's encoding issues with Unicode and the use of the string.prototype.normalize method. It highlights the addition of emoji support in Unicode, the variation and proposal process for emojis, and the importance of transparency in emoji encoding. The Talk concludes with the significance of diverse emojis, the recommendation of UTF-8 for web development, and the need to understand encoding and decoding in app architecture.

Why does '👩🏿‍🎤'.length = 7? Is JavaScript UTF-8 or UTF-16? What happens under the hood when you set ? Have you ever wondered how emoji and complex scripting languages are encoded to work correctly across browsers and devices - for billions of people around the world? Or how new emoji are introduced and approved? Have you ever seen one of these: □ � “special” glyph characters before and want more information on why they might appear and how to avoid them in the future? Let’s talk about Unicode encoding in JavaScript and across the world wide web! We’ll go over best practices, common pitfalls, and provide resources to learn more - even where to go if you want to submit a new emoji proposal! :) <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Emoji Encoding, � Unicode, & Internationalization

React Summit Remote Edition

React Summit Remote Edition 2021

The Talk discusses the challenges of adding and maintaining new languages in a React application and suggests ways to make the process easier. It defines internationalization as the process of architecting an application for localization and explains that localization involves adapting the content and experience for a specific locale. The speaker recommends using libraries for internationalization and provides resources for learning more about the topic. The Talk also addresses edge cases and difficulties with multiple dialects or languages, translation processes, and right-to-left CSS libraries.

Learning 100 different languages is challenging, but architecting your React app to support 100 languages doesn't have to be. As your web application grows to a global audience, multilingual functionality becomes increasingly essential. So, how do you design your code such that it is flexible enough to include all of your international users? In this talk, we will explore what it means and what it looks like to build a React app that supports internationalization (i18n). You will learn several different strategies for locale-proofing your application with React contexts and custom hooks. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#internationalization