Stateless Code | Review a Pull Request from Our Devise Tailwind Video: Rails Helpers or Tailwind Directives? @StatelessCode | Uploaded November 2022 | Updated October 2024, 3 hours ago.
This is an exciting moment in the history of Stateless Code! One of our viewers has opened up a pull request to collaborate on the project with suggestions to improve the implementation of our Fix Devise Views to Work with Tailwind and Turbo video.
The proposed pull request moves the class aggregations we had placed into a Rails helper into Tailwind directives.
In the video, we compare and contrast the alternatives. Tailwind directives apply the styles to an HTML class at the CSS level. The Rails helper methods add the CSS classes to the HTML at an individual level. Ultimately we decide to keep the Rails helper version so that we have more control to toggle individual HTML classes via Stimulus. Once we have a more settled design, we might move at least some of our HTML classes that are always used together into directives, but for the time being we decide to stick with the existing implementation.
We do make two changes to improve our app as a result of the pull request though.
1. We ditch the .html_safe at the end of our join_classes() method. Since we aren't currently calling the method on anything provided by user input, the security risk is small. But it turns out that it's completely unnecessary, so we just get rid of it.
2. We missed styling the button on the unlocks/new view. We add it in.
This video covers:
00:00:12 Introduction.
00:02:41 Take a look at the pull request and preliminary review to ensure it's safe to pull down locally
00:06:36 Explanation of Tailwind directives
00:07:44 Resume review of diff in pull request
00:09:49 Add the pull request forked repo as a remote and an explanation of local branches, remote tracking branches and remote branches
00:12:48 Check out the pull request branch (detatched head state) and launch the dev server
00:14:10 Click around in the browser and check things out. The HTML class is the directive class (like tw_alert_button)
00:14:55 Demonstration of the difference in HTML classes in the DOM in the pull request version using directives and the Rails helper methods
00:17:37 Discussion of the trade-offs and considerations of using Rails helpers vs Tailwind directives
00:21:43 Add missing button styling to unlocks/new
00:24:07 Remove the unnecessary and dangerous .html_safe from the join_classes method
00:26:13 Make sure you don't programatically generate Tailwind classes in your Rails helpers via interpolation or concatenation
00:30:43 Review diff, run tests and RuboCop
00:32:00 Provide comment on pull request
00:35:32 Commit and push our changes that address feedback
00:36:51 Close pull request
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views #selenium #capybara #systemtest #pullrequest #collaboration #directives #helpers #codealong
See other related StatelessCode videos:
- Fix Devise Views to Work with Tailwind and Turbo
youtu.be/8VjIML0Sdks
- Create a RubyGem 87: Downtime Hodgepodge and a Contributor youtu.be/qTP_vq7DLBU
Resources that we relied upon for this solution:
- secretpray (our contributor) on GitHub: github.com/secretpray
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
This is an exciting moment in the history of Stateless Code! One of our viewers has opened up a pull request to collaborate on the project with suggestions to improve the implementation of our Fix Devise Views to Work with Tailwind and Turbo video.
The proposed pull request moves the class aggregations we had placed into a Rails helper into Tailwind directives.
In the video, we compare and contrast the alternatives. Tailwind directives apply the styles to an HTML class at the CSS level. The Rails helper methods add the CSS classes to the HTML at an individual level. Ultimately we decide to keep the Rails helper version so that we have more control to toggle individual HTML classes via Stimulus. Once we have a more settled design, we might move at least some of our HTML classes that are always used together into directives, but for the time being we decide to stick with the existing implementation.
We do make two changes to improve our app as a result of the pull request though.
1. We ditch the .html_safe at the end of our join_classes() method. Since we aren't currently calling the method on anything provided by user input, the security risk is small. But it turns out that it's completely unnecessary, so we just get rid of it.
2. We missed styling the button on the unlocks/new view. We add it in.
This video covers:
00:00:12 Introduction.
00:02:41 Take a look at the pull request and preliminary review to ensure it's safe to pull down locally
00:06:36 Explanation of Tailwind directives
00:07:44 Resume review of diff in pull request
00:09:49 Add the pull request forked repo as a remote and an explanation of local branches, remote tracking branches and remote branches
00:12:48 Check out the pull request branch (detatched head state) and launch the dev server
00:14:10 Click around in the browser and check things out. The HTML class is the directive class (like tw_alert_button)
00:14:55 Demonstration of the difference in HTML classes in the DOM in the pull request version using directives and the Rails helper methods
00:17:37 Discussion of the trade-offs and considerations of using Rails helpers vs Tailwind directives
00:21:43 Add missing button styling to unlocks/new
00:24:07 Remove the unnecessary and dangerous .html_safe from the join_classes method
00:26:13 Make sure you don't programatically generate Tailwind classes in your Rails helpers via interpolation or concatenation
00:30:43 Review diff, run tests and RuboCop
00:32:00 Provide comment on pull request
00:35:32 Commit and push our changes that address feedback
00:36:51 Close pull request
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #postgresql #rubocop #devise #turbo #controllers #views #selenium #capybara #systemtest #pullrequest #collaboration #directives #helpers #codealong
See other related StatelessCode videos:
- Fix Devise Views to Work with Tailwind and Turbo
youtu.be/8VjIML0Sdks
- Create a RubyGem 87: Downtime Hodgepodge and a Contributor youtu.be/qTP_vq7DLBU
Resources that we relied upon for this solution:
- secretpray (our contributor) on GitHub: github.com/secretpray
This video is CC0 - No rights reserved. (YouTube doesn't allow this option when publishing.) All code is released under the UNLICENSE. Stateless Code denies the concept of "intellectual property". Copying is not stealing.
