DEV Community: Randy Steele

What is hotwire with RoR?

Randy Steele — Sat, 24 Apr 2021 16:38:53 +0000

Introduction

Earlier this year the creator of Ruby on Rails, David Heinemeier Hansson (aka DHH) spoke at a conference in Chicago and discussed a new framework he helped to created called "Hotwire". DHH stated that Hotwire is "an alternative approach to building modern web applications without using much JavaScript." Hotwire is described as "HTML over-the-wire" therefore it generates HTML instead of JSON and delivers it to the server.

Why Use Hotwire

I've been researching Hotwire lately and I asked myself this question: "Why use Hotwire instead of JavaScript or a JavaScript framework or library?" This is what I have determined.

It's a great option for full-stack development. I don't think it's any secret that a lot of programmers were using Rails as a backend only for an application. I think with the release of Hotwire, DHH is attempting to make Ruby on Rails once again, more relevant for full-stack web development.
Hotwire comes with something called Turbo. Turbo uses complementary techniques to dramatically reduce the amount of custom JavaScript that most web applications will need to write. Turbo makes links and forms submissions quicker by removing the need for full page reloads.
While Turbo handles at least 80% of the interactivity that would typically be handled by JavaScript, you may find yourself in a situation where you need a small amount of JavaScript code, in that case, Stimulus is available. Stimulus uses an HTML-centric approach to state and wiring.

So, how do I get Hotwire?

The first step I'd recommend is going to Hotwire For Rails On Github
Installation:

Add `hotwire-rails gem to your Gemfile.
Run bundle install
Run `hotwire:install Hotwire also has the following resources available: Hotwired Turbo Rails Hotwired Stimulus-rails

Final Thoughts

I think Hotwire is a good option for programmers that's don't necessarily love working with JavaScript. I think the folks that think Rails is "too slow" and "can't scale" may give Hotwire a shot and see what they think of it. I also like the fact that you can use a tiny bit of JavaScript when needed by way of Stimulus.

Have you used Hotwire with Rails? Let me know what you think!

Some CSS Basics

Randy Steele — Sat, 17 Apr 2021 16:08:31 +0000

Introduction

When I was first learning software engineering and programming one of the more difficult aspects for me to learn was CSS and styling the pages. I've recently been learning more in-depth CSS so I am going to share some of that with you here!

What is CSS

According to MDN CSS is defined as;

CCSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. The browser applies CSS-style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

Let's get Started

I have some basic data inside of a blog app that I will be manipulating in this post today. As of now, it looks like what you'd expect when you build a new app without styling. The stylesheet is linked and I'm ready to go! Let's start with something simple, I am going to tell my CSS file that I want the text of all my <th> tags to be green, simple enough right?

 th {    
    color: green;
 }

Cool so now instead of the typical text, I will have green text for <th> tags:

Alright, that looks good lets good. A commonly used property in CSS is flex let's take a look and see how that will change our page. When I add display: flex; to the above code, it moves my content so that it is directly under the title. While that may be great in some cases, not so much in this case so, I'll remove it. What else can we do? let's set a background color to our app.

 th {    
    color: green; 
    background-color: magenta;
 }

I refreshed the page and I'm only getting the magenta color in a small section behind the title and content why is that? If you remember, we are only styling the <th> tags right now so the stylings we apply are only going to apply to that element, not the entire app. Let's take a look at this so far:

 th {    
    color: green; 
    background-color: magenta;
    width: auto;
    height: auto;
    border: 100%, double, burlywood;
 }

The border property sets the width, style, and color of the border, you can also set these properties individually.

Styling the content of our blog posts

To get started here I added a class of content to the content on our show page. I have specified width, height, background-color, and a transition, that code looks like this so far:

 .content {
width: 500px;
height: 500px;
background-color:mediumslateblue;
transition: 1s;

}

I want to try to get the background color to change when I hover over the content of my blog post. In order to attempt this I'm going to add a new .content:hover and set the border-radius as well a the background-color I want to see when hovering.

.content:hover {
    background-color:turquoise; 
    border-radius: 50%;
}

Here is the moment of truth, if we hover over the content, do we get a background-color: turquoise? Let's take a look!

Yes! It works. Let's add a transform: rotate to the hover as well:

.content:hover {
    background-color:turquoise; 
    border-radius: 50%;
    transform: rotate(20deg);
}

Now when we hover what will happen?
So, now when we hover not only do we change the background-color but the content also rotates 20deg, cool!

Conclusion

