DEV Community: Val Philip Lorejo

TIL Blog Learn Ruby

Val Philip Lorejo — Mon, 04 Dec 2023 15:44:57 +0000

-Ruby is case sensitive

-Variables, give it a name and set it equal to a value

-6 arithmetic operators (+,-,,/,*,%

-puts and print is different, puts adds a new blank after printing

-Everything in Ruby is an object

-Methods are like skills

-String Methods:
.length
.reverse
.upcase
.downcase
.capitalize
-Adding ! at the end of method modifies value contained in variable
-include? method
-gsub! method (global substitution)

-starting with # is how to make comments (single line)
-Multi line comments start with =begin and =end; one line to themselves

-similar syntax with f string in python but no f included and uses # before bracket (string interpolation)
-gets is the method that gets input from user
-chomp removes extra line/whitespace

-Control Flow can select different outcomes
if, elsif, else, end
unless statement, reverse of if, checks for false

-3 Logical/Boolean operators
And(&&), Or(||), and not(!)

-Loops
while
until
for
2 dots or 3 dots for range, 2 dots includes least and highest, 3 dots means go up to but dont include highest value

-Loop method
can interchange {} with do and end
break
next keyword- used to skip over steps

-Use of arrays to store multiple values in a variable

-.each operator, apply an expression to each element of an object, same with loop method can make use of {} or do and end.
Iterates over hashes and arrays

-.times operator a super compact for loop

-.split method

-Each element in the array has an index, starts at 0 goes up to arrays length-1

-hashes similar to python dictionaries, key-value pairs, values assigned using =>
Hash.new creates new hash, replaces use of bracket syntax
When using Hash.new, can add new key-value pairs through use of bracket notation ex[key] = value
Access value through key

-.sort_by returns array of arrays
-can covert things to a string by using .to_s

-Methods syntax
Defined using def
Use of end
Similar to functions in python
Use of * means that there can be more than one argument put in

-Return statement

-Blocks are like methods with no name

-How Blocks differ from methods
Methods can be called many times as needed, but blocks only called once given the context

-Combined comparison operator
<=> returns 0, 1, or -1

-Symbols are different from strings, makes use of : before string. Symbols carry only one copy, unlike strings
-Immutable
-Saves memory due to having one copy at a time

-.intern and .to_sym same thing

-Ruby 1.9 syntax - no need for hash rocket anymore, just replace colon at beginning to end, similar to javascript and python

-.select selects certain values in hash

-Case statement, when using multiple conditions, this can be used besides if else, starts with case and variable name, nested when it is when statements that then end with else
Ex) when variable
when condition
..
else
end

-CRUD
create read update delete
Actions taken when updating a database

CSS Flexbox TIL Blog

Val Philip Lorejo — Mon, 27 Nov 2023 19:53:32 +0000

Flexbox/Flexible Box Layout simplifies how to position elements.

-Flex containers and Flex items
Flex containers are elements on page that contains flex items
Flex containers set up using display property with flex or inline-flex

-Flex containers useful when in regards to changes in screen sizes

-Difference between display-flex and display-inline-flex:
Flex is like a block level element which will take up the whole width of the page of the parent element while inline flex will take up only the necessary space and can share space with other elements side by side

-Justify Content Property (5)(Horizontal sorting)
flex-start
flex-end
center
space-around
space-between

-Align Items (Deals with vertical sorting)
flex-start
flex-end
center
baseline
stretch

-Flex grow property deals with very big parent container compared to its children

-Flex shrink

-Flex basis

-Be aware that there is the flex property and then a flex value within display property
Can declare flex property in one line (grow, shrink, basis)

-Flex wrap
Instead of wanting elements to shrink, may instead want to put onto next line if possible
Wrap
Wrap reverse
Nowrap

-Align Content - like align items but instead of a single row, deals with aligning rows top though bottom (Declared on flex containers)
Common Values:
flex-start
flex-end
center
space-between
space-around
stretch

-Flex Containers have 2 axis (Main and Cross)
Main (Horizontal) Properties
justify-content
flex-wrap
flex-grow
flex-shrink
Cross(Vertical) Properties
align-item
align-content

Main and cross axis interchangeable with flex-direction

Flex Direction
column
column-reverse
row
row-reverse

Flex flow property: used to call flex wrap and direction in one line

CSS: Box Model TIL Blog

Val Philip Lorejo — Mon, 27 Nov 2023 15:04:47 +0000

The Box Model consists of: Margin, Content (Width + Height), Border, Padding

