- 4
- 26 159
Mocra
Australia
เข้าร่วมเมื่อ 25 เม.ย. 2022
Mocra is a modern web app development consultancy that creates incredible applications for end consumers and internal staff, focused on Ruby on Rails.
80% users want Dark Mode - How to add to Jumpstart Pro
80% of mobile users want dark mode. Jumpstart Pro for Ruby on Rails now has a branch with dark mode support. I will give a demonstration.
* How I setup Jumpstart Pro www.mocra.com/how-do-i-setup-jumpstart-pro/
* 7 steps to setting up Stripe on Jumpstart Pro www.mocra.com/steps-to-setting-up-stripe-payments-with-jumpstart-pro/
* How to add Dark Mode to Jumpstart Pro www.mocra.com/toggle-dark-mode-in-jumpstart-pro-rails/
* Dark Mode branch [private github repo] github.com/jumpstart-pro/jumpstart-pro-rails/pull/697
00:00 80% mobile users want dark mode
00:55 Demo
04:50 Payments and Stripe
* How I setup Jumpstart Pro www.mocra.com/how-do-i-setup-jumpstart-pro/
* 7 steps to setting up Stripe on Jumpstart Pro www.mocra.com/steps-to-setting-up-stripe-payments-with-jumpstart-pro/
* How to add Dark Mode to Jumpstart Pro www.mocra.com/toggle-dark-mode-in-jumpstart-pro-rails/
* Dark Mode branch [private github repo] github.com/jumpstart-pro/jumpstart-pro-rails/pull/697
00:00 80% mobile users want dark mode
00:55 Demo
04:50 Payments and Stripe
มุมมอง: 348
วีดีโอ
Adding Tip Tap editor to Rails - Episode 3 - Recreate Notion in Rails
มุมมอง 8K2 ปีที่แล้ว
Notion is a text editor on steroids; so we need our own headless text editor. And we need steroids. In this episode, we add Tip Tap into our Rails app via a StimulusJS controller, and explore how Tip Tap work. Oh, and then we save data to the server. Links: * Notion www.notion.so/ * Tip Tap tiptap.dev/ * render_svg / inline_svg github.com/jamesmartin/inline_svg * SVG icons bundled with Jumpstar...
Inline Editing each Page Title - Episode 2 - Let's recreate Notion in Ruby on Rails
มุมมอง 2.5K2 ปีที่แล้ว
In a normal Rails app we have forms, we have save buttons, and finish work early. But I want my page titles to be inline editable. I will figure out how to capture key events, submit the changes to the server, and even update the page URL with new slugs. Links from the episode: * turbo.hotwired.dev/handbook/drive#form-submissions * htmldom.dev/placeholder-for-a-contenteditable-element/ * tiptap...
Let’s recreate Notion in Ruby on Rails - Episode 1 - Creating Pages
มุมมอง 16K2 ปีที่แล้ว
Want to pair with me as I create a new Ruby on Rails application to recreate the fabulous Notion note-taking tool? In episode one we start with Jumpstart Pro, create the Page scaffold, then delete most of it, and paste in some HTML I prepared beforehand. We write some rspec tests. We talk about my hopes and dreams for 2022 text editors for all Ruby on Rails applications. We laugh, we blame you ...
Loved the series. Repo? Updated features?
I booted up my own version of Jumpstart and have been following along! This is super helpful. I'm running into an issue where the Tailwind that you copy and paste directly into the UI renders differently (and broken) for me. I remember being plagued by this problem with Jumpstart a few years ago. I'm not super strong on the asset pipeline so I don't know if you had any tips or ideas that might help. Thanks again for making this series!
It's nice to see the use of Google, and a good amount of humour.
Thanks for sharing! I was looking for how to integrate TipTap into my Rails app and someone linked your video from Reddit. Not only I got it working superfast, but I also learned some stimulus. Please keep sharing :)
Where we can read the source code for study? Can you please share the link? Waiting for your reply 🙏
I don't have a good excuse for the SD 720p quality video. I'll try harder in future videos -- Dr Nic
This is very good! Thanks for sharing it
This series is good, Next video ?
LOL rubyweekly :(
Yes, please share how you change Jumpstart to suit you.
Great series, cheers! When is the next one? :)
Waiting for next episode doc 🎉❤
Why not use Rails 7 importmap pin?
supercool, wait for next video
It got this issue: Failed to resolve module specifier "@tiptap/core"
I figured it out, used importmap feature in rails
p̴r̴o̴m̴o̴s̴m̴
Thanks Dr Nic 🙌
tldr 38:16
@Mocra That was so cool. I'm curious how you implement images uploading, I have no idea how to do that especially in your tricky-stimulus-fresh-mind-way :)
You could create a controller to handle the file uploading as you normally would and pass the image url via events to the editor controller.
Thank you for the very helpful content!
Loving your accent! And wanna add that I’d be happy to pay for a ROR course if you ever make one! 👍
next series - recreate youtube in rails 👀
🤣 just unsubscribed from notion !!!
I’ll make sure that’s a feature of our recreation - to unsubscribe to this channel :)
@@MocraVideos gonna share the repo ?
I’m enjoying this series, great to see you screencasting Dr Nic!
Thanks Ryan. I hope you’re very well xoxo
Another option for debounce is a stimulus controller extension from the stimulus-use library stimulus-use.github.io/stimulus-use/#/use-debounce - though I think I still prefer the explicit inline declaration of debounce.
very great content!!. I am looking forward to the next video. Thanks
Awesome, thank you!
Hi Dr. Nic, thank you for starting this series. It's a pleasure watching you build a real app without following a script, and I picked up some very useful things by watching you code. Much appreciated.
Thanks mate
Another great episode. I wonder if you could render the Page#body HTML directly into the server-generated view, and then reference it as a controller target to then wire up the content of the TipTap editor instance. This would allow the page to be read without JS
I think that's worth doing. Though I want to know more about this "without JS" universe to which you refer. I just watched "Dr Strange 2" and they didn't visit one universe that didn't have JavaScript :)
@@MocraVideos Fair. I don't think of it as an actual user-group I am targeting, but as a clear and useful mental model for ensuring a progressive enhancement mindset. What I like about such a mindset is that it helps to focus me on the basics and ensure I get them right. But I know you already know and appreciate the value of progressive enhancement
@@MocraVideos HAHAHAHAHAH
Thank for the content. I have learned many things with this single video.
Thanks mate
Liked and subscribed without hitting play.
TBird, you gotta hit play. To re-live the good times!
Increíble! saludos desde México
Excellent, thanks!
I am thinking || "default" is a code smell. Perhaps a decorator or maybe a default set in the model would be better.
This was great. I've been writing Rails almost as long as you but still enjoyed following along. I'd never seen AS::CurrentAttributes before, so worth it just for that!
Thanks Alex! Hopefully we’re all still merrily coding a long time from now.
Excellent episode! Thanks for share that tons of acknowledgment and with this great mood as bonus.
Thanks mate!
Great video in a great series. Love to see you problem solving in real-time. A couple of thoughts around edge-cases: * keyup is a limited event, what if someone pastes content? Of course, we can simply add additional events that we pass into the controller action * focus styles are an important usability concern for many users * you could make this somewhat more robust (diminishing returns here, I admit) by putting a Submit button in the form that you hide if the controller connects. This way, if the user doesn't have JS, they can still edit the title. But, again, such great content. Can't wait for ep. 3
Good points, Stephen. I might do a video where I revisit these ideas and code them up and discuss them. I didn’t add any screen reader elements for title each either, so that’s something else to add.
I'm loving this series. One important thing to learn from Dr.Nic is clear thinking, you need to ask a lot of questions to achieve the end goal. I love how Dr. Nic does that. So excited for collaborative conflict resolution episodes. Thanks :)
Lovely video series 👍👍👍
Amazing
Nice one 👍
Great video!
Awesome!
Loving this series! Many thank you for sharing
Picked up some great tips. Thank you. Looking forward to the next video 😀
Thanks mate!
Super thanks for this amazing content! Can't wait for the next!
Loving this series! Thank you for sharing
hahahaha #5:00. rule number 1.
OMG is DrNic !!
I love that energy DrNic! It's like small explosions of (after)thought :rofl: - sitting here at my desk, tapping my foot impatiently for "the difficult sequel" ;)
Thanks :)