TypeStat

Converts JavaScript to TypeScript and TypeScript to better TypeScript.

Usage

TypeStat is a CLI utility that modifies TypeScript types in existing code The built-in mutators will only ever add or remove types and will never change your runtime behavior TypeStat can:

• ✨ Convert JavaScript files to TypeScript in a single bound!
• ✨ Add TypeScript types on files freshly converted from JavaScript to TypeScript!
• ✨ Infer types to fix --noImplicitAny and --noImplicitThis violations!
• ✨ Annotate missing nulls and undefineds to get you started with --strictNullChecks!

⚡ To start, the typestat command will launch an interactive guide to setting up a configuration file. ⚡

npx typestat

👋 Welcome to TypeStat! 👋
This will create a new typestat.json for you.
...

After, use typestat --config typestat.json to convert your files.

Configuration

To get a deeper understanding of TypeStat, read the following docs pages in order:

1. Usage.md for an…

Package Phobia

• ⚖️ Find the cost of adding a new dependency to your project
• 🕗 Save yourself time and disk space with this web app
• 📈 Detect javascript bloat over time with a chart
• 🛡️ Get a badge/shield for your README
• 📡 Fetch size from json API to integrate into any tool

...as seen on npm weekly and ponyfoo weekly and habr and rwpod and wolf report and the changelog and all over twitter

What is the purpose?

Package Phobia reports the size of an npm package before you install it.

This is useful for inspecting potential dependencies or devDependencies without using up precious disk space or waiting minutes for npm install. Ain't nobody got time for dat.

Results are saved so the first person might wait a bit to view package size, but everyone else gets to see the results instantly!

Demo

A good use case might be…

DenoDB

• 🗣Supports PostgreSQL, MySQL, MariaDB, SQLite and MongoDB
• 🔥Simple, typed API
• 🦕Deno-ready
• Read the documentation

import { DataTypes, Database, Model, PostgresConnector } from 'https://deno.land/x/denodb/mod.ts';
const connection = new PostgresConnector({
  host: '...',
  username: 'user',
  password: 'password',
  database: 'airlines',
});

const db = new Database(connection);

class Flight extends Model {
  static table = 'flights';
  static timestamps = true;

  static fields = {
    id: { primaryKey: true, autoIncrement: true },
    departure: DataTypes.STRING,
    destination: DataTypes.STRING,
    flightDuration: DataTypes.FLOAT,
  };

  static defaults = {
    flightDuration: 2.5,
  };
}

db.link([Flight]);

await db.sync({ drop: true });

await

Size Limit

Size Limit is a performance budget tool for JavaScript. It checks every commit on CI, calculates the real cost of your JS for end-users and throws an error if the cost exceeds the limit.

• ES modules and tree-shaking support.
• Add Size Limit to Travis CI, Circle CI, GitHub Actions or another CI system to know if a pull request adds a massive dependency.
• Modular to fit different use cases: big JS applications that use their own bundler or small npm libraries with many files.
• Can calculate the time it would take a browser to download and execute your JS. Time is a much more accurate and understandable metric compared to the size in bytes.
• Calculations include all dependencies and polyfills used in your JS.

With GitHub action Size Limit will post bundle size changes as a comment in pull request discussion.

With --why, Size Limit…

Fast and easy searching inside a page.

Holmes filters a list of elements based on the value of a input in just ~2KB.

Installation

You can install Holmes with either npm or bower under the package name holmes.js. For npm that looks like this:

$ yarn add holmes.js # or via npm

After which you can add it in your page with i.e. webpack, rollup, browserify or loading the module in a different script tag.

You have to make sure that you have a css rule for the class .hidden that hides elements however you want. One option is to have this:

.hidden {
  display: none
}

but this could be any css you want.

Usage

demo

When should I use it?

You should use Holmes when

• you have a limited amount of items
• you don't need typo-tolerance
• you only want to add a really small library
• …

react-headroom

Hide your header until you need it.

Demo

http://kyleamathews.github.io/react-headroom

Install

npm install react-headroom

Usage

A simple example, see the docs site for more examples and documentation.

<Headroom>
  <h1>You can put anything you'd like inside the Headroom Component</h1>
</Headroom>

React Interview Questions & Answers

Click ⭐if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

3600 Tech Interview Questions. Answered

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

Downloading PDF/Epub formats

You can download the PDF and Epub version of this repository from the latest run on the actions tab.

Table of Contents

Intro.js

Lightweight, user-friendly onboarding tour library

Where to get

You can obtain your local copy of Intro.js from:

1) This github repository, using git clone https://github.com/usablica/intro.js.git

2) Using bower bower install intro.js --save

3) Using npm npm install intro.js --save

4) Download it from CDN (1, 2)

How to use

Intro.js can be added to your site in three simple steps:

1) Include intro.js and introjs.css (or the minified version for production) in your page. Use introjs-rtl.min.css for Right-to-Left language support.

CDN hosted files are available at jsDelivr (click Show More) & cdnjs.

2) Add data-intro and data-step to your HTML elements. To add hints you should use data-hint attribute.

For example:

<a href='http://google.com/' data-intro='Hello step one!'></a>

See all attributes here.

3) Call this JavaScript function:

introJs().start();

…

clipboard.js

Modern copy to clipboard. No Flash. Just 3kb gzipped.

Why

Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.

Install

You can get it on npm.

npm install clipboard --save

Or if you're not into package management, just download a ZIP file.

Setup

First, include the script located on the dist folder or load it from a third-party CDN provider.

<script src="dist/clipboard.min.js"></script>

Now, you need to instantiate it by passing a DOM selector, HTML element, or list of HTML elements.

new ClipboardJS('.btn');

Internally, we need to fetch all elements that matches with your selector and attach event listeners for each one. But guess…

next-sitemap

Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rendered/dynamic/server-side pages.

Table of contents

• Getting started
  • Installation
  • Create config file
  • Building sitemaps
• Splitting large sitemap into multiple files
• Configuration Options
• Custom transformation function
• Full configuration example
• Generating dynamic/server-side sitemaps

Getting started

Installation

yarn add next-sitemap -D

Create config file

next-sitemap requires a basic config file (next-sitemap.js) under your project root

✅ next-sitemap now loads environment variables from .env files by default.

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

Building sitemaps

Add next-sitemap as your postbuild script

{
  "build": "next build"
  "postbuild": "next-sitemap"
}

Having next-sitemap command & next-sitemap.js file may result in file opening instead of building sitemaps in windows machines. Please read more about the issue…