Presentation slides for developers 🧑‍💻👩‍💻👨‍💻

Video Preview | Documentation

Made possible by my Sponsor Program 💖

• 📝 Markdown-based - foucus on content and use your favorite editor
• 🧑‍💻 Developer Friendly - built-in code highlighting, live coding, etc.
• 🎨 Themable - theme can be shared and used with npm packages
• 🌈 Stylish - on-demand utilities via UnoCSS.
• 🤹 Interactive - embedding Vue components seamlessly
• 🎙 Presenter Mode - use another window, or even your phone to control your slides
• 🎨 Drawing - draw and annotate on your slides
• 🧮 LaTeX - built-in LaTeX math equations support
• 📰 Diagrams - creates diagrams using textual descriptions with Mermaid.js
• 🌟 Icons - access to icons from any icon set directly
• 💻 Editor - integrated editor, or the VSCode extension
• 🎥 Recording - built-in recording and camera view
• 📤 Portable - export into PDF, PNGs, or PPTX
• ⚡️ Fast - instant…

A zero configuration Next.js 10/11 serverless component for AWS Lambda@Edge aiming for full feature parity.

Please review features for a list of currently supported features.

• Motivation
• Design principles
• Features
• Getting started
• Lambda@Edge configuration
• Custom domain name
• Custom CloudFront configuration
• Static pages caching
• Public directory caching
• AWS Permissions
• Architecture
• Inputs
• CDK Construct
• FAQ

⚠️ This README reflects the latest changes on the master branch. It may or may not yet be published to the latest (stable) or alpha 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 recent alpha release in npm.

⚠ this is currently using Serverless Components Beta (not GA version) as the project was started before GA. We…

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?

More themes for Prism!

We are currently working on Prism v2 and will only accept security-relevant PRs for the time being.

Once work on Prism v2 is sufficiently advanced, we will accept PRs again. This will be announced on our Discussion page and mentioned in the roadmap discussion.

A JavaScript library for zooming images like Medium

🔬 Playground ・ 🔎 Demo ・ 📚 Storybook

• 📱 Responsive — scale on mobile and desktop
• 🚀 Performant and lightweight — optimized 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
• 🔌 Framework agnostic…

Gestalt is Pinterest’s design system. Our system includes a React component library with comprehensive guidelines, best practices, tools, and resources to support designers and engineers delivering a high-quality product.

Visit the official Gestalt Documentation

The package can be installed via npm:

npm i gestalt --save
npm i gestalt-charts --save
npm i gestalt-datepicker --save

Or via yarn:

yarn add gestalt
yarn add gestalt-charts
yarn add gestalt-datepicker

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';
import 'gestalt/dist/gestalt-datepicker.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.

Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

yarn
yarn 

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!

<!DOCTYPE html>
<!-- KaTeX requires the

• useAsyncEffect - A version of useEffect that accepts an async function
• useDeepCompareEffect - Deep compare dependencies instead of shallow for useEffect
• useDidMount - componentDidMount hook for React
• useDidUpdate - componentDidUpdate hook for react
• useDocumentTitle - A hook to easily update document title with React
• useEffectOnceWhen - Runs a callback effect atmost one time when a condition becomes true
• useIntervalWhen - Sets an interval immediately when a condition is true
• useIsomorphicEffect - A hook that resolves to useEffect on the server and useLayoutEffect on the client.
• useLifecycleLogger - A react hook that console logs parameters as component transitions through lifecycles.
• useLockBodyScroll - This hook locks the scroll of the body element when isLocked is set to true.
• useMouseMoveDelta - Tracks delta of mouse move
• useMouseWheelDelta - Tracks delta of mouse move
• useWillUnmount - componentWillUnmount…

Better default colors for the web. A collection of skin classes for faster prototyping and nicer looking sites.

Customize your own defaults here.

npm install --save-dev colors.css

git clone https://github.com/tachyons-css/colors.css

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

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">

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.

📝🍸 A configurable rich text editor built with Draft.js. Check out our demos!

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. We also try to follow accessibility best practices (tested with aXe)…

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

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.

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…