richjdsmith

<div class="flex">
    <%= link_to "https://www.linkedin.com/shareArticle?mini=true&url=#{request.original_url}&title=#{@post.title.gsub(/\s+/, "%20")}&summary=#{@post.description.gsub(/\s+/, "%20")}", target: '_blank', rel: 'noopener', alt: 'Share on LinkedIn', class: 'no-underline mr-1 text-indigo-dark hover:text-indigo-light' do %>
      <%= inline_svg('images/linkedin_share_icon.svg', class: 'h-8 w-8 fill-current ', title: 'Share on LinkedIn', width: '100%', height: '100%') %>
    <% end %>
    <%= link_to "http://twitter.com/share?text=I found this great article: #{@post.title}&url=#{request.original_url}&hashtags=thegoodvine", target: '_blank', rel: 'noopener', alt: 'Share on Twitter', class: 'no-underline mx-1 text-indigo-dark hover:text-indigo-light' do %>
      <%= inline_svg('images/twitter_share_icon.svg', class: 'h-8 w-8 fill-current ', title:'Share on Twitter', width: '100%', height: '100%') %>
    <% end %>
    <%= link_to "https://www.facebook.com/dialog/share?app_id=#{Rails.application.credent

richjdsmith

Ruby on Rails 5.2 with Webpacker, Tailwind, StimulusJS and removing the Asset Pipeline

Alright, because there is nothing online that I could find showing people how to do this, I decided to record it myself so I could get back to this later.

1. New Rails App

Generate the new rails app $rails new <app_name> --webpack=stimulus --skip-sprockets -T --database=postgresql

richjdsmith

Webpack in Rails

All code is available in example app - https://github.com/maxivak/webpacker-rails-example-app

Table of Contents

• NPM and Yarn
• Webpack and Webpacker

richjdsmith

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.0.rc1'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server

richjdsmith

<!-- Plugins: are for a workflow involving 
HTML/CSS/JS/Ruby/Rails/Python/Elixir/Phoenix
As well as making things look good. -->
Ayu
Auto Rename Tag
Bracket Pair Colorizer
Code Spell Checker
Color Highlight
ElixirLS

richjdsmith

// Default folder structure:
// dev/{*.html's,/js,/scss,/img}
// build/{*.html's,/js,/css,/img}


// Gulp.js configuration
var
  // modules
  gulp = require('gulp'),

richjdsmith

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"

      // To use a separate vendor.js bundle, specify two files path
      // http://brunch.io/docs/config#-files-
      // joinTo: {
      //   "js/app.js": /^js/,

richjdsmith

... <!-- Code removed for readability -->

<div class="top-bar-right">
    <ul class="menu">
      <%= if @conn.assigns[:user] do %>
        <li class="menu-text">
          Welcome, <%= @conn.assigns.user.first_name %>!
        </li>
        <li>
          <%= link "Videos", to: video_path(@conn, :index) %>

richjdsmith

This is my take on how to get up and running with NGINX, PHP-FPM, MySQL and phpMyAdmin on OSX Yosemite.

This article is adapted from the original by Jonas Friedmann. Who I just discovered is from Würzburg in Germany. A stonesthrow from where I was born ;)

Xcode

Make sure you have the latest version of XCode installed. Available from the Mac App Store.

Install the Xcode Command Line Tools:

xcode-select --install

richjdsmith

Symbols used in Elixir

A list of all not symbols and notations of elixir. Tried to have a base for comparision for other programming languages.

Operators

• === (strict)
• !== (strict)
• == (relaxed)