Stateless Code | Rework Tailwind Helper to Stop at the Border @StatelessCode | Uploaded January 2023 | Updated October 2024, 11 hours ago.
We had a couple of previous videos where we took a look at Tailwind and did some basic styling with Devise. The intersection of Tailwind and Devise was also the source of our first collaborator on the project. Back when recording those two videos, we put an item in the backlog to rework our TailwindHelper class to have a clear boundary at the border of the element. This is just an internal standard for our app, but one I think will prove more useful and maintainable.
Margin affects positioning and it's hard to take away. The decision about how to space different elements via margin and positioning should be left up to the particular view.
We also take the opportunity to break up our single TailwindHelper module into smaller sub-modules in their own source code files to aid with organization and to not have one giant file with everything in it, which RuboCop will (and should) frown at.
When doing this type of work, it's important to have good tests in place, so you know whether you're breaking anything by accident. It's also a good idea to only make one set of changes at once when reorganizing. Leave the tests unchanged while you reorganize your application code, and leave your application code unchanged when you reorganize your test classes.
This video covers:
00:00:12 Introduction, review current state, and overview of issue
00:05:10 Checkout a new branch and figure out where to start
00:06:53 Find and replace the old state of the views with the new state for the tw_success_button
00:10:53 Look at what happens in the DOM when we do the replacement in the view
00:11:30 Remove the margin classes from the application code (intended to do tests first) to make the tests fail
00:12:13 Remove the margin classes from the tests to make them pass
00:13:25 Replace the state in the views with for the cancel button and alert button and do a temporary commit
00:17:04 Reorganize TailwindHelper into sub-modules and re-test
00:22:40 Refactor out repeated button code into tw_base_button method
00:33:05 Fix RuboCop offenses after creating the new method and do another intermediate commit
00:39:11 Restructure test suite to match helper sub-modules and fix test error due to not including the correct code
00:48:30 Add an individual test for the join_classes method and correct new RuboCop offenses
00:51:55 Update the comments for the modified files
00:54:42 Squash temporary commits down to one and amend the commit with a final message
00:56:54 Push, pull request, close issue, prune branches
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #rubocop #devise #turbo #controllers #views #refactoring
See other related StatelessCode videos:
- Fix Devise Views to Work with Tailwind and Turbo
youtu.be/8VjIML0Sdks
- Review a Pull Request from Our Devise Tailwind Video: Rails Helpers or Tailwind Directives? youtu.be/NY6J4Hjjftg
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.
We had a couple of previous videos where we took a look at Tailwind and did some basic styling with Devise. The intersection of Tailwind and Devise was also the source of our first collaborator on the project. Back when recording those two videos, we put an item in the backlog to rework our TailwindHelper class to have a clear boundary at the border of the element. This is just an internal standard for our app, but one I think will prove more useful and maintainable.
Margin affects positioning and it's hard to take away. The decision about how to space different elements via margin and positioning should be left up to the particular view.
We also take the opportunity to break up our single TailwindHelper module into smaller sub-modules in their own source code files to aid with organization and to not have one giant file with everything in it, which RuboCop will (and should) frown at.
When doing this type of work, it's important to have good tests in place, so you know whether you're breaking anything by accident. It's also a good idea to only make one set of changes at once when reorganizing. Leave the tests unchanged while you reorganize your application code, and leave your application code unchanged when you reorganize your test classes.
This video covers:
00:00:12 Introduction, review current state, and overview of issue
00:05:10 Checkout a new branch and figure out where to start
00:06:53 Find and replace the old state of the views with the new state for the tw_success_button
00:10:53 Look at what happens in the DOM when we do the replacement in the view
00:11:30 Remove the margin classes from the application code (intended to do tests first) to make the tests fail
00:12:13 Remove the margin classes from the tests to make them pass
00:13:25 Replace the state in the views with for the cancel button and alert button and do a temporary commit
00:17:04 Reorganize TailwindHelper into sub-modules and re-test
00:22:40 Refactor out repeated button code into tw_base_button method
00:33:05 Fix RuboCop offenses after creating the new method and do another intermediate commit
00:39:11 Restructure test suite to match helper sub-modules and fix test error due to not including the correct code
00:48:30 Add an individual test for the join_classes method and correct new RuboCop offenses
00:51:55 Update the comments for the modified files
00:54:42 Squash temporary commits down to one and amend the commit with a final message
00:56:54 Push, pull request, close issue, prune branches
#ruby #rails7 #rails #rubyonrails #rubygems #codecast #screencast #github #opensource #minitest #TDD #agile #NerdDice #DnD #roleplaying #softwaredevelopment #learntocode #tailwind #rubocop #devise #turbo #controllers #views #refactoring
See other related StatelessCode videos:
- Fix Devise Views to Work with Tailwind and Turbo
youtu.be/8VjIML0Sdks
- Review a Pull Request from Our Devise Tailwind Video: Rails Helpers or Tailwind Directives? youtu.be/NY6J4Hjjftg
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.
