mdunbavan

//touch/mobile detection
if (
	navigator.userAgent.match(/Phone/i) ||
	navigator.userAgent.match(/DROID/i) ||
	navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/) || 
    navigator.userAgent.match(/Windows Phone/i) || 

mdunbavan

Sans jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

mdunbavan

{% raw %}
      	<script type="text/html" id="hit-template-inner">
		  <span class="hit bg Grid-fill product--hover db" style="background-image:url({{frontImage}});">
		  	<div class="block db">
				
		  		<div class="absolute top-1 left-1 share-hover link z-2">
				    <svg class="share-icon absolute" width="19" height="18">
				        <use class="no-barba" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"></use>
				    </svg>
				    <ul class="ma0 pa0 mb4 list share-list relative">

mdunbavan

let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");

/**
 * Custom PurgeCSS Extractor
 * https://github.com/FullHuman/purgecss
 * https://github.com/FullHuman/purgecss-webpack-plugin
 */

mdunbavan

Get Instagram Images via JavaScript

Get API Info

You will need the user_id from the user. This is difficult to discover at Instagram but easy from this site http://jelled.com/instagram/lookup-user-id

I used http://jelled.com/instagram/access-token for the next few steps

You will also need an access token which ends up being difficult to obtain. Log into the account and go to their Developer Page.

mdunbavan

<template>

    <div class="vh-100 nav-bar">
      <nav role="main" class="w-100 tl">
        <ul class="center pv5 ph5">
          <li class="db v-mid mb3 text-gray">My Folders</li>
          <li class="db v-mid mb3 text-gray">Shared with me</li>
          <li class="db v-mid mb3 text-gray">From Canvas8</li>
          <li class="db v-mid mb3 text-gray">Sent</li>
          <li class="db v-mid mb3 text-gray">Archive</li>

mdunbavan

{% extends '_layout' %}

{% block content %}
{% include 'shop/_includes/meter' %}

<section class="container center-ns ph6-ns ph4">
	<div class="flex-ns flex-wrap items-start justify-left">
		<div class="w-100 tc mb4">
			<h2 class="pa0 ma0 f2">Payment</h2>
		</div>

mdunbavan

'api/reviews.json' => function() {
            return [
                'elementType' => Entry::class,
                'elementsPerPage' => 3,
                'pageParam' => 'pg',
                'criteria' => ['section' => 'customerReviews'],
                'transformer' => function(Entry $entry) {

                    $image = $entry->customerPhoto->one();
                    $userImage = Imgix::$plugin->imgixService->transformImage( $image, [ 'width' => 120 ], ['lossless' => 0,'auto' => 'compress','fm' => 'jpg','q' => 90,'lazyload' => true ]);

mdunbavan

{% includejs %}

                $('.postcode-form').submit(function(ev) {
                    // Prevent the form from actually submitting
                    ev.preventDefault();

                    var inputVal = $(this).find('input').val();

                    if(inputVal.length == 0 ){
                        $(this).find('input').addClass('b--red');

mdunbavan

import React, { Component } from 'react'

class MyTopLevelComponent extends Component {
  componentDidMount () {
    this.scrollToHashId()
  }

  componentDidUpdate () {
    this.scrollToHashId()
  }