반응 렌더링 추적기

React render tracker – a tool to discover performance issues related to unintended re-renders

STATUS: MVP / proof of concept

The project is at an early stage of development. Lots of things have yet to be added and polished. The initial plan can be found here. Feel free to create an issue if you found a bug or have an idea.

Features:

• Show component tree grouped by owner (rendered by) component or by parent (composed by) component. Default is by owner component, can be changed by a toggle in the top right corner.
• Self and total (including subtree components) cumulative time or all component renders
• Number of component's re-renders
• Show unmounted components (can be disabled by a toggle in the top right corner)
• Event log for a component or its subtree
• Overall stats on events and component instances
• More to come...

사용 방법

옵션 1

Tailwind Nextjs 시작 블로그

This is a Next.js, Tailwind CSS blogging starter template. Probably the most feature rich nextjs markdown blogging template out there. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.

Check out the documentation below to get started.

Facing issues? Check the FAQ page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Feature request? Check the past discussions to see if it has been brough up previously. Otherwise, feel free to start a new discussion thread. All ideas are welcomed!

예.

• Demo Blog - this repo
• My personal blog - modified to auto-generate blog posts with dates
• Aloisdg's cookbook - with pictures and recipes!
• GautierArcin's demo with next translate - includes translation…

_{JavaScript state machines and statecharts}

JavaScript and TypeScript finite state machines and statecharts for the modern web.

📖 Read the documentation

💙 Explore our catalogue of examples

📑 Adheres to the SCXML specification

💬 Chat on the Stately Discord Community

포장하다

• 🤖 xstate - Core finite state machine and statecharts library + interpreter
• 🔬 @xstate/fsm - Minimal finite state machine library
• 📉 @xstate/graph - Graph traversal utilities for XState
• ⚛️ @xstate/react - React hooks and utilities for using XState in React applications
• 💚 @xstate/vue - Vue composition functions and utilities for using XState in Vue applications
• 🎷 @xstate/svelte - Svelte utilities for using XState in Svelte applications
• ✅ @xstate/test - Model-Based-Testing utilities (using XState) for testing any software
• 🔍 @xstate/inspect - Inspection utilities for XState

거푸집

Get started by forking one of these templates on CodeSandbox:

• XState Template - no framework
• XState + TypeScript Template - no framework
• XState +…

IndexedDB는 가용성을 제공합니다.

