DEV Community

loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 4th December 2020

Iain Freestone
A Web developer from Hampshire in the south of England.
Originally published at iainfreestone.com ใƒป2 min read

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

GitHub logo 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!

Buy me a coffee

How Small?

542 Bytes SVG 7,225 Bytes PNG 414 Bytes SVG 5,568 Bytes PNG 251 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

446 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
โ€ฆ

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.

GitHub logo highlightjs / highlight.js

Javascript syntax highlighter

Highlight.js

latest version beta slack license install size minified NPM downloads weekly jsDelivr CDN downloads dev deps code quality

build and CI status open issues help welcome issues beginner friendly issues vulnerabilities

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.

Upgrading to Version 10

Version 10 is one of the biggest releases in quite some time. If you're upgrading from version 9, there are some breaking changes and things you may want to double check first.

Please read VERSION_10_UPGRADE.md for high-level summary of breaking changes and any actions you may need to take. See VERSION_10_BREAKING_CHANGES.md for a more detailed list and CHANGES.md to learn what else is new.

Support for older versions

Please see SECURITY.md for support information.

Getting Started

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling initHighlightingOnLoad:

<link rel="stylesheet" href="
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

3. jsPDF

Client-side JavaScript PDF generation for everyone.

GitHub logo MrRio / jsPDF

Client-side JavaScript PDF generation for everyone.

jsPDF

Build Status Code Climate Test Coverage GitHub license Total alerts Language grade: JavaScript Gitpod ready-to-code

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
Enter fullscreen mode Exit fullscreen mode

Alternatively, load it from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.1.1/jspdf.umd.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Or always get latest version via unpkg

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

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.

GitHub logo cube-js / cube.js

๐Ÿ“Š Cube.js โ€” Open-Source Analytical API Platform

Cube.js

Website โ€ข Docs โ€ข Examples โ€ข Blog โ€ข Slack โ€ข Twitter

npm version GitHub Actions FOSSA Status

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 Query Engines like AWS Athena and Google BigQuery. 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 tuned for adequate performance.

Unlike others, it is not a monolith application, but a set of modules, which does one thing well. Cube.js provides modules to run transformations and modeling in data warehouse, querying and caching, managing API gateway and building UI on top of that.

Cube.js Backend

  • Cube.js Schema. It acts as an ORM for analytics and allows to model everything from simple counts to cohort retention and funnel analysis.
  • Cube.js Query Orchestration and Cache. Itโ€ฆ

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.

GitHub logo react-icons / react-icons

svg react icons of popular icon packs

React Icons

React Icons

npm

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
Enter fullscreen mode Exit fullscreen mode

example usage

import { FaBeer } from 'react-icons/fa'
class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3&gt
    }
}
Enter fullscreen mode Exit fullscreen mode

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 the trade-offโ€ฆ


6. You-need-to-know-css

CSS tricks for web developers

GitHub logo 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

๐ŸŒ 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

translucent-borders multiple-borders inner-rounding
background-position stripes-background ellipse
parallelogram bevel-corners pie-chart
polygon single-projection ไธ่ง„ๅˆ™ๆŠ•ๅฝฑ
ๆฏ›็Žป็’ƒๆ•ˆๆžœ ๆ–‡ๆœฌ่กŒๆ–‘้ฉฌๆก็บน ๅธธ่ง็š„ๆ–‡ๅญ—ๆ•ˆๆžœ
็Žฏๅฝขๆ–‡ๅญ— ้€‰ๆ‹ฉๅˆ้€‚็š„้ผ ๆ ‡ๅ…‰ๆ ‡ ๆ‰ฉๅคงๅฏ็‚นๅ‡ปๅŒบๅŸŸ
่‡ชๅฎšไน‰ๅค้€‰ๆก† ่‡ชๅฎšไน‰ๅ•้€‰ๆก† ่พ“ๅ…ฅๆก†ๅฎŒ็พŽๅฑ…ไธญ
้€š่ฟ‡้˜ดๅฝฑๅผฑๅŒ–่ƒŒๆ™ฏ ้€š่ฟ‡ๆจก็ณŠๅผฑๅŒ–่ƒŒๆ™ฏ ไบคไบ’ๅผๅ›พ็‰‡ๅฏนๆฏ”ๆŽงไปถ
ๅ…จ่ƒŒๆ™ฏไธ‹็ญ‰ๅฎฝๅ†…ๅฎนๅฑ…ไธญ ็ปๅฏนๅบ•้ƒจ ๆฐดๅนณๅž‚็›ดๅฑ…ไธญ
ๅผนๆ€ง่ฟ‡ๅบฆ ้—ช็ƒๆ•ˆๆžœ ๆ‰“ๅญ—ๆ•ˆๆžœ
ๆŠ–ๅŠจๆ•ˆๆžœ ๆ— ็ผๅนณๆป‘ๆ•ˆๆžœ ๅปถ่ฝจ่ฟนๅนณๆป‘ๆ•ˆๆžœ
่‡ชๅฎšไน‰ๆ–‡ๅญ—ไธ‹ๅˆ’็บฟ ๆ็คบๆฐ”ๆณก ่‡ชๅฎšไน‰ๆปšๅŠจๆก
ๅœฃๆฏๅธƒๅฑ€ ๅŒ้ฃž็ฟผๅธƒๅฑ€ ็ฑป่ฎขๅ•ๅธƒๅฑ€
Flex ๅธƒๅฑ€ 1px ็บฟ/่พน ๅผน่ทณๆ•ˆๆžœ
ๆ’ๅ…ฅๆข่กŒ ่‡ชๅฎšไน‰ๅ˜้‡ ๆœ‰่ถฃ็š„้กน็›ฎ

Contributing PRs

  • ๐Ÿด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 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

โ€ฆ


7. use-editable

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

GitHub logo kitten / 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)


NPM Version License Minified gzip size

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
Enter fullscreen mode Exit fullscreen mode

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

import React, { useState, useRef } from 'react';
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo kettanaito / atomic-layout

Physical representation of layout composition to create declarative responsive layouts in React.

Atomic Layout logo

Discord channel Spectrum channel

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}&gt
    {/* Get React components based on provided areas */}
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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.

GitHub logo EddyVerbruggen / remove.bg

A Node.js wrapper for the remove.bg API

remove.bg API wrapper for Node.js

NPM version Downloads Twitter Follow

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
Enter fullscreen mode Exit fullscreen mode

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

GitHub logo thedaviddias / Front-End-Checklist

๐Ÿ—‚ The perfect Front-End Checklist for modern websites and meticulous developers


Front-End Checklist

ย  Front-End Checklist ย 

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.

ย  ย ย ย  PRs Welcome ย  ย  ย  ย ย ย  Contributors ย  ย  ย ย ย  Frontโ€‘End_Checklist followed ย  ย  ย ย ย  CC0 ย 

ย  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.

Table of Contents

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Images
  6. JavaScript
  7. Security
  8. Performance
  9. Accessibility
  10. SEO
  11. Translations

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:

  • Low means that the item is recommended but can be omitted in some particular situations.
  • Medium means that the itemโ€ฆ





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.

Discussion (0)