Forem: csdj92

Image Uploading with Shrine

csdj92 — Fri, 23 Apr 2021 19:08:59 +0000

My Experience With Ralis

For my third project I choose to make a Real Estate web page. One of the features I wanted to include was the ability to upload pictures . This was a big learning experience, I have a new respect for uploading images.

Getting Started

Once I knew I wanted to upload images I stated to look around for different ways to do so. I came across a gem named shrine which can be found here https://shrinerb.com/. This is were the hard part came in. Aside from installing the gem like normal, there was a second step that needed to be done to allow images to be rendered. I needed to install https://imagemagick.org/index.php ImageMagick onto my system. After this I was able to add images.

Using Shrine

There was a slight learning curve to using this gem. There are pages upon pages of doucments on different ways to use this gem. To get started I follwed these steps : "Add Shrine to the Gemfile and write an initializer which sets up the storage and loads integration for your persistence library:"

require "shrine"
require "shrine/storage/file_system"

Shrine.storages = { 
  cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"), # temporary 
  store: Shrine::Storage::FileSystem.new("public", prefix: "uploads"),       # permanent 
}

Shrine.plugin :sequel # or :activerecord 
Shrine.plugin :cached_attachment_data # for retaining the cached file across form redisplays 
Shrine.plugin :restore_cached_data # re-extract metadata when attaching a cached file 
Shrine.plugin :rack_file # for non-Rails apps

Next
$ rails generate migration add_image_data_to_photos image_data:text

Now you want to make an uploader class like such

class Photo < ActiveRecord::Base
  include ImageUploader::Attachment(:image) # adds an `image` virtual attribute 
end

For the form you need

form_for @photo do |f|
  f.hidden_field :image, value: @photo.cached_image_data
  f.file_field :image
  f.submit
end

And in your controller you want to require photo and permit image

class PhotosController < ApplicationController
  def create
    Photo.create(photo_params)
              end

  private

  def photo_params
    params.require(:photo).permit(:image)
  end
end

Closing

After following these steps you should have a working image uploader. You can check out my project here. Github

Get live crypto prices with python

csdj92 — Sat, 17 Apr 2021 19:07:43 +0000

Getting started

With all the craze around crypto coins I thought it would be a fun project to pull live prices from Binance.us. To first get started head over to https://www.binance.us/ to get signed up, from there hover over your user account and select API management. Give a name for your api project then copy and paste your api key and api secret to a text file, you only can view your secret once so make sure you save it in a good place.

The Code

First you need to pip install python-binance, from there

from binance.websockets import BinanceSocketManager
from binance.client import Client
client = Client(api_key, api_secret)

Pass in your key and secret however you would like, then create the manager like so

bm = BinanceSocketManager(client)
# start any sockets here, i.e a trade socket
conn_key = bm.start_trade_socket('DOGEUSDT', process_message)
# then start the socket manager
bm.start()

Almost there now all we need to do is create a callback to process the data

def process_message(msg):
    print("Current Price: {}".format(msg['p']))

Now we can see the live price for Doge

Web crawling with python and selenium

csdj92 — Sat, 10 Apr 2021 14:53:26 +0000

Intro

For a recent job interview I was tasked with scraping a web table and converting the data into a csv file. To get started I first searched the around for the proper tools for the job. I knew I would need to install selenium with pip install -U selenium then from reading the docs it states 'Selenium requires a driver to interface with the chosen browser.'. For this I choose the chrome webdriver once downloaded Make sure it’s in your PATH, e. g., place it in /usr/bin or /usr/local/bin. if you do not do this chrome will fail to open.

Learing to crawl

To get started you must import selenium from webdriver, set a variable equal to webdriver.Chrome() and then call the variable.get('url here')

from selenium import webdriver
from selenium.webdriver.common.keys import Keys

browser = webdriver.Firefox()

browser.get('http://www.yahoo.com')
assert 'Yahoo' in browser.title

