Skip to content

Instantly share code, notes, and snippets.

Josh Parrish joshcp

Block or report user

Report or block joshcp

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View eventbubbling.js
for(let elem of document.querySelectorAll('*')) {
elem.addEventListener("click", e => console.log(`Capturing: ${elem.tagName}`), true);
elem.addEventListener("click", e => console.log(`Bubbling: ${elem.tagName}`));
}
@joshcp
joshcp / pwa-ios.html
Created Oct 29, 2018
PWA Splash screen on iOS
View pwa-ios.html
<!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-1125x2436.png" data-wm="appshell">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-750x1334.png" data-wm="appshell">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="https://wompme.blob.core.windows.net/7728/dds-mentoring-ios-1242x2208.png" data-wm="appshell">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="https://wo
@joshcp
joshcp / head import
Last active Sep 24, 2018
proposed meta, link, and schema tags for import on all optimize projects
View head import
{{[rel="amphtml"]}}
{{[rel="manifest"]}}
{{[rel*="icon"]}}
{{[rel="canonical"]}}
{{[rel="alternate"]}}
{{[rel="publisher"]}}
{{meta:not([name="viewport"])}}
{{[type="application/ld+json"]}}
View payments.html
<form action-xhr="https://ampedupkids.com/OrderTrike" method="post">
<fieldset>
<amp-selector layout="container" class="colorPicker" name="color">
<!-- color picker -->
</amp-selector>
<div class="orderform">
<!-- qty select and BUY button -->
</div>
</fieldset>
<div submit-success>
View voting.html
<!-- a simple like button -->
<form id="like-btn" class="vote parent" method="POST" target="_top" action-xhr="https://AmpedUpKids.com/castVote">
<div class="fill">
<!-- download form data and pre-populate form using amp-list -->
<amp-list layout="fill" src="https://AmpedUpKids.com/WompKidsInit?assetID=000">
<template type="amp-mustache">
<!-- single click form by nesting radio input inside submit button -->
<button class="votes-up" type="submit" value="make-vote">
<label class="wm-icon" for="vote-up">Vote Up</label>
View modal.css
#modal-hider {
display: none;
}
.full-screen {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
View modal.html
<form action-xhr="https://AmpedUpKids.com/OrderTrike" method="post">
<fieldset>
<!-- form inputs here -->
</fieldset>
<div submit-success>
<template id="payTemplate" type="amp-mustache">
<!-- checkout here -->
</template>
</div>
<div submit-error>
View tabs.css
.ampTabContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
}
.tabButton {
list-style: none;
flex-grow: 1;
text-align: center;
View tabs.html
<div id="ampTabs">
<amp-selector role="tablist" layout="container" class="ampTabContainer">
<div class="tabButton" selected option="a">Tab one</div>
<div class="tabContent">Tab one content... </div>
<div class="tabButton" option="b">Tab two</div>
<div class="tabContent">Tab two content... </div>
<div class="tabButton" option="c">Tab three</div>
@joshcp
joshcp / CascadiaFest.md
Created Apr 11, 2016
Talk proposal for Cascadia Fest 2016 - What AMP can teach us about performance
View CascadiaFest.md

#What AMP can teach us about performance ##Abstract Let's take a look at the Google Accelerated Mobile Pages Project to learn a few things about how they designed the "lightning fast" load times of AMP, and we'll take away a few things we can apply to our own web projects to improve performance.

##Other Info This talk will be based on a talk that I gave to the Web Designers Unite! group in Bellingham, WA in March 2016. I plan to flesh it out a bit more, focus more on specific take-away items that can be applied to more general web projects, and incorporate any new materials as I learn more about AMP and performance.

Here's my slides from the March 2016 talk

You can’t perform that action at this time.