12 Znote examples to learn how to load external JS libraries
Hi all 👋,
Today I would like to share with you some examples of Znote (also working for NotebookJs), that I recently added in my Github repository to show you how to use external libraries. You will find below the complete detail of the available examples present in the repository.
Hopefully, with these following enhanced snippets, you'll have some ready-made starting points to start working on.
All examples can be downloaded directly from my Github
git clone https://github.com/alagrede/znote-app.gitcd znote-app/examples
1. Express JS
Express is one of most popular backend framework to build backends with JS.
Demo: This example show you how to build a simple backend to received data from HTML form or JSON data.Express client/server demo
Playwright is an end-to-end testing framework for modern web apps. But it also can be used to automatize some browser actions!
Demo: This example will show you how to interact by code with a webpage and make screenshots.Playwright demo
Danfo.js is an awesome library providing intuitive, and easy-to-use data structures for manipulating and processing structured data.
Demo: You will see here how to load a dataset from a local file and display it as tableDanfoJS demo
ThreeGlobe is a ThreeJS Globe visualization largely inspired by WebGL Globe. This is a ThreeJS WebGL class to represent data visualization layers on a globe, using a spherical projection.
Demo: Here you will learn you how to load ThreeGlobe and interact with default examples (like satellites).ThreeGlobe satellites
D3.js is one of most powerful and popular JS library for manipulating documents based on data, make advanced visualizations and bring data to life using HTML, SVG, and CSS.
Demo: How to import D3 and draw a simple world map with topojson.D3 Globe demo
Demo: How to import p5 and run a simple dynamic canvas attached with mouse position.P5 demo
7. SQL with Sequelize
Sequelize is a modern TypeScript and Node.js ORM for Oracle, Postgres, MySQL, MariaDB, SQLite and SQL Server, and more. Featuring solid transaction support, relations, eager and lazy loading, read replication and more.
Demo: How to load SQL driver for MySQL, perform a query and display results as HTML tableSQL demo
Built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
You will see here some use-cases using real datasets around climate
10. Population graph
An online product making beautiful screenshots of your code 😍
Demo: Learn how to generate easily beautiful screenshots of your codeRay.so demo
A custom note explaining how to use the
loadBlock function and using it to test svg
Demo: Load and test SVG imagesSVG tester demo
For Znote users, you can directly load all notes directly with the JSON export.
ℹ️ Take the opportunity to make a backup of your database beforehand.
I will continue to add some examples when you need them.
Meanwhile, start turning your daily tasks into something easy and repeatable and your job will be more fun. 🌈️
Don't forget to check our 👉 documentation website.
If you haven't downloaded Znote yet, it's 👉 download this app here
The note-taking app for JS Developers