DEV Community: Frank Etoundi

Resizing a div using CSS resize, but the resizing is done at a fixed dimension (snap grid)

Frank Etoundi — Fri, 28 Feb 2025 20:24:04 +0000

TLDR; View the working example on jsfiddle.net

Let's create a solution that resizes a div at fixed 50px increments of its parent container, with smooth transitions, debouncing and ResizeObserver for monitoring.

HTML Setup:

<div class="container">
  <div class="resizable"></div>
</div>

CSS Setup:

.container {
  width: 500px;
  height: 400px;
  border: 2px solid #ccc;
  position: relative;
  overflow: hidden;
}

.resizable {
  width: 250px;
  height: 200px;
  background: #3498db;
  position: absolute;
  resize: both; /* This enables the resizing */
  overflow: auto;
  min-width: 50px;
  min-height: 50px;
  max-width: 100%;
  max-height: 100%;
  transition: all 0.1s ease-out; /* This is important to ensure a smooth drag */
}

resize: both enables resizing in both directions
transition: all 0.1s ease-out adds smooth transitions to reduce visual glitching
min-width/height: 10% and max-width/height: 100% set the boundaries
overflow: auto handles content overflow
Container has overflow: hidden to prevent content spilling

Javascript Setup:

const resizable = document.querySelector(".resizable")
const container = document.querySelector(".container")

const snapPercent = 20 // Change to fit your needs
const snapPixel = 50 // Change to fit your needs
const usePixels = false // Change this to false to use percentage.

// Function to snap to fixed pixels increments
function snapToGridPixel(size, parentSize) {
  const snappedSize = Math.round(size / snapPixel) * snapPixel
  const value = Math.max(snapPixel, Math.min(snappedSize, parentSize))
  return Math.min(value, parentSize) + "px"
}

// Function to snap to fixed percentage increments
function snapToGridPercentage(size, parentSize) {
  const percentage = (size / parentSize) * 100
  const snappedPercentage = Math.round(percentage / snapPercent) * snapPercent
  return Math.max(snapPercent, Math.min(100, snappedPercentage)) + "%"
}

function snapToGrid(size, parentSize) {
  return usePixels
    ? snapToGridPixel(size, parentSize)
    : snapToGridPercentage(size, parentSize)
}

// Debounce function
function debounce(func, delay) {
  let timeoutId
  return function (...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

// Debounced resize handler
const handleResize = debounce((entries) => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect
    const parentWidth = container.offsetWidth
    const parentHeight = container.offsetHeight

    // Snap to fixed increments
    const newWidth = snapToGrid(width, parentWidth)
    const newHeight = snapToGrid(height, parentHeight)

    // Apply the snapped sizes with max bounds
    resizable.style.width = newWidth
    resizable.style.height = newHeight
  }
}, 100) // 100ms delay

// ResizeObserver with debounced handler
const resizeObserver = new ResizeObserver(handleResize)

// Start observing the resizable element
resizeObserver.observe(resizable)

Let's break down the key components:

JavaScript with ResizeObserver:

snapToGrid function calculates the nearest 10% increment
Converts current size to percentage of parent
Rounds to nearest 20% using Math.round(percentage / 20) * 20
Clamps values between 20% and 100%
ResizeObserver continuously monitors size changes and applies snapping

The ResizeObserver ensures that whenever the user resizes the div, it immediately snaps to the nearest 10% increment, while the CSS transition makes the snapping motion smooth rather than instantaneous.

Debouncing

Debouncing ensures that a function only runs after a certain period of inactivity. It delays execution until after the triggering event has stopped firing for a specified amount of time.

Why Use Debouncing?

Performance: Prevents excessive function calls that could slow down your application
Efficiency: Reduces unnecessary computations or API calls
User Experience: Ensures actions complete only when the user has finished interacting

A few tools for pentest remediation

Frank Etoundi — Tue, 10 Sep 2024 12:22:06 +0000

What is pentest?

Pretend you have a toy castle with walls and gates. A "pentest" is like having a friendly superhero check your castle for weak spots, like loose bricks or open gates. They tell you where the weak spots are so you can fix them, keeping your castle safe and secure!

Pentest remediation refers to the process of correcting and securing vulnerabilities found in a penetration test, often involving fixing software bugs, updating systems, and strengthening security policies.

Here are a few tools you can use:
https://www.zaproxy.org/ (Web app scanner)
https://www.ssllabs.com/ssltest/analyze.html?d=importer.bilendo.de (SSL server test)
https://github.com/santoru/shcheck (Security Header Check)
https://observatory.mozilla.org/ (Content Security Policy validator)

Bash: Compare files and copy them to another folder if they don't exist

Frank Etoundi — Thu, 02 Feb 2023 11:29:32 +0000

You can compare files in bash and copy them to another folder if they don't exist in the destination folder using the following script:

#!/bin/bash

# Set the source and destination directories
source_dir=<path_to_source_folder>
destination_dir=<path_to_destination_folder>

# Get a list of files in the source directory
files=$(ls "$source_dir")

# Loop through the list of files
for file in $files
do
  # Check if the file exists in the destination directory
  if [ ! -f "$destination_dir/$file" ]; then
    # If the file does not exist, copy it to the destination directory
    cp "$source_dir/$file" "$destination_dir/$file"
    echo "Copied $file to $destination_dir"
  else
    echo "$file already exists in $destination_dir"
  fi
