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. …
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.
Functions used in this tutorial:
- array.some — check if at least one item exists in array.
- array.findIndex — find index of an object in array of objects.
- array.splice(index, howManyToDelete) — split array at index and remove n-number of items past that point, return an item or list of items that were removed.
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.
What is a practical use case for removing objects from JavaScript array?
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:
- 1. They can add personality to your app.
- 2. They are a technical challenge that…
During the last two months I’ve been taking a deeper look into CSS Grid. In this tutorial I want to share the key findings. To make things easier, I explained them using visual diagrams.
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.
JavaScript Teacher
Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…
