Budibase

Build, automate and self-host internal tools in minutes

Budibase is an open-source low-code platform, helping developers and IT professionals build, automate, and ship internal tools on their own infrastructure in minutes

🤖 🎨 🚀

Get started · Docs · Feature request · Report a bug · Support: Discussions

✨ Features

• Build and ship real software. Unlike other platforms, with Budibase you build and ship single page applications. Budibase applications have performance baked in and can be designed responsively, providing your users with a great experience.

• Open source and extensible. Budibase is open-source - licensed as GPL v3. This should fill you with confidence that Budibase will always be around. You can also code against Budibase or fork it and make changes as you please, providing a developer-friendly experience.

• Load data or start from scratch. Budibase pulls in data from multiple sources, including MongoDB, CouchDB, PostgreSQL, MySQL, Airtable, S3, DynamoDB…

Draw.io VS Code Integration

This unofficial extension integrates Draw.io (also known as diagrams.net) into VS Code.

Features

• Edit .drawio, .dio, .drawio.svg or .drawio.png files in the Draw.io editor
  • To create a new diagram, simply create an empty *.drawio, *.drawio.svg or *.drawio.png file and open it.
  • .drawio.svg are valid .svg files that can be embedded in Github readme files! No export needed.
  • .drawio.png are valid .png files! No export needed. You should use .svg though whenever possible - they look much better!
  • To convert between different formats, use the Draw.io: Convert To... command.
• Uses an offline version of Draw.io by default.
• Multiple Draw.io themes are available.
• Use liveshare to collaboratively edit a diagram with others.
• Nodes/edges can be linked with code spans.

Demo

Like it so far? You might also like my open source Chrome extension that enhances the Github markdown editor!

Editing .drawio.svg/.drawio.png Files

You…

Leetcode Patterns

Table of Contents

• Background
• Preface
• Notes
• Question List
• Solutions
• Leetcode Discuss
• Tips to Consider
• Suggestions
• Acknowledgements

Background

This repo is intended for any individual wanting to improve their problem solving skills for software engineering interviews.

Problems are grouped under their respective subtopic, in order to focus on repeatedly applying common patterns rather than randomly tackling questions.

All questions are available on leetcode.com with some requiring leetcode premium.

Preface

It is highly recommended to read chapters 1, 2, 3, 4, 8, and 10 of Cracking The Coding Interview to familiarize yourself with the following data structures and their operations:

• Arrays
• Maps
• Linked Lists
• Queues
• Heaps
• Stacks
• Trees
• Graphs

In addition, you should have a good grasp on common algorithms such as:

• Breadth-first search
• Depth-first search
• Binary search
• Recursion

Notes

This pdf contains useful information for the built-in data structures in Java.

Other useful methods to know include substring()…

use-color

The powerful color hook that all designers deserve.

👉 I'm planning to detach the core class to @roller-skates/core. The same workspace will include a lot of cool packages that will help you to "use colors", so stay tuned!

yarn add use-color

import { useColor } from 'use-color'

Core functions

All the functions and types that power the hook are exported. Detailed documentation is TBD(planning to detach them as a core module).

import { parseColor } from 'use-color/parser'
import { ColorInput } from 'use-color/types/ColorInput'
const givenColor: ColorInput = 'rgb(34, 114, 235)'
const color = parseColor(givenColor)

Parse

const [color] = useColor('#2272eb')
color.rgb // { r: 34, g: 114, b: 235 }
color.rgba // { r: 34, g: 114, b: 235, a: 1 }
const [color] = useColor('rgb(34, 114, 235)')
color.

boxicons

High Quality web friendly icons

'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.

Announcing Boxicons v2.0.9!

• Fixed the errors with a few svgs, added viewbox

Installation

To install via npm, simply do the following:

$ npm install boxicons --save

import the module

import 'boxicons'

Usage

Using via CSS

1. Include the stylesheet on your document's <head>

