🎉 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.

1. 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.

2. 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.

Credits

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

Pull request checklist

• [ ] My code contains tests covering the code I modified
• [x] I linted and tested the project with bin/check
• [ ] I added significant changes and product updates to the changelog

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.

Pull request checklist

• [ ] My code contains tests covering the code I modified
• [x] I linted and tested the project with bin/check
• [ ] I added significant changes and product updates to the changelog

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.

Pull request checklist

• [ ] My code contains tests covering the code I modified
• [x] I linted and tested the project with bin/check
• [ ] I added significant changes and product updates to the changelog

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 feature to CHANGELOG

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.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: puma dependency-type: direct:production ...

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

• Update app/models/developer.rb

Co-authored-by: Joe Masilotti joe@masilotti.com

• Update app/views/developer_mailer/flagged.html.erb

Co-authored-by: Joe Masilotti joe@masilotti.com

• Update app/views/developer_mailer/flagged.text.erb

Co-authored-by: Joe Masilotti joe@masilotti.com

• Update test/mailers/previews/developer_mailer_preview.rb

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.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: nokogiri dependency-type: indirect ...

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.