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

React/JSX: One way to store an HTML entity as data

-
For security, React/JSX escapes string data which you try to display {likeThis} . And often, this is what we want. But I was using the HTML entity  &#402;   as a sign for a fictional unit of money, the "Florin", in a game I was writing and it was all over the place. So I wanted to create a constant for it. (In case anyone cares,  it's a "Latin Small Letter F With Hook", like this: "ƒ" .) But if I did: export const FLORIN_MARK = ' &#402; ' ...and then imported it and tried to use it in some JSX like... { place . fuelPrice } { FLORIN_MARK } ...JSX escaped the characters in the HTML entity so that what finally displayed was "123  &#402; " I found a couple of possible work-arounds here  https://zhenyong.github.io/react/docs/jsx-gotchas.html But none worked for me. HOWEVER, since I never had to do any string operations on the HTML entity before displaying it, the constant could just go all the way and...
Post a Comment
Read more

Which CSS class gets the "transition"?

-
Most CSS transition examples showed two classes. And "transition" and related properties are set on one of them. But at first I didn't understand why things were on one and not the other. Or even on both. And transitions in my own code didn't always happen when I expected them. But the actual rule is simple: Transitions only happen if the transition property is part of an element's current styles. If we have class foo and class foo:hover and the transition is on foo , it always happens. Because the foo style is always applied. If the transition is on foo:hover , then the transition happens when you hover. But everything snaps back instantly when the mouse moves away, because foo:hover styles are no longer applied. Or foo and foo:hover can have different transitions, such as ones with different speeds. The transition on foo:hover applies when you mouse over the element, because foo:hover is more specific so it's version wins. But the moment th...
Post a Comment
Read more

Playing with array.reduce()

-
// I think "accumulated" is a better name than "accumulator". // This arg is the value that's been accumulated, not a // long-lasting a thing that accumulates stuff. let arr = [11,22,33] arr.reduce((accumulated, current)=>(accumulated + current)) >>66 // The first call to your function uses the first AND SECOND array elements arr.reduce((accumulated, current)=>{console.log(accumulated + ' ' + current); return 'hi'}) 11 22 hi 33 >>"hi" // ...unless you provide a second arg to Array.reduce itself. If you do, then // that second arg will be passed as accumulated on the first call of your function. // And that also means that the first call no longer consumes two elements. arr.reduce((accumulated, current)=>{console.log(accumulated + ' ' + current); return 'hi'}, 1000) 1000 11 hi 22 hi 33 >>"hi" // Using the second arg is safer. Without it, and empty array does this: ar...
Post a Comment
Read more

Start learning CSS grid here...

-
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout Shows how to create your first grid with almost no code. And then introduces syntax in logical steps. Better than what I found Googling for "tutorials". Those might be good for learning how to do specific things or digging into various topics. But if you've never looked at CSS grid and have three minutes to spare, go to the link above.
Post a Comment
Read more

undefined in JSON.stringify(x)... Well, I didn't expect that.

-
x = {a:1, b:2, c:3} x.b = undefined console.log(JSON.stringify(x)) > {"a":1,"c":3} //No more "b" !!! //But "b" is still on the object... Object.keys(x) >  ["a", "b", "c"] console.log(x) > {a: 1, b: undefined, c: 3}
Post a Comment
Read more

The Day TDD Started Working for Me

-
I've always agreed that Test Driven Development was a good idea and I should be doing it. But it's hard to do on top of learning new tools. And it's hard to do for GUIs. So it never quite happened. However, after I worked with React and Redux a bit, and after doing a couple hello-world tests with Jest, it all fit together and actually made coding easier and more fun. These were the parts that came together to make it work: Jest: Jest is included with create-react-app and is stupid-easy to start using. The Redux reducer, or functions used in the reducer, have to be pure functions and are therefore stupid-easy to test. I pulled some functions out of Redux Container mapStateToProps. These are also pure functions. I also decided that the outputs from mapStateToProps had to have the same structure, and even use most of the same names, as the container component and all of it's child components. In other words, you could dump the data coming out of mapStateToProps a...
Post a Comment
Read more

Notes on Javascript async and await

