SnippetVamp - results

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

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

2 - 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;
}

3 - foreach (data as key=>value) en js

for (let [key, value] of data) {
    console.log(key);
    console.log(value);
}

4 - trigger event on HTML element using JavaScript - 30 seconds of code

const triggerEvent = (el, eventType, detail) =>
  el.dispatchEvent(new CustomEvent(eventType, { detail }));

const myElement = document.getElementById('my-element');
myElement.addEventListener('click', e => console.log(e.detail));

triggerEvent(myElement, 'click');
// The event listener will log: null

triggerEvent(myElement, 'click', { username: 'bob' });
// The event listener will log: { username: 'bob' }

5 - listen for a click outside of an element in JavaScript? - 30 seconds of code

const onClickOutside = (element, callback) => {
  document.addEventListener('click', e => {
    if (!element.contains(e.target)) callback();
  });
};

onClickOutside('#my-element', () => console.log('Hello'));
// Will log 'Hello' whenever the user clicks outside of #my-element

6 - listen for an event only once in JavaScript - 30 seconds of code

<button id="my-btn">Click me!</button>

const listenOnce = (el, evt, fn) =>
  el.addEventListener(evt, fn, { once: true });

listenOnce(
  document.getElementById('my-btn'),
  'click',
  () => console.log('Hello!')
); // 'Hello!' will only be logged on the first click

7 - Run JavaScript promises in series

const runPromisesInSeries = ps =>
  ps.reduce((p, next) => p.then(next), Promise.resolve());

const delay = d => new Promise(r => setTimeout(r, d));
runPromisesInSeries([() => delay(1000), () => delay(2000)]);
// Executes each promise sequentially, taking a total of 3 seconds to complete

8 - Mobile Device Detection - js


The following snippet will detect if the visitor is using a mobile device:
JS

const isMobile = /iPhone|iPad|iPod|Android|Opera Mini|BlackBerry|IEMobile|WPDesktop|Windows Phone|webOS|/i.test(navigator.userAgent);
if (isMobile) {
    console.log('Device is mobile');
}

9 - Countdown Timer - js

Countdown Timer

The following snippet will countdown a number in an element:
HTML

<p id="num">100</p>


JS

const num = document.querySelector('#num');
setInterval(() => num.innerHTML = parseInt(num.innerHTML) != 0 ? parseInt(num.innerHTML)-1 : 0, 1000);

10 - JS URL Manipulation

// Get parameters from a URL:

const url = new URL('https://example.com/index.php?name=David&surname=Adams');
console.log(url.searchParams.get('name')); // David 
console.log(url.searchParams.get('surname')); // Adams


// Redirect URL

location.href = "https://codeshack.io";

// Redirect in 10 seconds:

setTimeout(() => location.href = "https://codeshack.io", 10000); 


// Get Hash Value

// URL: http://example.com/home#MyProfile
console.log(window.location.hash.substr(1)); // Output: MyProfile

11 - Storing Data in the Browser

// save
localStorage.setItem('username', 'David');

// load
console.log(localStorage.getItem('username'));

// Test if item exists
if (localStorage.getItem('username')) {
    console.log('Item exists!');
}


// Remove one item
localStorage.removeItem('username');

// Remove all items:

localStorage.clear();

12 - escape HTML entities and quotes

# Escape 

htmlentities($text, ENT_QUOTES, 'UTF-8');

# Unescape HTML entities:

html_entity_decode($text);

13 - Reset CSS moderne (2023)

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

14 - télécharger la page courante en html - js

<a onclick="this.href='data:text/html;charset=UTF-8,'+encodeURIComponent(document.documentElement.outerHTML)" href="#" download="page.html">Download</a>

15 - Modifier et traiter des données formulaire AVANT submit

// à mettre dans le form onsubmit
form.addEventListener("formdata",function(e){
	let formData = e.formData;
	formData.set("chapo", saveSlashes(formData.get("chapo")));
	formData.set("content", saveSlashes(formData.get("content")));
});

16 - Forcer https dans htaccess

RewriteEngine On 
RewriteCond %{HTTPS} off 
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

17 - Rendre un tableau responsive

 <table class=”events-table” >
    <thead>
    <tr>
    <th class=”event-date”>Date</th>
    <th class=”event-time”>Horaire</th>
    <th class=”event-description”>Evènement</th>
    </tr>
    </thead>

    <tbody>
    <tr>
    <td data-label=”Date”> Le #_EVENTDATES</td>
    <td data-label=”Horaire”>#_EVENTTIMES</td>
    <td data-label=”Evènement”>#_EVENTLINK</td>
    </tr>
    </tbody>
   </table>

table caption {
    display: none;
}

@media all and (max-width:500px){
    table{
        width:100%;
    }

    table caption {
        display: block;
        background-color: #484d55;
        color:white;
    }

    .table thead {
    display: none;
    }

    .table tr{
    display: block;
    margin-bottom: 40px;
    }

    .table td {
    display: block;
    text-align: right;
    }

    .table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    }
}

