Forem: Isaac Browne

Up An Running with AWS 3 and Ruby On Rails 6

Isaac Browne — Thu, 29 Aug 2019 18:49:14 +0000

When deploying your application, it's always better to use a third-party service to host your images, videos files, etc. Using server storage can greatly increase your monthly or yearly server costs also, some services like Heroku do not allow you to host your files persistently.

Solution? Use cloud storage.

We are going to implement Aws 3 as our cloud storage for our Rails application using Active storage. There are other services that you can implement and the setup will be very similar with each requiring its own gem and a few other minor changes.

Gems needed

gem "aws-sdk-s3", require: false

Installing Active Record Tables

Active Record needs two tables to associate with your models,active_storage_blobs and active_storage_attachments.

Run these commands in your terminal making sure that you are in the project directory.

rails active_storage:install rails db:migrate

Setting up your config/storage.ymlfile

Inside your storage.yml file, uncomment the amazon section

Setting up access_key and secret_access_key

In rails 5.2 and up, we can now use config/credentials.yml.enc. This stores your credentials securely with encryption and requires config/master.key to decrypt in production.

In your terminal, enter EDITOR="code --wait" rails credentials:edit
If you use another editor like atom, vim, or webstorm ,replace "code" with your editor's name.

A window should appear with the following:

You should now uncomment these lines and get your access_key and secret_access_key from your Identity and Access Management (IAM) on amazon.

I added a bucket key but you don't have to. You can add your bucket name in the storage.yml file.
When finished, save the file.

Checking the credentials.yml.enc file

You can test this by using rails console and you should get the values that were entered previously.

Now your config file should look like this.

Don't forget to use the correct region.

Production and Development setup

In your config/environments/production and config/environments/development, look for this line (shown in the image below ) and change it to ":amazon"

You should now have the ability to test amazon #####aws3 in development.

Setting up in Production

Don't forget to push your changes to Heroku

Go to your Heroku account.
Go to your settings Tab.
Click Reveal Config Vars.
Add a new key RAILS_MASTER_KEY.
Retrieve the arbitrary text in yourconfig/master.key and put the text as the value for RAILS_MASTER_KEY.

Everything should be working at this point.

Conclusion

I hope that this helped make a stress-free setup.

If you did not set up an s3 bucket as yet, consider checking these links out.

aws
awsdocs

How CSS preprocessors save you time and money

Isaac Browne — Wed, 22 May 2019 19:49:27 +0000

As growing programmers, our journey never ends when it comes to finding easy and efficient ways to complete our tasks.
Convenience and ease make us happier and most times more productive developers hence, the rapid growth of frameworks, libraries, preprocessors, etc in recent years.

CSS Preprocessors

CSS preprocessors are one of those convenient tools I was referring to in the above paragraph. These tools allow us to write CSS at a higher abstraction level, giving us the ability to automate a lot of ccs code we would have to write manually otherwise.
I know I know, we as programmers don't like having many dependencies in our projects. Don't worry, this code compiles down to CSS so it is only required in your development environment.
Here are some examples of the power CSS preprocessors bring to the table:
Css

This is an example of a column width grid system similar to bootstrap's columns.

.col-md-1 { flex: 0 0 8.3333333333%; } .col-md-2 { flex: 0 0 16.6666666667%; } .col-md-3 { flex: 0 0 25%; } .col-md-4 { flex: 0 0 33.3333333333%; } .col-md-5 { flex: 0 0 41.6666666667%; } .col-md-6 { flex: 0 0 50%; } .col-md-7 { flex: 0 0 58.3333333333%; } .col-md-8 { flex: 0 0 66.6666666667%; } .col-md-9 { flex: 0 0 75%; } .col-md-10 { flex: 0 0 83.3333333333%; } .col-md-11 { flex: 0 0 91.6666666667%; } .col-md-12 { flex: 0 0 100%; }

SASS

I personally use SASS preprocessor, here is the SASS that created the above CSS.

