Reference

Do Your Regional Websites Talk Funny

Reference

• Internationalisation - not just about about translations
• Translation strings
• Chinese, Korean, Japanese “10 million” is an actual word, so “billion” should not be an interpolated string.
• Vietnamese writing system - has a lot of Unicode/symbols.
  • Fonts - if they can’t find a glyph, then they will put an alternate font.
  • You can use lang() pseudo-class to show a different font for another language.
  • Declare Latin-based font first

GraphQL

• Why GraphQL? Hate interacting with REST APIs - many APIs to get the data that you need.
• Rest API - a change in the BE type means you need a new type in the front-end.
• Developer experience/tooling
• “Back-end for front-end”.
• When to use?
  • Multiple clients/apps use the same data
  • Data in multiple places/data access layer. (Not the API - works with multiple back-end - and multiple back-end services can be federated).
  • TS for API/end to end type safety.

AI, Media and the Web

• Visual media can be your biggest competitive advantage.
• Between 2019 and 2022, image bandwidth grew by 25% and video traffic grey by 37%.
• For E-Commerce, spic scale has become the new normal
• Ex: Cloud-generative can scale images to any dimension by adding a background - using Cloudinary.
• Generative-replace
• Image captioning (alt text)?
• Upscaling
• Cropping video

Headless and Modern Front-end Frameworks

• Content editors: create once, publish anywhere.

UNTestable

• Reference
• Reference
• Not being able to click - because Selenium will try to click on the upper left part of the button. Should click on the center
• Randomly rerendering always (all frameworks).

AI Engineer (Swyx)

• Reference
• With an AI layer now, there is a job that is emerging - AI engineer over ML engineers.
• Sociology issue - there are AI threads happening in every Slack
• Historically, AI has been Python-centric, more libs in JS.
• AI Engineer
• refine-i18n

Micro-frontend

• Why? As products get bigger, we need it more, as we have a big ball of mud.

Module Federation

Reinventing Vue: Lessons Learned

• Vue was released in 2013, 1.0 in 2015, 2.0 in 2016, and 3.0 in 2022.
• Why?
  • Vue 2 codebase needed to be modernized. Not using Typescript, Messy internal layer separation, compiler capability was limited.
  • Address scalability, maintainability issues, a more refactor-friendly/composition API.
  • Raise browser support baseline: Leverage new language/browser features, while dropping legacy browsers.
• Mistakes: Many users are still stuck on Vue 2: Migration cost, blocked by dependencies, some companies needed legacy browser support.
• Mistake: Too many small breaking changes (about 20-30).
  • Lesson learned: Keep things working by default, and use the deprecate, opt-in, remove cycle.
• Mistake: Underestimated the impact on ecosystem libraries.
  • Breaking changes can also hit library authors, not just application code.
  • Lesson learned: Discourage/prohibit the use of internal APIs.
• Mistake: Not releasing everything together.
  • Was still WIP when released: Docs with composition API, official libraries like router and vuex, Dev tools.
  • Why? Wanted to ship. The impression was “if core is ready, Vue is ready” when it really wasn’t. And bad impressions last for years.
• What went right: Embracing composition.
  • Based on React hooks.
• What went right: Investing in DX.
  • Vite: born out of a Vue-only dev server prototype.
  • Docs.
  • Volar (VS Code extension): Vastly improved IDE and TS experience for Vue Single File Components.
• Looking forwards:
  • Focus on improvements that are seamlessly adoptable/opt-in.
  • Ex: Vapor mode, reactivity system.

A Tale of Two Webs

• Reference
• The industry keeps on spending time about developer experience. Implicit assumption that THAT improves user experience.
• The relationship between users and devices (AI-generated shit, smart contracts) has changed.
• Moving to 0 server/peer-to-peer?
• Issues:
  • Web apps getting re-downloaded each visit - do they really need to do that?
  • Re-download?
  • No information privacy.
• Maybe the web needs to move from the servers onto the devices?