CSS is how we manipulate the color, style, fonts, borders, etc. It's a very important aspect of web development and an area that I feel a lot of juniors struggle with. There are lots of resources online and courses (paid and free) you can find to help boost your skills in this area!

Resources

W3 Schhols
MDN
Hulya on Dev.to

What is Redux?

Randy Steele — Fri, 09 Apr 2021 20:37:31 +0000

What is Redux

Redux is a state management container for JavaScript Apps. This means that it can help you write apps that behave consistently. Redux can also run in different environments like client, server, and native.

Installation

redux.us.org recommends the redux toolkit to write Redux logic. The toolkit wraps around the Redux core and contains packages and functions that are essential for building a Redux app. See redux.us.org for more information on installing redux.

When to use Redux

If you have a small app and you don't have a lot of data that is changing then it probably doesn't make a lot of sense to use Redux in your app. On the contrary, if you do have a larger app with lots of changing or dynamic data then maybe that would be a good app to utilize Redux. Here are some instances it would make sense to use Redux.

If you have a large quantity of data that changes over time
If you want a 'single source of truth' for your state
If keeping your state in a top-level component is not sufficient
You need to see how the state is being updated over time
The logic to update the state is complex

If you are not sure if you should use redux or not, you should check out this blog post by Dan Abramov

Store setup

Here is a simple store setup:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Let's dissect this code a bit. First, we need to import { createStore } from 'redux' This gives us access to the createStore function and we pass our rootreducer to that function which returns a store object. We will also notice import { Provider } from 'react-redux' The <Provider> component makes the Redux store available to any nested components that may need access to the store. It's pretty typical for React apps that are using Redux to render the <Provider> component at the top level.

Redux Data Flow

When I was first learning how to implement Redux, this was one of the more confusing aspects of it. To understand and remember the data flow and how it works. Let's review it!

An action gets dispatched when a user interacts with your app
The reducer function is called with the current state and the dispatched action.
The store will notify the view by executing their callback functions
The view can retrieve an updated state and re-render In general, the Redux flow looks like this action -> reducer -> new state # Actions & Reducer Actions are the only source of information for the store. They are plain JavaScript objects and must have a type attribute. To make a change in the store you have to dispatch an action by using the store.dispatch() function. Here's an example action:

export function fetchDestinations() {
  return (dispatch) => {
   fetch("http://localhost:3000/api/v1/destinations")
    .then(response => response.json())
    .then(destinations => dispatch({
      type: 'FETCH_DESTINATIONS',
       payload: destinations
    }))
  }
}

