惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

AI
AI
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
N
News and Events Feed by Topic
O
OpenAI News
W
WeLiveSecurity
S
Secure Thoughts
www.infosecurity-magazine.com
www.infosecurity-magazine.com
H
Heimdal Security Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Schneier on Security
Schneier on Security
Cloudbric
Cloudbric
T
Threatpost
T
Troy Hunt's Blog
T
Tenable Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
V
Vulnerabilities – Threatpost
Google Online Security Blog
Google Online Security Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
The Hacker News
The Hacker News
Know Your Adversary
Know Your Adversary
Forbes - Security
Forbes - Security
Cyberwarzone
Cyberwarzone
C
CXSECURITY Database RSS Feed - CXSecurity.com
P
Privacy & Cybersecurity Law Blog
L
Lohrmann on Cybersecurity
博客园 - 司徒正美
腾讯CDC
博客园 - 三生石上(FineUI控件)
爱范儿
爱范儿
J
Java Code Geeks
Hugging Face - Blog
Hugging Face - Blog
博客园 - 【当耐特】
M
MIT News - Artificial intelligence
T
The Blog of Author Tim Ferriss
MongoDB | Blog
MongoDB | Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
GbyAI
GbyAI
D
Docker
V
Visual Studio Blog
云风的 BLOG
云风的 BLOG
I
InfoQ
WordPress大学
WordPress大学
人人都是产品经理
人人都是产品经理
A
Arctic Wolf
L
LINUX DO - 热门话题
The Cloudflare Blog
雷峰网
雷峰网
Microsoft Azure Blog
Microsoft Azure Blog
小众软件
小众软件

Kent C. Dodds Blog

Implementing Hybrid Semantic + Lexical Search Simplifying Containers with Cloudflare Sandboxes Migrating to Workspaces and Nx Offloading FFmpeg with Cloudflare Building Semantic Search on my Content Helping YOU ask ME questions with AI How I used Cursor to Migrate Frameworks The Dow's Start on the Covenant Path 2025 in Review The next chapter: EpicAI.pro AI is taking your job How I increased my visibility Launching Epic Web 2023 in Review Stop Being a Junior RSC with Dan Abramov and Joe Savona Live Stream Fixing a Memory Leak in a Production Node.js App 2022 in Review My Car Accident I Migrated from a Postgres Cluster to Distributed SQLite with LiteFS I'm building EpicWeb.dev A review of my time at Remix Remix: The Yang to React's Yin How I help you build better websites Why I Love Remix The State Initializer Pattern How to React ⚛️ Get a catch block error message with TypeScript Building an awesome image loading experience How Remix makes CSS clashes predictable Introducing the new kentcdodds.com How I built a modern website in 2021 How to use React Context effectively Static vs Unit vs Integration vs E2E Testing for Frontend Apps The Testing Trophy and Testing Classifications Array reduce vs chaining vs for loop Don't Solve Problems, Eliminate Them Super Simple Start to Remix Super Simple Start to ESModules in Node.js JavaScript Pass By Value Function Parameters How to write a Constrained Identity Function (CIF) in TypeScript How to optimize your context value How to write a React Component in TypeScript TypeScript Function Syntaxes Listify a JavaScript Array Build vs Buy: Component Libraries edition Using fetch with TypeScript Wrapping React.useState with TypeScript Define function overload types with TypeScript 2020 in Review Business and Engineering alignment Hi, thanks for reaching out to me 👋 useEffect vs useLayoutEffect Super simple start to Firebase functions Super simple start to Netlify functions Super Simple Start to css variables Favor Progress Over Pride in Open Source Testing Implementation Details How getting into Open Source has been awesome for me useState lazy initialization and function updates Use ternaries rather than && in JSX Application State Management with React Use react-error-boundary to handle errors in React JavaScript to Know for React How I structure Express apps What open source project should I contribute to? When I follow TDD AHA Programming 💡 How I Record Educational Videos Should I write a test or fix a bug? Stop mocking fetch Intentional Career Building Improve test error messages of your abstractions Tracing user interactions with React Eliminate an entire category of bugs with a few simple tools Common mistakes with React Testing Library Super Simple Start to React Stop using client-side route redirects The State Reducer Pattern with React Hooks Function forms Replace axios with a simple custom fetch wrapper How to test custom React hooks React Production Performance Monitoring Should I useState or useReducer? Stop using isLoading booleans Make Your Test Fail Make your own DevTools An Argument for Automation Fix the "not wrapped in act(...)" warning Super Simple Start to ESModules in the Browser Implementing a simple state machine library in JavaScript 2010s Decade in Review Why users care about how you write code Why I avoid nesting closures Don't call a React function component Why your team needs TestingJavaScript.com Inversion of Control Understanding React's key prop How to Enable React Concurrent Mode Profile a React App for Performance
mdx-deck: slide decks powered by markdown and react
2018-08-20 · via Kent C. Dodds Blog

