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
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
ruby
Rails.application.routes.draw do
  concern :tabs do
    get :profile, on: :collection
    get :billing, on: :collection
    get :security, on: :collection
  end

Tabs UI using Turbo Frames (no client router)

rails hotwire turbo
by codesnips 4 tabs
javascript
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["dialog", "message"]

  connect() {

Custom confirm dialog with Stimulus (better than window.confirm)

rails hotwire stimulus
by codesnips 3 tabs
swift
import SwiftUI

struct AnimationExamplesView: View {
    @State private var isExpanded = false
    @State private var rotation: Double = 0
    @State private var scale: CGFloat = 1.0

SwiftUI animations and transitions

swift swiftui animations
by Sofia Martinez 2 tabs