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

DeepSeek-R1 from A-to-Z

Welcome to the LLM model that's been absolutely everywhere on the Internet and news headlines in recent days – DeepSeek-R1! In this article, we take a comprehensive look at this new, industry-disrupting LLM. We'll investigate if it’s truly deserving of all the noise around it, or if there's something (i.e. censorship and GPT-4 references) more sinister going on beneath the buzz. So, brew some tea and settle in, because this is going to be an interesting ride. We're going to cover:
Thumbnail Image of Tutorial DeepSeek-R1 from A-to-Z

    Creating High-Contrast, Accessible Themes with shadcn/ui

    Accessibility is a cornerstone of good design, and color contrast plays a significant role in making content readable for everyone. Whether your users have visual impairments, color blindness, or are simply viewing your website under challenging lighting conditions, high-contrast themes are essential. In this blog, we’ll explore how to use shadcn/ui and Tailwind CSS to build a high-contrast theme that complies with WCAG standards. With tools like shadcn/ui , creating accessible, visually appealing designs is simpler than ever. Good contrast ratios ensure that text and UI elements are distinguishable from their backgrounds. The Web Content Accessibility Guidelines (WCAG) recommend:

    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

      Alt-Text and Beyond: Making Your Website Accessible with shadcn/ui

      Accessibility is not just a legal or ethical obligation—it’s an opportunity to improve the user experience for everyone. One of the easiest and most impactful ways to start is by implementing proper alternative (alt) text for images and other media. With tools like shadcn/ui , which is built on Radix Primitives and Tailwind CSS , you can take accessibility to the next level by creating user-friendly, accessible interfaces. In this blog, we’ll explore how to enhance accessibility with alt-text, then dive into how shadcn/ui can help you implement accessibility best practices with code examples. Alt-text describes the content or function of an image. For users with visual impairments, screen readers use alt-text to provide context. For example, consider an e-commerce website selling plush toys:

        Mastering OpenSeadragon Tilesources: A Guide

        If you're diving into the world of high-resolution images on the web, chances are you've come across OpenSeadragon—an impressive open-source JavaScript library for displaying large images and collections. Its flexibility and performance make it a go-to choice for handling intricate visual data. One of the key components that powers its functionality is the concept of tilesources. In this post, we’ll explore the ins and outs of openseadragon tilesources , equipping you with the knowledge to harness their full potential. Tilesources are essential building blocks within OpenSeadragon. Simply put, they define how images are split into manageable tiles for display. This seamless tiling approach allows users to interact with vast amounts of image data without sacrificing performance. When working with OpenSeadragon, you'll encounter several types of tilesources. Here’s a breakdown:

          Understanding OpenSeadragon Click Events

          OpenSeadragon is a powerful JavaScript library designed for deep zoom image viewing. It enables users to explore high-resolution images smoothly while allowing for various interactive features. Among these features, handling click events is pivotal for creating a seamless and engaging user experience. In this blog post, we’ll explore how to implement and utilize click events in OpenSeadragon. In OpenSeadragon, a click event happens when the user clicks on the image being viewed. It can be used for various functionalities like opening a link, displaying tooltips, or triggering other JavaScript functions. Understanding how these click events work is crucial for enhancing the interactivity of your application. A click event in OpenSeadragon can be defined as an action triggered by a user clicking on specific parts of the viewport. This can include: