Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="0" data-line-end="1">In this episode of Syntax, Wes and Scott review the projects they built during Sentry’s Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button.</p> <h2 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h2> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <strong><a href="#t=00:11">00:11</a></strong> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <strong><a href="#t=00:57">00:57</a></strong> What is a hack week?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <strong><a href="#t=01:55">01:55</a></strong> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <strong><a href="#t=03:42">03:42</a></strong> Scott’s project: a multiplayer editor</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://liveblocks.io/">Liveblocks | Collaborative experiences in days, not months</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://www.partykit.io/">PartyKit | Everything is better with friends</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://www.blocknotejs.org/">BlockNote - Javascript Block-Based text editor | BlockNote</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="https://tiptap.dev/">Dev toolkit for building collaborative editors – Tiptap</a></li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://github.com/microsoft/monaco-editor">microsoft/monaco-editor: A browser based code editor</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://github.com/syntaxfm/hackweek-md-multiplayer-editor">syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="https://www.convex.dev/">Convex | The fullstack TypeScript development platform</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="https://anytype.io/">The Everything App</a></li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <strong><a href="#t=13:57">13:57</a></strong> Multiplayer is so much easier</li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <strong><a href="#t=19:56">19:56</a></strong> Wes’ project: A recording button</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://www.virtualbox.org/">Oracle VM VirtualBox</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href="https://www.parallels.com/ca/pd/general/">Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://karabiner-elements.pqrs.org/">Karabiner-Elements</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://folivora.ai/">folivora.ai - Great Tools for your Mac!</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="https://www.home-assistant.io/">Home Assistant</a></li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href= "https://unity.com/pages/pro-free-trial?&&&&gad=1">The World’s Leading 2D and 3D Platform | Unity Pro Free Trial</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://sendcutsend.com/">SendCutSend | Online Laser Cutting and Waterjet Cutting</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://www.blender.org/">blender.org - Home of the Blender project - Free and Open 3D Creation Software</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <strong><a href="#t=42:31">42:31</a></strong> Learning to skateboard</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> <strong><a href="#t=43:59">43:59</a></strong> F1 documentary follow up</li> <li class="has-line-data" data-line-start="28" data-line-end="30"> <strong><a href="#t=45:30">45:30</a></strong> SIIIIICK ××× PIIIICKS ×××</li> </ul> <h2 class="code-line" data-line-start="30" data-line-end="31"> <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> Scott: <a href= "https://github.com/waydabber/BetterDisplay">BetterDisplay: Unlock your displays on your Mac!</a></li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Wes: <a href= "https://www.amazon.com/LOVIMAG-Magnetic-Hanging-Magnets-Refrigerator/dp/B0CBTZ78Q4?crid=19L2TLC6SKOWL&keywords=100lb+magnet+hooks&qid=1693326610&sprefix=100lb+magnet+hooks,aps,109&sr=8-4&th=1"> LOVIMAG Magnetic Hooks Heavy Duty</a></li> </ul> <h2 class="code-line" data-line-start="35" data-line-end="36"> <a id="Shameless_Plugs_35"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="37" data-line-end="38"> Scott: <a href="https://www.tiktok.com/@syntaxfm">Syntax on TikTok</a></li> <li class="has-line-data" data-line-start="38" data-line-end="40"> Wes: <a href="https://twitter.com/wesbos">@WesBos on X.com</a></li> </ul> <h2 class="code-line" data-line-start="40" data-line-end="41"> <a id="Tweet_us_your_tasty_treats_40"></a>Tweet us your tasty treats</h2> <ul> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

In this episode of Syntax, Wes and Scott review the projects they built during Sentry’s Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button.
 Show Notes  00:11 Welcome
 00:57 What is a hack week?
 01:55 Syntax Brought to you by Sentry
 03:42 Scott’s project: a multiplayer editor
 Liveblocks | Collaborative experiences in days, not months

 PartyKit | Everything is better with friends

 BlockNote - Javascript Block-Based text editor | BlockNote

 Dev toolkit for building collaborative editors – Tiptap

 microsoft/monaco-editor: A browser based code editor

 syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for.md files that comits directly to GitHub

 Convex | The fullstack TypeScript development platform

 The Everything App

 13:57 Multiplayer is so much easier
 19:56 Wes’ project: A recording button
 Oracle VM VirtualBox

 Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac

 Karabiner-Elements

 folivora.ai - Great Tools for your Mac!

 Home Assistant

 The World’s Leading 2D and 3D Platform | Unity Pro Free Trial

 SendCutSend | Online Laser Cutting and Waterjet Cutting

 blender.org - Home of the Blender project - Free and Open 3D Creation Software

 42:31 Learning to skateboard
 43:59 F1 documentary follow up
 45:30 SIIIIICK ××× PIIIICKS ×××
  ××× SIIIIICK ××× PIIIICKS ×××  Scott: BetterDisplay: Unlock your displays on your Mac!

 Wes: LOVIMAG Magnetic Hooks Heavy Duty

  Shameless Plugs  Scott: Syntax on TikTok

 Wes: @WesBos on X.com

  Tweet us your tasty treats  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets
 Wes Bos on Bluesky

 Scott on Bluesky

 Syntax on Bluesky

Aplikace Youradio Talk

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

Poslechněte si podcast