-border-radius can modify the border box so it does not have to be a square.

Shorthand Properties (Applies to Margin as well)
-When padding has four values it goes in the order of top, right, bottom, left
-When padding has 3 values it goes in the order of top, left and right, and bottom values
-When padding has 2 values it goes over top/bottom and left/right values

-Horizontal Margins add, Vertical Margins do not; larger of the 2 margins between elements will be the margin used

-Min-width and min-height: Minimum amount of space element will take, will not go less than that.
-Max uses the same concept

-Overflow Property: Deals with content that may spill out of its given element/box (3)
hidden, scroll, visible

-Visibility Property (3): visible, collapse, hidden

-Content Box, Border Box
Content Box is affected by border thickness and padding, border-box model is not

-Block elements take in the full width of their parent elements, thus they do not overlap with other block-level elements. The default value of block-elements position is on the left side. There are 5 total ways to change its position using the position property:
-Static(default value-no need to specify)(normal flow)
-Relative (normal flow)
-Absolute (removed from document flow)
-fixed (removed from document flow)
-Sticky (in document flow)

-Z-index takes integer value (deals more over layers of elements)

-Display Value:
Inline
Block
Inline-Block

-Float Property (left or right)
Must have width specified or will assume full width, thus making float useless

-Clear Property (4 values)
Left
Right
Both
none

CSS Fundamentals TIL Blog

Val Philip Lorejo — Sat, 25 Nov 2023 20:14:18 +0000

CSS: Cascading Style Sheets

CSS is used to help style HTML content in a webpage since html by itself may be bland.

Two methods of writing CSS code, with CSS ruleset or inline code. CSS ruleset contains brackets while inline code contains elements from html like tags

CSS ruleset has 5 terms:
Selector, Declaration Block, Declaration, Property and Value

CSS inline style also has 5 terms almost similar to ruleset:
Opening tag, attribute, declaration, property and value

when writing using CSS inline code, can add multiple styles by the use of semicolons (Inline code rarely used for websites, but could be used if deemed necessary.)

Can separate HTML and CSS files separately for better readability through the use of external style sheets and in order for those files to be connected a link tag should be within the head section with the attributes href and rel, with href showing the location of the said file and rel showing the kind of relationship between those files.

In CSS ruleset, using * is the universal selector

Use of Class Attribute:
The class attribute can be used to organize any kind of content within a tag, so if some content is tied to a class, that class instead can be used to manipulate that content for styling, making it much more easier to style multiple things instead of one by one or to specifically select one thing. Multiple Classes can be separated by spacing.

Difference between class and id attribute:
Class can take multiple values while id only takes in one, used once per page, class is more broader while id seems to be more specific. Class starts off with period while id starts off with hashtag when getting called in CSS

-Type, Class Id: Least specific to most specific

-Descendant combinators are when you can also select elements that are nested within another element
-Chaining is when you can specify an element using its type and its class together so that it can ignore other types with the same class.

-The more specific code will be applied instead of the general code

-Can separate selectors through the use of commas

-Difference between foreground and background color, foreground is the color element itself is in while background is the background of the said element

-Using background image in CSS utilizes a URL

-!Important can override any style, best not to use it, very hard to override

HTML TIL Blog

Val Philip Lorejo — Thu, 23 Nov 2023 22:10:12 +0000

Started to get used to coding using GitHub with an IDE. I learned about programs such as Bash and Puma and slightly getting used to the GitHub panel.

Linking to Other Websites and Opening Links

Learned about the tags which are involved with opening new links. The attribute href goes into the first tab and invovles putting a link in quotes after that attribute. The attribute target can be used to open a new window when set to _blank

An example will go like this:

Storage of HTML files in a multi page static website are often stored in a root directory or main folder that holds all the contents together. Can nest folders inside main folder for more organization when size grows.

There is a difference between a relative path and an absolute path. A relative path is a local file within a website while an absolute path is a full on URL. (./) is what will tell the HTML file to look in the folder that is currently being used.

By Wrapping anchor tags with an image tag together, you are able to create an image on the website that can also act as a link as well, creating more versatility when making a website.

When starting HTML file must use <!DOCTYPE html> to help browser know what version to use/expect

Linking to Same Page

Through the use of id, you can link specific sections of the same page. It goes like this:

ex) a href = "#id name" /a
The anchor tags can also be nested in other tags like li
/li to make a list that is what links to other sections

of the same page.

Through past experience in Python comments are used by adding # or surrounding text with triple quotes but in HTML comments are created by doing this: