DEV Community: Joshua Jones

Hashes and Symbols in Ruby

Joshua Jones — Mon, 05 Feb 2024 19:09:26 +0000

Hashes with .each:

If something doesn't exist in value, you will receive (nil).
If you don't want that you can create a default value. Using hash.new you can specify what it should be.

Symbols:
There can only be one copy of a symbol at a time
Symbols make good hash keys for a few reasons:

-They’re immutable, meaning they can’t be changed once they’re created;
-Only one copy of any symbol exists at a given time, so they save memory;
-Symbol-as-keys are faster than strings-as-keys
because of the above two reasons.

Converting Between Symbols and Strings

You can use (.intern) to switch a string into a symbol
(=>) hash rocket style

Alternate way than hash rocket for symbols

When you want to filter a hash for values that meet a certain criteria

Methods, Blocks & Sorting in Ruby

Joshua Jones — Fri, 02 Feb 2024 19:57:33 +0000

You call a method just by saying its name. If a method takes arguments, you must define a function. You put the argument in parenthesis when you call it.

ex: def square(n)

splat arguments. Splat arguments are arguments preceded by an asterisk *. This tells the program that the method can receive one or more arguments.

Blocks are like nameless methods
Blocks can be defined with either the keywords "do, end, or curly braces {}"

Sorting:

Most sorting algorithms assume we are sorting an array of items, which involves comparing any two items in the array and deciding which should come first.

Sorting in ascending and descending order:

Arrays and Hashes in Ruby

Joshua Jones — Thu, 01 Feb 2024 18:14:42 +0000

access by index:

Arrays can be 2d, 3d

Hashes: Values are assigned to keys using =>.

Hash.new: creates a new, empty Hash. It's the same as setting the variable equal to the empty curly braces ({})

Adding to the hash:

Iterating over Arrays:

iterating over hashes:

Create a HISTOGRAM:

Loops & Iterators in Ruby

Joshua Jones — Wed, 31 Jan 2024 21:23:36 +0000

More operators: +=, -=, *=, /=

For: when you don't know how many times you need to loop
For the () puts ()
ex: for num in 1...10 puts num end
(...)= exclude the last digit
(..)= include the last digit

Loop: create basic but infinite loop.

Next: Can be used to skip over certain steps in the loop.

Array: my-array can store numbers in a variable
my_array = [1,2,3,etc]

.each: can apply an expression to each element of an object. You wrap in (| |)

.times: It performs a task on an item a specified number of times.
ex: 10.times { print "Chunky bacon!" }

until: Until a certain criteria is met

Using Loop iterator to print out the Ruby string 30 times:

using .times iterator to print Ruby 30 times:

redacted:

Learning Ruby: Control Flow in Ruby

Joshua Jones — Mon, 29 Jan 2024 22:29:14 +0000

IF: basically a true or false expression. When you're done you have to put END.

Else: Modify's the IF. The alternate answer to the IF statement. It shows another value.

Elseif: If you want more than 2 options

EXAMPLE:

Unless: Let's you check if something is false.

Equal or not: To check if two things are equal you use ( == ). It is a comparator (relational operator). It means is equal to
!= lets you see if two values are not equal

You can also use logical or boolean operators. Ruby has three: and (&&), or (||), and not (!). Boolean operators result in boolean values: true or false.

The boolean operator and, &&, only results in true when both expressions on either side of && are true. Here’s how && works:

OR: ( || ) is called an inclusive OR because it evaluates to true when one, or the other, or both expressions are true

NOT: boolean operator not (!). ! makes true values false, and vice-versa.

Learning Ruby

Joshua Jones — Mon, 29 Jan 2024 19:22:03 +0000

Data types: Numbers, Strings, Booleans

Math: Addition (+)

Subtraction (-)

Multiplication (*)

Division (/)

Exponentiation (**)

Modulo (%) = returns the remainder of division. Ex: 25 % 7 = 4
7 goes into 25 three times with 4 being left over.

Puts and Print:
Print: takes whatever you give it and prints it to the screen
puts: (puts string) adds a new line after the thing you print. Lets you see the result of something or variable.

The '.length' method: methods are summoned using (.).
if you have a string and take the length, it counts the characters, numbers, letters, and spaces.

The '.reverse' Method: it spits out a backwards version of the string you gave it.

'.upcase' & '.downcase': .upcase and .downcase methods convert a string to ALL UPPER CASE or all lower case, respectively.

.capitalize: Capitalizes the first letter of a string.

Single-Line Comments: # is for comments in ruby
Multi-Line Comments: =begin, =end

Variable: declare it by setting it = to something
gets: gets input from user.
chomp: removes extra line

Learning Flexbox

Joshua Jones — Mon, 22 Jan 2024 22:05:44 +0000

Flexbox layout

simplifies positioning elements
Flex containers and flex items
designate an element as a flex container by setting its (display) property to flex or inline-flex.
several properties that specify how it behaves
justify-content, align-items, flex-grow, flex-shrink, flex-basis, flex, flex-wrap, align-content, flex-direction, flex-flow.

