git-tips

Collection of git-tips, want to add your tips? Checkout contributing.md

English | 中文 | Русский | 한국어 | Tiếng Việt | 日本語 | नेपाली | Polski | فارسی

Tools:

• git-tip - A handy CLI to make optimum use of these tips. (Here in Docker container)

P.S: All these commands are tested on git version 2.7.4 (Apple Git-66).

• Everyday Git in twenty commands or so
• Show helpful guides that come with Git
• Search change by content
• Show changes over time for specific file
• Remove sensitive data from history, after a push
• Sync with remote, overwrite local changes
• List of all files till a commit
• Git reset first commit
• Reset: preserve uncommitted local changes
• List all the conflicted files
• List of all files changed in a commit
• Unstaged changes since last commit
• Changes staged for commit
• Show both staged and unstaged changes
• List all branches that are…

Disclaimer: pkg was created for use within containers and is not intended for use in serverless environments. For those using Vercel, this means that there is no requirement to use pkg in your projects as the benefits it provides are not applicable to the platform.

This command line interface enables you to package your Node.js project into an executable that can be run even on devices without Node.js installed.

Use Cases

• Make a commercial version of your application without sources
• Make a demo/evaluation/trial version of your app without sources
• Instantly make executables for other platforms (cross-compilation)
• Make some kind of self-extracting archive or installer
• No need to install Node.js and npm to run the packaged application
• No need to download hundreds of files via npm install to deploy your application. Deploy it as a single file
• Put your assets inside the executable to make it even more portable
• Test your…

React & Redux in TypeScript - Complete Guide

"This guide is a living compendium documenting the most important patterns and recipes on how to use React (and its Ecosystem) in a functional style using TypeScript. It will help you make your code completely type-safe while focusing on inferring the types from implementation so there is less noise coming from excessive type annotations and it's easier to write and maintain correct types in the long run."

Found it useful? Want more updates?

Show your support by giving a ⭐

---

What's new?

🎉 Now updated to support TypeScript v3.7 🎉 🚀 _Updated to typesafe-actions@5.x.x 🚀

---

Goals

• Complete type safety (with --strict flag) without losing type information downstream through all the layers of our application (e.g. no type assertions or hacking with any type)
• Make type annotations concise by eliminating redundancy in types using advanced TypeScript Language features like Type Inference and…

React Kawaii

React Kawaii is a library of cute SVG illustrations (react components). Ideal if you want to give some cuteness and personality to your react application.

Example

Install

With npm:

npm install --save react-kawaii

With yarn:

yarn add react-kawaii

How to use

import { Planet } from 'react-kawaii';
const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;

How to use with React Native

import { Planet } from 'react-kawaii/lib/native/';

const Example = () => <Planet size={200} mood="blissful" color="#FDA7DC" />;

Depending on your react and react-native version, you might need to to install the package react-native-svg:

With npm:

npm install react-native-svg

With yarn:

yarn add react-native-svg

Link react-native:

react-native link react-native-svg

Read the react-native-svg documentation in case you need help.

Development

So…

react-textarea-autosize

Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize! Weighs around 1.3KB (minified & gzipped).

This module supports IE9 and above.

import TextareaAutosize from 'react-textarea-autosize';

// If you use CommonJS syntax:
// var TextareaAutosize = require('react-textarea-autosize').default;

React.renderComponent(
  <div>
    <TextareaAutosize />
  </div>,
  document.getElementById('element'),
);

Install

npm install react-textarea-autosize

Demo

https://andarist.github.io/react-textarea-autosize/

Props

Special props:

JS IMAGE CARVER

Content-aware image resizer

• ▶️ ️Demo
• ✏️ How it works
• 📄 Seam carving paper by Shai Avidan and Ariel Shamir

Background image by Ian Dooley

Content-aware image resizing

Content-aware image resizing might be applied when it comes to changing the image proportions (i.e. reducing the width while keeping the height) and when losing some parts of the image is not desirable. Doing the straightforward image scaling in this case would distort the objects in it. To preserve the proportions of the object while changing the image proportions we may use the Seam Carving algorithm.

