One place for hosting & domains

      Social Media Marketing for Organic Engagement & Brand Trust


      Video

      About the Talk

      It’s no secret that social media for businesses has become a pay-to-play landscape. Yet, no amount of paid ads can generate the push authenticity can. Regardless of your budget, there is a way to authentically engage and interact with your customers via social media platforms. Explore organic strategies that help you speak more authentically to your followers while building trust in your brand.

      What You’ll Learn

      • Which metrics really matter (Say goodbye to vanity metrics!)
      • Engagement optimization tactics
      • Rooting intentions in values

      Resources

      Slides

      About the Presenter

      Kirby is the Senior Social Media Manager at DigitalOcean. She was also the company Culture Champion award winner in 2020. Her work is driven by making a positive impact on others and doing everything with love at our core.



      Source link

      New Report: IT Infrastructure & The Pandemic


      The effects of the COVID-19 pandemic will continue to be felt for years to come, and for many enterprises, that means a significant shift in how and where they power their applications and workloads. But it’s not all doom and gloom. IT professionals are in a unique position to lead infrastructure innovation that will not only allow companies to keep going but will create efficiency and value to propel them into the future.

      In this year’s State of IT Infrastructure Management report, we explore the COVID-19 pandemic’s impact on IT infrastructure plans, IT professionals and the future of the industry.

      Download your free copy of the report to gain insight into what’s changed and what to do next.

      Key Takeaways From a Tumultuous Year

      • The pandemic is prompting a majority of companies to accelerate or kickstart hybrid cloud and colocation migrations, according to a survey of 500 IT leaders and infrastructure managers.
      • IT teams are reevaluating how they approach a remote workforce and a global economy increasingly reliant on digital services.
      • Despite the troubling times, optimism among IT teams has remained relatively strong

      The Off-Prem Migration Continues to Accelerate

      In our first State of IT Infrastructure Management report, published in 2018, 56 percent of participants said their organizations planned to move at least some of their on-prem infrastructure off-premise over the next three years. In 2019, that number jumped to 88 percent. The events of 2020 have solidified and sped up this resolve to move at least some infrastructure off-premise, including among many organizations that had no previous plans to migrate.

      IT Leaders Are Choosing Hybrid Solutions

      Cloud solutions—both hyperscale public cloud and hosted private cloud—have previously been the solution of choice for organizations migrating off-premise. This year, colocation has joined these cloud solutions as a top option for IT leaders looking to downsize commercial real estate footprints as a result of the pandemic. Read the report to learn more about how the pandemic has affected environment choices.

      IT Pros Are Essential, And Now Everyone Knows

      In case there was any doubt before 2020, IT professionals are essential workers, both to their organizations and every day users at large. They’ve risen to the new challenges of remote work while continuing to maintain and protect all aspects of their companies’ infrastructure. Being viewed as essential, both my company execs and colleagues, has helped spur optimism amongst IT staff, especially when it comes to the future. Download the report to see what’s contributing to this positive outlook.

      Take on 2021 With Renewed Vigor and Confidence

      The challenges of remote work and accelerated digital transformation initiatives will remain at the forefront for IT infrastructure managers around the world in the coming year.

      Is your company ready for what’s next? It may seem exhausting to think about the new year after dealing with the constant change and uncertainty of 2020. But with 2021 less than a month away, we at INAP want to ensure that you’re ready to tackle the year and meet your goals. Review the report and then reach out—our intelligent managed services and comprehensive infrastructure solutions can help you drive innovation and meet your objectives.

      Survey Methodology

      The data reflected in this survey was derived from a survey of 500 IT infrastructure managers and senior leaders employed full-time at companies in the U.S. with greater than 100 employees. Any employees of cloud and data center service providers were excluded. Commissioned by INAP and facilitated by Pollfish in August 2020, the survey’s margin of error is +/- 5 percent at the 95 percent confidence level.

      Get your free copy of the report.

      DOWNLOAD NOW >

      Laura Vietmeyer


      READ MORE



      Source link

      Wie man Drag & Drop-Elemente mit Vanilla JavaScript und HTML erstellt


      Einführung

      Drag & Drop ist eine übliche Benutzerinteraktion, die Sie in vielen grafischen Benutzeroberflächen finden.

      Es gibt bereits vorhandene JavaScript-Bibliotheken zum Hinzufügen einer Drag-and-Drop-Funktion zu Ihrer Anwendung. Es kann jedoch Situationen geben, in denen eine Bibliothek nicht verfügbar ist oder einen Overhead oder eine Abhängigkeit mit sich bringt, die Ihr Projekt nicht benötigt.  In diesen Situationen kann die Kenntnis der APIs, die Ihnen in modernen Webbrowsern zur Verfügung stehen, alternative Lösungen bieten.

      Die HTML Drag and Drop-API stützt sich auf das Ereignismodell des DOM, um Informationen darüber zu erhalten, was gezogen oder fallen gelassen wird, und um dieses Element per Drag and Drop zu aktualisieren.  Mit JavaScript-Ereignishandlern können Sie jedes beliebige Element in ein ziehbares Element oder in ein Element, in das abgelegt werden kann, umwandeln.

      In diesem Tutorial werden wir ein Drag-and-Drop-Beispiel mit der HTML-Drag-and-Drop-API mit Vanille-JavaScript erstellen, um die Event-Handler zu verwenden.

      Voraussetzungen

      Um diesem Tutorial zu folgen, benötigen Sie:

      • Einen modernen Webbrowser, der die Drag and Drop API unterstützt (Chrome Firefox 3.5+, Safari 3.1+, Edge 18+).

      Schritt 1 — Erstellen des Projekts und der Ersteinrichtung

      Unser Projekt wird aus einem Container mit zwei Arten von untergeordneten Elementen bestehen:

      • Untergeordnete Elemente, die Sie ziehen können
      • Untergeordnete Elemente, in die Elemente eingefügt werden können

      Öffnen Sie zunächst Ihr Terminalfenster und erstellen Sie ein neues Projektverzeichnis:

      • mkdir drag-and-drop-example

      Navigieren Sie dann zu diesem Verzeichnis:

      Erstellen Sie dann eine index.html - Datei in diesem Verzeichnis:

      Als Nächstes fügen Sie einen Boilerplate-Code für eine HTML-Webseite hinzu:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Und zwischen den Tags <body> fügen Sie Ihr draggable und Ihr dropzone (Ablageziel) hinzu:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei. Erstellen Sie dann eine Datei style.css:

      Als nächstes fügen Sie Stile für die Elemente in unserer Datei index.html hinzu:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      Dadurch wird der Anwendung etwas Formatierung hinzugefügt. Jetzt können Sie index.html im Browser anzeigen und beobachten, dass dies ein draggable <div> und ein dropzone <div> produziert.

      Screenshot von verschiebbaren und Dropzone-Divs

      Als Nächstes erstellen wir explizit die erste <div> durch Hinzufügen des Attributs draggable .

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Speichern und schließen Sie die Datei.

      Sehen Sie sich schließlich index.html erneut im Browser an.  Wenn wir auf das draggable<<div> klicken und es über den Bildschirm ziehen, sollte es eine visuelle Anzeige der Bewegung geben.

      Der Standardwert für das Attribut draggable ist auto. Das bedeutet, ob das Element ziehbar ist, wird durch das Standardverhalten Ihres Browsers bestimmt.  Typischerweise bedeutet dies, dass Textauswahlen, Bilder und Links gezogen werden können, ohne dass draggable =„wahr" angegeben sein muss.

      Sie haben nun eine HTML-Datei mit einem ziehbaren Element. Wir werden uns mit der Aufnahme von Ereignishandlern befassen.

      Schritt 2 — Handhaben von Drag-and-Drop-Ereignissen mit JavaScript

      Wenn wir jetzt die Maus loslassen, während wir das verschiebbare Element ziehen, geschieht nichts. Um eine Aktion beim Ziehen oder Ablegen von DOM-Elementen auszulösen, müssen wir die Drag & Drop-API verwenden:

      • ondragstart: Dieser Ereignishandler wird an unser ^>draggable<^>Element angehängt und ausgelöst, wenn ein dragstart-Ereignis eintritt.
      • ondragover: Dieser Ereignishandler wird an unser ^>dropzone<^>-Element angehängt und ausgelöst, wenn ein dragover-Ereignis eintritt.
      • ondrop: Dieser Ereignishandler wird an unser dropzone-Element angehängt und ausgelöst, wenn ein drop-Ereignis eintritt.

      Anmerkung: Insgesamt gibt es acht Ereignishandler: ondragondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart und ondrop. Für unser Beispiel benötigen wir sie nicht alle.

      Lassen Sie uns zunächst eine neue Datei script.js in unserer index.html referenzieren:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Erstellen Sie als Nächstes eine neue Datei script.js:

      Das DataTransfer-Objekt verfolgt die Informationen, die sich auf das aktuelle Drag beziehen.  Um unser Element per Drag and Drop zu aktualisieren, müssen wir direkt auf das DataTransfer-Objekt zugreifen. Zu diesem Zweck können wir die Eigenschaft dataTransfer aus dem DragEvent des DOM-Elements auswählen.

      Anmerkung: Das DataTransfer-Objekt kann Informationen für mehrere Elemente verfolgen, die gleichzeitig gezogen werden. Wir werden uns beispielsweise auf das Ziehen eines Elements konzentrieren.

      Die setData-Methode des Objekts dataTransfer kann verwendet werden, um die zu ziehenden Statusinformationen für Ihr aktuell gezogenes Element festzulegen. Dazu sind zwei Parameter erforderlich:

      • Einen String, der das Format des zweiten Parameters deklariert
      • die tatsächlichen übergebenen Daten

      Unser Ziel ist es, unser Element draggable in ein neues übergeordnetes Element zu verschieben. Wir müssen in der Lage sein, unser draggable-Element mit einer eindeutigen ID auszuwählen. Wir können die ID des gezogenen Elements mit der setData-Methode setzen, damit es später verwendet werden kann.

      Schauen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Anmerkung: Internet Explorer 9 bis 11 hat laut Angaben Probleme mit der Verwendung von „text/plain“. Das Format muss für diesen Browser „text“ sein.

      Um das CSS-Styling des gezogenen Elements zu aktualisieren, können wir auf seine Stile zugreifen, indem wir erneut das DOM-Ereignis verwenden und die gewünschten Stile für die currentTarget festlegen.

      Ergänzen wir unsere Funktion und ändern die Hintergrundfarbe zu gelb:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Anmerkung: Alle Stile, die Sie ändern, müssen beim Ablegen erneut manuell aktualisiert werden, wenn Sie Stile nur zum Ziehen wünschen.  Wenn Sie etwas ändern, sobald das Ziehen beginnt, behält das gezogene Element diese neue Gestaltung bei, es sei denn, Sie ändern es wieder zurück.

      Jetzt haben wir unsere JavaScript-Funktion für den Start des Ziehens.

      Wir können ondragstart dem Element draggable in index.html hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an. Wenn Sie versuchen, Ihren Artikel jetzt zu ziehen, wird das in unserer Funktion deklarierte Styling angewendet:

      Animiertes Gif, das ein Element darstellt, das gezogen, aber nicht fallen gelassen wird

      Es passiert jedoch nichts, wenn Sie Ihren Klick loslassen.

      Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondragover.

      Das Standard-Drop-Verhalten für bestimmte DOM-Elemente wie <div>s in Browsern akzeptiert normalerweise kein Ablegen.  Dieses Verhalten wird das Verhalten abfangen, das wir implementieren möchten. Um sicherzustellen, das wir das gewünschte Ablageverhalten erhalten, wenden wir preventDefault an.

      Sehen wir uns unsere Datei script.js noch einmal an und erstellen eine neue Funktion zur Verwendung von preventDefault. Fügen Sie diesen Code am Ende der Datei hinzu:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondragover hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      Zu diesem Zeitpunkt haben wir immer noch keinen Code geschrieben, der das tatsächliche Ablegen behandelt.  Der nächste Ereignishandler, der in dieser Reihenfolge ausgelöst wurde, ist ondrop.

      Lassen Sie uns unsere Datei script.js erneut besuchen und eine neue Funktion erstellen.

      Wir können auf die Daten verweisen, die wir früher mit der setData-Methode des dataTransfer-Objekts gespeichert haben.  Wir werden die getData-Methode des dataTransfer-Objekts verwenden.  Die Daten, die wir gesetzt haben, waren die ID, und das ist es, was uns zurückgegeben wird:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Wählen Sie unser draggable Element mit der von uns abgerufenen ID aus:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Wählen Sie unser Element dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Fügen Sie unser Element draggable an das Element dropzone an:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Setzen Sie unser dataTransfer-Objekt zurück:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Jetzt können wir unserem Element dropzone in index.html ondrop hinzufügen:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Sobald das erledigt ist, haben wir eine vollständige Drag-and-Drop-Funktion. Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie das Element draggable zu dropzone.

      Animiertes Gif, das ein Element darstellt, das per Drag & Drop in ein Drop-Ziel gezogen wird

      Unser Beispiel behandelt das Szenario eines einzelnen verschiebbaren Elements und eines einzelnen Ablageziels.  Sie können mehrere verschiebbare Elemente und mehrere Ablageziele haben und sie an alle anderen Drag & Drop-API-Ereignishandler anpassen. 

      Schritt 3 — Erstellen eines erweiterten Beispiels mit mehreren ziehbaren Elementen

      Hier ist ein weiteres Beispiel dafür, wie Sie diese API verwenden können: Eine Aufgabenliste mit ziehbaren Aufgaben, die Sie von einer „zu erledigen"-Spalte in eine Spalte „erledigt" ziehen können.

      Animiertes Gif, das mehrere zu erledigen Aufgaben zeigt, die per Drag & Drop in eine Spalte „erledigt

      Um Ihre eigene zu erledigende Liste zu erstellen, fügen Sie mehr ziehbare Elemente mit einzigartigen IDs zu index.html hinzu:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Sehen Sie sich index.html in Ihrem Browser an und ziehen Sie die Elemente in der Spalte zu erledigen zur Spalte erledigt. Sie haben eine zu erledigende Anwendung erstellt und die Funktionalität getestet.

      Zusammenfassung

      In diesem Artikel haben Sie eine zu erledigende Anwendung erstellt, um die Drag-and-Drop-Funktionalität zu untersuchen, die modernen Webbrowsern zur Verfügung steht.

      Die Drag und Drop API bietet mehrere Optionen für die Anpassung Ihrer Aktionen über das Ziehen und Ablegen. Beispielsweise können Sie die CSS-Styling Ihrer verschobenen Elemente aktualisieren. Anstatt das Element zu verschieben, können Sie sich auch dafür entscheiden, Ihr verschiebbares Element zu kopieren, so dass es beim Ablegen repliziert wird.

      Denken Sie daran, dass viele Webbrowser diese Technologie zwar unterstützen, Sie sich womöglich jedoch nicht darauf verlassen können, wenn Ihr Publikum aus Geräten besteht, die diese Funktionalität nicht unterstützen.

      Um mehr darüber zu erfahren, was Sie alles mit der Drag-and-Drop-API ablegen können, lesen Sie die Dokumente von MDN.



      Source link