SnippetVamp

Ne perds plus jamais de temps en cherchant tes snippets !

Bienvenue dans mon SnippetVamp.

1 - fonction de «bionic reading» 
const e = document.getElementById("edit"), r = document.getElementById("read");
const u = () => r.innerHTML = e.innerHTML.split(" ").map(w => `<b>${w.split("").slice(0,Math.ceil(w.length/2)).join("")}</b>${w.split("").slice(Math.ceil(w.length / 2),w.length).join("")} `).join(" ");
u();
e.addEventListener("input", u);

/* kodun orjinal halini de bırakayım da belki birinin işine yarar
const editor = document.getElementById("edit");
const reader = document.getElementById("read");

const updateContent = (e) => {
  const words = editor.innerHTML.split(" ");
  const edited = [];
  words.forEach((word, index) => {
    const wordSplit = word.split("");
    const boldTo = Math.ceil(word.length / 2);
    const editedWord = `<b>${wordSplit.slice(0,boldTo).join("")}</b>${wordSplit.slice(boldTo,word.length).join("")} `;
    edited.push(editedWord);
  });
  reader.innerHTML = edited.join("");
}

(() => {
  updateContent(); // init
  editor.addEventListener("input", updateContent);
})()
*/
3 - 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;
    }
}
4 - Vérifier la validité des liens ayant la classe «checkLink» 
# Vérifie les URL a/img etc ayant la classe checkLinks
# ou les URL des a/img contenus dans un objet ayant la classe checkLinks
# Ajoute une classe status200, status404 etc (en gros, «statusCODE_DE_REPONSE»

function checkLinks(nodelist){
	function checkUrl(link){
		return fetch(link).then(function(response){		
			return response.status;
		}).catch(function(error){
			return error.status;
		});
	}
	if (!nodelist){
		checkLinks(document.querySelectorAll('.checkLink'));
		return;
	}
	for (let obj of nodelist){
		if (obj.tagName=="A"){
			checkUrl(obj.href).then(function(response){obj.classList.add("status"+response);});
		}else if (obj.hasAttribute("src")){
			checkUrl(obj.src).then(function(response){obj.classList.add("status"+response);});
		}else{
			checkLinks(obj.querySelectorAll("*[href],*[src]"));
		}
	}
}
checkLinks();

# on peut styler les classes:
<style type="text/css">
	.status200{color:green}
	.status404{color:violet}
	.status500{color:red}
</style>
5 - arborescence en css uniquement 
 .tree {
  --spacing: 1.5rem;
  --radius: 10px;
  --marker-bg-default: #ddd;
  --marker-bg-haschild: #6b9abb;
  line-height: 2rem;
}
.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}
.tree ul li {
  border-left: 2px solid #ddd;
}
.tree ul li:last-child {
  border-color: transparent;
}
.tree ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}
.tree summary {
  display: block;
  cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}
.tree summary:focus {
  outline: none;
}
.tree summary:focus-visible {
  outline: 1px dotted #000;
}
.tree li::after,
.tree summary::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius) + 2px);
  left: calc(var(--spacing) - var(--radius) - 2px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: var(--marker-bg-default);
}
.tree summary::before {
  content: "+";
  z-index: 1;
  background: var(--marker-bg-haschild);
  color: #fff;
  line-height: calc(2 * var(--radius));
  text-align: center;
}
.tree details[open] > summary::before {
  content: "−";
}






<ul class="tree">
  <li>
    <details open>
      <summary>Informatique</summary>
      <ul>
        <li>
          <details>
            <summary>Périphériques</summary>
            <ul>
              <li>Clavier</li>
              <li>Souris</li>
              <li>Ecran</li>
            </ul>
          </details>
        </li>
        <li>
          <details open>
            <summary>Stockage</summary>
            <ul>
              <li>Disque dur</li>
              <li>SSD</li>
              <li>Clé USB</li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>
            </ul>
          </details>
        </li>
        <li>
          <details>
            <summary>Composants</summary>
            <ul>
              <li>Processeur</li>
              <li>Carte mère</li>
              <li>Mémoire</li>
              <li>Carte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
</code></pre> codeCarte graphique</li>
            </ul>
          </details>
        </li>
      </ul>
    </details>
  </li>
</ul>
6 - 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)
7 - touche de clavier en CSS 
<style type="text/css">
	key{
		display:inline-block;
		padding:0.5em;
		border:1px solid rgba(0,0,0,0.5);
		border-radius: 3px;
		box-shadow: 0 0.2em 0 0.05em #222;
		background: linear-gradient(180deg, rgba(150,150,150,1) 0%, rgba(240,240,240,1) 100%);;
	}
</style>

<key>Shift</key>+<key>B</key>
8 - ordonner un tableau en fonction de la longueur des chaines qui le composent 
function order($a,$b){
    return strlen($b)-strlen($a);
}
usort($mots,'order');
9 - 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>