18 - console JS


    pour avoir le nom des variables avec leur valeur, utiliser { }: console.log({var})
    console.warn(), console.error() et console.info() pour différencier l'aspect du message.
    console.assert(condition,retour) pour éviter un if (condition){console.log(retour)
    console.trace() pour remonter la pile d'appels
    console.group('nom'), console.groupCollapsed('nom') et console.groupEnd('nom') pour regrouper des console log()
    console.table(array) pour présenter les données sous forme de tableau
    $(selecteur) est équivalent à document.querySelector(selecteur)
    $$(selecteur) est équivalent à document.querySelectorAll(selecteur)

19 - Des sous-titres qui fonctionnent avec la balise video

<video controls title="sdfgsdfg" preload="auto" crossorigin>
    <source src="Marco_Castelblanco.mp4" type="video/mp4"/>
    <!--   kind="captions" ou "subtitles" ATTENTION AU PLURIEL -->
    <track kind="captions" srclang="fr" label="sous-titre" src="Marco_Castelblanco.vtt" default="true"/>
    Sorry, your browser doesn't support embedded videos.
</video>

20 - Forcer la redirection

function redirect($url=null){
	@header('location: '.$url);
	exit('<script>document.location.href="'.$url.'";</script>');
}

21 - Obtenir l'adresse de l'article en cours dans PluXml

$url_article=$plxShow->plxMotor->urlRewrite('index.php?article'.$plxShow->plxMotor->plxRecord_arts->f('numero').'/'.$plxShow->plxMotor->plxRecord_arts->f('url'))

22 - Body qui apparait après chargement en 2 lignes

/* Dans le Head */
<style type="text/css">body{opacity: 0;transition: opacity 1s}</style>

/* balise body */
<body onload="document.body.style.opacity=1" >

23 - grid responsive en 2 lignes

display:grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

24 - Serveur de fichiers rapide en Python

Terminal depuis le dossier à partager puis:
(en Python 2) : python -m SimpleHTTPServer 5555
(en Python 3) : python -m http.server 5555
et accédez avec un simple navigateur (http://adresseip:5555)

25 - Chemin vers un plugin dans pluXML

$plxMotor=plxMotor::getInstance();
$plugin=$plxMotor->plxPlugins->aPlugins['nom_du_plugin'];
$plugin->methode();

26 - How To Build Tabs only with CSS - Digital-Heart - Medium

// boutons
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Tab1</label> 
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">Tab2</label>

// contenus
<div class="tab content1">Tab1 Contents </div>
<div class="tab content2">Tab2 Contents </div>


// css pour cacher/montrer
input { display: none; }                /* hide radio buttons */
input + label { display: inline-block } /* show labels in line */
input ~ .tab { display: none }          /* hide contents *//* show contents only for selected tab */
#tab1:checked ~ .tab.content1,
#tab2:checked ~ .tab.content2 { display: block; }

// css pour styler

input + label {             /* box with rounded corner */
  border: 1px solid #999;
  background: #EEE;
  padding: 4px 12px;
  border-radius: 4px 4px 0 0;
  position: relative;
  top: 1px;
}
input:checked + label {     /* white background for selected tab */
  background: #FFF;
  border-bottom: 1px solid transparent;
}
input ~ .tab {          /* grey line between tab and contents */
  border-top: 1px solid #999;
  padding: 12px;
}

27 - Create Auth Tokens with PHP

// php7
// bin2hex(random_bytes($length))
$token = bin2hex(random_bytes(64));

// fallback
$token = bin2hex(openssl_random_pseudo_bytes($length));

28 - Creating a full bleed CSS utility - Andy Bell

.full-bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

29 - An angle in pureCSS

div {
	--angle: 150deg; /* CHANGE THIS VALUE TO THE ANGLE YOU WANT */
}

div {
    height: 300px;
    width: 600px;
    overflow: hidden;
    position: relative;
    background: crimson;
    border-radius: 300px 300px 0 0;
    border: 1px solid crimson;
}
div::before {
    height: inherit;
    width: inherit;
    position: absolute;
    content: "";
    background-color: white;
    transform-origin: 50% 100%;
    transform: rotate(var(--angle));
}

30 - copier dans le presse-papier

function copy(text) {     if (window.clipboardData && window.clipboardData.setData) {         // IE specific code path to prevent textarea being shown while dialog is visible.         return clipboardData.setData("Text", text);       } else {         var textarea = document.createElement("textarea");         textarea.textContent = text;         textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.         document.body.appendChild(textarea);         textarea.select();         try {             return document.execCommand("copy");  // Security exception may be thrown by some browsers.         } catch (ex) {             console.warn("Copy to clipboard failed.", ex);             return false;         } finally {             document.body.removeChild(textarea);         }     } }

31 - Common Unicode Icons ✿ dabblet.com

/* Based on email I got from andrea ricci */

a[href^="mailto:"]:before { content: "\2709"; }
.phone:before             { content: "\2706"; }
.important:before         { content: "\27BD"; }
blockquote:before         { content: "\275D"; }
blockquote:after          { content: "\275E"; }
.alert:before             { content: "\26A0"; }

:before, :after { 
  color: purple; 
}

p, blockquote {
  margin: 20px;
}
body, a {
  color: #333;
  text-decoration: none;
  font-size: 21px;
}

32 - Centrer verticalement

img{
    position : relative;
    top: 50%;
    transform: translateY(-50%);
}

33 - un switcher d'image à base de target trick

<div id="slider">

  	<!-- Slide Images -->
	<img id="slide-1" src="img1.jpg" alt="img description"/>
  	<img id="slide-2" src="img2.jpg" alt="img description"/>
  	<img id="slide-3" src="img3.jpg" alt="img description"/>
  	<img id="slide-4" src="img4.jpg" alt="img description"/>
	
	<!-- Navigation for the slides -->
	<ul>
		<li><a href="#slide-1">1</a></li>
		<li><a href="#slide-2">2</a></li>
		<li><a href="#slide-3">3</a></li>
		<li><a href="#slide-4">4</a></li>
	</ul>
</div>
SCSS
#slider {
  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 200px;
    
    &:target {
      transition: all .5s ease-in-out;
    }
    
    &:not(:target), 
    &:target ~ img#slide-4  {
      position: relative;
      opacity: 0;
    }

    // set initially visible
    &#slide-4 {
      position: absolute;
      opacity: 1;
     }
  }
}

34 - Clear:both auto sur pseudo element

.one:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   height: 0;
}

35 - Un site qui prend toute la hauteur disponible avec flexbox

<body>
	<div class="page">
		<header class="site-header"></header>

		<main class="site-content"></main>

		<footer class="site-footer"></footer>
	</div>
</body>
Nous allons donc simplement appliquer display: flex; à body, et spécifier le comportement de ses descendants direct en tant que colonnes. Puis nous diront simplement à .site-content d’utiliser toute la hauteur disponible.

CSS
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
}

36 - makeFavIcon - créer un favicon avec un logo et un fond coloré



function makeFavIcon($background_color){
  # Si on a changé la coupeur dans color.php
  if (filemtime('favicon.png')!=filemtime('colors.php')){
    # on charge le logo
    $logo=imagecreatefrompng ('img/logo.png');
    # ça c'est pour la transparence
    imageAlphaBlending($logo, true);
    imageSaveAlpha($logo, true);

    # on crée l'image de fond
    $fav=imagecreatetruecolor(140,140);
    imageAlphaBlending($fav, true);
    imageSaveAlpha($fav, true);

    # on extrait la couleur (passée en #fff ou #ffffff)
    preg_match('/#?([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})([a-fA-F0-9]{1,2})/',$background_color,$color);
    if (strlen($color[1])<2){
      $color[1]=$color[1].$color[1];
      $color[2]=$color[2].$color[2];
      $color[3]=$color[3].$color[3];
    }
    $color=array_map("hexdec",$color);
    $color = ImageColorAllocate ($fav,$color[1],$color[2],$color[3]);
    
    # on crée le fond dans la couleur
    imagefilledrectangle ($fav,0,0,140,140,$color);
    imagecopy($fav,$logo,0,0,0,0,140,140);

    # on sauve l'image
    imagepng($fav, 'favicon.png');
     
    # on libère la mémoire
    imagedestroy($fav);

    # on change le filemtime du fichier de couleurs
    touch('colors.php');
  }
}

37 - array_search - recherche dans un tableau multidimensionnel

in (PHP 5 >= 5.5.0) you don't have to write your own function to search through a multi dimensional array

ex : 

$userdb=Array
(
    (0) => Array
        (
            (uid) => '100',
            (name) => 'Sandra Shush',
            (url) => 'urlof100'
        ),

    (1) => Array
        (
            (uid) => '5465',
            (name) => 'Stefanie Mcmohn',
            (pic_square) => 'urlof100'
        ),

    (2) => Array
        (
            (uid) => '40489',
            (name) => 'Michael',
            (pic_square) => 'urlof40489'
        )
);

simply u can use this

$key = array_search(40489, array_column($userdb, 'uid'));

38 - un sticky footer

<body>
   <header>...</header>
   <section class="main-content">...</section>
   <footer>...</footer>
</body>

