DEV Community: Josiah

Active Storage. Storing Files With a Rails API

Josiah — Sat, 01 Apr 2023 18:57:34 +0000

Are you in the quite specific scenario of wanting to upload photos to a rails backend with a react front end but don't know how? I've got you covered with a step by step guide on working with active storage to store your audio, video, and photo files.

Let me just start this by saying that this tutorial may not cover complete best practice as I have been crunched on time and needed the quickest solutions to my problem. This blog is meant to help those of us who are newer to the world of code. With that out of the way, let's get started.

Firstly, I'm going to be using a rails api with a postgresql database and a react front end. I'll do this with the command
rails new project_name --database=postgresql --api

From inside the directory of your new project you can run your vite, create-react-app, or whatever other command you will be using to build your client side. Once your API has been built along with your client side starter, we can move on.

Now, you will want to ensure you have all your gems installed. First, uncomment the rack-cors gem, we'll get to why this is necessary later. Next we will need a gem that is not automatically given to us by ruby in newer versions, this is called active model serializers, be sure to add it to your gem file.

gem "rack-cors"
gem "active_model_serializers", "~> 0.10.13"

Then run bundle install to ensure you have your gems installed. Make sure you have done this before you start your migrations or rails won't generate the serializer for each table you make(we need those).

From here you are going to want to create your database with rails db:create

Then install the rails storage method active storage. This can be done by running the command rails active_storage:install

This will add two migrations to your table. Now is where you would add the rest of your project tables, in this example case, a table for my user that will later have a profile photo. This table will have a name for the user to which we will add a picture later. I'll add this table to my database with the command rails g scaffold User name. From here we are good to migrate with. rails db:migrate.

Once you have migrated your tables here is where we will want to jump into the model(app/models/user.rb) for our user table and we will want to add the has_one_attached macro given to us by active storage.

class User < ApplicationRecord

   has_one_attached :image

   end

In this scenario, image can be named whatever you would like it to be.

Next, we will hop over to our serializer for our user table(app/serializers/user_serializer.rb) and add our image attributes that we want in our table. The first step to this is including our rails app route url helper. This will help generate a url that links to our image. The first step is done like so

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id, :name

end

This should automatically generate with the attributes you created when you started. Next we will want to define the route to the image, this can be done by creating a method for defining the file you want to return and the method name should match the name given when we defined the has_one_attached macro. After this method has been defined, we add the method name as an attribute.

class UserSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers
  attributes :id, :name, :image

  def image
  rails_blob_path(object.image, only_path: true) if object.image.attached?
  end
end

Just a few more steps before we move to front end. We need to change the params.permit in our user controller so head on over to app/controllers/user_controller and from there find the user_params method. That should look something like

def user_params
      params.require(:user).permit(:name)
    end

What we need to do is add the image attribute that we added up above to our params like so...

def user_params
      params.require(:user).permit(:name, :image)
    end

Let's finish up the work on the backend by enabling cors. We can do this by going to the config/initializers/cors.rb file. That file should look something like this...

# config/initializers/cors.rb
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

# Rails.application.config.middleware.insert_before 0, Rack::Cors do
#   allow do
#     origins 'example.com'
#
#     resource '*',
#       headers: :any,
#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
#   end
# end

In that file, you will want to uncomment the 7th line(the one that starts with Rails.application) all the way down to the bottom of the file. Then you will want to change the 10th line. In the quotes where it says 'example.com', you will want to put your domain, commonly 'localhost:3000', alternatively, you can put a *, but this is not recommended. The file should look something like this

# config/initializers/cors.rb
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
   allow do
     origins 'example.com'

     resource '*',
       headers: :any,
       methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

After all of that, we have finished the backend configuration! Let's move to React now.

For react, we will need to create our form to input our necessary fields. This can be done by binding the FormData constructor to the form element or it can be done using state. We only have a couple necessary elements so I'll go that route here. We'll first build our states, then build our return statement where we set our states. We'll also add an onSubmit to the form with a function that we'll build later.

const [name, setName]=useState(null)
const [image, setImage]=useState(null)

