SnippetVamp

1 - empêcher le drag drop d'image - JS inline

ajouter  onDragStart="return false;"

2 - bulle bd css

.bulle {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.bulle {
  /* triangle dimension */
  --b: 2em; /* base */
  --h: 1em; /* height */

  --p: 50%; /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --c: #4ECDC4;

  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--b)/2) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--b)/2) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/
    var(--r) calc(100% - var(--p) - var(--b)/2) 0 calc(var(--p) - var(--b)/2)/
    0 0 var(--h) 0;
}

3 - unEntitizeAccents - passer des codes HTML de lettres accentuées aux lettres accentuées

function unEntitizeAccents($str){
	$str=str_replace('&amp', '&', $str);
	$accents = [
	    'é' => '&eacute',
	    'è' => '&egrave',
	    'ê' => '&ecirc',
	    'ë' => '&euml',
	    'à' => '&agrave',
	    'â' => '&acirc',
	    'ä' => '&auml',
	    'î' => '&icirc',
	    'ï' => '&iuml',
	    'ô' => '&ocirc',
	    'ö' => '&ouml',
	    'ù' => '&ugrave',
	    'û' => '&ucirc',
	    'ü' => '&uuml',
	    'ç' => '&ccedil',
	    'œ' => '&oelig',
	    '€' => '&euro',
	    'µ' => '&micro',
	    'á' => '&aacute',
	    'é' => '&eacute',
	    'í' => '&iacute',
	    'ó' => '&oacute',
	    'ú' => '&uacute',
	    'ñ' => '&ntilde',
	    '¿' => '&iquest',
	    '¡' => '&iexcl',
	    'É' => '&Eacute',
	    'È' => '&Egrave',
	    'Ê' => '&Ecirc',
	    'Ë' => '&Euml',
	    'À' => '&Agrave',
	    'Â' => '&Acirc',
	    'Ä' => '&Auml',
	    'Î' => '&Icirc',
	    'Ï' => '&Iuml',
	    'Ô' => '&Ocirc',
	    'Ö' => '&Ouml',
	    'Ù' => '&Ugrave',
	    'Û' => '&Ucirc',
	    'Ü' => '&Uuml',
	    'Ç' => '&Ccedil',
	    'Œ' => '&OElig',
	    'Á' => '&Aacute',
	    'É' => '&Eacute',
	    'Í' => '&Iacute',
	    'Ó' => '&Oacute',
	    'Ú' => '&Uacute',
	    'Ñ' => '&Ntilde',
	];
	foreach ($accents as $key => $value) {
		str_replace([$value.';',$value],$key,$str);
	}

	return $str;
}

4 - unicode2entity - convertir les caracteres unicode (même multiples) en leut codepoint

function unicode2entity($car){
		$code='';
		$l=mb_strlen($car);
		for ($i=0;$i<$l;$i++){
			$current_car=mb_substr($car, $i,1);
			$code.=sprintf("&#x%04X;", mb_ord($current_car,'UTF-8'));
		}
		return $code;
	}

5 - Styler les input radio sans framework

input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;

  /* Recreate the circle container */
  border: 1px solid black;
  background: white;
  border-radius: 50%;

  /* Center our dot in the container */
  display: inline-grid;
  place-content: center;

  /* Use a pseudo-element to display our "dot" */
  &::before {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
  }

  /* And display it when the radio button is checked */
  &:checked::before {
    background: black;
  }
}

6 - animation d'apparition sans keyframes starting-style

.toast {
  transition: opacity 1s, translate 1s;
  opacity: 1;
  translate: 0 0;
  @starting-style {
    opacity: 0;
    translate: 0 10px;
  }
}

7 - Modifier une couleur de base en CSS


*{
    --base-color:red;
}

/*Ajouter de la transparence*/
.transparent{
    hsl(from var(--base-color) h s calc(l + 12));
}