You'll notice in this action we are calling type: 'FETCH_DESTINATIONS' This comes from our reducer. In my reducer I have

    switch(action.type){
    case 'FETCH_DESTINATIONS':
      return {action.payload}

So, our action dispatches the data to our reducer and then the reducer returns the new state. Here is a simple example of a reducer setup;

function counter(state, action) {
  if (typeof state === 'undefined') {
    state = 0 
  }

  if (action.type === 'INCREMENT') {
    return state + 1
  } else if (action.type === 'DECREMENT') {
    return state - 1
  } else {
    return state 
  }
}

Conclusion

In general, I think Redux is a great state management tool. At first, it can be a bit confusing but as with most things, the more you use it the easier it gets to understand. The official Rexux documentation has lots of great examples, tutorials, and best practices for beginners and can help you get set up fairly easily.

How I built my Portfolio site in Django. Part 2

Randy Steele — Fri, 02 Apr 2021 00:04:54 +0000

In my previous post, I talked about how I created my Django portfolio site, when I left off we had created jobs and a blog and we were able to create a new Blog and Job objects. The next step in the process is setting up the views and bootstrap for styling.

The View(s)

We will need to modify our blog/views.py and jobs/views.py The views.py file sets the urlpatterns for our project. There are some imports that are automatic with Django and you will see them here;

from django.contrib import admin
from django.urls import path
from django.conf import settings 
from django.conf.urls.static import static

In order to set up the urlpatterns for your project, you will need to add to these imports. I want to have access to my Blog as well as Jobs views in this file so my imports now look like this;
jobs/views.py

from django.contrib import admin
from django.urls import path
from django.conf import settings 
from django.conf.urls.static import static 
import jobs.views
import blog.views 
from django.urls import include

blog/views.py

from django.shortcuts import render, get_object_or_404
# import requests
from .models import Blog

# Create your views here.

def allblogs(request):
    blogs = Blog.objects
    return render(request, 'blog/allblogs.html', {'blogs':blogs})


def detail(request, blog_id):
  detailblog =  get_object_or_404(Blog, pk=blog_id)
  return render(request, 'blog/detail.html', {'blog':detailblog})

Adding Bootstrap

Now that we have our views setup let's add bootstrap. I decided to go with the Album Example feel free to choose whichever one appeals to you. In the jobs directory, I created a templates/jobs folder, and inside that folder and new file home.html
This is the file that my visitors will see when they first visit my website and it's where we will add some styling to our project so that it looks super nice in the browser. One of the important things we need to do in this file is to load our static files which you can do like this {% load static %} I also added a title tag, currently my HTML file looks like this;

<!doctype html>
<html lang="en">
{% load static %}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.80.0">
    <title>Randy Steele</title>

Header

Next, I wanted to modify the header so that it applies to me and has links to my LinkedIn, Twitter, Blog and Resume.

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="{%url 'home' %}">Randy Steele</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav ms-auto">
                        <a class="nav-link" aria-current="page" href="https://twitter.com/RandySt02617967">Twitter</a>
                        <a class="nav-link" href="https://linkedin.com/in/randysteele">LinkedIn</a>
                        <a class="nav-link" href="/static/Randy%20Steele%20Resume.pdf">Resume</a>
                        <a class="nav-link" href="https://dev.to/steelerx155">Blog</a>  
                    </div>
                </div>
            </div>
        </nav>
    </header>

Contact info

Now, within the <main> I added a photo of myself, a super short description and a link to email me!

    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="{%url 'home' %}">Randy Steele</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav ms-auto">
                        <a class="nav-link" aria-current="page" href="https://twitter.com/RandySt02617967">Twitter</a>
                        <a class="nav-link" href="https://linkedin.com/in/randysteele">LinkedIn</a>
                        <a class="nav-link" href="/static/Randy%20Steele%20Resume.pdf">Resume</a>
                        <a class="nav-link" href="https://dev.to/steelerx155">Blog</a>  
                    </div>
                </div>
            </div>
        </nav>
    </header>

All jobs

Now, I want everyone who visits my portfolio site to be able to see a list of the jobs (aka projects) I have built and worked on.

              <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                  {% for job in jobs.all %}
                <div class="col">
                  <div class="card shadow-sm">
                    <img class="bd-placeholder-img card-img-top" src="{{job.image.url}}" width="100%" height="225" />
                    <div class="card-body">
                      <p class="card-text">{{job.summary}}</p>
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                          <a href="{{job.github_url}}" type="button" class="btn btn-sm btn-outline-secondary">Github</a>
                          <a href="{{job.heroku_url}}" type= "button" class="btn btn-sm btn-outline-secondary">Heroku</a>
                        </div>
                      </div>
                    </div>                   
                  </div>
                </div>
                {% endfor %}
                </div>
            </div>
        </div>

Footer

Lastly, a super simple <footer>

    <footer class="text-muted py-5">
        <div class="container text-center"><br />
            <p>©️ Randy Steele {% now "Y" %}</p>
        </div>
    </footer>

See the full HTML File Here

For more help with styling, checkout getbootstrap

How I built my Portfolio site in Django. Part 1

Randy Steele — Sat, 27 Mar 2021 15:24:41 +0000

I've been needing to create a new portfolio site and I've also been wanting to learn some new technologies so I thought this was a great opportunity to kill two birds with one stone. In this post, I will describe how I created my new portfolio site with Django.

Step one - Plan

As with any project, I think it's best to do a sketch to map out what you want the project to accomplish and how you'd like for it to look. For me, I knew I wanted a home page with a photo and description of myself along with some projects I have worked on. I also wanted a contact me form and a page to show my blog posts.

Step two - Create the project

There is a pretty simple command for you to run once you have installed Django on your system. django-admin startproject mysite obviously you want to change mysite to the name of your project for me that was portfolio.

Step three - Apps

When you create a Django project you will have the project directory but within your project, you will likely have Apps these are the different sections of your website, for example, my portfolio will have a blog app and a jobs app inside of the main Django project. Essentially apps are the different sections of your project. I added two apps to my project. To create a new app you can run this command and change the blog to whatever the name of the app you are creating. python manage.py startapp blog and python manage.py startapp jobs

Step four - Models

When you created these apps you will see two new folders in your project. A blog folder and a jobs folder. Within those folders, you will find a models.py file. This is where we will create and define our models with the attributes we want them to have. This is what my job model looks like.

class Job(models.Model):
    image = models.ImageField(upload_to='images/')
    summary = models.CharField(max_length=1000)
    heroku_url = models.URLField(max_length=100, null=True)
    github_url = models.URLField(max_length=100, null=True)

Blog model.

class Blog(models.Model):
    title = models.CharField(max_length=255)
    pub_date = models.DateTimeField()
    content = models.TextField()
    image = models.ImageField(upload_to='images/')

Step five - Migrations & Settings
Now that we have made changes to our models we need to let python know of these changes by migrating them to the database. To accomplish this we will run a few commands but first, we need to update our settings.py file in our portfolio folder. This is another step that is required to let Django know we made changes to our app that we want to apply. So navigate to that file and add the following code into the INSTALLED_APPS.

'jobs.apps.JobsConfig'
'blog.apps.BlogConfig'

While we are in the settings file this might be a good time to set up a path for our media files, this can be accomplished with the following MEDIA_ROOT = os.path.join(BASE_DIR, 'media') and set the URL MEDIA_URL = '/media/' Now we are finally ready to migrate, do that by running the following commands python3 manage.py migrate and python3 manage.py makemigrations At this point you may notice an error that states we don't have Pillow installed. Pillow is required when using the ImageField so you will need to follow the instructions to install pillow which you can do by running pip3 install Pillow

Step six - Admin
Let's check out the admin interface but first, we need to create a superuser, this is basically a user that has full access to the admin portal for your project. To create a superuser go back to your terminal and run python3 manage.py createsuperuser and follow the instructions to create the username, email address, and password. Now let's start our server python3 manage.py runserver and navigate to /admin page and login with the superuser info you just created. There's not a whole lot of info on this page yet because we haven't added our apps to the admin. Go back to your project and inside the blog and jobs folder add this code below to your admin.py file.
Jobs

from .models import Job

admin.site.register(Job)

Blog

from .models import Blog


admin.site.register(Blog)

Now Once you load the admin interface you should see a page that looks something like this.

Now you are able to create a new blog and new jobs with the attributes you set in your models.

I plan to add to this series next week where we will cover setting up the home page, adding bootstrap to our project, and showing all jobs and blog. Until then, check out the Django Project website for additional resources:

Closures In JS

Randy Steele — Sat, 20 Mar 2021 15:53:40 +0000

I started learning Javascript about a year ago while I was attending Flatiron School. JS in general was a bit weird at first coming from a Ruby/Ruby on Rails background. One of the most challenging things for me to grasp in JS was closures.

What is a closure

First, let's talk a little bit about what a closure is in JS. Here is how (MDN)(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) defines a closure.

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Scope

To understand how closures work, it's a good idea to make sure you have a good understanding of the scope in JS. This defines what variables are available in what context. Global variables are available anywhere in the code and are created outside of any functions, typically they are created at the beginning of the code. Local variables (local scope) are created within a function and are only available within that function.

Syntax

A closure is basically a nested function, you will have an inner function and an outer function. In the example below updateClicks is the outer function and reportClicks is an inner function. What this means is that reportClicks has access to any variables that are defined in the updateClicks outer function as well as any functions that are defined within its own scope. If you notice here we are not calling reportClicks() we are simply just returning it, therefore we have access to it later.

function updateClicks() {
  let clicks = {};
  function reportClicks(item) {
    clicks[item] = clicks[item] + 1 || 1;  
    console.log(item, clicks);
  }
  return reportClicks();

}

Variables within closures

Variables that are defined within closures are just like any other variables which means they can be updated and changed. Let's take a look at another example. In the below example we are using an in/else statement to determine what meal will return based the the criteria met.

function hungry(meal) {
    function whatsForDinner() { // whatsForDinner() is an inner function, a closure
      if (!meal) { // whatsForDinner() uses argument provided to the parent function 
        console.log('Is it time to eat?');
      } else if (meal === 'Port Chops') {
        console.log('These are my favorite');
      } else {
        console.log(`I'm eating ${meal} for dinner.`);
      }
    }

    function digest() { // digest() is an inner function, a closure
      meal = undefined; // digest() uses argument provided to the parent function 
    }

    return {
      whatsForDinner,
      digest
    };
  }

Summary

This is a little bit about how nested functions or closures work in JS. Closures can definitely be tricky to grasp, especially if you aren't well versed in JS. Practice with them and just like anything else, you'll be able to work with them and implement them in your apps!

Resources

MDN
ECMA-262-3 in detail. Chapter 6. Closures

My Introduction to Django

Randy Steele — Fri, 12 Mar 2021 21:42:53 +0000

My Introduction to Django

I have been itching to learn something new lately so I decided to give Django a try. I have heard a lot about Python and Django but I hadn't yet delved into it. I will show you how I created a simple Django wordcount app.

First things first.

First, you need to see if you have Django installed on your computer. To do this I just decided to run the command to install Django which is pip3 install django and I received
this: Requirement already satisfied: django==2.0.2 in /usr/local/lib/python3.9/site-packages (2.0.2) so it looks like I already have it installed, if you don't have it installed, this command will get it installed for you.

Creating a Django project

Django comes with some commands that simplify things for you. Similar to how you can run rails new myapp with Django you can run django-admin startproject myapp to see the other commands Django comes with just run django-admin help in your terminal. When you run this command you will get a file structure that looks a little like this

Starting the Django server

To verify everything went well when you created your new project, you can run the server by running python3 manage.py runserver you should get a response like this

March 12, 2021 - 16:58:53
Django version 2.0.2, using settings 'wordcount.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

If you have ever run a server before this should look familiar, just go to this URL, and if you see the Django homepage you are good to go!

Templates

Here's how Django defines templates:

A template contains the static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted.

Create a new folder in the top level of your directory named templates and within that folder create a file named home.html within that file <h1>HELLO</h1> Once you have done that you will need to create another file named views.py
in this file, we need to tell Django what template we want to render. That code should look something like this:

from django.http import HttpResponse 
from django.shortcuts import render 

def homepage(request):
    return render(request, 'home.html')

This tells Django that when we visit the homepage we should render the home.html template. Next, navigate to settings.py and find TEMPLATES and then DIRS and add 'templates' that should look like this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Finally, navigate to urls.py and urlpatterns and modify it like so:

urlpatterns = [
    path('', views.homepage),
]

For those of you that are familiar with rails, this is kind of like setting up your routes.rb file. Now let's fire up the server python3 manage.py runserver and you should see your home.html file rendered.

My App

The app I built is a wordcount app. So, in my home.html I have built out a form with a button that will fire the event to count the words in a text box. So, in my home.html I have build the following form:

<form action="{%url 'count' %}">
    <textarea cols="40" rows="5" name="fulltext"></textarea><br><br>
    <input type='submit' value="Count!"/>
</form>

I then created a count.html file in the templates directory that will be responsible for rendering the HTML on the count page. Perhaps first we should navigate to our views.py file and configure the count view. I will create a new view called count and in that view, I will grab the value of fulltext which is the name of the Textarea field. Next, in order to count each word in the text area box we will split the fulltext and add that to our return.

def count(request):
    fulltext = request.GET['fulltext']
    wordlist = fulltext.split()
    return render (request, 'count.html', {'fulltext':fulltext, 'count':len(wordlist)})

Conclusion

That's it, you should now have a working Django wordcount app. I come from a Ruby background and I can see some similarities between Python/Django and Ruby/Rails. Some examples are the code in views.py looks a lot like a Ruby method without the end the urls.py is similar to config/routes.rb and of course the html files are similar to the views in Rails. Overall I think Django has been pretty simple to get started with and I could definitely see myself using it more often.

Resources

Learn more about Django here and go build something fun!
Feel free to check out the repo here

Using Devise for User Auth

Randy Steele — Thu, 04 Mar 2021 04:23:36 +0000

I recently had my first real experience with Devise and I wanted to review what I did and how here!

What is Devise?

First, let's talk a little bit about Devise what it is and what it can do for you!

Devise is a flexible authentication solution for Rails based on Warden. It:

Is Rack based;
Is a complete MVC solution based on Rails engines;
Allows you to have multiple models signed in at the same time;
Is based on a modularity concept: use only what you really need.

Devise is comprised of 10 modules, you can view them Here.

Step one - Installing Devise

To install Devise, similar to other Ruby gems you can add gem 'devise' to your gemfile, then run bundle install

Step two - Run the Generator

Next, you'll need to run the generator like so: rails generate devise:install Once you have run the generator you will see a set of instructions in your console. In those instructions you will see that you need to setup the default URL for Devise mailer. Here's an example of what I used and you can also find this example within the instructions or Here
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } The generator will install an initializer with all of that describes all of Devises' configuration options. It is highly recommended that you review this. You can find it within your app at app/config/devise.rb

