Skip to content

Instantly share code, notes, and snippets.

Nick Freear nfreear

Block or report user

Report or block nfreear

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
@nfreear
nfreear / cloudworks-alumni.js.html
Last active Jul 2, 2019
Cloudworks Alumni | NDF, 02-July-2019 | © 2009-2019 The Open University (IET).
View cloudworks-alumni.js.html
<!doctype html>
<style>
#alumni-list li { line-height: 1.4; text-transform: capitalize; }
</style>
<h1> Cloudworks Alumni </h1>
<ol id="alumni-list"> Loading ... </ol>
@nfreear
nfreear / vue-slow-reveal.js.html
Last active Jun 13, 2019
slow-reveal — Vue.js: Gradually reveal a list of items ;).
View vue-slow-reveal.js.html
<!doctype html> <title> slow-reveal — Vue.js </title>
<link rel=stylesheet href="https://unpkg.com/vue-oneline@1.2.0/demo/demo.css">
<style>
.slow-reveal-start {
opacity: 0;
}
.slow-reveal-end {
@nfreear
nfreear / bamboo-bicycle-design--25-may-2019.svg
Last active Jun 8, 2019
Nick F's Bamboo Bike, 25-May-2019 | © Bamboo Bicycle Club ~ https://bamboobicycleclub.org
View bamboo-bicycle-design--25-may-2019.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@nfreear
nfreear / MY_COMPONENT_TPL.vue
Created May 31, 2019
Vue.js component template
View MY_COMPONENT_TPL.vue
<!--
@copyright 2019 The Open University
@author Institute of Educational Technology
@license gpl-v3-or-later
-->
<script>
/**
* The '_XXX_' component -- ...
*
@nfreear
nfreear / v-translate.html
Created May 17, 2019
i18n / translation with Vue.js
View v-translate.html
<!doctype html> <title> v-translate </title>
<style> body { margin: 2em auto; max-width: 30rem; } </style>
<div id="app">
<h1> {{ 'i18n' | _ }} </h1>
<h2> {{ 'Hello World!' | _('en') }} </h2>
@nfreear
nfreear / v-drag-on-drop.html
Last active May 23, 2019
Accessible keyboard/mouse drag, via Drag-on-drop | https://schne324.github.io/dragon-drop/demo
View v-drag-on-drop.html
<!doctype html> <title> v-drag-on-drop </title>
<style>
body { margin: 1rem auto; max-width: 42rem; }
.demo > li,
.live-log {
background: #eee;
border: 1px dotted gray;
border-radius: .2rem;
@nfreear
nfreear / bs-drop-horizontal-sideways-menu.html
Created May 17, 2019
Sideways / horizontal drop menu, with Bootstrap 4 & jQuery
View bs-drop-horizontal-sideways-menu.html
<!doctype html> <title> *BS Drop-horizontal </title>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<style>
.dropdown-menu {
background: #eee;
border-radius: 0;
}
@nfreear
nfreear / v-horiz-flip.html
Created May 13, 2019
Horizontal flip animation with Vue.js and CSS
View v-horiz-flip.html
<!doctype html> <title> *CSS / Vue Flip </title>
<h1> CSS / Vue horizontal flip </h1>
<style>
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
@nfreear
nfreear / snake-layout-static.html
Last active Apr 27, 2019
Snake layout (static)
View snake-layout-static.html
<!doctype html> <title> *Snake - static </title>
<link rel=stylesheet href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<style>
.snake-layout > * > div { background: darkgreen; color: white; font-size: 2rem; height: 234px; width: 416px; }
.d-flex > * { transition: all 5s ease-in-out; -X-flex-grow: 3; }
</style>
@nfreear
nfreear / bootstrap-vue-snake.html
Last active May 1, 2019
Responsive snake layout — with Vue & Bootstrap | © The Open University (IET), Nick Freear, Richard Greenwood, 26-April-2019 | https://codepen.io/nfreear/pen/QPYRVZ
View bootstrap-vue-snake.html
<!doctype html> <title> *Snake layout — Vue & Bootstrap </title>
<link rel=stylesheet href="https://unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css" />
<style>
:root {
--oj-card-width: 416px;
--oj-card-height: 234px;
}
You can’t perform that action at this time.