codesnips

ui

erb 
<h1>Products</h1>

<%= form_with url: products_path, method: :get,
              data: { turbo_frame: "products_list", turbo_action: "advance" } do |f| %>
  <div class="filters">
    <%= f.text_field :q, value: params[:q], placeholder: "Search products" %>

Frame navigation that targets a specific frame via form_with

rails hotwire turbo
by codesnips 3 tabs
swift 
import SwiftUI

struct CardModifier: ViewModifier {
    var backgroundColor: Color = .white
    var cornerRadius: CGFloat = 12
    var shadowRadius: CGFloat = 5

Custom SwiftUI view modifiers for reusability

swift swiftui ios
by Sofia Martinez 2 tabs
css 
/* Interactive pseudo-classes */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
a:active { color: red; }
a:focus { outline: 2px solid orange; }

CSS pseudo-classes and pseudo-elements for advanced styling

css pseudo-classes pseudo-elements
by Alex Chang 2 tabs
typescript 
import { useEffect, useState } from "react";

export function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState<T>(value);

  useEffect(() => {

Debounced search input (React)

react hooks debounce
by codesnips 3 tabs
kotlin 
package com.example.myapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*

Jetpack Compose declarative UI fundamentals

kotlin android jetpack-compose
by Alex Chen 1 tab
typescript 
import { useCallback, useEffect, useState } from "react";

interface Options {
  rootMargin?: string;
  threshold?: number;
}

IntersectionObserver infinite scroll hook

react hooks intersection-observer
by codesnips 3 tabs
python 
from django.contrib import messages
from django.shortcuts import redirect, render
from django.contrib.auth.decorators import login_required


@login_required

Django message framework for user feedback

django python messages
by Priya Sharma 2 tabs
kotlin 
package com.example.myapp.ui.adapters

import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.recyclerview.widget.DiffUtil
import androidx.recyclerview.widget.ListAdapter

RecyclerView with DiffUtil for efficient lists

kotlin android recyclerview
by Alex Chen 2 tabs
typescript 
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

function hasActualValue(control: AbstractControl | null): boolean {
  return !!control && control.value !== null && control.value !== '';
}

Cross-Field Password-Confirmation Validator for Angular Reactive Forms

angular reactive-forms validators
by codesnips 3 tabs
kotlin 
package com.example.myapp.ui.custom

import android.content.Context
import android.util.AttributeSet
import android.view.ViewGroup
import kotlin.math.max

Custom ViewGroup for advanced layouts

kotlin android custom-view
by Alex Chen 2 tabs
typescript 
import { Injectable, computed, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoadingService {
  private readonly activeRequests = signal(0);

Global Loading Spinner via In-Flight Request Tracking in an Angular HttpInterceptor

angular http-interceptor rxjs
by codesnips 4 tabs
javascript 
export const MAX_VISIBLE = 4;

const DEFAULTS = {
  variant: "info",
  duration: 4000,
};

Toast Notification Queue in React with Context and useReducer

react context-api usereducer
by codesnips 3 tabs