meodai

One-pager / Scroll:
- http://www.north2.net/
- http://10x16.com/
- http://www.hm.com/us/kenzo#inspiration
- http://www.stinkdigital.com/
- https://nameoflove.com/
- https://www.thened.com/
- https://thecreativeindependent.com/
- http://www.melville-design.com/
- http://designgest.com/

adactio

{% set cssupdate = '20150309' %}
{% if _cookie.csscached == cssupdate %}
<link rel="stylesheet" href="/css/global-min.{{ cssupdate }}.css">
{% else %}
<style>
{% include 'global/critical.css' %}
</style>
<script>
(function (win, doc) {
    'use strict';

rap2hpoutre

# stop script on error signal
set -e

# remove old deployment folders
if [ -d "/home/forge/deploy" ]; then
  rm -R /home/forge/deploy
fi
if [ -d "/home/forge/backup" ]; then
  rm -R /home/forge/backup
fi

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)">

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 -->
 

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

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 = {} %}
				

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

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

khalwat

This is now part of craft-scripts:

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