header{
  /* We want the header to have a static height, 
  it will always take up just as much space as it needs.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

.main-content{
  /* By setting flex-grow to 1, the main content will take up 
  all of the remaining space on the page. 
  The other elements have flex-grow: 0 and won't contest the free space. */
  /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 1 0 auto;
}

footer{
  /* Like the header, the footer will have a static height - it shouldn't grow or shrink.  */
  /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
  flex: 0 0 auto;
}

39 - [JavaScript] detect down/up scrolling - Le Hollandais Volant

// Initial state
var scrollPos = 0;
// adding scroll event
window.addEventListener('scroll', function(){ scrolling() });

// the function : compares the "new" scrolling state with the previous
// (this allows detecting either "up" or "down" scrolling)
// then saves the new in the $previous for the next iteration.

function scrolling() {
	if ((document.body.getBoundingClientRect()).top > scrollPos) {
		console.log('scrolling DOWN');
	} else {
		console.log('scrolling UP');
	}
	scrollPos = (document.body.getBoundingClientRect()).top;
}

40 - safe_redirect: rediriger une page sans erreur headers already sent

function safe_redirect($url=none){
	if (!$url){return false;}
	if (!headers_sent()){header('location: '.$url);}
	else{echo '<script>document.location.href="'.$url.'";</script>';}
	exit;
}

41 - récupérer le titre d'une page web

$url = "http://example.com/";

$html_source = file_get_contents($url);
$dom_tree = new DOMDocument();
$dom_tree->loadHTML($html_source);
$titles = $dom_tree->getElementsByTagName('title');
$title = trim($titles->item(0)->nodeValue);

return $title;

// pour éviter les erreurs de pages mal foutues
libxml_use_internal_errors(true);
// dom parsing
libxml_clear_errors();

42 - Recharger une page au bout de 2 secondes sans resoumettre un formulaire

onclick="window.setTimeout('location.assign(location.href)',2000);"

43 - ssave-sload: secured data saving

# Secured save/load variable data (inspired by Oros)
function ssave($file=null,$content=''){
	if (!$file){return false;}
	file_put_contents($file.'.php', '<?php /* '.base64_encode(gzdeflate(serialize($content))).' */ ?>');
}
function sload($file=null){
	if (!$file || !is_file($file)){return false;}
	return unserialize(gzinflate(base64_decode(substr(file_get_contents($file),9,-strlen(6)))));
}

44 - efface contenu div plus rapidement


while (box.firstChild) {
 box.removeChild(box.firstChild);
}
// est plus rapide que 
box.innerHTML = '';

45 - Centrer une image verticalement et horizontalement

Le code :
 
#container {
    max-height: 100%;
}

#container img {
    /* Keeps image from going outside the screen */
    max-height: 100%;
    max-width: 100%;
    /* Keeps image from beeing distorted */
    height: auto;
    width: auto;
    /* centering horizontally AND vertically */
    /* 50% of container */
    position: relative;
    top: 50%;
    left: 50%;
    /* 50% of image */
    transform: translate(-50%,-50%);
}

46 - Filtrage d'items à base de radiobutton sans js

<!--
  Checkbox Trickery with CSS:
  http://codersblock.com/blog/checkbox-trickery-with-css/ 
-->

<div class="container">
  <h1><span class="marvel">Marvel</span> Mutant Teams</h1>

  <input id="original" type="radio" name="team" checked>
  <label for="original">Original X-Men</label>

  <input id="force" type="radio" name="team">
  <label for="force">X-Force</label>

  <input id="factor" type="radio" name="team">
  <label for="factor">X-Factor</label>

  <input id="hellfire" type="radio" name="team">
  <label for="hellfire">Hellfire Club</label>
  
  <br>
  <ul class="characters">
    <li id="angel" data-teams="original force factor hellfire">
      <h2>Angel</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-angel.png" alt="">
    </li>
    <li id="beast" data-teams="original factor">
      <h2>Beast</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-beast.png" alt="">
    </li>
    <li id="cyclops" data-teams="original force factor">
      <h2>Cyclops</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-cyclops.png" alt="">
    </li>
    <li id="emma-frost" data-teams="hellfire">
      <h2>Emma Frost</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-emma-frost.png" alt="">
    </li>
    <li id="iceman" data-teams="original factor">
      <h2>Iceman</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-iceman.png" alt="">
    </li>
    <li id="jean-grey" data-teams="original factor">
      <h2>Jean Grey</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-jean-grey.png" alt="">
    </li>
    <li id="magneto" data-teams="hellfire">
      <h2>Magneto</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-magneto.png" alt="">
    </li>
    <li id="nightcrawler" data-teams="force">
      <h2>Nightcrawler</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-nightcrawler.png" alt="">
    </li>
    <li id="professor-x" data-teams="original">
      <h2>Professor X</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-professor-x.png" alt="">
    </li>
    <li id="psylocke" data-teams="force hellfire">
      <h2>Psylocke</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-psylocke.png" alt="">
    </li>
    <li id="quicksilver" data-teams="factor">
      <h2>Quicksilver</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-quicksilver.png" alt="">
    </li>
    <li id="rictor" data-teams="force factor">
      <h2>Rictor</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-rictor.png" alt="">
    </li>
    <li id="storm" data-teams="force hellfire">
      <h2>Storm</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-storm.png" alt="">
    </li>
    <li id="sunspot" data-teams="force hellfire">
      <h2>Sunspot</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-sunspot.png" alt="">
    </li>
    <li id="tithe" data-teams="hellfire">
      <h2>Tithe</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-tithe.png" alt="">
    </li>
    <li id="wolverine" data-teams="force">
      <h2>Wolverine</h2>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/77020/ct-wolverine.png" alt="">
    </li>
  </ul>
</div>

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: #fff;
  background-color: #444;
  font: 0/1 'Oswald', sans-serif;
  text-align: center;
}

.container {
  margin: 0 auto;
  padding: 20px 5px;
}

h1 {
  margin: 0 5px 15px;
  font-size: 45px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 0 20px #000;
}

.marvel {
  color: #c00;
}

input {
  position: absolute;
  left: -9999px;
}

label {
  display: inline-block;
  position: relative;
  width: 150px;
  margin: 5px;
  padding: 10px 10px 10px 38px;
  background-color: #000;
  font-size: 18px;
  white-space: nowrap;
  cursor: pointer;
}

label::before {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  background-color: #444;
}

input:focus + label {
  outline: 1px solid #fff;
}

input:checked + label::before {
  background-color: #c00;
}

/* width is controlled here and in media queries to ensure that there's always an even number of columns (prevents orphans) */
.characters {
  display: inline-block;
  width: 240px;
  list-style-type: none;
  margin: 15px -5px 0;
  padding: 0;
}

.characters li {
  display: inline-block;
  position: relative;
  margin: 10px;
  padding: 0;
  width: 100px;
  height: 100px;
}

.characters h2 {
  display: none;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 0px;
  right: 0px;
  margin: 0;
  padding: 4px;
  border: 1px solid #fff;
  color: #fff;
  background-color: #000;
  font-size: 14px;
  font-weight: normal;
}

