https://contest.com/javascript-web/entry1044

entry1044.md

Brief description:

• JS implementation of MTProto
• CSS code is inlined to index.html. So user can view login page instantly, without additional network requests.
• Login page is implemented with static html+js for good First Meaningful Paint/First Contentful Paint
• Chat app is implemented with Web Components (Custom Elements (V1) without Shadow DOM), because JS for its rendering is already loaded during login or cached during previous session.
• Pixel-perfect layout of most elements (a few margins between them may be wrong)

To go through signup flow, open app in test mode with empty localStorage(without data from previous session) and use test phone number. To open app in production mode (after test mode), you should clear localStorage too.

---

Details that may be unnoticed at first glance:

1. Determination of the country by phone number and using appropriate phone mask.
   
   ^{(gif speed: 2x)}

2. Case-insensitive search with scrolling of the center of menu to the found country. If the user didn't fill the full name of country and blurred the select field, the last suggested country selecting automatically. When combobox becomes focused, its value becomes selected (lightblue highlighting). User can start searching without deleting old value manually.
   

3. The select placeholder changes to the name of the hovered country. When the user selects a country, phone input becomes focused.
   

4. Smooth animation of monkey when changing steps, entering code, changing password visibility. Input autofocus.
   ^{progress of the gif at the bottom}
   

5. Editing masked phone in any part without jumping of cater to the end of input.
   

6. "+" sign at the beginning of the phone input is persistent. User can't delete it.
   

7. Fields validation. Focusing on invalid input.
   

8. Custom font with large dots in password input and blue input caret in all inputs.
   

9. Avatar cropping.
   ^{to open this page without registering a new user, execute window.showPage.fullname() in console}
   

10. Hash router. Saving current chat ID in URL.
    

11. Keyboard navigation with Tab, Shift+Tab (outline style activates only when interacting with keyboard).
    

12. Different size of line breaks of message, depending on the width of the date, the read icon, and the type of message (forward, replay, plain).
    

13. Borders in dialog lists and chats that appears on scroll.
    

14. Different styles of messages, depending on position and author.
    

15. Ripples appear on mousedown and disappear on mouseup - it keeps on mouse hold (like in Telegram Desktop).
    

16. Custom scroll.
    
    ^{(gif speed: 2x)}

17. Audio component(but without playing)
    

18. Offline indicator.
    

19. Typing and online indicator (but with z-index bug of online indicator).
    

20. Logout at termination other sessions on other device.