A collection of composable behaviors for your Stimulus Controllers
A modest, yet powerful wrapper of Flatpickr 📆 for Stimulus
👩👧👦 👨👧👦 : A simple Stimulus Controller to manage Parent/Children controllers with simple conventions
Advanced datepicking example app with Stimulus + Flatpickr + Turbolinks
🎉 very cool
next up is converting images to webp 😄
actions are scoped inside the controller node
This will work
<div data-controller="test">
<span>This text color change to red</span>
<button type="button" data-action="test#changeColor">click</button>
</div>
if you need to have your button outside of this element then you probably need to define a target
Hi. I create a stimulus controller and use on a div element. Now when change innerHTML of this div element with click on a button, text change but color not change to red and connect() not work.
<div data-controller="test">
<span>This text color change to red</span>
</div>
<button type="button" data-action="test#changeColor">click</button>
test_controller.js
...
connect() {
this.element.style.color = "red";
}
changeColor(event) {
this.element.innerHTML = "<span>HelloWorld!</span>"
}
...
🚨 replace with single quote
⚰️ remove unused font files
indeed I was using a newer version. I added a commit with the latest standard
version
⬆️ upgrade standard to 1.12.1
Excellent. That's good enough for me to go with the variable font! What changes need to be made to get that working?
Nothing 🎉 It is what is currently being use on www.railsdevs.com and I picked the same strategy for the self hosting.
I will remove the extra file now that we confirm this route.
will be curious for the Page speed results. I am not yet 100% sure we will remove the warning as it still remains a blocking ressource.
- How much longer does it take to download these images vs. from
ui-avatars
?
I pick the regular
version of the image it is pretty light weight images. As an example the first one is 100kb.
I didn't noticed any particular slowdown in the seed
task but I didn't measured it neither.
- Is it safe to include "my" Unsplash API key in the public code? I ask because their docs make it sound like it is free forever with no limits.
When you create a new app on Unsplash it has a demo mode. API credentials for this demo mode are limited to 50 call per hour (largely enough in our case as a seed would require a single call max 2 if we need more than 30 images). But it still remains API credentials which are linked to your account and I think should be kept secret.
If 2. doesn't make sense then I'd rather add 30+ images and make sure that every developer profile uses a unique one.
Yes that can be easy to do. I can fetch 30 and rather than a random select I can circle on this list. Also links can be added to a yaml file rather than a constant if we have 30+ that would look better.
officially Unsplash require credits for images to be displayed (link to the author and to unsplash). Given that this is for localhost development, I think we are fine for not doing it.
2 files had StandardRb offenses on main. This PR is just the results of running standard -fix
bin/check
Here it is
https://caniuse.com/variable-fonts
As a first step to address #519, I though it would be best to have real avatar image as part of the seed.
This PR replaces the ui-avatars
images with a random avatar image from Unsplash
To avoid adding the unsplash Gem with credientials etc, I fetched 10 random avatar images that are stored within a constant. During the seed we can randomly pick from that constant.
bin/check
close #525
This converts the https://rsms.me link to download the fonts to a self hosted method.
Font files added to the project are downloaded from the lastest version of Inter .
I have added all font variations but it looks like the project is using "Inter var" which is a variable font variation (it includes the range of 100 to 900). Variable fonts is widely supported.
From my tests adding the "Inter var" leads to a 200kb download whereas downloading individual font weight results in a larger overall weight.
If we are ok to keep only the "Inter var" I can remove all the other files to simplify even further this PR.
bin/check
Ok will give it a try
Mobile view of /notifications CSS tweaks (#339)
Mobile view of /notifications CSS tweaks
Update app/views/notifications/_notification.html.erb
Co-authored-by: Joe Masilotti joe@masilotti.com
Co-authored-by: Joe Masilotti joe@masilotti.com
Fix inline error labels for multiple errors
Added ability to submit messages with cmd+Enter (#328). (#335)
Added ability to submit messages with cmd+Enter (#328).
Removed comment from form_controller.js.
Changed single quotes to double quotes in form_controller.js
Updated controller method name.
Added system test for cmd+Enter message form submission.
Updated system test class name to pass test.
Add CHANGELOG.md
Add changes from February and January
Revamp messaging with Hotwire (#334)
First pass at sending a message via Hotwire
Redesign message form to show inline error message
Client-side validation
Remove unused translation
Add test for sending messages via Turbo Stream
Memoize conversation
Remove redundant role="list"
https://github.com/joemasilotti/railsdevs.com/pull/334#discussion_r831034142
add ability to search developers by their bio or hero (#341)
add ability to search developers by their bio or hero
rename search feature flag and update test case
remove else part and and conditional class for filters
move sort button to left when search feature is not enabled and fix sort css issue
feedback change related to test cases
Upgrade minimist for security update
https://github.com/joemasilotti/railsdevs.com/security/dependabot/8
Bump puma from 5.6.2 to 5.6.4 (#352)
Bumps puma from 5.6.2 to 5.6.4.
updated-dependencies:
Signed-off-by: dependabot[bot] support@github.com
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Conversation scroll (#342)
Scroll to the message form when the conversation page loads.
Add padding to message form.
Add test for scrolling to message form on conversation page.
Added page scroll Stimulus controller.
Fix autoscroll with Turbo
Autofocus the form on load
Remove unneeded nesting
Bind to Turbo event in Stimulus controller
Remove unused target
Co-authored-by: Joe Masilotti joe@masilotti.com
Ensure arbitrary HTML doesn't render in a message
Show message preview in notification email (#357)
Show message preview in notification email
Add note to CHANGELOG
Add instructions to start Postgresql and Redis servers (#362)
Add instructions to start Postgresql and Redis
Remove the next steps section from the bin/setup
Clean up test fixtures (#366)
Clean up test fixtures
WIP: Queries, integration, system tests failing
WIP: Fix most of integration and policy tests
Fix remaining broken tests
Remove unnecessary instance variable
Admin conversations (#368)
/admin/conversations-> /admin/conversations/blocks
/admin/conversations stats
List and link to conversations on admin page
Update CHANGELOG
Localize string
Busines and developer conversation stats
Migrate email sending from Mailgun to Postmark (#365)
Migrate email sending from Mailgun to Postmark
Update CHANGELOG
More sane handling of keeping folks signed in
Add "Invisiblize" button on developer profiles (for admins) (#370)
Add eye_off icon from Heroicons
Add invisiblizes controller and route
Add invisiblize button to primary action component
Update locale
Add invisiblize developer notification
Add developer mailer
Update developer model to send notification after update
Update tests
Remove HTML from flagged email text version
Add DeveloperMailer previewer
Update component test
Update changelog
Update CHANGELOG.md
Co-authored-by: Joe Masilotti joe@masilotti.com
Co-authored-by: Joe Masilotti joe@masilotti.com
Co-authored-by: Joe Masilotti joe@masilotti.com
Co-authored-by: Joe Masilotti joe@masilotti.com
Co-authored-by: Joe Masilotti joe@masilotti.com
Remove unused methods
Consolidate logic
Create and use invisiblize!
method instead of callback
Fix spelling error
flagged -> invisiblize
Seed an invisible developer for mail preview
fixup! flagged -> invisiblize
Co-authored-by: Joe Masilotti joe@masilotti.com
Idempotent database seeds inspired by Bullet Train (#372)
https://bullettrain.co/docs/seeds
Bump nokogiri from 1.13.3 to 1.13.4 (#373)
Bumps nokogiri from 1.13.3 to 1.13.4.
updated-dependencies:
Signed-off-by: dependabot[bot] support@github.com
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Looking at the css that is downloaded https://rsms.me/inter/inter.css it looks like all font weight are defined (from 100 to 900). What are the font weight that you really need within your design system? I think the major optimisation would first come by downloading only the fonts that you really need.
I agree that this should be part of 1.00.
useDispatch is part of StimulusUse an independent package from Stimulus.
useDispatch was introduced at a time when dispatch
wasn't a native function of Stimulus.
I suspect here you are using the native Stimulus function not the one coming from the mixing. The native Stimulus dispatch
function is currently not logged.