.characters img {
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 20px #000;
  opacity: .25;
  transform: scale(.5);
}

#original:checked ~ .characters [data-teams~="original"] h2,
#force:checked ~ .characters [data-teams~="force"] h2,
#factor:checked ~ .characters [data-teams~="factor"] h2,
#hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
  display: block;
}

#original:checked ~ .characters [data-teams~="original"] img,
#force:checked ~ .characters [data-teams~="force"] img,
#factor:checked ~ .characters [data-teams~="factor"] img,
#hellfire:checked ~ .characters [data-teams~="hellfire"] img {
  animation: avatar .3s forwards;
}

/* fade in and expand image to full size, with a slight bounce */
@keyframes avatar {
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media only screen and (min-width: 500px) {
  .characters {
    width: 480px;
  }
}

@media only screen and (min-width: 740px) {
  .characters {
    width: 720px;
  }

  h1 {
    font-size: 60px;
  }
}

@media only screen and (min-width: 980px) {
  .characters {
    width: 960px;
  }
}

47 - Formulaire dont certaines chechboxes-radio révèlent-cachent du contenu

<!--
  Checkbox Trickery with CSS:
  http://codersblock.com/blog/checkbox-trickery-with-css/ 
-->

<div class="container">
  <h1>
    <span>Subscribe to</span><br>
    Celery Facts Weekly!
  </h1>
  <section>
    <label for="email" class="top-label">Email</label>
    <input id="email" type="email" autocomplete="off">
  </section>
  <section>
    <label class="top-label">How did you hear about us?</label>
    
    <input id="how-friend" name="how" type="radio">
    <label for="how-friend" class="side-label">From a friend</label>

    <input id="how-internet" name="how" type="radio">
    <label for="how-internet" class="side-label">Somewhere on the internet</label>

    <input id="how-other" name="how" type="radio">
    <label for="how-other" class="side-label">Other...</label>
    
    <div class="how-other-disclosure">
      <label for="how-other-explain" class="top-label">Please explain</label>
      <textarea id="how-other-explain"></textarea>
    </div>
  </section>
  <section>
    <input id="permitted" type="checkbox">
    <label for="permitted" class="side-label">I am legally permitted to submit forms</label>
    <div class="blocked">(you have to check the checkbox to continue)</div>
    <button>Submit</button>
  </section>
</div>


@import url(http://fonts.googleapis.com/css?family=Noto+Sans:400,700);

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 20px;
  color: #435757;
  background:
    linear-gradient(40deg, transparent 40%, #9ab593),
    linear-gradient(-40deg, #ba7461 20%, #593e4e 90%);
  font: 1.2em/1 'Noto Sans', sans-serif;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 10px 20px 40px;
  color: #fff;
  background-color: rgba(0, 0, 0, .6);
}

h1 {
  margin: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid #fff;
  line-height: 1.2;
  font-size: 2.2em;
  font-weight: normal;
}

h1 span {
  font-size: .7em;
}

section {
  margin-top: 30px;
}

section::after {
  content: '';
  display: block;
  clear: both;
}

.top-label {
  display: block;
  margin: 10px 0;
}

input[type="email"], textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  border: none;
  color: #593e4e;
  background-color: #fff;
  font-family: inherit;
  font-size: inherit;
  appearance: none;
}

input[type="email"]:focus, textarea:focus, button:focus {
  outline: 2px solid #9ab593;
}

textarea {
  height: 100px;
}

input[type="checkbox"], input[type="radio"] {
  position: absolute;
  left: -9999px;
}

.side-label {
  display: block;
  position: relative;
  margin: 10px 0;
  padding-left: 35px;
  cursor: pointer;
}

.side-label::before, .side-label::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

input[type="radio"] + .side-label::before,
input[type="radio"] + .side-label::after {
  border-radius: 50%;
}

.side-label::before {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;  
}

input:focus + .side-label::before {
  border-color: #9ab593;
}

.side-label::after {
  display: none;
  width: 12px;
  height: 12px;
  margin: 4px;
  background-color: #9ab593;
}

input:checked + .side-label::after {
  display: block;
}

.how-other-disclosure {
  display: none;
  margin: 10px 0 0 35px;
}

#how-other:checked ~ .how-other-disclosure {
  display: block;
}

.blocked {
  margin-top: 40px;
  color: rgba(255, 255, 255, .3);
  text-align: center;
}

button {
  display: none;
  appearance: none;
  margin: 40px auto 0;
  padding: 5px 40px;
  border: 2px solid #fff;
  color: rgba(0, 0, 0, .8);
  background-color: #9ab593;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  cursor: pointer;
}

#permitted:checked ~ .blocked {
  display: none;
}

#permitted:checked ~ button {
  display: block;
}

48 - FORMULAIRE DE MODIFICATION DES DROITS CHMOD DES FICHIERS ET DOSSIERS

<?php
/*
FORMULAIRE DE MODIFICATION DES DROITS CHMOD DES FICHIERS ET DOSSIERS
Enregistrez ce fichier dans votre répertoire hébergement web, ouvrez-le 
avec votre navigateur et suivez les instructions.
Un rapport d'erreur est fourni.
*/

// initialisation des variables
$dosPerm = "0";
$ficPerm = "0";
$retval = "0"; // nombre d'erreurs CHMOD

 // Chemin du dossier a traiter
    $chem = preg_replace("/[^_A-Za-z0-9-\.%\/]/i",'', $_POST["chemin"]);    // chemin de fichier absolu (avec nettoyage contre piratage)
    $chem = preg_replace("/\.\.\//",'', $chem);    // on interdit la commande ../
    define('ABSPATH', dirname(__FILE__));
    $chem = ABSPATH.$chem;    // chemin de fichier absolu de votre compte du genre /home/loginftp/www/ ou /home/loginftp/public_html/ etc.

//Droits des dossiers
    $d1 = preg_replace("/[^057]/",'', $_POST["dir1"]);
    $d2 = preg_replace("/[^057]/",'', $_POST["dir2"]);
    $d3 = preg_replace("/[^057]/",'', $_POST["dir3"]);
    $dosPerm = "0".$d1.$d2.$d3;
    $dosPerm = octdec($dosPerm);
//droits des fichiers
    $f1 = preg_replace("/[^046]/i",'', $_POST["fic1"]);
    $f2 = preg_replace("/[^046]/i",'', $_POST["fic2"]);
    $f3 = preg_replace("/[^046]/i",'', $_POST["fic3"]);
    $ficPerm = "0".$f1.$f2.$f3;
    $ficPerm = octdec($ficPerm);

