DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€10 Trending projects on GitHub for web developers - 14th August 2020

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

1. Rome

Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS. Rome unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.

GitHub logo rome / tools

The Rome Toolchain. A linter, compiler, bundler, and more for JavaScript, TypeScript, HTML, Markdown, and CSS.

Rome's logo depicting an ancient Roman arch with the word Rome to its side

Rome is a linter, compiler, bundler, and more for JavaScript, TypeScript, JSON, HTML, Markdown, and CSS.

Rome is designed to replace Babel, ESLint, webpack, Prettier, Jest, and others.

Rome unifies functionality that has previously been separate tools. Building upon a shared base allows us to provide a cohesive experience for processing code, displaying errors, parallelizing work, caching, and configuration.

Rome has strong conventions and aims to have minimal configuration. Read more about our project philosophy.

Rome is written in TypeScript and runs on Node.js. Rome has zero dependencies, and has largely been written from scratch. See credits for more information.

Rome is maintained by a team of volunteers under an established governance model.

Rome is MIT licensed and moderated under the Contributor Covenant Code of Conduct.

Status

The current area of focus is linting. See the umbrella task #20 for…





2. CodeceptJS

CodeceptJS is a new testing framework for end-to-end testing with WebDriver (or others). It abstracts browser interaction to simple steps that are written from a user perspective.

GitHub logo codeceptjs / CodeceptJS

Supercharged End 2 End Testing Framework for NodeJS

NPM version

Build Status:

Playwright Tests Puppeteer Tests WebDriver Tests Appium Tests TestCafe Tests

CodeceptJS

Reference: Helpers API

Supercharged E2E Testing

CodeceptJS is a new testing framework for end-to-end testing with WebDriver (or others) It abstracts browser interaction to simple steps that are written from a user perspective A simple test that verifies the "Welcome" text is present on a main page of a site will look like:

Feature('CodeceptJS demo');

Scenario('check Welcome page on site', ({ I }) => {
  I.amOnPage('/');
  I.see('Welcome');
});
Enter fullscreen mode Exit fullscreen mode

CodeceptJS tests are:

  • Synchronous. You don't need to care about callbacks, or promises, test scenarios are linear, your test should be too.
  • Written from user's perspective. Every action is a method of I. That makes test easy to read, write and maintain even for non-tech persons.
  • Backend API agnostic. We don't know…

3. GPU.js

GPU.js is a JavaScript Acceleration library for GPGPU (General purpose computing on GPUs) in JavaScript for Web and Node. GPU.js automatically transpiles simple JavaScript functions into shader language and compiles them so they run on your GPU. In case a GPU is not available, the functions will still run in regular JavaScript.

GitHub logo gpujs / gpu.js

GPU Accelerated JavaScript

Logo

GPU.js

GPU.js is a JavaScript Acceleration library for GPGPU (General purpose computing on GPUs) in JavaScript for Web and Node GPU.js automatically transpiles simple JavaScript functions into shader language and compiles them so they run on your GPU In case a GPU is not available, the functions will still run in regular JavaScript For some more quick concepts, see Quick Concepts on the wiki.

Join the chat at https://gitter.im/gpujs/gpu.js Slack

What is this sorcery?

Creates a GPU accelerated kernel transpiled from a javascript function that computes a single element in the 512 x 512 matrix (2D array). The kernel functions are ran in tandem on the GPU often resulting in very fast computations! You can run a benchmark of this here. Typically, it will run 1-15x faster depending on your hardware. Matrix multiplication (perform matrix multiplication on 2 matrices of size 512 x 512) written in GPU.js:

Browser

<script src="dist/gpu-browser.min.js">
…
Enter fullscreen mode Exit fullscreen mode

4. Tailblocks

Ready-to-use Tailwind CSS blocks,15 different categories (ecommerce, blog, pricing and more...), responsive, dark/light mode and color variations.

GitHub logo mertJF / tailblocks

Ready-to-use Tailwind CSS blocks.

Tailblocks

Ready-to-use Tailwind CSS blocks

Features
  • 60+ Blocks
  • Responsive
  • Dark Mode Support
  • Color Variations

How to use this project

tailblocks

This project provides multiple blocks built using Tailwind CSS that you can use in your own projects. This project is not a dependency that you add to your project, but instead provides you with HTML that you can easily copy and paste into your own project.

To use the project:

  1. Go to the Tailblocks
  2. Select a block that you would like to use.
  3. Choose a color from the color palette for the block you selected.
  4. Select whether you would like to use light or dark mode with the dark/light toggle button.
  5. Click the "View Code" button.
  6. Copy/paste into your project.
  7. πŸŽ‰

License

Code copyright 2020 Mert Cukuren. Code released under the MIT license.





5. Halfmoon

Front-end framework with a built-in dark mode, designed for rapidly building beautiful dashboards and product pages.

GitHub logo halfmoonui / halfmoon

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch.

Halfmoon

Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

  • Built-in dark modeβ€”Halfmoon comes with a built-in, toggleable dark mode, which is one of its most important and defining features.
  • Fully customizable using CSS variablesβ€”The framework is built entirely using CSS variables (also known as CSS custom properties). There are close to 1,500 CSS variables, which means that almost everything can be customized by overriding a property, making it very easy to theme Halfmoon to fit your brand. Learn more about customization.
  • Great for building dashboards and toolsβ€”The components have a very standard look and feel to them, making them suitable for dashboards and tools. Moreover, a lot of importance is placed…

