Steven Williams StevenGFX

Hello DrupalCon! 👋

Here's a big dump of code examples from my slides, plus some examples that didn't make it to the final cut.

The snippets should be organised by slide number, e.g. #46--_search.scss is the snippet of search-related SCSS shown on slide 46.

My slides

Here's a PDF of my slides (via Google Drive) for your reference, or if Zoom goes wrong!

nylas/N1 💌 An extensible desktop mail app built on the modern web.
black-screen/black-screen A terminal emulator for the 21st century.
shockone/black-screen A terminal emulator for the 21st century.
ptmt/react-native-macos React Native for macOS
docker/kitematic Visual Docker Container Management on Mac & Windows
kitematic/kitematic Visual Docker Container Management on Mac & Windows
davezuko/wirk-starter Get started with React, Redux, and React-Router!
TelescopeJS/Telescope 🔭 An open-source social news app built with Meteor & React
coryhouse/react-slingshot React + Redux starter kit / boile

Drupal 8 Twig cheatsheet

Please note I created that sheet as a personal side note/draft and not everything is fully tested. There could be errors or better things to do. So if you spot something wrong or something that can be improved, feel free to comment below and I will do the changes.

Getting Drupal 8 field values in Twig

Image path: {{ file_url(content.field_name['#items'].entity.uri.value) }}

AWS S3 bucket and IAM policy recipes

Recipes

Animations in JavaScript

D3.js

Library that uses HTML, CSS and SVG to bring data to life.

	.snap {
	-ms-scroll-snap-type: x mandatory;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scroll-behavior: smooth
	}

	.snap::-webkit-scrollbar {
	display: none;
	}

	# I had a bit of trouble getting my unifi controller (hosted offsite) to use a proxy/letsencrypt. So here are the fruits of my labor.
	# The unifi default port is 8443 running on localhost.

	# License: CC0 (Public Domain)

	server {
	# SSL configuration
	#
	listen 443 ssl default_server;
	listen [::]:443 ssl default_server;

	{% set the_image = item.content['#field_collection_item'].field_featurette_image %}
	<img src="{{ file_url(the_image.entity.uri.value) }}" alt="{{ the_image.alt }}" title="{{ the_image.title }}">

	or

	<img src="{{file_url(node.field_hotel_image.entity.uri.value)}}" alt="3242">

	{#
	/**
	* @file
	* Theme override to display a social media links from a menu.
	*
	* Available variables:
	* - menu_name: The machine name of the menu.
	* - items: A nested list of menu items. Each menu item contains:
	* - attributes: HTML attributes for the menu item.
	* - below: The menu item child items.

	{#
	/**
	* @file
	* Default theme implementation of an image.
	*
	* Available variables:
	* - attributes: HTML attributes for the img tag.
	* - style_name: (optional) The name of the image style applied.
	*
	* @see template_preprocess_image()