netlifycms.org

A CMS for static site generators. Give users a simple way to edit and add content to any site built with a static site generator.

Community Chat

How It Works

Netlify CMS is a single-page app that you pull into the /admin part of your site.

It presents a clean UI for editing content stored in a Git repository.

You setup a YAML config to describe the content model of your site, and typically tweak the main layout of the CMS a bit to fit your own site.

When a user navigates to /admin/ they'll be prompted to log in, and once authenticated they'll be able to create new content or edit existing content.

Read more about Netlify CMS Core Concepts.

Installation and Configuration

The Netlify CMS can be used in two different ways.

• A Quick and easy install, that requires you to create a single HTML file…

WebGoat 8: A deliberately insecure Web Application

Introduction

WebGoat is a deliberately insecure web application maintained by OWASP designed to teach web application security lessons.

This program is a demonstration of common server-side application flaws. The exercises are intended to be used by people to learn about application security and penetration testing techniques.

WARNING 1: While running this program your machine will be extremely vulnerable to attack. You should disconnect from the Internet while using this program. WebGoat's default configuration binds to localhost to minimize the exposure.

WARNING 2: This program is for educational purposes only. If you attempt these techniques without authorization, you are very likely to get caught. If you are caught engaging in unauthorized hacking, most companies will fire you Claiming that you were doing security research will not work as that is the first thing that all hackers claim.

Installation instructions:

For more details check the…

Speedy.js

Speedy.js is a compiler for a well considered, performance pitfalls free subset of JavaScript targeting WebAssembly. Because WebAssembly is statically-typed, the project uses TypeScript as type-checker and to resolve the types of the program symbols.

The project is very experimental and still far away from being production ready.

Getting Started

Setup LLVM

First, you need an LLVM installation that includes the experimental WebAssembly target. You can test if your LLVM installation includes the WebAssembly backend by running

llvm-config --targets-built

If the output contains the word WebAssembly you are good to go (continue with Install Cross Compiler). If not, then you have to build LLVM from source by following these instructions.

After LLVM has been built and is installed, set the path to the llvm-config executable (it is located in the installation directory) using npm config set or an .npmrc file in your project:

npm config set LLVM_CONFIG

soketi

soketi is your simple, fast, and resilient open-source WebSockets server. 📣

Blazing fast speed ⚡

The server is built on top of uWebSockets.js - a C application ported to Node.js. uWebSockets.js is demonstrated to perform at levels 8.5x that of Fastify and at least 10x that of Socket.IO. (source)

Cheaper than most competitors 🤑

Compared with Pusher, you can achieve much more for one-third of the price. For a $49 plan on Pusher, you get a limited amount of connections (500) and messages (30M). With soketi, for ~ $15, you get virtually unlimited connections, messages, and some more!

This is because you pay only for your infrastructure. Whether it's your basement server or cloud, it fits and runs. You can also get free $100 on Vultr to try out soketi →

Easy to use 👶

Whether you run your infrastructure in containers or monoliths, soketi got…

unimported

Find unused source files in javascript / typescript projects.

While adding new code to our projects, we might forget to remove the old code. Linters warn us for unused code in a module, but they fail to report unused files.

unimported analyzes your code by following the require/import statements starting from your entry file.

The result is a report showing which files are unimported, which dependencies are missing from your package.json, and which dependencies can be removed from your package.json.

Usage

Run the following command in the root of your project (next to package.json). The result will be as shown under example

npx unimported

When running unimported from a directory that doesn't contain a package.json, it will run from the first parent directory that does. To override this behavior, and run from an alternative work directory, use the [cwd] positional argument:

npx unimported ~/dev/leaflet-geosearch

By…

react-responsive

Information

The best supported, easiest to use react media query module.

Install

$ npm install react-responsive --save

Example Usage

With Hooks

Hooks is a new feature available in 8.0.0!

