Laisser le pipeline visible pour surveiller le déploiement du blog
Une des choses qui me dérange chez Computaria c'est de ne pas pouvoir suivre le déploiement sur le blog lui-même. Alors, puisque cela me dérange, pourquoi ne pas y remédier ?
Le pipeline
Actuellement, il existe 2 façons de savoir si le déploiement est en cours :
- ouvrez le référentiel sur la page jobs/pipelines et voyez le dernier en cours d'exécution
- ouvrez dans le référentiel et faites défiler jusqu'à README.md
Les deux solutions ne me semblent pas géniales. J'aimerais quelque chose de plus léger dans l'informatique elle-même.
L'idée
Après une brève consultation avec Kauê, j'ai décidé de suivre son conseil : publier sur /about.
Dans la première expérience :
Non, c'est devenu moche. Je sais déjà que je ne veux pas que cela apparaisse par défaut. Mais il suffit d'apporter l'information. J'ai juste besoin de cacher ce qui est laid et de le rendre disponible même s'il est laid si cela est explicitement demandé.
Preuve de concept : plante, sauf indication contraire
Eh bien, la première chose à faire est de savoir si nous devons prendre des mesures. À cette fin, la présence du paramètre de requête status avec la valeur true a été définie comme une API.
Pour obtenir l'URL, j'ai utilisé window.location. À l'intérieur de l'objet Location se trouve le champ de recherche, qui sert précisément à conserver les paramètres de requête utilisés pour accéder à l'URL spécifique.
Par exemple, pour http://localhost:4000/blog/about?q=1, la valeur de window.location.search est ?q=1. Pour faciliter la gestion du contenu dans les paramètres de requête, il existe un objet de type URLSearchParams. D'après ce que j'ai pu comprendre à partir de la documentation, pour instancier URLSearchParams, j'ai besoin de la chaîne de requête mais sans le ? du préfixe. Je peux y parvenir avec window.location.search.substring(1).
Maintenant, avec cet objet en main, je peux simplement consulter la valeur de n'importe quel paramètre de requête que je souhaite :
const queryParams = new URLSearchParams(window.location.search.substring(1));
if (queryParams.get("status") === "true") {
console.log("oba, vamos exibir o pipeline!")
} else {
console.log("nops, não vamos exibir nada")
}
Avec cela en main, je dois prendre les mesures nécessaires pour afficher le badge du pipeline. Par souci de simplicité, j'ai décidé de le mettre sous forme d'extrait HTML incluable : _includes/pipeline.html. J'ai donc du HTML gratuit à manipuler comme bon me semble.
Au début, c'était simplement un
<div>
<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>
<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
const queryParams = new URLSearchParams(window.location.search.substring(1));
if (queryParams.get("status") === "true") {
console.log("oba, vamos exibir o pipeline!")
} else {
console.log("nops, não vamos exibir nada")
}
</script>
<div>
<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>
<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")
if (...) {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
Placement dans le fragment HTML :
<script>
const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")
if (queryParams.get("status") === "true") {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
</script>
<div>
<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.
<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>
<pre class="brush:php;toolbar:false"><script src="{{ "/js/pipeline-loader.js" | prepend: site.baseurl }}" defer>
</script>
<div>
<p>E no script:<br>
</p>
<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")
if (queryParams.get("status") === "true") {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
Super, faisons quelque chose d'utile et publions l'image ? Pour créer dynamiquement un élément, utilisez simplement document.createElement. Ensuite je mets l'URL du badge :
const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")
if (queryParams.get("status") === "true") {
pipeline.style.display = "block"
const pipelineImg = document.createElement("img")
pipelineImg.src = "{{site.repository.base}}/badges/master/pipeline.svg"
pipeline.appendChild(pipelineImg)
} else {
pipeline.remove()
}
Mais il affichait une image cassée... hmmm, quel est le message affiché sur la console ?
GET http://localhost:4000/blog/about/{{site.repository.base}}/badges/master/pipeline.svg [HTTP/1.1 404 Not Found 4ms]
Étrange, aurait-il dû obtenir la jolie URL du référentiel ? Oh, j'ai remarqué. Il n'a pas du tout traité Liquid. Pour résoudre ce problème, j'ai décidé de suivre l'exemple de css/main.scss, un texte vide.
const queryParams = new URLSearchParams(window.location.search.substring(1));
if (queryParams.get("status") === "true") {
console.log("oba, vamos exibir o pipeline!")
} else {
console.log("nops, não vamos exibir nada")
}
Cela donne un message d'erreur car le frontmatter n'est pas javascript et l'erreur est affichée dans la première const. Puisque cela me dérange, la façon la plus directe à laquelle j'ai pensé de résoudre ce problème était de créer une "erreur inoffensive" plus tôt. J'ai ajouté un ; juste après le début :
<div>
<p>Para importar, no /about só precisei colocar {%include pipeline.html%} no começo do arquivo, o Jekyll se encarregou de montar tudo certo.</p>
<p>Ok, vamos por o script para detectar se deveria ou não exibir a tag:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
const queryParams = new URLSearchParams(window.location.search.substring(1));
if (queryParams.get("status") === "true") {
console.log("oba, vamos exibir o pipeline!")
} else {
console.log("nops, não vamos exibir nada")
}
</script>
<div>
<p>So far, so good. Agora, vamos mudar a exibição para display: block caso seja para exibir o pipeline, ou sumir logo de uma vez com a <div>. Pelo console da web, bastaria fazer algo nesse esquema:<br>
</p>
<pre class="brush:php;toolbar:false">const pipeline = document.getElementById("pipeline")
if (...) {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
Des désagréments...
En poursuivant les tests, j'ai remarqué qu'un 308 apparaissait constamment dans l'onglet réseau. Mais pourquoi est-il apparu ? Eh bien, parce qu'en développant Liquid, cela s'est retrouvé avec une double barre avant les badges.
J'ai initialement eu ceci :
- https://gitlab.com/computaria/blog//badges/master/pipeline.svg
Avec redirection vers :
- https://gitlab.com/computaria/blog/badges/master/pipeline.svg
Et cela a commencé à me déranger lorsque j'ai analysé si j'utilisais le cache ou non. Pour résoudre ce problème, je devrais me débarrasser de la double barre oblique. Je pourrais simplement m'en débarrasser en ne mettant pas la barre oblique juste après l'expansion de la valeur Liquid, car après tout je pourrais savoir a priori que la chaîne {{site.repository.base}} se terminait par /. Mais, juste au cas où, cela ne ferait pas de mal de mettre cette barre oblique avant /badges/master/pipeline.svg, c'est même un indicateur pour moi en tant que lecteur.
Mais comme je ne veux pas me fier à une connaissance préalable pour savoir si cette barre existe ou non, j'avais deux options pour cela :
- traitez le niveau d'expansion du liquide pour retirer la barre oblique du terminal
- gérer la création de cette chaîne au niveau javascript
Le côté JavaScript m'a paru plus simple. Alors remplacez simplement // par /, n'est-ce pas ? Hum, non. Étant donné que le protocole apparaît avant ://, le simple fait d'effectuer cette substitution grossière entraînerait le début de l'URL comme ceci : https:/computaria.gitlab.io. Pour contourner ce problème, je fais la substitution suivante :
<script>
const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")
if (queryParams.get("status") === "true") {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
</script>
<div>
<p>E... falhou. Por quê? Porque no momento que a função rodar ainda não tem definido quem é o elemento com id pipeline. Então preciso mudar o ciclo de vida para rodar o script apenas quando a página for carregada. Basta colocar o <script defer>, certo? Bem, não. Porque defer não funciona bem com inline, apenas com arquivo de source explícito. Veja a documentação.
<p>Ou seja, precisei colocar o arquivo JavaScript explicitamente para o Computaria. Como a priori tudo que está solto na pasta do blog é colocado como asset disponível para o Jekyll publicar, criei o js/pipeline-loader.js:<br>
</p>
<pre class="brush:php;toolbar:false"><script src="{{ "/js/pipeline-loader.js" | prepend: site.baseurl }}" defer>
</script>
<div>
<p>E no script:<br>
</p>
<pre class="brush:php;toolbar:false">const queryParams = new URLSearchParams(window.location.search.substring(1));
const pipeline = document.getElementById("pipeline")
if (queryParams.get("status") === "true") {
pipeline.style.display = "block"
} else {
pipeline.remove()
}
Décomposition :
- à la place du remplacement, mettre ce qui a été trouvé dans le "premier groupe" suivi d'une barre oblique
- matchs regex : tout autre chose que : (dans un groupe), slash, slash
Avec ce changement, https:// n'a pas de correspondance avec ([^:])//, mais toutes les autres occurrences de // dans le chemin ont une correspondance parfaite, car elles ne le seront pas être devant un :. Pour être plus strict, je pourrais travailler pour empêcher la correspondance de se produire dans le paramètre/fragment de requête, mais cela semblait trop exagéré.
Preuve de concept : chargement sans cache
Ok, après avoir défini les détails de l'endroit où le placer et du mécanisme de verrouillage, nous avons besoin d'un mécanisme de rechargement. Première tentative : créez simplement un nouvel élément d’image. Mais quand même, comment ? L'idéal serait "après un certain temps". Cela me donne donc deux options, enfin dire :
- setTimeout
- setInterval
D'accord, allons-y, qu'est-ce que ça fait ? setTimeout reçoit une commande qui sera exécutée après un intervalle de temps ET également l'intervalle donné. Il vous renvoie un identifiant que vous pouvez supprimer à l'aide de clearTimeout. Pour répéter l'appel, setTimeout doit être rappelé à la fin.
setInterval est presque la même chose, sauf qu'il exécutera toujours la commande après l'intervalle de temps. Le retour doit être un identifiant que vous appelleriez clearInterval pour supprimer, mais selon la documentation, il fonctionne également avec clearTimeout (juste au cas où, ne lui faites pas confiance, utilisez celui avec la sémantique correcte).
Utilisation de setTimeout
Devrions-nous créer un appel en boucle avec setTimeout ? Que diriez-vous d’imprimer 5 fois le mot citrouille dans un champ de texte ? Je vais mettre une zone de texte pour cette expérience :
const queryParams = new URLSearchParams(window.location.search.substring(1));
if (queryParams.get("status") === "true") {
console.log("oba, vamos exibir o pipeline!")
} else {
console.log("nops, não vamos exibir nada")
}
Ok, j'ai 3 fonctions que j'aimerais rendre accessibles en HTML. Et ils divisent (même si très légèrement) un État. J'adore cacher des choses, donc je ne veux pas que cet état soit visible en dehors de la balise
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1653
14
1413
52
1306
25
1251
29
1224
24
Que dois-je faire si je rencontre l'impression de code brouillé pour les reçus en papier thermique frontal?
Apr 04, 2025 pm 02:42 PM
Des questions et des solutions fréquemment posées pour l'impression de billets thermiques frontaux pour le développement frontal, l'impression de billets est une exigence commune. Cependant, de nombreux développeurs mettent en œuvre ...
Démystifier javascript: ce qu'il fait et pourquoi c'est important
Apr 09, 2025 am 12:07 AM
JavaScript est la pierre angulaire du développement Web moderne, et ses principales fonctions incluent la programmation axée sur les événements, la génération de contenu dynamique et la programmation asynchrone. 1) La programmation axée sur les événements permet aux pages Web de changer dynamiquement en fonction des opérations utilisateur. 2) La génération de contenu dynamique permet d'ajuster le contenu de la page en fonction des conditions. 3) La programmation asynchrone garantit que l'interface utilisateur n'est pas bloquée. JavaScript est largement utilisé dans l'interaction Web, les applications à une page et le développement côté serveur, améliorant considérablement la flexibilité de l'expérience utilisateur et du développement multiplateforme.
Qui est payé plus de python ou de javascript?
Apr 04, 2025 am 12:09 AM
Il n'y a pas de salaire absolu pour les développeurs Python et JavaScript, selon les compétences et les besoins de l'industrie. 1. Python peut être davantage payé en science des données et en apprentissage automatique. 2. JavaScript a une grande demande dans le développement frontal et complet, et son salaire est également considérable. 3. Les facteurs d'influence comprennent l'expérience, la localisation géographique, la taille de l'entreprise et les compétences spécifiques.
Comment réaliser des effets de défilement de parallaxe et d'animation des éléments, comme le site officiel de Shiseido?
ou:
Comment pouvons-nous réaliser l'effet d'animation accompagné d'un défilement de page comme le site officiel de Shiseido?
Apr 04, 2025 pm 05:36 PM
La discussion sur la réalisation des effets de défilement de parallaxe et d'animation des éléments dans cet article explorera comment réaliser le site officiel de Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ...
L'évolution de JavaScript: tendances actuelles et perspectives d'avenir
Apr 10, 2025 am 09:33 AM
Les dernières tendances de JavaScript incluent la montée en puissance de TypeScript, la popularité des frameworks et bibliothèques modernes et l'application de WebAssembly. Les prospects futurs couvrent des systèmes de type plus puissants, le développement du JavaScript côté serveur, l'expansion de l'intelligence artificielle et de l'apprentissage automatique, et le potentiel de l'informatique IoT et Edge.
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en utilisant JavaScript?
Apr 04, 2025 pm 05:09 PM
Comment fusionner les éléments du tableau avec le même ID dans un seul objet en JavaScript? Lors du traitement des données, nous rencontrons souvent la nécessité d'avoir le même ID ...
Moteurs JavaScript: comparaison des implémentations
Apr 13, 2025 am 12:05 AM
Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.
Comment implémenter la fonction de glisser-déposer et de régler la fonction de réglage similaire à VScode dans le développement frontal?
Apr 04, 2025 pm 02:06 PM
Explorez la mise en œuvre de la fonction de glisser et de réglage du panneau de type VScode dans le frontal. Dans le développement frontal, comment implémenter un VScode comme ...