Step three - Add Devise to your models

Now you can add Devise to the models of your choice, to do this run the following in your terminal and replace MODEL with the name of your model. rails generate devise MODEL There are additional configurations options you can add to your models, see the app/config/devise.rb file to learn more. Once you have configured the options you can then run rails db:migrate to create the migration. Devise comes with some helpers such as authenticate if you have a User model and you want to authenticate the user prior to processing any actions you can add this line of code at the top of your controller before_action :authenticate_user! (This is assuming your model is User) Here are a few other helpers associated with Devise.

To verify if a user is signed in, use the following helper:

user_signed_in?

For the current signed-in user, this helper is available:

current_user

You can access the session for this scope:

user_session

Step four - Assigning a root path

Devise expects your to have a root path assigned in our app. Navigate to app/config/routes.rb and assign a root path like so, root to: 'home#index'

Step five - Configuring Views

To add Devise to your views run rails generate devise:views I recommend checking out the documentation to see how you can customize your views when/if needed.

Step six - Configuring Controllers

Similar to configuring views, you can also configure your controllers, again it's a good idea to check the documentations to see how to customize your controllers with Devise. rails generate devise:controllers [scope]
Note: You will also need to have your controllers inherit from < Devise::[controllername] instead of < ApplicationController Example: If I have a Registrations controller it would look like this