/* désaturer une couleur de base*/
.desat{
    color: hsl(from var(--base-color) h calc(s + -50) l);
}

/* complémentaire*/
.complementaire{
    hsl(from var(--base-color) calc(h + 180) s l);
}

/* plus loin : primary, seconday, tertiary*/
.primary{
    hsl(from var(--base-color) calc(h + 90) s l);
}
.secondary{
    hsl(from var(--base-color) calc(h + 180) s l);
}
.tertiary{
    hsl(from var(--base-color) calc(h + 270) s l);
}

8 - Centrer verticalement 2024 (sans flex/grid)

align-content: center;

9 - filtrer les caractéres interdits pour un fichier

// filtre tous les inputs ayant l'attribut alphanum-only

	on("input","[alphanum-only]",function(e){
		let obj=e.target;
		let cursor_position=obj.selectionStart;
		obj.value=obj.value.replace(new RegExp(/[^a-zA-z0-9\-_ ]/g), "");
		obj.selectionStart=cursor_position;
		obj.selectionEnd=cursor_position;
	});

10 - césure automatique de texte anti débordement

text-overflow: ellipsis;
white-space: nowrap;

11 - déclencher un download de données en js

// Objet JavaScript brut
const obj = { recette: 'Rôti au kiwi', duree: 120, ingredients: 3 };

// Données à exporter converties en chaîne de texte
const data = JSON.stringify(obj);

// Crée un blob à partir des données
const blob = new Blob([data], { type: 'application/json' });

// Génère une URL temporaire
const url = window.URL.createObjectURL(blob);

// Crée un lien et déclenche le téléchargement
const link = document.createElement('a');
link.href = url;
link.download = 'data.json';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

// Libère l’URL temporaire et la mémoire 🧹
window.URL.revokeObjectURL(url);

12 - élargir la zone cliquable d'un bouton de manière invisible

button::after {
  content: "";
  position: absolute;
  inset: -5px;
}

13 - Crop d'images par lot

sudo apt install graphicsmagick-imagemagick-compat

mogrify -crop 2420x1700+670+100 *.png

14 - IP du client (avec proxy)

function get_remote_ip(){
	$ip=!empty($_SERVER['REMOTE_ADDR'])?$_SERVER['REMOTE_ADDR']:false;
	$ip=!empty($_SERVER['HTTP_X_FORWARDED_FOR'])?$_SERVER['HTTP_X_FORWARDED_FOR']:$ip; # throug proxy ?
	return $ip;
}

15 - Déclencher une animation via JS

document.getElementById("tunnel").animate(
  [
    // étapes/keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // temporisation
    duration: 1000,
    iterations: Infinity,
  },
);

16 - Lazy loading en une ligne, pur CSS

content-visibility:auto;

17 - Toggle la visibilité d'un élément simplement

button.addEventListener('click', function(){
    element.hidden = !element.hidden;
});

ou en VanillaJS

on("click","button",function(){
    element.hidden = !element.hidden;
});

18 - recharger les img qui ont échoue


<script>
on("error","img",function(e){
let img=e.target;
let src=img.src;
img.src="";
img.src=src;
});
</script>

19 - Comment detecter la touche majuscule en Javascript

const capsLockOn = keyboardEvent.getModifierState('CapsLock');

20 - sauvegarder un node en html

var doc=first('#node').innerHTML;
var name="filename.html";   
var myFile = new Blob([doc], {type: 'text/plain'});		
		
window.URL = window.URL || window.webkitURL;
var a= create('a',{href:window.URL.createObjectURL(myFile),download:name});
a.click();

21 - footer en bas de page en deux lignes

body{
	display:grid;
	grid-template-rows: auto 1fr auto;
}
avec une structure HTML:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

22 - Centrer verticalement

display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */

ou

display: grid;
justify-items: center; /* Horizontal centering */
align-items: center; /* Vertical centering */

23 - Ajouter simplement une confirmation à un lien

