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.
jerryscript-project / jerryscript
Ultra-lightweight JavaScript engine for the Internet of Things.
JerryScript: JavaScript engine for the Internet of Things
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:
IRC channel: #jerryscript on freenode Mailing list: jerryscript-dev@groups.io, you can subscribe here and access the mailing list archive here.
Quick Start
Getting the sources
git clone https://github.com/jerryscript-project/jerryscript.git
cd
…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.
jquense / react-big-calendar
gcal/outlook like calendar component
react-big-calendar
An events calendar component built for React and designed for modern browsers (read: not IE) and uses flexbox over the classic tables-caption approach.
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 container
element has a height, or the calendar won't be visible. To provide your own custom styling, see the Custom Styling topic.
Starters
- react-big-calendar
- react-big-calendar with drag and drop
- react-big-calendar with TypeScript and React hooks bundled with Vite
Run examples locally
$ git clone git@github.com:jquense/react-big-calendar.git
$ cd react-big-calendar
$ yarn
$ yarn storybook
Localization and Date Formatting
react-big-calendar
includes four options for handling the date formatting and culture localization, depending
on your preference of DateTime libraries. You can use either the Moment.js, Globalize.js, date-fns, Day.js localizers.
Regardless of your choice, you must…
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.
JedWatson / react-select
The Select Component for React.js
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
We are an open source project that is continously supported by the community.
React Select helps you develop powerful select components that just work out of the box, without stopping you from customising the parts that are important to you.
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?
- v3, v4, and v5 upgrade guide
- v2 upgrade guide
- React Select v1 documentation and examples are available at v1.react-select.com
4. Reactour
Tourist Guide into your React Components
elrumordelaluz / reactour
Tourist Guide into your React Components
Tourist Guide and a set of Assistants to travel into your React Components
Documentation
Packages
The main package, which uses the other ones to highlight parts of your application from an array of steps.
A customizable Component to highlight certain element or area of the viewport.
A customizable Component to attach to an element or position of the viewport to show content.
A set of helper functions used by the other packages.
The place where all the stuff is visible working, live here.
Sponsored by
Gold sponsors 🥇
Reactour is proud to be sponsored by Frigade, a developer tool for building better product onboarding: guided tours, getting started checklists, announcements, and more.
Repo Activity
License
MIT © Lionel Tzatzkin
5. Terminalizer
Record your terminal and generate animated gif images or share a web player
faressoft / terminalizer
🦄 Record your terminal and generate animated gif images or share a web player
Terminalizer
Record your terminal and generate animated gif images or share a web player link www.terminalizer.com
Built to be jusT cOol 👌🦄 !
If you think so, support me with a
star
and afollow
😘
Table of Contents
- Terminalizer
- Table of Contents
- Features
- What's Next
- Installation
- Getting Started
- Usage
- Configurations
- FAQ
- Issues
- License
Features
- Highly customizable.
- Cross platform (Linux, Windows, MacOS).
- Custom
window frames
. - Custom
font
. - Custom
colors
. - Custom
styles
withCSS
. - 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.
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.
FilePond adapters are available for React, Vue, Angular, Svelte, and jQuery
Buy me a Coffee / Use FilePond with Pintura / Dev updates on Twitter
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.
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.
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 This is not a mobile-first UI toolkit.
Read the introductory blog post ▸
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.
- – Design system color variables.
- – Core styles & components.
- – Components for interacting with dates and times.
- – Next-generation components for interacting with dates and times.
- – APIs for displaying icons (contains both SVG and icon font implementations).
- – Theme for Monaco Editor (⚠️ experimental).
- – Components…
8. ress
Modern CSS reset
filipelinhares / ress
🚿 A modern CSS reset
Modern CSS reset
Installation
npm install --save ress
or
yarn add ress
Features
- Apply
box-sizing: border-box;
in all elements. - Reset
padding
andmargin
in all elements. - Specify
background-repeat: no-repeat
in all elements and pseudo elements. - Inherit
text-decoration
andvertical-align
to::before
and::after
. - Remove the
outline
when hovering in all browsers. - Specify
font-family: monospace
in code elements. - Reset
border-radius
in input elements. - Specify font inheritance of form elements.
- Remove the default button styling in all browsers.
- Specify textarea resizability to vertical.
- Apply
cursor: pointer
to button elements. - Apply
tab-size: 4
inhtml
. - Style
select
like a standard input. - Style
cursor
by aria attributes.
Crossbrowser
ress uses Normalize.css under the hood with some customizations to apply a solid base to start your stylesheet.
Browser support
- Chrome
- Edge
- Firefox ESR+
- Internet Explorer 10+
- Opera
- Safari 8+
CDN
https://unpkg.com/ress/dist/ress.min.css
# Production
https://cdn.jsdelivr.net/npm/ress@4.0.0/dist/ress.min.css
# Development
https://cdn.jsdelivr.net/gh/filipelinhares/ress@latest/dist/ress.min.css
License
MIT © Filipe…
9. Constate
Write local state using React Hooks and lift it up to React Context only when needed with minimum effort.
Constate
Write local state using React Hooks and lift it up to React Context only when needed with minimum effort.
🕹 CodeSandbox demos 🕹 | ||||
---|---|---|---|---|
Counter | I18n | Theming | TypeScript | Wizard Form |
Basic example
import React, { useState } from "react";
import constate from "constate";
// 1️⃣ Create a custom hook as usual
function useCounter() {
const [count, setCount] = useState(0);
const increment = () => setCount(prevCount => prevCount + 1);
return { count, increment };
}
// 2️⃣ Wrap your hook with the constate factory
const [CounterProvider, useCounterContext] = constate(useCounter);
function Button() {
// 3️⃣ Use context instead of custom hook
const { increment } = useCounterContext();
return <button onClick={increment}>+</button
…10. Lazy Collections
Collection of fast and lazy operations
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 nice
however they create new arrays and everything is eagerly done before going to
the next step.
This is where lazy collections come in, under the hood we use iterators and async 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 of
the functions uses an asyncIterator
(for example when you introduce
delay(100)
), don't forget to await
the result!
let program = pipe(
map((x) => x * 2),
filter((x) => x % 4 === 0),
filter((x) => x % 100 === 0),
filter((x) => x % 400 === 0),
toArray
…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 (0)