Latest Tutorials

Learn about the latest technologies from fellow newline community members!

  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL
  • React
  • Angular
  • Vue
  • Svelte
  • NextJS
  • Redux
  • Apollo
  • Storybook
  • D3
  • Testing Library
  • JavaScript
  • TypeScript
  • Node.js
  • Deno
  • Rust
  • Python
  • GraphQL

    Creating Interactive Experiences: How to Use OpenSeadragon for Deep Zoom Applications

    OpenSeadragon is a powerful JavaScript library allows developers to create stunning interactive experiences with minimal effort. Its core feature, Deep Zoom , enables users to navigate through high-resolution images seamlessly. OpenSeadragon is an open-source, JavaScript library designed for viewing deep zoom images. It supports various formats and can manage images generated from tools like Deep Zoom Composer . The library allows for smooth zooming and panning, giving users the experience akin to Google Maps but for images. To start using OpenSeadragon, first, include the library in your project. You can either use a CDN or download it locally. One of the most effective ways to prepare your images for OpenSeadragon is through Deep Zoom Composer . This application allows you to create a multi-resolution image that OpenSeadragon can handle seamlessly.

      Understanding OpenSeadragon's Supported File Types

      OpenSeadragon is a great tool for displaying high-resolution images in web applications. It uses deep zoom technology to render images smoothly, allowing users to interact with detailed content without sacrificing quality or speed. In this post, we’ll explore the various file types compatible with OpenSeadragon and how to utilize them effectively within your projects. OpenSeadragon supports a range of file formats due to its versatility. Here are some of the most common file types you can work with: Different file types come with their unique strengths, making them suitable for various use cases. Here’s a brief overview:

      I got a job offer, thanks in a big part to your teaching. They sent a test as part of the interview process, and this was a huge help to implement my own Node server.

      This has been a really good investment!

      Advance your career with newline Pro.

      Only $40 per month for unlimited access to over 60+ books, guides and courses!

      Learn More

        Exploring the OpenSeadragon JavaScript API: A Beginner's Guide

        OpenSeadragon is an open-source JavaScript library specifically built for displaying images in a high-resolution, zoomable format. It is designed for performance and usability, ensuring viewers can pan, zoom, and interact as if they were holding a magnifying glass over an intricate blueprint. Now that we’ve covered some basics, let’s look at how you can utilize the OpenSeadragon JavaScript API. The first step is to include the OpenSeadragon library in your project. There are various ways to do this. The quickest is to link directly to the CDN.

          OpenSeadragon: How to Implement an Image Comparison Slider

          In today's digital landscape, the presentation of visual content holds paramount importance. Whether you’re a web developer, a graphic designer, or just someone who values high-impact visuals, integrating an effective image comparison tool can elevate your user experience. Enter the OpenSeadragon Image Comparison Slider —a powerful library that does exactly this, allowing users to interactively compare two images, showcasing differences or highlighting changes effectively. OpenSeadragon is an open-source JavaScript library specifically designed for displaying high-resolution images. It enables zooming and panning functionalities that enhance the viewer's experience, particularly when dealing with detailed images like maps, medical scans, or artwork. What sets this library apart is its ability to integrate image comparison sliders, making it a fantastic choice for projects requiring side-by-side image analysis. Image comparison sliders offer a compelling way to present visual differences. They can be particularly beneficial in fields such as:

            OpenSeadragon: Check if Image is Rotated

            OpenSeadragon is a powerful JavaScript library that allows you to display high-resolution images in a web browser. It's especially popular for applications in digital museums, art galleries, and any use case that requires detailed views of images. One common challenge users may encounter is determining whether an image has been rotated. In this blog post, we’ll explore how to check if an image displayed in OpenSeadragon is rotated. When working with images, particularly those captured by smartphones or digital cameras, it's essential to understand that they may store orientation information within their metadata. This means that even if an image appears upright in a viewer, it could be technically rotated based on its metadata. OpenSeadragon doesn't automatically adjust the orientation of images based on their metadata, so you’ll need to handle this manually.