codesnips

javascript

javascript 
import { StreamActions } from "@hotwired/turbo"

StreamActions.flash = function () {
  const container = document.getElementById("flashes")
  if (!container) return

Turbo Streams: custom action for flash messages

rails turbo hotwire
by codesnips 3 tabs
javascript 
// Configuration management with validation
const Joi = require('joi');

// Define schema for all environment variables
const envSchema = Joi.object({
  NODE_ENV: Joi.string()

Environment variable management and secret rotation

environment-variables secrets configuration
by Ryan Nakamura 2 tabs
javascript 
const MAX_LIMIT = 100;
const DEFAULT_LIMIT = 20;
const ALLOWED_ORDER = new Set(['asc', 'desc']);

function decodeCursor(raw) {
  const json = Buffer.from(raw, 'base64').toString('utf8');

Cursor-Based Pagination in Express With Query-Parsing Middleware

express pagination cursor-pagination
by codesnips 3 tabs
ruby 
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = current_user.likes.create!(post: @post)
    respond(liked: true)

Turbo Streams: swap a button state and counter in one response

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

export default class extends Controller {
  static targets = ["field", "status"]
  static values = {
    key: String,

Stimulus controller for autosaving form drafts

stimulus forms ux
by Jordan Lee 2 tabs
javascript 
// 1. DANGEROUS: Never use innerHTML with user input
const userInput = '<img src=x onerror="alert('XSS')">';

// WRONG - vulnerable to XSS
document.getElementById('output').innerHTML = userInput;

Front-end security - XSS and CSRF prevention

security xss csrf
by Alex Chang 1 tab
javascript 
// 1. Basic Custom Element
class MyButton extends HTMLElement {
  constructor() {
    super();

    // Attach shadow DOM

Web Components and Shadow DOM encapsulation

web-components shadow-dom custom-elements
by Alex Chang 1 tab
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Disable Turbo Drive on external links

rails hotwire turbo
by codesnips 3 tabs
javascript 
const multer = require('multer');

const ALLOWED_MIME = new Set(['image/jpeg', 'image/png', 'image/webp']);

function fileFilter(req, file, cb) {
  if (!ALLOWED_MIME.has(file.mimetype)) {

Upload and Resize User Avatars with Multer and Sharp in Express

express multer sharp
by codesnips 3 tabs
javascript 
import { Turbo } from "@hotwired/turbo-rails"

Turbo.StreamActions.redirect = function () {
  const url = this.getAttribute("url")
  if (!url) return

Turbo Streams: server-driven redirect (Turbo Native friendly)

rails hotwire turbo-streams
by codesnips 4 tabs
javascript 
// Basic try-catch
try {
  const result = riskyOperation();
  console.log('Success:', result);
} catch (error) {
  console.error('Error occurred:', error.message);

Error handling and debugging techniques in JavaScript

javascript debugging error-handling
by Alex Chang 1 tab
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Importmap setup for Stimulus controllers (Rails 7 style)

rails hotwire stimulus
by codesnips 4 tabs