loading...

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

iainfreestone profile image Iain Freestone 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. 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 romefrontend / rome

The Rome Frontend 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 Codacy Badge Reviewed by Hound

CodeceptJS

Reference: Helpers API | Demo

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

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 which WebDriver…

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">
…

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
  • 15 different categories (ecommerce, blog, pricing and more...)
  • Responsive
  • Dark/light mode
  • Color variations

How to use this project

tailblocks

This project provides multiple templates 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 demo site
  2. Find a template that you would like to use
  3. Select the colorscheme you want with the colorscheme-picker
  4. Select whether you would like to use light or dark mode with the picker
  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, designed for rapidly building beautiful dashboards and product pages.

Halfmoon

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

  • Designed specifically for building dashboardsβ€”This means that a lot of importance is placed on components such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc.
  • Built-in dark modeβ€”Now all of your websites will automatically come with a dark mode.
  • Optional JS libraryβ€”Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies, such as jQuery.
  • Bootstrap like classesβ€”The class names should be instantly familiar to anyone who has used Bootstrap.
  • Cross-browser compatibilityβ€”Fully supports almost all the browsers under the sun, including really old ones like Internet Explorer 11.
  • Easily customizableβ€”The repo also contains a variables file (halfmoon-variables.css) where custom CSS properties (variables) are used in the code for things like…

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.Body>
      </Card>
    );
  }
}

For more examples and…


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 davidkpiano / xstate

State machines and statecharts for the modern web.


XState
JavaScript state machines and statecharts

npm version Statecharts gitter chat

Black lives matter. Support the Equal Justice Initiative. ✊🏽✊🏾✊🏿

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

πŸ“– Read the documentation πŸ“‘ Adheres to the SCXML specification.

Packages

Templates

Get started by forking one of these templates on CodeSandbox:

Super quick start

npm install xstate
import {
…

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

Extensible Dev Tools for Monorepos

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?

πŸ”Ž Extensible Dev Tools for Monorepos.

Nx Helps You

Develop like Google, Facebook, and Microsoft

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. When using Nx, developers have a holistic dev experience powered by an advanced CLI (with editor plugins), capabilities for controlled code sharing and consistent code generation.

Use Intelligent Build System with Distributed 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 also uses a distributed computation cache. If someone has already built or tested similar code, Nx will use their results to speed up the command for everyone else instead of rebuilding or retesting the code from scratch. This, in…


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 Svelte

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

pic
Editor guide