Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - JavaScript’s Drag and Drop API

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="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "TECH_Domains__Sponsor_9" name="TECH_Domains__Sponsor_9"></a>.TECH Domains - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting <a href= "https://go.tech/syntaxistech">go.tech/syntaxistech</a> and using the coupon code “syntax5”.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Sentry__Sponsor_12" name="Sentry__Sponsor_12"></a>Sentry - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14">If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io/">Sentry.io</a> and using the coupon code TASTYTREAT during sign up.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 04:45 - What is it?</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="18"> Drag and drop is really for desktop apps</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> You can drag and drop anything from any browser to any browser</li> <li class="has-line-data" data-line-start="19" data-line-end="21"> The important thing here is that this is a set of browser standards that allow different apps to communicate</li> </ul> <p class="has-line-data" data-line-start="21" data-line-end="22"> 07:50 - How to implement</p> <ol> <li class="has-line-data" data-line-start="22" data-line-end="23"> Make an element draggable</li> <li class="has-line-data" data-line-start="23" data-line-end="26"> Listen on elements for drag events <ul> <li class="has-line-data" data-line-start="24" data-line-end="26"> The events bubble up, so you can listen on the parent element as items are added/removed</li> </ul> </li> </ol> <p class="has-line-data" data-line-start="26" data-line-end="27"> 09:06 - DataTransfer API</p> <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> You can store anything you want in it</li> <li class="has-line-data" data-line-start="28" data-line-end="29"> getData / setData API</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Reference strings</li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 11:35 - Accepting drops</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="33"> When you dragOver, you need to preventDefault()</li> <li class="has-line-data" data-line-start="33" data-line-end="35"> Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location</li> </ul> <p class="has-line-data" data-line-start="35" data-line-end="36"> 13:01 - Drop Image</p> <ul> <li class="has-line-data" data-line-start="36" data-line-end="38"> Set whatever you want</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 16:00 - Drop Effect</p> <ul> <li class="has-line-data" data-line-start="39" data-line-end="40"> What does it look like when you drop it? Does it go back?</li> <li class="has-line-data" data-line-start="40" data-line-end="41"> dataTransfer.effectAllowed</li> <li class="has-line-data" data-line-start="41" data-line-end="43"> e.dataTransfer.setDragImage(nothing, 0, 0);</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 18:02 - Security concerns</p> <p class="has-line-data" data-line-start="45" data-line-end="46"> 20:34 - Shortcomings:</p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="49"> Edge cases out the WAZOO <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> Margin caused dragout events</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Lots of if statements</li> </ul> </li> <li class="has-line-data" data-line-start="49" data-line-end="51"> It’s up to you to do EVERYTHING <ul> <li class="has-line-data" data-line-start="50" data-line-end="51"> CSS, classes, hover styles, etc.</li> </ul> </li> <li class="has-line-data" data-line-start="51" data-line-end="54"> Accessibility <ul> <li class="has-line-data" data-line-start="52" data-line-end="53"> Inaccessible by default, unless using mouse keys</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> Have to announce everything</li> </ul> </li> <li class="has-line-data" data-line-start="54" data-line-end="56"> Mobile</li> </ul> <p class="has-line-data" data-line-start="56" data-line-end="57"> 26:14 - Lbs</p> <ul> <li class="has-line-data" data-line-start="57" data-line-end="59"> <a href="https://google.github.io/transmat/">Transmat API</a></li> </ul> <h2 class="code-line" data-line-start="59" data-line-end="60"> <a id="Links_59" name="Links_59"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="60" data-line-end="61"> <a href="https://www.figma.com/">Figma</a></li> <li class="has-line-data" data-line-start="61" data-line-end="62"> <a href="https://www.notion.so/">Notion</a></li> <li class="has-line-data" data-line-start="62" data-line-end="64"> <a href="https://missiveapp.com/">Missive</a></li> </ul> <h2 class="code-line" data-line-start="64" data-line-end="65"> <a id="Tweet_us_your_tasty_treats_64" name= "Tweet_us_your_tasty_treats_64"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!
.TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out.tech Domains. Syntax listeners can snap their.TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
 Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
 Show Notes 04:45 - What is it?
  Drag and drop is really for desktop apps
 You can drag and drop anything from any browser to any browser
 The important thing here is that this is a set of browser standards that allow different apps to communicate
  07:50 - How to implement
  Make an element draggable
 Listen on elements for drag events  The events bubble up, so you can listen on the parent element as items are added/removed

  09:06 - DataTransfer API
  You can store anything you want in it
 getData / setData API
 Reference strings
  11:35 - Accepting drops
  When you dragOver, you need to preventDefault()
 Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location
  13:01 - Drop Image
  Set whatever you want
  16:00 - Drop Effect
  What does it look like when you drop it? Does it go back?
 dataTransfer.effectAllowed
 e.dataTransfer.setDragImage(nothing, 0, 0);
  18:02 - Security concerns
 20:34 - Shortcomings:
  Edge cases out the WAZOO  Margin caused dragout events
 Lots of if statements

 It’s up to you to do EVERYTHING  CSS, classes, hover styles, etc.

 Accessibility  Inaccessible by default, unless using mouse keys
 Have to announce everything

 Mobile
  26:14 - Lbs
  Transmat API

  Links  Figma

 Notion

 Missive

  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

Aplikace Youradio Talk

Hasty Treat - JavaScript’s Drag and Drop API

Poslechněte si podcast