🚀10 Trending projects on GitHub for web developers - 14th May 2021
source link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-14th-may-2021-1mkd
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
🚀10 Trending projects on GitHub for web developers - 14th May 2021
May 14 Originally published at iainfreestone.com
・2 min read
Trending projects on GitHub for web developers (51 Part Series)
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Slidev
Presentation Slides for Developers
Presentation slides for developers 🧑💻👩💻👨💻
Motivation
I always found myself spending too much time styling and layouting slides when using apps like PowerPoint / Keynote / Google Slides. Whenever I need to share code snippets, I would also need to use other tools to generate the highlighted code as images over and over again.
So as a frontend developer, why not solve it the way that fits better with what I am good at?
Documentations and guides on Sli.dev
Features
- 📝Markdown-based - use your favorite editors and workflow
- 🧑💻Developer Friendly - built-in syntax highlighting, live coding, etc.
- 🎨Themable - theme can be shared and used with npm packages
- 🌈Stylish - Windi CSS on-demand utilities, easy-to-use embedded stylesheets
- 🤹Interactive - embedding Vue components seamlessly
- 🎙Presenter Mode - use…
2. Serverless Next.js Component
Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
serverless-nextjs / serverless-next.js
⚡ Deploy your Next.js apps on AWS Lambda@Edge via Serverless Components
Serverless Next.js Component
A zero configuration Next.js 9.0 serverless component for AWS Lambda@Edge aiming for full feature parity.
Please review features for a list of currently supported features.
Contents
⚠️ This README reflects the latest changes on the
master
branch. It may or may not yet be published to thelatest
(stable) oralpha
release in npm. Please go to Releases, find the correct@sls-next/serverless-component
version you are using, and open the README for that release for more accurate information. If a feature is listed in this README but not working, please first try upgrading to the most recentalpha
release in npm.
Motivation
Since Next.js 8.0, serverless mode was introduced which provides a new low level API which projects like this…
3. Prism
Lightweight, robust, elegant syntax highlighting.
Prism
Prism is a lightweight, robust, and elegant syntax highlighting library. It's a spin-off project from Dabblet.
You can learn more on prismjs.com.
Why another syntax highlighter?
Contribute to Prism!
Prism depends on community contributions to expand and cover a wider array of use cases. If you like it, consider giving back by sending a pull request. Here are a few tips:
- Read the documentation. Prism was designed to be extensible.
- Do not edit
prism.js
, it’s just the version of Prism used by the Prism website and is built automatically. Limit your changes to the unminified files in thecomponents/
folder.prism.js
and all minified files are also generated automatically by our build system. - The build system uses gulp to minify the files and build
prism.js
. With all of Prism's dependencies installed, you just need to run the commandnpm run
…
4. medium-zoom
A JavaScript library for zooming images like Medium
francoischalifour / medium-zoom
🔎🖼 A JavaScript library for zooming images like Medium
medium-zoom
A JavaScript library for zooming images like Medium
🔬 Playground ・ 🔎 Demo ・ 📚 Storybook
Contents
Features
- 📱Responsive — scale on mobile and desktop
- 🚀Performant and lightweight — should be able to reach 60 fps
- ⚡️High definition support — load the HD version of your image on zoom
- 🔎Flexibility — apply the zoom to a selection of images
- 🖱Mouse, keyboard and gesture friendly — click anywhere, press a key or scroll away to close the zoom
- 🎂Event handling — trigger events when the zoom enters a new state
- 📦Customization — set your own margin, background and scroll offset
- 🔧Pluggable — add your own features to the zoom
- 💎Custom templates — extend the default look to match the UI of your app
Installation
The module…
5. Gestalt
A set of React UI components that supports Pinterest’s design language
Gestalt
Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.
Visit the official Gestalt Documentation
Installation
The package can be installed via npm:
npm i gestalt --save npm i gestalt-datepicker --save
Or via yarn:
yarn add gestalt yarn add gestalt-datepicker
Usage
Gestalt exports each component as ES6 modules and a single, precompiled CSS file:
import { Text } from 'gestalt'; import 'gestalt/dist/gestalt.css';
That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.
Development
Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.
Install project…
6. KaTeX
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.
- Fast: KaTeX renders its math synchronously and doesn't need to reflow the page. See how it compares to a competitor in this speed test.
- Print quality: KaTeX's layout is based on Donald Knuth's TeX, the gold standard for math typesetting.
- Self contained: KaTeX has no dependencies and can easily be bundled with your website resources.
- Server side rendering: KaTeX produces the same output regardless of browser or environment, so you can pre-render expressions using Node.js and send them as plain HTML.
KaTeX is compatible with all major browsers, including Chrome, Safari, Firefox, Opera, Edge, and IE 11.
KaTeX supports much (but not all) of LaTeX and many LaTeX packages. See the list of supported functions.
Try out KaTeX on the demo page!
Getting started
Starter template
<!DOCTYPE html> <!-- KaTeX requires the…
7. Rooks
Essential hooks to super charge your components!
imbhargav5 / rooks
Essential hooks ⚓ to super charge your components!
A super awesome collection of regularly used custom hooks as utils for React.
Complete Documentation
List of all hooks
- useBoundingclientrect - getBoundingClientRect hook for React.
- useBoundingclientrectRef - A hook that tracks the boundingclientrect of an element. It returns a callbackRef so that the element node if changed is easily tracked.
- useCountdown - Count down to a target timestamp and call callbacks every second (or provided peried)
- useCounter - Counter hook for React.
- useDebounce - Debounce hook for react
- useDidMount - componentDidMount hook for React
- useDidUpdate - componentDidUpdate hook for react
- useDocumentEventListener - A react hook to an event listener to the document object
- useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
- useEventListenerRef - A react hook to add an event listener to a ref
- useForkRef - A hook that can combine two refs(mutable or callbackRefs) into a single callbackRef
- useFreshRef - Avoid stale state…
8. colors.css
Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.
colors.css 3.0.0
Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.
Stats
Installation
With npm
npm install --save-dev colors.css
With Git
git clone https://github.com/tachyons-css/colors.css
Usage
Using with PostCSS
Import the css module
@import "colors.css";
Then process the CSS using the tachyons-cli
$ npm i -g tachyons-cli $ tachyons-cli path/to/css-file.css > dist/t.css
Using the CSS
The built CSS is located in the css
directory. It contains an unminified and minified version.
You can either cut and paste that css or link to it directly in your html.
<link rel="stylesheet" href="path/to/module/css/colors.css">
Development
The source CSS files can be found in the src
directory.
Running $ npm start
will process the source CSS and place the built CSS in the css
directory.
The CSS
/* COLORS Better default colors…
9. Draftail
A configurable rich text editor built with Draft.js. Draftail aims for a mouse-free, keyboard-centric experience.
springload / draftail
📝🍸 A configurable rich text editor built with Draft.js
Draftail
📝🍸 A configurable rich text editor built with Draft.js. Check out our demos!
Features
Draftail aims for a mouse-free, keyboard-centric experience. Here are important features worth highlighting:
- Support for keyboard shortcuts. Lots of them!
- Paste from Word. Or any other editor. It just works.
- Autolists – start a line with
-
,*
,1.
to create a list item. - Shortcuts for heading levels
##
, code blocks```
, text formats**
, and more. - Undo / redo – until the end of times.
- Common text types: headings, paragraphs, quotes, lists.
- Common text styles: Bold, italic, and many more.
- API to build custom controls for links, images, and more.
- Compatibility with the
draft-js-plugins
ecosystem to build more advanced extensions.
This project adheres to Semantic Versioning, and measures performance and code coverage. It uses Flow types. We also try to follow accessibility best…
10. Supercons
A friendly, open source React iconset
Supercons
A friendly set of open source React icons.
→ Preview & search the iconset
Massive credit to @superbryntendo for the original set of icons & aesthetic inspiration.
Predecessor projects: spectrum-icons, @hackclub/icons
Usage
yarn add supercons # npm i supercons
import React from 'react' import Icon from 'supercons' export default () => ( <div style={{ color: 'magenta' }}> <Icon glyph="like" size={128} /> <Icon glyph="cloud" size={32} /> </div> )
Built with/supports TypeScript.
Props
Prop
Type
Default
Details
glyph
String, required
like
See docs
size
Number or string
32
Sets width & height
as
React component
svg
Must render svg
tag
You can also pass any other props. Remember to make your icons accessible with aria-label
or title
, use aria-hidden
if they’re purely…
Stargazing 📈
Top risers over last 7 days
Top growth(%) over last 7 days
Top risers over last 30 days
Top growth(%) over last 30 days
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.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK