-
๐ญ My most recent project is Binari.
-
๐ฑ Iโm currently learning Go and Rust
-
๐ฌ Ask me about JavaScript or Python
-
๐ซ How to reach me [email protected]
ย
Interactive code editor with a live binary tree visual designed to teach new developers the fundamentals of Data Structures.
Home Page: https://binari.dev
License: MIT License
๐ญ My most recent project is Binari.
๐ฑ Iโm currently learning Go and Rust
๐ฌ Ask me about JavaScript or Python
๐ซ How to reach me [email protected]
ย
As of now, the calculations for the Binary tree positioning happens in the render code for the canvas. This is very poor design on my part, but I was aiming for an MVP. If the code gets improved, then we can include animations!
If we attempt to animate the canvas, the visuals flicker.
First, the p5 code will need to be calculated once and the result added to an array or object with the cords stored inside. Then during the render, just display the array/obj items per frame, rather than constantly doing the calculations.
Dynamic programming can be changed to programming or data structures.
Dynamic programming is a programming approach for optimization without repeating or recalculating already calculated values. The project in no way demonstrates Dynamic programming. Hence it is irrelevant and misleading to use Dynamic Programming in the project description, documentation and home page.
Read the documentation, about and home page of the project and interpret term Dynamic programming's relevance in the project's context.
Use the GitHub API to display all the contributors in the contributors section of the About page.
For future developers to get credit!
The API integration is already implemented. You will need to make sure you have a GitHub Access_Token, and put that within an environment variable named REACT_APP_TOKEN
.
The loop already exists, so just use the Material Design cards to style the user information.
On occasion, the About page fails to loads and crashes
The API call seems to provide data the fails during rendering.
You will need to get your own Github API key and add it to the project for the about page's API call. Then debug why it is crashing and find a solution.
Include a new simple button under the header that will route to the playground.
Something simple for the user to quickly get started with their coding.
Use react-router and the material Ui button component that routes to the playground. Make the button pop and stand-out.
Make a new logo that stands out
To be recognizable to make the landing page pop.
Change the Binari text to something unique, and create an image to stand next to it.
Presently, the console is not vertically resizable. Also, the default height of the console component is really small and may scrolling through the console component could be tiresome especially when the output of code to be displayed is large.
A button somewhere in the lesson screen to expand/hide the lesson quickly. It would probably fit best in the top right region.
To quickly and seamlessly allow the user to work in the playground.
It will probably be easy to add an icon with font-awesome and use CSS
.icon {
position: absolute;
top: ??;
right: ??;
}
and implement JS/React to manipulate the height of the region. You can also find a better solution.
Add an About view that describes the projects mission, and add it to the navbar.
We need to credit contributors and give a history of the application.
Create a new view following the same design as the landing page using Materials UI Pro's components.
Fix issue with null values breaking the canvas
It is a vital issue that breaks the page.
When a null value is added to the tree in some way
let tree = new Node(50)
tree.insert(null)
tree.insert(15)
tree.insert(35)
tree.insert(75)
tree.insert(85)
tree.insert(65)
The visual on the right will crash, and the page will need to be refreshed. Find out the cause.
In every view, there are helper function being used and taking up space. They will need to be moved to a new file (within the same folder) and referenced.
Clean up the codebase.
Binari\src\views\Playground\
...chapters\
...components\
...playground.js
...helpers.js
probably something like this.
Hide or change the header text when on a page other than the landing page.
It seem pointless to have. It would be much more fitting to have it display the current page that the user is on with a small description of the page. The jumbotron can also be completely hidden similar to the Playground page.
There are functions to check the current route, but if that doesn't work, the content section can be moved up to cover the jumbotron section.
Once the playground is opened, a one-step tutorial should be displayed.
To show the user around the app.
Arrows, and tool-tips around the screen with a quick exit button to hide them all. Nothing too intrusive, but something to simply describe things at a glance.
A single screen with position: absolute;
to cover the page, and divs within that screen to show the user around.
A state to keep track of the tutorial status will be needed, the user shouldn't need to see it more than once.
Add a square box to the right side of a lesson within the directory, in the future it will represent the difficulty of the lesson.
So that the user knows what they are getting themselves into.
<li>
<li>
rendering.We need to add a way to verify that the user's code meets the lessons demands. Lessons like 'Insertion' should check that that the Node.insert() method works as it should.
This is the final step of the MVP. Once completed, v1.0 should be just about ready. This will allow users to know that their code works correctly and provide a way to move seamlessly from on lesson to another.
We already have manual checks in Binari\src\views\Playground\Playground.js
where this code snippet is found:
BinaryTree.insert(25)
BinaryTree.insert(15)
BinaryTree.insert(35)
BinaryTree.insert(75)
BinaryTree.insert(85)
BinaryTree.insert(65)
We need to move this into the lesson folder, probably into a new tests.js
file where we will contain every check for each individual lesson.
Then figure out the best way to incorporate the checks inside the playground file.
Lastly, a way to un-intrusively display that the check failed/passed needs to be added since the user will want to see the binary tree at all times.
This will be a lot of work, so separate small commits may be the best way to go about working on this.
Implement hotkeys for the code editor.
It will allow for a better user-flow.
Start with the basic VSCode hotkeys, and expand from there.
When the user presses (ctr+enter), the code runs; however, it will also enter a new line, that needs to be fixed.
SPECS:
Mac - Safari, and Firefox.
The hotkey doesn't pause input.
One solution that might work could be by pausing text input when control is being held.
Make the site much more mobile friendly.
For user usability of course. Even though the average user won't go to Binari on their phone, it needs to be available.
How ever the developer sees fit. Preferably through CSS, it it gets too crazy then I won't accept it. The site is already very mobile friendly, but there are issues with the top margin on the floating container. I will also like the container to be full width since it doesn't even float on mobile.
As the app progresses and evolves, issues arise. DeepScan scores the application by the amount of warnings and errors displayed by ESLint. The goal here is to remove as many errors that appear as possible to keep the code clean and to keep the score good.
Web.dev also scores the site based on Performance, Accessibility, Best Practice, and SEO. The report for Binari.dev can be found here. If you find anything to do which can improve the scores, feel free to give it a shot and I will generate a new report to display on this issue.
Read the warnings here or run npx eslint .
to view the warnings/errors.
Follow to tips mentioned here or do what you think is best for the app.
Find a better video related to binary trees
Seems more appropriate
A video of a mock or real interview based on binary trees sounds like the best option.
Test cases need to be added for react components.
At the moment there is no effective way to test the code. Testing by a human is not effective and is time consuming and is error prone.
JavaScript files with react components will have there own test cases testing for different scenarios.
There are a lot of little design issues that could use some touch-up; such as, margin spacing, empty landing page, playground sizing, and probably so much more. This is the issue for all design work, please tag it on PRs related to design changes.
This will be an on-going issues, do whatever you think needs to be done to Binari. I will take any suggestion that you think will help with the overall design.
Anything that changes the UI/UX too drastically will be reviewed by @gigirubi
We need to include Redux and begin migrating the current state managers to Redux.
The current state has grown too large to be used easily, and with expectations of growth, we will need a more organized state.
The Playground view currently has 2 states, and there are plans to add roughly 2 more. So we need to change all the states in the playground into separate files. The earlier we change it, the easier future development will become.
More will be added. If you have a lesson idea that is not on here yet, you are welcome to add it.
Anyone. If you think you can contribute to the development on a lesson, go ahead.
Each lesson should clearly describe the chapter's method through pseudo-code with thorough explanations on how and why every step is happening. It should be possible for a new developer to dive in and build the method using nothing but the lesson's explanation.
There is a very precise structure for creating a lesson.
Binari\src\views\Playground\chapters
is where every lesson is laid out.
..\one
....\defaultCode.js
....\index.js
....\lesson.js
..\zero
....\defaultCode.js
....\index.js
....\lesson.js
..\index.js
Every chapter will have have it's own folder, and get referenced in index.js
import zero from './zero'
import one from './one'
export default [
zero,
one
]
lesson.js
will be rendered in markdown
defaultCode.js
will be wrapped in a string
index.js
will reference these files.
When a new folder is added to Binari\src\views\Playground\chapters\index.js
, it will automatically get added to the directory in the playground through this code.
This will not needed to be changed to add a lesson.
import chapter from './chapters'
const [page, setPage] = useState(0);
const [currentCode, setCode] = useState(beautify(chapter[page].defaultCode));
...
{chapter.map((el,i)=> <tr onClick={()=>changePage(i)} style={{background: page === i && "#222"}}><td>{i}</td><td>{el.name}</td></tr>)}
Design the console and error screen to be more like an actual terminal.
To look nice.
Suggestions:
What needs to be done?
Handle empty states in contributors card
Why?
There is an instance in contributors card where the user has done 0 deletions. The empty state is not handled properly and hence it is visible as '0' in the card. Have attached a picture below:
How?
Writing a method which returns if the div should be rendered or not
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.