craft.js

Live Demo

Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task.

There're existing libraries that come with a fully working page editor out of the box with a user interface and editable components. However, if you wish to make customisations such as modifying the user interface and its behavior, it will most definitely involve modifying the library itself.

Craft.js solves this problem by modularising the building blocks of a page editor. It ships with a drag-n-drop system and handles the way user components should be rendered, updated and moved - among other things. With this, you'll be able to build your own page editor exactly how you want it to look and behave.

Docs

• Core concepts
• Tutorial
• API Reference

Examples

These examples should give you an idea on the flexibility of Craft.js.

Both these examples look…

Github Profile Trophy

? Add dynamically generated GitHub Stat Trophies on your readme

Quick Start

Add following code to your readme.
Change the ?username= value to your GitHub's username.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)

Use theme

Add optional parameter of theme.

[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

More detail

About Rank

Ranks are SSS SS S AAA AA A B C UNKNOWN SECRET.

Secret Rank

The acquisition condition is secret, but you can know the condition by reading this code.

There are still few secret trophies.
Therefore, if you come…

Medusa

Medusa is an open-source headless commerce engine that enables developers to create amazing digital commerce experiences

? Quickstart

1. Install Medusa CLI

   npm install -g @medusajs/medusa-cli

2. Create a new Medusa project

   medusa new my-medusa-store --seed
   

3. Start your Medusa engine

   medusa develop

4. Use the API

   curl localhost:9000/store/products | python -m json.tool

After these four steps and only a couple of minutes, you now have a complete commerce engine running locally. You may now explore the documentation to learn how to interact with the Medusa API. You may also add plugins to your Medusa store by specifying them in your medusa-config.js file.

? Setting up a storefront for your Medusa project

Medusa is a headless commerce engine which means that it can be used for any type of digital commerce experience - you may use it as the backend for an app, a voice application, social commerce experiences or a traditional e-commerce…

A lightweight analytics abstraction library for tracking page views, custom events, & identify visitors.

Designed to work with any third-party analytics tool or your own backend.

Read the docs or view the live demo app

Table of Contents

• Features
• Why
• Install
• Usage
• Demo
• API
  • Configuration
  • analytics.identify
  • analytics.track
  • analytics.page
  • analytics.user
  • analytics.reset
  • analytics.ready
  • analytics.on
  • analytics.once
  • analytics.getState
  • analytics.storage
  • analytics.storage.getItem
  • analytics.storage.setItem
  • analytics.storage.removeItem
  • analytics.plugins
  • analytics.plugins.enable
  • analytics.plugins.disable
• Events
• Analytic plugins
• Community Plugins
• Creating analytics plugins
  • React to any event
  • Custom methods
• Plugin Naming Conventions
• Debugging analytics
• TypeScript support
• Contributing
• Setup & Install dependencies
• Development

Features

• Extendable - Bring your own third-party tool & plugins
• Test & debug analytics integrations with time travel & offline mode
• Add functionality/modify tracking calls with baked in lifecycle hooks
• Isomorphic. Works in browser & on server
• Queues events to send when analytic libraries are loaded
• Conditionally load third party scripts
• Works offline
• TypeScript support

Why

Companies frequently change…

Pico.css

Minimal CSS Framework for semantic HTML
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled.

Examples · Documentation

Pico.css

Class-light and semantic
We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico.

Great styles with just one CSS file
No dependencies, package manager, external files, or JavaScript.

Responsive everything
Elegant and consistent adaptative spacings and typography on all devices.

Light or Dark mode
Shipped with two beautiful color themes, automatically enabled according to the user preference.

Table of contents

• Usage
• Class-less version
• Examples
• Documentation
• Contributing
• Copyright and license

Usage

There are 3 ways to get started with pico.css:

Install manually

Download Pico and link /css/pico.min.css in the <head> of your website.

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

Install from CDN

Alternatively, you can use unpkg CDN to link pico.css.

<link

What's new in Bookmarks 13.2

• New Sticky Engine
• Adds Virtual Workspaces support
• Adds Workspace Trust support
• Full Remote Development support
• Improved Multi-root support
• Adds Cross-platform support
• Improved Side Bar usability

Support

Bookmarks is an extension created for Visual Studio Code. If you find it useful, please consider supporting it.

Sponsors

Eliminate context switching and costly distractions. Create and merge PRs and perform code reviews from inside your IDE while using jump-to-definition, your keybindings, and other IDE favorites.
Learn more

SEARCHBOX

Just a searchbox generator

use the generator

http://shipow.github.io/searchbox/

use the mixin in your project

https://github.com/Shipow/searchbox/blob/master/scss/_searchbox.scss

html

<form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-custom">
  <div role="search" class="sbx-custom__wrapper">
    <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
    <button type="submit" title="Submit your search query." class="sbx-custom__submit">
      <svg role="img" aria-label="Search">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-18"></use>
      </svg>
    </button>
    <button type="reset" title="Clear the search query." class="sbx-custom__reset">
      <svg role="img" aria-label="Reset

Build and deploy internal tools

ToolJet is an open-source no-code framework to build and deploy internal tools quickly without much effort from the engineering teams. You can connect to your data sources such as databases ( like PostgreSQL, MongoDB, Elasticsearch, etc ), API endpoints ( ToolJet supports importing OpenAPI spec & OAuth2 authorization) and external services ( like Stripe, Slack, Google Sheets, Airtable ) and use our pre-built UI widgets to build internal tools.

Features

• Visual app builder with widgets such as tables, charts, modals, buttons, dropdowns and more
• Mobile ? & desktop layouts ?
• Dark mode ?
• Connect to databases, APIs and external services
• Deploy on-premise ( supports docker, kubernetes, heroku and more )
• Granular access control on organization level and app level
• Write JS code almost anywhere in the builder
• Query editors for all supported data sources
• Transform query results using JS code
• Import endpoints from OpenAPI specs
• …

Transform SVGs into React components ?

Try it out online!

Watch the talk at React Europe

SVGR transforms SVG into ready to use components. It is part of create-react-app and makes SVG integration into your React projects easy.

Docs

See the documentation at react-svgr.com for more information about using svgr!

Quicklinks to some of the most-visited pages:

• Playground
• Getting started
• CLI usage
• Webpack usage
• Node usage
• VS-Code Extension

Example

Take an icon.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg
  width="48px"
  height="1px"
  viewBox="0 0 48 1"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
  <title>Rectangle 5</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Page-1" stroke="none"