Super Tiny Icons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 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!

How Small?

542 Bytes SVG	7,225 Bytes PNG	414 Bytes SVG	5,568 Bytes PNG	250 Bytes SVG	5,031 Bytes PNG

What's Available so far?

Social Media

flickr 250 Bytes	Facebook 311 Bytes	Tumblr 422 Bytes	Twitter 414 Bytes	LinkedIn 370 Bytes	Instagram 767 Bytes
reddit 607 Bytes	Pinterest 526 Bytes	VK 534 Bytes	Mastodon 550 Bytes	imgur 278 Bytes	Slack 531 Bytes
dev.to 623 Bytes	Goodreads 669 Bytes	TikTok 433 Bytes	Friendica 849 Bytes

Media

SoundCloud 959 Bytes	Vimeo 376 Bytes	Spotify 436 Bytes	YouTube 359 Bytes	Apple Music 514 Bytes	Bandcamp 200 Bytes
Deezer 733 Bytes	iHeartRadio

Highlight.js

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
    • Download prebuilt CDN assets
  • Download from our website
  • Install via NPM package
  • Build from Source
• Requirements
• License
• Links

Upgrading to Version 11

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.

Upgrading to v10: You really should probably be upgrading to…

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.

Live Demo | Documentation

Install

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.3.1/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 • Discourse • Twitter

Cube.js is an open-source analytical API platform. It is primarily used to build internal business intelligence tools or add customer-facing analytics to existing applications.

Cube.js was designed to work with serverless data warehouses and query engines like Google BigQuery and AWS Athena. A multi-stage querying approach makes it suitable for handling trillions of data points. Most modern RDBMS work with Cube.js as well and can be further tuned for performance.

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

Why Cube.js?

If you are building your own business intelligence tool or customer-facing analytics most probably you'll face the following problems:

1. Performance. Most of effort time in modern analytics software development is spent to provide adequate time to insight. In the world where every company data is a big data writing just SQL…

React Icons

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.

Installation (for standard modern project)

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

example usage

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
    render() {
        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';

Installation (for meteorjs, gatsbyjs, etc)

If your project grows in size, this option is available This method has…

You-need-to-know-css

CSS tricks web developers need to know

View online

🌏 You-need-to-know-css

Quick start

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.

What's included

Contributing

• 🍴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

Donate

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.

Backers

…

use-editable

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!

Usage

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';

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 */}
    {(

remove.bg API wrapper for Node.js

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

Requirements

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.

Installation

npm i remove.bg

Examples

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

API

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

Only the apiKey property is mandatory.

  Front-End Checklist  

🚨 Currently working on a V2 of frontendchecklist.io,
feel free to discuss any feature you would like to see in the next version

The Front-End Checklist is an exhaustive list of all elements you need to have / to test before launching your website / HTML page to production.

  How To Use • Contributing • Website • Product Hunt

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

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

How to use?

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:

• means that the item is recommended but can be…