search notes ~ 2025-01-21

21 Jan, 2025

html

• There are only specific tags the name attribute applies to.

  • For tags under forms - where it is used as a reference when the data is submitted.

• The <input> tag with attribute type=number allows for minimum and maximum values to be set with min and max attributes respectively.

• The value attribute of <input> tags can be used for UPDATE functionalities.

  • <input> tags with attribute type=date only allows value to be set under the format of YYYY-mm-dd. It is impossible to change the format.

Workaround with JS: I used date.toLocaleDateString('en-ca') when I fetched a date from Postgres and plugged it in the value attribute. There is a list in this Stackoverflow thread with all the language specific formats. I just picked en-ca deliberately because they use YYYY-mm-dd. Of course, the solution is to use date picker or something.

css

• Disable the user to resize textarea by setting resize: none. I used this by setting resize: vertical so the user can still resize downwards and not mess up the width of the app.
• CSS Grid review for a card/board feature.

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 16px;
}
.card {
  min-width: 400px;
  max-height: max-content;
  padding: 12px 8px;
  display: flex;
  align-items: start;
  border: 1px solid #d4d4d4;
  border-radius: 6px;
}

min-width: 400px - This sets a width if in the case of the cards count not divisible by 3.
max-height: max-content - This gives the effect that each card's height may vary, depending on the length of the text inside the card.

I think I'm content with this solution. I've been manually testing the length of the card by manipulating it in the devtools. The past week, it has been overflowing and stuff. The inspiration for using grid is brought about by my need to have the cards display more dynamically. I know there are other tons of solutions, of course. I'll get to them sometime.

js

• Toggling display with JS.

  • This tutorial from w3schools work perfectly when the div you're toggling is in default, visible.

  function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }
  

  • However, for display that initially has a state of being hidden the conditions and values must be reversed.

  #myDIV {
    display: none;
  }
  

  function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "block") {
      x.style.display = "none";
    } else {
      x.style.display = "block";
    }
  }
  

• This has come up again. Why does jQuery or a DOM method such as getElementById not find the element?

  • To my future self: please use a framework.

postgres

• Got back to reading about the RETURNING keyword. This is by far, my favorite sort of feature from Postgres.
  • The RETURNING Keyword in PostgreSQL

All searches done in progress of a CRUD project - Book Notes - from Angela Yu's web development course.

#notes #postgresql #search-notes #web