Forem: Rostyslav Harasymiak

Useful shortcuts

Rostyslav Harasymiak — Sat, 27 Dec 2025 09:34:13 +0000

Ctrl + TAB ; Ctrl+Shift+TAB -> move right or left between your tabs in browser.
Alt + TAB -> move between your windows in Windows.
Ctrl + Shift + R -> hard reload in browser.
Ctrl + P -> opens quick open file feature in VSCode.
Ctrl + Shift + P -> opens the Command Palette in VSCode.
Ctrl + / -> comments or uncomments a line in code VSCode.
Alt + down -> mover current line down in VSCode.

Today I'm starting my little web site project called: "7 Wonders of the World"

Rostyslav Harasymiak — Mon, 08 Dec 2025 05:25:12 +0000

Creating project in VS code, making small first steps like main elements head and body.
Honestly it was super easy VS code just autofilled everything for me it's crazy...

Using Git version control: commit and push

Rostyslav Harasymiak — Sun, 07 Dec 2025 05:01:22 +0000

There are quite a few Git operations we can do, but we want to focus on the two most important: commit your changes, and switch to a new branch. When you hear the word “commit”, think “snapshot”. When you hear the word “branch”, think “version”.
A Git commit is a snapshot of all of the folders and files in your project at a particular time. Since our files of code are all interdependent, it doesn’t make sense to save versions of individual files — we need to know the entire state of the project for a version to be useful.
Each branch (“version”) is a series of commits (“snapshots”).

Branching and Merging

Do you ever wish you could work on a completely separate version of your project in parallel to the current version? Perhaps to test an approach, or work on a new feature? And you want the option to eventually combine that code into your main project codebase?

Well, have a look at our documentation on branching and merging in VSCode with GitLens!

Boost Your Workflow: VS Code & Terminal Essentials

Rostyslav Harasymiak — Sun, 07 Dec 2025 04:34:07 +0000

Reopen a pane

Sometimes you might accidentally close out of the explorer (left pane) or terminal (bottom pane).

To reopen them, there are keyboard shortcuts to close and reopen:

Ctrl (Windows) or Cmd (Mac) + B for left pane,

Ctrl (Windows) or Cmd (Mac) + J for bottom pane.

But, you can always click on the top left hamburger menu to bring up the VSCode options and visit “View” to reopen

Clear terminal
Mac OS: ⌘ + K

Windows: Ctrl + K

Interrupt program
If something goes wrong with a terminal program (i.e. you made a typo, a program gets stuck in an infinite loop, etc), you can generally interrupt it with:
Ctrl + C

Q to exit
When the output of a terminal command is too tall for a terminal tab to display at once, it paginates. Press Space to step through it one page at a time, or Q to quit and get back to the terminal prompt so that you can execute your next command.

Command Palette
The most important thing to memorize is how to open the Command Palette, which will allow you to fuzzy search within for all other commands. If the command has a keyboard shortcut mapped to it, the shortcut will be displayed to the right. This is the best way to learn the keyboard shortcuts for the commands that you use most frequently.

Mac OS: ⌘ + Shift + P

Windows: Ctrl + Shift + P

Quick open file
To quickly jump to a file:
Mac OS: ⌘ + P

Windows: Ctrl + P

And then fuzzily search for its name. For example, you could type “phco” to get to photos_controller.rb and the list would quickly narrow to bring that file to the top of the list.

What does the rails console command do?
Opens an interactive Ruby environment with your Rails application's context loaded

Why would you use the reload! command in Rails console?
To reload the application's code without exiting the console

Today I learn HTML & CSS fundamentals

Rostyslav Harasymiak — Sun, 07 Dec 2025 03:21:05 +0000

*HTML *- hyper text markup language
<a href="https://www.wikipedia.org/"target="_blank">Wikipedia</a>

- opening tag
- closing tag
Everything between the opening tag and closing tag is called the content.
Within the opening tag (but never the closing tag), there might be attributes.
- Each attribute comprises a name, then a =, then a value.
- Values should always be within a pair of quotes (" "). --------------------Collectively, all of that is called one element.--------------------------------

