no more draft, no more neeeds-work posts!

fluffed + flushed

content/learnings/auto-focus-an-input-element.md

@@ -1,11 +1,22 @@
 ---
 title: Auto-focus an input element
-tags:  [HTML5]
+tags:  [HTML5, Code]
 goal:  Front-End Engineering
 date:  2019-06-11
-needs-work: flesh out
+categories: [code]
+summary: pretty much exactly what it sounds like, no JS necessary
 
 ---
 
-autofocus HTML attribute
+Not that hard / no Javascript necessary / I am trash man /
+410,757,864,530 DEAD BROWSERS
+
+{{< highlight html >}}
+
+ <form action="/api/v1/gusset">
+  Tribadist: <input type="text" name="first" autofocus>
+  <input type="submit">
+</form> 
+
+{{< / highlight >}}
 

content/learnings/bind-dom-elements-to-data-1-way.md

@@ -4,24 +4,38 @@ summary: in Vue.js
 tags:  [Vue.js]
 goal:  Front-End Engineering
 date:  2019-06-06
-needs-work: true
 
 ---
 
-TEXT - {{mustache}} or v-text:
-mustache tags: <b>`{{ bind-it }}`</b>
-or
-v-text="todo.text" to replace an el’s text contents
+Let's get bound in Vue.js:
 
-HTML: v-html
+## TEXT:
+
+{{< highlight html >}}
+<span>Message: {{ msg }}</span>
+<!-- or -->
+<div v-text="todo.text"> to replace an elements’s text contents</div>
+{{< / highlight >}}
+
+## HTML
+
+{{< highlight html >}}
 <b v-html="someCoolHtml"></b>
+{{< / highlight >}}
 
-ATTRIBUTES:
-v-bind:class=“{ completed: todo.isDone }”`
-or shortcut → :title="bogus.dingus"
+## Attributes
+{{< highlight html >}}
+<div v-bind:class=“{ completed: todo.isDone }”>
+<!-- or the shorthand form: -->
+<input :title="modus.ponens">
+{{< / highlight >}}
 
-BOOLEAN ATTRIBUTES:
+## Boolean Attributes
+{{< highlight html >}}
+<!-- NOTE:
+  If isButtonDisabled is null, undefined, or false, the disabled
+  attribute will *not even be included* in the rendered element. 
+  -->
 <button v-bind:disabled="isBtnDisabled">Go</button>
-
-If isButtonDisabled is null, undefined, or false, the disabled attribute will NOT EVEN BE INCLUDED in the rendered el.
+{{< / highlight >}}
 

content/learnings/css-combinators.md

@@ -5,21 +5,22 @@ tags:  [ CSS3, Code ]
 date:  2019-07-12T13:59:51-07:00
 images: [/img/todayilearned.jm3.net.png]
 goal:  Front-End Engineering
-needs-work: true
 
 ---
 
-I've used CSS for a looooong time and I never knew that the `>` angle bracket combinator, what I called the direct child selector, was called a COMBINATOR. But it sounds aggro, like a '90s **Front Line Assembly** album.
+I've used CSS for a little while now but until recently I didn't know
+that the formal name for inter-selector operators like the direct child
+`>` angle bracket, is a COMBINATOR. _It sounds intense, like a '90s
+**Front Line Assembly** album._
 
-There are four types of combinators, and their actual names are not great, so I've renamed them:
+There are four types of combinators, and you can think of them this way:
 
-1. All Following Sibling selector (~)
-2. Immediate Adjacent, Following Sibling selector (+)
-3. Child selector (>)
-4. Descendant selector (space)
+1. The Descendant selector (space)
+2. the Selector List
+3. The Direct Child selector (>)
+4. The Immediate, Subsequent Sibling selector (+)
+5. The Subsequent Siblings selector (~)
 
-{{< codepen id="zVXeKd" tab="result" >}}
-
-<!-- Doesn't demonstrate ~ yet but i have to go now lol -->
+{{< codepen id="zVXeKd" tab="result" height="800" >}}
 
 [w3s]: https://www.w3schools.com/css/css_combinators.asp

content/learnings/filter-arrays-in-js.md

@@ -4,7 +4,6 @@ summary: using array.filter
 tags:  [Javascript]
 goal:  Front-End Engineering
 date:  2019-06-20
-needs-work: fix syntax highlighting for JS
 code: true
 
 ---

content/learnings/force-push-to-git-from-atom.md

@@ -4,7 +4,6 @@ summary: Because you can never have too much unfettered power
 tags:  [Editor]
 goal:  Front-End Engineering
 date:  2019-06-20
-needs-work: GIF animation of Atom UI
 
 ---
 apple-Click on the "Fetch" tab

content/learnings/vue-viewmodel-instances.md

@@ -4,12 +4,24 @@ summary: the five elements
 tags:  [Vue.js]
 goal:  Front-End Engineering
 date:  2019-06-05
-needs-work: true
 
 ---
 
-1. el
-2. data
-3. methods
-4. computed
-5. watch’es
+When defining the ViewModel object in Vue.js, there are five core elements in the object:
+
+1. [el][el] - the base DOM element to mount the Vue ViewModel
+2. [data][data]
+3. [methods][methods]
+4. [computed][computed] properties
+5. [watch][watch]
+
+Read the [docs][docs].
+
+_NOTE: Don't confuse the five elements of Vue with the Four Elements of
+hip-hop: Breaking, DJ'ing, Graffiti, and Rapping._
+
+[el]: https://vuejs.org/v2/api/
+[computed]: https://vuejs.org/v2/api/#computed
+[data]: https://vuejs.org/v2/api/#data
+[methods]: https://vuejs.org/v2/api/#methods
+[watch]: https://vuejs.org/v2/api/#watch`