Hooks let you extract component logic into reusable functions. They’re like the Swiss Army Knife of common class-based React logic for your functional components.
Check out these coding book discounts for Medium readers:
Follow me on Twitter 101K where I post all things JavaScript
Side Note: Always look through official docs first. In this article I cover my own experience with React Hooks. But I know someone on a similar path.
So why this tutorial then? Many hooks tutorials (including official docs) show syntax and how hooks work. But they don’t mention setbacks you’re 100% guaranteed to run into. You know, that moment when you start running into errors even though you are following documentation to a tee!
For example useState({}) hook doesn’t merge…
Things I want to accomplish in this Higher Order Function tutorial:
- Introduce newbies to the idea of Higher Order Function in JavaScript.
- (In a way that entertains, because HOs can get quite boring.)
- Show fun animations explaining how Higher Order functions work.
JavaScript Grammar book explains higher-order functions in detail and also shows you how they work by creating your own version of .map() method. (Among many other great examples.)
Array.map — map all values to an expression.
To kick off this tutorial I’ll start with animated example of higher-order function map. It modifies each item in the original array and returns a copy. In this case we’re…
So which one is better? Grid or Flex? When to use which? What are the differences? For me, I see both as fundamentally different ways of thinking about layout design. I don’t think one as better or worse than the other. It is common to use them together.
Or you can just follow me on Twitter where I share more of my tutorials.
This is not a comprehensive study. Just key differences I found.
There may even be some mistakes I overlooked (let me know if you find.)
All diagrams were taken from my CSS Visual Dictionary book.
You can get it here bundled together with JavaScript Grammar.
Different Layout Models
Grid and flex follow different layout models.
Grid has column and row templates with assumed “ghost” items.
Flex is not designed to make grids. It is based around the idea of a flex line and direction. …
JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.
CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!
JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.
CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!
JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.
CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!
JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.
CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!
JavaScript Grammar contains the entire language walk-through from the stand point of a complete beginner gradual building in complexity.
CSS Visual Dictionary contains a color-coded diagram for every single CSS property in common use for visual speed-learners!
You can now get all of my books here at a discount for Medium readers!
The 2ND part of my “Don’t Panic It’s Only…” crash courses covers the fundamentals of CSS, selectors, key properties, flex and grid. I’m still working on it (coming out in about 2–3 days from now,) but here’s what it will cover.
This CSS Curriculum follows same subjects from my book:
CSS Curriculum
- CSS Code Placement: internal, external, inline.
- Cascade, Specificity and Inheritance: The 3 main behavior types.
- Selectors: by tag name, id, class (id and class names can include - and _)
- Properties: Basic and short-hand (composite) properties.
- Attribute selectors: [attr], [attr=value], [attr~=value], etc
- Case-insensitive attribute selectors: [attr^=value i]
- Combinators: space ( ), >, +(adjacent sibling,) and ~(general sibling)
#id.clsname.activeis not the same as#id .clsname .active- Comments /* unseen */
- Pseudo Classes :root, :first-child, :last-child, :only-child, :nth-child(), :checked, :disabled, :enabled, :past, :future, :is(), :not()
- User-action Pseudo Classes: :link, :hover, :focus, :visited
- …
JavaScript Teacher
Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…