done

This script sets the source and destination directories, then gets a list of files in the source directory using the ls command. It then loops through the list of files, checking if each file exists in the destination directory using the if statement and the -f option of the [ command. If the file does not exist in the destination directory, it is copied using the cp command. A message is printed indicating whether the file was copied or if it already exists in the destination folder.

Show Rails validation errors inline (with Bootstrap 4)

Frank Etoundi — Tue, 24 Aug 2021 12:51:01 +0000

To show inline errors in a Ruby on Rails form, there exists a few gems out there such as bootstrap_form or client_side_validations (which shows validation errors inline client side).

However, we can achieve inline validation (server side) ourselves without using additional gems.

Prerequisites

1 - Rails 4 or higher
2 - Booststrap 4 (just for styling, custom css is fine too)
3 - Nokogiri for html parsing (it is normally included in your Rails installation)

The code

step 1

Create an initializer: config/initializers/fields_with_errors.rb

step 2

Add this code in it

ActionView::Base.field_error_proc = proc do |html_tag, instance|
    html_doc = Nokogiri::HTML::DocumentFragment.parse(html_tag, Encoding::UTF_8.to_s)
    element = html_doc.children[0]

    if element
        element.add_class('is-invalid')

        if %w[input select textarea].include? element.name
            instance.raw %(#{html_doc.to_html} <div class="invalid-feedback">#{[*instance.error_message].to_sentence}</div>)
        else
            instance.raw html_doc.to_html
        end
    else
        html_tag
    end
end

That's it. You can keep reading if you want to understand how this code works.

Explanation

Let's assume we have a User model with some validations

# app/models/user.rb
class User < ApplicationRecord
    validates :email, presence: true
end

and an edit or create form for a user

<%= form_for User.new do |f| %>
    <div class="form-group">
        <%= f.label :email %>
        <%= f.text_field :email, class: 'form-control' %>
    </div>
    <%= f.submit 'Save' %>
<% end %>

the html version of form-group block becomes this

<div class="form-group">
    <label for="user_email">Email</label>
    <input class="form-control" type="text" value="" name="user[email]" id="user_email"> 
</div>

What we want is to add CSS error classes to the label and input tag. These CSS classes should highlight the field in red (or any other color you want)
Additionally, we want to append a div or span bellow the input tag to show the error for that specific attribute

So, the final result should be this

<div class="form-group">
    <label for="user_email" class="is-invalid">Email</label>
    <input class="form-control is-invalid" type="text" value="" name="user[email]" id="user_email"> 
    <div class="invalid-feedback">cannot be blank</div>
</div>

So, how does the code in our initializer achieves all this?

Line 1: we have a proc with 2 arguments.

ActionView::Base.field_error_proc = proc do |html_tag, instance|

The first is html_tag. It is an html string. In our example, it is equal to <label for="user_email">Email</label>.
The second arguments is instance. This an instance of ActionView::Helpers::Tags::Label in this case. This also gives have access to all of ActionView::Helpers methods.

Line 2: we use Nokogiri to generate a document representation of the html_tag string

html_doc = Nokogiri::HTML::DocumentFragment.parse(html_tag, Encoding::UTF_8.to_s)

which returns an instance of DocumentFragment

#(DocumentFragment:0x3fcc12af6a68 {
  name = "#document-fragment",
  children = [
    #(Element:0x3fcc12af6888 {
      name = "input",
      attributes = [
        #(Attr:0x3fcc12af6860 { name = "class", value = "form-control" }),
        #(Attr:0x3fcc12af684c { name = "type", value = "text" }),
        #(Attr:0x3fcc12af6838 { name = "value", value = "" }),
        #(Attr:0x3fcc12af6824 { name = "name", value = "user[email]" }),
        #(Attr:0x3fcc12af6810 { name = "id", value = "user_email" })]
      })]
  })

Line 3: we fetch the actual html tag document we need

element = html_doc.children[0]

it returns instance of Element

#(Element:0x3fcc12af6888 {
  name = "input",
  attributes = [
    #(Attr:0x3fcc12af6860 { name = "class", value = "form-control" }),
    #(Attr:0x3fcc12af684c { name = "type", value = "text" }),
    #(Attr:0x3fcc12af6838 { name = "value", value = "" }),
    #(Attr:0x3fcc12af6824 { name = "name", value = "company[co]" }),
    #(Attr:0x3fcc12af6810 { name = "id", value = "user_email" })]
})

Line 5: we skip if element is nil, we jump to line 14 and return the original html_tag, else we continue with the code execution.

Line 6: we add bootstrat is-invalid CSS class. You can replace it with any of your choice.

element.add_class('is-invalid')

Line 8: we check if the element is a form tag which takes input. This is important in order to append the errors after the input

if %w[input select textarea select].include? element.name

Line 9: we convert our Nokogiri instance back into an html String and append errors lists.

instance.raw %(#{html_doc.to_html} <div class="invalid-feedback">#{[*instance.error_message].to_sentence}</div>)

We call instance.raw to ensure the string is rendered as html.
We access errors for the current attribute via instance.error_message. However, this can return a single string and an Array.
To avoid doing if else conditions, we create new array, splat [*instance.error_message] in it, the call to_sentence

Line 11: in case the element is a label, we render parse it back to html.

instance.raw html_doc.to_html

That's it.