Pkg
Stats

npm package discovery and stats viewer.

Discover Tips

General search
[free text search, go nuts!]
Package details
pkg:[package-name]
User packages
@[username]

Sponsor

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Twitter
@PkgStats
GitHub
pkgstats
Twitter
@ryanhefner
GitHub
ryanhefner
Site
ryanhefner.com

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

Framework
react / react-dom
Server
next / express / next-routes
Data Store
redux / react-redux / next-redux-wrapper / redux-thunk / redux-logger
Caching
lru-cache
CSS / Styling
next-page-transitions / styled-components
Typeface
@ibm/plex
Avatars
gravatar
Data Viz
chart.js / react-sparklines
Date formatting
dayjs
Infinite scrolling
react-scroll-trigger
Markdown rendering
react-markdown
Repository url parsing
hosted-git-info
User data
npm-user
Compiling
babel-plugin-module-resolver / babel-plugin-styled-components
Types
prop-types
Odds & Ends
es6-promise / isomorphic-fetch

© 2024 – Pkg Stats / Ryan Hefner

zl-jspg

v1.1.1

Published

2 years ago

A smart code-editor for js & React. Also an interview question practice playground for Vincent.

Downloads

1

0High
0Medium
0Low

zl-jspg (ZL's JS Code Playground)

A lightweight & easy-to-use code-editor for markdown & JavaScript.

Introduction

It is inspired and modified from a great course on Udemy taught by Stephen Grider. Definitely deserve to check it out, and special thanks to Stephen!
If you are familiar with Python, this is more like a JavaScript version Jupyter notebook. Perfect for practising interview questions or running the short demo for unfamiliar packages.
v1.0.0 is there! All the basic features are implemented. Feedbacks are very welcome and feel free to discuss the details or arrange in a UI/UX User Evaluation session with me.

Main Features

Add the code cell or markdown cell by hovering the divider between cells. And click the text cell to edit it.
The code in each cell is all joined together into one file. Definition in previous cells can be referred in the upcoming cells.
Use the built-in function show() to display react component, string, number, array etc in the preview window on the right-hand side.
Format the code by clicking the right-top button in the code editor.
Remove, reorder the cells using the three buttons on the right-top corner.

How to use it

Make sure Node.js 16.0.0+ is on your machine. Otherwise, Ahead to install

Open your terminal, type in npm i -g zl-jspg
Optional: cd to your favorite directory (mine is Desktop)
Run zl-jspg serve to start the server. Default port: 4005, filename: notebook.js
- Custom port:zl-jspg serve --port=3005 or -p 3005.
- Custom file: zl-jspg serve -p 4005 vincentBook.js. It will create a new js file under your current directory.

Project Structure

Currently consists of three linked packages:

zl-jspg (a.k.a. cli) Setting command line & start up local-api
@zl-jspg/local-api
- GET '/': serve up the React app.
- POST '/cells': Save code cells into the local file
- GET 'cells': Load up code cells from local file
@zl-jspg/local-client
- Public version of the React app

Tech Stack

TypeScript, React, Redux, ESbuild, express, commander...

Upcoming feature

T.B.C