tarasis
/
old_tarasis.net
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added link to notes

This commit is contained in:
Robert McGovern 2022-01-25 03:19:38 +00:00
parent a9525899bb
commit b192428b89
1 changed files with 45 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
notes.md
View File

@ -1,66 +1,73 @@
# Notes # Notes
## Overview ## Overview
--- ---
Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here. Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here.
Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible. Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible.
Note took far to long, but site now using main for branch. Note took far to long, but site now using main for branch.
## The Notes Themselves (unorganised) ## The Notes Themselves (unorganised)
--- ---
* Now little difference between `<input type="submit">` and `<button>`. - Now little difference between `<input type="submit">` and `<button>`.
* It used to be the case that IE6 didn't properly support it, so your website would look broken.
* By default `<button>` implies `type="submit"`
* A `button` can have child elements, an `<input type="submit">` can't. (**verify**)
* When using `em` the increases are compound, so if you have a `p`, inside a `div`, inside `body`. The `body` font size is set in `px`. The `div` and `p` both set a font size using `em` to set a relative size, then that relative size would be - It used to be the case that IE6 didn't properly support it, so your website would look broken.
* in `div`: body font size * font size em - By default `<button>` implies `type="submit"`
* in `p`: div relative font size * p's font size in em - A `button` can have child elements, an `<input type="submit">` can't. (**verify**)
* ```css
body {
font-size: 20px;
}
div { - When using `em` the increases are compound, so if you have a `p`, inside a `div`, inside `body`. The `body` font size is set in `px`. The `div` and `p` both set a font size using `em` to set a relative size, then that relative size would be
font-size: 2em; /* font size is 40px */
}
p { - in `div`: body font size \* font size em
font-size: 2em; /* font size in this div is now 80px */ - in `p`: div relative font size \* p's font size in em
} - ```css
``` body {
font-size: 20px;
}
* Random aside: can't carry on a list after putting a codeblock inside a list div {
* Found useful site for Regex writing / testing https://regex101.com font-size: 2em; /* font size is 40px */
* this specific address has regex for email validation https://regex101.com/r/uP2oL7/1 }
* CSS - The "!important" rule should only be used as a last resort - nuclear option p {
* better to do elementName.className when wanting to temp add a class to override some css (like say a border color) font-size: 2em; /* font size in this div is now 80px */
}
```
* Blah ... its been a while. Oops. - Random aside: can't carry on a list after putting a codeblock inside a list
- Found useful site for Regex writing / testing https://regex101.com
- this specific address has regex for email validation https://regex101.com/r/uP2oL7/1
- CSS - The "!important" rule should only be used as a last resort - nuclear option
- better to do elementName.className when wanting to temp add a class to override some css (like say a border color)
- Blah ... its been a while. Oops.
## Articles ## Articles
* https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/ - https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
* https://thoughtbot.com/blog/transitions-and-transforms - https://thoughtbot.com/blog/transitions-and-transforms
* https://www.sitepoint.com/hide-elements-in-css/ - https://www.sitepoint.com/hide-elements-in-css/
* https://www.markheath.net/post/font-awesome-circle-background - https://www.markheath.net/post/font-awesome-circle-background
* https://matthewjamestaylor.com/responsive-banner-ads - https://matthewjamestaylor.com/responsive-banner-ads
* https://uxengineer.com/padding-vs-margin/ - https://uxengineer.com/padding-vs-margin/
* http://specificity.keegan.st/ - http://specificity.keegan.st/
* https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/ - https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/
* https://css-tricks.com/how-do-you-do-max-font-size-in-css/ - https://css-tricks.com/how-do-you-do-max-font-size-in-css/
* https://css-tricks.com/simplified-fluid-typography/ - https://css-tricks.com/simplified-fluid-typography/
## Useful Links ## Useful Links
* http://www.heropatterns.com/ << Free repeatable background SVG's - http://www.heropatterns.com/ << Free repeatable background SVG's
- https://projects.verou.me/css3patterns/ << CSS3 Patterns Gallery
## API's to test with ## API's to test with
* https://api.chucknorris.io/jokes/random - https://api.chucknorris.io/jokes/random
* https://jsonplaceholder.typicode.com/ - https://jsonplaceholder.typicode.com/