In the example below, you may see how the original image width was reduced by 50% using content-aware resizing (left image) and straightforward scaling (right image). In this particular case, the left image looks more natural since the proportions of the balloons were preserved.

The Seam Carving algorithm’s idea is to find the…

Awesome Deno

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

This list is a collection of the best Deno modules and resources.

Contents

• Docs
  • Official Docs
  • External Docs
  • Online Playgrounds
• Modules
  • Automation
  • CLI utils
  • Database
  • Frontend development
  • Frontend framework
  • Logging
  • Mail
  • Markdown
  • String utils
  • Template engine
  • Testing
  • Utils
  • Web framework
  • WebSocket
  • Web utils
  • Webview
  • XML
• Registries
• Showcases
• Tools
• Articles
• Presentations
• Resources in Other Languages
  • Chinese
  • Hebrew
  • Indonesian
  • Italian
  • Japanese
  • Korean
  • Russian
  • Spanish
  • Uzbek

Docs

Official Docs

• Official Site
• Deno API Reference
  • Deno Unstable API Reference
• Deno Manual

External Docs

• V8 Docs for Deno
• DenoBeginner.com - A completely free crash course on deno for beginners.

Online Playgrounds

• deno.town
• Deno Playground
  • maman/deno-playground
• DenoBR Playground
• myCompiler.io
• Repl.it

Modules

NOTICE: Deno has a few official modules that could be found at deno_std Consider submitting to the deno.land/x registry.

Automation

• autopilot…

Description

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

Additional information, live demos and a user showcase are available at howlerjs.com.

Follow on Twitter for howler.js and development-related discussion: @GoldFireStudios.

Features

• Single API for all audio needs
• Defaults to Web Audio API and falls back to HTML5 Audio
• Handles edge cases and bugs across environments
• Supports all codecs for full cross-browser support
• Automatic caching for improved performance
• Control sounds individually, in groups or globally
• Playback of multiple sounds at once
• Easy sound sprite definition and playback
• Full control for fading, rate, seek, volume, etc.
• Easily add 3D spatial sound or stereo panning
• Modular - use what you want and easy to extend
• No outside dependencies, just pure JavaScript
• As light as…

Installation • Usage • Contributing

Installation

The library is written in TypeScript and compiled to an UMD module to allow integration into different environments.

Browsers

You can grab the latest version from jsdelivr.

<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>

The library instance is loaded into the global party object.

Node.JS

If you are using a package-managed environment, you can also install the latest version via npm.

npm install party-js
# or
yarn add party-js

To use it, simply require or import it.

import party from "party-js";
// or
const party = require("party-js");

Usage

The library essentially offers a fully customizeable particle-system implementation into HTML documents. Users of the library have the ability to create and fine-tune effects to their individual liking. The library offers a few simple effects right out-of-the-box, so you don't have to waste time re-creating simple…

About Choc UI

CHOC is acronym for Chakra Higher Order Components. Choc UI is a collection of components, inspired by many sources of well used web components, which are rebuilt based on the Chakra UI library.

Official Documentation

See it in action on Choc-UI's Website.

Components

• Elements
  • Headers
  • Cards
  • Alerts
  • Pagination
  • Badges
  • Gradient Icons
  • Carousels
  • Empty - Antd, https://readyui.co, razorui.com
  • Result - Antd
  • Extra Components
• Page Sections
  • Heros
  • Feature Sections
  • CTA Sections
  • Pricing Sections
  • Client Sections - WickedBlocks
  • Content Sections
  • FAQs
  • Newsletter Sections
  • Stats - Kutty, TailwindUI
  • Testimonials
  • Blog Sections -
  • Contact Sections
  • Footers - Meraki UI
  • Logo Clouds
• Navigation - TailwindUI, Meraki UI
  • Navbars
  • Vertical Navigation (Menus)
  • Sidebar Navigation
• Headings - TailwindUI
  • Card Headings
  • Section Headings
  • Page Headings
• Example Pages - Meraki UI, Kutty
  • Landing Pages
  • Contact Pages
  • Error Pages
  • Home Screens
  • Detail Screens
  • Settings Screens
• Forms Tailwind
  • Form Layouts - Tailwind
  • Sign in and Registration - WickedBlocks
• …