Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. Super Tiny Icons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
edent / SuperTinyIcons
Under 1KB each! Super Tiny Icons are miniscule SVG versions of your favourite website and app logos
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?
What's Available so far?
Social Media
Media
…2. Highlight.js
Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework, and has automatic language detection.
highlightjs / highlight.js
JavaScript syntax highlighter with language auto-detection and zero dependencies.
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
- Supported Languages
- Custom Usage
- Importing the Library
- Getting the Library
- 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…
3. jsPDF
Client-side JavaScript PDF generation for everyone.
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
…
4. Cube.js
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.
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:
- 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…
5. 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.
react-icons / react-icons
svg react icons of popular icon packs
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…
6. You-need-to-know-css
CSS tricks for web developers
l-hammer / You-need-to-know-css
💄CSS tricks for web developers~
You-need-to-know-css
CSS tricks web developers need to know
View online
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
If you provide your github in the message, it will show up here with a link to your github.
Backers
…
7. use-editable
A small React hook to turn elements into fully renderable & editable content surfaces, like code editors, using contenteditable (and magic)
FormidableLabs / use-editable
A small React hook to turn elements into fully renderable & editable content surfaces, like code editors, using contenteditable (and magic)
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';
…8. Atomic Layout
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.
kettanaito / atomic-layout
Physical representation of layout composition to create declarative responsive layouts in 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 */}
{(
…9. 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.
EddyVerbruggen / remove.bg
A Node.js wrapper for the remove.bg API
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.
Property | Type | Description |
---|---|---|
apiKey | string |
The API key you got from the remove.bg website. |
size |
"preview" (same as "small" or "regular" ), "full" (same as "4k" ), "medium" , "hd" , "auto"
|
The returned size of the image. The cheaper "preview" option is default, while "auto" uses the highest available resolution (based on image size and |
10. Front-End Checklist
The perfect Front-End Checklist for modern websites and meticulous developers
thedaviddias / Front-End-Checklist
🗂 The perfect Front-End Checklist for modern websites and meticulous developers
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:
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:
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)