DEV Community: Ludo Loops

Mes extensions Vs-code

Ludo Loops — Sat, 01 May 2021 12:33:22 +0000

Thème et visualisation

Aide de code

Visuel

Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
change le style d'affichages des pairs de Tags, avec pleins d'options pour le configurer à souhait

Better comments

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Todo tree

https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree
cherche les todo dans le code et les affiche dans son onglet dédié

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
Affiche un arc-en-ciel pour mieux voir les indentations

~~### Bracket pari colorizer 2~~
~~https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2~~
maintenant inclus dans vscode

Trailing spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
Affiche en rouge les espaces de fin

svg viewer

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer
Affiche les images svg

Turbo console log

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log
ajoute le raccourci ctl + alt +l pour faire des console.log rapide avec le numéro de la ligne

CodeSnap

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap
Permet de faire des images du code dans le presse-papier ou le sauvegarde sur le disque dur.

Genéral

Visual Studio IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
Intelligence artificiel aidant à coder

Angular essentials pack

https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
pack avec plusieurs extensions regroupé par John Papa

code spell checker

correcteur d'orthographe
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
dictionnaire français
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker-french

Css Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Affiche la propriété CSS, d'une classe HTML ou d'aller dans le fichier .CSS où il est définie

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
formate le code et l'indente automatiquement, une option existe pour formater automatique à la sauvegarde du fichier

Eslint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
intègre eslint dans vscode

tslint

linter pour typescript
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

IntelliSense for CSS class names in HTML

propose de nom de classe déjà utilisé dans le projet
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Live Sass Compiler

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
compile le SASS et génère le fichier CSS

Live Server

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
lance un serveur de développement pour des pages statique ou dynamique

npm

Indique si les paquets dans package.json sont bien installé
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script

npm intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
Autocomplétion dans la définition d'import de paquet dans les fichiers js

Snake Trail

https://marketplace.visualstudio.com/items?itemName=richie5um2.snake-trail
Affiche une couleur suivant le curseur aidant sa visibilité

Sql Server (mssql)

https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql
se connecte à une base de donné mssql, de microsoft Azure et l'affiche

Git

Git graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
Affiche les commits et les branches de Git

Git lens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
plusieurs outils pour git, dont la comparaison de fichier avec le précédent commit

Autres

Joplin-vscode-plugin

https://marketplace.visualstudio.com/items?itemName=rxliuli.joplin-vscode-plugin
Affiche nos notes Joplin dans vscode, il faut avoir la version bureau de Joplin et activer le web clipper (plus d'info dans la doc)

Discord pressence

https://marketplace.visualstudio.com/items?itemName=icrawl.discord-vscode
Affiche dans le status de discord le fichier édité dans vscode

Code time

https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode
Monitor le temps de passé à coder

WakaTime

https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime
idem que Code time

Music Time for Spotify

https://marketplace.visualstudio.com/items?itemName=softwaredotcom.music-time
- Contrôler spotify depuis vscode

Animation avec Scroll-out

Ludo Loops — Sun, 25 Apr 2021 22:00:23 +0000

Bonjour, je vais vous présenter la librairie JS: scroll-out permettant de faire des animations simples au défilement d'une page.
Démo

Préparation

Je commence par un boilerplate en HTML

Tips: dans vscode il suffit de taper ! dans un fichier HTML pour le créer

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

ensuite, je crée mon fichier CSS, qui est dans mon cas est : css/main.css

je le relie à mon fichier HTML en rajoutant la ligne :
<link rel="stylesheet" href="css/main.css" />

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body></body>
</html>

pour vérifier que mon CSS est bien attaché, je mets une couleur de fond pour le body

body {
  background-color: aqua;
}

Puis je lance mon live server , extention vscode LiveServer

Et je vois une page turquoise, donc tout est bon :)

Je retourne dans mon HTML, je vais faire 4 <sections>, avec 1 titre <h1> et un paragraphe <p> dans chaque.

