develwoutacause’s avatardevelwoutacause’s Twitter Archive—№ 1,106

  1. I wanted to spend some time building a real (if small) #Angular application, and I regularly struggle with finding emojis, so I made an Emoji Picker #PWA! emoji.dwac.dev
    /img/n21i5UvWCn.jpeg
    On twitter.com Twitter logo develwoutacause’s avatar ♻️ 1 Retweets Mood -2 🙁
    1. …in reply to @develwoutacause
      Full source is here for those interested. github.com/dgp1130/emoji-picker I only spent about a day on it, so it's a little rough around the edges. In particular, I just kind of forgot to write tests for anything?
      /img/F54XmPThpH.jpeg
      Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood +3 🙂
      1. …in reply to @develwoutacause
        Some learnings: 1) I needed to statically generate some emoji data and tried to use an #Angular builder. Unfortunately this was difficult to set up without a separate package and I don't think it's possible to "run my custom builder and then run a regular build." 🤦‍♂️
        Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood -1 🙁
        1. …in reply to @develwoutacause
          2) Assets *must* be in the source tree, which makes generated assets really tricky even after you solve 1). I tried linking to the dist/ folder, redirecting to it via src/../dist/, and even symlinking, all of which didn't really work. I just had to .gitignore the file. 🤷‍♂️
          Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood +5 🙂
          1. …in reply to @develwoutacause
            3) #Angular #ChangeDetection is really hard to reason about. I spent an hour swearing at the computer about updates not applying before realizing that ResizeObserver is not monkey patched by Zone, and it's events weren't triggering change detection. 🧟 github.com/dgp1130/emoji-picker/commit/141b984f19ba9d74d1cb2455ed5f2642c9bb2140#diff-64f34753badb8801cb86f07091347871e000e4e8088957f6c8b519cfee036693
            Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood -3 🙁
            1. …in reply to @develwoutacause
              4) Adding #PWA support was trivially easy and generated everything I needed right out of the box! Seriously cool. 😎 @develwoutacause/1490037434393923584?s=20&t=fet7PW_2RjFQDwX1J8h0Og
              Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood +6 🙂
              1. …in reply to @develwoutacause
                5) ng-template is awesome! Defining a template in one component and stamping is elsewhere while maintaining context and style isolation is really hard and #Angular does it seamlessly out of the box. MatSnackbar.openFromTemplate() is so easy!🤯 github.com/dgp1130/emoji-picker/commit/ee95ef9c34d346bf0fbe54947ff58a9866a57358
                Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood +6 🙂
                1. …in reply to @develwoutacause
                  These challenges are all pretty solvable, so I'll follow up soon and see what we can do to improve things. It's always important to use your own products. 🐶🥫
                  Permalink On twitter.com Twitter logo develwoutacause’s avatar ❤️ 1 Favorite Mood +5 🙂
                  1. …in reply to @develwoutacause
                    This app was just for experimenting, so I probably won't do more with the project, but given more time I would love to add: 👍🏿 Support for non-default skin tones. ♿️ Proper #a11y audit. 📋 Tests! 🏃‍♂️ Indexed filtering. 🤔 More comprehensive keywords. Never enough ⌚️ in the ☀️.
                    Permalink On twitter.com Twitter logo develwoutacause’s avatar Mood +10 🙂