Austin Story

Ruby, Rails and Javascript Blog

Quickly Demo Ruby on Rails Issues in a Single File

By Leave a Comment

I saw a really great issue in the Rails repo where someone was able to demonstrate a full rails issue without having to recreate an entire application. I thought this was fantastic because I have never setup an example like this before and think it would save a ton of time when iterating on ideas or reproducing issues. 

# frozen_string_literal: true

# 1. Add any gems that you may need inline
require "bundler/inline"

gemfile(true) do
  source "https://rubygems.org"

  git_source(:github) { |<em>repo</em>| "https://github.com/#{<em>repo</em>}.git" }

  # Activate the gem you are reporting the issue against.
  gem "rails", github: "rails/rails", branch: "master"
  gem "sqlite3"
  gem "pry"
end

require "active_record"
require "minitest/autorun"
require "logger"
require "pry"

# This connection will do for database-independent bug reports.
ActiveRecord::Base.establish_connection(adapter: "sqlite3", database: ":memory:")
ActiveRecord::Base.logger = Logger.new(STDOUT)

ActiveRecord::Schema.define do
  create_table :posts, force: true do |<em>t</em>|
    t.string :name
    t.text :description
    t.datetime :routing_start_date
    t.datetime :routing_end_date
  end

end

class Post < ActiveRecord::Base
  has_many :comments
end

class BugTest < Minitest::Test
  def test_association_stuff
    post = Post.create!(name: [])
    post.routing_start_date = DateTime::Infinity

    assert_equal DateTime::Infinity, 
    post.routing_start_date
  end
end

Quickly Understand Webpack Style Loaders

By Leave a Comment

This is a summary of an exceptional video I watched on youtube related to webpack 2 style loaders.  All concepts here are still relevant in the most recent webpack version (4)

Definitions
CSS-loader – Takes your css files and adds them to your bundle
SASS-loader – takes sass/css files and adds them to your bundle.
Style-loader – Takes a stylesheet that has been added to your bundle and converts it into a style tag. I.e. load your css to style tags.

To use any of these loaders just add them to your rules like this.

rules: {
  test: RegExp, use: [applied, in, reverse],
  test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']
}

But this inlines each of your styles as it’s own individual file into the header. What if you wanted to just include a single file?

Enter the extract-text-webpack-plugin

It wraps all the files and then combines them into a single file. You add this to the plugins area

plugins: [
  new ExtractTextPlugin({
    filename: "new-stylesheet-name.css",
    disabled: isDev,
    allChunks: true
  })
]

and then update the scss rule to use the plugin

rules: {
  test: /\.scss$/,
  use: ExtractTextPlugin({
    fallbackLoader: 'style-loader',
    loader: ['css-loader', 'sass-loader'],
    publicPath: '/dist'
  })
}

How does VueJS 2 Server Side Rendering Work

By Leave a Comment

VueJS comes with a lot of SSR built in. Sometimes SSR can seem a little mystical but at its heart it is really these things

a. Compile and render your component and it’s children
b. Generating your styles and initializing store if you use vuex
c. Assembling all of that
d. Taking care of sourcemap stuff
e. Responding in the way the client expects

This code lives in vue/src/server and the function that coordinates all of this lives in `create-bundle-renderer.js`. It exports a function called createBundleRendererCreator that does the following things.

NOTE: bundle is a generic term for a specification for mapping file names to js and source maps

1. Creates a String or Stream renderer based on what is specified
2. Load the bundle (it can be a file reference, string or object generated by VueSSRRendererf)
3. Create an function that can use that bundle to create a component given a context
4. return an object that can use the renderer from 1 to render a String or Stream

With this in place vue-server-renderer is able to use this to generate and serve your components.

a. render.js => utility functions for generating and cache a component
b. vue-ssr-html-stream.js HTMLStream => Takes care of assembling vuex, head and css
-> pulls template from index.html and reassemble
-> Creates __INITIAL_STATE__ in _flush method
-> Adds css form vue-stle-loader
-> adds head data from server-renderer
c. create-renderer.js

VueJS will follow this algorithm when attempting client side hydration

1. It will always attempt to hydrate when the root node has data-server-rendered attribute.
2. In dev mode, if it failed to hydrate there will be a warning. If nothing happens, it worked.
3. In prod mode, it assumes the markup is correct.