Things I want to accomplish in this Higher Order Function tutorial:
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.)
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…
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.
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. …
Hey guys, today is the last day of February.
At the end of each month I do a special promotion on all of my books.
Get Python Grammar as part of #OCTOPACK bundle.
This means you also get all my coding books for only about $4.99 each.
As part of this preorder you also get instant download of all my other books: JavaScript Grammar, CSS Visual Dictionary, Node API, WebGL Gems, HTML: Intuitive Guide and JavaScript Grammar Dark Mode.
Python Grammar is coming out on January 1st, 2021.
Get it as part of #OCTOPACK bundle. This is one in a lifetime opportunity which ends forever on Jan 1, 2021. (After this the book will be available as a stand alone product.) >>> Click here to get it >>> [& scroll down]
This means you also get all my coding books for only about $4.99 each!
As part of this preorder you also get instant download of all my other books: JavaScript Grammar, CSS Visual Dictionary, Node API, WebGL Gems, HTML: Intuitive Guide and JavaScript Grammar Dark Mode.
Python Grammar is coming out on January 1st, 2021.
Get it as part of #OCTOPACK bundle. This is one in a lifetime opportunity which ends forever on Jan 1, 2021. (After this the book will be available as a stand alone product.) >>> Click here to get it >>> [& scroll down]
This means you also get all my coding books for only about $4.99 each!
As part of this preorder you also get instant download of all my other books: JavaScript Grammar, CSS Visual Dictionary, Node API, WebGL Gems, HTML: Intuitive Guide and JavaScript Grammar Dark Mode.
Sometimes you need to remove an object from an array that contains properties that match a value (or values.)
This tutorial explores one practical use case for this.
One of those use cases is storing association between user and event. For example, when user “likes” a tweet, we store relationship between user id…
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!
I’ll start this tutorial with an example of what a micro animation is and then explain how I created my own. You’re probably already familiar with Twitter’s “heart” animation every time you press the like button:
You can create a popup notification to let user know an action has occurred. But there is something about confirming an action with a micro animation.
I don’t know if micro animations actually invoke real feelings of empathy. But upon my research I’ve discovered following properties of micro animations:
All diagrams are taken from CSS Visual Dictionary book. You can get it below.
To get more tutorials follow me on Twitter — I also post free book giveaways.
To get a good idea of how flex works try flex layout editor on this page.
You are probably already familiar with CSS box model for regular elements. Let’s begin with a similar “bird’s eye view” representation for the CSS Grid:
In this case there are 3 <div> items. Third one is stretched across 2 cells.
Notice lines can be counted backwards too using negative coordinate system.
The grid above is…
Much like CSS Grid (my other tutorial) Flex Box is quite complex because it consists of not one but two element types: The container & items.
When I started to learn Flex, I wanted to see everything it was capable of. But, I wasn’t able to find a thorough tutorial showing examples of all Flex properties. So, I created these diagrams with Flex from the bird’s eye view.
Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…