$columns: 12; @for $i from 1 through $columns { .col-md-#{$i} { flex: 0 0 100% / $columns * $i; } }

Four lines of SCSS code vs twenty-four lines of CSS. If that does not WOW!! you, you must be Steve Jobs lol. This was the first thing that made me fall in love with CSS preprocessors. You already benefited when reading the SCSS code above because you saved a couple of seconds as opposed to the prior CSS code.

Sass features

Some features and treats that sass offers are as follows:
. Variables
Although we can use variables now in ccs3, this was once impossible to do which you can imagine lead to a lot of unhappiness.

$text-color: red;

.Mixins

Mixins are a very powerful feature in SCSS. It allows us to reuse our code respecting the programmer's code of honor: don't repeat yourself. We can also pass parameters so it's basically a function.

@mixin box-sizing($parameter){ -webkit-box-sizing:$parameter; -moz-box-sizing:$parameter; box-sizing:$parameter; } .no-padding{ @include box-sizing(padding-box);} .no-border{@include box-sizing(border-box) }

.Control Directives

These essential features offer a world of possibilities.

.@if

$bg-color: black; $text-white: white; $text-grey:grey; @if $bg-color==black { color:$text-white;} @else{color:$text-grey;}

.@for

$columns: 12; @for $i from 1 through $columns { .col-md-#{$i} { flex: 0 0 100% / $columns * $i;} }

.@each

@each $color in blue, red, green{ .text-#{$color} { color:#{color}; } }

.Extend

Extend helps keeps your CSS less bloated and it is only available in the instances they are used.

%use-me-when-you-need-me{ display-block;} .hidden{ @extends use-me-when-you-need-me;}

.Note

All CSS syntax works in SCSS
There are a lot more features at your fingertips so I will leave some references at the end of this article.

I don't know about you but this made me jump for joy. No more writing 1000+ lines of CSS manually thanks to the creators of SCSS Natalie Weizenbaum, Chris Eppstein, and contributors.

Getting Start

This is a Ruby implementation, although ruby support has now gone out the window.

1 Once you have ruby installed on your machine type

gem install haml

gem install sass

2 In your working directory add your SASS OR SCSS file ex: main.scss then and run this command.

sass --watch scss/main.scss:css/main.css

this will create a main.css file in a css folder. The - watch flag with keep a live link between the SCSS file and the CSS file and changes made to the SCSS file will be reflected in the CSS file immediately.

Good Practices

A good practice is to never edit the CSS file directly when using SCSSdoing so can cause issues with tracking you SCSS file won't have the code you wrote in the CSS file.

Conclusion

In these current times where personal, startups and even well-developed companies need to get work done at a rapid pace, tools like SCSS really shines.

Further your knowledge with these links.

getting started

Boot Camp 6-8 Months

Isaac Browne — Mon, 25 Mar 2019 05:54:11 +0000

I am starting boot camp today. At the end of the boot camp I'm supposed to have enough knowledge and experience to become an junior full stack dev. I already have some experience from self study and building projects but the curriculum the school has is more robust than what I could have put together. The school also gives you an remote buddy and has stand up meetings etc which I believe suppose to mimic a real dev job experience. They also provide career coaches and groom to get a job only.I have enough dicipline to do Deep work and grind by myself, but I believe doing it with others will get me acquainted with the workflow of a remote dev.Its a big sacrifice I'm making and I hoping that it's going to be for the best.

What do you guys think of bootcamps in these current times with all the easy access to infomation?

The Importance of Commenting

Isaac Browne — Thu, 21 Feb 2019 00:35:22 +0000

I've started coding for about a year now and although I knew the importance of commenting, I hadn't taken it as seriously as I should have. I've recently started a big solo project that is slowly turning into a start-up business.

About three weeks deep in code, files everywhere, solving some-what complex problems (with maybe more code than I should be using- but all the perks of being a noob right?) I started to realize something. Every day when I sat down to work adding functionality to the code, more time than needed was spent sifting through previously written code and it was here that I realized, I was not commenting enough.

I could have avoided those headaches caused by having to go back and forth between files to try to recount the train of thought I had at that point in time. Can you imagine how much time I would have saved? How much further in the code I would have been if I had just commented?

It feels good to say that that's old news now. Commenting on my code has helped to increase my efficiency exponentially. I am now able to look through 400+ lines of code and easily know what each block of code does.

You know sometimes when you get that burning solution to a problem and you just want to implement it and move on but, trust me. It is worth taking the time to properly comment on your code especially for bigger projects and in the long run.

Happy Commenting folks!

Javascript Backend framework.

Isaac Browne — Thu, 20 Sep 2018 21:49:38 +0000

Hey folks! if you had to choose a Javascript backend framework, which would it be, and why?

Problems Focusing on one thing.

Isaac Browne — Fri, 07 Sep 2018 18:40:11 +0000

Hey!! Folks, I'm new here. I'm having problems focusing on learning one thing to a deeper level. Example (1), I started python and Java about 3 - 4 months ago and then start to gravitate to learning other things eg HTML, CSS, javascript. This was not a bad choice because I got into web stuff and now use python and Django as a backend. Example (2) I also started creating an app with android and java was very hard to me but I pressed on and got the functionality I wanted. Recently I got interested in the game development tried Godot and settled with Unity and c# which was another language to learn again although it is very similar to Java which made learning less depressing. The main issue is I can't seem to stick with one thing I guess I'm trying things that I'm interested in an also trying to prepare myself to employable mainly remotely because my country doesn't have a lot of opportunities
for programming atm. any suggestions? Thanks!