Ever wondered how the classic snake game can be built? Wonder no more! In this tutorial, I will show you how to do it. I’m using the popular library React.js for this one.
I declared a state (snakeDots) that contains arrays, each array represents margin-top and margin-left of each <div>,
for example [0,0], [0,2]:
-> 1st tab: the first 0 is the margin-left, and the second 0 is the margin-top
-> 2nd tab: the 0 is the margin-left, and the 2 is the margin-top
. jsUML2 library
. Mindfusion Diagram Library
We will cover extensively GoJS in this post. 😉
GoJS makes constructing diagrams of complex Nodes, Links, and Groups easy with customizable templates and layouts.
GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, transactional state and undo management, palettes, overviews, data-bound models, event handlers, and an extensible tool system for custom operations. They provide over 150 interactive samples…
A HOC — or a higher-order component — is a function that accepts a component,
and returns a component that renders the passed component with a few extra props or capabilities.
The React docs does a great job explaining them in more detail.
it’s badly seen but No worries, compose to the rescue :
this generates a hierarchy such that :
Hooks are here to stay, and they’re about to simplify your codebase in a big way.
on this example we’ll move from component(HOC): ‘withScreenSize’, to component(hooks): ‘useScreenSize’
component(HOC): ‘withScreenSize’ :
component(hooks): ‘useScreenSize’ :