// Formulaire html pour changer les droits
    print "<html><meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />";
    print "<body><h3>Changer les droits d'acc&egrave;s CHMOD aux dossiers et fichiers <br />dans votre h&eacute;bergement.</h3>";
    print "<table><tr><td>";
    print "<form method=\"post\">";
    print "<tr><td>Droits des dossiers: </td>";
    print "<td><select name=\"dir1\"><option value=\"0\">0</option><option value=\"5\">5</option><option value=\"7\" selected>7</option></select><select name=\"dir2\"><option value=\"0\">0</option><option value=\"5\" selected>5</option><option value=\"7\">7</option></select><select name=\"dir3\"><option value=\"0\">0</option><option value=\"5\" selected>5</option><option value=\"7\">7</option></select></td></tr>";
    print "<tr><td>Droits des fichiers: </td>";
    print "<td><select name=\"fic1\"><option value=\"0\">0</option><option value=\"4\">4</option><option value=\"6\" selected>6</option></select><select name=\"fic2\"><option value=\"0\">0</option><option value=\"4\" selected>4</option><option value=\"6\">6</option></select><select name=\"fic3\"><option value=\"0\">0</option><option value=\"4\" selected>4</option><option value=\"6\">6</option></select></td></tr>";
    print "<tr><td>R&eacute;pertoire &agrave; contr&ocirc;ler: </td>";
    print "<td>".ABSPATH." <input type=\"text\" name=\"chemin\" maxlength=\"80\" size=\"30\" value=\"/\" ></td></tr>";
    print "<tr><td> </td><td><input type=\"submit\" value=\" Changer les CHMOD des Dossiers et Fichiers \">";
    print "</form>";
    print "</td></tr></table>";

if ( ($dosPerm||$ficPerm) > 0 ){

    function rChmod($chem,$dosPerm,$ficPerm) {
        echo "<p><b>Journal:</b></p>\r\n";

        $d = new RecursiveDirectoryIterator($chem); 
        $d ->setFlags(RecursiveDirectoryIterator::SKIP_DOTS); 
        foreach (new RecursiveIteratorIterator($d, 1) as $path) {
            $chmodret = false;
            $chmodresultat = "";
            if ( $path->isDir() ) {
            $chmodret = chmod( $path, $dosPerm ); }
            else {
            if ( is_file( $path )  ) {
            $chmodret = chmod( $path, $ficPerm ); }
            }
            if ($chmodret) {$chmodresultat = "OK"; }
            else {
                $chmodresultat = "ERREUR";
                ++$retval;
                }
            echo $chmodresultat . " " . $path . "<br />\r\n";
        }
    return $retval;
}
    $nbfailed = rChmod($chem,$dosPerm,$ficPerm);
    echo "<p><b>";
    if ($nbfailed > 0) {
        echo $nbfailed . " erreur(s) CHMOD. Voyez le journal ci-dessus.";
        }
    else echo "Pas d'erreur apparente. Vérifiez par vous-même.</b></p>\r\n";
}
?>

49 - Carrousel sans js

<div class="carousel">
   <div class="carousel-inner">
       <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked"/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/0079D8/fff/?text=Without">
       </div>
       <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/DA5930/fff/?text=JavaScript">
       </div>
       <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden=""/>
       <div class="carousel-item">
           <img src="http://fakeimg.pl/2000x800/F90/fff/?text=Carousel">
       </div>
       <label for="carousel-3" class="carousel-control prev control-1">‹</label>
       <label for="carousel-2" class="carousel-control next control-1">›</label>
       <label for="carousel-1" class="carousel-control prev control-2">‹</label>
       <label for="carousel-3" class="carousel-control next control-2">›</label>
       <label for="carousel-2" class="carousel-control prev control-3">‹</label>
       <label for="carousel-1" class="carousel-control next control-3">›</label>
       <ol class="carousel-indicators">
           <li>
               <label for="carousel-1" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-2" class="carousel-bullet">•</label>
           </li>
           <li>
               <label for="carousel-3" class="carousel-bullet">•</label>
           </li>
       </ol>
   </div>
</div>


<style>html, body {
   margin: 0px;
   padding: 0px;
   background: url("http://digital.bnint.com/filelib/s9/photos/white_wood_4500x3000_lo_res.jpg");
}

.carousel {
   position: relative;
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
   margin-top: 26px;
}

.carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
}

.carousel-open:checked + .carousel-item {
   position: static;
   opacity: 100;
}

.carousel-item {
   position: absolute;
   opacity: 0;
   -webkit-transition: opacity 0.6s ease-out;
   transition: opacity 0.6s ease-out;
}

.carousel-item img {
   display: block;
   height: auto;
   max-width: 100%;
}

.carousel-control {
   background: rgba(0, 0, 0, 0.28);
   border-radius: 50%;
   color: #fff;
   cursor: pointer;
   display: none;
   font-size: 40px;
   height: 40px;
   line-height: 35px;
   position: absolute;
   top: 50%;
   -webkit-transform: translate(0, -50%);
   cursor: pointer;
   -ms-transform: translate(0, -50%);
   transform: translate(0, -50%);
   text-align: center;
   width: 40px;
   z-index: 10;
}

.carousel-control.prev {
   left: 2%;
}

.carousel-control.next {
   right: 2%;
}

.carousel-control:hover {
   background: rgba(0, 0, 0, 0.8);
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3 {
   display: block;
}

.carousel-indicators {
   list-style: none;
   margin: 0;
   padding: 0;
   position: absolute;
   bottom: 2%;
   left: 0;
   right: 0;
   text-align: center;
   z-index: 10;
}

.carousel-indicators li {
   display: inline-block;
   margin: 0 5px;
}

.carousel-bullet {
   color: #fff;
   cursor: pointer;
   display: block;
   font-size: 35px;
}

.carousel-bullet:hover {
   color: #aaaaaa;
}

#carousel-1:checked ~ .control-1 ~ .carousel-indicators li:nth-child(1) .carousel-bullet,
#carousel-2:checked ~ .control-2 ~ .carousel-indicators li:nth-child(2) .carousel-bullet,
#carousel-3:checked ~ .control-3 ~ .carousel-indicators li:nth-child(3) .carousel-bullet {
   color: #428bca;
}

#title {
   width: 100%;
   position: absolute;
   padding: 0px;
   margin: 0px auto;
   text-align: center;
   font-size: 27px;
   color: rgba(255, 255, 255, 1);
   font-family: 'Open Sans', sans-serif;
   z-index: 9999;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
}
</style>

50 - Forcer l'affichage des erreurs

<?php
  error_reporting(E_ERROR | E_WARNING | E_PARSE);
  ini_set('display_errors', true);
  ini_set('display_startup_errors', TRUE);
?>

51 - Strip_cars

function strip_tags(input, allowed) {
				//http://phpjs.org/functions/strip_tags/
				allowed = (((allowed || '') + '')
				.toLowerCase()
				.match(/<[a-z][a-z0-9]*>/g) || [])
				.join(''); // making sure the allowed arg is a string containing only tags in lowercase (<a><b><c>)
				var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi,
				commentsAndPhpTags = /<!--[\s\S]*?-->|<\?(?:php)?[\s\S]*?\?>/gi;
				return input.replace(commentsAndPhpTags, '')
				.replace(tags, function($0, $1) {
				  return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
				});
			}

52 - inclure un fichier contenu dans le dossier du thème

<?php include(PLX_ROOT.$plxMotor->aConf['racine_themes'].$plxMotor->style.'/php/monfichier.php') ?>

53 - inclure une page statique (dans la sidebar ou ailleurs)

