
Ruby. There's times I absolutely hate it, and there's times I'm cool with it.
This was actualy one of the times I enjoyed it. For my
[Ruby CLI project](https://github.com/mcansh/ruby-reddit-cli-app) I decided to
scrape [r/ruby](https://reddit.com/r/ruby), and reddit made it super easy to get
all the info. Maybe in an upcoming update I'll add the ability to pass in a
subreddit as a parameter so it'll be more versatile, but for now its just
r/ruby. The scraping itself is done with Nokogiri inside the
[scraper class](https://github.com/mcansh/ruby-reddit-cli-app/blob/master/lib/reddit/scraper.rb).

Check it out on [github](https://github.com/mcansh/ruby-reddit-cli-app) or on
[rubygems](https://rubygems.org/gems/reddit-ruby)

**Update:** as of
[1.0.8](https://github.com/mcansh/ruby-reddit-cli-app/releases/tag/1.0.8), it
supports any public subreddit.


Ruby project


You're Probably wondering where that Rails project is eh?

Well... the project has been [done](https://github.com/mcansh/rails-project) for
a bit now but I never wrote a post about it.

Just like my [Sinatra Project](/sinatra-project), I made a CRUD todo app, which
allows you to signup for an account with your email or using your GitHub
account. After signing up, you can make a new list, make new tasks, edit your
list, delete your list, and delete your tasks. If you try accessing a list which
you haven't made, you'll be redirected back to the previous page and see an
error.


Rails project


Long time no see! It’s time to talk about my
[sinatra portfolio project](https://github.com/mcansh/sinatra-project 'mcansh/sinatra-project')
for [Learn.co](https://learn.co)! I’m not exactly sure what I need to talk
about, so maybe just a quick run through...

The first thing you’re greated with is a simple homepage with a link to sign up.
Clicking that takes you to a form which you’ll fill out a username, email, and
password. Filling out that and submitted, granted there’s no errors, you’ll be
greated with a list of your Tasks, which you dont have yet, so maybe I’ll update
and put a link there to make a new one. Clicking the button in the bottom right
hand corner will take you to a page to make a new Task. Doing so will give you
the option for a title and marking it as complete if you completed and just
wanted the satisfaction of writing it down. Creating the task will take you back
to the homepage, and now you should have that task in your list of Tasks.
Clicking on the one you just made will give you the option to edit or delete
that task. Editing the task will look very similar to what you just saw when you
created one. If you mark it as complete, the task will be crossed out on your
list. Deleting the task will delete it and take you back to your homepage.

That’s all for now 👋


Sinatra project


It’s actually really easy, [Demo](https://whatcolorisit.loganmcansh.com/).

This is a pretty basic one function website, the function runs every second and
takes the time in military time and then outputs that as a hex, while changing
the background color to it.

```javascript
const setDate = () => {
  // get the datetime
  const now = new Date();
  // get hours from our "now" variable
  const hours = now.getHours();
  // get minutes from our "now" variable
  const minutes = now.getMinutes();
  // get seconds from our "now" variable
  const seconds = now.getSeconds();
  // select our h1 element
  const text = document.querySelector('h1');

  // group our 3 variables above to make the time with a hash in front
  const hexTime = `#${hours}${minutes}${seconds}`;

  // make the text of the text variable the content of hexTime variable above
  text.textContent = hexTime;

  // style the body background color to be the hex color
  document.body.style.background = hexTime;

  setInterval(setDate, 1000);
};
```

Not so fast, you’re not done yet! Notice when the time is 9:03:03 or any time
that's less than 10, the hex is only then 3 numbers, which is fine, until you
get 4 or 5 digits. So to resolve this you can adjust the function like so:

```javascript {14-16}
const setDate = () => {
  // get the datetime
  const now = new Date();
  // get hours from our "now" variable
  const hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
  // get minutes from our "now" variable
  const minutes =
    now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
  // get seconds from our "now" variable
  const seconds =
    now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();

  // or thanks to string.padStart in es2017, we can shorten this to:
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');

  // select our h1 element
  const text = document.querySelector('h1');

  // group our 3 variables above to make the time with a hash in front
  const hexTime = `#${hours}${minutes}${seconds}`;

  // make the text of the text variable the content of hexTime variable above
  text.textContent = hexTime;

  // style the body background color to be the hex color
  document.body.style.background = hexTime;

  setInterval(setDate, 1000);
};
```

Now what that’s doing is running a ternary to see if the time is less than 10 or
not if it is, then it prepends a 0 to the variable.

Woohoo! You now have a clock that shows you hexadecimal colors. You can even
change the android chrome theme color every second:

```javascript
document.querySelector('meta[name="theme-color"]').content = hexTime;
```


How to convert the current time to a hexadecimal


Ahhh, this question. Ready? Good, let’s go.

Learning to code is like learning anything in life, it takes practice. At the
beginning you may feel uncomfortable or like you don’t think you know what
you’re doing. That’s actually somewhat of a good thing. As long as you keep
practicing you’ll become great. Practice makes perfect. I’m sure you couldn’t
ride a bike on the first attempt either, same thing with coding. After a bit of
practice you could ride that bike no problem, same concept applies here. Keep on
hacking.

Yeah, I know, another short post _sigh_. Who knows maybe I’ll keep this blogging
thing up and going and get better. _gasp_ The same process can be made with
coding and blogging 😱.


Similarities between life and code


The most important thing to know about Rack and the internet is knowing how the
internet works. First you have HEAD, GET, POST, PUT, DELETE, TRACE, OPTIONS,
CONNECT, and PATCH requests. 🤔 huh? Let’s run through them.

A GET request will get a resource. A HEAD requests is a GET request without the
body of a GET request. A POST request will submit data. A PUT will upload data.
A DELETE will, well, delete a resource. A TRACE request will return the recieved
request. OPTIONS will return the HTTP methods that your server supports. CONNECT
converts the request to a TCP/IP tunnel, ususally used for SSL. A PATCH request
will update do a partial modifications to an already existing resource.

You can see what type of requests a website is using by looking in the network
tab in Dev Tools.

Now onto Rack itself. Rack is a Ruby gem that provides a minimal interface that
goes between a server that supports Ruby and Ruby Frameworks.

To use Rack you must first make a call to a class #call. All this needs to do is
return a response that contains status codes, headers, and the body. That can be
done with a Rack::Response object:

```ruby
# call.rb

class Application
  def call(env)
    resp = Rack::Response.new
    resp.write "Hello, World"
    resp.finish
  end
end
```

That will run whenever a request is received but you still need to set up a HTTP
serve to receive that request. Using config.ru

```ruby
# config.ru

require_relative "./application.rb"
run Application.new
```

Now running rackup config.ru will start up your application.


Rack key concepts


The key concept in class variables and methods is how to define them. Classes
are realistically just “special functions”. To define a class, you use the
keyword class followed by the name you want to give it.

```javascript
class myClass {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
```

When you’re defining classes make sure they are hoisted or your code will throw
errors like

```javascript
var p = new myClass(); // ReferenceError
class myClass {}
```

It should be known that the content of a class declaration is executed in strict
mode.


JavaScript classes key concepts


Firstly, I’d like to apolagize for the lack and timing of these posts. I’ve been
busy at work and unfortunately haven’t had the time to write them 😭.

A Javascript object is a standalone entity, with properties and types associated
with it. Object properties are basically the same as javascript variables except
for they’re attached to objects.

You define a propterty by defining it a value, for example:

```javascript
const myCar = new Object();
myCar.make = 'Ford';
```

If you define a property but {"don't"} give it a value it becomes undefined, not
null. e.g: myCar.color; would return undefined.

To get an item out of an object you can test to see if it has that property, for
example, on a project at work, we used this to get a rule's name out of the
object

```javascript
// The Rule itself
const rule = {
  active: true,
  conditions: [
    {
      time: {
        day: [1, 2, 3, 4],
        at: '17:30',
      },
    },
  ],
  uuid: 'some-rule-uuid',
  consequences: {
    devices: {
      '66d5e0ed-5e88-4353-9dd9-318cad3676f9': {
        'thermostat_setpoint.heat.set': {
          value: 77,
        },
        'thermostat_setpoint.cool.set': {
          value: 80,
        },
      },
    },
  },
  type: 'rule',
  priority: 1,
  name: 'test rule',
};
```

You can also do if else statements with objects:

```javascript
if (cond) var x = { greeting: 'howdy' };
```

You can even have an object inside another object:

```javascript
const myCar = {
  color: 'red',
  wheels: 4,
  engine: {
    cylinders: 4,
    size: 2.2,
  },
};
```

Alternatively you can make an object with a constructor function:

```javascript
function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

const myCar = new Car('Volvo', 'S40', 2005);
```


Object lifecycle cheatsheet


Something I’ve learned that wasn’t included in the Learn curriculum was the
`progress` element. Now what that does is show the progress of a task. In the
case of this page. It shows how far down the page a user has scrolled. This can
be beneficial to a long webpage such as a blog post. Another reason one could
use the progress element is to show a loading bar for something.

# The HTML is pretty simple in itself, just set a max value and you're done

```html
<body>
  <progress value="0" max="100"></progress>
  ...the rest of your content
</body>
```

# The CSS is straight forward as well but you have to remember to also clear out some vendor prefixed psuedo elements on the progress bar

```css
progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-image: linear-gradient(135deg, #52e5e7 0%, #130cb7 100%);
}

progress::-moz-progress-bar {
  background-image: linear-gradient(135deg, #52e5e7 0%, #130cb7 100%);
}

progress {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 3px;
  appearance: none;
  background: none;
  border: none;
}
```

# And now the fun part, setting the value based on your scroll distance

```javascript
function youReadThisMuch() {
  const scroll = window.pageYOffset; // window.scrollY isnt supported in IE
  const bodyHeight = document.body.offsetHeight;
  const windowHeight = window.innerHeight;
  const scrollPercent = (scroll / (bodyHeight - windowHeight)) * 100;
  document.querySelector('progress').value = scrollPercent;
}

window.addEventListener('scroll', youReadThisMuch);
```

# Setting this up in React is also super simple

```javascript
class Progress extends React.Component {
  state = { progress: 0 };
  }

  // add the listener when the component mounts
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll, { passive: true });
  }

  // remove the listener when the component unmounts
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  handleScroll = () => {
    const scroll = window.pageYOffset; // window.scrollY is less supported
    const bodyHeight = document.body.offsetHeight;
    const windowHeight = window.innerHeight;
    const scrollPercent = (scroll / (bodyHeight - windowHeight)) * 100;
    const maxMinscroll = Math.min(100, Math.max(0, scrollPercent));
    this.setState({ progress: maxMinscroll });
  }

  render() {
    return (
      <progress value={this.state.progress} max="100">
        // for styling im using styled-jsx but you should be able to do the same with another css-in-js method
        <style jsx>{
          progress::-webkit-progress-bar {
            background-color: transparent;
          }

          progress::-webkit-progress-value {
            background-image: linear-gradient(135deg, #52E5E7 0%, #130CB7 100%);
          }

          progress::-moz-progress-bar {
            background-image: linear-gradient(135deg, #52E5E7 0%, #130CB7 100%);
          }

          progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 2;
            height: 3px;
            appearance: none;
            background: none;
            border: none;
          }
        }</style>
      </progress>
    );
  }
}

export default Progress;
```

# React Hooks!!!!

```javascript
// useScrollProgress.js
import { useState, useEffect } from 'react';
const useScrollProgress = () => {
  const [scrollProgress, setScrollProgress] = useState(0); // initialize the value
  const handleScroll = () => {
    const scroll = window.pageYOffset;
    const bodyHeight = document.body.offsetHeight;
    const windowHeight = window.innerHeight;
    const scrollPercent = (scroll / (bodyHeight - windowHeight)) * 100;
    const maxMinscroll = Math.min(100, Math.max(0, scrollPercent));
    setScrollProgress(maxMinscroll);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll(); // call it right away so the scroll position is set on page refresh
    return () => {
      window.removeEventListener('scroll', handleScroll); // make sure to remove the listener on umount
    };
  }, []); // passing an empty array as the second arg to useEffect will make sure this code is only run on mount
  return scrollProgress;
};

export default useScrollProgress;
```

```javascript
// Layout.js
import React from 'react';
import styled from 'styled-componenets';

const ScrollProgress = styled.progress`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  height: 3px;
  appearance: none;
  border: none;
  background: none;
  &::-webkit-progress-bar {
    background-color: transparent;
  }
  &::-webkit-progress-value {
    background-image: linear-gradient(135deg, #52e5e7 0%, #130cb7 100%);
  }
  &::-moz-progress-bar {
    background-image: linear-gradient(135deg, #52e5e7 0%, #130cb7 100%);
  }
`;

const Layout = ({ children }) => {
  const scrollProgress = useScrollProgress();
  return (
    <div>
      <ScrollProgress value={scrollProgress} max={100} />
    </div>
  );
};
```


The HTML5 progress element


This is my first attempt at blogging, so I am sorry that this is ~7 days late.
To be 100% honest with you, I don’t know my true reason for wanting to learn
software development. Something about seeing what you made by typing away on a
keyboard brings a warm fuzzy sensation to me. I took a web development class in
high school, that was about 3 years ago, and I’ve been hooked ever since. I make
a website for anything I possibly can.

This blogging thing is getting easier even after writing one paragraph, maybe I
can do this. I didn’t learn to code to make money, though that is a nice outcome
from it, I did it because it’s fucking awesome to be able to see something you
made just a short time ago. Coding teaches you patience and a knowledgable way
to find solutions. You will get stuck, but you will get past what was holding
you back.

This was a short one I know, hopefully the next one will make up for it.

— Logan
