added content

This commit is contained in:
Nico 2022-12-28 10:36:15 +01:00
parent bf2221b9a9
commit 9b91b02d90
79 changed files with 3053 additions and 284 deletions

View File

@ -1,10 +1,10 @@
type DefaultLangCode = "fr"
type SupportedLangCode = "en"
type LangCode = DefaultLangCode | SupportedLangCode
type RouteUri = | "/articles/[slug]" | "/articles" | "/tags/[tag]" | "/tags" | "/"
type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.scihub" | "contact.contenuVide"
type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.scihub": {} | undefined; "contact.contenuVide": {} | undefined; }
type RouteUri = | "/articles/[slug]" | "/articles" | "/agments/[slug]" | "/agments" | "/tags/[tag]" | "/tags" | "/"
type RouteParams = {"/articles/[slug]": { "slug": string; }; "/articles": undefined; "/agments/[slug]": { "slug": string; }; "/agments": undefined; "/tags/[tag]": { "tag": string; }; "/tags": undefined; "/": undefined; }
type TranslationPath = "accueil" | "tagline" | "copyright" | "contact.title" | "contact.email" | "contact.tel" | "contenuVide" | "header.skipLink" | "header.mainNav" | "header.homeLink" | "sitemap" | "prevNext.contenus" | "prevNext.precedent" | "prevNext.suivant" | "article.titre" | "article.tagline" | "article.published" | "meta.publication" | "meta.modification" | "meta.credit" | "fragments.titre" | "fragments.tagline" | "projet.titre" | "projet.tagline" | "projet.cta" | "projet.lienTitle" | "projet.fenetre" | "erreur.introuvable" | "erreur.autre" | "erreur.lienRetour" | "seo.article.title" | "seo.article.description" | "seo.projet.title" | "seo.projet.description" | "seo.code.title" | "seo.code.description" | "index.articles.pageName" | "index.articles.subtitle" | "index.fragments.pageName" | "index.fragments.subtitle" | "index.title" | "index.subtitle" | "index.quoi" | "index.comment" | "index.opensource" | "index.writing" | "index.latestProjects" | "index.latestArticles" | "index.allProjects" | "index.allArticles" | "index.latestSnippets" | "index.allSnippets" | "index.toc" | "contact.contenuVide"
type TranslationOptions = { "accueil": {} | undefined; "tagline": {} | undefined; "copyright": {} | undefined; "contact.title": {} | undefined; "contact.email": {} | undefined; "contact.tel": {} | undefined; "contenuVide": {} | undefined; "header.skipLink": {} | undefined; "header.mainNav": {} | undefined; "header.homeLink": {} | undefined; "sitemap": {} | undefined; "prevNext.contenus": {} | undefined; "prevNext.precedent": {} | undefined; "prevNext.suivant": {} | undefined; "article.titre": {} | undefined; "article.tagline": {} | undefined; "article.published": { datetime: unknown; options: unknown; }; "meta.publication": {} | undefined; "meta.modification": {} | undefined; "meta.credit": {} | undefined; "fragments.titre": {} | undefined; "fragments.tagline": {} | undefined; "projet.titre": {} | undefined; "projet.tagline": {} | undefined; "projet.cta": {} | undefined; "projet.lienTitle": {} | undefined; "projet.fenetre": {} | undefined; "erreur.introuvable": {} | undefined; "erreur.autre": {} | undefined; "erreur.lienRetour": {} | undefined; "seo.article.title": {} | undefined; "seo.article.description": {} | undefined; "seo.projet.title": {} | undefined; "seo.projet.description": {} | undefined; "seo.code.title": {} | undefined; "seo.code.description": {} | undefined; "index.articles.pageName": {} | undefined; "index.articles.subtitle": {} | undefined; "index.fragments.pageName": {} | undefined; "index.fragments.subtitle": {} | undefined; "index.title": {} | undefined; "index.subtitle": {} | undefined; "index.quoi": {} | undefined; "index.comment": {} | undefined; "index.opensource": {} | undefined; "index.writing": {} | undefined; "index.latestProjects": {} | undefined; "index.latestArticles": {} | undefined; "index.allProjects": {} | undefined; "index.allArticles": {} | undefined; "index.latestSnippets": {} | undefined; "index.allSnippets": {} | undefined; "index.toc": {} | undefined; "contact.contenuVide": {} | undefined; }
declare module "astro-i18n" {
export * from "astro-i18n/"

View File

@ -1,12 +1,27 @@
# Astro Starter Kit: Minimal
# nardu.in
remade with [astro](https://astro.build)
## Build Setup
```bash
# install dependencies
$ pnpm install
# serve with hot reload at localhost:3000
$ pnpm dev
# build for production as a full static website
$ pnpm build
# launch local server
$ pnpm preview
# deploy
rsync -avz -e 'ssh -p PORT' dist/ user@SERVER_IP:/var/www/FOLDER/dist
```
npm create astro@latest -- --template minimal
```
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
## 🚀 Project Structure

View File

@ -12,5 +12,8 @@ export default defineConfig({
experimental: {
contentCollections: true,
},
markdown: {
syntaxHighlight: "prism",
},
integrations: [i18n(), image(), mdx()],
});

View File

@ -11,6 +11,7 @@ export default defineAstroI18nConfig({
routeTranslations: {
en: {
"sci-hub-blocage": "sci-hub-unblock",
fragments: "snippets",
},
},
});

View File

@ -21,5 +21,8 @@
"devDependencies": {
"autoprefixer": "^10.4.13",
"postcss": "^8.4.20"
},
"engines": {
"node": "16.18.1"
}
}

View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" aria-describedby="desc" aria-labelledby="title" viewBox="0 0 64 64">
<title>Lien</title>
<desc>Deux maillons d'une chaîne accrochés ensemble.</desc>
<path fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M32 14.4l8.8-8.8a12.4 12.4 0 0117.6 0 12.4 12.4 0 010 17.6L44.3 37.3a12.4 12.4 0 01-17.6 0 12.6 12.6 0 01-1.6-1.9" data-name="layer2"/>
<path fill="none" stroke="#202020" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2" d="M32 49.6l-8.8 8.8a12.4 12.4 0 01-17.6 0 12.4 12.4 0 010-17.6l14.1-14.1a12.4 12.4 0 0117.6 0 12.5 12.5 0 011.6 1.9" data-name="layer1"/>
</svg>

After

Width:  |  Height:  |  Size: 751 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 23"><g><g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M28 11.5H1M17.5 1L28 11.5 17.5 22"/></g></g></svg>

After

Width:  |  Height:  |  Size: 218 B

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 23"><g><g fill="none" stroke="#c94a4f" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M28 11.5H1M17.5 1L28 11.5 17.5 22"/></g></g></svg>

After

Width:  |  Height:  |  Size: 218 B

View File

@ -1,12 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
<path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a2 2 0 0 0 1.38-1.4l3.22-11.66a.5.5 0 0 1 .96 0l3.22 11.67a2 2 0 0 0 1.38 1.39l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
<path fill="url(#gradient)" d="M18 28a7.63 7.63 0 0 1-5-2c-1.4 2.1-.35 4.35.6 5.55.14.17.41.07.47-.15.44-1.8 2.93-1.22 2.93.6 0 2.28.87 3.4 1.72 3.81.34.16.59-.2.49-.56-.31-1.05-.29-2.46 1.29-3.25 3-1.5 3.17-4.83 2.5-6-.67.67-2.6 2-5 2Z"/>
<defs>
<linearGradient id="gradient" x1="16" x2="16" y1="32" y2="24" gradientUnits="userSpaceOnUse">
<stop stop-color="#000"/>
<stop offset="1" stop-color="#000" stop-opacity="0"/>
</linearGradient>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
<text x="2px" y="28px" fill="#000" font-size="30px" font-family="sans-serif">
N
</text>
<style>
@media (prefers-color-scheme:dark){:root{filter:invert(100%)}}
</style>

Before

Width:  |  Height:  |  Size: 873 B

After

Width:  |  Height:  |  Size: 260 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

2
public/robots.txt Normal file
View File

@ -0,0 +1,2 @@
User-agent: *
Disallow: /

View File

@ -6,9 +6,9 @@ const { src, alt, width, height, ...attrs } = Astro.props;
<Picture
src={src}
widths={[320, 640, 768, attrs.width]}
widths={[320, 640, 768]}
aspectRatio={`${width}:${height}`}
sizes={`(max-width: ${attrs.width}px) 100vw, ${attrs.width}px`}
sizes={`(max-inline-size: ${width}px) 100vw, ${width}px`}
formats={["avif", "webp"]}
alt={alt ? alt : ""}
{...attrs}

View File

@ -1,32 +1,30 @@
---
import { l } from "astro-i18n";
import ListTags from "./ListTags.astro";
const { item, routeName } = Astro.props;
---
<div class="card">
<div>
<h3>
<a class="card__link" href={`${routeName}/${item.slug}`}
<a class="clean-link card__link" href={`${routeName}/${item.data.slug}`}
>{item.data.title}</a
>
</h3>
<pre>
{item.slug}
</pre>
<!-- <h4>{item.data.subtitle}</h4> -->
<!-- <tags-list list={item.tags}></tags-list> -->
<h4>{item.data.subtitle}</h4>
<ListTags list={item.data.tags} />
</div>
</div>
<style scoped>
.card {
padding: 2.4rem 1.6rem;
padding: var(--space-s-m) var(--space-xs-s);
position: relative;
display: block;
height: 100%;
block-size: 100%;
overflow: hidden;
cursor: pointer;
box-shadow: var(--shadow-elevation-medium);
background-color: var(--white);
background-color: white;
}
.card:hover {
box-shadow: var(--shadow-elevation-high);
@ -34,14 +32,31 @@ const { item, routeName } = Astro.props;
.card:focus-within {
box-shadow: var(--shadow-elevation-high);
}
.card:hover h3::after,
.card:focus-within h3::after {
.card::after {
content: "";
position: absolute;
inline-size: 30px;
block-size: 30px;
top: var(--space-m);
right: var(--space-s);
opacity: 0;
background-image: url("/assets/svg/arrow-right.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateX(1rem);
}
.card:hover::after,
.card:focus-within::after {
transform: translateX(0);
opacity: 1;
}
.card:hover h3,
.card:focus-within h3 {
color: var(--brique);
.card:hover h3 a {
text-decoration: underline;
}
.card:hover h3 a,
.card:focus-within h3 a {
color: var(--color-brique);
}
.card::before {
content: "";
@ -49,11 +64,11 @@ const { item, routeName } = Astro.props;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 2px;
block-size: 100%;
inline-size: 2px;
transform: scaleY(0);
transform-origin: bottom;
background-color: var(--brique);
background-color: var(--color-brique);
}
.card:hover::before,
.card:focus-within::before {
@ -62,20 +77,18 @@ const { item, routeName } = Astro.props;
}
h3 {
padding-right: 3rem;
position: relative;
font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
padding-inline-end: var(--space-s-m);
font-size: var(--size-2);
font-weight: bold;
text-transform: none;
}
h3::after {
content: url("~assets/svg/arrow-right.svg");
.card__link {
color: var(--color-blue);
}
.card__link::after {
content: "";
position: absolute;
width: 30px;
top: 0;
right: 0;
opacity: 0;
transform: translateX(1rem);
inset: 0;
}
@media (prefers-reduced-motion: no-preference) {
.card {
@ -84,33 +97,33 @@ const { item, routeName } = Astro.props;
.card::before {
transition: transform 0.2s ease-in-out;
}
h3 {
transition: color ease 0.2s;
}
h3::after {
.card::after {
transition: opacity ease 0.2s, transform ease 0.2s;
}
h3 a {
transition: color ease 0.2s;
}
}
.card h4 {
margin-top: 0.8rem;
font-size: 2rem;
margin-block-start: var(--space-2xs);
font-size: var(--size-0);
font-weight: 500;
color: var(--darkBlue);
}
@media screen and (min-width: 768px) {
/* @media screen and (min-width: 768px) {
h3 {
margin-top: 0;
margin-bottom: 0.8rem;
margin-block-start: 0;
margin-block-end: var(--space-2xs);
}
.card {
padding: 3.2rem 2.4rem;
padding: var(--space-xs-s) var(--space-2xs-xs);
}
}
@media screen and (min-width: 1060px) {
.card {
margin: 0;
}
}
} */
</style>

View File

@ -1,5 +0,0 @@
---
const { title, url } = Astro.props;
---
<a href={url}>{title}</a>

View File

@ -1,4 +1,5 @@
---
import MetaDate from "./MetaDate.astro";
import TOC from "./TOC.astro";
const { content } = Astro.props;
@ -7,13 +8,18 @@ const { Content, headings } = await content.render();
const toc = headings.map((heading) => {
return heading;
});
if (content.data.code) {
import "../styles/vendor/one-dark-pro.css";
}
---
<div class="sidebar region">
<TOC toc={toc} />
<article class="flow editorial">
<h1>{content.data.title}</h1>
<p class="h2">{content.data.subtitle}</p>
<p class="h3">{content.data.subtitle}</p>
<MetaDate item={content.data} />
<div class="flow content">
<Content />
</div>
@ -21,6 +27,15 @@ const toc = headings.map((heading) => {
</div>
<style>
.sidebar {
--gutter: var(--space-xs-m);
}
.sidebar > :global(:first-child) {
--sidebar-target-width: 16rem;
}
.sidebar > :global(:last-child) {
--sidebar-content-min-width: 60%;
}
h1 {
font-size: var(--size-4);
}
@ -29,4 +44,9 @@ const toc = headings.map((heading) => {
font-size: var(--size-3);
color: var(--color-blue);
}
.editorial :global(img),
.editorial :global(picture) {
margin: var(--space-s-m) 0;
}
</style>

View File

@ -0,0 +1,38 @@
---
import { l, t } from "astro-i18n";
---
<footer class="footer" role="contentinfo">
<section class="flow">
<p>Nicolas Arduin</p>
<p>{t("tagline")}</p>
<ul class="flow" role="list">
<li>
<a href="mailto:contact@nardu.in" title={t("contact.email")}
>contact@nardu.in</a
>
</li>
<li>
<a href="tel:+33749464239" title={t("contact.tel")}>+337 49 46 42 39</a>
</li>
<li><a href={l("/plan-du-site")}>{t("sitemap")}</a></li>
</ul>
</section>
</footer>
<style>
.footer {
--flow-space: var(--space-xs-s);
inline-size: 100%;
margin: 0 auto;
margin-block-start: var(--space-m-l);
padding: var(--space-s-m);
text-align: center;
border-top: solid 2px var(--color-dark-blue);
}
.footer a {
font-weight: 500;
color: var(--color-blue);
}
</style>

View File

@ -37,8 +37,8 @@ import Navigation from "../components/Navigation.astro";
position: absolute;
top: 20px;
left: 20px;
height: 1px;
width: 1px;
block-size: 1px;
inline-size: 1px;
-webkit-clip: rect(0 0 0 0);
clip: rect(0 0 0 0);
overflow: hidden;
@ -50,8 +50,8 @@ import Navigation from "../components/Navigation.astro";
-webkit-clip: auto;
clip: auto;
overflow: visible;
width: auto;
height: auto;
inline-size: auto;
block-size: auto;
}
.logo {
font-size: var(--size-1);

View File

@ -4,7 +4,7 @@ const { list, routeName } = Astro.props;
import CardEditorial from "./CardEditorial.astro";
---
<ul role="list">
<ul class="list" role="list">
{
list.map((item) => (
<li class="list__item">
@ -13,3 +13,14 @@ import CardEditorial from "./CardEditorial.astro";
))
}
</ul>
<style>
.list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
gap: var(--space-m-l);
}
.list > * {
margin: 0;
}
</style>

View File

@ -0,0 +1,25 @@
---
const { list } = Astro.props;
---
<ul class="tags-list" role="list">
{
list.map((tag, index) => (
<li>
{tag}{index + 1 < list.length && <span>, </span>}
</li>
))
}
</ul>
<style>
.tags-list {
margin: var(--space-2xs) 0;
}
.tags-list li {
display: inline;
font-size: var(--size--1);
font-weight: 500;
color: var(--color-blue);
}
</style>

View File

@ -0,0 +1,44 @@
---
import { t, astroI18n } from "astro-i18n";
astroI18n.init(Astro);
const { item } = Astro.props;
function formatDate(date) {
const options = { year: "numeric", month: "long", day: "numeric" };
return new Date(date).toLocaleDateString(astroI18n.langCode, options);
}
// Needed because browser will transform the value to a readable english date in 'datetime' if not forced
// see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#attr-datetime for valid formats
function rawDate(date) {
return new Date(date).toISOString();
}
---
<div class="meta">
<p class="meta__date">
{t("meta.publication")}&nbsp;:
<time datetime={rawDate(item.createdAt)}>{formatDate(item.createdAt)}</time>
</p>
{
formatDate(item.createdAt) != formatDate(item.updatedAt) &&
!!item.updatedAt && (
<p class="meta__date">
{t("meta.modification")}&nbsp;:
<time datetime={rawDate(item.createdAt)}>
{formatDate(item.updatedAt)}
</time>
</p>
)
}
</div>
<style>
.meta {
font-size: var(--size--1);
}
.meta__date {
margin: var(--space-3xs) 0;
}
</style>

View File

@ -16,7 +16,9 @@ import LanguageSwitcher from "./LangSwitcher.astro";
<span aria-hidden="true">&middot;</span>
</li>
<li>
<a href={l("/")} class="clean-link nice-link">{t("fragments.titre")}</a>
<a href={l("/fragments")} class="clean-link nice-link"
>{t("fragments.titre")}</a
>
<span aria-hidden="true">&middot;</span>
</li>
<li>
@ -39,4 +41,7 @@ import LanguageSwitcher from "./LangSwitcher.astro";
gap: var(--space-2xs);
justify-content: center;
}
.main-nav a {
text-transform: capitalize;
}
</style>

View File

@ -5,9 +5,9 @@ const { toc } = Astro.props;
<aside class="table-of-content">
<details open="true">
<summary>{t("toc")}</summary>
<nav role="navigation" aria-label={t("toc")}>
<ul class="table-of-content__list" role="list">
<summary>{t("index.toc")}</summary>
<nav role="navigation" aria-label={t("index.toc")}>
<ol class="table-of-content__list" role="list">
{
// loop over the toc
toc.map((heading) =>
@ -18,19 +18,19 @@ const { toc } = Astro.props;
{heading.text}
</a>
</li>
) : // if h3, set as inner ul > li
) : // if h3, set as inner ol > li
heading.depth === 3 ? (
<ul role="list">
<ol role="list">
<li>
<a href={`#${heading.slug}`} class="toc-3">
{heading.text}
</a>
</li>
</ul>
</ol>
) : null
)
}
</ul>
</ol>
</nav>
</details>
</aside>
@ -48,8 +48,16 @@ const { toc } = Astro.props;
position: sticky;
top: var(--space-m);
}
summary {
padding: var(--space-2xs-xs);
font-size: var(--size-0);
font-weight: 500;
background-color: var(--color-soft-blue);
}
.table-of-content__list {
padding-bottom: 2rem;
padding: 0 var(--space-2xs);
padding-block-end: var(--space-2xs);
border: 2px solid var(--color-soft-blue);
}
.table-of-content__list a {
position: relative;
@ -64,7 +72,7 @@ const { toc } = Astro.props;
position: absolute;
top: 0;
left: 0;
transform: translate(-1rem, 0);
transform: translate(-6px, 0);
color: var(--color-grey);
}
.table-of-content__list a:visited::before {
@ -80,7 +88,7 @@ const { toc } = Astro.props;
margin: 0.8rem 0 0.3rem;
}
.toc-3 {
margin-left: 1rem;
margin-top: 0.4rem;
margin-inline-start: 1rem;
margin-block-start: 0.4rem;
}
</style>

