loading...

๐Ÿš€10 Trending projects on GitHub for web developers - 19th June 2020

iainfreestone profile image Iain Freestone Updated on ใƒป2 min read

Trending projects on GitHub for web developers (10 Part Series)

1) ๐Ÿš€10 Trending projects on GitHub for web developers - 30th May 2020 2) ๐Ÿš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 8 3) ๐Ÿš€10 Trending projects on GitHub for web developers - 12th June 2020 4) ๐Ÿš€10 Trending projects on GitHub for web developers - 19th June 2020 5) ๐Ÿš€10 Trending projects on GitHub for web developers - 26th June 2020 6) ๐Ÿš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) ๐Ÿš€10 Trending projects on GitHub for web developers - 10th July 2020 8) ๐Ÿš€10 Trending projects on GitHub for web developers - 17th July 2020 9) ๐Ÿš€10 Trending projects on GitHub for web developers - 24th July 2020 10) ๐Ÿš€10 Trending projects on GitHub for web developers - 31st July 2020

Trending Projects is available as a weekly newsletter please sign up at www.trendingprojects.com to ensure you never miss an issue.

1. ๐ŸŽญ Playwright

Playwright is a Node library to automate Chromium, Firefox and WebKit with a single API.

GitHub logo microsoft / playwright

Node.js library to automate Chromium, Firefox and WebKit with a single API

๐ŸŽญ Playwright

npm version Join Slack Chromium version Firefox version WebKit version

Docs | API reference | Changelog

Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Linux macOS Windows
Chromium 86.0.4211.0 โœ… โœ… โœ…
WebKit 14.0 โœ… โœ… โœ…
Firefox 78.0b5 โœ… โœ… โœ…

Headless execution is supported for all the browsers on all platforms. Check out system requirements for details.

Usage

npm i -D playwright

This installs Playwright and browser binaries for Chromium, Firefox and WebKit. Once installed, you can require Playwright in a Node.js script and automate web browser interactions.

Capabilities

Playwright is built to automate the broad and growing set of web browser capabilities used by Single Page Apps and Progressive Web Apps.

  • Scenarios that span multiple page, domains and iframes
  • Auto-wait for elements toโ€ฆ

2. JSON Server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)


3. Lens | The Kubernetes IDE

Lens is the only IDE youโ€™ll ever need to take control of your Kubernetes clusters. It is a standalone application for MacOS, Windows and Linux operating systems. It is open source and free.

GitHub logo lensapp / lens

Lens - The Kubernetes IDE

Lens | The Kubernetes IDE

Build Status Releases Chat on Slack

Lens is the only IDE youโ€™ll ever need to take control of your Kubernetes clusters. It is a standalone application for MacOS, Windows and Linux operating systems. It is open source and free.

Screenshot

What makes Lens special?

  • Amazing usability and end user experience
  • Multi cluster management; Support for hundreds of clusters
  • Standalone application; No need to install anything in-cluster
  • Real-time cluster state visualization
  • Resource utilization charts and trends with history powered by built-in Prometheus
  • Terminal access to nodes and containers
  • Performance optimized to handle massive clusters (tested with a cluster running 25k pods)
  • Full support for Kubernetes RBAC

Installation

Download a pre-built package from the releases page. Lens can be also installed via snapcraft (Linux only).

Alternatively on Mac:

brew cask install lens

Development

Prerequisites: Nodejs v12, make, yarn

  • make init - initial compilation, installing deps, etc.
  • make dev - builds and starts the app
  • โ€ฆ

4. Code Server

Run VS Code on any machine anywhere and access it in the browser.

GitHub logo cdr / code-server

VS Code in the browser

code-server

Run VS Code on any machine anywhere and access it in the browser.

Screenshot

Highlights

  • Code everywhere
    • Code on your Chromebook, tablet, and laptop with a consistent development environment.
    • Develop on a Linux machine and pick up from any device with a web browser.
  • Server-powered
    • Take advantage of large cloud servers to speed up tests, compilations, downloads, and more.
    • Preserve battery life when you're on the go as all intensive tasks runs on your server.
    • Make use of a spare computer you have lying around and turn it into a full development environment.

Getting Started

For a full setup and walkthrough, please see ./doc/guide.md.

Quick Install

We have a script to install code-server for Linux, macOS and FreeBSD.

It tries to use the system package manager if possible.

First run to print out the install process:

curl -fsSL https://code-server.dev/install.sh | sh -s -- --dry-run

Now to actually install:

curl
โ€ฆ

5. CSS GG

Open-source CSS, SVG and Figma UI Icons

GitHub logo astrit / css.gg

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

npm GitHub last commit Website npm GitHub issues GitHub stars Twitter Follow

css.gg css.gg icons

New in 2.0

๐Ÿฅณ 200 New Icons

๐Ÿš€ SVG Icons

๐Ÿ”ฅ SVG Sprite

๐Ÿ’… Styled Components

โš›๏ธ React Local Styled Components

๐Ÿฆ„ Figma Components

๐Ÿ”ฎ Adobe XD Components

Table of Contents


6. Coursera: HTML, CSS and Javascript for Web Developers

This repository contains all of the example source code used in the Coursera.org course called HTML, CSS and Javascript for Web Developers.

GitHub logo jhu-ep-coursera / fullstack-course4

