mjbalcueva

Server-Side Device-Based Conditional Rendering in Next.js

Problem

You want to conditionally render components on the server side based on the device type (mobile, tablet, desktop). The goal is to avoid rendering all components server-side and hiding them with CSS, and to prevent client-side JavaScript from causing a flash of content as it loads.

Solution

Create a hook that determines the device type based on window size and stores it in a cookie. Use this context to conditionally render components according to the device type.

mjbalcueva

"use client"

import { forwardRef, useState } from "react"
import { EyeIcon, EyeOffIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input, InputProps } from "@/components/ui/input"
import { cn } from "@/lib/utils"

const PasswordInput = forwardRef<HTMLInputElement, InputProps>(
	({ className, ...props }, ref) => {

mjbalcueva

import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

public class BinarySearchTree {
  Scanner console = new Scanner(System.in);
  Node root;

  public static void main(String[] args) throws Exception {
    BinarySearchTree program = new BinarySearchTree();

mjbalcueva

Omeka Classic Installation Guide (Ubuntu 22.04.3)

Installation Prerequisites

1. Download virtualbox
2. Download ubuntu

Virtual Machine (Ubuntu) Setup

1. Launch VirtualBox and create a new virtual machine instance using the downloaded Ubuntu ISO.

mjbalcueva

# Get editor completions based on the config schema
"$schema" = 'https://starship.rs/config-schema.json'

# ---------------------------------------------------------------------------------------------------------------------

format = """
[](#9A348E)\
$os\
$hostname\
[](bg:#DA627D fg:#9A348E)\

mjbalcueva

"use client"

import * as React from "react"
import { buttonVariants } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { cn } from "@/lib/utils"
import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker, DropdownProps } from "react-day-picker"

mjbalcueva

{
	"final_space": true,
	"console_title": true,
	"console_title_style": "folder",
	"blocks": [
		{
			"type": "prompt",
			"alignment": "left",
			"horizontal_offset": 0,
			"vertical_offset": 0,