<?php $plxShow->staticInclude('002') ?>

54 - un fallback à svg (utilisable ailleurs)

<img src="logo.svg" onerror="this.src = 'logo.png';" alt="logo" width="140" height="140"/>

55 - Injecter javascript en asynchrone externe (non bloquant)

<!-- BAD: blocking external script -->
<script src="http://somehost.com/awesome-widget.js"></script>

<!-- GOOD: remote script is loaded asynchronously -->
<script>
    var script = document.createElement('script');
    script.src = "http://somehost.com/awesome-widget.js";
    document.getElementsByTagName('head')[0].appendChild(script);
</script>

<!-- GOOD: modern, simpler, faster, and better all around  -->
<script src="http://somehost.com/awesome-widget.js" async></script>

56 - International box-sizing Awareness Day | CSS-Tricks


*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

57 - clearfix

/*appliquer au div contenant des flottants*/
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

58 - menu contextuel html5

<section contextmenu="mymenu">
<p>Yes, this section right here</p>
</section>

<menu type="context" id="mymenu">
  <menuitem label="Please do not steal our images" icon="img/forbidden.png"></menuitem>
  <menu label="Social Networks">
  <menuitem label="Share on Facebook" onclick="window.location.href = 'http://facebook.com/sharer/sharer.php?u=' + window.location.href;">   </menuitem>
  </menu>
</menu>

59 - html - Select removing dropdown arrow - Stack Overflow

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

60 - Centrage vertical en 3 lignes

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.element p {
  @include vertical-align;
}

61 - jouer un son via js

var snd = new Audio("beep.wav");
snd.play();

62 - afficher variables, fonctions et constantes déclarées

//afficher toutes les variables déclarées
exit('<pre>' . htmlspecialchars(print_r(get_defined_vars(), true)) . '</pre>');
//afficher toutes les constantes déclarées
exit('<pre>' . htmlspecialchars(print_r(get_defined_constants(), true)) . '</pre>');
//afficher toutes les fonctions déclarées
exit('<pre>' . htmlspecialchars(print_r(get_defined_functions(), true)) . '</pre>');

63 - Se passer de Jquery

Évènements

// jQuery
$(document).ready(function() {
  // code
})

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
  // code
})
// jQuery
$('a').click(function() {
  // code…
})

// Vanilla
[].forEach.call(document.querySelectorAll('a'), function(el) {
  el.addEventListener('click', function() {
    // code…
  })
})
Sélecteurs

// jQuery
var divs = $('div')

// Vanilla
var divs = document.querySelectorAll('div')
// jQuery
var newDiv = $('<div/>')

// Vanilla
var newDiv = document.createElement('div')
Attributs

// jQuery
$('img').filter(':first').attr('alt', 'My image')

// Vanilla
document.querySelector('img').setAttribute('alt', 'My image')
Classes

// jQuery
newDiv.addClass('foo')

// Vanilla
newDiv.classList.add('foo')
// jQuery
newDiv.toggleClass('foo')

// Vanilla
newDiv.classList.toggle('foo')
Manipulation

// jQuery
$('body').append($('<p/>'))

// Vanilla
document.body.appendChild(document.createElement('p'))
// jQuery
var clonedElement = $('#about').clone()

// Vanilla
var clonedElement = document.getElementById('about').cloneNode(true)
// jQuery
$('#wrap').empty()

// Vanilla
var wrap = document.getElementById('wrap')
while(wrap.firstChild) wrap.removeChild(wrap.firstChild)
Navigation

// jQuery
var parent = $('#about').parent()

// Vanilla
var parent = document.getElementById('about').parentNode
// jQuery
if($('#wrap').is(':empty'))

// Vanilla
if(!document.getElementById('wrap').hasChildNodes())
// jQuery
var nextElement = $('#wrap').next()

// Vanilla
var nextElement = document.getElementById('wrap').nextSibling
AJAX

GET

// jQuery
$.get('//example.com', function (data) {
  // code
})

// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  // code
}
httpRequest.open('GET', url)
httpRequest.send()
POST

// jQuery
$.post('//example.com', { username: username }, function (data) {
  // code
})

// Vanilla
var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
  // code
}
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
httpRequest.open('POST', url)
httpRequest.send('username=' + encodeURIComponent(username))
JSONP

// jQuery
$.getJSON('//openexchangerates.org/latest.json?callback=?', function (data) {
  // code
})

// Vanilla
function success(data) {
  // code
}
var scr = document.createElement('script')
scr.src = '//openexchangerates.org/latest.json?callback=formatCurrency'
document.body.appendChild(scr)

64 - Formulaires: noms pour tableaux multidimensionnels

    echo '<input type="hidden" name="devoirs['.$key.'][titre]" value="'.$devoir['titre'].'"/>'.$r;
    echo '<input type="hidden" name="devoirs['.$key.'][date]" value="'.$devoir['date'].'"/>'.$r;
    echo '<input type="hidden" name="devoirs['.$key.'][note_globale]" value="'.$devoir['note_globale'].'"/>'.$r;

65 - recuperer l'extension d'un fichier

$extension=pathinfo($dir,PATHINFO_EXTENSION);

66 - Lister les articles des catégories actives