class RegistrationsController < Devise::RegistrationsController
end

Step seven - Configuring Routes

Devise ships with default routes, if you need to customize them you can do that by using the devise_for method. See the example below

devise_for :users, path: 'auth', path_names: { sign_in: 'login', sign_out: 'logout', password: 'secret', confirmation: 'verification', unlock: 'unblock', registration: 'register', sign_up: 'cmon_let_me_in' }

There are many customizations you can make with Devise but this guide should help you get started if you're unfamiliar with it. I definitely recommend reviewing the gem documentation to learn more and see what all the customizations are!

Using Rails as an API Only

Randy Steele — Sat, 27 Feb 2021 16:25:37 +0000

We all know we can configure Ruby on Rails to be used as a backend API only but what is actually different in your project when you use the --api flag as oppose to the normal rails new. Let's take a look!

First, using the API flag creates your app with less middleware than when you create your app with rails new without the API flag. Mainly what this means is that it won't come with the middleware that is used for frontend applications since this is a backend API only there's no need for that. Secondly, your api's ApplicationController will inherit from ActionController::API instead of ActionController::Base this also assists with removing any ActionController functions that revolve around the frontend of the app. The third item that is different is that it configures your generators to skip the generation of views, helpers and assets when creating a new resource.

What if you forgot to pass the --api flag when you were creating your rails new app? Rails has a fix for that also. Just go to your config/application.rb file and find where the Application class is defined and simply add config.api_only = true you will also need to open up config/environments/development.rb and set config.debug_exception_response_format this configures the format used when errors occur in development mode. The next and final step to transfer your rails app from a full rails app to an API is to open up your app/controllers/application_controller.rb and change

