Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. There are currently 373 icons and the average size is under 518 bytes!

The logos have a 512x512 viewbox, they will fit in a circle with radius 256. They will scale up and down to suit your needs.

Say thanks!

527 Bytes SVG	3,328 Bytes PNG	352 Bytes SVG	2,987 Bytes PNG	235 Bytes SVG	1,615 Bytes PNG

1Password 360 bytes	Acast 402 bytes	Access 349 bytes	ActivityPub 337 bytes	Adobe 220 bytes	Airbnb 356 bytes
Amazon 642 bytes	Amazon Alexa 252 bytes	Amazon Simple Storage Service 527 bytes	Amber Framework 415 bytes	andOTP 253 bytes	Android 372 bytes
AngelList 965 bytes	Angular 317 bytes	Ansible 311 bytes	Apereo Foundation 453 bytes	Apple 354 bytes	Apple Music 490 bytes
Apple Podcasts 940 bytes	Arch Linux 308

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It can work with pretty much any markup, doesn’t depend on any other frameworks, and has automatic language detection.

Contents

• Basic Usage
  • In the Browser
    • Plaintext Code Blocks
    • Ignoring a Code Block
  • Node.js on the Server
• Supported Languages
• Custom Usage
  • Using custom HTML
  • Using with Vue.js
  • Using Web Workers
• Importing the Library
  • Node.js / require
  • ES6 Modules / import
• Getting the Library
  • Fetch via CDN
    • cdnjs (link)
    • jsdelivr (link)
    • unpkg (link)
    • Download prebuilt CDN assets
  • Download from our website
  • Install via NPM package
  • Build from Source
• Requirements
• License
• Links

As always, major releases do contain breaking changes which may require action from users. Please read VERSION_11_UPGRADE.md for a detailed summary of breaking changes and any actions you may need to take.

Please…

A library to generate PDFs in JavaScript.

You can catch me on twitter: @MrRio or head over to my company's website for consultancy.

jsPDF is now co-maintained by yWorks - the diagramming experts.

Recommended: get jsPDF from npm:

npm install jspdf --save
# or
yarn add jspdf

Alternatively, load it from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.2/jspdf.umd.min.js"></script>

Or always get latest version via unpkg

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

The dist folder of this package contains different kinds of files:

• jspdf.es.*.js: Modern ES2015 module format.
• jspdf.node.*.js: For running in Node. Uses file operations for loading/saving files instead of browser APIs.
• jspdf.umd.*.js: UMD module format. For AMD or script-tag loading.
• polyfills*.js: Required polyfills for older browsers like Internet Explorer. The es variant simply imports all required polyfills from core-js…

Website • Getting Started • Docs • Examples • Blog • Slack • Twitter

Cube is the semantic layer for building data applications. It helps data engineers and application developers access data from modern data stores, organize it into consistent definitions, and deliver it to every application.

Learn more about connecting Cube to data sources and analytics & visualization tools.

Cube was designed to work with all SQL-enabled data sources, including cloud data warehouses like Snowflake or Google BigQuery, query engines like Presto or Amazon Athena, and application databases like Postgres. Cube has a built-in relational caching engine to provide sub-second latency and high concurrency for API requests.

For more details, see the introduction page in our documentation.

If you are building a data application—such as a business intelligence tool or a customer-facing analytics feature—you’ll probably face the following problems:

1. SQL code organization. Sooner or later, modeling…

Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.

yarn add react-icons
# or
npm install react-icons --save

example usage

import { FaBeer } from "react-icons/fa";

function Question() {
  return (
    <h3>
      Lets go for a <FaBeer />?
    </h3>
  );
}

View the documentation for further usage examples and how to use icons from other packages. NOTE: each Icon package has it's own subfolder under react-icons you import from.

For example, to use an icon from Material Design, your import would be: import { ICON_NAME } from 'react-icons/md';

Note This option has not had a new release for some time. More info #593

If your…

CSS tricks web developers need to know

🌏 You-need-to-know-css

Several quick start options are available:

• Clone the repo: https://github.com/l-hammer/You-need-to-know-css.git
• Install docsify with docsify: npm install docsify-cli -g (or yarn global add docsify-cli)
• Development run docsify serve
• Open http://localhost:3000 in your browser.

• 🍴Fork it!
• 🔀Create your branch: git checkout -b new-branch
• 🔧Make your changes
• 📝Commit your changes: git commit -am 'Add some feature'
• 🚀Push to the branch: git push origin new-branch
• 🎉Submit a pull request

or submit an issue - any helpful suggestions are welcomed. 😜

This project exists thanks to all the people who contribute.

If you find this project useful, you can buy me a coffee ☕, Thank you! 🙏🏻 🙏 🙏🏿

If you provide your github in the message, it will show up here with a link to your github.

Thank you to all our backers! 🙏…

A small React hook to turn elements into fully renderable & editable content surfaces, like code editors, using contenteditable (and magic)

useEditable is a small hook that enables elements to be contenteditable while still being fully renderable. This is ideal for creating small code editors or prose textareas in just 2kB!

It aims to allow any element to be editable while still being able to render normal React elements to it — no innerHTML and having to deal with operating with or rendering to raw HTML, or starting a full editor project from scratch.

Check out the full demo on CodeSandbox with prism-react-renderer!

First install use-editable alongside react:

yarn add use-editable
# or
npm install --save use-editable

You'll then be able to import useEditable and pass it an HTMLElement ref and an onChange handler.

import React, { useState, useRef } from 'react';
import

Atomic Layout is a spatial distribution library for React. It uses CSS Grid to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.

import React from 'react'
import { Composition } from 'atomic-layout'
// Define layout areas: visual representation
// of what composes a layout, detached from
// what components are actually rendered.
const areasMobile = `
  thumbnail
  header
  footer
`

// Declare responsive changes of your areas.
// Operate in two dimensions, remove areas
// or introduce new ones.
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition areas={areasMobile} areasMd={areasTablet} gap={20}>
    {/* Get React components based on provided areas */}
    {(

The AWESOME remove.bg API is quite easy to use, but it can always be easier - that's where this package comes in.

Get your API key from the remove.bg website At the moment it's early access, so it may take some time to get yours.

npm i remove.bg

Look at the various removeFrom*.ts files in the examples folder, or check out the snippets below.

The common input parameters of all three currently supported removeBackgroundFrom* functions are:

Only the apiKey property is mandatory.

  How To Use • Contributing • Website • Product Hunt

Other Checklists:
  🎮 Front-End Performance Checklist • 💎 Front-End Design Checklist

It is based on Front-End developer's years of experience, with the additions coming from some other open-source checklists.

All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential (in the case of an administration web app, you may not need RSS feed for example). We choose to use 3 levels of flexibility:

indicates that the item is recommended but can be…