Skip to content

Instantly share code, notes, and snippets.

@jameswquinn
jameswquinn / README.md
Created October 15, 2017 09:57 — forked from amir-rahnama/README.md
A simple Webpack (with Dev Server) + Gulp Configuration + LiveReload + Babel to playground where you can code ES6 without the need for React

A simple Webpack + Gulpfile configuration wihtout any need for React.js that assumes you have the following project structure:

node_modules/ bower_components/ scripts/

Entry script is in scripts/entry.js

You should run gulp && gulp build-dev and you are good to go.

@jameswquinn
jameswquinn / meta-tags.md
Created October 15, 2017 12:10 — forked from whitingx/meta-tags.md
Complete List of HTML Meta Tags

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
@jameswquinn
jameswquinn / index.html
Created October 19, 2017 22:58
Velocity.js UI Pack - Transitions Demo
<h1 class="word">Velocity.js</h1>
@jameswquinn
jameswquinn / index.html
Created October 20, 2017 18:39
Touch carousel with hammer.js
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js
"></script>
</head>
<body>
<div id="carousel">
<ul>
@jameswquinn
jameswquinn / index.haml
Last active April 11, 2018 18:36
Touch Slider with HammerJS
.has-slider
.slider#slider
.slider-panel{ style: 'background-color: #faaf34; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_4dfa47a05152487fb3bc45ca2ec8fd1e.png)' }
.slider-panel{ style: 'background-color: #aca680; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/65d721_761db9a0c113407f924a824ed173ed26.png)' }
.slider-panel{ style: 'background-color: #d8daa6; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/40288/tumblr_njkn6kp0kE1qgsw73o1_500.png)' }
.slider-pagination
.colophon
Artwork ©
%a{ href: 'https://sachinteng.tumblr.com/' } Sachin Teng
@jameswquinn
jameswquinn / index.html
Created October 27, 2017 22:16
Specific target values - anime.js
<section>
<article>
<svg width="252px" height="94px" viewBox="3 11 252 94" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs></defs>
<path d="M4,80.3307481 L4,103.14209" id="Stroke-3-Copy-2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
<path d="M12,80.3307481 L12,103.14209" id="Stroke-3-Copy" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
<path d="M20,80.3307481 L20,103.14209" id="Stroke-3" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
<path d="M28,79.2468955 L28,103.14209" id="Stroke-4" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" fill="none"></path>
@jameswquinn
jameswquinn / index.html
Created October 28, 2017 23:56
wave (CSS animation)
<div class="container">
<div class="coast">
<div class="wave-rel-wrap">
<div class="wave"></div>
</div>
</div>
<div class="coast delay">
<div class="wave-rel-wrap">
<div class="wave delay"></div>
</div>
@jameswquinn
jameswquinn / index.html
Created October 29, 2017 00:04
Vertically rotating text css [FORK] w/ browser prefixes
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="Iam">
<p>This is</p>
<b>
@jameswquinn
jameswquinn / index.html
Created October 29, 2017 00:05
Transmission: Glowing Text Animation
<main>
<section class="mast">
<figure class="mast__bg" style="background-image:url(https://unsplash.it/1800/800?image=893)"></figure>
<header class="mast__header">
<h1 class="mast__title js-spanize">Incoming Transmission</h1>
<hr class="sep"/>
<p class="mast__text js-spanize">
This is a story, all about how,
My life got twisted upside down.
So I'd like to tell a story, just sit right there.
@jameswquinn
jameswquinn / index.html
Created November 10, 2017 20:50
Owl carousel numbered pagination - pure css metod
<div class="owl-carousel">
<div> Slide 1 </div>
<div> Slide 2 </div>
<div> Slide 3 </div>
<div> Slide 4 </div>
<div> Slide 5 </div>
<div> Slide 6 </div>
<div> Slide 7 </div>
</div>