DEV Community: Margarita Potylitsyna

Run html from codespace 🔥

Margarita Potylitsyna — Tue, 14 Oct 2025 22:38:45 +0000

Open your Codespace and the folder that contains index.html.
Open the integrated terminal.
Run one of these:
If Python 3 is available: python3 -m http.server 8000
Or with npm (if installed): npx http-server -p 8000

Devise with Ruby on Rails 💡

Margarita Potylitsyna — Tue, 29 Jul 2025 05:44:39 +0000

First of all create an ERD with https://ideas.firstdraft.com/

So here is what you have to do with freshly forked templates:

Add Devise to Your Gemfile gem "devise" if it's not already there.
In the terminal run Bundle install
Run rails generate devise:install
It will show you in the terminal what you should adjust in some of your files. Follow the instructions.
Only then run rails generate devise User
Then run rails db:create db:migrate (run just rails db:migrate if you already have tables in your database).
Create Devise views by running rails generate devise:views -b form_for
Then you can follow Copilot and create the rest of your tables.
To protect your pages (authentication check) add this in controllers where you want users to be authenticated: before_action :authenticate_user!

It should work!

Instance vs Class Method in Ruby ✏️

Margarita Potylitsyna — Tue, 06 May 2025 01:22:17 +0000

✅ Instance Methods

Are called on instances (objects) of a class.
Use a single def keyword, like def method_name.
Operate on data stored in the object (i.e., instance variables like @name).

class Dog
  def initialize(name)
    @name = name
  end

  def speak
    "Woof! My name is #{@name}"
  end
end

dog = Dog.new("Fido")
puts dog.speak  # => "Woof! My name is Fido"

✅ Class Methods

Are called on the class itself, not instances.
Use self. prefix in the method name, like def self.method_name.
Often used for utility methods or constructors.

class Dog
  def self.species
    "Canis familiaris"
  end
end

puts Dog.species  # => "Canis familiaris"

Here’s an example showing both instance and class methods in a single Ruby class:

class Dog
  @@count = 0  # class variable to track number of dogs

  def initialize(name)
    @name = name  # instance variable
    @@count += 1
  end

  # Instance method
  def speak
    "Woof! My name is #{@name}"
  end

  # Class method
  def self.total_dogs
    "There are #{@@count} dogs."
  end
end

# Creating instances
dog1 = Dog.new("Buddy")
dog2 = Dog.new("Max")

# Calling instance methods
puts dog1.speak    # => "Woof! My name is Buddy"
puts dog2.speak    # => "Woof! My name is Max"

# Calling class method
puts Dog.total_dogs  # => "There are 2 dogs."

Dog.new("Buddy") creates an instance and runs the initialize method.
@name is an instance variable: each dog has its own.
@@count is a class variable: shared across all dogs.
speak is an instance method.
self.total_dogs is a class method, giving information about the class as a whole.

Set Class in Ruby 💎

Margarita Potylitsyna — Fri, 02 May 2025 21:09:40 +0000

In Ruby, the Set class is a collection of unordered, unique values—kind of like an array, but with no duplicates allowed. It maintains unique elements only. Supports set operations: union, intersection, difference, etc.

How to use:

require "set"

s = Set.new([1, 2, 3])
s.add(3)      # duplicate, won't be added
s.add(4)
puts s.inspect  # => #<Set: {1, 2, 3, 4}>

Set Operations:

a = Set.new([1, 2, 3])
b = Set.new([3, 4, 5])

puts a | b     # Union => #<Set: {1, 2, 3, 4, 5}>
puts a & b     # Intersection => #<Set: {3}>
puts a - b     # Difference => #<Set: {1, 2}>

Conversion:

arr = [1, 2, 2, 3]
unique_set = Set.new(arr)
puts unique_set.to_a  # => [1, 2, 3]

When to Use Set:

When you need to automatically eliminate duplicates.
When performing set-theoretic operations (like unions or intersections).
For efficient membership checks (similar to using a hash).

JavaScript basics for future me 👽

Margarita Potylitsyna — Tue, 29 Apr 2025 19:49:08 +0000

Get started:

