Skip to content

Instantly share code, notes, and snippets.

@leMaur
leMaur / tailwind.responsive-font.js
Last active March 8, 2021 17:52
Responsive font-size for Tailwindcss
const plugin = require('tailwindcss/plugin')
module.exports = plugin(function ({ addBase, theme }) {
addBase({
':root': {
'--rf-min-fs': theme('responsive-font.min-fs'),
'--rf-max-fs': theme('responsive-font.max-fs'),
'--rf-min-vw': theme('responsive-font.min-vw'),
'--rf-max-vw': theme('responsive-font.max-vw'),
'--rf-min-fs-rem': 'var(--rf-min-fs) * 1rem',
export default class RestJson {
constructor(endpoint, options = {}) {
if (!window.fetch) {
console.error("Sorry you cannot use RestJson Class, your browser doesn't support Fetch API.");
console.error("Please try with another browser or update it to a new version.");
}
const defaultOptions = {
headers: {'Content-Type': 'application/json'}
};
@leMaur
leMaur / google-fonts.blade.php
Last active August 15, 2020 09:33
resources/views/components/google-fonts.blade.php
@props(['src'])
<!--
- 1. Preemptively warm up the fonts’ origin.
-
- 2. Initiate a high-priority, asynchronous fetch for the CSS file. Works in
- most modern browsers.
-
- 3. Initiate a low-priority, asynchronous fetch that gets applied to the page
- only after it’s arrived. Works in all browsers with JavaScript enabled.
<?php
/**
* Calculates a score for the given
* Github's user based on public events.
*
* @param string $username The Github's username.
* @return int The calculated score.
*/
function getScoreForGithubUser(string $username): int
if (! function_exists('human_readable_bytes')) {
/**
* Convert bytes in a human readable value.
*
* According to the specifications, for storage purpose use "metric" system.
*
* @see https://stackoverflow.com/a/38659168
* @see https://en.wikipedia.org/wiki/Binary_prefix
* @param string $bytes
(function (window, document) {
const isSmallSize = window.matchMedia('only screen and (max-width: 760px)').matches
const hasOrientation = screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type !== undefined
const firstAttempt = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent)
const secondAttempt = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze
(function(window, document) {
const rand = Math.random().toString(36).substr(2, 10);
const openClassName = 'opened';
const componentName = 'toggleable';
const triggerName = 'toggleable-trigger';
const wrapperName = 'toggleable-content';
const addToggleButton = wrapper => {
const button = document.createElement('button');
const trigger = document.querySelector(`[${triggerName}]`);
{{--
Icon view component for Laravel 7.
@disclaimer The icons used in this component are taken from "Refactoring UI Heroicons" (md-outline collection).
For more info https://github.com/refactoringui/heroicons by Steve Schoger & Adam Wathan.
@copyright MIT
@author Maurizio <https://twitter.com/mauriziolepora>
;(function(window, document) {
window.toggable = function() {
return {
// Local variables
show: false,
rand: Math.random().toString(36).substr(2, 10),
bodyNeedsOverflowHidden: false,
originalOverflow: '',
@leMaur
leMaur / Notification
Created January 16, 2020 15:36
Notification component
export default class Notification extends HTMLElement {
constructor() {
super();
this.render = () => {
this.setAttribute('role', 'status');
this.setAttribute('aria-live', 'polite');
}
}
connectedCallback() {