View File

@ -0,0 +1,42 @@
---
title: Nico v2.0
subtitle: 2022 update of many things.
lang: en
slug: "2022"
excerpt: Changes in my services, the website and myself.
tags: ["Freelance"]
createdAt: "2022-06-08T14:24:06.000Z"
---
After two years of full-time freelancing, I took a step back from my activity. I especially questioned my positioning and the services I was offering.
## Services
### No more print
Even though I am trained in branding, I rarely do it and do not practice it in my free time. The same goes for "classic" graphic design. Posters, flyers and other leaflets have disappeared from my quotes for a long time. It seems logical to me to no longer explicitly offer these services because I consider that I am no longer sufficiently competent or interested.
### Internet all the way
On the other hand, I spend my time **doing web stuff.** A lot of development, some design and a fait amout of server configuration. It is therefore obvious for me to offer **more specific web offerings,** in which I have specialised.
Thus, **accessibility** and **eco-design** become integrated expertises in my practice. They are no longer options on a quote but **my core business.**
## The website
I have reworked my website, especially the homepage and its content, to better reflect these decisions.
I have also made several behavioural changes:
- external links no longer open in a new window. I read <a href="https://css-tricks.com/use-target_blank/" rel="noopener noreferer">this article</a> about opening links in a new window and I haven't found a good reason to continue using this behaviour;
- I have removed the open graph and twitter card meta tags as I fully agree with <a href="https://twitter.com/HTeuMeuLeu/status/1370310316496728065" rel="noopener noreferer" hreflang="fr">this opinion (in french)</a> by [@HTeuMeuLeu](https://twitter.com/HTeuMeuLeu);
- <a href="https://twitter.com/HTeuMeuLeu/status/1370310312214339586" rel="noopener noreferer" hreflang="fr">same for the favicon</a>;
- I only trigger animations if the user has not asked the system to reduce the amount motion [(reference)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
I am working on reducing the weight of my pages as much as possible, although I will certainly have to change tools (again) (hello [astro](https://astro.build/)&nbsp;👀).
## Le Nico
On a personal level, I have committed myself to a more responsible digital world by joining the <a href="https://www.good-it.org/" rel="noopener noreferer" hreflang="fr">Good-it! (in french)</a> collective and by actively participating in its development.
I have also started teaching in several schools. I mainly intervene on digital courses by teaching design and development. I take this opportunity to to make future generations aware of accessibility and eco-design.

View File

@ -0,0 +1,116 @@
---
title: After Effects Expressions
subtitle: Animation on steroïds.
lang: en
slug: "after-effects-expressions"
excerpt: Expressions in After Effects have always been blurry for me. I know they exist, I know they're powerful, I know it could save a lot of time and clean complex keyframe filled compositions but… They are hard to learn!
tags: ["Design"]
createdAt: "2019-04-24T09:00:00.000Z"
code: true
---
import AstroImage from "../../../components/AstroImage.astro";
export const basicExpression =
"https://assets.nardu.in/basic_expression_d81b12f1ac.jpeg";
export const shortcut = "https://assets.nardu.in/shortcut_39cc19d383.jpeg";
## An ever lasting battle
There is very little documentation and the existing one is hard to find or very old. Very often I just don't have the time to dive into expression learning while animating even though it could help the entire project on the long term.
So the last time I had to do a complex animation, **I took the damn time!**
## The begining of the end (of keyframes).
Everyone uses expressions whether they know it or not. Most of the time it's a rather transparent process for the animator. For example: when parenting a property to another one, After Effects creates an expression for us.
<AstroImage
src={basicExpression}
width="728"
height="80"
alt="Parenting the position of the form to a null creates an expression."
/>
Over the last updates, Adobe has made an effort to make expressions more accessible to everyone. For example, the expression box is now resembling a code editor thanks to code-coloring and auto-completion features. After Effects expression feel like JavaScript with custom functions.
Those custom functions can be called through a menu once you enabled the expressions on a property. It offers organized shortcut and proper syntax to all of AE native functions and a bunch of JavaScript standard ones.
<AstroImage
src={shortcut}
width="728"
height="322"
alt="Alt + Click the stopwatch to access the shortcuts."
/>
## So I need to learn javascript to do motion design now?
### Why bother?
I know that most animators don't have any kind of development background. However, if Adobe thought it best to let us use expressions, I think we ought to, at least, try.
> A lot of incredible professionals like [Mt Mograph](https://www.mtmograph.com/) and [Video Copilot](https://videocopilot.net/) use expressions.
Like every optimization process, building an expressions knowledge takes time. However, like all optimization process, you will benefit from it afterwards.
### Where to learn
I've gathered a list of my favourite learning grounds. Plenty more exist, **go get'em!**
- [Adobe official expression starter guide (FR)](https://helpx.adobe.com/fr/after-effects/using/expression-language-reference.html)
- [Adobe official expression basic (EN)](https://helpx.adobe.com/after-effects/using/expression-basics.html)
- [Adobe forums for expressions](https://community.adobe.com/t5/after-effects/bd-p/after-effects?page=1&sort=latest_replies&filter=all&topics=label-expressions)
- [Creative Cow expressions forums](https://creativecow.net/forums/forum/adobe-after-effects-expressions/)
- [Youtube channel about expressions](https://www.youtube.com/playlist?list=PLvr5U5ZSt6IzHyvSL9fo0M9NRPsTvra31)
- [All expressions explained](http://aescript.jecool.net/reference/)
- [All expressions explained again](http://expressions.aenhancers.com/index.html)
- [Nice examples of basic expressions](https://www.schoolofmotion.com/tutorials/amazing-expressions-in-after-effects)
## Real world example
### Number counter
Let's say you need to animate a rather simple counter from 0% to 100%.
- Start by creating a text layer. Define your typographic choices, colours, etc.
- On the effect menu add expression options > slider control
- Alt + Click the Source text property
<video width="728" loop controls preload="metadata">
<source src="https://assets.nardu.in/alt-counter.mp4" type="video/mp4" />
</video>
- Parent the source text to the slider control through the pickwhip.
<video width="462" loop controls preload="metadata">
<source src="https://assets.nardu.in/pickwhip.mp4" type="video/mp4" />
</video>
You should get something like this in the expressions panel:
```javascript
effect("Slider Control")("Slider")
```
- Set two keyframes on the slider from 0 to 100. The text should update accordingly.
- By default, After Effects does not round numbers. In the expression panel, wrap your expression with the `Math.round()` function.
<video width="728" loop controls preload="metadata">
<source src="https://assets.nardu.in/round.mp4" type="video/mp4" />
</video>
```javascript
Math.round(effect("Slider Control")("Slider"))
```
Great! We have a working counter. But we wanted a percentage counter. We could add a % glyph in another text layer but let's not.
Still in the expression panel, we're going to add a string containing the % glyph, using basic JavaScript concatenation: `+ '%'`
```javascript
Math.round(effect("Slider Control")("Slider")) + '%'
```
<video width="538" loop controls preload="metadata">
<source src="https://assets.nardu.in/percent.mp4" type="video/mp4" />
</video>
**And there we go!** A fully functioning and customizable counter using a slider controller and expressions.

View File

@ -0,0 +1,11 @@
---
title: Accessibility and sobriety
subtitle: Translation in progress, stay tuned ;)
lang: en
slug: "faq"
excerpt: Why, how et and especially what.
tags: ["Freelance"]
createdAt: "2022-06-22T15:34:45.000Z"
---
[Go back to available articles](/en/articles/)

View File

@ -0,0 +1,11 @@
---
title: Gratuiste
subtitle: Translation in progress, stay tuned ;)
lang: en
slug: "gratuiste"
excerpt: Translation in progress, stay tuned ;)
tags: ["Design", "Freelance"]
createdAt: "2017-05-27T07:47:36.000Z"
---
[Go back to available articles](/en/articles/)

View File

@ -6,9 +6,19 @@ slug: "sci-hub-unblock"
key: "scihub"
excerpt: "In March 2019, the Paris Regional Court ruled in favour of the publishers of scientific articles Elsevier and Springer Nature by ordering internet service providers to block access to these two websites. Here is how to access them if they are blocked in your country anyway."
tags: ["Internet", "Science"]
pubDate: "2019-10-18T07:47:36.000Z"
createdAt: "2019-03-31T07:47:36.000Z"
updatedAt: "2022-12-27T12:08:00.000Z"
---
import AstroImage from "../../../components/AstroImage.astro";
export const macOs =
"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
export const windowsAdapterSettings =
"https://assets.nardu.in/sci-hub-adapter-settings.jpg";
The current sci-hub address is: <a href="https://sci-hub.se" rel="noreferer noopener">sci-hub.se</a>
## What is this about?
@ -18,8 +28,8 @@ Not being a researcher myself, heres an [extremely well done explanatory vide
> “This is outrageous!”​
I noticed that my ISP was indeed blocking access. I have not yet been able to check for the other suppliers, but I imagine that they have all complied with the court decision.
The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: _www.sci-hub.tw_ to an IP address: _186.2.163.90_
It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the sci-hub domain name. As a result, no IP address is returned and the site is not accessible.
The restriction in place is quite basic. This is a “DNS” block. A DNS is a server that is used to link a domain name: **www.sci-hub.tw** to an IP address: **186.2.163.90**
It is, in a way, the Internet phone book. Without the address, it is impossible to contact the domain. What ISPs have certainly done: block requests to the [sci-hub.se.](http://sci-hub.se/) domain name. As a result, no IP address is returned and the site is not accessible.
## How to bypass this?
@ -35,20 +45,18 @@ Go to:
1. System Preferences
1. Network
1. (wi-fi or ethernet)
1. (wi-fi and/or ethernet)
1. Advanced
1. DNS
From there, you can add DNS servers by clicking the + icon. Click ok and apply the new settings. You might need to restart your computer for the changes to work.
<nuxt-img
src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
sizes="sm:100vw xl:728px"
width="728"
height="1060"
alt="MacOS network and DNS settings"
loading="lazy">
</nuxt-img>
<AstroImage
src={macOs}
width="728"
height="1060"
alt="MacOS network and DNS settings"
/>
### Windows (10)
@ -64,53 +72,33 @@ Go to:
From there, you can add DNS servers. Click save. You might need to restart your computer for the changes to work.
<picture width="728" height="319">
<nuxt-source
src="https://assets.nardu.in/sci-hub-settings.webp"
sizes="sm:100vw xl:728px" >
</nuxt-source>
<nuxt-img src="https://assets.nardu.in/sci-hub-settings.jpg"
sizes="sm:100vw xl:728px"
alt="Windows system settings"
loading="lazy" >
</nuxt-img>
</picture>
<AstroImage
src={windowsSettings}
width="728"
height="319"
alt="Windows system settings"
/>
<picture width="728" height="803">
<nuxt-source
src="https://assets.nardu.in/sci-hub-network.webp"
sizes="sm:100vw xl:728px" >
</nuxt-source>
<nuxt-img src="https://assets.nardu.in/sci-hub-network.jpg"
sizes="sm:100vw xl:728px"
alt="Windows network settings"
loading="lazy" >
</nuxt-img>
</picture>
<AstroImage
src={windowsNetwork}
width="728"
height="803"
alt="Windows network settings"
/>
<picture width="728" height="327">
<nuxt-source
src="https://assets.nardu.in/sci-hub-adapter.webp"
sizes="sm:100vw xl:728px" >
</nuxt-source>
<nuxt-img src="https://assets.nardu.in/sci-hub-adapter.jpg"
sizes="sm:100vw xl:728px"
alt="Windows network connections settings"
loading="lazy" >
</nuxt-img>
</picture>
<AstroImage
src={windowsAdapter}
width="728"
height="327"
alt="Windows network connections settings"
/>
<picture width="728" height="434">
<nuxt-source
src="https://assets.nardu.in/sci-hub-adapter-settings.webp"
sizes="sm:100vw xl:728px" >
</nuxt-source>
<nuxt-img src="https://assets.nardu.in/sci-hub-adapter-settings.jpg"
sizes="sm:100vw xl:728px"
alt="Windows network adapter settings"
loading="lazy" >
</nuxt-img>
</picture>
<AstroImage
src={windowsAdapterSettings}
width="728"
height="434"
alt="Windows network adapter settings"
/>
## Which DNS?
@ -127,16 +115,16 @@ My favorite since it is a [french association](https://www.fdn.fr/)
- 2001:910:800::12
- 2001:910:800::40
### [Cloudflare DNS](https://1.1.1.1/)
### [Quad9](https://www.quad9.net)
For those who want the [“fastest DNS servers in the world”.](https://www.dnsperf.com/#!dns-resolvers)
Quand9 is a non-profit foundation offering free public DNS servers. Their classic servers offer filtering of identified malicious domains. They do not collect data and are <abbr title="General Data Protection Regulation">GDPR</abbr>-compliant.
1. IPV4
- 1.1.1.1
- 1.0.0.1
- 9.9.9.9
- 149.112.112.112
2. IPV6
- 2606:4700:4700::1111
- 2606:4700:4700::1001
- 2620:fe::fe
- 2620:fe::9
## That's it.

View File

@ -0,0 +1,76 @@
---
title: The day I Jamd
subtitle: A story of unusual tools and fun gambles.
lang: en
slug: "the-day-I-jamd"
excerpt: Ooh, yeah! All right! Were jammin
tags: ["Dev", "Jamstack"]
createdAt: "2020-10-08T09:00:00.000Z"
updatedAt: "2022-12-27T15:40:06.000Z"
---
import AstroImage from "../../../components/AstroImage.astro";
export const wordpress = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
export const strapi11ty = "https://assets.nardu.in/static_2c0d9f1eb8.jpeg";
## The not so easy choice
When I was still using Wordpress for my personal website, I thought it would be nice to try [OpenLiteSpeed](https://openlitespeed.org) webserver. Being a designer, I always like to have a graphical interface and I heard OLS had very nice caching and overall performances.
## FIGHT!
A few years later, I learned about Jamstack and its incredible potential. Not being impulsive at all, I chose to entirely remake my website with tools like [11ty](https://www.11ty.dev/) and [Strapi](https://strapi.io/).
I remember Strapi still being in alpha/beta and colleagues telling me it was a risky gamble, especially since I was pretty new to the node.js world.
> Open source and french? Sign me up!
So I started recreating my website identically with 11ty and Strapi. Same hosting on a Digital Ocean droplet, same webserver, same content. I had done a fair amout of performance optimizations on my wordpress install so I was eager to compare the results with the new static version.
Boy did they exceed my expectations! With almost no optimization on the static side, I got the following results.
### wordpress
<AstroImage
src={wordpress}
width="728"
height="412"
alt="Performance score of 53/100 on Wordpress."
/>
Despite a lot of efforts I could not do better. Im no expert in caching, do not use CDN and relied on plugins to achieve a lot of stuff (php not being my strongest skill 😬).
### 11ty + strapi
<AstroImage
src={strapi11ty}
width="728"
height="412"
alt="Performance score of 97/100 on jamstack."
/>
Almost **zero** special configuration (I was too anxious to test) and I reached an awesome score. I know lighthouse scores are not everything but hey, **53 vs 97**… Ill take it!
## Now kiss 🥰
Both of these approaches have their benefits and drawbacks. As a freelance, my clients often prefer or ask for Wordpress because of its reputation. I always present a Jamstack alternative when possible but its still scary to most compared to Wordpress. I feel however that its going to be easier to use Jamstack with time.
## I did it again…
Here we are now, a quarantine and a few months later and this website is running with… [Nuxt.js](https://nuxtjs.org/). I know, Im sorry, I couldnt resist the latest [nuxt content](https://content.nuxtjs.org/) functionnality.
So I re-did everything again… and let me just say: **wow**, what an experience!
I **love** developing with Nuxt. Using nuxt content allowed me to focus on design and, well, content.
No more Apollo client and graphQL query, only markdown and a few promises.
Dont get me wrong, I really like working with Strapi and its graphQL capabilities but for the purpose of this website, nuxt content does it (extremely well).
Im still using Strapi as a way to upload, store and manage images, videos, gifs, etc. It might be too much for this use case but I like to know that I can still go back to it if I want to! Also, I spent quite a bit of time setting it up with OpenLiteSpeed and Im still too attached to this accomplishment to let it go. I wrote [an article on Strapi running with OpenLiteSpeed](/en/articles/strapi-openlitespeed) if youre into that kind of stuff.
## In the end
Wordpress, Jamstack, vanilla everything… Does it really matter? For me, the dev experience was far more enjoyable working with 11ty, nuxt.js and strapi than with Wordpress.
On the performance and accessibility side, it also seems to be the better/smarter choice. It might not be everytime! ¯\\\_(ツ)\_/¯
Cant wait to learn [astro](https://astro.build/) and start from scratch again!

View File

@ -0,0 +1,124 @@
---
title: Video compression
subtitle: Encode like you mean it.
lang: en
slug: "video-compression"
excerpt: How to gain precious weight when encoding videos.
tags: ["Design"]
createdAt: "2021-05-05T09:00:00.000Z"
updatedAt: "2022-06-08T14:24:06.000Z"
---
import AstroImage from "../../../components/AstroImage.astro";
export const premiereExport = "https://assets.nardu.in/wordpress_8ee6f54b98.jpeg";
export const handbrakeBase = "https://assets.nardu.in/video-handbrake-1.jpeg";
export const handbrakeVideo = "https://assets.nardu.in/video-handbrake-2.jpeg";
export const handbrakeAudio = "https://assets.nardu.in/video-handbrake-3.jpeg";
export const handbrakeWeb = "https://assets.nardu.in/video-handbrake-4.jpeg";
## Let's play.
Videos are everywhere. **EVERYWHERE!** But videos can and will be huge when 4k becomes an internet standard. Currently, 1920x1080 is king and we usually have no problem hosting or playing this resolution.
## Because we can doesn't mean we should.
Right now, the (good) trend of web performance is on the rise. Everyone wants a blazing fast loading website, which might not be possible if we send requests to 100mb (or even more) videos.
With a good connection, users will not see the difference. But if we go down that path, nor will they with a 300mb one. So the goal is to make every asset as small as possible. It's already the case with images. But it's simpler and faster than video encoding.
## Small size, best quality.
Let's say we exported a 1920x1080 video from Premiere Pro with these basic settings:
<AstroImage
src={premiereExport}
width="673"
height="800"
alt=""
/>
It's gorgeous, it's Full HD, it's 1:30 minute of excellent editing but it's 50mb… What a shame.
> We can already bring down the size from Premiere or Media Encoder by selecting CBR instead of VBR and using a low bitrate (like 2 or 3).
Let's now use [Handbrake!](https://handbrake.fr/) It's free, open source and multi platform. You can also read this great article from [Ueno](https://loremipsum.ueno.co/dear-ueno-how-do-you-compress-videos-6657ebd9dd28?gi=930afecec398) on video encoding.
**Please please PLEASE. Never export videos from within After Effects.**
## Handbrake
### Summary screen
While it's not as nice as Premiere Pro, it has way more exporting capabilities. Follow these steps to use good standard settings:
1. Open your source video
1. Select a preset corresponding to your future usage like Fast 1080p30
1. Check Web Optimized
1. Keep MPEG-4 as the format
<AstroImage
src={handbrakeBase}
width="728"
height="337"
alt=""
/>
### Video screen
1. Keep H.264 (x264) or use H.264 nvidia nvenc if you can (crazy fast encoding by nvidia)
1. Choose Constant Quality and try a value between 20 and 30 (higher = smaller size but lower quality)
1. Choose Peak Framerate. If you don't know the framerate, keep the default setting
1. Choose the type of video you are encoding (film, animation…)
<AstroImage
src={handbrakeVideo}
width="728"
height="337"
alt=""
/>
### Audio screen
If you don't have audio, be sure to set the audio channel to none.
If you have an audio channel, these settings are great and will not influence the size much:
1. Codec AAC
1. Samplerate 44.1
1. Bitrate 192 to 256 (your choice)
<AstroImage
src={handbrakeAudio}
width="728"
height="337"
alt=""
/>
### Export!
I used a RF of 25 for this example and no audio.
1. My Premiere Pro video was 50,6mb
1. My Handbrake video is 5,5mb
> What a save!
I ended up dividing the original size by 10. Which is cool.
I tried with a RF of 30. The video was still pretty good and only 3,3mb.
## Exporting for the web
Now that we know how to properly compress videos, let's go further. Say we have a website with a lot of videos on the same page. We still want to load the content as fast as possible. So our videos need to be as small as possible. We won't do better than previously seen using mp4/H.264. However, we can use **webm/VP9.**
Webm is an html video format and VP9 is its latest codec.
Using Handbrake and webm/VP9, we can achieve really great compression without losing too much quality (or none at all depending on the settings). I was able to divide by 4 the size of a video using these presets:
<AstroImage
src={handbrakeWeb}
width="728"
height="313"
alt=""
/>
The only down side is that it takes some time to encode. It will depend on the video length and your computing power.
I tried various settings but I read [here](https://trac.ffmpeg.org/wiki/Encode/VP9) that VP9 is supposed to be used with two-pass encoding. You then have to find the right bitrate (here 1000) for your situation.

View File

@ -0,0 +1,42 @@
---
title: Nico v2.0
subtitle: Mise à jour 2022 de plein de trucs.
lang: fr
slug: "2022"
excerpt: Évolution des services, du site et de moi-même.
tags: ["Freelance"]
createdAt: "2022-06-08T14:24:06.000Z"
---
Après deux ans de freelance à temps plein, jai pris du recul sur mon activité. Jai surtout questionné mon positionnement et les prestations que je proposais.
## Les services
### Jarrête le print
Même si je suis formé à lidentité visuelle, je nen fais que très rarement et ne pratique pas la discipline sur mon temps libre. Idem pour le graphisme «&nbsp;classique&nbsp;». Affiches, flyers et autres prospectus ont disparu de mes devis depuis bien longtemps. Il me semble ainsi logique de ne plus proposer explicitement ces services car je considère ne plus être suffisamment compétent ni intéressé.
### Jinternet à fond
À linverse, je passe mon temps à **faire du web.** Énormément de développement, un peu de design et pas mal de configuration serveur. Il est de fait évident pour moi de proposer **des offres web plus précises,** dans lesquelles je me suis spécialisé.
Ainsi, **laccessibilité numérique** et **léco-conception** deviennent des expertises intégrées à ma pratique. Ce ne sont plus des options sur un devis mais bien **mon cœur de métier.**
## Le site
Jai retravaillé mon site, notamment la page daccueil et son contenu, pour laccorder avec ces décisions.
Jai également fait plusieurs changements de comportements&nbsp;:
- les liens externes ne souvrent plus dans une nouvelle fenêtre. Je suis tombé sur <a href="https://css-tricks.com/use-target_blank/" rel="noopener noreferer" hreflang="en">cet article (en anglais)</a> traitant de louverture des liens dans une nouvelle fenêtre et je nai pas trouvé de bonne raison de continuer à utiliser ce comportement&nbsp;;
- jai supprimé les balises open graph et twitter card car je suis entièrement daccord avec [cette analyse](https://twitter.com/HTeuMeuLeu/status/1370310316496728065) de [@HTeuMeuLeu](https://twitter.com/HTeuMeuLeu)&nbsp;;
- [idem pour la favicon](https://twitter.com/HTeuMeuLeu/status/1370310312214339586)&nbsp;;
- je ne déclenche les animations que si l'utilisateur n'a pas demandé au système de minimiser la quantité d'animation ou de mouvement [(référence de l'option)](https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion).
Je suis en train de travailler pour réduire au maximum le poids de mes pages, même si je vais certainement devoir (encore) changer doutil (coucou <a href="https://astro.build/" rel="noopener noreferer" hreflang="en" >astro</a> 👀).
## Le Nico
Dun point de vue personnel, je me suis engagé pour un numérique plus responsable en rejoignant le collectif [Good-it!](https://www.good-it.org/) et en participant activement à son développement.
Jai également commencé à donner des cours dans plusieurs écoles. Jinterviens essentiellement sur des cursus numériques en enseignant le design et le développement. Jen profite ainsi pour sensibiliser, dès la formation, les futures générations à laccessibilité et léco-conception.

View File

@ -0,0 +1,11 @@
---
title: After Effects Expressions
subtitle: En cours de traduction, revenez bientôt ;)
lang: fr
slug: "after-effects-expressions"
excerpt: En cours de traduction, revenez bientôt ;)
tags: ["Design"]
createdAt: "2019-04-24T09:00:00.000Z"
---
[Retour aux articles](/articles/)

View File

@ -0,0 +1,73 @@
---
title: Accessibilité, sobriété et F.A.Q.
subtitle: Explications sur ma vision et mon fonctionnement.
lang: fr
slug: "faq"
excerpt: Pourquoi, comment et surtout quèsaco.
tags: ["Freelance"]
createdAt: "2022-06-22T15:34:45.000Z"
---
## l'Accessibilité
### Quèsaco&nbsp;?
D'après [access42&nbsp;:](https://access42.net)
> Laccessibilité numérique est un droit fondamental. Cest la possibilité pour toutes et tous dutiliser les outils informatiques, quelle que soit leur façon dy accéder.
Ainsi, lorsque je <span lang="en">design</span> ou développe un site web, je fais le maximum pour que **n'importe quel visiteur** puisse l'utiliser. On pourrait croire que cela rajoute une charge de travail ou un délai allongé de réalisation mais **ce n'est pas le cas&nbsp;!**
Lorsqu'un site est pensé et conçu avec l'accessibilité en tête, il ne prend **pas plus de temps** qu'un projet qui ne le fait pas. En revanche, **corriger** un site existant qui n'a pas bénéficié de cette réflexion en amont **demande beaucoup plus d'efforts.**
### Pourquoi c'est important&nbsp;?
Après avoir été sensibilisé à l'accessibilité et aux [situations frustrantes voire bloquantes](https://www.france24.com/fr/info-en-continu/20220520-internet-parcours-d-obstacles-pour-les-aveugles) que rencontrent les personnes handicapées sur le web, j'ai décidé de tout faire pour me former et travailler en connaissance de cause. Il m'a semblé que proposer des sites utilisables par le plus grand nombre devait être la norme.
## l'Éco-conception
### Quèsaco&nbsp;?
D'après le collectif [<span lang="en">green it</span>&nbsp;:](https://www.greenit.fr)
> Léco-conception de service numérique consiste à améliorer lefficience des applications dès leur conception pour réduire les impacts environnementaux et économiques associés tout en améliorant significativement lexpérience utilisateur.
Il s'agit ici pour moi de créer des produits les plus sobres possibles. C'est-à-dire de développer ou d'utiliser une fonctionnalité uniquement si elle est indispensable.
Par exemple, mettre en place **un formulaire de contact** sur un site web implique plusieurs choses&nbsp;:
- développer un formulaire
- envoyer les données au serveur
- vérifier les données envoyées
- envoyer les données par mail
- confirmer l'envoi du mail (en fournissant une copie)
- gérer les erreurs à chaque étape
Un site statique seul ne peut pas faire tout ça. Il faut obligatoirement un serveur et un langage capable d'effectuer ces opérations (ou un prestataire qui s'en charge). C'est pourquoi je recommande une adresse email et un numéro de téléphone comme moyen de contact plutôt qu'un formulaire. Dans le cas d'un questionnaire ou autre situation particulière, un formulaire est tout à fait envisageable.
### Pourquoi c'est important&nbsp;?
L'éco-conception fait beaucoup de bien à la qualité globale d'un site et à l'expérience des visiteurs. En effet, étant réalisé uniquement avec ce dont il a besoin, il aura tendance à être plus léger, mieux optimisé, plus rapide, etc.
## F.A.Q.
### Cette démarche est-elle opportuniste&nbsp;?
**Non.** Il est vrai que l'accessibilité et, surtout, l'éco-conception, commencent à être «&nbsp;tendance&nbsp;». On pourrait donc croire que j'en profite pour faire du <span lang="en">business</span>. Je considère cependant que c'est ma responsabilité de créer des sites web accessibles et éco-conçus **par défaut.**
### Un site accessible est-il plus cher&nbsp;?
**Oui et non.** Oui car si on demande un audit, il faudra payer la société qui le réalise. De mon côté, je ne fais pas payer l'accessibilité plus cher sur mes factures étant donné que je travaille ainsi par défaut.
En revanche, j'augmente mes tarifs suite à l'obtention de certifications relatives à mon activité.
### Mon site sera-t-il 100&nbsp;% accessible&nbsp;?
**Non,** je ne suis pas en mesure de garantir ou de certifier la conformité totale d'un site au [référentiel général d'amélioration de l'accessibilité.](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/) Seul un audit exécuté par une entreprise apte à le réaliser peut certifier la conformité d'un site. Cependant, je peux vous accompagner avant et après l'audit afin d'anticiper puis de corriger les critères d'accessibilité requis. [Access42](https://access42.net/) et [Tanaguru](https://www.tanaguru.com/) font parties de ces entreprises spécialisées.
### Pourquoi ne pas utiliser un outil automatique&nbsp;?
Car ces outils dits de “surcouche” (dont il ne faut pas prononcer le nom [sous peine de procès](https://www.lalutineduweb.fr/aide-frais-avocate-proces-contre-faciliti/)), ne sont pas des solutions micracles. Lisez [cet article](https://www.lalutineduweb.fr/surcouche-accessibilite-web-mensonges-boules-gommes/) d'une experte en accessibilité et/ou [ce test](https://blog.empreintedigitale.fr/2021/06/01/outils-de-surcouche-daccessibilite-que-valent-ils-vraiment/) de différents outils pour en savoir plus.
### Un site éco-conçu et accessible peut-il être beau&nbsp;?
**Oui, évidemment.** Je vous laisse juger par vous-même avec [cette liste](https://lowww.directory/) de sites éco-conçus. En ce qui concerne l'accessibilité, elle n'impacte que très peu le <span lang="en">design</span> global d'un site. Même si plusieurs critères visuels existent (contrastes, taille du texte, etc.), elle se concentre essentiellement sur le fonctionnement et l'utilisation d'un produit.

View File

@ -0,0 +1,72 @@
---
title: "Gratuiste"
subtitle: "Ou le travail gratuit."
lang: fr
slug: "gratuiste"
excerpt: "Jai cherché un moyen de mettre mes compétences au service dautrui et je pense avoir trouvé: je vais travailler gratuitement pour des associations."
tags: ["Graphisme", "Freelance"]
createdAt: "2017-05-27T07:47:36.000Z"
updatedAt: "2022-12-27T15:36:06.000Z"
---
## Gratuiste, quest-ce que cest ?
Dans le monde francophone du graphisme, le terme gratuiste est un terme péjoratif employé pour dénoncer certaines conditions de travail. Les plus répandues sont les concours daffiche/de logo, les clients qui demandent que vous commenciez à travailler sans vous payer et qui paieront si ça leur convient, les appels doffre non défrayés, etc.
De plus en plus, la communauté sélève contre ces pratiques et les [dénonce.](https://twitter.com/PayeTonAffiche)
> “ On nest pas des gratuistes ! ”
Comprendre : nous exerçons un métier à part entière qui requiert de nombreuses connaissances et beaucoup de travail, payez-nous. Rien dextravagant en somme. Regardez [cette vidéo](https://youtu.be/essNmNOrQto) qui transpose ces pratiques à des métiers “ standards ” et [celle-ci](https://youtu.be/DsstOs-K7gk) qui explique en détails le processus actuel.
## Tes débile du coup ?
Jaime à penser que non. Je naspire pas à devenir gratuiste dans ce sens là du terme. Jaimerais lui en donner un nouveau, plus positif. Dans les conditions précédentes, gratuiste est en effet une situation que personne (graphiste ou autre) naimerait expérimenter et encore moins promouvoir. À part peut-être des “ clients ” sans scrupules.
Étant encore assez nouveau sur le marché du travail, je nai pas la solution de faire des dons à des associations, quils soient financiers ou autre.
Néanmoins, jai envie daider à mon échelle et selon mes capacités.
## Le concept
Je compte proposer mes services et mes compétences gratuitement à des associations caritatives/ONG qui viennent en aide aux personnes dans le besoin ou aux animaux.
Ce type de prestation porte le nom de “ **pro bono publico****pour le bien public** ”.
Cette pratique existe essentiellement dans les milieux juridiques. Je pense cependant quelle nest pas incompatible avec le métier de graphiste.
> Graphiste pro bono, pourquoi pas&nbsp;?
## Quels genres de services ?
En toute logique, le type qui rend service à lassociation, qui peut faire une différence. À mes yeux, essentiellement des sites internet. Je pense quun site web aura bien plus dintérêt quun nouveau logo. Pourquoi pas des flyers/des petits visuels pour des pins/badges.
### En résumé :
- maquette de site web
- intégration front-end (en dur ou via wordpress) du site
- gestion de la mise en ligne du site
- newsletter (design et/ou intégration)
- flyers
- autres petites demandes
Vous pouvez avoir un aperçu de mon travail [sur ce même site.](/) Jai déjà eu loccasion de travailler pour&nbsp;:
- [Cygnal](/projets/cygnal)
- [OpenMole](https://openmole.org/)
- [Good-it](https://good-it.org)
## Dans quelles conditions ?
- lassociation doit être active
- elle doit porter des valeurs que je partage
- elle doit pouvoir me montrer ses actions
- elle ne doit pas avoir les moyens de se payer un graphiste
## Cest un peu trop beau pour être vrai ton truc…
Il faut garder à lesprit que je compte travailler bénévolement pendant mon temps libre. Je ne cherche pas une relation client habituelle puisquil ny aura pas de client à proprement parler. Cela me permettra déviter des délais intenables, des retours par milliers et toute obligation de finir le travail en cas de coup fourré.
Je préfère être franc là-dessus même si je ne me fais pas trop de soucis sur les mœurs du monde associatif. Aussi, faudra-t-il être un peu patient si jamais jai déjà une demande en cours.
Si vous êtes intéressés, [envoyez-moi un mail !](mailto:contac@nardu.in)
## Quest-ce que ty gagnes toi ?
Simplement la satisfaction davoir aidé, à mon échelle, des personnes en difficulté. Je ne fais pas ça pour me faire de la pub ou pour étayer mon portfolio. Cela me permettra en revanche de travailler sur dautres sujets et dans un cadre différent.

View File

@ -3,12 +3,21 @@ title: "Sci-hub bloqué, comment contourner"
subtitle: "La science du partage."
lang: fr
slug: "sci-hub-blocage"
key: "scihub"
excerpt: "Le tribunal de grande instance de Paris a ordonné aux fournisseurs daccès à internet de bloquer laccès à sci-hub. Voici comment contourner les blocages mis en place."
tags: ["Internet", "Science"]
pubDate: "2019-03-31T07:47:36.000Z"
createdAt: "2019-03-31T07:47:36.000Z"
updatedAt: "2022-12-27T12:08:00.000Z"
---
import AstroImage from "../../../components/AstroImage.astro";
export const macOs =
"https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg";
export const windowsSettings = "https://assets.nardu.in/sci-hub-settings.jpg";
export const windowsNetwork = "https://assets.nardu.in/sci-hub-network.jpg";
export const windowsAdapter = "https://assets.nardu.in/sci-hub-adapter.jpg";
export const windowsAdapterSettings =
"https://assets.nardu.in/sci-hub-adapter-settings.jpg";
L'adresse actuelle de sci-hub est&nbsp;: [sci-hub.se](https://sci-hub.se)
## Résumé de la situation
@ -22,7 +31,7 @@ Le blocage mis en place est assez basique. Il sagit dun blocage “ DNS
Un DNS est un serveur qui sert à faire le lien entre un nom de domaine&nbsp;: **sci-hub.tw** et une adresse IP : **186.2.163.90**.
Cest en quelque sorte lannuaire dinternet. Sans ladresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait&nbsp;: bloquer les requêtes au nom de domaine [sci-hub.tw.](http://sci-hub.tw/) Ainsi, aucune adresse IP nest renvoyée et le site nest pas accessible.
Cest en quelque sorte lannuaire dinternet. Sans ladresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait&nbsp;: bloquer les requêtes au nom de domaine [sci-hub.se.](http://sci-hub.se/) Ainsi, aucune adresse IP nest renvoyée et le site nest pas accessible.
## Comment contourner ce blocage&nbsp;?
@ -32,28 +41,27 @@ Cest en quelque sorte lannuaire dinternet. Sans ladresse, impossible
Je recommande la deuxième solution car elle permet de se prémunir contre de futurs blocages/filtrages/censures de la part de votre FAI et ne nécessite pas de contrepartie financière.
Je vais me focaliser sur le changement depuis un ordinateur car il sera effectif où que vous soyez.
### Sur MacOs&nbsp;:
### Sur MacOs
Ouvrez&nbsp;:
1. Préférences système
1. Réseau
1. Ethernet et/ou Wi-fi
1. Avancé
1. DNS
1. Serveurs DNS
De là, vous pouvez ajouter des serveurs DNS en cliquant sur l'icône +. Cliquez sur ok et appliquez les nouveaux paramètres. Vous devrez peut-être redémarrer votre ordinateur pour que les changements fonctionnent.