Sucrase

Try it out

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 can speed up your development experience!

Sucrase has been extensively tested. It can successfully build the Benchling frontend code Babel React, TSLint, Apollo client, and decaffeinate with all…

React Hooks in Svelte

React Hook examples ported to Svelte.

useState

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

useEffect

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

useMemo

React example
Svelte example

In Svelte, all reactive statements are memoized. Instead of const var = useMemo(() => expression, dependencies)…

Hiring Without Whiteboards

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.

tl;dr

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

Duds

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

Fragstore

Tiny (~800 B), easy and simple (P)React state management library

After a store update -> only components that use the updated property are rendered

Getting started:

Install it with Yarn:

yarn add fragstore

Or install it with Npm:

npm install fragstore --save

Usage:

Store

The Store is an optional component where you can send the same parameters than the createStore. Sometimes can be useful, for example, when the initial store is defined by an API, or also if you want to change some component state (not store) after some callback.

import createStore from "fragstore";

const { Store } = createStore();

function App() {
  return (
    <Store store={{ 
      username: "Aral",
      age: 31,
    }}>
     {/* rest */} 
    </Store>
  );
}

Fragmented store (meaning of Fragstore)

The power of…

FrontEndCollection (Keep updating, hopefully...)

Web Development Basics

HTML

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

CSS

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

Demo

1. Accordion 🪗
2. ModalBox 💬
3. Drum Kit 🥁
4. Mini Clock 🕑
5. Playing with Variables 🎩

Deep Dive in Javascript

Learn More on BFE.dev

1. Implement Curry()…

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

This project is currently in development.

Friendly machine learning for the web!

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.

Usage

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 Boilerplate for 2021

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.

Getting Started

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

React hooks for Material UI

Install

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

Supported components

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

Animated Emojis

Library with animated emojis.

Docs

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

Install

yarn add animated-emojis # npm i animated-emojis

API

size: Number | undefined
animate: Boolean | undefined

Setup

yarn # npm i

Run docs

yarn docz:dev # npm run docz:dev

Build lib

yarn build # npm run build

Checka11y.css

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.

Features

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