DEV Community: jason ho

TIL ternary operator

jason ho — Mon, 27 Nov 2023 20:34:00 +0000

I found ternary operator when tried to use conditional statements inside create()

condition ? expression_if_true : expression_if_false

Simple boolean condition:

x > 0 ? "positive" : "non-positive"

Checking for nil:

result = value.nil? ? "Value is nil" : "Value is not nil"

Nested ternary operators:

grade = score > 90 ? "A" : (score > 80 ? "B" : "C")

Assigning a default value:

name = user_name ? user_name : "Guest"
# or, using the ternary operator
name = user_name || "Guest"

Using ternary in method arguments:

puts x > 0 ? "Positive" : "Non-positive"

TIL 4.5

jason ho — Wed, 26 Jul 2023 23:29:32 +0000

Flexbox

div.container {
  display: flex;
}

Inline-flex:

display: inline-flex;

Justify-content:

.container {
  display: flex;
  justify-content: flex-end;
}

flex-start
flex-end
center
space-around
space-between

Align-items:

.container {
  align-items: baseline;
}

Flex-grow:

.center {
  width: 100px;
  flex-grow: 2;
}

Flex-shrink:

Pretty much the opposite of grow.

Flex-basis:

Another way of specifying the width of a flex item is with the flex-basis property. flex-basis allows us to specify the width of an item before it stretches or shrinks.

  flex-basis: 150px;

Flex shorthand :

Flex: grow shrink basis

.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}

.small {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 100px;
}

.big {
  flex: 2 1 150px;
}

.small {
  flex: 1 2 100px;
}

Flex-wrap:

wrap
wrap-reverse
nowrap

.container {
  display: inline-flex;
  flex-wrap: wrap;
  width: 250px;
}

Flex-direction:

TIL 4

jason ho — Wed, 26 Jul 2023 18:12:46 +0000

More CSS
Boxes and stuff

Height and Width:

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


}

Borders:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xoswk4roij2x6gxu95k.png)

Border Radius:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwxmyu0hhihfhe5he0a4.png)

Padding:

p.content-header {
border: 3px solid coral;
padding: 10px;
}
padding-top
padding-right
padding-bottom
padding-left



Padding short hand:

p.content-header {
padding: 6px 11px 4px 9px;
}



4 values (top->right->bottom->left)
3 values (top->left right->bottom)
2 values (top bottom -> left right)

Margins:
Pretty much the same as padding

Auto (auto adjust margin):

div.headline {
width: 400px;
margin: 0 auto;
}



Minimum and Maximum Height and Width:

p {
min-width: 300px;
max-width: 600px;
min-height: 150px;
max-height: 300px;
}




Overflow:

The overflow property controls what happens to content that spills, or overflows, outside its box. The most commonly used values are:

hidden
scroll
visible

Visibility:

hidden 
visible 
collapse

TIL 3

jason ho — Tue, 25 Jul 2023 19:01:13 +0000

CSS Time

CSS Ruleset:

p{
   color:blue;
}

CSS inline style(used in html):

<p style='color:blue;'>Hello World!</p>

Style section(nested in header uses CSS Ruleset):

<head>
  <style>
     p {
      color: red;
      font-size: 20px;
     }
  </style>
</head>

Linking CSS file to HTML:

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

<link href='./style.css' rel='stylesheet'>

TIL 2

jason ho — Tue, 25 Jul 2023 00:07:10 +0000

html 101

Header:

<head></head>

Body:

<body></body>

Headings:

<h1></h1>

Paragraphs:

<p></p>

Division/Section:

<div></div>

Bold:

<strong></strong>

Italics:

<em></em>

Break/New Line:

<br>

Unordered Lists(list with dots):

<ul>
  <li>Limes</li>
  <li>Tortillas</li>
  <li>Chicken</li>
</ul>

Ordered Lists (List with numbers):

<ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
</ol>

Images(src=source):

<img src="image-location.jpg" />

Images Alt(basically a text description added to the image):

<img src="image-location.jpg" alt="image description" />

Videos(include "control" if you want user to have controls):



<video src="url" width="x" height="x" controls>
  whatever text you wanted to show if video didn't load
</video>

TIL 1

jason ho — Thu, 20 Jul 2023 23:25:17 +0000

How to create a header for a website:

<h1>Hello, world!</h1>

How use the terminal to temporally launch my own website:

Using

rackup

And Finally how to set it up permanently keep the site up with the help of github!