Usually I’m not interested in FE aspects of web development.
Amount of pain that I experienced from having to spend 2 hours to setup SCSS with jQuery every time I start a new toy project turns me back from everything related to Webpack and friends for as long as it can only possibly be.
A little bit later I usually come across posts/articles where people describe how they optimize their assets (like https://twitter.com/dhh/status/1265718008191709185 or https://pragmaticstudio.com/tutorials/adding-tailwind-css-to-phoenix) and with a mixed feeling of a deep pain, guilt and curiosity trying a thing or two to not send 300kb of JS down to the browser on an initial page load.
And usually all those attempts are good for nothing.
That’s why I want to reach out to all people in our community who know their ways around frontend stuff and ask to share their recipes that can be applied to out-of-the-box Phoenix apps to deliver a snappier UX.
- How do you remove unused CSS, especially with Bootstrap?
- How do you remove unused JS code, especially with Bootstrap?
- How do you send down to a client only minimum amount of JS that will be used on viewed page exactly?
- All your favorite tips & tricks.
I remember my experience working with Ember.js which was really awesome and took care for most of the problems for me so I could focus on writing code. It would be great to have similar experience (think Channels or Presence level of automation) with frontend assets.
God bless you.