Hongbo Zhen bobzhen

Web fonts are pretty much all the rage. Using a CDN for font libraries, like TypeKit or Google Fonts, will be a great solution for many projects. For others, this is not an option. Especially when you are creating a custom icon library for your project.

Rails and the asset pipeline are great tools, but Rails has yet to get caught up in the custom web font craze.

As with all things Rails, there is more then one way to skin this cat. There is the recommended way, and then there are the other ways.

The recommended way

Here I will show how to update your Rails project so that you can use the asset pipeline appropriately and resource your files using the common Rails convention.

If you want a run-down of the 1.3 changes and the design decisions behidn those changes, check out the LonestarElixir Phoenix 1.3 keynote: https://www.youtube.com/watch?v=tMO28ar0lW8

To use the new phx.new project generator, you can install the archive with the following command:

$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phx_new.ez

Bump your phoenix dep

Phoenix v1.3.0 is a backwards compatible release with v1.2.x. To upgrade your existing 1.2.x project, simply bump your phoenix dependency in mix.exs:

Preperation

Installation

Install Elixir: http://elixir-lang.org/install.html
Install Phoenix http://www.phoenixframework.org/docs/installation

sudo apt-get install inotify-tools #ubuntu
sudo apt-get install postgresql #Ubuntu

mix local.hex #install hex
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez #phoenix archive

Install Dependencies

npm install --save jquery popper.js tether [email protected] font-awesome // popper.js for bootstrap 4 dependency

Copy font-awesome fonts to assets/static/fonts folder

cp -r assets/node_modules/font-awesome/fonts to assets/static

iPad Media Queries

iPad Media Queries (All generations - including iPad mini)

Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.

iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

Prelude

I. Preface and Motivation

This guide was written because I don't particularly enjoy deploying Phoenix (or Elixir for that matter) applications. It's not easy. Primarily, I don't have a lot of money to spend on a nice, fancy VPS so compiling my Phoenix apps on my VPS often isn't an option. For that, we have Distillery releases. However, that requires me to either have a separate server for staging to use as a build server, or to keep a particular version of Erlang installed on my VPS, neither of which sound like great options to me and they all have the possibilities of version mismatches with ERTS. In addition to all this, theres a whole lot of configuration which needs to be done to setup a Phoenix app for deployment, and it's hard to remember.

For that reason, I wanted to use Docker so that all of my deployments would be automated and reproducable. In addition, Docker would allow me to have reproducable builds for my releases. I could build my releases on any machine that I wanted in a contai

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Fake auto play html audio in iOS Safari the right way</title>
	</head>
	<body>
	<h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>
	<p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>

	defmodule Expng do

	defstruct [:width, :height, :bit_depth, :color_type, :compression, :filter, :interlace, :chunks]

	def png_parse(<<
	0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
	_length :: size(32),
	"IHDR",
	width :: size(32),
	height :: size(32),

	import "phoenix_html"
	import "bootstrap"
	import "jquery"
	import "toastr"

	// ...

	(function addXhrProgressEvent($) {
	var originalXhr = $.ajaxSettings.xhr;
	$.ajaxSetup({
	progress: function() { console.log("standard progress callback"); },
	xhr: function() {
	var req = originalXhr(), that = this;
	if (req) {
	if (typeof req.addEventListener == "function") {
	req.addEventListener("progress", function(evt) {
	that.progress(evt);