One place for hosting & domains

      Making

      Making a Node + MongoDB App on DigitalOcean


      How to Join

      This Tech Talk is free and open to everyone. Register below to get a link to join the live stream or receive the video recording after it airs.

      DateTimeRSVP
      July 14, 202111:00 a.m.–12:00 p.m. ET / 3:00–4:00 p.m. GMT

      About the Talk

      Node.js and MongoDB are a perfect pair when developing applications. The ability to switch between JavaScript objects and JSON makes development seamless. Harness the power of this combination by building a Node app from scratch using Express, and connecting to the database using mongoose.

      What You’ll Learn

      • How to build a Node app
      • How to create a MongoDB database
      • How to connect Node and MongoDB

      This Talk Is Designed For

      • JavaScript developers that want to store data
      • Developers that want to see how Node apps persist data

      Prerequisites

      • JavaScript knowledge
      • Node knowledge
      • Database knowledge

      Resources

      Express: a fast, unopinionated, minimalist web framework for Node.js
      mongoose: an elegant MongoDB object modeling for Node.js
      MongoDB Node.JS driver: official MongoDB Node.js driver that allows Node.js applications to connect to MongoDB and work with data

      To join the live Tech Talk, register here.



      Source link

      Making Elements Stick in CSS Using position: sticky


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      There’s a new value in town for the CSS position property: sticky. It allows us to make elements stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element. In this post we’ll create a simple example to illustrate.

      We’ll have a div container that will be a flex container and then 4 additional div elements that will be the flex items. Note we don’t have to use flexbox at all for position: sticky to work, here it’s just that flexbox happens to work great for our example.

      Check our flexbox primer if you’d like a refresher on the different flexbox properties and values.

      Here’s the simple markup:

      <div class="container">
        <div class="item punk">
          <img src="https://www.digitalocean.com/images/punk.svg" width="100" alt="Item 1">
        </div>
        <div class="item pony">
          <img src="/images/pony.svg" width="100" alt="Item 2">
        </div>
        <div class="item dino">
          <img src="/images/dino.svg" width="100" alt="Item 3">
        </div>
        <div class="item steampunk">
          <img src="/images/steampunk.svg" width="100" alt="Item 4">
        </div>
      </div>
      

      And now our styles, with the important rules highlighted:

      .container {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
      
        border: 2px dashed rgba(114, 186, 94, 0.35);
        height: 400px;
        background: rgba(114, 186, 94, 0.05);
      }
      
      .punk {
        position: -webkit-sticky;
        position: sticky;
        top: 4rem;
      }
      
      .pony {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
      }
      
      .dino {
        position: -webkit-sticky;
        position: sticky;
        bottom: 1rem;
        align-self: flex-end;
      }
      

      And here’s the result. Try scrolling the page up and down to notice what happens:

      If position: sticky is not working: There are two common scenarios where an element set to position: sticky; won’t actually stick to the window as intended:

      1. No position property has been defined: Make sure the sticky element has top, bottom set. Or in the case of horizontal scrolling, left or right.)
      2. One of the element’s ancestors has incompatible overflow: If any of the parents above the sticky element have overflow (x or y) set to hidden, scroll or auto, sticky will not work.

      Conclusion

      Here are a few additional things to note:

      • With our example, the align-items: flex-start rule on the flex container is important because otherwise flex items default to a value of stretch where the elements would take the whole height of the container, cancelling the sticky effect.
      • We need to make use of the -webkit-sticky vendor prefix for it to work in Safari.
      • Notice how sticky-positioned elements are only sticky within their parent element.
      • Browser support for position: sticky: As of 2020, 95% of browsers have some level of support. For details see Can I Use css-sticky



      Source link

      Sysadmin eBook: Making Servers Work


      Download the Complete eBook!

      Making Servers Work: A Practical Guide to System Administration eBook in EPUB format

      Making Servers Work: A Practical Guide to System Administration eBook in PDF format

      Introduction to the eBook

      This book highlights practical sysadmin skills, common architectures that you’ll encounter, and best practices that apply to automating and running systems at any scale, from one laptop or server to 1,000 or more. It is intended to help orient you within the discipline, and hopefully encourages you to learn more about system administration.

      This book is based on the Making Servers Work: A Practical Guide to Linux System Administration curriculum found on DigitalOcean Community. It is structured around a few central topics:

      1. Introductory Topics

      2. LAMP and LEMP Technology Stacks

      3. Securing your Servers

      4. Automation with Ansible

      5. Version Control and Continuous Integration

      Feel free to pick topics in this book that interest you and explore them using these chapters as guides. Working through this book will expose you to a wide variety of technologies, technical terms, and conceptual approaches to managing Linux servers. You can work through each chapter or section at your own pace, and in any order that you choose.

      Download the eBook

      You can download the eBook in either the EPUB or PDF format by following the links below.

      Download the Complete eBook!

      Making Servers Work: A Practical Guide to System Administration eBook in EPUB format

      Making Servers Work: A Practical Guide to System Administration eBook in PDF format

      For additional sysadmin resources to help you get started, and to participate in the DigitalOcean community of other developers and administrators, check out our growing library of tutorials, questions, and projects with the Getting Started tag.



      Source link