.container{ display:flex; }

-justify-content: position items from left to right

align-items: makes it possible to space flex items vertically

flex-grow: allows you to specify if items should grow to fill a container and which should item grows proportionally more/less than others

flex-shrink: which elements will shrink and in what proportions.

flex-basis: allows you to specify width before it shrinks or stretches. ( lock width )

flex: lets you declare flex-grow, flex-shrink, and flex-basis in one line

flex-wrap: Allow content to move to the next link when necessary.

align-content: allows you to move multiple rows of content

Flex-direction:
allows you to switch between main axes and cross axis. So they can be ordered vertically or horizontally.
-The flex-direction property can accept four values:

row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.

flex-flow: used to declare both the flex-wrap and flex-direction properties in one line.

Learning Box Model

Joshua Jones — Mon, 22 Jan 2024 18:39:44 +0000

All of this is done in style.css
Height and Width:

p { height: 80px; width: 240px; }

Borders:

can be set with a specific width, style, and color
p {border: 3px solid coral;}
Modify corners of an element box with the Border-Radius property.

Padding:

Between the contents and the border
p.content-header {border: 3px solid coral; padding: 10px;}
padding-top (bottom, left, right)
padding shorthand lets you modify all in a single line
Padding 4 values: 6px 11px 4px 9x; clockwise rotation
padding 3 values: top, left & right, bottom
padding 2 values: top & bottom, left & right

Margins:

space directly outside box.
p { border: 1px solid aquamarine; margin: 20px;} -Margin 4 values: clockwise -Margin 3 values: top, L & R, bottom -Margin 2 values: top & bottom, L & R
auto value instructs the browser to adjust left and right margins until the element is centered with itself.

Overflow

controls what happens to content that spills outside the box.
Hidden: overflow will be hidden from view
scroll: scrollbar would be added to view
visible: displayed outside of containing element

Visibility:

elements can be hidden from view with this property
hidden: hides an element
visible: displays an element
collapse: collapses an element

The box model:

Learning CSS Part 2

Joshua Jones — Wed, 17 Jan 2024 21:31:14 +0000

If you want to change a section like a header, you must include the tag in front the bracket. Ex= h1{color:ex}
Using * tag selects all and makes it universal
To select an HTML element by its class using CSS, a period (.) must be prepended to the class’s name. In the example above, the class is brand, so the CSS selector for it is .brand.
If there are multiple classes, you can create different rule sets or include both using space in html.

The ID attribute has only one value compared to the class. To select an ID , you must use a hashtag #

The attribute selector targets elements that already contain attributes. You use [ ] to select them.

Psuedo class: ex focus, visited, disabled, active that creates user interaction.

different ways of selecting an element. By type, class and ID.

Chaining combines multiple sectors.
ex: h1.special the (.) connects two different elements.
A descendant combinator selects all elements within a list.

You can add more styles to multiple selectors. Separate the CSS selectors with a comma.

Learning CSS

Joshua Jones — Wed, 17 Jan 2024 20:01:24 +0000

CSS modifies colors, font types, font sizes, images, element positioning,

Example of using Inline style

Internal Stylesheet

< style > must be placed inside of < head >

- Use < link > element to link HTML and CSS files together
href relative path or address
rel- the relationship between the files.

**
Review**

Learning HTML

Joshua Jones — Tue, 09 Jan 2024 21:32:30 +0000

HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.

Headings < h 1> </ h 1> Go from largest to smallest as it increases. h1 being the largest and h6 being the smallest.

< div> is short for division. It allows you to group HTML elements to apply the same styles.

Paragraphs (< p >) contain a block of plain text.
< span > contains short pieces of text or other HTML. They are used to separate small pieces of content that are on the same line as other content.
The < em> tag will generally render as italic emphasis.
The < strong> will generally be rendered as bold emphasis.
< br > creates a line break element. (creates space)
< ul > Creates a bulleted list of items that need to be used < li > to make the list.
< ol > creates an ordered list

< img > allows you to add an image

The alt attribute, which means alternative text, brings meaning to the images on our sites. The alt attribute can be added to the image tag just like the src attribute. The value of alt should be a description of the image.

< video > allows you to display a video that requires a src

The controls attribute instructs the browser to include basic video controls like pausing and playing.

HTML Files

< !DOCTYPE html >, the declaration specifying the version of HTML for the browser
The < html > tags that enclose all of your HTML code
The < head > tag that contains the metadata of a webpage, such as its

< a > anchor element. It is incomplete without the Href attribute. This is to hyperlink to other sites.
Target attribute requires a value of _blank to make the link open into a new window.

wrapping a link around and image instead of just text.

Comments begin with . Any characters in between will be ignored by your browser.

Hello, World!

Joshua Jones — Mon, 08 Jan 2024 18:26:58 +0000

Git Commit saves current progress when coding.