This is a tiny (~1.09k brotli'd) library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.

1. Installation
2. Changes
3. Browser support
4. API
   1. openDB
   2. deleteDB
   3. unwrap
   4. wrap
   5. General enhancements
   6. IDBDatabase enhancements
   7. IDBTransaction enhancements
   8. IDBCursor enhancements
   9. Async iterators
5. Examples
6. TypeScript

장치

npm 사용

npm install idb

Then, assuming you're using a module-compatible system (like webpack, Rollup etc):

import { openDB, deleteDB, wrap, unwrap } from 'idb';
async function doDatabaseStuff() {
  const db = await openDB(…);
}

브라우저에서 직접

unpkg을 통해 모듈식 직접 사용:

<script type="module">
  import { openDB, deleteDB, wrap, unwrap } from 'https://unpkg.com/idb?module';

  async function doDatabaseStuff() {
    const db = await openDB(…);
  }
</script>

외부 스크립트 참조 사용

<script

HTMLPasser2

The fast & forgiving HTML/XML parser.

장치

npm install htmlparser2

htmlparser2 라이브 데모를 사용할 수 있습니다here.

생태계

성함
묘사
htmlparser2
빠르고 넓은 HTML/XML 파서
domhandler
문서를 DOM의 HTMLPasser2 프로세서로 변환
domutils
domhandler의 DOM을 사용하는 유틸리티
css-select
domhandler의 DOM과 호환되는 CSS 선택기 엔진
cheerio
domhandler DOM의 jQuery API
dom-serializer
domhandler의 DOM 서열화 프로그램

사용법

htmlparser2 자체에 리셋 인터페이스를 제공하여 최소한의 분배로 문서를 소모할 수 있다
인체공학에 더 적합한 경험을 하려면 아래Getting a DOM를 읽으십시오.
const htmlparser2=require(“htmlparser2”);
const parser=new htmlparser2.파서({
onopentag(이름, 속성) {
/*
* 새 탭을 열 때 트리거합니다.
*
* 통합된 "attributes"객체가 필요하지 않은 경우
* "onopentagname"및 "onattribute"이벤트를 확인하십시오.
*/
(이름========...)
View on GitHub

7. 반응이 심오하다

React의 가장 강력한 가상 목록 구성 요소상자를 열면 바로 사용할 수 있는 가변 사이즈 아이템;항목의 높이를 수동으로 측정하거나 하드코딩할 필요가 없다.

페티시 / 반응 대가

React의 가장 강력한 가상 목록 구성 요소

React Virtuoso는 가장 강력한 React 가상 목록 구성 요소 full stop입니다.이유는 다음과 같습니다.

상자를 열면 바로 사용할 수 있는 가변 사이즈 아이템;수동으로 측정하거나 하드코딩 항목의 높이를 측정할 필요가 없다.

지원reverse (bottom up) scrolling and prepending items(채팅, 구독 등);

Grouped mode with sticky headers ;

Responsive grid layout ;

Automatic handling of content resize ;

Custom Header, Footer, and empty list components ;

Pinned top items ;

Endless scrolling , press to load more ;

Initial top most item index ;

Scroll to index method .

실시간 예제 및 문서를 보십시오documentation website.

스폰서

React Virtuoso는 Stream가 협찬하는데 기업급Feed과 Chat API의 선두 공급업체다.Stream에 대한 자세한 내용을 보려면 click here를 클릭하십시오.
Virtuososponsor it를 사용하는 경우어떤 기부금도 프로젝트의 개발과 유지에 큰 도움이 된다.

시작하다

npm…
View on GitHub

8.암페어

AMP 웹 구성 요소 프레임워크는 사용자가 가장 높은 사이트, 이야기, 광고, 이메일 등을 쉽게 만들 수 있도록 한다.

AMP 프로젝트 / Amftml

AMP 웹 구성 요소 프레임워크

앰프⚡

⚡⚡⚡




운율학



공구.





AMP는 웹 구성 요소 프레임워크로 사용자가 우선하는 사이트, 이야기, 광고, 이메일 등을 쉽게 만들 수 있다.
AMP는 오픈 소스 프로젝트입니다. 여러분의 도움이 더욱 좋아질 수 있기를 바랍니다!

AMP에 대해 더 알고 싶으세요?

amp.dev는 AMP를 이해하기에 가장 좋은 장소입니다. 물론 이 사이트는 AMP로 제작되었습니다!

AMP를 사용하는 개발자에게 적합합니다.개발자 포함

guides and tutorials

examples

reference docs

example templates

tools to make using AMP easier

증폭기를 사용하는 데 문제가 있습니까?

Theamp.dev Support page는 도움을 받을 수 있는 자원이 있습니다.

AMP 사용에 대해 묻고 다른 사람이 제기한 질문에 대한 답을 찾습니다.

Stack Overflow와 Let us know about bugs가 개선 건의를 제출했다.

AMP는 file feature requests를 통해 책임 있는 안전 공개를 받아들인다.

AMP를 더 좋게 만들고 싶어요?

Google Application Security program 어떻게...

에 대한 정보가 있습니다.
docs/contributing.md

GitHub 보기 9. 매머드

매머드는 신앙을 바꾸는 데 사용되도록 설계되었다.docx 문서(예: Microsoft Word, Google Docs 및 Libre Office에서 작성한 문서)를 HTML로 변환

/ mwilliamson

Word 문서(.docx 파일)를 HTML로 변환

매머드.docx - HTML 변환기

매머드는 신앙을 바꾸는 데 사용되도록 설계되었다.docx 파일
예를 들어 마이크로소프트 워드, 구글 문서, Libre Office가 만든 문서
HTML로 변환
Mammoth의 목표는 문서의 의미 정보를 사용하여 간단명료한 HTML을 생성하는 것입니다.
기타 세부 사항을 무시하다.
예를 들어,
Mammoth는 스타일Heading 1이 있는 모든 단락을 h1 요소로 변환합니다.
제목의 스타일 (글꼴, 텍스트 크기, 색 등) 을 완전히 복사하려는 것이 아닙니다.
사용하는 구조 사이에 매우 큰 불일치가 존재한다.docx 및 HTML 구조
이것은 변환이 더 복잡한 문서에 적합하지 않다는 것을 의미한다.
스타일만 사용하여 문서에 의미 표시를 하면 Mammoth의 효과가 가장 좋습니다.
현재 지원되는 기능은 다음과 같습니다.

표제

명단

사용자 정의 docx 스타일에서 HTML로 매핑
예를 들어 적당한 스타일 매핑을 제공하여 WarningHeading을 h1.warning로 변환할 수 있다.

…

mammoth.js

GitHub 보기 10. 방탄 반응

프로덕션 준비 어플리케이션을 구축하기 위한 간단하고 확장성이 뛰어난 아키텍처

/ 아란2207

🛡️ ⚛️ 프로덕션 준비 어플리케이션을 구축하기 위한 간단하고 확장성이 뛰어난 아키텍처

방탄 반응🛡️ ⚛️

bulletproof-react

프로덕션 준비 어플리케이션을 구축하기 위한 간단하고 확장성이 뛰어난 아키텍처

소개하다.

React는 프런트엔드 애플리케이션을 구축하는 데 유용한 툴입니다.그것은 수백 개의 위대한 도서관이 있는 매우 다양한 생태계를 가지고 있어 당신이 필요로 하는 모든 것을 만족시킬 수 있다.그러나 이렇게 많은 선택을 강요당하면 감당하기 어려울 수도 있다
그것도 매우 유연하다. 네가 좋아하는 어떤 방식으로든 React 프로그램을 작성할 수 있지만, 이러한 유연성은 대가가 있다.미리 정의된 체계 구조가 없기 때문에 개발자가 따를 수 없기 때문에 혼란스럽고 일치하지 않거나 지나치게 복잡한 코드 라이브러리를 초래할 수 있다.
이것은 생태계에서 가장 좋은 도구를 사용하여React 응용 프로그램을 만드는 방법을 보여주기 위한 시도로 이 응용 프로그램은 좋은 프로젝트 구조를 가지고 있어 잘 확장될 수 있다.그것은 다양한 코드 라이브러리를 사용한 경험을 바탕으로 이런 체계 구조가 가장 효과적이라는 것이 증명되었다.
목표는...

GitHub 보기 별하늘을 응시하다📈

🔗

Top risers over last 7 days+2173개 별

Free Programming Books+1299개의 별

Public APIs+942개 별

Web dev for beginners+861개 별

Discord.js+569개 별

너의 X 를 만들어라 🔗

Top growth(%) over last 7 days +75%

Shaper +39%

Ocean +18%

Svelte Society +11%

Stitches +11%

레몬 물 🔗

Top risers over last 30 days+8983개의 별

Public APIs+3893개의 별

Free Programming Books+3094개 별

Web dev for beginners+3000개 별

Build your own X+2753개의 별

황소자리 🔗

Top growth(%) over last 30 days +67%

Svelte Society +54%

Bulletproof React +53%

Milkdown +49%

html-to-image +42%

모든 최신 순위는 Mitosis
매주 시사통신에서 트렌드 프로젝트를 제공합니다. Stargazing.dev 로그인해서 어떤 것도 놓치지 않도록 하십시오.
만약 당신이 이 글을 좋아한다면, 트위터에 내가 자주 발표하는 HTML, CSS, 자바스크립트에 관한 글을 발표할 수 있습니다.