return( 
    <form onSubmit={handleSubmit}>
      <input type="text" 
      onChange={(e)=>setName(e.target.value)}/>
      <input type="file" 
      onChange={(e)=>setImage(e.target.files[0])}/>
    </form>
)

Next lets build that handleSubmit function. To submit forms with active storage, we'll need a JavaScript constructor called FormData. FormData is required for sending files from a form. To do this we must first declare the constructor as a constant that we can call whatever we want, I'll call it formData. We can then append the necessary items to this FormData constructor. This append statement takes two arguments, the first being the key in the object you are wanting to send, and the second, the value you want to send. We can add this to a submit event and test what it outputs.

function handleSubmit(){
const formData = new FormData()
formData.append("name", name)
formData.append("image", image)
}

After appending the necessary data to the form, we'll need to send our data to the backend. We'll build our post statement with formData as our body.

function handleSubmit(){
const formData = new FormData()
formData.append("name", name)
formData.append("image", image)

fetch("api/users", {
method: "POST",
body: formData
}).then({/*do something with your data here*/})
}

There you have it, active record used simply with react! Leave any improvements or comments below so we can all program better!

Coding Tips for the Modern World

Josiah — Tue, 14 Mar 2023 04:07:02 +0000

Despite the challenges and frustrations that come with navigating the world of programming, it's important to recognize that this emotional roller-coaster is a normal part of the development process. In fact, a developer's approach and resilience when it comes to focus, productivity, and error handling can determine their level of success in the field. So, how can developers navigate these unexpected twists and turns? Let's take a closer look.

Play Some Foosball

As a developer, it's essential to recognize the importance of taking a break when the pressure and frustration of coding becomes overwhelming. By giving yourself permission to step away from your work, you allow yourself to gain a fresh perspective on the task at hand. This break doesn't need to be an extended period; it can be as simple as getting up to refill your water or taking a short walk. In my experience, engaging in a quick brain game can help me take a breather and shift my mindset. By taking a step back from nitpicking at endless code, you may find an alternate approach or identify mistakes that you were previously overlooking. The length and frequency of breaks depend on the individual's preference and work habits. Some developers may need shorter, more frequent breaks to stay focused, while others may prefer a more extended break to reset their mind. The key takeaway is that taking a break, regardless of its duration or frequency, can help you approach coding with a fresh perspective and improve your problem-solving abilities.

Slip Back Into Focus

When starting a new day of work or returning from a break, getting focused can be a challenge, and some days it may seem impossible to get into the zone or develop a steady rhythm. However, there are effective strategies to explore when attempting to concentrate on your work. One such approach is to leave the last line of your work incomplete before taking a break. By doing so, your brain is stimulated to complete the unfinished sentence or rectify any errors when you return to your work. This technique helps you to jump right back into your work and break down any mental barriers to entry. Nonetheless, it is important to note that this tactic is not suitable for group or collaborative projects where your partner(s) may find it frustrating to work with errors resulting from this approach. Therefore, consider this a useful tip when working on your own. Another method to get re-focused is to set reminders to remind you when breaks are done, meetings are starting, or even when it's time to switch to a new task. Some may find reminders distracting so be sure you understand your best work flow to know if this tool is for you.

Stay Focused

Many of us struggle with maintaining focus, especially when we have numerous distractions vying for our attention. Whether it's a noisy environment, social media, or other distractions, it's easy to lose track of time and get sidetracked so setting yourself up to stay focused is crucial for ideal productivity. To overcome this challenge, it's crucial to set yourself up for success by implementing strategies that help you stay focused and productive. One such technique is to activate the "Do Not Disturb" feature on your devices. This tool is often built into the operating system of your device and can be customized to your needs. You can set it to turn on and off automatically during certain hours of the day and choose which apps are allowed to notify you. By setting up Do Not Disturb on all nearby devices, you create a distraction-free zone that fosters productivity and helps you stay on task. So, if you're looking to optimize your focus and productivity, try incorporating this simple yet effective technique into your daily routine.

Streamline Your Productivity