I've been giving presentations for years. I like many others started with PowerPoint because "that's how you make presentations." I moved on from that to Prezi when I was in college and I wowed all the crowds. I moved on from that because it felt too gimmicky for the kinds of presentations I was making. I tried Google Slides and that was cool because it's web-tech, but was a little limited and didn't look all that nice. Eventually I landed at slides.com. I've been with slides for pretty much my entire software development presentation career. You'll find pretty much 100% of the public presentations I've made on my slides page (including my first meetup talk).

I've been pretty happy with slides because it's really easy to create presentations and I've never been one to spend a ton of time on my slides. I just want to make them quickly and focus on practicing my presentation to communicate effectively what I want. But it definitely has some shortcomings and limitations, and there are some things about the WYSIWYG interface that really bug me. So I've always been on the lookout for a better experience creating slides. (Now's as good a time as any to admit that I've never used Keynote. But I didn't want to pay for it and I don't think that I'd be willing to spend the time working on the slides to make it any better than slides anyway).

Probably the biggest example of the limitations of slides that really bothers me is the difficulty of including interactive elements on the page. I always admire people who's slides are made with HTML, CSS, and JS because they can just add their interactive demos directly to their slides which increases "the wow factor" in addition to being generally more engaging. For a specific example, my slides for my "Simply React" keynote at ChainReact had several demos that were recorded video which is not awesome, but I also had an issue where I couldn't replay the videos (watch here). So the demos kinda fell flat a bit.

When master Ken Wheeler announced spectacle I was super excited! It is so awesome! I never got into it though because I'm just too lazy and wasn't willing to take the time to make slides out of React code and customize it to what I want it to be. So though I've tried it a few times, it never really took off for me.

Enter MDX

A few months ago John Otander released the initial version of a new tool (and specification) called MDX. Months later Tim Neutkens announced MDX during the Zeit Day 2018 Keynote and the world's collective minds were blown (for example).

Here's a quick example of what's possible with MDX:

import InteractiveGraph from './my-d3-graph'

# Checkout this cool graph!

> This is markdown, for real

<InteractiveGraph />

**That's right!** We're rendering a **React Component** in Markdown!

There's a bunch that's awesome from this. I've been wanting something like this for quite some time! Back when I was working on the website for glamorous (glamorous.rocks), I wanted to make all the docs in markdown to make it easier to internationalize, but I also wanted interactivity to be possible, so I came up with a super weird syntax to make this possible. It's pretty cool, and actually works similar to MDX at a fundamental level (uses a custom fancy plugin for remark), but it's way hacky and limited. This MDX thing is the REAL DEAL!

Enter mdx-deck

Recently, the (seriously) amazing Brent Jackson created and announced something absolutely amazing: mdx-deck

gif showing mdx-deck demo

It's got the ease of slides that I love because it's just markdown. Couldn't be much easier than that! Then, to top that off, if I want something to be interactive, I can simply make that interactive thing a React component, then import that directly into my slide!! How awesome is that!? Way awesome is the answer!

mdx-deck has some pretty sweet features too:

You combine this with Netlify's amazing GitHub Integration and put your slides in a GitHub project and you're off to the races with an automatically deployed slide deck!

Conclusion

I'm currently working on porting my slides for "Simply React". You can see the current state of the slides deployed on netlify here (and the pdf). I'm pretty jazzed about the ability to have such an easy way to create presentations in the browser that are easy to run locally, deployed to the web, create a PDF version, and totally interactive. This is just terrific.

Give it a look and try it for your next presentation. I think you'll love it. Good luck!