Link css-stylesheet and js-file

<!-- index.html -->
<head>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="index.js"></script>
</body>

Run live server:

npm install -g live-server
// then
live-server

Then open View > Developer > Developer tools > Console
Run js-file in the terminal:

node index.js

To declare a variable and print it out:

// index.js
let newVariable = "value"
console.log(newVariable)

Use const when a variable can't be reassigned:

const newVariable = "value"

To convert data and find out the type:

let myLeads = ["www.myawsomeleads.com"]
myLeads = JSON.stringify(myLeads) // converts array into string
myLeads = JSON.parse(myLeads) // converts string into array

console.log(typeof myLeads)

To create a function:

Create a button in html:

<!-- index.html -->
<button onclick="startGame()">START GAME</button>

Create a function .js file:

// index.js
function startGame() {
     // Some actions here.
}

To get element from HTML:

Assign an id to an html-element:

<!-- index.html -->
<p id="message-el">Message here</p>

Then link it to js-variable:

// index.js
let messageEl = document.getElementById("message-el")

Print a new value inside an html-element:

// index.js
let newValue = "Hi there!"
messageEl.textContent = newValue

For-loop:

To count from 1 to 100 with:

// index.js
for ( let count = 10;  count < 101;  count += 10 )  {
    console.log(count)
}

To display an array of card numbers (functions should be linked to the buttons in html-file):

let cards = [firstCard, secondCard]

function renderGame() {
  cardsEl.textContent = "Cards: " 

  for (let i = 0; i < cards.length; i++) {
      cardsEl.textContent += cards[i] + " "
  }
}

function newCard() {
    let card = getRandomCard()
    sum += card
    cards.push(card)

    renderGame()
}

Math object:

Math.random() // 0.000 - 0.999
Math.random() * 6 // 0.000 - 5.999
Math.floor(Math.random() * 6) + 1 // 1 - 6
Math.floor(3.45632) // Removes decimals. Returns 3 

totalPrice = 420.69235632455
totalPrice.toFixed(2) // Rounds to two decimals. Returns 420.69

Array methods:

let largeCountries = ["Tuvalu","India","USA","Indonesia","Monaco"]

largeCountries.pop() // delete last element of an array
largeCountries.push("Pakistan") // add element to the end
largeCountries.shift() // delete first element of an array
largeCountries.unshift("China") // add element to the beginning
console.log(largeCountries) // [ 'China', 'India', 'USA', 'Indonesia', 'Pakistan' ]

Event Listener:

Create a button in HTML with ID:

<!-- index.html -->
<button id="input-btn">SAVE INPUT</button>

Use ID in JS:

//index.js
let inputBt = document.getElementById("input-btn")

inputBt.addEventListener("click", function() {
    console.log("Button clicked from addEventListener")
})

// double clicked
inputBt.addEventListener("dblclick", function() {
    console.log("Button double clicked from addEventListener")
})

Simple challenge #1:

// The generateSentence(desc, arr) takes two parameterer: a description and an array.
// It should return a string based upon the description and array.

// Example 1: if you pass in "largest countries",and ["China", "India", "USA"],
// it should return the string: "The 3 largest countries are China, India, USA"

// Example 2:If you pass in "best fruits" and ["Apples", "Bananas"], it should return:
// "The 2 best fruits are Apples, Bananas"

// Use both a for loop and a template string to solve the challenge

function generateSentence(desc, arr) {
    let baseString = `The ${arr.length} ${desc} are `
    const lastIndex = arr.length - 1
    for (let i = 0; i < arr.length; i++) {
        if (i === lastIndex) {
            baseString += arr[i]
        } else {
            baseString += arr[i] + ", "
        }
    }
    return baseString
}

const sentence1 = generateSentence("highest mountains", ["Mount Everest", "K2"])
console.log(sentence1) // The 2 highest mountains are Mount Everest, K2

const sentence2 = generateSentence("largest countries", ["China", "India", "USA"])
console.log(sentence2) // The 3 largest countries are China, India, USA

const sentence3 = generateSentence("best fruits", ["Apples", "Bananas"])
console.log(sentence3) // The 2 best fruits are Apples, Bananas

