yarn add --dev sucrase  # Or npm install --save-dev sucrase
node -r sucrase/register main.ts

Using the ts-node integration:

yarn add --dev sucrase ts-node typescript
./node_modules/.bin/ts-node --transpiler sucrase/ts-node-plugin main.ts

Sucrase is an alternative to Babel that allows super-fast development builds Instead of compiling a large range of JS features to be able to work in Internet Explorer, Sucrase assumes that you're developing with a recent browser or recent Node.js version, so it focuses on compiling non-standard language extensions: JSX, TypeScript, and Flow. Because of this smaller scope, Sucrase can get away with an architecture that is much more performant but less extensible and maintainable. Sucrase's parser is forked from Babel's parser (so Sucrase is indebted to Babel and wouldn't be possible without it) and trims it down to a focused subset of what Babel solves. If it fits your use case, hopefully Sucrase…

React Hook examples ported to Svelte.

New 📣: React ⇆ Svelte Cheatsheet

In Svelte, const [varName, set] = useState(initialValue) becomes let varName = initialValue. The setter function is replaced with JavaScript's assignment operator =.

React example
Svelte example

In React, there are 3 ways to useEffect().

1. With null dependencies: useEffect(fn). This runs on every render.
2. With an empty array as dependencies: useEffect(fn, []). This runs during mount, and cleanup function runs on unmount.
3. With a list of dependency vars: useEffect(fn, [a, b, c]). This reavaulates whenever a dependency changes. The cleanup runs whenever dependencies change and during unmount.

This is an example of #2, where the callback runs when component is mounted and cleanup runs when unmounted.

React example
Svelte example

React example
Svelte example

In Svelte, all reactive statements are memoized. Instead of const…

A list of companies (or teams) that don't do "whiteboard" interviews. "Whiteboards" is used as a metaphor, and is a symbol for the kinds of CS trivia questions that are associated with bad interview practices. Whiteboards are not bad – CS trivia questions are. Using sites like HackerRank/LeetCode probably fall into a similar category.

The companies and teams listed here use interview techniques and questions that resemble day-to-day work. For example, pairing on a real world problem or a paid/unpaid take home exercise. Read (and contribute to) our recommendations for ways to conduct better interviews.

• Discussing a real world problem (with or without whiteboard) is 👍
• Solving CS trivia, technical puzzles, riddles, brainteasers (with or without whiteboard) is 👎

Please open a PR to be added.

If you've been through an interview with one of these companies recently, and your experience suggests otherwise from their…

Tiny, easy and powerful React state management library

• 📦 ・Tiny: Less than 1kb package to manage your state in React and Preact.
• 🌱 ・Easy: You don't need actions, reducers, selectors, connect, providers, etc. Everything can be done in the simplest and most comfortable way.
• 🚀 ・Powerful: When a store property is updated, only its components are re-rendered. It's not re-rendering components that use other store properties.

• 1. Installation 🧑🏻‍💻
• 2. Init your store 👩🏽‍🎨
  • createStore
  • How to export
• 3. Manage the store 🕹
  • useStore hook
  • setStore helper
  • getStore helper
  • withStore HoC
• 4. Register events after an update 🚦
• 5. How to... 🧑‍🎓
  • Add a new store property
  • Use more than one store
  • Update several portions avoiding rerenders in the rest
  • Define calculated properties
• 6. Teaful Devtools 🛠
• 7. Addons and extras 🌀
• 8. Examples 🖥
• …

1. What happens when you type in a URL
2. GET vs POST
3. What can we do to improve a website's performance?
4. HTML5 offline storage mechanism
5. Common time and space-complexity
6. What has been deprecated, and what is new on HTML5?
7. How the DOM really works?
8. Inline elements, Block elements, and what are the differences?
9. Several ways to call a function
10. A brief introduction of the differences between "src" and "href"
11. A brief introduction of Call, Apply, Bind
12. Time and space complexity for common sorting algorithm

1. What is the difference between display:none and visibility:hidden style?
2. What is BFC(Block Formatting Context)

this keyword
Bubbling and Capturing
Execution Context
Higher Order Function
Event Loop
Closures
Throttling and Debouncing
Promises

Consuming Promises

Read our ml5.js Code of Conduct and software licence here!

This project is currently in development.

ml5.js aims to make machine learning approachable for a broad audience of artists, creative coders, and students. The library provides access to machine learning algorithms and models in the browser, building on top of TensorFlow.js.

The library is supported by code examples, tutorials, and sample data sets with an emphasis on ethical computing. Bias in data, stereotypical harms, and responsible crowdsourcing are part of the documentation around data collection and usage.

ml5.js is heavily inspired by Processing and p5.js.

Please read our Code of Conduct, which establishes our commitment to make ml5.js a friendly and welcoming environment.

Before getting started with ml5.js, review our Code of Conduct. There are several ways you can use the ml5.js library:

• You can use the latest version…

TypeScript project boilerplate with modern tooling, for Node.js programs, libraries and browser modules. Get started quickly and right-footed 🚀

• TypeScript 4
• Optionally esbuild to bundle for browsers (and Node.js)
• Linting with typescript-eslint (tslint is deprecated)
• Testing with Jest (and ts-jest)
• Publishing to npm
• Continuous integration (GitHub Actions / GitLab CI)
• Automatic API documentation with TypeDoc

See also the introduction blog post: Starting a TypeScript Project in 2021.

# Clone the repository (you can also click "Use this template")
git clone https://github.com/metachris/typescript-boilerplate.git your_project_name
cd your_project_name

# Edit `package.json` and `tsconfig.json` to your liking
...

# Install dependencies
yarn install

# Now you can run various yarn commands:
yarn cli
yarn lint
yarn test
yarn build-all
yarn ts-node <filename>
yarn esbuild-browser
...

• Take a look at all the scripts in package.json
• For publishing to npm, use yarn publish (or…

• npm install use-mui or
• yarn add use-mui

For each state, each hook accepts an optional default state and returns a state-setting utility function (that you should not need but is available to fit any edge cases your may have). For example: a component with a value prop will have an accompanying hook with an optional defaultValue parameter property and setValue state property; a component with an open prop will have an accompanying hook with an optional defaultOpen parameter property and setOpen state property.

function MyTextField() {
  const { handleChange, setValue, value } = useTextField({
    defaultValue: 'Loading...',
  });
  useEffect(() => {
    getAsyncValue()
      .then(asyncValue => {
        setValue(asyncValue);
      })
      .catch(() => {
        setValue('');
      }

Library with animated emojis.

https://animated-emojis.netlify.com/

yarn add animated-emojis # npm i animated-emojis

size: Number | undefined
animate: Boolean | undefined

yarn # npm i

yarn docz:dev # npm run docz:dev

yarn build # npm run build

A CSS stylesheet to quickly highlight a11y concerns.

Lightweight • Modern • Accessibile • Customisable • Simple

The first line of defence for testing accessibility.

Designed to quickly highlight some common accessibility errors and warnings that can be easily and quickly rectified.

Recommended before turning to automation tools and scanners such as Lighthouse on Chrome.

Remember not to push this to production!

A great tool for:

• Websites and web applications to begin improving their accessibility.
• Developers and testers/QA to learn more about accessibility and creating accessible websites and applications.

Our features are always checked against the W3C accessibility guidelines.

A list of some common a11y concerns Checka11y.css will check for and highlight :

• Check for invalid HTML elements nested inside of <a> and <button>
• Check for missing alt attributes on images
• Check for media that is set to autoplay
• Check <li> is the only direct child of <ol>…