Converts JavaScript to TypeScript and TypeScript to better TypeScript. 🧫

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.

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

1. Usage.md for…

• ⚖️ 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 AWS Developer Tools Blog and npm weekly and ponyfoo weekly and habr and rwpod and wolf report and the changelog and all over twitter

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!

A…

⛔️ This project is not actively maintained: expect issues, and delays in reviews

• 🗣 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]);

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 GitHub Actions, Circle CI 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 can tell you…

Fast and easy searching inside a page.

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

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.

demo

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
• …

Hide your header until you need it.

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

npm install react-headroom

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>

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

💡 Nail React interviews with questions and solutions from ex-interviewers! Try GreatFrontEnd → 💡

🚀 Ace React interview questions with solutions from FAANG+ companies! Try FrontendLead → 🚀

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions and DataStructures and Algorithms for DSA related questions or problems.

User Onboarding and Product Walkthrough Library

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 yarn yarn add intro.js

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

4) Download it from CDN (1, 2)

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();

…

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

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.

You can get it on npm.

npm install clipboard --save

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

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…

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

yarn add next-sitemap

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

✅ next-sitemap will load environment variables from .env files by default.

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

Add next-sitemap as your postbuild script

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

You can also use a custom config file instead of next-sitemap.config.js. Just pass --config <your-config-file>.js to build command (Example: custom-config-file)

{
  "build"