Simple challenge #2:

// index.js
// Create a function that renders the three team images
// Use a for loop, template strings (``), plus equals (+=)
// .innerHTML to solve the challenge.

const imgs = [
    "images/hip1.png",
    "images/hip2.png",
    "images/hip3.png"
]

let containerEl = document.getElementById("container")

function renderImage() {
    let imgsDOM = ""
    for (i = 0; i < imgs.length; i++) {
        imgsDOM += `<img class="team-img" src="${imgs[i]}"></img>`
    }
    containerEl.innerHTML = imgsDOM
}

renderImage()

HTML:

<!-- index.html -->
<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>The Brooklyn Agency</h1>
        <div id="container">
            <!-- <img class="team-img" src="images/hip1.png">
            <img class="team-img" src="images/hip2.png">
            <img class="team-img" src="images/hip3.png"> -->
        </div>
        <script src="index.js"></script>
    </body>
</html>

CSS:

/* index.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: whitesmoke;
    text-align: center;
    color: #130e0f;
}

h1 {
    font-weight: 200;
    letter-spacing: 2px;
}

#container {
    width: 100%;
}

.team-img {
    width: 100px;
    border-radius: 100%;
    margin: 10px;
}

How to set your ENV and authentication with GitHub 🗝️

Margarita Potylitsyna — Tue, 17 Dec 2024 17:34:48 +0000

Here is an ultimate working guide of how to implement authentication with GitHub and define necessary secret keys to development, CI/CD and deployment on Render.com for your Ruby on Rails App.
Before starting to work on this feature make sure you've already implemented Devise in your app and you have sign-in/sign-out user accounts. Always start with an issue and a new branch.

1. Add gems to your Gemfile:

gem "omniauth-github"
gem "omniauth-rails_csrf_protection"
gem "dotenv"

Run bundle install.

2. In your config/initializers/devise.rb find this line of code:

# config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'

Replace with this:

config.omniauth :github, ENV.fetch("MY_GITHUB_ID"), ENV.fetch("MY_GITHUB_SECRET"), scope: "user"

I strongly recommend to avoid the GITHUB_ prefix for secret names because later you will run into troubles when you add secret keys to your GitHub repository. GitHub reserves this prefix for its internal use. That's why I start my names with MY_.

3. Register your app on GitHub here. Go to the “OAuth” tab and click on “Register a new application”.

On the next screen, fill in the “Application name”, the “Homepage URL” and the “Authorization callback URL”.

For now enter your live app preview’s URL (not your codespace’s) in the “Homepage URL”:

https://<your-live-application-preview-url>

and in the “Authorization callback URL”:

https://<your-live-application-preview-url>/users/auth/github/callback

If you're working locally enter the following:

http://localhost:3000/
http://localhost:3000/users/auth/github/callback

On the next screen, you will see your Client ID, which is your first ENV "MY_GITHUB_ID". Also click to Generate a new client secret to get the second one for "MY_GITHUB_SECRET".

4. In the root of your app create .env and paste your secret keys:

MY_GITHUB_ID="<your-client-id>"
MY_GITHUB_SECRET="<your-client-secret>"

There in the root I also recommend to create env_test.rb and paste the following code:

require "dotenv/load"

pp ENV.fetch("MY_GITHUB_ID")
pp ENV.fetch("MY_GITHUB_SECRET")

Run ruby env_test.rb to make sure you set the keys correctly.

5. Now it's time to add new columns to your Users table.
Run migration:

rails generate migration AddOmniauthAndGithubAccessTokenToUsers

Fill the new migration file in with:

class AddOmniauthAndGithubAccessTokenToUsers < ActiveRecord::Migration[7.1]
  def change
    add_column :users, :github_access_token, :string
    add_column :users, :provider, :string
    add_column :users, :uid, :string
  end
end

Run rails db:migrate.

6. Add new route to your config/routes.rb (make sure that you have just one line with devise_for :users):

  devise_for :users, controllers: {
    omniauth_callbacks: "omniauth_callbacks",
  }

7. Create new controller app/controllers/omniauth_callbacks_controller.rb and paste this code there:

class OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def github
    @user = User.from_omniauth(request.env["omniauth.auth"].except!(:extra))

    if @user.persisted?
      sign_in_and_redirect @user
      set_flash_message(:notice, :success, kind: "GitHub") if is_navigational_format?
    else
      session["devise.github_data"] = request.env["omniauth.auth"].except!(:extra)
      redirect_to root_url, alert: "Something went wrong."
    end
  end
end

8. Add the following to your app/models/user.rb

  devise :omniauthable, omniauth_providers: %i[github]

  def self.from_omniauth(auth)
    find_or_create_by(provider: auth.provider, uid: auth.uid) do |user|
      user.email = auth.info.email
      user.password = Devise.friendly_token[0, 20]
      user.github_access_token = auth.credentials.token
    end
  end

It's important to place self.from_omniauth(auth) method definition right after devise to avoid errors during authorization. devise also should be on the top of the code.

9. Navigate to /users/sign_in in your live app preview. Now you should have new nicely working button Sign in with GitHub.

It's time to make it look nice and add GitHub icon. If you've already generated views template for your Devise go to app/views/devise/shared/_links.html.erb
and replace this code:

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
  <% end %>
<% end %>

With this:

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <div class="my-4" >
      <%= button_to omniauth_authorize_path(resource_name, provider),
              data: { turbo: false },
              class: "btn btn-secondary" do %>
        <i class="fa-brands fa-github pe-2"></i> Sign in with GitHub
      <% end %>
    <% end %>
  </div>
<% end %>

If you don't have views for your Devise, generate it:

rails generate devise:views -b form_for

and then replace the code as described above.

For the icon I use Font Awesome so don't forget to connect it to your app. Go to your app/views/layouts/application.html.erb and paste these lines of code into <head> or use partials if you'd like.
Also don't forget to connect Bootstrap itself.

<!-- Connect Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>

<!-- Connect Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">

If you already use Bootstrap icons, use this icon instead: <i class="bi bi-github"></i>

Feel free to change the color of the button using special Bootstrap classes. You can also adjust the space around the button by changing the class my-4 of <div>. Learn more about Bootstrap's margins and paddings.

Also learn more about how to stylize the form itself using Bootstrap.

10. Since we store our secret keys securely in .env they won't be commited because this file listed in .gitignore. That's why we need to additionally define them for Render and GitHub itself in case you're using CI/CD pipelines. Let's start with Render. Navigate to Envinroment on Render.com and add your two keys there:

Go back to your app settings on GitHub and replace Homepage URL and Authorization callback URL with your deployed domain name.

11. If you're using CI/CD go to your repository on Github, then Settings > Security > Secrets and variables > Actions. Add New Repository Secrets.

In your app in .github/workflows/main.yml add the following:

MY_GITHUB_ID: ${{ secrets.MY_GITHUB_ID }}
MY_GITHUB_SECRET: ${{ secrets.MY_GITHUB_SECRET }}

It should look like this:

Now commit your changes and create Pull Request. Your test should succeed.

If so merge your branch to main. It will trigger the deployment. It also should go well.

That's it! Enjoy your authentication with GitHub! 🥷

Organize your layout by using
elements and Bootstrap 🤹

Margarita Potylitsyna — Fri, 13 Dec 2024 07:19:30 +0000

Here are some takeaways I got while working on my Capstone project at DPI:

1. First of all, connect Bootstrap CSS framework to your app. Add the following line of code to your application.html.erb or use partials if you'd like.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">

Learn more about Bootstrap and why it's cool here.

2. The best advice I've ever gotten is, 'Always make the invisible visible'
If you don't understand how your layout works add border attribute to your <div> class. Like this:

<div class="border">

You can always remove it later but it will make your life much easier.

3. To arrange objects horizontally use row class for the main <div> and col for the nested <div>s:

<div class=”row”>
  <div class=”col”></div>
  <div class=”col”></div>
  <div class=”col”></div>
</div>

4. To make your <div> elements rearrange vertically on smaller screens, add the responsive column classes col-12 and col-md to the nested <div> elements:

<div class=”row”>
  <div class=”col-12 col-md”></div>
  <div class=”col-12 col-md”></div>
  <div class=”col-12 col-md”></div>
</div>

5. To make your <footer> fixed at the bottom of the page layout add bd-footer to your <footer> class. Like this:

<footer class="bd-footer"></footer>

5. To make the bottom <div> stick to the <footer> use the following structure:

<body class="d-flex flex-column min-vh-100">

  <main class="flex-grow-1 d-flex flex-column justify-content-between">
    <div class="content-top"></div>
    <div class="content-bottom"></div>
  </main>

  <footer class="bd-footer"></footer>

</body>

It's useful if you need to make sure your elements are positioned correctly on different screens.

That's it for now. If you have any suggestions or need help, feel free to reach out. Happy coding! 👩‍💻

How to easily add a favicon to your Rails App ✨

Margarita Potylitsyna — Wed, 20 Nov 2024 01:41:55 +0000

1. Add the Favicon File:

Go to https://www.freepik.com. In the searching options choose icons and type the key word
Download the icon you like in .png format
Rename the file to favicon.png
Place the file in your app’s app/assets/images directory

2. Add a Link to the Favicon in HTML Head:

Open the app/views/layouts/application.html.erb file
Add a link tag in the <head> section to specify the favicon: <%= favicon_link_tag 'favicon.png', type: 'image/png' %>

3. Clear Cache:

Browsers often cache favicons, so you may need to clear your cache or perform a hard refresh to see the new favicon.

4. Restart the Server:

Restart your Rails server to ensure that all changes are picked up.

Once done, your Rails app should display the favicon on the browser tab! 🤩

rbenv commands for future reference 🧐

Margarita Potylitsyna — Fri, 20 Sep 2024 16:47:28 +0000

Some useful rbenv commands are:

commands - List all available rbenv commands
local - Set or show the local application-specific Ruby version
global - Set or show the global Ruby version
shell - Set or show the shell-specific Ruby version
install - Install a Ruby version using ruby-build
uninstall - Uninstall a specific Ruby version
rehash - Rehash rbenv shims (run this after installing executables)
version - Show the current Ruby version and its origin
versions - List installed Ruby versions
which - Display the full path to an executable
whence - List all Ruby versions that contain the given executable

Useful shortcuts! 🥸

Margarita Potylitsyna — Fri, 20 Sep 2024 01:37:12 +0000

Visual Studio

Cmd + B - left panel
Cmd + J - toggle terminal panel
Cmd + K - clear terminal
Ctrl + C - interrupt the command
Cmd + Shift + P - command palette
Cmd + P - quick open file
Cmd + ← - jump to the beginning of the line (Ctrl + A)
Ctrl + E - jump to the end of the line
Cmd + / - toggle code comment
Cmd + F - find and replace
Cmd + Shift + F - find and replace global
Cmd + D - find the next selection
Cmd + U - step back
Option + ↓ - move line
Shift + Option + ↓ - duplicate line
Shift + Tab - add/remove tab spaces for multiple lines
Option + Click - add more cursors
Ctrl + Shift + ` - embedded Ruby (ERB) Tag Toggle

Mac OS

Cmd + Space - to launch apps (Spotlight)
Cmd + Tab - to switch between apps
Option + Cmd + ← - to switch between tabs within the same window
Cmd + 1 (2, 3, 4, ...) - to jump straight to a tab number
Cmd + Shift + 3 (or 4) - to take a screenshot
Ctrl + Option + Cmd + ↑ - maximize window
Ctrl + Option + ← - left half
Ctrl + Option + → - right half
Ctrl + scroll up and down (two-fingers on the trackpad) - to zoom the screen

Hard refresh for Chrome

F12, Option + Cmd + J (Mac), Ctrl + Shift + J (Win)
or right click on the refresh button and select "Empty cash and hard reload"

Second day at DPI Apprenticeship program 🥰

Margarita Potylitsyna — Tue, 17 Sep 2024 16:30:21 +0000

Working on Onboarding today. Started to think and write my elevator pitch and it's tricky (but interesting).