cmalven

Cooking Ratios

All ratios should be measure by weight using a kitchen scale.

Doughs

• Bread = 5 parts flour : 3 parts water (plus yeast and salt)
• Pasta Dough = 3 parts flour : 2 parts egg
• Pie Dough = 3 parts flour : 2 parts fat : 1 part water
• Biscuit = 3 parts flour : 1 part fat : 2 parts liquid

cmalven

server {
    listen 80;
    server_name site.production.designcompany.com;
    root /home/forge/site.production.designcompany.com/public;
    
    # enable gzip compression
    gzip on;
    gzip_min_length  1100;
    gzip_buffers  4 32k;
    gzip_types    text/plain application/x-javascript image/svg+xml text/xml text/css;

cmalven

Running a Craft site on Fastly

Fastly is essentially Varnish as a service. Similarly to how Heroku drastically simplifies the running of a web server, Fastly simplifies full-page caching of websites with running with dynamic content.

How Fastly Works

In a nutshell:

• Every time there is a request for your website, it is routed through Fastly instead of directly to your backend.
• If Fastly has an existing cache for the requested URL, it serves the cached page and your backend isn't touched at all.

cmalven

{# If str contains a character with descender ('gjpqy'), outputs a class #}

{% macro descender_class(str) %}
    {% set chars = [ 'g', 'j', 'p', 'q', 'y'] %}
    {% set hasDescender = false %}
    {% for c in chars %}
        {% if c in str %}
          {% set hasDescender = true %}
        {% endif %}
    {% endfor %}

cmalven

<span data-picture>
  <span data-src="{{ asset.getUrl('smallFullHi') }}"></span>

  <span data-src="{{ asset.getUrl('medium') }}" data-media="(min-width: 600px)"></span>
  <span data-src="{{ asset.getUrl('mediumHi') }}" data-media="(min-width: 600px) and (min-device-pixel-ratio: 2.0)"></span>

  <span data-src="{{ asset.getUrl('large') }}" data-media="(min-width: 1000px)"></span>
  <span data-src="{{ asset.getUrl('largeHi') }}" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>

  <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->

cmalven

TimelineLite = require('timelineLite')
...

myTimeline = new TimelineLite;

// Console outputs "Uncaught TypeError: undefined is not a function"

cmalven

Let's make npm the standard for managing front-end packages.

Why?

• The state of front-end package managers is all over the place.
• Bower is still very non-standardized, resulting in bloated downloads and making it difficult to rely on libraries being packaged up in a consistent way.
• None of the other package system (e.g. Component) seem to have enough momentum that they're going to reach critical mass.
• The npm community has a single good, effective way to use npm modules in the browser with Browserify.
• Browserify doesn't try to do too much or too little. It simply traces dependencies and bundles everything into a nice, tidy package.
• The CommonJS module system is reasonably easy to understand, easy to read, and generally pleasant to work with. While AMD has its advantages, it generally loses in the categories of clarity, readability, and consistency (in that you still need to use a separate module system for backend node modules.)

cmalven

# In an Iron Router Route (requires that the below publication is also set up)
# =====================================

Router.configure
  layoutTemplate: 'layout'
  loadingTemplate: 'loading'

Router.map ->
  
  @route 'member_show',

cmalven

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

// Site basics
$config['app_version'] = '252';
$config['install_lock'] = "";
$config['license_number'] = "1253-2348-9481-3149";
$config['debug'] = '1';
$config['site_label'] = 'CSAJ';
$config['is_system_on'] = "y";

cmalven

.module {
  background: url('logo.png');
  background: none, url('logo.svg');
}