Layout systems

To position content wherever we wish, we need to choose one of the many layout systems that HTML provides:
-Flow
-Flexbox
-Positioned, Grid, and a few others;

IN Flow:
Words, images, and other inline items are placed side by side horizontally.
Paragraphs, headings, and other blocks are placed above and below one another vertically.
How can we make an element act as a block instead of inline? With the display: block CSS declaration.
<div> - We’re going to need a lot of block level elements. It would be a pain to have to add style="display: block" to s over and over and over every time we wanted a block element, so HTML provides a shortcut — the element: A is just a with display: block already set.
The box model
For elements that are display: block, we can set a few useful properties:

width: How much space we want the content of the element to take up.
padding: How much space we want outside the content of the element, but inside the border.
border: How much space we want the border to take up.

margin: How much space we want outside the border of the element (between it and its neighbors).

CSS style rules
CSS provides a better way: style rules. First, we need a element in our document. Then, within that element, we can write style rules. Syntax: <code>selector{declaration block}</code> - all together style rule. example: div { width: 200px; padding: 20px; border: solid red 5px; margin: 30px; } CSS selectors The two main types of selectors we’re going to focus on for now are tag-type selectors and class-level selectors. what if we wanted to make text in the second div red, but leave the first div alone? div is a tag-type selector, which means that if we add color: red to the declaration block, it will apply to all <div> elements in the document We could achieve the more precise targeting we want by dropping back down to an inline style="" attribute, this does what we want, but we’ve lost the nice ability to affect hundreds or thousands of elements at once with a style rule. What’s the solution? A class-level selector: add to element attribute <code>class=name</code> Notice there’s no . when applying a class, only when writing the selector. Flexbox layout The three inner divs have the class child, so they have a border, etc. They are still vertically stacked on top of each other even though they are narrow, because they are blocks and the parent element uses flow to lay them out. Example: `<style> .parent { border: dotted blue 1px; } .child { width: 50px; padding: 20px; border: solid red 5px; }

If we want to change the parent’s layout mode to flexbox, we use the display: flex property Example: .parent { border: dotted blue 1px; <div class="highlight"><pre class="highlight plaintext"><code>display: flex; </code></pre></div> } .child { width: 50px; padding: 20px; border: solid red 5px; }

`
Boom! All of a sudden, within the parent element, we’re in a whole new world. Within an element that is display: flex, “block” and “inline” don’t really mean anything anymore. Those terms are relevant for typesetting, but flexbox is for more dynamic, responsive, app-type layouts.
Importantly, display: flex only affects how immediate children (nested only up to one level) are positioned within the parent element. The position of the parent element itself, and anything outside the parent element, is unaffected by setting display: flex on the parent element.

By default, flex-direction is row (horizontal). You can also set flex-direction to be column, in which case children will be laid out vertically (similar to block layout). We mostly use flexbox layout when we want to break out of flow layout to achieve horizontal positioning, so for now we’ll focus on row, but we’ll use both directions eventually.

justify-content and align-items

Now that the children elements are being laid out with flexbox, we have a few new properties available to us on the parent. Most importantly: justify-content and align-items.

justify-content

When flex-direction is row, the justify-content property determines how any leftover horizontal space within the parent is used. There are five values we can set:

align-items
When flex-direction is column, the align-items property determines how children are placed vertically within the parent. There are five values we can set:

stretch: Make children as tall as the parent, so that there is no leftover vertical space. (This is the default value.)
center: Place children in the middle of the parent and split any leftover space evenly across the top and bottom.
flex-start: Place the children at the top of the parent and any leftover space on the bottom.
flex-end: Place the children at the bottom of the parent and any leftover space on the top.
baseline: Place the children such that the bottom of the text within them is lined up along the center of the parent, regardless of their font-size. Useful for things like navbars.

Flexbox Froggy
That’s all you need to know about flexbox for the moment, but if and when you run into a situation where you want to know how to do more, here is an interactive game you can play through to become a flexbox expert:
Flexbox Froggy
You don’t have to play through it right now, but keep it in mind.