Lastly, Streamlining your workflow and optimizing your coding process can be a powerful way to improve your focus and productivity as a programmer. You can do this by eliminating unnecessary steps and automating repetitive tasks, you can save valuable time and reduce distractions throughout your workday. One approach to streamlining your workflow is to use text expanders or code snippets that allow you to quickly insert frequently used code without having to type it out every time. Another strategy is to invest time in learning keyboard shortcuts for your most commonly used tools and applications, as this can help you complete tasks more quickly and efficiently. Additionally, using task automation tools, such as build automation or deployment automation, can help you minimize the amount of time spent on repetitive tasks and allow you to focus more on the coding tasks that require your expertise. Ultimately, streamlining your workflow and coding process can help you work more effectively and with greater focus, enabling you to achieve more in less time.

I am glad to have shared these tips with you, and I hope they will be useful on your journey to becoming an accomplished developer. By applying these strategies, you can maintain focus, enhance productivity, and work with greater efficiency, enabling you to tackle even the most challenging coding tasks with ease. I wish you all the best in your coding endeavors and hope you find joy in the process. Happy coding!

Ruby-Best Practices for Beginners

Josiah — Sat, 18 Feb 2023 16:48:18 +0000

Ruby is a popular programming language known and designed for simplicity and readability. The creator of ruby, Yukihiro Matsumoto, said he designed ruby to be a language for developers to love using. Ruby is commonly used for web development, most commonly on the server side as well as for building command-line interfaces and automation scripts. To ensure that your Ruby code is easy to read and maintain, it is important to follow best practices for writing clean code. In this blog, I will discuss some of the best practices for writing clean and maintainable Ruby code, including variable naming conventions, code formatting, and error handling.

variable_naming

One of the key aspects of writing clean Ruby code is using consistent and descriptive variable naming conventions. When naming variables, it is important to use descriptive names that accurately convey the purpose of the variable. This not only makes it easier for others to understand your code, but it also helps you to remember what the variable is for when you come back to it later. For example, if you have a variable that represents a user's name, you could name it "user_name" or "name" instead of something less descriptive, like "n" or "x". Additionally, it is important to use consistent naming conventions throughout your codebase. In Ruby, the convention is to use snake_case for variable names, with all lowercase letters and underscores between words. Ruby will often throw an error if camelCase or PascalCase is used. By following these naming conventions, your code will be more readable and thus easier to maintain.

Keeping with the flow/formatting

Another important part of writing code in Ruby is formatting your code consistently. Correct formatting will make your code easier to read and understand, particularly for other developers who may be reviewing your code. In Ruby, indentation is particularly important for readability, as it helps show your code's structure. It is recommended to use two spaces for indentation in Ruby, rather than tabs, to ensure consistency across different editors and platforms. Additionally, it is important to use blank lines to separate logical blocks of code, such as methods or loops. This makes it easier to visually distinguish different parts of your code and improves readability.

Error handling

Error handling is yet another critical aspect of writing clean and maintainable Ruby code. An error in your code can be frustrating for users and difficult for developers to debug. To prevent errors from occurring in the first place, it is important to validate and test user input and handle unexpected conditions. For example, if your code expects a certain format of input, you should validate the input to ensure that it is in the correct format before attempting to process it. Additionally, it is important to provide meaningful error messages that help users and developers understand what went wrong and how to fix it. When an error does occur, it is important to handle it gracefully and recover from it as best as possible. This can involve logging the error, notifying the user of the error, or attempting to retry the operation. The most common way to handle errors and test user inputs is thorough testing through a console. In ruby, the most common debugging consoles are the Pry and Rake consoles, in ruby on rails, the rails console is a tool many developers will use to decipher the sometimes tedious or misleading errors that can be thrown. Getting comfortable with testing and consoles is one of the most important skills to have as a developer.

Best practices and final notes

In addition to these best practices, there are several other tips for writing clean and maintainable Ruby code. First, a crucial step is to keep your code DRY, that is, Don't Repeat Yourself, by avoiding duplicate code as well as keeping your code modular and reusable. This makes your code easier to read and reduces the likelihood of errors. Additionally, it is important to write tests for your code to ensure that it works as intended and to catch errors before they make it to production. This is commonly done by writing your own tests with a tool called rspec. Testing will make it easier to maintain and reuse your code over time, as you can make changes to the code and know that it will still work as expected.