class ApplicationController < ActionController::Base
end

to:

class ApplicationController < ActionController::API
end

There are a ton of other flags you can pass to your rails new app. To view them you can run rails new --help in your terminal to view the flags and a short description of what the flag will do for you. Here's a snapshot of what that looks like in rails 6.1.3

Usage:
  rails new APP_PATH [options]

Options:
      [--skip-namespace], [--no-skip-namespace]              # Skip namespace (affects only isolated engines)
      [--skip-collision-check], [--no-skip-collision-check]  # Skip collision check
  -r, [--ruby=PATH]                                          # Path to the Ruby binary of your choice
                                                             # Default: /Users/randysteele/.rvm/rubies/ruby-2.6.1/bin/ruby
  -m, [--template=TEMPLATE]                                  # Path to some application template (can be a filesystem path or URL)
  -d, [--database=DATABASE]                                  # Preconfigure for selected database (options: mysql/postgresql/sqlite3/oracle/sqlserver/jdbcmysql/jdbcsqlite3/jdbcpostgresql/jdbc)
                                                             # Default: sqlite3
      [--skip-gemfile], [--no-skip-gemfile]                  # Don't create a Gemfile
  -G, [--skip-git], [--no-skip-git]                          # Skip .gitignore file
      [--skip-keeps], [--no-skip-keeps]                      # Skip source control .keep files
  -M, [--skip-action-mailer], [--no-skip-action-mailer]      # Skip Action Mailer files
      [--skip-action-mailbox], [--no-skip-action-mailbox]    # Skip Action Mailbox gem
      [--skip-action-text], [--no-skip-action-text]          # Skip Action Text gem
  -O, [--skip-active-record], [--no-skip-active-record]      # Skip Active Record files
      [--skip-active-job], [--no-skip-active-job]            # Skip Active Job
      [--skip-active-storage], [--no-skip-active-storage]    # Skip Active Storage files
  -P, [--skip-puma], [--no-skip-puma]                        # Skip Puma related files
  -C, [--skip-action-cable], [--no-skip-action-cable]        # Skip Action Cable files
  -S, [--skip-sprockets], [--no-skip-sprockets]              # Skip Sprockets files
      [--skip-spring], [--no-skip-spring]                    # Don't install Spring application preloader
      [--skip-listen], [--no-skip-listen]                    # Don't generate configuration that depends on the listen gem
  -J, [--skip-javascript], [--no-skip-javascript]            # Skip JavaScript files
      [--skip-turbolinks], [--no-skip-turbolinks]            # Skip turbolinks gem
      [--skip-jbuilder], [--no-skip-jbuilder]                # Skip jbuilder gem
  -T, [--skip-test], [--no-skip-test]                        # Skip test files
      [--skip-system-test], [--no-skip-system-test]          # Skip system test files
      [--skip-bootsnap], [--no-skip-bootsnap]                # Skip bootsnap gem
      [--dev], [--no-dev]                                    # Set up the application with Gemfile pointing to your Rails checkout
      [--edge], [--no-edge]                                  # Set up the application with Gemfile pointing to Rails repository
      [--master], [--no-master]                              # Set up the application with Gemfile pointing to Rails repository main branch
      [--rc=RC]                                              # Path to file containing extra configuration options for rails command
      [--no-rc], [--no-no-rc]                                # Skip loading of extra configuration options from .railsrc file
      [--api], [--no-api]                                    # Preconfigure smaller stack for API only apps
      [--minimal], [--no-minimal]                            # Preconfigure a minimal rails app
  -B, [--skip-bundle], [--no-skip-bundle]                    # Don't run bundle install
  --webpacker, [--webpack=WEBPACK]                           # Preconfigure Webpack with a particular framework (options: react, vue, angular, elm, stimulus)
      [--skip-webpack-install], [--no-skip-webpack-install]  # Don't run Webpack install

