cecilemuller

How to setup Let's Encrypt for Nginx on Ubuntu 18.04 (including IPv6, HTTP/2 and A+ SLL rating)

---

Virtual hosts

Let's say you want to host domains first.com and second.com.

Create folders for their files:

eusonlito

# Add goaccess repository
echo "deb http://deb.goaccess.io/ xenial main" > /etc/apt/sources.list.d/goaccess.list

# Add repository keys
gpg --keyserver keyserver.ubuntu.com --recv-key 742483B7B222C443
gpg -a --export 742483B7B222C443 | apt-key add -

# Update apt
apt-get update

hsleonis

html {
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;

khalwat

This is now part of craft-scripts:

https://github.com/nystudio107/craft-scripts

celoyd

Himawari-8 animation tutorial

Here’s how to make animations like this one. It requires intermediate Unix command-line knowledge, to install some tools and to debug if they don’t work. You’ll need these utilities:

• curl (or you can translate to wget)
• convert and montage, part of ImageMagick
• ffmpeg, plus whatever codecs
• parallel, for iteration that’s nicer than shell for loops or xargs
• run everything in zsh for leading 0s in numerical ranges to work

sjelfull

1. Download the phpseven branch of the imagick repository

git clone https://github.com/mkoppanen/imagick.git imagick

2. phpize for target PHP version

cd imagick && /path/to/php7/bin/phpize && ./configure && make && make install

3. Enable the extension for your PHP version

aelvan

{% macro getSrcSet(image, sizes, upscale) %}
	{%- spaceless %}
		{% set sizesOut = [] %}
		{% set allowScaleLarger = upscale | default(false) %}
		
		{# loop over sizes parameter and generate transforms #}
		{% for size in sizes %}
			{%- spaceless %}
				{% set currentTransform = {} %}
				

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

adamwathan

Handy helpers for controlling visibility of elements until Vue has compiled.

Use like:

<div v-cloak>
  <h1>
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
 

mildlygeeky

{% if entry.homepageHeroDesktop|length > 0 and entry.homepageHeroMobile|length > 0 %}
  <div class="homepage-hero homepage-hero--image">
    <figure>
      <picture>

        {% set homepageHeroDesktop = entry.homepageHeroDesktop.first().getUrl() %}
        {% set homepageHeroMobile = entry.homepageHeroMobile.first().getUrl() %}

        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="{{ homepageHeroDesktop }}" media="(min-width: 540px)">