Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 29, 2021 02:48 pm GMT

10 Trending projects on GitHub for web developers - 29th January 2021

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. JerryScript

JerryScript: JavaScript engine for the Internet of Things. A lightweight JavaScript engine for resource-constrained devices such as microcontrollers. It can run on devices with less than 64 KB of RAM and less than 200 KB of flash memory.

GitHub logo jerryscript-project / jerryscript

Ultra-lightweight JavaScript engine for the Internet of Things.

JerryScript: JavaScript engine for the Internet of Things

LicenseGitHub Actions StatusAppVeyor Build StatusFOSSA StatusIRC Channel

JerryScript is a lightweight JavaScript engine for resource-constrained devices such as microcontrollers. It can run on devices with less than 64 KB of RAM and less than 200 KB of flash memory.

Key characteristics of JerryScript:

  • Full ECMAScript 5.1 standard compliance
  • 160K binary size when compiled for ARM Thumb-2
  • Heavily optimized for low memory consumption
  • Written in C99 for maximum portability
  • Snapshot support for precompiling JavaScript source code to byte code
  • Mature C API, easy to embed in applications

Additional information can be found on our project page and Wiki.

Memory usage and Binary footprint are measured at here with real target daily.

The latest results on Raspberry Pi 2:

Remote Testrunner

IRC channel: #jerryscript on freenodeMailing list: [email protected], you can subscribe here and access the mailing list archive here.

Quick Start

Getting the sources

git clone https://github.com/jerryscript-project/jerryscript.gitcd
Enter fullscreen mode Exit fullscreen mode

2. react-big-calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

GitHub logo jquense / react-big-calendar

gcal/outlook like calendar component

react-big-calendar

An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.

DEMO and Docs

Inspired by Full Calendar.

Use and Setup

yarn add react-big-calendar or npm install --save react-big-calendar

Include react-big-calendar/lib/css/react-big-calendar.css for styles, and make sure your calendar's containerelement has a height, or the calendar won't be visible. To provide your own custom styling, see the Custom Styling topic.

Starters

Run examples locally

$ git clone [email protected]:intljusticemission/react-big-calendar.git$ cd react-big-calendar$ yarn$ yarn examples
Enter fullscreen mode Exit fullscreen mode

Localization and Date Formatting

react-big-calendar includes three options for handling the date formatting and culture localization, dependingon your preference of DateTime libraries. You can use either the Moment.js, Globalize.js or date-fns localizers.

Regardless of your choice, you must choose a localizer to use this library:

Moment.js