<a href="lien" confirm="Êtes-vous sûr ?">Action à confirmer</a>

on("click","a[confirm]",function(e){
	msg=attr(e.target,"confirm");
	if(!msg){msg="Veuillez confirmer";}
	if (!confirm(msg)){
		e.preventDefault();
		return false;
	}
})

24 - Closure avec variable du scope exterieur

$closure=function ($arg1,$arg2) use ($var_exterieure){
    #come on, do something
};

25 - empêcher l'exécution de php dans un dossier

<FilesMatch "\.php *$">
     Order allow,deny
    Deny from all
</FilesMatch>

26 - Terminal démarrer un serveur PHP dans un dossier spécifique

php -S 0.0.0.0:5555 -t "/path/to/folder"

27 - firstCap()

	function firstCap($str){
		$str=str_replace('_',' ', $str);
		$str=ucwords($str);
		$str=str_replace(' ','',$str);
		return $str;
	}

28 - labels input flottants CSS pur

// HTML
<body>
	<form>
		<h1>Please login</h1>
		<label><span>Username</span>
			<input type="text" name="login" value="" placeholder=" " >
		</label>
		<label><span>Password</span>
			<input type="password" name="pswd" value="" placeholder=" ">
		</label>

		<input type="submit" value="Ok">
		<hr>
		<h4>or <a href="">subscribe</a></h4>
	</form>

</body>

// CSS
body{
	height: 100%;
	max-height: 100%;
}
form{
	max-width:320px;
	margin:auto;
	border:1px solid rgba(0,0,0,0.2);
	border-radius: 0.5em;
	padding:0.5em;
	background:var(--color);
	
	position : relative;
    top: 50%;
    transform: translateY(-50%);

}
label{
	display: block;
	margin-top:1em;
}
input{
	outline: 0;
	display: block;
	width:100%;
	border-radius: 0.5em;
	border:1px solid rgba(0,0,0,0.2);
	margin-top:0.5em;
}

input[name="login"]{
	padding:0.5em;
	padding-left:24px;
	background: url(http://api.warriordudimanche.net/iconeleon/?i=fontawesome%20solid/circle-user.svg&c=black) no-repeat 4px center;
	background-size: 16px 16px;
}
input[type="password"]{
	padding:0.5em;
	padding-left:24px;
	background: url(http://api.warriordudimanche.net/iconeleon/?i=elusive/unlock-alt.svg&c=black) no-repeat 4px center;
	background-size: 16px 16px;
}

label span{
	position: relative;
	top:2em;
	left:24px;
	transition:all 500ms;
}
label:has(input:placeholder-shown) span{
	position: relative;
	top:2em;
	left:24px;
	transition:all 500ms;
}

label:has(input:focus) span,
label:has(input:not(:placeholder-shown)) span
{
	color:blue;
	top:0;
	left:0;
	transition:all 500ms;
}

29 - fonction PHP - servir un fichier avec headers corrects

function serveFile($path){

	if (is_file($path)){
		$mime=mime_content_type($path);
		header('Content-type: '.$mime.'; charset=utf-8');
		header('Content-Transfer-Encoding: binary');
		header('Content-Disposition: filename="'.tools::basename($path).'"');
		header('Content-Length: '.filesize($path));
		readfile($path);
		exit;
	}
        header("HTTP/1.1 404 Not Found");
        exit('404 - Not Found (╯°□°）╯︵ ┻━┻');

}

30 - folder2array()

function folder2array($path=''){
		//$path=empty($path)?'./':$path;
		$array=[];
		$current_dir=glob($path.'/*');
		if ($current_dir[0]==$path) unset($current_dir[0]);
		foreach ($current_dir as $key => $item) {
			if (is_file($item)){
				$array[]=$item;
			}else{
				$array[]=folder2array($item);
			}
		}
		return $array;
	}

SnippetVamp

Ne perds plus jamais de temps en cherchant tes snippets !

Bienvenue dans mon SnippetVamp.