Skip to content

Instantly share code, notes, and snippets.

View rascoop's full-sized avatar

Richard Scoop rascoop

27 followers · 108 following
  • Curaçao, Dutch Caribbean
View GitHub Profile
@mithicher
mithicher / alpinejs-datepicker.html
Last active September 24, 2022 15:21
Datepicker with Alpine.js and Tailwind CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Datepicker with TailwindCSS and AlpineJS</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
@praveenjuge
praveenjuge / index.html
Created August 6, 2020 11:52
Apline Tailwind Dropdown
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./build.css" />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body class="p-12 m-12">
@emmabostian
emmabostian / attributes.css
Last active September 2, 2023 22:19
Seven different types of CSS attribute selectors
// This attribute exists on the element
[value]
// This attribute has a specific value of cool
[value='cool']
// This attribute value contains the word cool somewhere in it
[value*='cool']
@sandren
sandren / tailwind.md
Last active July 10, 2024 16:28
Tailwind CSS best practices

Tailwind CSS best practices

Utility classes

  1. When writing a string of multiple utility classes, always do so in an order with meaning. The "Concentric CSS" approach works well with utility classes (i.e,. 1. positioning/visibility 2. box model 3. borders 4. backgrounds 5. typography 6. other visual adjustments). Once you establish a familiar pattern of ordering, parsing through long strings of utility classes will become much, much faster so a little more effort up front goes a long way!

  2. Always use fewer utility classes when possible. For example, use mx-2 instead of ml-2 mr-2 and don't be afraid to use the simpler p-4 lg:pt-8 instead of the longer, more complicated pt-4 lg:pt-8 pr-4 pb-4 pl-4.

  3. Prefix all utility classes that will only apply at a certain breakpoint with that breakpoint's prefix. For example, use block lg:flex lg:flex-col lg:justify-center instead of block lg:flex flex-col justify-center to make it very clear that the flexbox utilities are only applicable at the

@cmw2
cmw2 / Startup.cs
Created February 15, 2019 20:43
OWIN Startup class to use AAD.
using Owin;
namespace WindowsAuthAppToAADDemo
{
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
ConfigureAuth(app);
}
@rascoop
rascoop / Reformat Printing for Local.user.js
Last active January 5, 2024 13:53
Reformat ALBA Printing for Local
// ==UserScript==
// @name Reformat Printing for Local
// @namespace http://tampermonkey.net/
// @version 0.45
// @description Native language might get a lot of foreign addresses, this reformats the print page to use less pages
// @author Richard Scoop <richard.scoop@gmail.com>
// @match https://www.mcmxiv.com/alba/territory-mk?*
// @grant none
// ==/UserScript==
@davidkpiano
davidkpiano / css-state-machines.md
Last active June 15, 2023 15:26
Article for creating CSS State Machines

As the number of different possible states and transitions between states in a user interface grows, managing styles and animations can quickly become complicated. Even a simple login form has many different "user flows":

https://codepen.io/davidkpiano/pen/WKvPBP

State machines are an excellent pattern for managing state transitions in user interfaces in an intuitive, declarative way. We've been using them a lot on the Keyframers as a way to simplify otherwise complex animations and user flows, like the one above.

So, what is a state machine? Sounds technical, right? It’s actually more simple and intuitive than you might think. (Don’t look at Wikipedia just yet… trust me.)

Let’s approach this from an animation perspective. Suppose you’re creating a loading animation, which can be in only one of four states at any given time:

@noelbundick
noelbundick / LICENSE
Last active May 24, 2024 09:10
Exclude WSL installations from Windows Defender realtime protection
MIT License
Copyright (c) 2018 Noel Bundick
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
@spyesx
spyesx / rsync_backup.sh
Last active July 9, 2024 16:57
Rsync backup excluding node_modules
# Backup files
#https://explainshell.com/explain?cmd=rsync+-azuv+--delete+--progress+--exclude+%27node_modules%27
rsync -auvhp --delete --exclude=node_modules [source] [destination]
# Remove all node_modules folders
# https://explainshell.com/explain?cmd=find+.+-name+%22node_modules%22+-type+d+-prune+-exec+rm+-rf+%27%7B%7D%27+%2B
find . -name "node_modules" -type d -prune -exec rm -rf '{}' +
@sators
sators / arrayToCsv.js
Last active January 3, 2023 18:10
Convert Array of Objects to CSV with Javascript
/**
* Take an array of objects of similar structure and convert it to a CSV.
* @source https://halistechnology.com/2015/05/28/use-javascript-to-export-your-data-as-csv/
* @modifiedBy sators
* @param {Array} options.data Array of data
* @param {String} options.columnDelimiter Column separator, defaults to ","
* @param {String} options.lineDelimiter Line break, defaults to "\n"
* @return {String} CSV
*/
export default ({data = null, columnDelimiter = ",", lineDelimiter = "\n"}) => {