Skip to content

Instantly share code, notes, and snippets.

Avatar
💖
On Wednesdays We Write Code

Jonathan Carter lostintangent

💖
On Wednesdays We Write Code
  • GitHub Staff
  • Seattle, WA
  • Twitter @lostintangent
View GitHub Profile
@lostintangent
lostintangent / index.js
Last active Mar 3, 2021
React Native Web (Fork)
View index.js
import ExecutionEnvironment2 from "https://cdn.skypack.dev/fbjs/lib/ExecutionEnvironment.js";
import normalizeColor$1 from "https://cdn.skypack.dev/normalize-css-color";
import hyphenateStyleName from "https://cdn.skypack.dev/hyphenate-style-name";
import createPrefixer2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/createPrefixer.js";
import backgroundClip2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/backgroundClip.js";
import crossFade2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/crossFade.js";
import cursor2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/cursor.js";
import filter2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/filter.js";
import flex2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/flex.js";
import flexboxIE2 from "https://cdn.skypack.dev/inline-style-prefixer/lib/plugins/flexboxIE.js";
View genuary-12-using-an-api.markdown
@lostintangent
lostintangent / index.html
Created Feb 2, 2021
Project Management Dashboard UI
View index.html
<div class="app-container">
<div class="app-header">
<div class="app-header-left">
<span class="app-icon"></span>
<p class="app-name">Portfolio</p>
<div class="search-wrapper">
<input class="search-input" type="text" placeholder="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
<defs></defs>
<circle cx="11" cy="11" r="8"></circle>
@lostintangent
lostintangent / index.pug
Last active Jan 8, 2021
SVG Exercise 03: Morphing Generative flower
View index.pug
svg(viewBox="-50 -50 100 100")
View gtfo2020.markdown
@lostintangent
lostintangent / index.html
Last active Jan 1, 2021
Musical Christmas Lights
View index.html
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<div id="overlay">
<ul>
@lostintangent
lostintangent / index.html
Last active Dec 31, 2020
Tailwind - Animate
View index.html
<ul class="container mx-auto divide-y divide-gray-400 divide-dotted" style="font-family: Raleway">
<li class="flex items-center justify-between px-4 py-2">
<div class="w-full">
<img class="animate-none h-16 w-full" src="http://pixelprowess.com/i/powship.svg" alt="POW Ship">
</div>
<div class="ml-5 text-right">
<div class="text-xs font-semibold inline-block font-mono whitespace-nowrap px-2 py-1 rounded text-white bg-pink-500 rounded-2">animate-none</div>
</div>
</li>
<li class="flex items-center justify-between px-4 py-2">