{"id":23003359,"url":"https://github.com/kmagameguy/learning","last_synced_at":"2026-05-09T16:37:12.028Z","repository":{"id":104009780,"uuid":"608442374","full_name":"Kmagameguy/learning","owner":"Kmagameguy","description":"In case it seems like I have no idea what I'm doing, it's because I don't.  Help me learn.","archived":false,"fork":false,"pushed_at":"2023-05-14T14:41:44.000Z","size":31,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-26T02:40:31.827Z","etag":null,"topics":["javascript","ruby"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kmagameguy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-02T02:44:47.000Z","updated_at":"2023-03-28T01:31:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"6f4b5727-9322-4a9c-8079-eb7c9f872cd3","html_url":"https://github.com/Kmagameguy/learning","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Kmagameguy/learning","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kmagameguy%2Flearning","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kmagameguy%2Flearning/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kmagameguy%2Flearning/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kmagameguy%2Flearning/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kmagameguy","download_url":"https://codeload.github.com/Kmagameguy/learning/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kmagameguy%2Flearning/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279007975,"owners_count":26084369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","ruby"],"created_at":"2024-12-15T07:14:01.000Z","updated_at":"2025-10-11T16:46:13.195Z","avatar_url":"https://github.com/Kmagameguy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stuff I'm Learning\n\n\u003cdetails\u003e\n\u003csummary\u003eHTML \u0026 CSS\u003c/summary\u003e\n\n## Border-Sizing Attribute\n\nSetting `box-sizing: border-box;` is an easy way to make CSS sizing computations easier.  By default, setting a width/height value on an object doesn't factor stuff like padding or border values.  So for example, if you define something like this:\n\n```\n.box-one {\n  padding: 10px;\n  height : 100px;\n  width  : 100px;\n  border : 30px solid red;\n  margin : 100px;\n}\n```\n\nThe height in this case is 180 instead of 100.  That's because we have the height, PLUS padding on top and bottom (10 + 10 = 20), PLUS border on top and bottom (30 + 30 = 60).  Alternatively:\n\n```\n.box-one {\n  padding: 10px;\n  height : 100px;\n  width  : 100px;\n  border : 30px solid red;\n  margin : 100px;\n  box-sizing: border-box;\n}\n```\n\nAdding the `box-sizing` attribute ensures width \u0026 height computation takes into account the other stuff.  You can set this property on all elements to ensure width/height specifications are exactly what you intend:\n\n```\nhtml {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eJavaScript\u003c/summary\u003e\n\n# Set \u0026 Map\n\n## Sets\n\nSets are like Arrays, but values may only occur once in a set.  You can also iterate through a Set in insertion order (the order in which each element was inserted into the set).\n\n```javascript\nconst mySet1 = new Set();\n\nmySet1.add(1);\nmySet1.add(5);\nmySet1.add(5); // 5 already exists, so nothing happens here\n```\n\n## Maps\n\nMaps are like hashes (they hold key-value pairs), but they remember the original insertion order of the keys.\n\n```javascript\nconst myMap1 = new Map();\n\nmyMap1.set('a', 1);\nmyMap1.set('b', 2);\nmyMap1.set('c', 3);\n\nconsole.log(map1.get('a')); // 1\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRuby\u003c/summary\u003e\n\n## Shovel Operator\n\nThis thingy is called a \"shovel operator\": `\u003c\u003c`.\n\nIt is used to append one thing to another.  For example:\n\n```ruby\nquote = \"I'll have the tuna.\"\nquote \u003c\u003c \" No crust.\"\n\nputs quote\n  =\u003e I'll have the tuna. No crust.\n```\n\nThis is similar to the `+=` syntax, with a few important differences:\n1. `\u003c\u003c` is more memory efficient since it modifies the existing variable rather than reassigning it (less garbage collection needed)\n1. `\u003c\u003c` mutates ALL instances of the variable, for example:\n\nModifying content with `+=`:\n```ruby\nquote = \"You don't turn your back on family, \"\nline = quote\nline += \"even when they do.\"\n\nputs line\n  =\u003e You don't turn your back on family, even when they do.\n\nputs quote\n  =\u003e You don't turn your back on family, \n```\n\nModifying content with `\u003c\u003c`:\n```ruby\nquote = \"You don't turn your back on family, \"\nline = quote\nline \u003c\u003c \"even when they do.\"\n\nputs line\n  =\u003e You don't turn your back on family, even when they do.\n\nputs quote\n  =\u003e You don't turn your back on family, even when they do.\n```\n\nNotice the `puts` outputs are the same in the second example, even though we performed the `\u003c\u003c` action on `line` and not `quote`. quite interesting.\n\n## Ranges\nRanges can be inclusive of the last value or not, depending on the operator you use.  For example:\n\n```ruby\n(1..5).to_a\n  =\u003e [1, 2, 3, 4, 5]\n\n(1...5).to_a\n  =\u003e [1, 2, 3, 4]\n```\n\nNotice the triple dot expression does not include the final number of the range.  Whereas the double-dot expression DOES include the final number in the range.\n\n## .map() and .collect()\n\nThese two methods apply a transformation to items in an array.  For example:\n\n```ruby\narray = [1, 2, 3]\nnew_array = array.map { |item| item + 5 }\n  =\u003e [6, 7, 8]\n```\n\nI've seen `.map()` used more commonly than `.collect()`.\n\n## Spaceship Operator\n\nThis is the spaceship operator: `\u003c=\u003e`\n\nIt's useful to control flow for comparisons that could be more than simply \"true\" or \"false\":\n\n- `-1` if the value on the left is less than the value on the right\n- `0` if the value on the left is equal to the value on the right\n- `1` if the value on the left is greater than the value on the right\n\nExample:\n\n```ruby\n5  \u003c=\u003e 10 #=\u003e -1\n10 \u003c=\u003e 10 #=\u003e  0\n10 \u003c=\u003e  5 #=\u003e  1\n```\n\n## Coercing Truthiness / Falsiness to Booleans\n\nGiven that ruby expressions implicitly return a value, testing for booleans can be tricky.  See the following example:\n\n```ruby\n  foo = nil\n  bar = 'qux'\n  isOk = foo || bar\n\n  #=\u003e 'qux'\n```\n\nThe result is \"truthy\" in that `bar` has a string value (neither a `nil` or `false` value).  If you were expecting a `true` or `false` value from this code you'd be disappointed.  You can coerce a \"truthy\" or \"falsy\" return into true booleans like so:\n\n```ruby\n  foo = nil\n  bar = 'qux'\n  isOk = !!(foo || bar)\n\n  #=\u003e true\n```\n\nWhere the `!!` operator is doing the heavy lifting.  `!!a` is the equivalent of `!(!a)`, in which the inner `!` converts the value of a to false if it is \"truthy\", or `true` if a is falsy.  This gets us a boolean value (albeit the opposite of what we wanted).  Then the outer `!` flips the `true` or `false` value, returning the expected boolean value.\n\n## Stacking .with_index()\n\nYou can stack `.with_index()` like so:\n\n```\narr = ('a'..'h')\n\narr.each_with_object({}).with_index do | (item, hash), index |\n  hash[item] = index\nend\n\n  =\u003e {\"a\"=\u003e0, \"b\"=\u003e1, \"c\"=\u003e2, \"d\"=\u003e3, \"e\"=\u003e4, \"f\"=\u003e5, \"g\"=\u003e6, \"h\"=\u003e7}\n```\n\n## Classes\n\n### Instance Variables\n\nSignified by an `@` symbol before the variable name, instance variables are used to keep track of an object's _state_.\nThese variables exist for the lifetime of the object instance and is a simple way to tie data to objects.\n\n## Synonyms\n`raise` and `fail` are synonyms.  \n`.collect()` and `.map()` are synonyms.  \n`.select()` and `.find_all()` are synonyms.  \n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eHow to Learn\u003c/summary\u003e\n\n## Embracing Challenge\nReframe your thinking from:\n- \"I can't do this\" or\n- \"I don't understand this\"\n\nto:\n- \"I can't do this ... _yet_\"\n- \"I don't understand this ... _yet_\"\n\nThis can help diffuse a natural instinct to run away from the challenge, cheat the challenge, or search for a simpler challenge for instant gratification.\n\n## Working Through Discomfort\nNOPS for dealing with discomfort during learning:\n- Notice it.\n- Own it.\n- Push into it.\n- Stay with it.\n\nAllows your anxities to level off and give you the headspace to drag your comfort zone further.  For example if you don't understand recursion, try writing the simplest recursion method you can.\n\n## How to Start Learning\nStart with very small, specific goals that are doable.\n\n## Learning by Reading\n1. Consider reading the book away from the computer and absorb as much as possible.\n1. Come up with questions or thoughts on different ways of approaching a topic.\n\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmagameguy%2Flearning","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkmagameguy%2Flearning","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkmagameguy%2Flearning/lists"}