import { Calendar,
Enter fullscreen mode Exit fullscreen mode

3. React Select

The Select Component for React.js. A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete, async and creatable support.

GitHub logo JedWatson / react-select

The Select Component for React.js

NPMCircleCICoverage StatusSupported by Thinkmill

React-Select

The Select control for React. Initially built for use in KeystoneJS.

See react-select.com for live demos and comprehensive docs.

React Select is funded by Thinkmill and Atlassian. It represents a whole new approach to developing powerful React.js components that just work out of the box, while being extremely customisable.

For the story behind this component, watch Jed's talk at React Conf 2019 - building React Select

Features include:

  • Flexible approach to data, with customisable functions
  • Extensible styling API with emotion
  • Component Injection API for complete control over the UI behaviour
  • Controllable state props and modular architecture
  • Long-requested features like option groups, portal support, animation, and more

Using an older version?

Installation and usage

The easiest way to use react-select is to install it from npm and

4. Reactour

Tourist Guide into your React Components

GitHub logo elrumordelaluz / reactour

Tourist Guide into your React Components

Reactour

Tourist Guide into your React Components

Demo

Edit 6z56m8x18k

The master branch is currently in development. Please use the v1 branch to follow the current versions published.

Install

npm i -S reactour# oryarn add reactour
Enter fullscreen mode Exit fullscreen mode

From v1.9.1 styled-components it isn't bundled into the package and is required styled-components@^4 and react@^16.3 due to the use of createRef, so:

npm i -S styled-components@^4.0.0# oryarn add styled-components@^4.0.0
Enter fullscreen mode Exit fullscreen mode

Usage

Add the Tour Component in your Application, passing the steps with the elements to highlight during the Tour.

import React, { useState } from 'react'import Tour from 'reactour'const steps = [  {    selector: '.first-step',    content: 'This is my first Step',  },  // ...];const App = () => {  const [isTourOpen, setIsTourOpen] = useState(false);  return (    <>      { /* other
Enter fullscreen mode Exit fullscreen mode

5. Terminalizer

Record your terminal and generate animated gif images or share a web player

GitHub logo faressoft / terminalizer

Record your terminal and generate animated gif images or share a web player

Terminalizer

npmnpmGitterUnicornTweet

Record your terminal and generate animated gif images or share a web player link terminalizer.com

Built to be jusT cOol !

If you think so, support me with a star and a follow

Built while listening to Nyan Cat

Table of Contents

Features

  • Highly customizable.
  • Cross platform (Linux, Windows, MacOS).
  • Custom window frames.
  • Custom font.
  • Custom colors.
  • Custom styles with CSS.
  • Watermark.
  • Edit frames and adjust delays before rendering.
  • Skipping frames by a step value to reduce the number of rendered frames.
  • Render images with texts on them instead of capturing your screen for better quality.
  • The ability to configure

6. Filepond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

GitHub logo pqina / filepond

A flexible and fun JavaScript file upload library

FilePond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

License: MITnpm version

21 KB gzipped. FilePond adapters are available for React, Vue, Angular and jQuery

FilePond is maintained by Rik Schennink

Core Features

  • Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
  • Drop files, select on filesystem, copy and paste files, or add files using the API.
  • Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
  • Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
  • Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
  • Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Learn more about FilePond

Also need Image Editing?

Doka.js

7. Blueprint

Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

GitHub logo palantir / blueprint

A React-based UI toolkit for the web

Blueprint CircleCI

Blueprint is a React-based UI toolkit for the web.

It is optimized for building complex, data-dense web interfaces for desktop applications which run in modern browsers and IE11. This is not a mobile-first UI toolkit.

Read the introductory blog post

View the full documentation

Try it out on CodeSandbox

Read frequently asked questions (FAQ) on the wiki

Changelog

Blueprint's change log and migration guides for major versions live on the repo's Github wiki.

Packages

This repository contains multiple projects in the packages/ directory that fall into 3 categories:

Libraries

These are the component libraries we publish to NPM.

  • npm Core styles & components.
  • npm Components for interacting with dates and times.
  • npm Components for generating and displaying icons.
  • npm Popover2 and Tooltip2 components.
  • npm Components for selecting items from a list.
  • npm Scalable interactive table component.
  • npm Components for picking timezones.

Applications

These are

8. ress

Modern CSS reset

GitHub logo filipelinhares / ress

A modern CSS reset

A brunch and the ress name

Modern CSS reset

Build Status Size npm

Installation

npm install --save ress
Enter fullscreen mode Exit fullscreen mode

or

bower install --save ress
Enter fullscreen mode Exit fullscreen mode

Features

  1. Apply box-sizing: border-box; in all elements.
  2. Reset padding and margin in all elements.
  3. Specify background-repeat: no-repeat in all elements and pseudo elements.
  4. Inherit text-decoration and vertical-align to ::before and ::after.
  5. Remove the outline when hovering in all browsers.
  6. Specify font-family: monospace in code elements.
  7. Reset border-radius in input elements.
  8. Specify font inheritance of form elements.
  9. Remove the default button styling in all browsers.
  10. Specify textarea resizability to vertical.
  11. Apply cursor: pointer to button elements.
  12. Apply tab-size: 4 in html.
  13. Style select like a standard input.
  14. Style cursor by aria attributes.
  15. Hide content from screens but not screenreaders.

Crossbrowser

ress uses Normalize.css under the hood with some customizations to apply a solid base to start your stylesheet.

Browser support

Inherit from Normalize

CDN

unpkg

https://unpkg.com/ress/dist/ress.min.css
Enter fullscreen mode Exit fullscreen mode

RawGit

# Productionhttps://cdn.rawgit.com/filipelinhares/ress/master/dist/ress.min.css# Developmenthttps://rawgit.com/filipelinhares/ress/master/dist/ress.min.css
Enter fullscreen mode Exit fullscreen mode

License

MIT

9. Constate

Write local state using React Hooks and lift it up to React Context only when needed with minimum effort.

GitHub logo diegohaz / constate

React Context + State

constate logo

Constate

NPM versionNPM downloadsSizeDependenciesBuild StatusCoverage Status

Write local state using React Hooks and lift it up to React Context only when needed with minimum effort.



Basic example

import React, { useState } from "react"import constate from "constate"// 1 Create a custom hook as usualfunction useCounter() {  const [count, setCount] = useState(0)  const increment = () => setCount(prevCount => prevCount + 1)  return { count, increment };}// 2 Wrap your hook with the constate factoryconst [CounterProvider, useCounterContext] = constate(useCounter);function Button() {  // 3 Use context instead of custom hook  const { increment } = useCounterContext();  return <button onClick={increment}>+</button>;}function Count() {  // 4
Enter fullscreen mode Exit fullscreen mode

10. Lazy Collections

Collection of fast and lazy operations

GitHub logo RobinMalfait / lazy-collections

Collection of fast and lazy operations

Lazy Collections

Fast and lazy collection operations

Working with methods like .map(), .filter() and .reduce() is nicehowever they create new arrays and everything is eagerly done before going tothe next step.

This is where lazy collections come in, under the hood we use iterators andasync iterators so that your data flows like a stream to have the optimal speed.

All functions should work with both iterator and asyncIterator, if one ofthe functions uses an asyncIterator (for example when you introducedelay(100)), don't forget to await the result!

const program = pipe(  map(x => x * 2),  filter(x => x % 4 === 0),  filter(x => x % 100 === 0),  filter(x => x % 400 === 0),  toArray());program(range(
Enter fullscreen mode Exit fullscreen mode

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.


Original Link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-29th-january-2021-4ml2

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To