<ul>
    <?php ob_start();
	$plxShow->catList('',"
	<li><a id=\"toggler-#cat_id\" href=\"#cat_url\" onclick=\"toggleDiv('cat-#cat_id','toggler-#cat_id','+ #cat_name','- #cat_name');return false;\" title=\"#cat_name\">+ #cat_name</a> (#art_nb)
		<ul id=\"cat-#cat_id\" class=\"hide\">
			[#cat_id]
		</ul>   
	</li>");
	$list = ob_get_clean();
	preg_match_all('!\[([a-zA-Z0-9-_])*\]!',$list,$match);
	$art = array();
	foreach ($match[1] as $key => $value) {
		ob_start();
		$plxShow->lastArtList('<li><a href="#art_url">#art_title</a> (#art_nbcoms)</li>', 5, $value,'');
		$art[$key] = ob_get_clean();
	}
	foreach ($match[0] as $key => $value) {
		$list = str_replace(array('&#039;',$value),array('\'',$art[$key]),$list);
	}
	              echo $list;				
?>

</ul>

67 - bug overflow:hidden sous firefox

ajouter overflow: -moz-hidden-unscrollable; et ça fonctionne...

68 - makeRSSdate

// Rendre une date (format anglais) en date valide pour un flux RSS

function makeRSSdate($date=NULL){// format DD-MM-YY HH:MM => rfc2822 (rss compatible)
	if ($date){
		date_default_timezone_set('Europe/Paris');
		$time = strtotime($date);
		return date("r", $time);
	}
}

69 - secure - sécuriser une chaine ou un tableau contre le XSS

function secure($var,$level=0){
    // $level=0 > returns text only (no html or script), 1 > text + html (no script), 2 > all content secured with entities
    if (is_array($var)){foreach ($var as $index=>$v){$var[$index]=secure($v,$level);}}
    else if (is_string($var)){
        if ($level==0){$var=strip_tags($var);}
        else if ($level==1){$var=preg_replace('#on[a-z]+ ?= ?["\'].*?["\'](?=[ />])|</?script>|javascript:#i','',$var);}
        else {$var=htmlspecialchars($var);}
    }
    return $var;
}

70 - return_UTF8

function return_UTF8($chaine){
	$utf8=str_replace("\xef\xbb\xbf", '',utf8_encode($chaine));// SANS BOM !!!!
	if (strpos($utf8,'Ã')){return $chaine;}else {return $utf8;}// bon, là, on peut sans AUCUN doute mieux faire ^^
}

71 - Autoresize vertical d'un textarea

<script>
	function redimtextareas(obj){
		obj.style.height='500px'; 
		obj.style.height = obj.scrollHeight + 20 + 'px';
	}
</script>

html:
<textarea name="nom" onFocus="redimtextarea(this);" onKeydown="redimtextarea(this);"></textarea>

css:
textarea{overflow:hidden; /* éviter les scrollbars*/}

72 - BodyClasses

# Renvoie un attribut class complet (navigateur navigateur+version nom de la page sans extension)
# ex class="Firefox Firefox23 index" 
# utile pour apporter des corrections de style en fonction de la page et de la version du navigateur
# On peut ajouter ses propres classes via cette fonction: BodyClasses('maclasse'); 
function BodyClasses($other_classes=''){    
        $regex='#(msie)[/ ]([0-9])+|(firefox)/([0-9])+|(chrome)/([0-9])+|(opera)/([0-9]+)|(safari)/([0-9]+)|(android)|(iphone)|(ipad)|(blackberry)|(Windows Phone)|(symbian)|(mobile)|(bada])#i';
        preg_match($regex,$_SERVER['HTTP_USER_AGENT'],$resultat);          
        echo ' class="'.preg_replace('#([a-zA-Z ]+)[ /]([0-9]+)#','$1 $1$2',$resultat[0]).' '.basename($_SERVER['PHP_SELF'],'.php').' '.$other_classes.'" ';     
}

73 - file_curl_contents

// récupérer un fichier distant avec retour false si inexistant
function file_curl_contents($url){
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER,  FALSE);     
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);     
	curl_setopt($ch, CURLOPT_URL, $url);     
	if (!ini_get("safe_mode") && !ini_get('open_basedir') ) {curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);}    
	curl_setopt($ch, CURLOPT_MAXREDIRS, 10); 
	curl_setopt($ch, CURLOPT_REFERER, 'http://oudanstoncul.free.fr');// notez le referer "custom"
	$data = curl_exec($ch);     
	curl_close($ch);     
	return $data; 
}  
  
// on peut l'utiliser comme suit:
// if ($contenu=file_curl_contents('http://adresse.com/fichier.txt')){echo $contenu;}else{echo "le fichier n'existe pas!";}

74 - calcul de tailles pour galerie aux tailles d'image optimisée

viewport_width = $(window).width()
ideal_height = parseInt($(window).height() / 2)
summed_width = photos.reduce ((sum, p) -> sum += p.get('aspect_ratio') * ideal_height), 0
rows = Math.round(summed_width / viewport_width)
 
if rows < 1
  # (2a) Fallback to just standard size 
  photos.each (photo) -> photo.view.resize parseInt(ideal_height * photo.get('aspect_ratio')), ideal_height
else
  # (2b) Distribute photos over rows using the aspect ratio as weight
  weights = photos.map (p) -> parseInt(p.get('aspect_ratio') * 100)
  partition = linear_partition(weights, rows)

  # (3) Iterate through partition
  index = 0
  row_buffer = new Backbone.Collection
  _.each partition, (row) ->
    row_buffer.reset()
    _.each row, -> row_buffer.add(photos.at(index++))
    summed_ratios = row_buffer.reduce ((sum, p) -> sum += p.get('aspect_ratio')), 0
    row_buffer.each (photo) -> photo.view.resize parseInt(viewport_width / summed_ratios * photo.get('aspect_ratio')), parseInt(viewport_width / summed_ratios)

75 - Absolute Horizontal And Vertical Centering In CSS | Smashing Coding



.Absolute-Center {
  height: 100px; width:100px; /* width et height fixés */
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* dans un container */
.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* centré dans le viewport*/
.Absolute-Center.is-Fixed {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 999;
}

/* version responsive */
.Absolute-Center.is-Responsive {
  width: 60%; 
  height: 60%;
  min-width: 400px;
  max-width: 500px;
  padding: 40px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* sur la droite */
.Absolute-Center.is-Right {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: auto; bottom: 0; right: 20px;
  text-align: right;
}

/* avec overflow */
.Absolute-Center.is-Overflow {
  width: 50%;
  height: 300px;
  max-height: 100%;
  margin: auto;
  overflow: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* pour les images */
.Absolute-Center.is-Image {
  width: 50%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}


/* utiliser max-height pour avoir une height variable (pas pour ie <9) */
.Absolute-Center.is-Variable {
  display: table;
  width: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* avecmarges négatives (pas responsive)*/ 
.is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
      

/* via les css3 et transform */
.is-Transformed { 
	width: 50%;
	margin: auto;
	position: absolute;
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}
      

transform

translate(-50%,-50%)

<div class="Pos-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    &lt!-- CONTENT -->
    </div>
  </div>
</div>
      

.Pos-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}
      
/* grâce à flexbox */
.Pos-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}

76 - Font Stacks | CSS-Tricks

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

77 - Charger du contenu dans un select dynamiquement

$(function(){
  $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
      var options = '';
      for (var i = 0; i < j.length; i++) {
        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
      }
      $("select#ctlPerson").html(options);
    })
  })
})

78 - Disable la touche ENTER dans un form

$("#form").keypress(function(e) {
  if (e.which == 13) {
    return false;
  }
});

79 - Png fix pour ie6

$('.pngfix').each( function() {
   $(this).attr('writing-mode', 'tb-rl');
   $(this).css('background-image', 'none');
   $(this).css( 'filter', 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="path/to/image.png",sizingMethod="scale")');
});

80 - Egaliser les height de plusieurs divs

var maxHeight = 0;

$("div").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$("div").height(maxHeight);

81 - variables dynamiques (dont le nom est une variable)

(via HollandaisVolant)

Faire des variables dynamiques en JS.
 Un trop dont je ne me sert jamais, mais là ouais.
 
 // En gros, si t’as ça :
 var variable = 'machin';
 var machin = document.getElementById('id');
 
 // on peut faire :
 eval(variable).style.display = 'block';
 
 // variable contient « machin ».
 // en faisant le eval(), c’est comme si le contenu de "variable" devenait une variable. Ici, donc, le #id aura comme display un « block ».
 // Pratique si on n’a pas envie de faire un « getElementById » pour 50 blocs à la fois, mais qu’on peut écrire dans un boucle avec ça.
 
 Ça existe aussi en PHP :
 $var = nombre;
 $nombre = 137;
 $$var = 42;

82 - centrer un élément dont on connait la taille (marges negatives)

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

* html .centered { position:absolute }

margin: 20px auto;

83 - Centering Percentage Width/Height Elements | CSS-Tricks