Runtime options:
  -f, [--force]                    # Overwrite files that already exist
  -p, [--pretend], [--no-pretend]  # Run but do not make any changes
  -q, [--quiet], [--no-quiet]      # Suppress status output
  -s, [--skip], [--no-skip]        # Skip files that already exist

Rails options:
  -h, [--help], [--no-help]        # Show this help message and quit
  -v, [--version], [--no-version]  # Show Rails version number and quit

Description:
    The 'rails new' command creates a new Rails application with a default
    directory structure and configuration at the path you specify.

    You can specify extra command-line arguments to be used every time
    'rails new' runs in the .railsrc configuration file in your home directory,
    or in $XDG_CONFIG_HOME/rails/railsrc if XDG_CONFIG_HOME is set.

    Note that the arguments specified in the .railsrc file don't affect the
    defaults values shown above in this help message.

Example:
    rails new ~/Code/Ruby/weblog

    This generates a skeletal Rails installation in ~/Code/Ruby/weblog.

You can use these flags to customize your rails app to you liking and needs for your particular app. Checkout these resources for more info:
Rail new help output
Rails-api
Guides

Ruby Class vs Object

Randy Steele — Mon, 22 Feb 2021 17:56:27 +0000

I once was asked in an interview what the difference between a class and an object is and of course, I froze! So, I wanted to talk about it a little bit.

A class describes the contents of the objects that belong to it. I can define a class like this

class Blog
end

Once a class is created you can create a new object that will belong to the Blog class.

Objects can be strings, integers, symbols etc. Every object has a class and classes define objects. I can create an object like this

myblog = Blog.new

So basically the class is like the blueprint. I can have a blog class and it will have properties or attributes such as content and title, and if I created an object from the Blog class called myblog then that object would have a content title and attributes.

I hope this helps!

Active Record Associations in Rails

Randy Steele — Sat, 20 Feb 2021 20:24:22 +0000

Active Record is a Object Relational Mapping System. When thinking of the MVC design model it is the 'M' (Model) and it represents the data and logic. Active Record is very powerful but sometimes it can get tricky and confusing. I'm going to try to help with some of the confusion of Active Record Associations in rails.

First let's talk about what Active Record associations are implemented in rails. Currently, rails supports six types of associations. belongs_to has_one has_many has_many :through has_one :through has_and_belongs_to_many

The first couple of these are pretty easy to understand. belongs_to means that resource a belongs to resource b. An example of this is, if I had a music app, let's says a youtube like application. I have a track resource and a genre resource, My track would belongs_to the genre

Here's how I would set up that in my rails app.

class Track < ApplicationRecord
    belongs_to :genre 
end

class Genre < ApplicationRecord
    has_many :tracks
end

So, now my app has a Genre resource that has_many :tracks and a Track resource that belongs_to a genre

