Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. SheetJS
Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, and test files. Emphasis on parsing and writing robustness, cross-format feature compatibility with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
SheetJS
Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, and test files Emphasis on parsing and writing robustness, cross-format feature compatibility with a unified JS representation, and ES3/ES5 browser compatibility back to IE6.
This is the community version. We also offer a pro version with performance enhancements, additional features like styling, and dedicated support.
File format support for known spreadsheet data formats:
Table of Contents
Expand to show Table of Contents
2. Elevator.js
Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.
tholman / elevator.js
Finally, a "back to top" button that behaves like a real elevator.
elevator.js
Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.
This is very serious stuff, here's a demo!
Instructions
Elevator.js
is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of elements is up to you. Elevator.js
only handles the audio management, and the scroll functionality!
JS
Elevator.js
lives entirely within the js realm, which makes things fairly simple to use.
You'll need to create a new instance of Elevator
, and pass it some audio elements.
<script>
// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3'
});
}
// You
…3. jExcel
jExcel CE is a lightweight Vanilla JavaScript plugin to create amazing web-based interactive HTML tables and spreadsheets compatible with Excel or any other spreadsheet software.
jspreadsheet / ce
Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
Jspreadsheet CE v4: The JavaScript spreadsheet
Jexcel CE has been renamed to Jspreadsheet CE
News
- Important: Please import jspreadsheet.css (jexcel.css is not longer available in this package).
- Please use Jsuites v4
- New mask system (https://jsfiddle.net/spreadsheet/vmjo34r8/)
Jspreadsheet CE is a lightweight Vanilla JavaScript plugin to create amazing web-based interactive HTML tables and spreadsheets compatible with other spreadsheet software. You can create an online spreadsheet table from a JS array JSON, CSV or XSLX files. You can copy from excel and paste straight to your Jspreadsheet CE spreadsheet and vice versa It is very easy to integrate any third party JavaScript plugins to create your own custom columns, custom editors, and customize any feature into your application. Jspreadsheet CE has plenty of different input options through its native column types to cover the most common web-based application requirements. It is a complete solution for web data management. Create amazing…
4. keen-slider
keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10.
rcbyr / keen-slider
The HTML touch slider carousel with the most native feeling
Note: I'm currently focused on working on the new main version of this library. I will come back to issues and PR's after the release.
keen-slider
keen-slider is a free library agnostic touch slider with native touch/swipe behavior and great performance. It comes with no dependencies, typescript support, multitouch support and is compatible with all common browsers including IE 10.
Getting Started
Contributing
If you find a bug or have ideas for better code, I would be grateful for your contribution. Just create an issue or a pull request.
5. Backstage
Backstage is an open platform for building developer portals. It’s based on the developer portal we’ve been using internally at Spotify for over four years. Backstage can be as simple as a services catalog or as powerful as the UX layer for your entire tech infrastructure.
Backstage
What is Backstage?
Backstage is an open platform for building developer portals. Powered by a centralized software catalog, Backstage restores order to your microservices and infrastructure and enables your product teams to ship high-quality code quickly — without compromising autonomy.
Backstage unifies all your infrastructure tooling, services, and documentation to create a streamlined development environment from end to end.
Out of the box, Backstage includes:
- Backstage Software Catalog for managing all your software (microservices, libraries, data pipelines, websites, ML models, etc.)
- Backstage Software Templates for quickly spinning up new projects and standardizing your tooling with your organization’s best practices
- Backstage TechDocs for making it easy to create, maintain, find, and use technical documentation, using a "docs like code" approach
- Plus, a growing ecosystem of open source plugins that further expand Backstage’s customizability and functionality
Backstage was created by Spotify but is now hosted by the Cloud Native Computing Foundation…
6. pdf-lib
pdf-lib was created to address the JavaScript ecosystem's lack of robust support for PDF manipulation (especially for PDF modification).
Learn more at pdf-lib.js.org
Table of Contents
- Features
- Motivation
- Usage Examples
- Deno Usage
- Complete Examples
- Installation
- Documentation
- Fonts and Unicode
- Creating and Filling Forms
- Limitations
- Help and Discussion
- Encryption Handling
- Migrating to v1.0.0
- Contributing
- Tutorials and Cool Stuff
- Prior Art
- License
Features
- Create new PDFs
- Modify existing PDFs
- Create forms
- Fill forms
- Flatten forms - new!
- Add Pages
- Insert Pages
- Remove Pages
- Copy pages between PDFs
- Draw Text
- Draw Images
- Draw PDF Pages
- Draw Vector Graphics
- Draw SVG…
7. Snabbdom
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
snabbdom / snabbdom
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
A virtual DOM library with focus on simplicity, modularity, powerful features and performance.
Thanks to Browserstack for providing access to their great cross-browser testing tools.
Introduction
Virtual DOM is awesome. It allows us to express our application's view as a function of its state. But existing solutions were way way too bloated, too slow, lacked features, had an API biased towards OOP and/or lacked features I needed.
Snabbdom consists of an extremely simple, performant and extensible core that is only ≈ 200 SLOC. It offers a modular architecture with rich functionality for extensions through custom modules. To keep the core simple, all non-essential functionality is delegated to modules.
You can mold Snabbdom into whatever you desire! Pick, choose and customize the functionality you want. Alternatively you can just use the default extensions and get a virtual DOM library with high performance, small size and all the features listed below.
Features
- …
8. Formily
Alibaba Group Unified Form Solution.
English | 简体中文
Background
In React, the whole tree rendering performance problem of the form is very obvious in the controlled mode. Especially for the scene of data linkage, it is easy to cause the page to be stuck. To solve this problem, we have distributed the management of the state of each form field, which significantly improves the performance of the form operations. At the same time, we deeply integrate the JSON Schema protocol to help you solve the problem of back-end driven form rendering quickly.
Features
-
🖼 Designable, You can quickly develop forms at low cost through Form Builder. -
🚀 High performance, fields managed independently, rather rerender the whole tree. -
💡 Integrated Alibaba Fusion and Ant Design components are guaranteed to work out of the box. -
🎨 JSON Schema applied for BackEnd. JSchema applied for FrontEnd. Two paradigms can be converted to each other. -
🏅 Side effects…
9. react-admin
A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design.
marmelab / react-admin
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
react-admin
A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Previously named admin-on-rest. Open sourced and maintained by marmelab.
Home page - Documentation - Demo - Blog - Releases - Support
Features
- Adapts to any backend (REST, GraphQL, SOAP, etc.)
- Powered by material-ui, redux, react-final-form, react-router and a few more
- Super-fast UI thanks to optimistic rendering (renders before the server returns)
- Undo updates and deletes for a few seconds
- Relationships (many to one, one to many)
- Data Validation
- Internationalization (i18n)
- Themeable, Highly customizable interface
- Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
- Full-featured datagrid (sort, pagination, filters)
- Large library of components for various data types: boolean, number, rich text, etc.
- Conditional formatting
- Filter-as-you-type
- Supports any form layout (simple, tabbed, etc.)
- Custom actions
- WYSIWYG editor
- Customize dashboard, menu, layout
- Super…
10. Streamlit
Streamlit lets you create apps for your machine learning projects with deceptively simple Python scripts. It supports hot-reloading, so your app updates live as you edit and save your file. No need to mess with HTTP requests, HTML, JavaScript, etc. All you need is your favorite editor and a browser.
Welcome to Streamlit 👋
The fastest way to build and share data apps.
Streamlit lets you turn data scripts into sharable web apps in minutes, not weeks. It's all Python, open-source, and free! And once you've created an app you can use our free sharing platform to deploy, manage, and share your app with the world.
Installation
pip install streamlit
streamlit hello
Streamlit can also be installed in a virtual environment on Windows, Mac, and Linux.
A little example
Streamlit makes it incredibly easy to build interactive apps:
import streamlit as st
x = st.slider('Select a value')
st.write(x, 'squared is', x * x)
A bigger example
Streamlit's simple and focused API lets you build incredibly rich and powerful tools. This demo project lets you browse the entire Udacity self-driving-car dataset and run inference in real-time…
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (5)
Can't wait to hear elevator music in my app.
Damn! Keen slider looks amazing!
Looking forward to using backstage 🤸
Hey, I just want to let you know that your list is very useful. Thank you and please keep up the good work.
Very nice, thanks.