I spend a considerable portion of my day read technical documentation. So I’m “Experimenting” with various way of “Simulating” myself into grasping concepts so that I can retain them more effectively. And I’ve started asking myself to illustrate at least mentally what it is I’m covering on a “Mental” napkin…

Scenario We have two div elements within a CSS grid container and we want to vertically and horizontally center both the div elements within the container without nesting them. This is our start point markup. <div style=" display: grid; grid-template-columns: 1fr…

Scenario We have the following two strings and we want to add them. let s1 = '1'; let s2 = '2'; Approach Use the plus operator to convert the strings to numbers. let s3 = +s1 + +s2;// Result 3 Demo

Scenario We want to dynamically style the background color of our components host element using a color @input property like this. <color-square color="aqua"></color-square> Approach Within the color-square component of the below Stackblitz demo dynamically bind a SafeStyle instance to the host element like this. @HostBinding('style') get style(): SafeStyle { return this.sanitizer.bypassSecurityTrustStyle( `background-color: ${this.color};` ); }

Scenario We are creating a Storybook story for a component that includes Angular animations we get the error, and we need a fix. Error: NG05105: Unexpected synthetic listener @slide.start found. Approach This happens because the story needs to be configured with support for Angular Animations. The approach is the same as the writeup in this article, so just follow the steps outlined. Rendering Custom Standalone Angular Material Select Components with Storybook Scenariofireflysemantics.medium.com

Scenario We want a typescript array with 10 undefined items that we can map over. Approach const a: undefined[] = Array.from(Array(10)); console.log(a); const b: 1[] = a.map((i) => 1); console.log(b); Demo

Scenario We have a grid definition and we want to make it responsive without using media queries. .grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(4, minmax(100px, 1fr)); grid-gap: 20px; } This is the starting point demo. Reponsive CSS Grid - StackBlitz A polymer project based on @polymer/lit-element.stackblitz.com We we shrink the size of the viewport, we can see that the grid…

Scenario We need to create an Angular Library project @fireflysemantics/theme that includes the file src/lib/styles/_index.scss . Approach First lets scaffold out our workspace with the library project and a playground project for testing. ng new theme-workspace --create-application=false cd theme-workspace ng g library theme mkdir projects/theme/src/lib/styles touch projects/theme/src/lib/styles/_index.scss ng g application playground

Two Step Approach to High Energy and Focus So there really is just one step, and that is create a baseline where you feel great and then gradually / carefully /…fireflysemantics.medium.com Sugar makes the body more Alkaline ( High Fructose Corn Syrup is especially bad). If you get too Alkaline our tissue oxygen levels will get depleted and you may even feel as if you are not getting enough oxygen with each breath.