Skip to content

Instantly share code, notes, and snippets.

View rsm23's full-sized avatar
🎯
Focusing

Rahmani Seif El Moulouk rsm23

🎯
Focusing
7 followers · 19 following
View GitHub Profile
@rsm23
rsm23 / alpine-to-vue.md
Created September 21, 2021 13:09 — forked from dillingham/alpine-to-vue.md

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

  • Alpine calls the beginning and ending states "start" & "end"
  • Vue calls the beginning and ending states "from" and "to"
  • Alpine has inline "directives" ie x-transition:enter="classes"
  • Vue has a wrapper component that applies classes to the child
  • Alpine applies the classes you pass it for each state, :enter-start="class"
@rsm23
rsm23 / v-cloak.md
Last active May 13, 2020 13:32 — forked from adamwathan/v-cloak.md
Useful CSS utilities for Vue.js cloaking

Handy helpers for controlling visibility of elements until Vue has compiled.

Use like:

<div v-cloak>
  <h1>
    <span class="v-cloak--inline">Loading...</span> <!-- Only displayed before compiling -->
    <span class="v-cloak--hidden">{{ post.title }}</span> <!-- Hidden until compiling is finished -->
@rsm23
rsm23 / js_obj_getter_by_reg.js
Created November 27, 2019 15:45 — forked from sourcec0de/js_obj_getter_by_reg.js
Select keys from a javascript object using a regular expression. Returns an object containing only the keys that matched the expression in the original object.
var keyMatch = function(o,r){
var c = 0;
var no = {};
Object.keys(o).forEach(function(k){
c++;
no[k] = k.match(r) ? o[k] : void 0;
});
@rsm23
rsm23 / v-cloak.css
Created August 29, 2019 10:33 — forked from matthewoestreich/v-cloak.css
v-cloak for vue.js loading
[v-cloak] {
display: block;
padding: 50px 0;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
@rsm23
rsm23 / cloudSettings
Last active August 26, 2019 12:42
Visual Studio Code Settings Sync Gist
{"lastUpload":"2019-08-24T13:40:45.341Z","extensionVersion":"v3.4.2"}
@rsm23
rsm23 / SimpleCsvExporter.php
Created July 29, 2018 13:35 — forked from bayareawebpro/SimpleCsvExporter.php
<?php namespace BayAreaWebPro\SimpleCsv;
use SplFileObject;
use Illuminate\Support\Collection;
use Symfony\Component\HttpFoundation\StreamedResponse;
/**
* The SimpleCsv Exporter
*/
class SimpleCsvExporter
{
@rsm23
rsm23 / SimpleCsvImporter.php
Created July 29, 2018 13:35 — forked from bayareawebpro/SimpleCsvImporter.php
<?php namespace BayAreaWebPro\SimpleCsv;
use Illuminate\Support\Collection;
use SplFileObject;
/**
* The SimpleCsv Importer
*/
class SimpleCsvImporter
{
@rsm23
rsm23 / webdev_online_resources.md
Created July 16, 2018 15:40 — forked from bradtraversy/webdev_online_resources.md
Online Resources For Web Developers (No Downloading)
@rsm23
rsm23 / JSKeyCodes
Created July 14, 2018 01:17 — forked from tylerthebuildor/JSKeyCodes
List of JavaScript key codes.
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
page up 33
@rsm23
rsm23 / route-blade-directive.php
Created July 11, 2018 23:51 — forked from calebporzio/route-blade-directive.php
@route blade directive
<?php
Blade::directive('route', function ($expression) {
return '<?php route(' . $expression . '); ?>';
});