added content
This commit is contained in:
Nico
parent
bf2221b9a9
commit
9b91b02d90
79 changed files with 3053 additions and 284 deletions
42
src/content/articles/en/2022.md
Normal file
42
src/content/articles/en/2022.md
Normal 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/) 👀).
|
||||
|
||||
## 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.
|
||||
116
src/content/articles/en/after-effects-expressions.mdx
Normal file
116
src/content/articles/en/after-effects-expressions.mdx
Normal 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.
|
||||
11
src/content/articles/en/faq.md
Normal file
11
src/content/articles/en/faq.md
Normal 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/)
|
||||
11
src/content/articles/en/gratuiste.md
Normal file
11
src/content/articles/en/gratuiste.md
Normal 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/)
|
||||
|
|
@ -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, here’s 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.
|
||||
|
||||
76
src/content/articles/en/the-day-I-jamd.mdx
Normal file
76
src/content/articles/en/the-day-I-jamd.mdx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: The day I Jam’d
|
||||
subtitle: A story of unusual tools and fun gambles.
|
||||
lang: en
|
||||
slug: "the-day-I-jamd"
|
||||
excerpt: Ooh, yeah! All right! We’re 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. I’m 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**… I’ll 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 it’s still scary to most compared to Wordpress. I feel however that it’s 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, I’m sorry, I couldn’t 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.
|
||||
|
||||
Don’t 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).
|
||||
|
||||
I’m 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 I’m still too attached to this accomplishment to let it go. I wrote [an article on Strapi running with OpenLiteSpeed](/en/articles/strapi-openlitespeed) if you’re 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! ¯\\\_(ツ)\_/¯
|
||||
|
||||
Can’t wait to learn [astro](https://astro.build/) and start from scratch again!
|
||||
124
src/content/articles/en/video-compression.md
Normal file
124
src/content/articles/en/video-compression.md
Normal 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.
|
||||
42
src/content/articles/fr/2022.md
Normal file
42
src/content/articles/fr/2022.md
Normal 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, j’ai pris du recul sur mon activité. J’ai surtout questionné mon positionnement et les prestations que je proposais.
|
||||
|
||||
## Les services
|
||||
|
||||
### J’arrête le print
|
||||
|
||||
Même si je suis formé à l’identité visuelle, je n’en fais que très rarement et ne pratique pas la discipline sur mon temps libre. Idem pour le graphisme « classique ». 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é.
|
||||
|
||||
### J’internet à fond
|
||||
|
||||
À l’inverse, 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, **l’accessibilité 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
|
||||
|
||||
J’ai retravaillé mon site, notamment la page d’accueil et son contenu, pour l’accorder avec ces décisions.
|
||||
|
||||
J’ai également fait plusieurs changements de comportements :
|
||||
|
||||
- les liens externes ne s’ouvrent 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 l’ouverture des liens dans une nouvelle fenêtre et je n’ai pas trouvé de bonne raison de continuer à utiliser ce comportement ;
|
||||
- j’ai supprimé les balises open graph et twitter card car je suis entièrement d’accord avec [cette analyse](https://twitter.com/HTeuMeuLeu/status/1370310316496728065) de [@HTeuMeuLeu](https://twitter.com/HTeuMeuLeu) ;
|
||||
- [idem pour la favicon](https://twitter.com/HTeuMeuLeu/status/1370310312214339586) ;
|
||||
- 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 d’outil (coucou <a href="https://astro.build/" rel="noopener noreferer" hreflang="en" >astro</a> 👀).
|
||||
|
||||
## Le Nico
|
||||
|
||||
D’un 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.
|
||||
|
||||
J’ai également commencé à donner des cours dans plusieurs écoles. J’interviens essentiellement sur des cursus numériques en enseignant le design et le développement. J’en profite ainsi pour sensibiliser, dès la formation, les futures générations à l’accessibilité et l’éco-conception.
|
||||
11
src/content/articles/fr/after-effects-expressions.md
Normal file
11
src/content/articles/fr/after-effects-expressions.md
Normal 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/)
|
||||
73
src/content/articles/fr/faq.md
Normal file
73
src/content/articles/fr/faq.md
Normal 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 ?
|
||||
|
||||
D'après [access42 :](https://access42.net)
|
||||
|
||||
> L’accessibilité numérique est un droit fondamental. C’est la possibilité pour toutes et tous d’utiliser les outils informatiques, quelle que soit leur façon d’y 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 !**
|
||||
|
||||
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 ?
|
||||
|
||||
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 ?
|
||||
|
||||
D'après le collectif [<span lang="en">green it</span> :](https://www.greenit.fr)
|
||||
|
||||
> L’éco-conception de service numérique consiste à améliorer l’efficience des applications dès leur conception pour réduire les impacts environnementaux et économiques associés tout en améliorant significativement l’expé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 :
|
||||
|
||||
- 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 ?
|
||||
|
||||
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 ?
|
||||
|
||||
**Non.** Il est vrai que l'accessibilité et, surtout, l'éco-conception, commencent à être « tendance ». 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 ?
|
||||
|
||||
**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 % accessible ?
|
||||
|
||||
**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 ?
|
||||
|
||||
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 ?
|
||||
|
||||
**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.
|
||||
72
src/content/articles/fr/gratuiste.md
Normal file
72
src/content/articles/fr/gratuiste.md
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
title: "Gratuiste"
|
||||
subtitle: "Ou le travail gratuit."
|
||||
lang: fr
|
||||
slug: "gratuiste"
|
||||
excerpt: "J’ai cherché un moyen de mettre mes compétences au service d’autrui 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, qu’est-ce que c’est ?
|
||||
|
||||
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 d’affiche/de logo, les clients qui demandent que vous commenciez à travailler sans vous payer et qui paieront si ça leur convient, les appels d’offre 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 n’est 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 d’extravagant 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.
|
||||
|
||||
## T’es débile du coup ?
|
||||
|
||||
J’aime à penser que non. Je n’aspire pas à devenir gratuiste dans ce sens là du terme. J’aimerais lui en donner un nouveau, plus positif. Dans les conditions précédentes, gratuiste est en effet une situation que personne (graphiste ou autre) n’aimerait expérimenter et encore moins promouvoir. À part peut-être des “ clients ” sans scrupules.
|
||||
|
||||
Étant encore assez nouveau sur le marché du travail, je n’ai pas la solution de faire des dons à des associations, qu’ils soient financiers ou autre.
|
||||
Néanmoins, j’ai envie d’aider à 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 qu’elle n’est pas incompatible avec le métier de graphiste.
|
||||
|
||||
> Graphiste pro bono, pourquoi pas ?
|
||||
|
||||
## Quels genres de services ?
|
||||
|
||||
En toute logique, le type qui rend service à l’association, qui peut faire une différence. À mes yeux, essentiellement des sites internet. Je pense qu’un site web aura bien plus d’intérêt qu’un nouveau logo. Pourquoi pas des flyers/des petits visuels pour des pin’s/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.](/) J’ai déjà eu l’occasion de travailler pour :
|
||||
|
||||
- [Cygnal](/projets/cygnal)
|
||||
- [OpenMole](https://openmole.org/)
|
||||
- [Good-it](https://good-it.org)
|
||||
|
||||
## Dans quelles conditions ?
|
||||
|
||||
- l’association 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
|
||||
|
||||
## C’est un peu trop beau pour être vrai ton truc…
|
||||
|
||||
Il faut garder à l’esprit que je compte travailler bénévolement pendant mon temps libre. Je ne cherche pas une relation client habituelle puisqu’il n’y 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 j’ai déjà une demande en cours.
|
||||
|
||||
Si vous êtes intéressés, [envoyez-moi un mail !](mailto:contac@nardu.in)
|
||||
|
||||
## Qu’est-ce que t’y gagnes toi ?
|
||||
|
||||
Simplement la satisfaction d’avoir 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 d’autres sujets et dans un cadre différent.
|
||||
|
|
@ -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 d’accès à internet de bloquer l’accè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 : [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 s’agit d’un blocage “ DNS
|
|||
|
||||
Un DNS est un serveur qui sert à faire le lien entre un nom de domaine : **sci-hub.tw** et une adresse IP : **186.2.163.90**.
|
||||
|
||||
C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait : bloquer les requêtes au nom de domaine [sci-hub.tw.](http://sci-hub.tw/) Ainsi, aucune adresse IP n’est renvoyée et le site n’est pas accessible.
|
||||
C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, impossible de contacter le domaine. Ce que les FAI ont certainement fait : bloquer les requêtes au nom de domaine [sci-hub.se.](http://sci-hub.se/) Ainsi, aucune adresse IP n’est renvoyée et le site n’est pas accessible.
|
||||
|
||||
## Comment contourner ce blocage ?
|
||||
|
||||
|
|
@ -32,28 +41,27 @@ C’est en quelque sorte l’annuaire d’internet. Sans l’adresse, 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 :
|
||||
### Sur MacOs
|
||||
|
||||
Ouvrez :
|
||||
|
||||
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.
|
||||
|
||||
<nuxt-img
|
||||
src="https://assets.nardu.in/ef5a4b8e82a046e6a466c73c2fd9e99e.jpg"
|
||||
sizes="sm:100vw xl:728px"
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS réglages réseau et DNS"
|
||||
loading="lazy">
|
||||
</nuxt-img>
|
||||
<AstroImage
|
||||
src={macOs}
|
||||
width="728"
|
||||
height="1060"
|
||||
alt="MacOS réglages réseau et DNS"
|
||||
/>
|
||||
|
||||
### Sur Windows (ici 10) :
|
||||
### Sur Windows (ici 10)
|
||||
|
||||
Ouvrez :
|
||||
|
||||
|
|
@ -65,53 +73,33 @@ Ouvrez :
|
|||
1. Propriétés
|
||||
1. Utiliser l’adresse de serveur DNS suivante
|
||||
|
||||
<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="Réglages windows"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsSettings}
|
||||
width="728"
|
||||
height="319"
|
||||
alt="Réglages windows"
|
||||
/>
|
||||
|
||||
<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 réglages réseaux"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsNetwork}
|
||||
width="728"
|
||||
height="803"
|
||||
alt="Windows réglages réseaux"
|
||||
/>
|
||||
|
||||
<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 régalges connections réseaux"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsAdapter}
|
||||
width="728"
|
||||
height="327"
|
||||
alt="Windows régalges connections réseaux"
|
||||
/>
|
||||
|
||||
<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 options adaptateur réseau"
|
||||
loading="lazy" >
|
||||
</nuxt-img>
|
||||
</picture>
|
||||
<AstroImage
|
||||
src={windowsAdapterSettings}
|
||||
width="728"
|
||||
height="434"
|
||||
alt="Windows options adaptateur réseau"
|
||||
/>
|
||||
|
||||
## Quels serveurs DNS utiliser ?
|
||||
|
||||
|
|
@ -130,16 +118,16 @@ Mes favoris puisqu’il s’agit d’une [association française.](https://www.f
|
|||
- 2001:910:800::12
|
||||
- 2001:910:800::40
|
||||
|
||||
### [Cloudflare DNS](https://1.1.1.1/)
|
||||
### [Quad9](https://www.quad9.net/fr)
|
||||
|
||||
Pour ceux qui veulent les serveurs DNS [“ les plus rapides du monde ”.](https://www.dnsperf.com/#!dns-resolvers)
|
||||
Quand9 est une fondation à but non lucratif proposant des serveurs DNS publics et gratuits. Leurs serveur classiques offrent un filtrage de domaines malveillants identifiés. Ils ne collectent pas de données et sont conforment au <abbr title="Règlement général sur la protection des données">RGPD</abbr>.
|
||||
|
||||
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
|
||||
|
||||
## C'est tout.
|
||||
|
||||
76
src/content/articles/fr/the-day-I-jamd.mdx
Normal file
76
src/content/articles/fr/the-day-I-jamd.mdx
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
---
|
||||
title: The day I Jam’d
|
||||
subtitle: Des paris, des outils et du fun.
|
||||
lang: fr
|
||||
slug: "the-day-I-jamd"
|
||||
excerpt: Ooh, yeah! All right! We’re jammin’
|
||||
tags: ["Dev", "Jamstack"]
|
||||
createdAt: "2020-10-08T07:47:36.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";
|
||||
|
||||
## La solution de non facilité
|
||||
|
||||
Lorsque j’utilisais encore Wordpress pour mon site web personnel, j’ai voulu essayer le serveur web <a href="https://openlitespeed.org" lang="en" hreflang="en" rel="noopener noreferer">OpenLiteSpeed (en anglais)</a>. En tant que designer, j’ai toujours aimé avoir une interface graphique et j’avais entendu dire qu’OLS jouissait de bonnes performances en général et de cache en particulier.
|
||||
|
||||
## Battez-vous!
|
||||
|
||||
Quelques années plus tard, je découvrais l’univers Jamstack et son incroyable potentiel. N’étant pas du tout impulsif, j’ai choisi de refaire entièrement mon site web avec des outils comme <a href="https://www.11ty.dev/" lang="en" hreflang="en" rel="noopener noreferer">11ty (en anglais)</a> et <a href="https://strapi.io/" hreflang="en">Strapi (en anglais)</a>.
|
||||
|
||||
Je me souviens que Strapi était encore en alpha/beta et que certains collègues me disaient que c’était un pari risqué, surtout que je découvrais à peine le monde de node.js.
|
||||
|
||||
> Open source et français ? Je dis banco !
|
||||
|
||||
J’ai donc commencé à recréer mon site web à l’identique avec 11ty et Strapi. Même hébergement chez Digital Ocean, même serveur web, même contenu. J’avais fait pas mal d’optimisations de performances sur mon installation wordpress, j’étais donc impatient de comparer les résultats avec la nouvelle version statique.
|
||||
|
||||
J’en suis resté pantois ! Quasiment sans optimisation du côté statique, j’ai obtenu les résultats ci-dessous.
|
||||
|
||||
### wordpress
|
||||
|
||||
<AstroImage
|
||||
src={wordpress}
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Score de performance de 53/100 sur Wordpress."
|
||||
/>
|
||||
|
||||
Malgré beaucoup d’efforts, je n’ai pas pu faire mieux. Je ne suis pas un expert en cache, je n’utilise pas de CDN et je me suis appuyé sur des plugins pour réaliser beaucoup de choses (php n’étant pas ma spécialité 😬).
|
||||
|
||||
### 11ty + strapi
|
||||
|
||||
<AstroImage
|
||||
src={strapi11ty}
|
||||
width="728"
|
||||
height="412"
|
||||
alt="Score de performance de 97/100 en Jamstack."
|
||||
/>
|
||||
|
||||
Presque **zéro** configuration spéciale (j’étais trop impatient de tester) et j’ai atteint un score impressionnant. Je sais que les scores lighthouse ne font pas tout mais **53 contre 97**… Ça me va !
|
||||
|
||||
## Embrassez-vous 🥰
|
||||
|
||||
Ces deux approches ont leurs avantages et leurs inconvénients. En tant que freelance, mes clients préfèrent ou demandent souvent Wordpress en raison de sa réputation. Je présente toujours une alternative Jamstack lorsque c’est possible, mais cela reste effrayant la plupart du temps par rapport à Wordpress. Je pense cependant qu’il sera plus facile d’utiliser la Jamstack avec le temps.
|
||||
|
||||
## Encore et encore…
|
||||
|
||||
Nous voici maintenant une quarantaine et quelques mois plus tard et ce site fonctionne avec… [Nuxt.js](https://fr.nuxtjs.org/). Je sais, je suis désolé, je n’ai pas pu résister à la dernière fonctionnalité [<span lang="en">nuxt content</span>](https://content.nuxtjs.org/fr) de Nuxt.
|
||||
|
||||
Du coup j’ai tout refait… et laissez-moi vous dire : **wow**, quelle expérience !
|
||||
J’adore développer avec Nuxt. L’utilisation de <span lang="en">nuxt content</span> m’a permis de me concentrer sur le design et, évidemment, sur le contenu.
|
||||
Plus de client Apollo ni de requête graphQL, seulement du <span lang="en">markdown</span> et quelques promesses.
|
||||
|
||||
Attention, j’aime beaucoup travailler avec Strapi et son interface graphQL mais pour les besoins de ce site, <span lang="en">nuxt content</span> fait le <span lang="en">job</span> (extrêmement bien).
|
||||
|
||||
J’utilise toujours Strapi pour téléverser, stocker et gérer les images, vidéos, gifs, etc. C’est peut-être trop pour ce que j’en fait mais j’aime savoir que je peux toujours y revenir si j’ai envie ! De plus, j’ai passé pas mal de temps à le mettre en place avec <span lang="en">OpenLiteSpeed</span> et je suis encore trop attaché à cette réussite pour la laisser tomber.
|
||||
|
||||
## Et en fait à la fin
|
||||
|
||||
Wordpress, Jamstack, fait main… Est-ce vraiment important ? Pour moi, l’expérience de développement a été bien plus agréable en travaillant avec 11ty, nuxt.js et strapi qu’avec Wordpress.
|
||||
|
||||
Du point de vue de la performance et de l’accessibilité, il semble également que ce soit le choix le plus judicieux. Ce n’est peut-être pas le cas à chaque fois ! ¯\\\_(ツ)\_/¯
|
||||
|
||||
J’ai hâte d’apprendre <a href="https://astro.build/" rel="noopener noreferer" hreflang="en" >astro</a> et de tout recommencer à zéro !
|
||||
12
src/content/articles/fr/video-compression.md
Normal file
12
src/content/articles/fr/video-compression.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: Compression vidéo
|
||||
subtitle: En cours de traduction, revenez bientôt ;)
|
||||
lang: fr
|
||||
slug: "video-compression"
|
||||
excerpt: Pas encore traduit
|
||||
tags: ["Design"]
|
||||
createdAt: "2021-05-05T09:00:00.000Z"
|
||||
updatedAt: "2022-06-08T14:24:06.000Z"
|
||||
---
|
||||
|
||||
[Retour aux articles](/articles/)
|
||||
Loading…
Add table
Add a link
Reference in a new issue