Lastly, it is important to document your code to make it easier for other developers to understand what your code does and how to use it. In Ruby, you can use comments to provide inline documentation for your code, such as explaining the purpose of a particular method or why a certain approach was chosen. Additionally, you can use README files to provide more detailed documentation for your codebase; adding these is not necessary but it can help others to understand the goal or purpose of the code you're writing.

In conclusion, writing clean and maintainable Ruby code is essential for ensuring that your code is easy to read, understand, and maintain over the long term for the sake of yourself, other developers, and most importantly, your project.

Bricks on bricks

Josiah — Fri, 27 Jan 2023 16:34:50 +0000

About three weeks ago, a coding goldmine was shown to me,the glorious React.js. React.js is a library for vanilla JavaScript. In coding, a library is something that takes a pre-existing language and adds some new tools or elements to it. Like adding a new sunroom to the back of your house, or, a brick onto another brick. Libraries are incredibly useful because they solve both common and uncommon problems developers have with vanilla languages.

Libraries and Frameworks like React commonly require you to think about a language from a different angle or they take the language to a whole new level of learning and skill required. While the syntax doesn't usually stray too far away from the vanilla language, it usually requires a slightly different approach. Let's dive into some common denominators between some common libraries/frameworks and how different their approaches are. Libraries and frameworks are very similar in the ways you use them so I will take examples from each.

Installing

Libraries and frameworks don't come built into your computer. All libraries must be installed, you will likely need a way to install a package manager. The most common and widely used package manager for JavaScript is npm(Node Package Manager). Once you have npm installed in your terminal you can install any packages for JavaScript that use the command npm which usually looks something like
npm install Your-Package-Name-Here
or, alternatively
npm i Your-Package-Name

With a package manager like npm, the possibilities are near limitless. Package managers are designed to make your life easier and you can use them for so much more than just installing things like running programs, testing programs, managing files, etc...

Imports and Exports

import Home from './src/Home'

Shown above is a common Import statement being used to import a Home function component from the file folder src. Inside of the Home file you will find an export statement that will be something similar to the following

export default Home

To import, follow the syntax above by specifying the item you would like to import and where you would like to import it from. You can import from local files and installed libraries. However, you do not need to import entire files or libraries, you can import specific files, functions, items, etc...; just so long as the item you would like is being exported in it's file.

For something to be imported, the wanted item(s) must be exported. This can be done multiple ways,

export default function Home(){
    //Code in this function will be exported
};

or,

function Home(){
  //Code in this function will be exported
}
export default Home;

or,

function Home(){
  //Code in this function will be exported
}

function SecondFunc(){
  //Code here will be exported too
}
export { Home, SecondFunc }

all of these methods will export the items specified in the way you want. From there, import away!

Knowing what you can use

Here comes the hard part. Picking the library you want to learn. You need to know what you want to build and what tools you need to use. You're gonna need to research for a library or framework that has what you'll need. You can also find multiple libraries or frameworks. Usually a framework will not be easily combined with another without some bugs. Libraries typically work a little better together but you may still encounter issues.

Using your libraries and frameworks

Once installed, learned and imported, the fun starts, Use. Using frameworks is the one of the best ways to add to your developer skill toolbelt. Frameworks and libraries add the ability to add speed, ease of use, re-use, readability, styling, the list just goes on and on. Some popular frameworks for CSS are Tailwind, Bootstrap and Foundation. Popular JavaScript frameworks are Vue.js, React.js, Angular.js and jQuery.

Why use libraries/frameworks?

The world of development requires efficiency. If you can't be efficient, you'll never finish your work on time. So how do libraries help with that? since libraries take a pre-existing language and build on top of it. They are usually easy to learn, which shouldn't take too much time if you already know the language beneath the library. Libraries are much more efficient since they solve problems that the vanilla language has. Combine those two things an you get a new skill and a more long term skill for efficiency. Practice with this skill leads to being quicker which turns into even more productivity.

Libraries/frameworks, and coding in general, build onto the fundamentals of any language. You don't always need them to get what you want accomplished but they sure do help. There is some learning so get started and most importantly, have fun!

Why does nobody seem to like CSS?

