-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (120 loc) · 9.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<meta lang="fr">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap ON-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!--Bootstrap OFF-->
<meta name="full-screen" content="yes">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" media="all" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<title>Tricks and Tips</title>
<!--Debut Gestion des icones de l'application-->
<link rel="icon" type="image/png" href="assets/pics/T_T.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/pics/favicon_package_v0.16/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/pics/favicon_package_v0.16/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/pics/favicon_package_v0.16/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="assets/pics/T_T.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/pics/favicon_package_v0.16/favicon-16x16.png">
<link rel="manifest" href="assets/pics/favicon_package_v0.16/site.webmanifest.json">
<script async src="https://cdn.jsdelivr.net/npm/pwacompat@2.0.9/pwacompat.min.js" integrity="sha384-VcI6S+HIsE80FVM1jgbd6WDFhzKYA0PecD/LcIyMQpT4fMJdijBh0I7Iblaacawc" crossorigin="anonymous"></script>
<link rel="mask-icon" href="assets/pics/favicon_package_v0.16/safari-pinned-tab.svg" color="#ff2800">
<link rel="apple-touch-startup-image" href="assets/pics/T_T.png" />
<meta name="apple-mobile-web-app-title" content="Tricks&Tips">
<meta name="application-name" content="Tricks&Tips">
<meta name="msapplication-TileColor" content="#1b1b1b">
<meta name="msapplication-TileImage" content="assets/pics/favicon_package_v0.16mstile-144x144.png">
<meta name="theme-color" content="#1b1b1b">
<!--Fin Gestion des icones de l'application-->
<meta name="author" content="Dzénetan Massart">
<meta name="keywords" content="HTML,CSS,Javascript,WordPress,documentation,générateur,bootstrap">
<!--Début gestion de l'embed pour Discord-->
<meta content="Tricks and Tips" property="og:title" />
<meta content="Répertoire de trucs et astuces à usage des devellopeurs web !" property="og:description" />
<meta content="https://dzenetanmassart.github.io/Tricks-and-Tips/" property="og:url" />
<meta content="assets/pics/favicon_package_v0.16/android-chrome-192x192.png" property="og:image" />
<meta content="#1b1b1b" data-react-helmet="true" name="theme-color" />
<!--Fin gestion de l'embed pour Discord-->
<meta name="description" content="Répertoire de trucs et astuces à usage des devellopeurs web !" />
</head>
<body style="overflow: auto;">
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a id="TOUT" class="nav-link" href="T_T.html# ">Tout </a>
</li>
<li class="nav-item">
<a id="HTML" class="nav-link" href="T_T.html#HTML" title="Afficher la documentation autour de HTML">HTML</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Afficher les options esthétiques: CSS,Bootstrap et WordPress">
Esthétique
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a id="CSS" class="dropdown-item" href="T_T.html#CSS" title="Afficher la documentation autour du CSS">CSS</a>
<a id="Bootstrap" class="dropdown-item" href="T_T.html#Bootstrap" title="Afficher la documentation autour de Bootstrap">Bootstrap</a>
<a id="WordPress" class="dropdown-item" href="T_T.html#WordPress" title="Afficher la documentation autour de WordPress">WordPress</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Afficher les options esthétiques: Javascript,React et PHP">
Programmation
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a id="JS" class="dropdown-item" href="T_T.html#Javascript" title="Afficher la documentation autour de Javascript">Javascript</a>
<a id="React" class="dropdown-item" href="T_T.html#React" title="Afficher la documentation autour de React">React</a>
<a id="PHP" class="dropdown-item" href="T_T.html#PHP" title="Afficher la documentation autour du PHP">PHP</a>
</div>
</li>
<li class="nav-item">
<a id="Gen" class="nav-link" href="T_T.html#GEN" title="Afficher la documentation intéractive et/ou génératrice">Générateurs & Documents</a>
</li>
</ul>
<div class="dropdown-divider"></div>
</div>
<form class="searcher form-inline">
<form class=" input-group bg-dark">
<select id="search_lang" class="custom-select-lg mr-sm-2 bg-dark text-white" label="search_lang">
<option selected>...</option>
<option value="javascript">Javascript</option>
<option value="php">PHP</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="wordpress">Extensions WordPress</option>
<option value="openclassroom">OpenClassroom</option>
</select>
<input class="form-control-lg mr-sm-2 bg-dark text-white" id="search_input" type="search" placeholder="Mot-Clé" aria-label="Search">
<button class="btn btn-dark" id="search_ok" type="submit"><i class="fas fa-search"></i></button>
</form>
</form>
</nav>
</header>
<main>
<h1>Tricks and Tips</h1>
<section class="presentation">
<h2>Présentation</h2>
<p>Créé par <a href="https://dzenetanmassart.github.io/" target="_blank" title="Le site de Dzénetan Massart">Dzénetan Massart<sup><i class="fas fa-external-link-alt"></i></sup></a> le 17 Février 2019 à <a href="https://becode.org/fr/" title="Le site de BeCode" target="_blank">la formation BeCode<sup><i class="fas fa-external-link-alt"></i></sup></a>.
<b>Tricks & Tips</b> sert à répertorier les applications et documentations autour du développement web.</p>
</section>
<section class="presentation">
<h2>Histoire de Tricks&Tips</h2>
<p>Au début, le répertoire était surtout un projet de génération de liste en Javascript mais il a été réussi assez rapidemment. La seule chose qui n'a jamais convenu est le visuel.</p>
<p>Sous base du schéma ci-dessous, Tricks and Tips (ou "T_T" ou "T&T") aura toujours évolué visuellement pour obtenir cette structure.</p>
<img src="assets\pics\visuTricksAndTipsBase.png" style="max-height:500px" class="mx-auto d-block shadow-sm p-4 mb-4 bg-white img-fluid" alt="Le visuel prévu de Tricks and Tips">
<p>Bien sur, l'emplois du <kbd>flex</kbd> et de ses composants fût le premier réflexe mais tout ce qui était gestion du <kbd>CSS</kbd> pour les badges colorés, la position de la mention "générateur" et le lien en tout petit fût une épreuve constante. On a eût pas moins de 4 designs différents depuis 2019 jusqu'à aujourd'hui.</p>
<p>Mais le visuel n'est pas tout seul à avoir évolué. La structure est passé d'une dizaine de page (une page par catégorie) à <a href="T_T.html" target="_blank" title="Vers Tricks and Tips">une page dynamique</a> ayant donc un système de filtre faisant appel à 2 fichiers Javascript (pour lister et générer).</p>
<p>Le projet "Tricks&Tips" est géré simultanément avec son équivalent ayant comme focus les logiciels en ligne : <a href="https://dzenetanmassart.github.io/MakeOnWeb/" target="_blank" title="Vers le site MakeOnWebsoft">MakeOnWebsoft</a></p>
<p>Dans le futur, le site web devrait être accessible sur un site web reprenant toute la production de <a href="https://dzenetanmassart.github.io/" target="_blank" title="Le site de Dzénetan Massart">Dzénetan Massart</a> afin de constituer un book de compétence.</p>
</section>
</main>
<script src="assets/js/search.js"></script>
</body>