loading...

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

iainfreestone profile image Iain Freestone ใƒปUpdated on ใƒป2 min read

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 js-xlsx

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 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
โ€ฆ

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 paulhodel / jexcel

jExcel is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with Excel or any other spreadsheet software.

The JavaScript spreadsheet

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. 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 jExcel 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. jExcel 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 applications with jExcel CE JavaScript spreadsheet.

Main advantages

  • Make rich and user-friendly web interfaces and applications.
  • You can easily handle complicated data inputs in a way users are used..
  • Improve your user software experience.
  • Createโ€ฆ

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

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 spotify / backstage

Backstage is an open platform for building developer portals

headline

Backstage

License Discord Code style

What is Backstage?

Backstage is an open platform for building developer portals. Powered by a centralized service catalog, Backstage restores order to your microservices and infrastructure. So your product teams can 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.

service-catalog

Out of the box, Backstage includes:

  • Backstage Service 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

For more information go to backstage.io or join our Discord chatroom.

Project roadmap

We createdโ€ฆ


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
  • Add Pages
  • Insert Pages
  • Remove Pages
  • Copy pages between PDFs
  • Draw Text
  • Draw Images
  • Draw PDF Pages
  • Draw Vector Graphics
  • Draw SVG Paths
  • Measure width and height of text
  • Embed Fonts (supports UTF-8 and UTF-16 character sets)
  • Set document metadata
  • Read document metadata
  • Add attachments

Motivation

pdf-lib was created to address the JavaScript ecosystem'sโ€ฆ


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/paldepind/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.

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

  • ๐Ÿš€ 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 are managed independently, making form data linkages easier than ever before.
  • ๐ŸŒฏ Override mostโ€ฆ





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

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, redux-saga, react-router, reselect and a few more
  • Super-fast UI thanks to optimistic rendering (renders before the server returns)
  • Undo updates and deletes for a few seconds
  • Complete documentation
  • Relationships (many to one, one to many)
  • Data Validation
  • Internationalization (i18n)
  • Conditional formatting
  • Themeable
  • Supports any authentication provider (REST API, OAuth, Basic Auth, ...)
  • Full-featured datagrid (sort, pagination, filters)
  • Filter-as-you-type
  • Supports any form layout (simple, tabbed, etc.)
  • Custom actions
  • Large library of components for various data types: boolean, number, rich text, etc.
  • WYSIWYG editor
  • Customize dashboardโ€ฆ

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 data apps.

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. Take a look at Streamlit in action:

Example of live coding a dashboard in Streamlit|635x380

Check out our launch blog post!!

Installation

pip install streamlit
streamlit hello

We also have suggestions for installing Streamlit in a virtual environment in Windows, Mac, and Linux.

Example

Streamlit lets you build interactive apps ridiculously easily:

import streamlit as st
x = st.slider('Select a value')
st.write(x, 'squared is', x * x)

A Bigger Example

Despite its simplicity Streamlit lets you build incredibly rich and powerfulโ€ฆ


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

pic
Editor guide
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.