Things we have to say.
Our articles are thoughts, tips and tricks we found in our daily work.
Best practices on tiny plates, easy to consume, easy to eat, easy to love!
🥘 Hot and spicy 🌶️ knowledge about
#rails #tailwindcss #ruby #css #view components #bootstrap #visual studio code #active storage #zsh #ohmyzsh #github #git #raspberrypi #regex #esbuild #javascript #action mailer #docker #stimulusjs
Hide Scrollbars While Keeping Scrolling Intact.
Want to keep your UI clean by hiding scrollbars while still allowing users to scroll? In this post, we’ll explore different CSS techniques—including Tailwind-friendly solutions—to achieve a seamless scrolling experience without the visual clutter of scrollbars.
Enhancing Esbuild Error Handling in a Rails App.
When working on a Rails app using esbuild, encountering build errors can be frustrating — especially when they don’t surface in a way that makes debugging easier. To improve the developer experience, I implemented an automatic error rendering system that displays esbuild errors directly in the browser during development.
From Sticky to Pinned: A Stimulus Controller Approach.
Sticky elements are a game-changer for modern UIs, but what if you could detect exactly when they get pinned? Using a Stimulus controller, we'll show you how to track sticky behavior with ease. Perfect for adding dynamic flair to your app — don’t miss out on this sticky solution!
How to Customize Rails Form Error Handling.
If you've worked with Rails forms, you've likely encountered the infamous .field_with_errors wrapper
. While it's designed to help highlight invalid fields, it can wreak havoc on your HTML structure and CSS styles. Fear not — there's an easy way to disable it!
How to Create Custom Error Pages in Rails.
Don't let error pages break your brand's flow. Learn how to create custom error pages in Rails that match your design, keeping the user experience smooth—even when things go wrong.
Interactive Git Checkout.
Simplify your Git workflow with an interactive branch switcher. Learn to use fzf, the fuzzy finder, alongside Git commands to effortlessly navigate and switch between branches, enhancing your development efficiency.
Cleaning up with clearing rake tasks.
Learn how to easily cleanup your Rails log
and tmp
files.
Introducing RailsbootUI: Rails View Components for Bootstrap.
We released a new product: RailsbootUI - it's our take on providing a simple yet professional view component collection for Rails with Bootstrap as the CSS framework under the hood.
Use gems from private GitHub repos.
Learn how to seamlessly integrate private gems from GitHub into your Ruby projects. This guide covers setting up your Gemfile, configuring local credentials, and using GitHub Actions for authentication. Perfect for developers looking to enhance their workflow with private repositories.
Use CSS Grid to stack items.
Discover how to use CSS Grid to stack items efficiently without relying on absolute positioning. This guide explains how to position elements within the same column and row, using both CSS and TailwindCSS, to create flexible and responsive layouts.
Profiling zsh setup with zprof.
Optimize your zsh setup by profiling with zprof. This guide shows you how to identify and eliminate performance bottlenecks in your .zshrc file, ensuring faster startup times and a smoother shell experience.
Purge unattached ActiveStorage::Blobs.
Keep your storage clean by purging unattached ActiveStorage::Blobs. This guide walks you through setting up a rake task to automatically remove blobs that are no longer linked to records, saving space and reducing costs.
Unlocking the Superpower of Regular Expressions in Find and Replace for Visual Studio Code.
Unlock the full potential of Visual Studio Code with regular expressions in Find and Replace. This guide shows you how to use regex for precise text modifications, making complex tasks simple and efficient. Learn about capturing groups, replacement patterns, and practical examples like date format transformation.
Rendering view component template variants outside of the current request.
Discover how to leverage ActionController::Rendering for rendering specific component variants outside the current view context with ease.
Accessing TailwindCSS Configurations from JavaScript.
Bridge the gap between design and logic by accessing TailwindCSS configurations directly from JavaScript. This guide explains how to use the resolveConfig helper to dynamically apply themes, spacing, and breakpoints, ensuring a cohesive and efficient user experience across your web projects.
Split your routes.rb file into logical files.
Simplify your monolithic Rails application by splitting your routes into logical namespaces using Rails' internal draw
method. Instead of a cluttered routes.rb file, organize your routes into clear, manageable units like admin
, api
, etc. for improved clarity and maintainability.
Add zeitwerk:check rake task to you CI system.
Zeitwerk is Rails powerful code loader, handling all autoloading of ruby files with ease. While it requires specific filenames for classes, potential issues can be preemptively caught using the easy-to-use zeitwerk:check
rake task, ensuring your Rails application boots properly in production.
Count occurrences with the .tally method.
Learn how to leverage the universal tally
method for easy counting.
How To Install Docker and Docker-Compose On Raspberry Pi.
RaspberryPi ARMed with Docker and Docker-Compose. Dive into containerization on your Raspberry Pi with this straightforward guide to installing Docker and Docker Compose.
Raspberry Pi Setup.
Whether you're setting up your first Pi or looking to refine your existing setup, our upcoming post will provide all the tips and tricks you need. From initial software installation to hardware configuration, we'll walk you through every essential step to get your Raspberry Pi up and running smoothly.