eclectic-coding

import { Controller } from "@hotwired/stimulus";
import * as bootstrap from "bootstrap";

export default class extends Controller {
    connect() {
        new bootstrap.Toast(this.element).show();
    }
}

eclectic-coding

computed: {
	sortedArray() {
		let sortedRecipes = this.recipes;
		
		sortedRecipes = sortedRecipes.sort((a,b) => {
			let fa = a.title.toLowerCase(), fb = b.title.toLowerCase();
			if (fa < fb) {
				return -1
			}
			if (fa > fb) {

eclectic-coding

Setup Rails and Vuejs

1. Generate new rails app using --webpack flag

rails new myApp --webpack=vue

Note:

1. You can use --webpack=angular for angular application and --webpack=react for react.

eclectic-coding

{% comment %}
*
*  This loop loops through a collection called `collection_name`
*  and sorts it by the front matter variable `date` and than filters
*  the collection with `reverse` in reverse order
*
*  To make it work you first have to assign the data to a new string
*  called `sorted`.
*
{% endcomment %}

eclectic-coding

Create new controllers

Add the following to the top of config/initializers/devise.rb:

class TurboFailureApp < Devise::FailureApp
  def respond
    if request_format == :turbo_stream
      redirect
    else
      super
    end

eclectic-coding

Stimulus cheatsheet

• Website: https://stimulusjs.org/
• GitHub repo: https://github.com/stimulusjs/stimulus
• Handbook: https://stimulusjs.org/handbook/introduction
• Discourse: https://discourse.stimulusjs.org/

Lifecycle callbacks

• initialize: once, when the controller is first instantiated
• connect: anytime the controller is connected to the DOM

eclectic-coding

<?php
/**
 * If the aria-label argument has been specified in a wp_dropdown_categories() call,
 * output the aria-label option in the <select>
 *
 * @since   1.0.0
 *
 * @param   string  $output     HTML Output
 * @param   array   $arguments  wp_dropdown_category() arguments
 * @return  string              Modified HTML Output

eclectic-coding

<% flash.each do |type, message| %>
  <div class="alert <%= bootstrap_class_for(type) %> fade in">
    <button class="close" data-dismiss="alert">×</button>
    <%= message %>
  </div>
<% end %>

eclectic-coding

[alias]
	co = checkout
	cob = checkout -b
	com = checkout master
	br = branch
	brd = branch -d
	dmerged = "git branch --merged | grep -v '\\*' | xargs -n 1 git branch -d"
	st = status -sb
	aa = add -A .
	cm = commit

eclectic-coding

Tabs

New Tab

• :tabnew - new blank tab
• :tabedit [file] - open file in tab

Cursor Movement

• gt (:tabn) - next tab