About two years ago, the first JavaScript contest held by Telegram just ended. It was a thrilling challenge but that time I only managed to take the second prize. However, that was the starting point for a chain of events which led to the WebZ app becoming one of the official Telegram web clients.

Another longest and spectacular JavaScript contest was there to follow, and I want to share its story. I'm going to talk about the technologies we used, the problems we faced, and the solutions we were lucky to find. Moreover, because this story is still being written.

No doubt, the new Telegram web clients are among the most sophisticated and technologically advanced web projects out there. They combine most of modern Web APIs, specifications, and techniques: complicated CSS and Canvas animations, Web Workers and WebAssembly, multi-level caching and PWA, voice recording and media streaming, cryptography and raw binary data operations, optimistic and progressive interfaces, reactive data streams, and so much more.

I'll talk a little bit about it all and will provide links to the code examples in the telegram-webz repository as well as to some other useful external resources.

Stay tuned.

(more coming soon...)

Telegram Web Z was updated to version 1.30

👏 Harder
• Meet Message Reactions:
- React to a message with ❤️🔥🎉😁😱🤩😢👎💩🤮 in the context menu.
- Send a quick 👍 reaction by hovering over the bottom corner of a message.
- You can change your default reaction to another emoji in Settings > General.
- Group and Channel admins can enable and control reactions via their chat's Info Page > Edit > Reactions.

• Interactive Emoji:
- Added support for all interactive emoji, including fullscreen animations and sound effects. Try 🔥, 🍆, 🍑 and more.
- Animations play simultaneously when both users have the chat open.
– The “is watching…” status will appear when your chat partner is also seeing the animations.

• Manage invite links for Groups and Channels:
– Enable admin approval or limited duration and users.

🤩 Better
• Better quality for uploaded profile pictures.
• Various UI improvements.

🚀 Faster
• Several optimizations for older devices – no more freezing while typing.

💪 Stronger
• Saved Messages now correctly renders in search results.
• Fixed missing icons for muted chats in the chat list.
• The context menu no longer flickers on older devices.
• Fix re-scheduling messages to a previous date.

Telegram Web Z was updated to version v1.31

👏 Harder
• Hide text with an animation using the crossed-eye icon 👁 in the formatting menu.
• Quickly add Spoiler formatting with Ctrl + P (⌘ + P on macOS), or || markdown around the text.
• Admins can manage Join Requests and revoked invites.
• Promote new admins in your groups and channels via Global Search.

🤩 Better
• Network stability enhancements.
• Various improvements and tuning for reactions and interactive emoji.
• Media Viewer improved for mobile devices.
• Numerous layout adjustments.

🚀 Faster
• The app better renders multiple components.

💪 Stronger
• Fixed inline playback for QuickTime videos.
• Fixes for tooltips – including stickers, emoji, and mentions.
• Unread counter now correctly reflects values on mobile devices.
• Emoji now properly copy from message text.
• Users’ display names now appear in service messages.
• Fixed collapsing multiple spaces in messages.
• Reactions and the “Send As” feature are now always available in Discussion Groups.

Telegram Web Z was updated to version v1.32

Harder
• Create and share Video Stickers made from .webm files.
• 5 new reactions and interactive emoji: 🥰🤯🤔🤬👏
• Send entire folders as a file.
• Directly add chats to chat folders from Global Search.

Better
• Redesigned group management pages with animated artwork.
• ‘Forward To’ menu has smooth infinite scroll on mobile.
• Spoiler animations re-hide text after a short period.
• Numerous layout fixes and improvements.

Faster
• Media loads and scrolls faster in Shared Media and Global Search.
• Optimized some heavy background calculations.
• Memory usage optimizations.

Stronger
• Fixed missing sticker suggestions (e.g. for ❤️ emoji).
• Fixed infinite spinning in Sticker panel.
• Fixed scroll jumps and missing sender names in local search results.
• Fixed highlight color when searching in dark mode.
• Fixed pasting text and media from clipboard on Firefox and iOS browsers.
• Media Viewer: Fixed navigating to the origin message on mobile.
• Media Viewer: Fixed lingering audio after moving to the next item.
• Reactions: Fixed unexpected interaction animations.
• Fixed jumping cursor when typing in Safari.

Telegram Web Z was updated to version 1.36

👏 Harder
• ‘Add Contact’ and ‘Block User’ buttons appear in the chat header of new chats.
• Send media without sound or schedule it for later. Right-click the Send button on desktop, or press and hold on mobile.
• Added support for viewing shared geo, live locations and venues.
• Chat owners can leave their own groups without deleting them.
• Choose from more categories when reporting specific messages.

🤩 Better
• Even more UX improvements.

💪 Stronger
• Fixed flickering menu for bot commands.
• Copying message text on mobile devices now works as expected.
• Fixed frozen UI when moving between chats and comments.

Telegram Web Z was updated to version 1.37

👏 Harder
• Access detailed interactive statistics for channels you manage.
• Accessibility: screen readers properly detect the attachment menu.

🤩 Better
• Enhanced colors for dark mode with higher contrast.
• Even more UX improvements.

💪 Stronger
• Fixed issues when creating polls in channels.
• Drafts no longer overwrite original text when editing messages.
• Reacting to your own message no longer sends a notification.

Telegram Web Z was updated to version 1.38

👏 Harder
• See interactive statistics for groups you manage.
• Adjust volume and playback speed with new controls in the Media Viewer.
• Save GIFs sent by other users.
• Schedule stickers and GIFs or send them silently – right-click on desktop or long-press on mobile.
• "Report Spam and Leave" button added for unknown channels.
• Drafts now save when editing messages.
• Set a custom name or include a phone number when adding contacts.
• New contacts can now be added from the Contacts page.
• Click to copy code blocks to your clipboard.

🤩 Better
• Background pattern added for Night Mode.
• New message drafts are restored after editing another message.
• Updated font for Persian language (Vazirmatn 32.1).
• More and more UX improvements.

🚀 Faster
• Optimized multiple algorithms, accelerated rendering.

Telegram Web Z was updated to version 1.39

🤩 Better
• New animations for QR code on login screen.
• Toggle Attach Menu with keyboard or screen reader.
• Another update for Persian language font.
• Various UX improvements.

💪 Stronger
• Fixed media sometimes not being loaded.

Telegram Web Z was updated to version 1.40

🤡 Happy April Fool's Day! 🤡

👏 Harder
• Finally added support for Telegram Stories.
• Explore 37 new emoji.
• Set Night Mode to follow your operating system in Settings > General.
• Upload all types of audio files with cover images and meta tags.
• Improved designs for Settings and Management pages.

🤩 Better
• Proper date formatting for all languages.
• Changing volume in the media viewer automatically unmutes audio.
• Groups you were restricted from now stay in your chat list.
• Accessibility: Screen Reader support for emoji panel.
• Removed reaction sounds.
• Various layout improvements.

🚀 Faster
• Smoother transitions in Settings.

💪 Stronger
• Fixed error messages for ‘You must be an admin’ and ‘You can't write in this chat’.
• Fixed calendar months that start on a Sunday.
• Fixed duplicated files when downloading.
• Fixed forwarding protected content.
• Fixed saving Privacy Exceptions.
• Fixed various issues when switching between message lists.