That's all great and all but what does this really mean and why does it matter? Let's check that out! I already have my seeds.rb file set up so if I run rake db:seed (make sure you don't have any pending migrations) and rails c to go into the console. I can check this out. Now that I'm in the console I can run Track.all and you will see that I have a genre_id associated with the Track automatically.

=> #<ActiveRecord::Relation [#<Track id: 1, title: "First Track", artist: "Randy", year: "2021", created_at: "2021-02-20 20:09:45.283145000 +0000", updated_at: "2021-02-20 20:09:45.283145000 +0000", genre_id: 1>]>

Now if I want to check what the genre id is for track#1 I can

2.6.1 :004 > Track.first.genre_id
  Track Load (0.4ms)  SELECT "tracks".* FROM "tracks" ORDER BY "tracks"."id" ASC LIMIT $1  [["LIMIT", 1]]
 => 1

But that's not all, I can also get all the tracks associated with a particular Genre like so:

2.6.1 :006 > Genre.first.tracks
  Genre Load (0.3ms)  SELECT "genres".* FROM "genres" ORDER BY "genres"."id" ASC LIMIT $1  [["LIMIT", 1]]
  Track Load (0.2ms)  SELECT "tracks".* FROM "tracks" WHERE "tracks"."genre_id" = $1 /* loading for inspect */ LIMIT $2  [["genre_id", 1], ["LIMIT", 11]]
 => #<ActiveRecord::Associations::CollectionProxy [#<Track id: 1, title: "First Track", artist: "Randy", year: "2021", created_at: "2021-02-20 20:09:45.283145000 +0000", updated_at: "2021-02-20 20:09:45.283145000 +0000", genre_id: 1>]> 
2.6.1 :007 >

This is all made possible because we set up our Active Record associations within each of our models.

This will be more important and useful once we get our app built out and we add more and more Tracks and Genres. Next week I will dive into the has_many_through association, which for me was one of the more difficult associations to process.

Here's a couple of resources if you need some additional help or just want to learn more:
Rails Guides
Rubynnrails.org

React Styled Components

Randy Steele — Sat, 13 Feb 2021 19:02:14 +0000

I have realized over the past few months that css is not necessarily my strength so after completing some projects they weren't looking the greatest style wise. When styling my react components I found a tool called "Styled Components" and I'm going to show you how I used that to make my project look a little better in the browser.

First off, what is Styled Components? Here's a bit of info from their website.

styled-components utilizes tagged template literals to style your components. It removes the mapping between components and styles. This means that when you're defining your styles, you're actually creating a normal React component, that has your styles attached to it.
Side note; they spelled 'utilises' wrong on their website but hey, I'm not here to judge.

To get started you want to install styled components via npm or whatever package manager you prefer. npm install --save styled-components

Alright, now that we have it installed we are ready to roll! The next step for me was to create a styledComponents.js folder and then Button.js file. Inside of my Button.js file I added the following code`` import styled from 'styled-components';

export default styled.button
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
&:hover{
background: blue }
;

hmmm, I just tried to start my server but I'm getting this error Local package.json exists, but node_modules missing, did you mean to install? So to fix this I just need to run npm install before running npm start

Oops, I'm getting a CORS error now, please hold while I investigate.

The repo I'm using for this tutorial was a prior project of mien that I re-cloned to fiddle with. It turns out I changed the url's but on one of them I used https://localhost instead of http://localhost so that was causing my issue here.

Okay, let move on. I now have a button that looks like this instead of the boring plain non-styled button.

Cool, we now have a decently styled button. Let's see what else we can improve here. Next, I think I will create a new file within the styledComponents.js folders and call it H2.js and I will add the following code;

import styled from "styled-components";

export default styled.h2
color: purple; font-size: 3.5em; text-align: center;;

Now if I import this new file in all of the other files I want to use it in, I can have all of the content in my h2 tags look like this

Now let's try something pretty neat with styled components. I'm going to try to implement a rotate function so that my fishing lake list: will rotate constantly. My first step is to create a Rotate.js file within the styledComponents.js folder. Note: When I was first learning how to implement this the example on their website didn't work great for me but I will show you how I managed to implement this in my project. Inside this new file I will import styled, { keyframes } from "styled-components" then I'll add the following code to the file.

Now if I go to the file I want to have rotate I can just wrap it in <Rotate> </Rotate> Let's see if it works. It works! Now my "fishing destination list" is now rotating/spinning constantly!

There we go, that should be enough to get your started on Styled Components with React! I hope you enjoyed this tutorial.

What is your favorite styling tool to use with React?