6. Tabler React

React implementation of the Tabler Dashboard UI Kit

GitHub logo tabler / tabler-react

React components and demo for the Tabler UI theme.

Update - June 2019: Version 2

Alpha now available on NPM:

npm install tabler-react@alpha yarn add tabler-react@alpha

Check out the latest progress and get involved on this branch, or add your thoughts and requests to this issue.

Tabler React

React implementation of the Tabler Dashboard UI Kit

NPM Type definitions Greenkeeper badge Commitizen friendly

Demo | Documentation | Issues | Slack.

Install

Make sure you have Node.js 8+ and yarn installed.

yarn add tabler-react

Example

import React, { Component } from "react";
import "tabler-react/dist/Tabler.css";

import { Card, Button } from "tabler-react";

class MyCard extends Component {
  render() {
    return (
      <Card>
        <Card.Header>
          <Card.Title>Card Title</Card.Title>
        </Card.Header>
        <Card.Body>
          <Button color="primary">A Button</Button>
        </Card
…
Enter fullscreen mode Exit fullscreen mode

7. X State

XState is a library for creating, interpreting, and executing finite state machines and statecharts, as well as managing invocations of those machines as actors. The following fundamental computer science concepts are important to know to make the best use of XState, and in general for all your current and future software projects.

GitHub logo statelyai / xstate

State machines and statecharts for the modern web.


XState
JavaScript state machines and statecharts

npm version

JavaScript and TypeScript finite state machines and statecharts for the modern web.

πŸ“– Read the documentation

πŸ’™ Explore our catalogue of examples

πŸ“‘ Adheres to the SCXML specification

πŸ’¬ Chat on the Stately Discord Community

Packages

Templates

Get started by forking one of these templates on CodeSandbox:


8. Nx

Extensible Dev Tools for Monorepos. Nx helps scale your development from one team building one application to many teams building multiple frontend and backend applications all in the same workspace.

GitHub logo nrwl / nx

Smart, Extensible Build Framework

Nx - Smart, Extensible Build Framework

CircleCI License NPM Version Semantic Release Commitizen friendly Join the chat at https://gitter.im/nrwl-nx/community Join us @nrwl/community on slack


What is Nx?

πŸ”Ž Smart, Extensible Build Framework

Nx is a smart and extensible build framework to help you architect, test, and build at any scale β€” integrating seamlessly with modern technologies and frameworks while providing a distributed graph-based task execution, computation caching, smart rebuilds of affected projects, powerful code generators, editor support, GitHub apps, and more.

Best-in-Class Support for Monorepos

Nx provides distributed graph-based task execution and computation caching.

Nx is smart. It analyzes your workspace and figures out what can be affected by every code change That's why Nx doesn't rebuild and retest everything on every commit--it only rebuilds what is necessary .

Nx partitions commands into a graph of smaller tasks. Nx then runs those tasks in parallel and it can even distribute them across multiple machines without any configuration.

Nx also uses a distributed computation cache. If someone has already built or tested similar…


9. Moveable

Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable

GitHub logo daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

Moveable

npm version Travis (.org) React Preact Angular Vue Vue 3 Svelte Lit

Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable, Groupable, Snappable

Demo / Storybook / API / Main Project

πŸ”₯ Features

  • Draggable refers to the ability to drag and move targets.
  • Resizable indicates whether the target's width and height can be increased or decreased.
  • Scalable indicates whether the target's x and y can be scale of transform.
  • Rotatable indicates whether the target can be rotated.
  • Warpable indicates whether the target can be warped (distorted, bented).
  • Pinchable indicates whether the target can be pinched with draggable, resizable, scalable, rotatable.
  • Groupable indicates Whether the targets can be moved in group with draggable, resizable, scalable, rotatable.
  • Snappable indicates whether to snap to the guideline.
  • OriginDraggable* indicates Whether to drag origin.
  • Clippable indicates Whether to clip the target.
  • Roundable indicates Whether to show and drag or double click border-radius.
  • Support…





10. Figma to Code

This project aims to raise the bar by generating responsive layouts in Tailwind, Flutter and SwiftUI. The plan is to eventually add support for Jetpack Compose and possibly standard HTML or other frameworks like React Native, Bootstrap or Fluent.

GitHub logo bernaferrari / FigmaToCode

Generate responsive pages and apps on HTML, Tailwind, Flutter and SwiftUI.

Figma to Code

Figma to Code

Twitter

Most design to code plugins are bad, some are even paid. This project aims to raise the bar by generating responsive layouts in Tailwind, Flutter and SwiftUI. The plan is to eventually add support for Jetpack Compose and possibly standard HTML or other frameworks like React Native, Bootstrap or Fluent. Feedback, ideas and partnerships are appreciated!

Gif showing the conversion

How it works

This plugin takes an unconventional approach to improve code quality: it optimizes the layout before the conversion to code even begins. The standard Figma Nodes (what represents each layer) is a joy to work with, but it can't modify a layer without modifying the user project. For this reason, I decided to virtualize it, remaking the official implementation and naming them AltNodes. During the process of converting a Node into an AltNode, the plugin does the following:

Conversion Workflow

That process can also be…





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)