Livestreams for learning.
AI software development, design & production.
Introducing a new app & doing some prototyping. Hi everyone š It's been a while since I've done any live-streaming due to other stuff happening in life. However I started a new app recently and thought it would be interesting to get back to it.
Letās implement ticket allocation in our app.
Planning / domain modelling for group ticket bookings.
Styling, CSS, UI Design & ViewComponents.
Adding uppy.js with Active Storage and (I think?) Stimulus.js.
Adding avatars (using dropzone.js?) and polishing our navbar UI.
Adding logic to our onboarding flow/wizard (and more UI!).
Merging (refactoring?) ViewComponents in Rails and more UI work.
Designing UI in Sketch, building in Rails & ViewComponents.
Designing in Sketch, building in Rails & ViewComponents.
Bug fixes, quick features and building seed data.
Adding step-by-step (wizard) sign up to our Rails app.
Email gems for local development & pub/sub patterns.
Sending emails from our Rails app.
Adding an email provider (ESP) to a Rails app.
We've tried the others, how about Heroku? Rails hosting setup.
If not Heroku, then where? Letās look at Rails hosting for our app. I'm a long-time Heroku user, so my default next step for the app would be to host it on Heroku, but let's take a look at some of the alternatives out there - can we get an app up and running?
Wrapping up the webpack removal with Rails 7.
Rails 7 Upgrade!! š Removing webpack and more.
Customising Simple Form field output & preparing to remove webpack.
Events app UI design and building.
Picking up where we left off: UI design and building!
UI design in Sketch for macOS and building the UI
Designing UI in Sketch App and building it in ViewComponents
Designing a web app UI with Sketch app for macOS
Customising Primer ViewComponent & CSS Library
Live Ruby on Rails pairing with @samneter - Building Hoopsfix, views and stuff.
Installing a ViewComponent framework (and CSS framework?)
Adding custom RSpec helpers for our test suite & more ViewComponents
Building our user account area (change password, email etc.)
Fixing bugs and adding users to our app
Fixing bugs, making UI framework decisions and adding ViewComponents
Letās refactor and test our ViewComponents
ViewComponents: letās build a smart navigation (with Stimulus.js)
Adding ViewComponents with logic to our Rails app
Adding rspec tests to our attendee code
Creating Attendees for our events app (Take #2)
Creating Attendees for our events app
Starting to build the ticket purchase process in our app
Adding Active Storage & Action Text to our Rails app (new event fields!)
Adding feature / system / integration tests to a Rails app
Making the events editable in our event ticketing app
Last week we got events showing in the admin area, now let's get the public-facing pages built - and write some more tests!
We used ViewComponent previously in our prototype for the admin area. That was a great learning experience, but now we want to see how we can implement this in our application now that we have both access control and the ability to create new events working.
Last time we started building the UI, we actually ended up dealing with using slugs in the URL as organisation ID, so let's give the UI another try!
You can't have much of an event ticketing and registration app without some sort of representation of an `Event` so let's dive into it and sort out the UI we'll need to make that happen.
You can't have much of an event ticketing and registration app without some sort of representation of an `Event` so let's dive into it and get that created. At the end of last week's stream we talked about the tradeoffs we'll be making by starting with the simplest implementation of this, so today we can dive straight in.
Let's finally get some access control implemented and then take a look at getting our `Event` model implemented so we can finally see a list of them on the `#index` action.
We started off, a few weeks ago, looking to add basic authorisation to our app with the Pundit gem, immediately realising we need to define what an "admin" is in. As we knew that we are going to group events by organisation, we decided to implement Organisation and OrganisationMembership models.
After last week's connection shenanigans, let's see if we can actually get something done! š
On Friday's stream, we got a basic admin UI that would allow someone to create an event, is that enough to get us started on the coding side of things?
I made a start on this last week, where we looked at the admin top-level navigation and how that was handled in similar applications. This time I think we want to get the event navigation designed, again using Sketch symbols and see what we can learn along the way.
I said I would try and get a UI design stream running at some point and what better time than a random Saturday night? On the Sunday morning livestreams we've been looking at how we build our event group ticketing system, so let's take a look at designing the UI too!
Now that we have a prototype of buying tickets (sort of), let's get to the thing I wanted to focus on: group bookings.
Get the ticket buying prototype working end-to-end
Let's build out the ticket buying prototype!
Adding some models to our UI prototype
Building the admin UI of an events app
Let's build more admin UI
Making some modelling decisions in our Rails app
More prototyping an admin area of a Rails app.
Prototyping the admin area of a Rails app.
After a couple of weeks off while I was moving house, Sundae Club is back! š§ As I mentioned before the break, this week we're kicking off the new application and some changes in the content that this channel will be streaming.
Make YouTube thumbnails in Rails? (Yes, check the thumbnail of this vid!). After the huge success of getting our app to update YouTube last week, I'm interested to see if we could automate the process of creating the thumbnails in the first place.
Wrapping up our OAuth stuff. Nearly finished it!
Updating YouTube videos from the app. We got per-channel auth working last week via the YT gem, which was very exciting, and we're going to get that wired up so any changes in the Sundae Club app are reflected on YouTube.
Let's attempt more OAuth!. We got "app" permissions working via oAuth in a previous stream, but wouldn't it be cool if we could reflect changes in the Sundae Club app on either YouTube or Twitch?
Twitch Integration and Testing. After last week's issue with not being able to stream to Twitch while streaming about integrating Twitch (the irony!), things should be back up and running this week.
More Twitch Integration via API. We got a little stuck on oAuth last week, let's get stuck into making it work this week!
Let's integrate with Twitch via API. Having mentioned it in the intro to the stream each week, let's finally get Twitch integrated into the app.
Rails ViewComponent and Tailwind CSS. Once again carrying on from last week, we're sticking with Tailwind CSS, but with a look at how it works with ViewComponent in Turbo Frames and Turbo Streams.
More UI with Tailwind CSS. We're going to pick up where we left off last week and get straight back into learning more Tailwind CSS and using it to build out some more UI for the Sundae Club app.
Building our UI in Tailwind CSS. As I mentioned last week, we're not going to be looking at anything particularly Rails-specific this week, we're going to be trying to build our UI using Tailwind CSS.
ActionText, ActiveStorage and Stimulus.js. Following on from where we got to reading the stimulus.js docs last week, and wanting to allow people to create richer editing experiences for the video descriptions, we're going to look into ActionText
Diving into Stimulus.js in Ruby on Rails. We're going to dive into stimulus.js... somehow.
Let's get started with ActiveStorage. After last week's rousing success with Turbo Streams in Rails, I'm keen to dive into ActiveStorage, especially where things are up to with CDN support.
Let's try Turbo Streams again, we can do this!!. We got much further with ActionCable than I thought we would last week (my expectations were low after our first run at getting Turbo Streams working). With that rousing success, let's go back to Turbo Streams.
Implementing the Noticed gem (and maybe some ActionCable?). Last week we set up being able to Subscribe and Unsubscribe to channels in the app, so now we can start to look at how we can trigger events and how we can show them to users.
Implementing Subscriptions & Notifications. We made a start last week on looking at different gems for subscriptions and notifications for our Rails app and made the decision to implement our own subscriptions, but use a gem for the notificatio
Planning Channel Subscriptions. I'd love to get back to taking a look at Turbo Streams in Rails and I think the āSubscribe to this channelā behaviour could be a good way to get there - let's take a look!
Versioning Models in Rails. We got to the bottom of YouTube webhooks last week, but rather than building out a robust version of those, I thought it'd be good to round-off the planning that we'd done a few weeks ago of how we mi
Youtube Webhooks (Push Notifications) and Pubsubhubbub with Rails. After last weeks effort to get anything working at all (š), let's try and get the YouTube webhooks working in our app using Pusubhubbub and look at some of the limitations I found during my (very brie
Diving in to Turbo Streams in Rails ā”ļøšØ. We got some Turbo frames working Rails last week, which was really exciting!
Diving in to Hotwire for Rails - we're ready to go!. We did some planning and got everything ready last week, so let's take a look into using Hotwire to edit our video details once they've been retrieved from YouTube. As we're diving in from scratch, prepare to stare at documentation and undoubtedly get stuck during the stream - it's going to be thrilling!
Last week we looked more at our YouTube video importer and discussed some ways to make that a little more resilient. We're going to move on this week and take a look at how we might cater for users editing the video information in the app, when it might also be edited in YouTube - how could we keep the two in sync?
Let's finish creating a Site! (and also finish the YouTube importer). It was very exciting to get YouTube videos stored in the app last week and we left a few things unfinished as part of that work, so we'll go and do a quick tidy up. However I really want to get the end-to-end process of creating a `Site` finished so we'll look at doing that too.
Storing YouTube API data for Channels. A couple of weeks ago, we were able to use the YouTube API to show all the Sundae Club videos in our UI. Last week we stored the YouTube channel ID and asked the user for it when they signed up, we also set up Active Job in Rails.
Implementing Active Job in Rails, Saving YouTube Channel Data. Last week we got the YouTube API working and weāre able to show a list of YouTube videos for a channel. However weāre still retrieving those videos every time we load the page, we want to store them locally instead against each Channel, letās take a look at how we can approach that.
Let's start the YouTube API integration (maybe Twitch too!). Rather than spend more time on the UI stuff, I'd like to keep the weekly streams more about the Ruby on Rails side of things. Now that we have the outline of a user onboarding, I want to look at what it will take to integrate a YouTube and/or a Twitch channel via API.
Learning Figma - to design UI for Tailwind CSS. We now have our front-end technologies set up and we have some idea of how Tailwind CSS works, so we need a UI to build! Iāve been a long-time Sketch user, but I thought we could use Figma for this project - itās cross-platform and also means that I can share links to the UI in case anyone finds anything in them useful.
Front-end work (more Tailwind CSS), plus quick Devise testing issue. At the end of last week, we (sort-of) had Heroku and Github Actions working. During the week, I had the time to fix the issues, so I'll run through what was missing and then I want to take a look at the front-end again.
Let's look at Rails ViewComponent š. We mentioned ViewComponent on last week's stream as we started looking at the user interface in a bit more detail as we dove in a little deeper to Tailwind CSS.
Back to the front end (plus Github Action follow-up!). At the end of last week, we (sort-of) had Heroku and Github Actions working. During the week, I had the time to fix the issues, so I'll run through what was missing and then I want to take a look at the front-end again.
We're going to attempt to put the very basic site live. Yesterday's stream tidied the long-running git branch and showed that Github Actions should run the tests before a deploy, so this stream starts there.
Rebasing our huge work-in-progress git branch šŖ| Homework Edition. Over the last month or so, in Sundae Club streams we've just worked on the same git branch and randomly committed the work as āwork-in-progressā (WIP) commits. I keep saying we need to go and tidy it up and today's the day!
Tidying up our user onboarding. Last week, we technically got to the end of the user onboarding and were able to create the user, but we left a lot of things unfinished along the way, including some tests, user interface etc. This week we're going to dive straight back in to that and
Finishing our user onboarding. Last week we sketched out what it would look like to have a user sign up to the app. We took a look at how a couple of other sites do it and then we sketched out a rough plan of how we'd like ours to work. Here's a link to the jam board we made: https://jamboard.google.com/d/1jAGjcdtH3IjuYog-WBNvy006JI0btCf0cCDIQv23KLg/viewer
Let's do some design / planning!. We've got the basic building blocks from our first early streams: models, associations, user accounts, authorisations/permissions and the concept of an āadminā area. Let's take a look at how we're going to put them altogether.
Adding āuser permissionsā to an app. Last week, we added users to our app using Devise (we also looked at other options, check that out here: I think weāll do this in the same format as last week, weāll look at some options and then implement one of them.
Adding users (and hopefully permissions!) to a Rails app. Last week, we looked at how we might add an āadminā area to our app. That's great, but until now we haven't had users in the app so there's nobody we can make an admin.
Add āadminā functionality to a Rails app. Last week we added the ability to edit and update Channels in our app, along with a new attribute to a channel, allowing it to be suspended.
Adding Ruby on Rails controller actions, where do we let admins edit things + a Tailwind rabbit-hole. This week we went down a minor rabbit-hole with Tailwind CSS (totally my fault, I didn't research it enough and it's more different from the UI libraries I'm used to than I realised, I'll try and do some research during the week!).
There's no Sundae Club this Sunday as I'm away, so it's homework club instead on a Friday morning. Homework Edition covers extra tasks for the app outside the Sunday streams. This one is about rebasing the work-in-progress commits into a pull request.
Ruby on Rails Coding: Creating our initial models, associations and a front-end.. We got started last week by running `rails new` and now that we have an app, we're going to start looking at adding in our models, our associations and adding a front-end.
After taking a break from Ruby on Rails live-streaming for a few months, this time I'm streaming weekly on Sundae Club. Each week we'll be looking at questions from learners and how they can be applied to larger apps as you move beyond your initial Ruby on Rails work.