-
MDN has a very good page on async (and await ) . Having read them the MDN page plus a bunch of other tutorials, here are my key takeaways: In general: async and await are just a nicer syntax for working with promises. So learn promises. Understand promises. And then use async and await to make your promise-using code look nicer. About async : Putting async  in front of a function definition allows you to use await inside that function. Putting async in front of a function definition  also wraps the function's return value in a promise, if the return value wasn't a promise already. So if my function gets data via a promise and then extracts and transforms the data before returning it,  I can just return my transformed data and let async magically re-promise-ify the data for me. :-) About await : await lets me use functions that return promises, but write code that looks synchronous, i.e.the code looks as if the function that returns a promise was an old fa...
Post a Comment
Read more

Redux: combineReducers(..) is Way Simpler Than I Thought

-
The source for combineReducers(...) is really, really short. Take a look:  https://github.com/reduxjs/redux/blob/master/src/combineReducers.js What it does is also simpler than I thought. No complex composition of reducers working on different levels of an object tree, etc. Reducers can ONLY be properties directly on the object you feed to combineReducers(...). And combineReducers(...) can ONLY feed them properties that are directly on the state object. Hmmm... I understand more and more why my state object should be "normalized"
Post a Comment
Read more

React: Spreadish Alternative for Attributes

-
This is legal: <Foo {...object_with_multiple_props} />
Post a Comment
Read more

React: How to Lose the Useless DIV

-
render() only returns one element. So we get useless DIVs, like: return (     <div className="useless">         <h1>I wanted this</h1>         <p>I wanted this, too</p>     </div> ) But React now has React.Fragment. import React from 'react' ... return (     <React.Fragment>         <h1>I wanted this</h1>         <p>I wanted this, too</p>     </React.Fragment> ) And when we inspect the result in the browser, we only see the H1 and the P tags. And there's even a shorter bleeding-edge syntax: <> .... </> return (     <>         <h1>I wanted this</h1>         <p>I wanted this, too</p>     </> ) See:  https://reactjs.org/docs...
Post a Comment
Read more

React: ref={???????????}

-
I read and reread docs and tutorials about "ref", but they never quite connected with my general knowledge of JavaScript. So I did more digging and here's what I found: Ref's are a way to get a reference to an actual HTML DOM node that was generated by React. (They can also get a reference to a React component instance, but I'm not going there today.) React.createRef() just returns a new object like {current:null}. So I assume that's what a ref looks like. From looking at examples... when some element includes an attribute called "ref", like this: <foo ref={expression_that_evaluates_to_a_ref}     /> ...then the JSX is compiled into some JavaScript which assigns a reference to the foo DOM node to the "current" property of that ref object. So we use this by calling React.createRef() and putting a reference to the ref object somewhere where we will be able to get it later.  Then after render() runs and our ref object's ...
Post a Comment
Read more

React-Redux: "Container Component" is Plumbing

-
I think I understand the pieces now... React Functional Components: Are the preferred kind of component we write in React-Redux Are functions that take a "props" object Are the preferred way to output visual stuff and wire up events The Redux Store: Has all the state which we can display Has the dispatch(action) method, which is the only way to change state Your Mission (should you choose to accept it): Use the state and the dispactch(action) function Create props which are data values needed by the functional component Create props which are event handlers that call dispatch(action) The Locations: mapStateToProps : Here you get the state and return props which are just data mapDispatchToProps : Here you get the dispatch function and return props which call it And then React-Redux's "connect" function magically combines the mapping functions and your functional component into a new component which you elsewhere. ---------------------...
Post a Comment
Read more

Redux: Getting Functional on Your Apps

-
With just callbacks or promises, one can almost read the code as non-functional, with a few extra parens 'n things thrown in. If you ignore the yellow parts below, it could almost be C or Java. whatever.then (()=> {       code       code       code } ) "then"... the code in curly braces happens. But in Redux, we get things like this fragment from  https://github.com/reduxjs/redux/blob/master/examples/todos/src/containers/VisibleTodoList.js const mapDispatchToProps = dispatch => ({   toggleTodo: id => dispatch(toggleTodo(id)) }) export default connect(   mapStateToProps,   mapDispatchToProps )(TodoList) Here,  mapDispatchToProps is a function which takes a function ( dispatch ) as its argument and returns an object who's property's value is also a function. Then  mapDispatchToProps  i s used as an argument to the connect(..) function which returns a function whose argument ...
Post a Comment
Read more