elem = browser.find_element_by_name('p')  # Find the search box
elem.send_keys('seleniumhq' + Keys.RETURN)

browser.quit()

Congrats you just learned to crawl. In my next blog I will go over using pandas to turn a web table into a dataframe then csv.

Make sure to check out the selenium docs for more information!

Using Font Awesome in React

csdj92 — Fri, 02 Apr 2021 15:49:57 +0000

Intro

While working on my latest side project I knew that I would need icons for my likes and comments component. In the past I had used Font Awesome for smaller projects and just stuck with the basic implementation.

<h1> Address Book </h1>
<i class="fas fa-address-book"></i>

<script src="https://kit.fontawesome.com/(yourKitCode).js" crossorigin="anonymous"></script>

This lead to this issue

To some people this is okay but I enjoy no errors in my console.

Getting Started

To get started first we will need to install the following packages using either npm or yarn.

npm

  npm i --save @fortawesome/fontawesome-svg-core
  npm install --save @fortawesome/free-solid-svg-icons
  npm install --save @fortawesome/react-fontawesome

yarn

  yarn add @fortawesome/fontawesome-svg-core
  yarn add @fortawesome/free-solid-svg-icons
  yarn add @fortawesome/react-fontawesome

@fortawesome/fontawesome-svg-core is used as the base svg library, @fortawesome/free-solid-svg-icons refers to the free solid svg icons Library here and finally @fortawesome/react-fontawesome is the base library.

You can add additional styles with these

  npm install --save @fortawesome/free-brands-svg-icons
  npm install --save @fortawesome/free-regular-svg-icons

Using Icons

Font Awesome gives two options to use when importing icons. The first is individual use and second is global use.

For individual use you would import like such

import React from 'react'
import { faHeart,faCommentDots,faShareSquare } from "@fortawesome/free-regular-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

...
return (
<FontAwesomeIcon icon={faHeart} />
<FontAwesomeIcon icon={faCommentDots} /> 
<FontAwesomeIcon icon={faShareSquare} />
)

For global usage add this to your app.js to initialize your app and library

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee } from '@fortawesome/free-solid-svg-icons'

Now my console is free of errors and I have nice looking icons.

For further instructions read Here.

useEffect Hook

csdj92 — Fri, 26 Mar 2021 20:25:55 +0000

Getting Started

The main function of the useEffect hook is to allow you to perform side effects in functional components. Fetching data, changing the DOM and setting up a subscription are all examples of side effects.
If you have worked with react before you should have came across componentDidMount and componentDidUpdate you can think of useEffect and a combination of them both.

Not a true lifecycle

useEffect runs after every render by default both after the first render and after after every update. While thinking useEffect does the job of three separate lifecycles, it is better to think of it as a way to run side effects after render.

Here are some examples from the docs "In a React class, you would typically set up a subscription in componentDidMount, and clean it up in componentWillUnmount. For example, let’s say we have a ChatAPI module that lets us subscribe to a friend’s online status. Here’s how we might subscribe and display that status using a class:

 class FriendStatus extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }
  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

  render() {
    if (this.state.isOnline === null) {
      return 'Loading...';
    }
    return this.state.isOnline ? 'Online' : 'Offline';
  }
};

With Hooks:

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
};

DevTools

csdj92 — Sat, 20 Mar 2021 13:00:28 +0000

What are DevTools?

DevTools

With learning Javascript I knew there would be a learning curve but Chrome Devtools made the journey that much easier.
Devtools is a tool that can be used to debug and test your code. Have an event listener that isn't working go to DevTools, want to see what data is being passed along go to DevTools.

Breakpoints

Break Points became one of my new best friends. A breakpoint is a point in the code where you want to stop and see what is going on. I would often use a breakpoint to pause my code and go over to the console and console.log a value to see what data was going point to point.

Stepping Through Breakpoints

Sometimes when writing code I want to see what is being executed so I will go line by line to see if my functions are being called.

Closing

This is just a small breakdown of the power of Devtools here is an article about some more functions Here.