12 Znote examples to learn how to load external JS libraries

js

use-case

examples

learn

10/11/2022


Intro

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

BASH
git clone https://github.com/alagrede/znote-app.git
cd znote-app/examples

Examples notes

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-demo Express client/server demo

2. Playwright

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 Playwright demo

3. DanfoJS

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 table Table

DanfoJS demo

4. ThreeGlobe

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). Satellites

ThreeGlobe satellites

5. D3

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 demo

D3 Globe demo

6. P5

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else.

Demo: How to import p5 and run a simple dynamic canvas attached with mouse position. P5 demo

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 table SQL demo

SQL demo

8. PlotlyJS

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

9. Active fires (NASA data)

Fires demo

10. Population graph

population demo

11. Climate temperature anomalies

temp demo

12.ISS position

ISS demo

Bonus

Ray.so

An online product making beautiful screenshots of your code 😍

Demo: Learn how to generate easily beautiful screenshots of your code ray.so demo

Ray.so demo

SVG tester

A custom note explaining how to use the loadBlock function and using it to test svg

Demo: Load and test SVG images SVG demo

SVG tester demo

Tips

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.

SVG demo

Go further

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

znote screenshot

WRITTEN BY

@alagrede

The note-taking app for JS Developers


Š 2022 - Znote. Created by Anthony Lagrede Consulting