translate()

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);
  
  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;


position: absolute;
top: 0;
right: 0;
bottom: 0;
left:  0;
margin: auto;
width: 40%;
height: 50%;


position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;

84 - bloquer la diffusion des erreurs et réagir (même les fatales)

ini_set('display_errors', '0');         
register_shutdown_function('shutdown');
function shutdown() 
{ 
       $error = error_get_last();
       if ($error['type'] === E_ERROR) {

      //do your shutdown stuff here
      //be care full do not call any other function from within shutdown function
      //as php may not wait until that function finishes
      //its a strange behavior. During testing I realized that if function is called 
      //from here that function may or may not finish and code below that function
      //call may or may not get executed. every time I had a different result. 

      // e.g.

      other_function();

      //code below this function may not get executed

       } 

}

85 - Stopper la propagation d'un évènement aux enfants

// on ajoute .children().click(function(){return false;}); à la fin de l'action prévue dans le callback du click

$("nav .add_feed, nav .add_tab").click(function(){
	$(this).toggleClass('width_auto').children().click(function(){return false;}); 
});

86 - capturer un évènement sur un objet créé après chargement

$(document).on("click", "a", function(){ 
// capturer un evenement sur un objet cree apres chargement
    
 });

87 - Colonnes gérées avec Text-align: Justify

<ul id="Grid">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li class="break"></li>
</ul>

#Grid{
	text-align: justify;
	font-size: 0.1px; /*hide whitespace between elements*/
}

#Grid li{
	display: inline-block;
	width: 23%;
	font-size:20px;
}

#Grid .break{
	width: 100%;
	height: 0;
}

#Grid:after{
	content: '';
	display: inline-block;
	width: 100%;
}
/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 800px){
  #Grid li{
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 600px){
  #Grid li{
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 400px){
  #Grid li{
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}

88 - css si un input contient quelque-chose

#q:hover, #q:focus, #q:not([value=""]) {width: 200px;}
#q {width: 50px;}

89 - Gérer les débordements de texte & d'image

div{
// débordement
    word-wrap:break-word;
    overflow-wrap: break-word;

//césure
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    -ms-hyphens:auto;
}


img{
    max-width:100%;
    height:auto;
}

//pour ie8
.ie8 img{width:auto;}

90 - Forcer le viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
ou 
@viewport{
    width: device-width;
    zoom:1;
}

91 - add_protocol

function add_protocol($url,$protocol='http://'){if (preg_match('#^([ftphs]+://)([^ ]+)#',$url,$results){return $url;}else{return $protocol.$url;}}

92 - Recherche et récup d'infos via allocine: sans API !

<?php
$config=array(
	// Ces regexes pourront être corrigées facilement en cas de changement de la page allocine
	'query_string'=>'http://www.allocine.fr/recherche/1/?q=',
	'base_url'=>'http://www.allocine.fr/',
	'regex_get_links_results'=>'<td[^<]+<a href=["'](/film/fichefilm_gen_cfilm=[^'"]+)',
	'regex_url_image'=>'(http://fr.web.img[^"']+)|(http://images.allocine.fr/[^"']+)',
	'regex_url_image_capture_dim'=>'([a-z])_[0-9]+_[0-9]+',
	'regex_url_image_redim'=>'$1_640_400',
	'regex_get_titre'=>'"label":"([^^]+)","fanCount"', 
	'regex_get_genre'=>'itemprop="genre">([^<]+)', 
	'regex_get_description'=>'itemprop="description">([^<]+)', 
	'regex_get_note'=>'<span class="stars n([^"]+)',
	'regex_get_actors'=>'<span itemprop="name">([^<]+)',
);
function search2array($query){
	global $config;
	//charge la page de recherche d'allocine, retrouve les liens de résultat
	$query=$config['query_string'].str_replace(' ','+',$query);
	$search_page=file_get_contents($query);
	preg_match_all('#'.$config['regex_get_links_results'].'#', $search_page, $results);
	if (count($results[1])>0){return $results[1];}else{return false;}
}

function movielink2array($url){
	global $config;
	//charge la page de la fiche passée en lien, retourne les infos
	$page=file_get_contents($config['base_url'].$url);
	$verif=0;
	$verif+=preg_match('#'.$config['regex_get_titre'].'#', $page, $title);
	$verif+=preg_match('#'.$config['regex_get_genre'].'#', $page, $genre);
	$verif+=preg_match('#'.$config['regex_get_note'].'#', $page, $note);
	$verif+=preg_match('#'.$config['regex_get_description'].'#', $page, $description);
	$verif+=preg_match('#'.$config['regex_url_image'].'#', $page, $image);	
	$verif+=preg_match_all('#'.$config['regex_get_actors'].'#', $page, $actors);

	$image=preg_replace('#'.$config['regex_url_image_capture_dim'].'#',$config['regex_url_image_redim'],$image[0]);
	$result=array();
	$result['movie_actors']=implode(', ',$actors[1]);
	$result['movie_image']=$image;
	$result['movie_allocine_url']=$url;
	if(is_array($title)&&isset($title[1])){$result['movie_title']=$title[1];}else{$result['movie_title']='';}
	if(is_array($note)&&isset($note[1])){$result['movie_stars']=$note[1];}else{$result['movie_stars']=0;}
	if(is_array($genre)&&isset($genre[1])){$result['movie_type']=$genre[1];}else{$result['movie_type']='';}
	if(is_array($description)&&isset($description[1])){$result['movie_description']=$description[1];}else{$result['movie_description']='';}
	
	if (count($result)>0){return $result;}else{return false;}
}

function url_array2list($array=array(),$tpl='<ul><li><img src="movie_image"/></li><li>movie_title</li><li>movie_type</li><li>movie_stars</li><li>movie_actors</li><li>movie_description</li><li><a href="movie_allocine_url">On allocine</a></li></ul>'){
	$list='';
	foreach($array as $url){
		$page=movielink2array($url);

		$list.=str_replace(array_keys($page),array_values($page),$tpl);
	}
	return $list;
}

//ex:
echo url_array2list(search2array('heros'));

?>

93 - Détecter si une requête vient d'ajax

if(!emptyempty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){  
    //If AJAX Request Then  
}else{  
//something else  
}

94 - Récupérer les derniers Tweets

<?php // import & display latest tweet
$username = "perishable";
$feed = "http://search.twitter.com/search.atom?q=from:".$username."&rpp=2";
// $prefix = '<h3>Perishable Press</h3>';
// $suffix = '<p><a href="http://twitter.com/'.$username.'">Follow me on Twitter</a>';
function parse_feed($feed) {
    $stepOne = explode('<content type="html">', $feed);
    $stepTwo = explode('</content>', $stepOne[1]);
    $tweet = $stepTwo[0];
    $tweet = str_replace("<", "<", $tweet);
    $tweet = str_replace(">", ">", $tweet);
    return $tweet;
}
$latest_tweet = file_get_contents($feed);
// echo stripslashes($prefix) . parse_feed($latest_tweet) . stripslashes($suffix);
echo parse_feed($latest_tweet);
?>

Results for astuce : 94