dcyoung-dev

import {Controller} from "@hotwired/stimulus"
import {debounce} from "lodash/function";

// Connects to data-controller="auto-save"
export default class extends Controller {
    initialize() {
        this.autosave = debounce(this.autosave, 200).bind(this)
    }
    
    autosave(event) {

dcyoung-dev

  def active_link_to(name = nil, options = nil, **html_options, &block)
    options = block_given? ? name : options

    if current_page?(options)
      html_options[:class] = class_names(html_options[:class], :active)
      html_options[:aria] = html_options.fetch(:aria, {}).merge(current: :page)
    end

    if block_given?
      link_to options, html_options, &block

dcyoung-dev

module TurboFrameHelpers
  def turbo_frame_id(*ids)
    ids.map { |id| id.respond_to?(:to_key) ? ActionView::RecordIdentifier.dom_id(id) : id }.join("_")
  end
end

RSpec.configure do |config|
  config.include TurboFrameHelpers
end

dcyoung-dev

require 'capybara'

dcyoung-dev

ruby 3.0.1
nodejs 16.0.0

dcyoung-dev

web: bundle exec rails server
worker: bundle exec sidekiq
webpack: bundle exec bin/webpack-dev-server

dcyoung-dev

# Stop Google's FLoc https://andycroll.com/ruby/opt-out-of-google-floc-tracking-on-netlify
[[headers]]
  for = "/*"
  [headers.values]
    Permissions-Policy = "interest-cohort=()"

dcyoung-dev

<script>
  // Declaring a new jQuery function
  (function ($) {
    $.fn.newSuperCoolFunction = function () {
      return this.each(function (_, selector) {
        var elements = $(selector)

        elements.each(function (_, elementSelector) {
          var element = $(elementSelector);
          element.addClass('super-cool')

dcyoung-dev

# FizzBuzz

def add_trigger_word(number, factor, output_array, word)
  output_array << word if number % factor == 0
  output_array
end

word_map = {
  3 => "Fizz",
  5 => "Buzz",

dcyoung-dev

CSS Rules for Harmonious Living

Sizing

• Prefer to use em/rem rather than px
  • rem is the browser's default size - usually equal to 16px
  • em is relative to it's parent's sizing
• Consider which sizing makes most sense - should the sizing increase if the parent's increases (em) or should it remain constant (rem).

Colours

• Always move colours into a separate file and reference through CSS variables var()