Posts

box-shadow

-
box-shadow: [inset] x-offset y-offset [ blur-radius  [ spread-radius ]] [ color ] ; With all zeros, the shadow is exactly under the box. So it's hidden. The x and y offsets are like relative positioning. Take the shadow defined by any other parameters, and just move it. Blur comes first, but I'm going to talk about spread first. Spread-radius extends the shadow outward in all directions by some distance. With blur radius still set to zero, a sharp edged shadow extends outward from the box for the given distance. (It looks like a border.) For blur-radius, take a shadow with an hard edge defined according to your spread-radius. And then "fuzz" outward, putting down some color where there had been none. And fuzz inward, lightening the shadow at its old edge, and letting it darken toward it's actual color setting as you move in from . its old edge. Finally "inset" puts the shadow inside the box, instead of outside. Commas!!! Don't put co...
Post a Comment
Read more

Callback, Promise, Observable, and Doughnuts

-
This is the story of Jerry JavaSript's Automated Slow Doughnut Shop. One day, I wanted a doughnut. So I rode my bike to the automated slow doughnut shop, where they have a slow doughnut machine. You put in a dollar. And then the machine mixes batter, heats the fat, drops the batter into the fat, lifts it out on a linked metal conveyor belt, dusts it with sugar, and drops it into your waiting hands. Once I get my doughnut, I can eat it in the usual manner. But from the time I put in my dollar until the time I receive my doughnut, I am blocked. Fortunately, the slow doughnut machine has a slot labeled, "Insert callback  here". This is great. I code up a function eatDoughnut(doughnut) . I can reference my teeth,  esophagus, stomach, and so on, because they are mine and I know all about them. And then I slip my   eatDoughnut(doughnut)  function  into the slot and get on my bike and ride  to the office while the slow doughnut machine is still mixing...
Post a Comment
Read more

:first-child isn't

-
It's really first sibling . It isn't used on the element that has the children. And it only counts if the first sibling happens to be the kind of element that the :first-child pseudo-class has been added to. So blorf:first-child selects all the blorf elements which are first among their siblings.
Post a Comment
Read more

"rem" is "hem"

-
For anyone else who has ever felt a moment of uncertainty over whether the font size which defines the rem  is on the html  tag or the body  tag, rem is html's em .        "rem is hem." It isn't a Bug Eyed Monster. Also the "root" seems easier to remember in JavaScript: Document.documentElement  returns the  Element  that is the root element of the  document  (for example, the  <html>  element for HTML documents).
Post a Comment
Read more

Learn grid and grid-template-areas FIRST!!!

-
If you're starting to learn web design, you will see hundreds of tutorials about floats clear-fix and positioning and other infinitely painful details on how to actually get HTML and CSS to lay things out in seemingly normal and obvious ways. You'll probably have to learn some of that. But don't learn it first! Instead , read this  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids And then read this  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas and a longer tutorial here  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas Then lay out your web pages as if layout was something we were actually allowed to do. (And then go back and learn some of the painful stuff later. Or if enough time has passed, maybe you won't have to.)
Post a Comment
Read more

node-sass

-
npm install node-sass Add to  scripts in package.json :     "scss": "node-sass --watch scss -o public" --watch points to the directory to watch for changes -o       is where the compiled .css files will be written npm run scss
Post a Comment
Read more

If h1 is a title, is h2 a subtitle?

-
The answer: No. Screen readers, etc., expect h1, h2, h3, h4, h5, and h6 to work like a table of contents for the page. A subheading, subtitle, alternative title. or tagline is not a lower-level heading. It doesn't identify any content. It's either part of the heading, or it's just content. So if the user should see/hear/etc. the sub-thing as part of the heading (i.e. if it should be visible in a table of contents) then include it inside the h*  tag and then style it differently. Or if the sub-thing is too large or unimportant to appear in a table of contents, then wrap everything in a header tag, and mark the sub-thing as a paragraph... and style to taste. https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines
Post a Comment
Read more