Posts

Showing posts from February, 2022

[ToDoList] Materialize V: Other Pages

Image
We have now made all of our Ruby action views look incredibly lovely and have the makings of a moderately sellable web application on our hands! All we have left to worry about are those pesky other views: home , about and help . Now, because we are almost a quarter of the way through the 2020s, gone are the days where we are expected to provide a home page for an application such as this. Even about and help pages are becoming significantly less common, as the average consumer seems to care little about who made the application they're using (that is, until something goes wrong and they'll want all of your personal information to contact you to fix it or punish you for not). With that in mind, you would be perfectly within your rights to simply do away with these views entirely and alter your Rails routes to point the root route at the todos#index view. However, because I am a child of the 1990s and like these touch
Post a Comment
Read more

[ToDoList] Materialize IV: Other Views

Image
With the last section being fairly intense, you'll be pleased to know (I hope) that the remaining todo views aren't nearly as complicated and have a bit more freedom with regards to creativity when building them. We'll spend some time sprucing up the index and show views to conform to our fancy new standard, and try to have a bit of fun with it. I Am The Table Show With the Flow     Starting with the index view, we'll naturally want to keep it fairly basic - showing the name and possibly the description, as well as the same [C]RUD actions we had already in our current index view. There are numerous options available to us to present these features: We could go mega-fancy and do a Kanban-esque board of cards , with their actions contained somewhere within. We could go ultra-contemporary and still use cards , but simply list each item. We could go sleek with all
Post a Comment
Read more

[ToDoList] Materialize III: Forms

Image
We've covered most of the basics of Materialize-ifying (don't know why I turned a verb into a verb, even if it is technically a noun in this instance) our app, but have so far neglected a fairly crucial aspect: forms . The form is naturally a very important element of a Rails (or, indeed, any data-driven) application, and it is therefore pretty important that we learn how to utilise Materialize to make them as nice as possible to use. As you can possibly tell already, they gave me a little bit of trouble. However I wouldn't be a very good unqualified instructor if I didn't cover them and so, through tears and cursing, the following section has been prepared to cover the adaption of the Rails form to work with Materialize, as well as: Buttons for links / forms Form text fields with character counters Display error messages in a card Display flash messages in a toast Because it will be the
Post a Comment
Read more

[ToDoList] Materialize II: Colour Variables & Icons

Image
So far in our journey with MaterializeCSS we have learned how to install the packages with Webpacker, set up our basic layout elements and initialise the JavaScript elements that the framework offers. This section will explain some of the more CSS-driven aspects of the framework, which we will improve what we have already done so far. Working with Variables An Iconic App A Side of Navigation     There may come a time when that default pink(ish) and blue colour scheme will get right on your nerves - it didn't take long for me! Let's do something about it and change the colour scheme of our site! To start with, head over to the Colour page of the Materialize site and pick which colours you would like to be your primary and secondary colours - for me it is the green darken-3 and teal lighten-1 respectively. Once you've picked them, head into your stylesheet and import the co
Post a Comment
Read more

Popular posts from this blog

New Rails Apps with Docker Compose

Image
Following on from the Docker & docker-compose guides, it is possible to use docker-compose to build a Rails application that uses a PostgreSQL database without even installing Ruby on your local machine by instead using containers ! This becomes a very useful option to have if you work from many different workstations and don't want to ensure they are all equipped with the correct Ruby and Rails dependencies, or if you wish to use a version of Ruby / Rails not supported by your operating system (for example, Ubuntu 20.04 only allows provides up to Ruby 2.7 in its apt cache). In fact, Rails 7 added native support for Docker, such that it generates almost all of the default files we need for us! This comes with its problems and, I won't lie, updating this post to work with Rails 7 (it was previously written for Rails 6) has been a colossal pain and features a bit of hackery. However it is ultimately a good thing, and having
Read more

[ToDoList] Basic Pages

Image
Well that was fun. However all we’ve really done is spooked someone called Bob, without actually creating anything remotely resembling a web application. Let’s rectify this and create some pages one would normally find on a website; a Home page and an About page. Home & Away About Helpful Links [Insert Beatles Reference]     Because we already learned a bit about MVC, we know that we will need a controller and at least one view to display these pages (we won’t need to worry about models until we’re handling real data). As before, we’ll need to add a route configuration so Rails knows where to go, too. Rails provides a fair bit of magic to streamline this process in the form of generators . However, because we’re learning, we’re going to do this manually for now and learn what this magic entails, so we can appreciate it more later. We already created a PagesController in the last sec
Read more

[ToDoList] Docker Compose

Image
We learned in the previous section how Docker is a fantastic tool with which to build and deploy applications, however has some inconveniences with developing these apps such as having to rebuild the image every time there is a code change as well as any development database entries being wiped. This section will offer some relief against these two issues by using Docker Compose to build our application and make live code changes, as well as using a separate container to host our development database in PostgreSQL - this will encompass three main tasks: Back up and edit the Dockerfile we made in the previous section so our image can be built. Create our docker-compose.yml in the app's root directory to create our web & postgresql database containers. Back up and edit some our app's configuration (namely the database.yml & Gemfile ) to use the new postgresql container . After all this, we can set about
Read more