Skip to content

Commit

Permalink
article/proxyMocker (#4)
Browse files Browse the repository at this point in the history 
* Mise à jour wording

* Changement du titre posts en articles
  • Loading branch information
@yatho
yatho authored Aug 23, 2024
1 parent 0bfa052 commit b35e0fd
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 106 deletions.
6 changes: 4 additions & 2 deletions src/posts/proxyMockerPlugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ categories:

## Introduction

Tout a commencé par un problème : une connexion internet instable. Ce souci est récurrent et perturbe considérablement mon quotidien de développeur front, surtout lorsque l'accès au réseau est indispensable pour travailler. Comment y remédier ?
Tout a commencé par un problème : une connexion internet instable. Que ce soit mon réseau, le VPN ou la mise à jour du serveur utilisé, je passais du temps à attendre de pouvoir tester.

Ce souci récurrent perturbe considérablement mon quotidien de développeur, surtout lorsque l'accès au réseau est indispensable. Comment y remédier ?

Ma première solution a été de développer un projet de tests E2E. Ce projet permet de remplacer facilement les requêtes par des mocks, tout en améliorant la résilience grâce à des tests de non-régression automatisés. L'inconvénient principal est le coût de mise en place et la nécessité d'effectuer des opérations manuelles, comme la saisie des mocks.

Expand All @@ -29,7 +31,7 @@ Utilisant VSCode depuis plusieurs années, j'apprécie la simplicité de son sys

## Les fonctionnalités du plugin Proxy Mocker

À ce jour, deux fonctionnalités principales sont disponibles :
À ce jour, deux fonctionnalités sont disponibles :

1. **Sauvegarder les requêtes**
Dans cette première version, seules les valeurs du body, l'URL et la méthode HTTP (GET, POST, etc.) sont sauvegardées pour chaque requête. Des évolutions futures permettront d'ajouter d'autres éléments, tels que l'intégralité du corps de la requête.
Expand Down
208 changes: 104 additions & 104 deletions src/routes/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,127 +1,127 @@
<script>
import { page } from '$app/stores';
import logo from '$lib/images/blog-logo.svg';
import github from '$lib/images/github.svg';
import { base } from '$app/paths';
import { page } from "$app/stores";
import logo from "$lib/images/blog-logo.svg";
import github from "$lib/images/github.svg";
import { base } from "$app/paths";
</script>

<header>
<div class="corner">
<a href="{base}/">
<img src={logo} alt="blog-logo" />
</a>
</div>
<div class="corner">
<a href="{base}/">
<img src={logo} alt="blog-logo" />
</a>
</div>

<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li aria-current={$page.url.pathname === '/posts' ? 'page' : undefined}>
<a href="{base}/posts">Posts</a>
</li>
<!-- <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<nav>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
</svg>
<ul>
<li aria-current={$page.url.pathname === "/posts" ? "page" : undefined}>
<a href="{base}/posts">Articles</a>
</li>
<!-- <li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
<a href="{base}/about">About</a>
</li> -->
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>
</ul>
<svg viewBox="0 0 2 3" aria-hidden="true">
<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
</svg>
</nav>

<div class="corner">
<a href="https://github.com/yatho" target="_blank">
<img src={github} alt="GitHub" />
</a>
</div>
<div class="corner">
<a href="https://github.com/yatho" target="_blank">
<img src={github} alt="GitHub" />
</a>
</div>
</header>

<style>
header {
display: flex;
justify-content: space-between;
}
header {
display: flex;
justify-content: space-between;
}
.corner {
width: 3em;
height: 3em;
}
.corner {
width: 3em;
height: 3em;
}
.corner a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.corner a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.corner img {
width: 2em;
height: 2em;
object-fit: contain;
}
.corner img {
width: 2em;
height: 2em;
object-fit: contain;
}
nav {
display: flex;
justify-content: center;
--background: hsl(214, 82%, 51%, 0.31);
}
nav {
display: flex;
justify-content: center;
--background: hsl(214, 82%, 51%, 0.31);
}
svg {
width: 2em;
height: 3em;
display: block;
}
svg {
width: 2em;
height: 3em;
display: block;
}
path {
fill: var(--background);
}
path {
fill: var(--background);
}
ul {
position: relative;
padding: 0;
margin: 0;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
background: var(--background);
background-size: contain;
}
ul {
position: relative;
padding: 0;
margin: 0;
height: 3em;
display: flex;
justify-content: center;
align-items: center;
list-style: none;
background: var(--background);
background-size: contain;
}
li {
position: relative;
height: 100%;
}
li {
position: relative;
height: 100%;
}
li[aria-current='page']::before {
--size: 6px;
content: '';
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - var(--size));
border: var(--size) solid transparent;
border-top: var(--size) solid var(--color-theme-1);
}
li[aria-current="page"]::before {
--size: 6px;
content: "";
width: 0;
height: 0;
position: absolute;
top: 0;
left: calc(50% - var(--size));
border: var(--size) solid transparent;
border-top: var(--size) solid var(--color-theme-1);
}
nav a {
display: flex;
height: 100%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.2s linear;
}
nav a {
display: flex;
height: 100%;
align-items: center;
padding: 0 0.5rem;
color: var(--color-text);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
transition: color 0.2s linear;
}
a:hover {
color: var(--color-theme-1);
}
a:hover {
color: var(--color-theme-1);
}
</style>

0 comments on commit b35e0fd

Please sign in to comment.