import React from 'react'
import { useMediaQuery } from 'react-responsive'
const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)'
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return <div>
    <h1>Device Test!</h1>
    {isDesktopOrLaptop && <p>You are a desktop or laptop</p

diff2html

diff2html generates pretty HTML diffs from git diff or unified diff output.

Table of Contents

• Features
• Online Example
• Distributions
• Usage
• Diff Text Input
• Diff2HtmlUI Usage
  • Diff2HtmlUI API
  • Diff2HtmlUI Configuration
  • Diff2HtmlUI Browser
  • Diff2HtmlUI Examples
• Diff2Html Usage
  • Diff2Html API
  • Diff2Html Configuration
  • Diff2Html Browser
  • Diff2Html NPM / Node.js Library
  • Diff2Html Examples
• Troubleshooting
  • 1. Out of memory or Slow execution
• Contribute
• Contributors
• License
• Thanks

Features

• Supports git and unified diffs

• Line by line and Side by side diff

• New and old line numbers

• Inserted and removed lines

• GitHub like visual style

• Code syntax highlight

• Line similarity matching

• Easy code selection

Online Example

Go to diff2html

Distributions

• jsdelivr CDN
• WebJar
• Node Library
• NPM CLI
• Manually use from jsdelivr or build the project
  • Browser / Bundle
    • Parser and HTML Generator
      • bundles/js/diff2html.min.js - includes the diff parser and html generator
    • Wrapper and helper adding syntax highlight, synchronized scroll, and other nice features
      • bundles/js/diff2html-ui.min.js - includes the…

hyperid

Uber-fast unique id generation, for Node.js and the browser Here are the benchmarks:

crypto.randomUUID x 17,421,022 ops/sec ±1.05% (92 runs sampled)
hashids process.hrtime x 381,775 ops/sec ±0.22% (95 runs sampled)
hashids counter x 730,949 ops/sec ±0.23% (97 runs sampled)
shortid x 34,682 ops/sec ±3.82% (83 runs sampled)
crypto.random x 313,547 ops/sec ±2.88% (82 runs sampled)
nid x 1,365,624 ops/sec ±0.07% (96 runs sampled)
uuid.v4 x 1,313,028 ops/sec ±0.10% (97 runs sampled)
napiRsUuid.v4 x 536,390 ops/sec ±0.20% (96 runs sampled)
uuid.v1 x 1,999,272 ops/sec ±0.09% (98 runs sampled)
nanoid x 3,808,014 ops/sec ±0.33% (95 runs sampled)
hyperid - variable length x 20,197,843 ops/sec ±0.74% (94 runs sampled)
hyperid - fixed length x 18,894,869 ops/sec ±0.12% (95 runs sampled)
hyperid - fixed length, url safe x 20,158,778 ops/sec ±0.54% (94 runs sampled)

Note: Benchmark run with Intel(R) Core(TM) i7-7700 CPU @ 3.60GHz and Node.js v16.3.0

As you can see the native…

react-collapse

Collapse component with CSS transition for elements with variable and dynamic height.

react-collapse

Demo

• simple - codepen

• accordion - codepen

• read more - codepen

• codesandbox - collapsibles

• codesandbox expand-all

• codesandbox CSS-in-JS integration example

• view storybook

CSS required

⚠️ ️You need to add style (transition) in your own stylesheet to add animation. Here is an example.

<style>
  .collapse-css-transition {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1)
  }
</style>

Alternatively you can add it using the transition prop.

Installation for React 16.8+

UMD minified 3.8kb, gzipped 1.7kb

npm i @kunukn/react-collapse
# or
# yarn add @kunukn/react-collapse

Installation for React 16.3+

UMD minified 5.8kb, gzipped 2.1kb

npm i @kunukn/react-collapse@^1
# or
# yarn add @kunukn/react-collapse@^1

import Collapse from "@kunukn/react-collapse";
// or with require syntax
// const Collapse = require("@kunukn/react-collapse");
const MyComponent = () => (
  <Collapse

knex.js

A SQL query builder that is flexible, portable, and fun to use!

A batteries-included, multi-dialect (PostgreSQL, MySQL, CockroachDB, MSSQL, SQLite3, Oracle (including Oracle Wallet Authentication)) query builder for Node.js, featuring:

• transactions
• connection pooling
• streaming queries
• both a promise and callback API
• a thorough test suite

Node.js versions 12+ are supported.

• Take a look at the full documentation to get started!
• Browse the list of plugins and tools built for knex
• Check out our recipes wiki to search for solutions to some specific problems
• In case of upgrading from an older version, see migration guide

You can report bugs and discuss features on the GitHub issues page or send tweets to @kibertoad.

For support and questions, join our Gitter channel.

For knex-based Object Relational Mapper, see:

• https://github.com/Vincit/objection.js
• https://github.com/mikro-orm/mikro-orm
• https://bookshelfjs.org

To see the SQL that Knex will generate for a given query, you can use Knex Query…