paulransfield

Verifying I am +paulransfield on my passcard. https://onename.com/paulransfield

paulransfield

Keybase proof

I hereby claim:

• I am paulransfield on github.
• I am paulransfield (https://keybase.io/paulransfield) on keybase.
• I have a public key whose fingerprint is 493D EAA4 AB6F 4172 7ACE 6935 A9CB 3C83 2E45 55C2

To claim this, I am signing this object:

paulransfield

function random_from_array(images){
  return images[Math.floor(Math.random() * images.length)];
}

const aet = ["a", "b", "c"];

random_from_array(aet);

function currWeek(year,month,day) {

paulransfield

<div id="slider">  
  <div class="slider">
    <ul class="slides" :style="{left:-width*current+'px'}">
      <li v-for="(slide,i) in slides">
        <img :src="slide" alt="">
      </li>
    </ul>
    <ul class="bullets">
      <li v-for="(slide,i) in slides" @click="selectSlide(i)" v-html="i==current ? '&#9679;' : '&omicron;'"></li>
    </ul>

paulransfield

Bubble Slideshow Component

This is a Vue component that uses clip-path for an interesting slideshow transition effect.

A Pen by Erik Jung on CodePen.

License.

paulransfield

CSS image slider w/ next/prev buttons

A 100% pure CSS image slider with previous/next buttons and image transitions.

Updated with simplified HTML and CSS, better image transitions and resized images.

A Pen by Pascal Bachmann on CodePen.

License.

paulransfield

<div id="app">
  <div class="app__phone">
    <div class="phone-header">
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/Instagram_logo.png" />
      <p class="cancel-cta" v-if="step === 2 || step === 3" @click="goToHome">Cancel</p>
      <p class="next-cta" v-if="step === 2" @click="step++">Next</p>
      <p class="next-cta" v-if="step === 3" @click="sharePost">Share</p>
    </div>
    <transition name="fade">
      <div class="feed" v-if="step === 1" v-dragscroll.y="true">

paulransfield

<div class="slideshow">
  <div class="slideshow__container js-slideshow">
    <img
      v-for="slide, index in slides"
      :key="slide.id"
      :src="slide.url"
      :alt="slide.title"
      :class="{ active: isActive(index) }"
      @mouseover="stopRotation"
      @mouseout="startRotation"

paulransfield

Buddha wise words 🙏🏻

As I was playing around with a javascript shortcut action for my ios devices, I thought that it might as well be turned into a pen also :-)

If you also want to experiment with coding javascript on iOS - take a look at this brilliant app: https://scriptable.app/

Click in left side to goto previous quote, click right side to goto next quote. Click the "Random" button for random quote. Click yellow tag to goto first quote with that tag. Click the "Copy" button to copy quote to clipboard,

Keyboard shortcuts: "left arrow" = Previous quote

paulransfield

<header>
	<h1>Native Javascript exercises</h1>
</header>
<div class="slide">
	<div class="slide-content">
		<h2 id="change-text">Slide1</h2>
	</div>
	<div class="tool-bar">
		<div class="nav">
			<div id="prev">◀︎</div>