Skip to content

Instantly share code, notes, and snippets.

@TahaSh
TahaSh / index.html
Created July 7, 2024 12:13
Cursor-driven animations example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cursor-driven animations</title>
</head>
<body>
<div class="box"></div>
<script type="module" src="/main.js"></script>
@TahaSh
TahaSh / CurveNavPlugin.js
Created June 12, 2024 04:11
Improved Veloxi CurveNavPlugin
import {
EventBus,
Events,
Plugin,
createApp,
DragEventPlugin,
DragEvent
} from 'veloxi'
const OFFSET = 10
@TahaSh
TahaSh / index.html
Created April 9, 2023 19:44
Code for "How to Implement Stacking Cards Scrolling Effect in CSS" on YouTube: https://www.youtube.com/watch?v=OY-TySdgXPY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stacking Cards Scrolling Effect</title>
<style>
* {
margin: 0;
padding: 0;
@TahaSh
TahaSh / LoadingBar.svelte
Created November 24, 2019 07:17
Loading bar component for Svelte
<script>
import { stores } from '@sapper/app'
import { fade } from 'svelte/transition'
const { preloading } = stores()
const step = 5
const duration = 400
let show = false
@TahaSh
TahaSh / index.html
Created December 9, 2016 12:45
Reusable Autocomplete-Input Component in Vue 2.1
<title>Vue Awesome Autocomplete</title>
<link rel="stylesheet" href="https://unpkg.com/bulma/css/bulma.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<autocomplete-input
:options="options"
@select="onOptionSelect"
@TahaSh
TahaSh / Calculator.php
Created February 8, 2016 16:09
Source code: The Basic Workflow of Writing Unit Tests in PHPUnit
<?php
class Calculator
{
private $result;
function __construct($initial = 0)
{
$this->result = $initial;
}
@TahaSh
TahaSh / helpers.php
Last active May 27, 2017 20:24
Source code: How to Create a Reusable Modal Box in Laravel & VueJS
<?php
function showModal($id, array $data = [])
{
$toJSON = json_encode($data);
return "showModal('$id', $toJSON)";
}
@TahaSh
TahaSh / ajax-validation-with-vue.js
Created January 16, 2016 14:36
Ajax validation with VueJS
new Vue({
el: '#app',
data: {
formInputs: {},
formErrors: {}
},
methods: {
submitForm: function(e) {