Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
1. The Magic of CSS
A CSS course to turn you into a magician.
adamschwartz
/
magic-of-css
A CSS course to turn you into a magician.
The Magic of CSS
A CSS course for web developers who want to be magicians.
2. React Cool Dimensions
React hook to measure an element's size and handle responsive components.
wellyshen
/
react-cool-dimensions
😎 📏 React hook to measure an element's size and handle responsive components.
REACT COOL DIMENSIONS
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
Features
- 🚀 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.
Requirement
To use react-cool-dimensions, you must use react@16.8.0 or greater which includes hooks.
Installation
This package is distributed via npm.
$ yarn add…3. Nextra
Nextra is a Next.js and MDX powered, no-code Static Site Generator.
shuding
/
nextra
Simple, powerful and flexible site generation framework with everything you love from Next.js.
Nextra
Simple, powerful and flexible site generation framework with everything you love from Next.js.
Documentation
Development
Installation
The Nextra repository uses PNPM Workspaces and
Turborepo. To install dependencies, run
pnpm install in the project root directory.
Build Nextra Core
cd packages/nextra
pnpm build
Watch mode: pnpm dev
Build Nextra Theme
cd packages/nextra-theme-docs
pnpm build
| Command | Description |
|---|---|
| pnpm dev | Watch mode |
| pnpm dev:layout | Watch mode (layout only) |
| pnpm dev:tailwind | Watch mode (style only) |
Development
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.
Sponsors
4. Fusuma
Fusuma makes slides with Markdown easily.
Features
- 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
Modes
- 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:imageand 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
Demos
Getting Started
$ npm i fusuma -D
$…5. CodeTour
VS Code extension that allows you to record and playback guided tours of codebases, directly within the editor.
microsoft
/
codetour
VS Code extension that allows you to record and play back guided tours of codebases, directly within the editor.
CodeTour 🗺️
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!
Getting Started
…6. Sergey
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.
Sergey
The little static site generator
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.
$ npm install sergey
# Build the site
$ sergey
# Run Sergey in dev mode
$ sergey --watch
7. Vidact
A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM
Vidact
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.
How does it work and how is it different from React?
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…
8. Compiled
A familiar and performant compile time CSS-in-JS library for React.
atlassian-labs
/
compiled
A familiar and performant compile time CSS-in-JS library for React.
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Usage
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>
Extract styles
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 {…9. Got
Human-friendly and powerful HTTP request library for Node.js
sindresorhus
/
got
🌐 Human-friendly and powerful HTTP request library for Node.js
Sindre's open source work is supported by the community.
Special thanks to
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.
Install
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.
Take a peek
A quick start guide is available.
JSON mode
Got has a…
10. patch-package
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.
ds300
/
patch-package
Fix broken node modules instantly 🏃🏽♀️💨
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.
Set-up
In package.json
"scripts": {
+ "postinstall": "patch-package"
}
Then
npm
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.
Stargazing 📈
Top risers over last 7 days
- Web Development for Beginners +3,032 stars
- Free Programming Books +1,105 stars
- Coding Interview University +1,059 stars
- Developer Roadmap +958 stars
- Clone Wars +768 stars
Top risers over last 30 days
- Web Development for Beginners +5,463 stars
- Free Programming Books +3,320 stars
- Vite +3,605 stars
- Developer Roadmap +2,810stars
- Public APIs +2,743 stars
Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.
If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
Top comments (1)
I knew about got from a colleague & it's the best. Gives you best in class defaults. Vscode code tour also looks good.
Thanks.