Example code for HTML, CSS, and Javascript for Web Developers Coursera Course

Coursera: HTML, CSS and Javascript for Web Developers

Example Source Code

This repository contains all of the example source code used in the Coursera.org course called HTML, CSS and Javascript for Web Developers.

Enroll now! It's free!

Frequently Asked Questions

Please check our FAQ to see if a question you want to ask on the forums has been answered already. Here is the link to the FAQ:

Frequently Asked Questions

Customer Website Launched

As part of this course we developed a real website for a real client. Below is a link to the final product. (Note, the site is left without speed optimization to keep it exactly as it was in the course. Site optimization wasn't part of the course).

David Chu's China Bistro Restaurant in Baltimore, MD


7. Record and replay the web

rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.

GitHub logo rrweb-io / rrweb

record and replay the web

Try rrweb

rrweb

Build Status Join the chat at https://gitter.im/rrweb-io/rrweb total gzip size recorder gzip size

ไธญๆ–‡ๆ–‡ๆกฃ

I have joined Github Sponsors and highly appreciate your sponsorship.

rrweb refers to 'record and replay the web', which is a tool for recording and replaying users' interactions on the web.

Currently, rrweb has already solved many difficult problems in recording and replaying, but the data structure may still be changed before the release of Version 1.0. So please be cautious to use rrweb in the production environment.

Guide

๐Ÿ“š Read the rrweb guide here. ๐Ÿ“š

Project Structure

rrweb is mainly composed of 3 parts:

  • rrweb-snapshot, including both snapshot and rebuilding features. The snapshot is used to convert the DOM and its state into a serializable data structure with a unique identifier; the rebuilding feature is to rebuild the snapshot into corresponding DOM.
  • rrweb, including two functions, record and replay. The record function is used to record all the mutations in the DOM; theโ€ฆ

8. Chakra

Build Accessible React Apps with Speed

GitHub logo chakra-ui / chakra-ui

โšก๏ธ Simple, Modular & Accessible UI Components for your React Applications

Chakra logo

Build Accessible React Apps with Speed โšก๏ธ


Bundle Size Language grade: JavaScript MIT License NPM Downloads Github Stars Discord


Chakra UI provides a set of accessible, reusable and composable React components that make it super easy to create websites and apps.

Looking for the documentation? ๐Ÿ“

For older versions, head over here => https://chakra-ui.com

Latest version (pre-release) => https://next.chakra-ui.com

Features ๐Ÿš€

  • Ease of Styling: Chakra UI contains a set of layout components like Box and Stack that make it easy to style your components by passing props Learn more
  • Flexible & composable: Chakra UI components are built on top of a React UI Primitive for endless composability.
  • Accessible. Chakra UI components follows the WAI-ARIA guidelines specifications and have the right aria-* attributes.
  • Dark Mode ๐Ÿ˜: Most components in Chakra UI are dark mode compatible.

Support Chakra UI ๐Ÿ’–

By donating $5 or more you can support the ongoing development of this project We'll appreciate some support. Thank you to all ourโ€ฆ


9. face-api.js

JavaScript face recognition API for the browser and nodejs implemented on top of tensorflow.js core


10. AliBaba - Hooks

React Hooks Library.

GitHub logo alibaba / hooks

React Hooks Library

English | ็ฎ€ไฝ“ไธญๆ–‡

ahooks

React Hooks Library.

NPM version NPM downloads

๐Ÿ“š Document

โœจ Features

  • Easy to learn and use.
  • Contains a wealth of advanced Hooks that are refined from the app.
  • Contains a wealth of basic Hooks.
  • Written in TypeScript with predictable static types.

๐Ÿ“ฆ Install

npm i ahooks --save

๐Ÿ”จ Usage

import { useRequest } from 'ahooks';

Core Team

๐Ÿค Contributing

$ git clone git@github.com:alibaba/hooks.git
$ cd hooks
$ npm run init
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

We welcome all contributions, please read our CONTRIBUTING.MD first, let's build a better hooks library together.

๐Ÿ‘ฅ Discuss

โœ… License

MIT





Trending Projects is available as a weekly newsletter please sign up at www.trendingprojects.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.

Trending projects on GitHub for web developers (10 Part Series)

1) ๐Ÿš€10 Trending projects on GitHub for web developers - 30th May 2020 2) ๐Ÿš€10 Trending projects on GitHub for web developers - 5th June 2020 3 ... 8 3) ๐Ÿš€10 Trending projects on GitHub for web developers - 12th June 2020 4) ๐Ÿš€10 Trending projects on GitHub for web developers - 19th June 2020 5) ๐Ÿš€10 Trending projects on GitHub for web developers - 26th June 2020 6) ๐Ÿš€10 Trending projects on GitHub for web developers - 3rd July 2020 7) ๐Ÿš€10 Trending projects on GitHub for web developers - 10th July 2020 8) ๐Ÿš€10 Trending projects on GitHub for web developers - 17th July 2020 9) ๐Ÿš€10 Trending projects on GitHub for web developers - 24th July 2020 10) ๐Ÿš€10 Trending projects on GitHub for web developers - 31st July 2020

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

markdown guide
 

I really like these posts! Just wanted to point out that the 6th and 7th item both link to the same Coursera repo. Hope you continue posting these!

 

Good spot, thank you. All fixed now

 

Playwright looks awesome. A cypress competitor?