Josiah — Sun, 08 Jan 2023 00:21:34 +0000

"CSS is annoying." A commonly used statement when reading forms and a very noticeable attitude that most people have.
In my personal experience, I've yet to find somebody that thoroughly enjoys CSS, otherwise known as Cascading Style Sheets. Granted, I haven't been in software development very long, a meager month; but thus far I haven't found anyone who enjoys writing this language. Since I'm newer to the world of programming I discovered the intrigue that this scenario held for me. In my learning, perhaps I can help others learn as well!

Before diving in, I'd like to cover a pre-supposition that I had and I'm sure others have had as well. When thinking, It's just styling so it should be easy, I couldn't have been more wrong. However, I don't think it's wrong if developers start with this mindset. At first glance, CSS does seem quite simplistic, in that the syntax is easy and declarations are easy to remember. Styling, however, makes or breaks how your page looks, and sometimes how it functions. It is one of, if not the most, important part of a website.

Section 1:Intricacy

So if CSS is so annoying then why? The first thing I would say is intricacy. What makes CSS so intricate is Pixel count; a common declaration method that is quite tedious. In order to use it you have to be incredibly precise. If you're off by just one pixel, you may break how your list scrolls from item to item. This necessity to be tedious usually leaves the developer feeling stuck over the smallest detail, getting frustrated and eventually giving up.

The way items work together is a little different compared to other languages. The amount of editing done to one item can change the way all your items work together. Altering spacing or margin often changes things permanently which, once again, leaves developers stuck with no idea on what to do next.

The !important operator ties into the last paragraph in that it will work with(or break) other items.

h1{
  color: red !important;
}

The !important operator (or bang operator) is used to override styling declarations that may already be declared. This can often lead to breaking your code due to conflicts. It is generally taught that the bang operator should only be used if absolutely necessary since it makes conflicts. However, it is quite frustrating that some of the most useful code supplements can break things so easily.

Section 2:Syntax

Syntactically, CSS is quite easy to learn and use. You select the item you want to change and add the declarations for how you want to change it. Selecting is the easy part, the basic selector methods are quite simple to use and remember, especially since you use similar methods in JavaScript via querySelector. For example, you can select all level 1 headers.

h1{
 /*This effects all first level headers*/
}

You can select all elements that are children of another element, like all paragraphs listed below any first level headers.

h1 > p{
  /*This selects any p element below all h1 elements*/
}

For specificity, you can also select an element by it's id with a "#" or a group of elements by their class name with a ".".

.myClassName{
  /*This selects any elements that have the class name of 'myClassName'*/
}
#myId{
  /*This selects any element with an ID of myId*/
}

These selectors can be combined to select very specific items. So instead of selecting all paragraphs beneath an h1 we can select only paragraphs with a specific classname or Id

h1 > p#myId{
  /*This selects any p element below all h1 elements*/
}

You can combine all of these selectors to become incredibly specific

h1.myClassName > p#myId.myClassName > em{
  /*This will select any emphasis tags underneath a p with an 
  id of myId and a class name of myClassName underneath an h1 
  with a class name of myClassName*/
}

We can get really specific but those examples are pretty much the limit we can go to with our element selections. Remembering how to select is easy which could be one reason to love CSS. Although, if you are too specific you may change fewer elements than you meant to, just as if you aren't specific enough you will change more elements than you intended to.

The way you select and style elements requires a lot of trial and error. Who likes failing again and again in quick succession? Nobody does. The way selectors work in combination with certain declarations, like pixels and percentages, lead to this trial and error method of styling the same element for way too long until you can get the pixel count exact. Styling the same element for extended periods of time because you can't make it cooperate is probably the most frustrating part of CSS... Remember it's supposed to be easy, right?

Section 3:Final Thoughts
While it's common for people to dislike CSS, I believe it's one of the most important parts of any website. If a website looks terrible who would want to spend any time on it? There are supersets such as SCSS and SASS. Newer developers may not know about them or how to use them. I can imagine this turns a lot of newer developers off to CSS unless it clicks for them right away. Altogether, CSS has it's trials, but if it is a weakness, a good developer will improve their skill to eliminate that weakness. Like everything in life, it just requires practice and patience.