tips avec emmet on peut taper directement :
section*4>h1{titre$}+p>lorem

et je rajoute la balise data-scroll dans un h1 et une section .
Ensuite, je rajoute le lien vers la librairie scroll-out
Mon HTML ressemble à ça :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section>
      <h1>titre1</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
        explicabo, dolorem laborum dicta exercitationem earum! Illum vitae
        saepe, ut praesentium beatae ipsa excepturi non commodi voluptatem
        tempora. Sit, placeat impedit!
      </p>
    </section>

    <section>
      <h1 data-scroll>titre2</h1>
      <p>
        Blanditiis minima iure molestias quis praesentium voluptatibus, deserunt
        repellendus necessitatibus qui, illum dolor, ipsum ipsam architecto?
        Illum consequatur aliquam rerum in qui. Quis, eligendi architecto.
        Ducimus quod magnam eveniet harum?
      </p>
    </section>

    <section data-scroll>
      <h1>titre3</h1>
      <p>
        Nemo corporis nesciunt quidem obcaecati dicta voluptas, deserunt ipsa.
        Pariatur neque vel tenetur quidem, commodi necessitatibus quae
        blanditiis harum nemo sunt nostrum quas esse officiis debitis! Molestias
        sunt minima quis.
      </p>
    </section>

    <section>
      <h1>titre4</h1>
      <p>
        Fuga qui, assumenda aut recusandae expedita, facere sit inventore
        voluptates nobis, exercitationem tenetur amet. Illum adipisci, tempora
        maiores velit magnam, praesentium earum aliquam possimus in debitis
        sapiente? Sapiente, ab aliquid.
      </p>
    </section>
  </body>
  <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>

</html>

Pour finir avec la préparation, je passe au CSS, pour mieux séparer les éléments et rendre une meilleure visibilité. Chaque section aura la hauteur d'un écran.

body,
html {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat';
}

section {
  height: 100vh;
  width: 100%;
  padding: 6em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
}

section h1 {
  font-size: 5em;
}

section p {
  width: 50%;
  opacity: 0.8;
  line-height: 1.5em;
  font-size: 1.5em;
}

section:nth-of-type(1) {
  background: #1da767;
}

section:nth-of-type(2) {
  background: #257bb4;
}

section:nth-of-type(3) {
  background: #6f26b3;
}

section:nth-of-type(4) {
  background: #8ead27;
}

Configuration

Pour continuer, je vais configurer les animations,

je vais faire une transition sur toute les balise data-scroll aillant une durée de 2 s


[data-scroll] {
  -webkit-transition: all 2s;
  transition: all 2s;
}

Leout : l'élément n'est pas encore affiché sur l'écran.
Du coup, c'est le point de départ de l'animation.
Il est à 200px sur la gauche, avec une opacité à 0, donc transparent.

[data-scroll='out'] {
  opacity: 0;
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}

La configuration de mon in, c’est-à-dire quand l'élément entre dans l'écran, il passe de la gauche, pour aller vers sa positon "normal", son opacité devient visible, le tout sur une durée de 2 seconde (qui a été définie avant).

[data-scroll='in'] {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

Le fonctionnement de base est maintenant fait. Mais il y a un léger souci, puis que l'animation commence un peu trop tôt.
En effet, elle débute dès que l'écran l'affiche.

je vais rajouter un délai, dans mon HTML, pour que l'animation commence 0.5 seconde plus tard avec threshold: 0.5

Et si je désire ne faire l'effet qu'une seule fois, je rajoute once: true

  <script>
    ScrollOut({
      once: true,
      threshold: 0.5,
    })
  </script>

il existe plusieurs options disponibles, je vous renvoie vers la doc pour plus d'information : https://scroll-out.github.io/guide.html#configuration

Merci de m'avoir lu et bon code :)

code complet sur mon GitHub :
https://github.com/neuroloops/scroll-out