DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on

๐Ÿš€10 Trending projects on GitHub for web developers - 3rd July 2020

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.

GitHub logo SheetJS / sheetjs

๐Ÿ“— SheetJS Community Edition -- Spreadsheet Data Toolkit

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.

Pro Version

Commercial Support

Rendered Documentation

In-Browser Demos

Source Code

Issues and Bug Reports

File format support for known spreadsheet data formats:

Graph of supported formats (click to show)

circo graph of format support

graph legend

Browser Test

Build Status

Build Status Coverage Status Dependencies Status npm Downloads Analytics

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.

GitHub logo 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
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo 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

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.

GitHub logo 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.

npm version Build Status

keen-slider

Rotation DatePicker

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.

GitHub logo backstage / backstage

Backstage is an open platform for building developer portals

headline

Backstage

License CNCF Status Main CI Build Discord Code style Codecov

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.

software-catalog

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

GitHub logo Hopding / pdf-lib

Create and modify PDF documents in any JavaScript environment

pdf-lib

Create and modify PDF documents in any JavaScript environment.
Designed to work in any modern JavaScript runtime. Tested in Node, Browser, Deno, and React Native environments


Learn more at pdf-lib.js.org

Table of Contents

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.

GitHub logo snabbdom / snabbdom

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.

Snabbdom

A virtual DOM library with focus on simplicity, modularity, powerful features and performance.


License: MIT Build Status npm version npm downloads Join the chat at https://gitter.im/snabbdom/snabbdom

Donate to our collective

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.

GitHub logo alibaba / formily

Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3

English | ็ฎ€ไฝ“ไธญๆ–‡

PRs Welcome


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.

GitHub logo 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 Build Status FOSSA Status Gitpod ready-to-code

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

react-admin-demo

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.

GitHub logo streamlit / streamlit

Streamlit โ€” The fastest way to build data apps in Python

Welcome to Streamlit ๐Ÿ‘‹

Documentation Status

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.

Example of live coding an app in Streamlit|635x380

Installation

pip install streamlit
streamlit hello
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (5)

Collapse
jwp profile image
John Peters

Can't wait to hear elevator music in my app.

Collapse
kartiknair profile image
Kartik Nair

Damn! Keen slider looks amazing!

Collapse
bernardbaker profile image
Bernard Baker

Looking forward to using backstage ๐Ÿคธ

Collapse
yellow1912 profile image
yellow1912

Hey, I just want to let you know that your list is very useful. Thank you and please keep up the good work.

Collapse
yav_pl profile image
Artur

Very nice, thanks.