A CSS course for web developers who want to be magicians.

• The Magic of CSS
  • Preface
  • Chapter 1: The Box
  • Chapter 2: Layout
  • Chapter 3: Tables
  • Chapter 4: Color
  • Chapter 5: Typography
  • Chapter 6: Transitions
  • See planning.md for what’s next...

A React hook that measure an element's size and handle responsive components with highly-performant way, using ResizeObserver. Try it you will 👍🏻 it!

❤️ it? ⭐️ it on GitHub or Tweet about it.

⚡️ Try yourself: https://react-cool-dimensions.netlify.app

• 🚀 Measures element's size with highly-performant way, using ResizeObserver.
• 🎣 Easy to use, based on React hook.
• 🍰 Easy to handle responsive components, provides an alternative solution to the container queries problem.
• 📦 Supports border-box size measurement.
• 🕹 Supports conditionally updating state.
• 🎛 Super flexible API design to cover most cases for you.
• 📜 Supports TypeScript type definition.
• 🗄️ Server-side rendering compatibility.
• 🦔 Tiny size (~ 1kB gzipped). No external dependencies, aside for the react.

To use react-cool-dimensions, you must use react@16.8.0 or greater which includes hooks.

This package is distributed via npm.

$ yarn add

Simple, powerful and flexible site generation framework with everything you love from Next.js.

https://nextra.site

The Nextra repository uses PNPM Workspaces and Turborepo. To install dependencies, run pnpm install in the project root directory.

cd packages/nextra
pnpm build

Watch mode: pnpm dev

cd packages/nextra-theme-docs
pnpm build

You can also debug them together with a website locally. For instance, to start examples/docs locally, run

cd examples/docs
pnpm dev

Any change to example/docs will be re-rendered instantly.

If you update the core or theme packages, a rebuild is required. Or you can use the watch mode for both nextra and the theme in separated terminals.

• Zero Config
• Providing various modes
• Markdown and MDX
• Themes
• Code syntax Highlight, MathJax, Diagrams, and Flowcharts
• Browser-friendly slides
  • All results for lighthouses are perfect
  • Full supporting for SEO and OGP
  • Checking a11y(Accessibility)
• Customizable JavaScript and CSS
• A sidebar having agenda and some features

• Init Mode
  • Creating a slide, style, configuration file
  • Creating GitHub actions that deploy slides to gh-pages automatically
• Development Mode
  • Running with HMR
  • Just coding Markdown and sometimes CSS
• Build Mode
  • Rendering to html and optimizing js,css,md
  • Generating an image of slides as og:image and checking a11y automatically
• Presentation Mode
  • Speaker Note
  • Timer
  • Recording your page actions and voice
• Deploy Mode
  • Deploying to GitHub Pages
• PDF Mode
  • Exporting slides as PDF

• Introducing Fusuma [repository]
• Themes [repository]
• Math, Diagrams, and Flowcharts [repository]

$ npm i fusuma -D
$

CodeTour is a Visual Studio Code extension, which allows you to record and play back guided walkthroughs of your codebases. It's like a table of contents, that can make it easier to onboard (or re-board!) to a new project/feature area, visualize bug reports, or understand the context of a code review/PR change. A "code tour" is simply a series of interactive steps, each of which are associated with a specific directory, or file/line, and include a description of the respective code. This allows developers to clone a repo, and then immediately start learning it, without needing to refer to a CONTRIBUTING.md file and/or rely on help from others. Tours can either be checked into a repo, to enable sharing with other contributors, or exported to a "tour file", which allows anyone to replay the same tour, without having to clone any code to do it!

Sergey is a tiny lil’ static site generator. It’s a progressive tool designed to site atop your already brilliant HTML. In essence, Sergey is HTML + partials with slots thrown in for good measure.

If you’ve ever had to make a change to every header on a totally static website, you’ll know how cumbersome and error-prone it is to copy and paste the changes through all the files. That’s where Sergey comes in. Sergey lets you move that header into a single, importable file, and helps you include it everywhere you need it.

• Read the getting started guide
• Slots explanation
• Command line options

$ npm install sergey

# Build the site
$ sergey

# Run Sergey in dev mode
$ sergey --watch

Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ™️. It is similar to Svelte, but unlike Svelte, Vidact does not introduce a new syntax. It takes in pure React-compatible JavaScript (JSX) and outputs plain JavaScript.

Vidact currently is in alpha phase and has known limitations. It does not fully comply with React's behaviour in some edge cases, and probably never will, but the goal is to get as close behaviour to React as possible. Also, it currently only supports functional components and does not support class components.

Vidact is a babel-plugin that scans your source code to find what parts of the UI need to be updated in response to a prop or state change and generates a plain JavaScript code that should have the same DOM result as the equivalent React…

A familiar and performant compile time CSS-in-JS library for React.

Get started now ➚

import { styled, ClassNames } from '@compiled/react';

// Tie styles to an element
<div css={{ color: 'purple' }} />

// Create a component that ties styles to an element
const StyledButton = styled.button`
  color: ${(props) => props.color};
`;

// Use a component where styles are not necessarily tied to an element
<ClassNames>
  {({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

-import {

---

^{Sindre's open source work is supported by the community.
Special thanks to}

The development platform for building type-safe distributed systems

^{End-to-end tooling from local development to automated DevOps and infrastructure in your AWS/GCP.}

---

Human-friendly and powerful HTTP request library for Node.js

See how Got compares to other HTTP libraries

You probably want Ky instead, by the same people. It's smaller, works in the browser too, and is more stable since it's built upon Fetch.

Support questions should be asked here.

npm install got

Warning: This package is native ESM and no longer provides a CommonJS export. If your project uses CommonJS, you will have to convert to ESM. Please don't open issues for questions regarding CommonJS / ESM.

Got v11 is no longer maintained and we will not accept any backport requests.

A quick start guide is available.

Got has a…

patch-package lets app authors instantly make and keep fixes to npm dependencies. It's a vital band-aid for those of us living on the bleeding edge.

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js
# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

Patches created by patch-package are automatically and gracefully applied when you use npm(>=5) or yarn.

No more waiting around for pull requests to be merged and published. No more forking repos just to fix that one tiny thing preventing your app from working.

In package.json

 "scripts": {
+  "postinstall": "patch-package"
 }

Then

npm i patch-package

You can use --save-dev if you don't need to run npm in production, e.g. if you're making a web frontend.