<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>

Instead of installing you may use the remote version

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <!-- or -->
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>

2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons…

An updated and organized reading list for illustrating the patterns of scalable, reliable, and performant large-scale systems. Concepts are explained in the articles of prominent engineers and credible references. Case studies are taken from battle-tested systems that serve millions to billions of users.

If your system goes slow

Understand your problems: scalability problem (fast for a single user but slow under heavy load) or performance problem (slow for a single user) by reviewing some design principles and checking how scalability and performance problems are solved at tech companies. The section of intelligence are created for those who work with data and machine learning at big (data) and deep (learning) scale.

If your system goes down

"Even if you lose all one day, you can build all over again if you retain your calm!" - Thuan Pham, former CTO of Uber. So, keep calm and mind the availability and stability matters!

Modern and minimalist React UI library, originating from Vercel's design.

Quick Start

1. run yarn add @geist-ui/react or npm i @geist-ui/react install it.

2. import into project:

import { GeistProvider, CssBaseline } from '@geist-ui/react'

const Application = () => (
  <GeistProvider>
    <CssBaseline /> // ---> Normalize styles
    <AppComponent /> // ---> Your App Component
  </GeistProvider>
)

Documentation

• Document Site
• 中文文档

Development

• Contributing Guide

Showcases

• Secret
• Article view count
• Tree viewer for CDN
• Better social image
• SentiNEO: Near-Earth Objects Viewer
• Dashboard Design
• Regex-Vis: Regex visualizer & editor
• Add here

LICENSE

MIT

Build your next Vue.js application with confidence using Nuxt: a framework making web development simple and powerful.

Links

• 📘 Documentation: https://nuxtjs.org
• 👥 Community: cmty.app/nuxt
• 🎬 Video: 1 minute demo
• 🐦 Twitter: @nuxt_js
• 💬 Chat: Discord
• 🌟 AwesomeNuxt
• 👉 Play with Nuxt online

Features

• Automatic transpilation and bundling (with webpack and babel)
• Hot code reloading
• Server-side rendering OR Single Page App OR Static Generated, you choose 🔥
• Static file serving. ./static/ is mapped to /
• Configurable with a nuxt.config.js file
• Custom layouts with the layouts/ directory
• Middleware
• Code splitting for every pages/
• Loading just the critical CSS (page-level)

Learn more at https://nuxtjs.org.

Getting started

$ npx create-nuxt-app <project-name>

It's as simple as that!

Learn more at https://nuxtjs.org/guide/installation

Examples

Please take a look at https://nuxtjs.org/examples or directly in https://github.com/nuxt/nuxt.js/tree/dev/examples.

Production deployment

To deploy, instead of running nuxt, you probably want to build ahead of time. Therefore, building and…

Baileys - Typescript/Javascript WhatsApp Web API

Baileys does not require Selenium or any other browser to be interface with WhatsApp Web, it does so directly using a WebSocket. Not running Selenium or Chromimum saves you like half a gig of ram :/

Thank you to @Sigalor for writing his observations on the workings of WhatsApp Web and thanks to @Rhymen for the go implementation.

Baileys is type-safe, extensible and simple to use. If you require more functionality than provided, it'll super easy for you to write an extension. More on this here.

If you're interested in building a WhatsApp bot, you may wanna check out WhatsAppInfoBot and an actual bot built with it, Messcat.

Read the docs here Join the Discord here

Example

Do check out & run example.ts to see example usage of the library The script covers most common use cases To run the example…

react-window

React components for efficiently rendering large lists and tabular data

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

1. It reduces the amount of work (and time) required to render the initial view and to process updates.
2. It reduces the memory footprint by avoiding over-allocation of DOM nodes.

Sponsors

The following wonderful companies have sponsored react-window:

Learn more about becoming a sponsor!

Install

# Yarn
yarn add react-window
# NPM
npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

• react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.
• react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite…