diff --git a/404.html b/404.html index 42ff731..0c3c02c 100644 --- a/404.html +++ b/404.html @@ -1 +1 @@ -404 | Yann Prono
Blog Recipes Links

404 not found

\ No newline at end of file +404 | Yann Prono
Blog Recipes Links

404 not found

\ No newline at end of file diff --git a/articles/after-effects-date/index.html b/articles/after-effects-date/index.html index 8c1a169..8dcd915 100644 --- a/articles/after-effects-date/index.html +++ b/articles/after-effects-date/index.html @@ -1,4 +1,4 @@ -Adobe After Effects and JavaScript | Yann Prono
Blog Recipes Links

Adobe After Effects and JavaScript

On January 1st 2021, I challenged myself: record 1 second of video every day for the entire 2021 year and compile them into a single film. I really enjoyed achieving this idea: It felt great to make something a little creative since I'm not at all, I could get familiar with my camera, I still love video editing and it was a perfect reason to say hello to my family/friends. Finally, it was even more exciting since I kept the challenge secret.

But enough storytelling, Let's get to the point of this article: Something I wanted for this video is the current date the video was taken. And of course, changing 365 times the text layer in my Adobe project was not part of the plan. So let's explore how to automate this tedious task in Adobe After Effects.

Scripting in Adobe applications

When I was a student, I learned that Adobe applications come with a scripting language named ExtendScript. Even though the language was syntactically close to JavaScript, I didn't even try it. The reason? With the Studio crew, we were very focused on investigating all the secrets of a light hoppy drink, with a drawing of the flying dutchman on the bottle.

Since October 2018, no more excuses: most Adobe applications embed a JavaScript engine (V8 or JavaScriptCore), which means we can write modern JS and use the latest features.

Generating the date

It means I should be able to generate all the dates with a few lines of code. I would write something like this if my target was the browser's runtime:

TS
function generateDate(time = 0) {
+Adobe After Effects and JavaScript | Yann Prono

    Adobe After Effects and JavaScript

    On January 1st 2021, I challenged myself: record 1 second of video every day for the entire 2021 year and compile them into a single film. I really enjoyed achieving this idea: It felt great to make something a little creative since I'm not at all, I could get familiar with my camera, I still love video editing and it was a perfect reason to say hello to my family/friends. Finally, it was even more exciting since I kept the challenge secret.

    But enough storytelling, Let's get to the point of this article: Something I wanted for this video is the current date the video was taken. And of course, changing 365 times the text layer in my Adobe project was not part of the plan. So let's explore how to automate this tedious task in Adobe After Effects.

    Scripting in Adobe applications

    When I was a student, I learned that Adobe applications come with a scripting language named ExtendScript. Even though the language was syntactically close to JavaScript, I didn't even try it. The reason? With the Studio crew, we were very focused on investigating all the secrets of a light hoppy drink, with a drawing of the flying dutchman on the bottle.

    Since October 2018, no more excuses: most Adobe applications embed a JavaScript engine (V8 or JavaScriptCore), which means we can write modern JS and use the latest features.

    Generating the date

    It means I should be able to generate all the dates with a few lines of code. I would write something like this if my target was the browser's runtime:

    TS
    function generateDate(time = 0) {
       const date = new Date(2021, 0, 1)
       date.setDate(date.getDate() + Math.floor(time))
       const options = { month: 'long', day: 'numeric' }
    diff --git a/articles/cookies/index.html b/articles/cookies/index.html
    index fbb0e16..dd47dd0 100644
    --- a/articles/cookies/index.html
    +++ b/articles/cookies/index.html
    @@ -1 +1 @@
    -A tool about cookies | Yann Prono

      A tool about cookies

      A few days before deploying my project in production, I ran into an issue on the preproduction application: I was not able to log into the back office even though my credentials were correct. Who is to blame? My code? The authentication service? The server? The compiler (why not)? What about you, Yann?!

      The problem was the cookie: It was never sent because of two misconfigured attributes path and domain. So I decided to spend 8 hours making this tool to gain 2 minutes of RTFM the next time I have to deal with cookies.

      This tool is for educational purposes. It's not battle-tested so don't use it to prove your cookies are secure. Ping me on Github for issues.

      \ No newline at end of file +A tool about cookies | Yann Prono

        A tool about cookies

        A few days before deploying my project in production, I ran into an issue on the preproduction application: I was not able to log into the back office even though my credentials were correct. Who is to blame? My code? The authentication service? The server? The compiler (why not)? What about you, Yann?!

        The problem was the cookie: It was never sent because of two misconfigured attributes path and domain. So I decided to spend 8 hours making this tool to gain 2 minutes of RTFM the next time I have to deal with cookies.

        This tool is for educational purposes. It's not battle-tested so don't use it to prove your cookies are secure. Ping me on Github for issues.

        \ No newline at end of file diff --git a/articles/first-time-arch-linux/index.html b/articles/first-time-arch-linux/index.html index 812361c..3070711 100644 --- a/articles/first-time-arch-linux/index.html +++ b/articles/first-time-arch-linux/index.html @@ -1,4 +1,4 @@ -My Arch Linux install | Yann Prono

          My Arch Linux install

          This article is a guide for myself: I spent hours writing bash scripts to install Arch Linux on my machine from scratch. There is room for improvement but right now I'm happy with this setup.

          Getting started

          Create a Arch Linux Installer USB drive:

          bash
          # Download the ISO
          +My Arch Linux install | Yann Prono

            My Arch Linux install

            This article is a guide for myself: I spent hours writing bash scripts to install Arch Linux on my machine from scratch. There is room for improvement but right now I'm happy with this setup.

            Getting started

            Create a Arch Linux Installer USB drive:

            bash
            # Download the ISO
             curl -L "https://geo.mirror.pkgbuild.com/iso/latest/archlinux-x86_64.iso" -O
             
             # Format and copy the iso on the thumb drive
            diff --git a/articles/h4ppy-b1r7hd4y/index.html b/articles/h4ppy-b1r7hd4y/index.html
            index 30398b3..67037c4 100644
            --- a/articles/h4ppy-b1r7hd4y/index.html
            +++ b/articles/h4ppy-b1r7hd4y/index.html
            @@ -1,4 +1,4 @@
            -Happy birthday | Yann Prono

              h4ppy b1r7hd4y

                h4ppy b1r7hd4y

                  Introduction to 3D in CSS

                  H E L P !

                  This article is a modest introduction to 3D in CSS through an example. I share with you how I made a Minecraft creeper head in CSS and animated it with JavaScript. This article is composed of 2 parts:

                  1. Modeling a Minecraft creeper head.

                  2. Making the creeper alive.

                  Modeling the cube

                  Modeling the creeper head is like modeling a cube. I use 2 assets:

                  • The face of the creeper, face.avif

                  • The side of his head, side.avif

                  Each side of the cube is represented by an img tag and is nested in a div element. We need 6 images for the 6 square faces:

                  HTML
                  <div class="creeper">
                  +Introduction to 3D in CSS | Yann Prono

                    Introduction to 3D in CSS

                    H E L P !

                    This article is a modest introduction to 3D in CSS through an example. I share with you how I made a Minecraft creeper head in CSS and animated it with JavaScript. This article is composed of 2 parts:

                    1. Modeling a Minecraft creeper head.

                    2. Making the creeper alive.

                    Modeling the cube

                    Modeling the creeper head is like modeling a cube. I use 2 assets:

                    • The face of the creeper, face.avif

                    • The side of his head, side.avif

                    Each side of the cube is represented by an img tag and is nested in a div element. We need 6 images for the 6 square faces:

                    HTML
                    <div class="creeper">
                       <img src="face.avif" alt="" class="side front" />
                       <img src="side.avif" alt="" class="side back" />
                       <img src="side.avif" alt="" class="side top" />
                    diff --git a/articles/my-facebook-feed-is-a-nightmare/index.html b/articles/my-facebook-feed-is-a-nightmare/index.html
                    index 7b348b6..a8c4dac 100644
                    --- a/articles/my-facebook-feed-is-a-nightmare/index.html
                    +++ b/articles/my-facebook-feed-is-a-nightmare/index.html
                    @@ -1 +1 @@
                    -My facebook feed is a nightmare | Yann Prono

                      My facebook feed is a nightmare

                      I joined the social network in 2008. At this time, I was in middle school; people were sharing photos and posting comments. It was great. The content I received was the content I expected. The platform has always been a way to keep me informed about music, movies, local events, etc. For example, 2 days ago, I learned that Arctic Monkeys announced a new album.

                      Nowadays, I still use facebook because of messenger. Family and friends use it although I would rather use privacy-friendly apps such as Signal or Element (Matrix).

                      So why do I argue my feed is a nightmare? I take my phone out of my pocket, I open the facebook application and then, the funniest thing happens:

                      A post of the Ancient aliens Theory facebook group💩

                      We start with a group about alien theories.

                      Amazon Fresh facebook ad💩

                      An ad about Amazon Fresh. I don't like Amazon. I thought you already knew that Facebook.

                      Screenshot a blackscreen facebook video.💩

                      This guy sells a $400 ticket for a 3 days retreat to guide you in discovering your truest potential, purpose and power. He describes himself as an awakening guide. He sounds like a guru to me, what do you think Facebook?

                      Screenshot of a facebook video showing backseat of yellow Skoda Felicia Fun Pickup💩

                      A suggested video about a guy filming a yellow Skoda Felicia Fun Pickup. In the video, the guy has a baby voice.

                      Screenshot of a facebook post showing a guy making youtube videos💩

                      A suggested video of a guy making tech videos on Youtube. I'm into tech so it could make sense but this is not tech I like at all.

                      Screenshot of a facebook post from Pepco about road closures💩

                      A sponsored post again? Did I break the Facebook algorithm or something?

                      Screenshot of a facebook video showing a bald guy wearing a headset💩

                      What the heck? Who's that guy with this unbearable voice? Where did my friend's content go?

                      Screenshot of a gallery of facebook reels💩

                      A gallery of videos from people I don't even know.

                      Video thumbnail: pet fishs, from $0.01 to $30,000💩

                      I'm getting pissed off. Who is this guy again? And why does Facebook suggest these kinds of content?

                      Screenshot of a video showing a woman working on a laptop with a energy drink💩

                      A summary of what I hate about marketing. This post considers people idiots.

                      A crappy meme about cars, old cars are viril, modern cars are compared to waxed people💩

                      let's appreciate this misogynistic meme. Oh and by the way, I do not care about cars.

                      A NBA player roasting everyone according to the clickbait title💩

                      It's the twelfth post on my timeline and still waiting for a friend's post. I don't even watch NBA.

                      A marvel meme from Black widow, it's about sex performances of different male actors💩

                      Another meme about Marvel movies, no comment...

                      An ad of an electric flying insect trap device💩

                      It's getting worse than TV ads at this rate...

                      An anonymised facebook post with a picture of a stone house👍

                      First post I would possibly be interested in because I joined this facebook group 🎉. Are you trying to manipulate me Mark or am I paranoid?

                      A facebook post with a picture a cyclist near Big Ben in London💩

                      An Australian shitposting group page talking about the UK??

                      Screnshot of a guy talking about influencers💩

                      Money Driven Dream. That's so me Mark!

                      Ad of Wendy's💩

                      According to a survey conducted by Choconews, 82% of American people think it's a great fast-food restaurant. Yann would tell you the contrary.

                      Screnshot of a Video with a woman💩

                      Again, shitposting about people I don't even give attention to. What the fuck is wrong with Facebook?

                      Weird goodbyes album of The national feat. Bon Iver👍

                      I need to check out what he's been working on these days.

                      anonymised friend's facebook post👍

                      A post about a facebook page I follow, very surprising, I was expecting another suggested/sponsored content.

                      NEA today post💩

                      I thought for a second the algorithm was working correctly, I almost had a panic attack...

                      Video of guy pouring champagn on cushions💩

                      Shitposting video about a guy mad because people put some champagne on his $1000 cushions. What a sad life!

                      Little girl talking about Burning man👍

                      I follow this person, he's a photographer.

                      anonymised friend's facebook post💩

                      Sponsored facebook post of state farm showing a young man dancing in a backyard💩

                      Are you trying to convince me your insurance company is lit? Let me doubt about it.

                      Anonymised friend's facebook post👍
                      A facebook marketplace post👍

                      A friend selling furniture on facebook marketplace.

                      Anonymised friend's facebook post👍

                      Are you still scrolling for real?

                      A sponsored facebook post about an alcohol drink💩

                      I wonder whether minors could see this ad on their timeline.

                      Anonymised friend's facebook post👍
                      Article from the Wall Street journal: If your Co-Workers are 'Quiet Quitting', Here's What That means💩

                      What are you trying to tell me Mark?

                      A nurse dancing in front of her camera💩

                      Until what? Until WHAT? TELL ME PLEASE, I WANNA KNOW!

                      A meme with characters from Kuzco about Mario💩
                      Anonymised friend's facebook post👍

                      Skull shaver, a company selling products for shaving💩
                      Anonymised friend's facebook post👍
                      Anonymised friend's facebook post👍
                      Anonymised facebook marketplace post👍

                      A modelo beer💩

                      I don't drink this beer.

                      Video of Romain Lanéry💩

                      The second time this guy is suggested. My position remains the same.

                      Video of a 2024 electric dodge challenger SRT💩

                      I repeat myself one more time, I don't give a shit about cars.

                      Anonymised friend's facebook post👍
                      Alchemical Records post about NFTs💩

                      La cerise sur le gâteau: NFTs

                      Anonymised friend's facebook post💩

                      I think it's enough for today.

                      Why does it look so bad?

                      Have you noticed the crazy number of ads? How is it possible? Who on this planet could like so much shitty content seriously?

                      I have a simple theory: I think fewer and fewer people use facebook and prefer sharing content on Instagram. The fewer people using facebook, the more room for ads. This theory is the result of my observations, very unscientific though.

                      Any solutions?

                      2 years ago, I had already noticed more and more ads. Let's be honest a second: The ads are so bad and irrelevant most of the time but being confronted with them regularly is not without consequences. So I started reporting and hiding them:

                      facebook menu with 4 actions: save, hide or report a post

                      Unfortunately, as you can see, it has no impact, it's even worse I would say. A radical solution would be to get rid of facebook which also means getting rid of messenger, which is not an option for me at this time. Another solution is to disable your account. And good news: you can still use messenger even if your facebook account is disabled.

                      Summary of posts

                      PostSuggestionSponsorRelevanceLink
                      #1Ancient Aliens TheoryLink
                      #2Amazon Fresh/
                      #3Dany MorelLink
                      #4The Carz PagevvLink
                      #5Romain LanéryLink
                      #6PepcoConnectLink
                      #7entrepreneurauthorityLink
                      #8Random Reel videos/
                      #9ToopetLink
                      #10Optimum NutritionLink
                      #11Mecanicien actuLink
                      #12nba_flamesLink
                      #13Marvelous world of fictionLink
                      #14ZevoLink
                      #15A facebook group I belong to/
                      #16LADBible AustraliaLink
                      #17Money Driven DreamLink
                      #18Wendy'sLink
                      #29Guillaume PleyLink
                      #20Bon IverLink
                      #21A Facebook group about music/
                      #22NEA todayLink
                      #23nobodyspecialLink
                      #24Trey RatCliffLink
                      #25A friend's post/
                      #26State FarmLink
                      #27Another friend's post/
                      #28A friend selling a furniture/
                      #39A post about a person I follow/
                      #30NÜTRL Vodka SeltzerLink
                      #31A post about sport news/
                      #32The Wall Street JournalLink
                      #33frontelineboutique.coLink
                      #34Wonderful world of gamingLink
                      #35A friend has changed his profile picture/
                      #36Skull ShaverLink
                      #37A friend sharing a post about summer activities/
                      #38Sport news again/
                      #39A friend selling furnitures/
                      #40ModeloLink
                      #41Romain LanéryLink
                      #42Modded Detroit Car ShowsLink
                      #43A friend sharing some pictures/
                      #44Alchemical RecordsLink
                      #45A friend sharing a post about soccer/
                      Total18 ✓12 ✓15 ✓
                      \ No newline at end of file +My facebook feed is a nightmare | Yann Prono

                        My facebook feed is a nightmare

                        I joined the social network in 2008. At this time, I was in middle school; people were sharing photos and posting comments. It was great. The content I received was the content I expected. The platform has always been a way to keep me informed about music, movies, local events, etc. For example, 2 days ago, I learned that Arctic Monkeys announced a new album.

                        Nowadays, I still use facebook because of messenger. Family and friends use it although I would rather use privacy-friendly apps such as Signal or Element (Matrix).

                        So why do I argue my feed is a nightmare? I take my phone out of my pocket, I open the facebook application and then, the funniest thing happens:

                        A post of the Ancient aliens Theory facebook group💩

                        We start with a group about alien theories.

                        Amazon Fresh facebook ad💩

                        An ad about Amazon Fresh. I don't like Amazon. I thought you already knew that Facebook.

                        Screenshot a blackscreen facebook video.💩

                        This guy sells a $400 ticket for a 3 days retreat to guide you in discovering your truest potential, purpose and power. He describes himself as an awakening guide. He sounds like a guru to me, what do you think Facebook?

                        Screenshot of a facebook video showing backseat of yellow Skoda Felicia Fun Pickup💩

                        A suggested video about a guy filming a yellow Skoda Felicia Fun Pickup. In the video, the guy has a baby voice.

                        Screenshot of a facebook post showing a guy making youtube videos💩

                        A suggested video of a guy making tech videos on Youtube. I'm into tech so it could make sense but this is not tech I like at all.

                        Screenshot of a facebook post from Pepco about road closures💩

                        A sponsored post again? Did I break the Facebook algorithm or something?

                        Screenshot of a facebook video showing a bald guy wearing a headset💩

                        What the heck? Who's that guy with this unbearable voice? Where did my friend's content go?

                        Screenshot of a gallery of facebook reels💩

                        A gallery of videos from people I don't even know.

                        Video thumbnail: pet fishs, from $0.01 to $30,000💩

                        I'm getting pissed off. Who is this guy again? And why does Facebook suggest these kinds of content?

                        Screenshot of a video showing a woman working on a laptop with a energy drink💩

                        A summary of what I hate about marketing. This post considers people idiots.

                        A crappy meme about cars, old cars are viril, modern cars are compared to waxed people💩

                        let's appreciate this misogynistic meme. Oh and by the way, I do not care about cars.

                        A NBA player roasting everyone according to the clickbait title💩

                        It's the twelfth post on my timeline and still waiting for a friend's post. I don't even watch NBA.

                        A marvel meme from Black widow, it's about sex performances of different male actors💩

                        Another meme about Marvel movies, no comment...

                        An ad of an electric flying insect trap device💩

                        It's getting worse than TV ads at this rate...

                        An anonymised facebook post with a picture of a stone house👍

                        First post I would possibly be interested in because I joined this facebook group 🎉. Are you trying to manipulate me Mark or am I paranoid?

                        A facebook post with a picture a cyclist near Big Ben in London💩

                        An Australian shitposting group page talking about the UK??

                        Screnshot of a guy talking about influencers💩

                        Money Driven Dream. That's so me Mark!

                        Ad of Wendy's💩

                        According to a survey conducted by Choconews, 82% of American people think it's a great fast-food restaurant. Yann would tell you the contrary.

                        Screnshot of a Video with a woman💩

                        Again, shitposting about people I don't even give attention to. What the fuck is wrong with Facebook?

                        Weird goodbyes album of The national feat. Bon Iver👍

                        I need to check out what he's been working on these days.

                        anonymised friend's facebook post👍

                        A post about a facebook page I follow, very surprising, I was expecting another suggested/sponsored content.

                        NEA today post💩

                        I thought for a second the algorithm was working correctly, I almost had a panic attack...

                        Video of guy pouring champagn on cushions💩

                        Shitposting video about a guy mad because people put some champagne on his $1000 cushions. What a sad life!

                        Little girl talking about Burning man👍

                        I follow this person, he's a photographer.

                        anonymised friend's facebook post💩

                        Sponsored facebook post of state farm showing a young man dancing in a backyard💩

                        Are you trying to convince me your insurance company is lit? Let me doubt about it.

                        Anonymised friend's facebook post👍
                        A facebook marketplace post👍

                        A friend selling furniture on facebook marketplace.

                        Anonymised friend's facebook post👍

                        Are you still scrolling for real?

                        A sponsored facebook post about an alcohol drink💩

                        I wonder whether minors could see this ad on their timeline.

                        Anonymised friend's facebook post👍
                        Article from the Wall Street journal: If your Co-Workers are 'Quiet Quitting', Here's What That means💩

                        What are you trying to tell me Mark?

                        A nurse dancing in front of her camera💩

                        Until what? Until WHAT? TELL ME PLEASE, I WANNA KNOW!

                        A meme with characters from Kuzco about Mario💩
                        Anonymised friend's facebook post👍

                        Skull shaver, a company selling products for shaving💩
                        Anonymised friend's facebook post👍
                        Anonymised friend's facebook post👍
                        Anonymised facebook marketplace post👍

                        A modelo beer💩

                        I don't drink this beer.

                        Video of Romain Lanéry💩

                        The second time this guy is suggested. My position remains the same.

                        Video of a 2024 electric dodge challenger SRT💩

                        I repeat myself one more time, I don't give a shit about cars.

                        Anonymised friend's facebook post👍
                        Alchemical Records post about NFTs💩

                        La cerise sur le gâteau: NFTs

                        Anonymised friend's facebook post💩

                        I think it's enough for today.

                        Why does it look so bad?

                        Have you noticed the crazy number of ads? How is it possible? Who on this planet could like so much shitty content seriously?

                        I have a simple theory: I think fewer and fewer people use facebook and prefer sharing content on Instagram. The fewer people using facebook, the more room for ads. This theory is the result of my observations, very unscientific though.

                        Any solutions?

                        2 years ago, I had already noticed more and more ads. Let's be honest a second: The ads are so bad and irrelevant most of the time but being confronted with them regularly is not without consequences. So I started reporting and hiding them:

                        facebook menu with 4 actions: save, hide or report a post

                        Unfortunately, as you can see, it has no impact, it's even worse I would say. A radical solution would be to get rid of facebook which also means getting rid of messenger, which is not an option for me at this time. Another solution is to disable your account. And good news: you can still use messenger even if your facebook account is disabled.

                        Summary of posts

                        PostSuggestionSponsorRelevanceLink
                        #1Ancient Aliens TheoryLink
                        #2Amazon Fresh/
                        #3Dany MorelLink
                        #4The Carz PagevvLink
                        #5Romain LanéryLink
                        #6PepcoConnectLink
                        #7entrepreneurauthorityLink
                        #8Random Reel videos/
                        #9ToopetLink
                        #10Optimum NutritionLink
                        #11Mecanicien actuLink
                        #12nba_flamesLink
                        #13Marvelous world of fictionLink
                        #14ZevoLink
                        #15A facebook group I belong to/
                        #16LADBible AustraliaLink
                        #17Money Driven DreamLink
                        #18Wendy'sLink
                        #29Guillaume PleyLink
                        #20Bon IverLink
                        #21A Facebook group about music/
                        #22NEA todayLink
                        #23nobodyspecialLink
                        #24Trey RatCliffLink
                        #25A friend's post/
                        #26State FarmLink
                        #27Another friend's post/
                        #28A friend selling a furniture/
                        #39A post about a person I follow/
                        #30NÜTRL Vodka SeltzerLink
                        #31A post about sport news/
                        #32The Wall Street JournalLink
                        #33frontelineboutique.coLink
                        #34Wonderful world of gamingLink
                        #35A friend has changed his profile picture/
                        #36Skull ShaverLink
                        #37A friend sharing a post about summer activities/
                        #38Sport news again/
                        #39A friend selling furnitures/
                        #40ModeloLink
                        #41Romain LanéryLink
                        #42Modded Detroit Car ShowsLink
                        #43A friend sharing some pictures/
                        #44Alchemical RecordsLink
                        #45A friend sharing a post about soccer/
                        Total18 ✓12 ✓15 ✓
                        \ No newline at end of file diff --git a/articles/self-documented-makefile-v1-1/index.html b/articles/self-documented-makefile-v1-1/index.html index 0dd4953..f59287c 100644 --- a/articles/self-documented-makefile-v1-1/index.html +++ b/articles/self-documented-makefile-v1-1/index.html @@ -1,4 +1,4 @@ -Self-Documented Makefile V1.1 | Yann Prono

                          Self-Documented Makefile V1.1

                          I like Makefiles: The syntax is quite simple, it's easy to use and it's useful to group commands in one place. In 2016, Marmelab published an article on documenting a Makefile. With some shell script voodoo, you can run make help and it will print all the available targets and their descriptions. It works and it is simple. I've been using this trick for years and I'm happy with it.

                          Today I would like to go one step further: Let's improve the help target so it also outputs the variables and their values. To do so, we can read the internal database thanks to make -p. This command prints a lot of information: recipes, prerequisites, environment variables, variables and so on.

                          bash
                          make -pn hello=there # -n for a dry run
                          +Self-Documented Makefile V1.1 | Yann Prono

                            Self-Documented Makefile V1.1

                            I like Makefiles: The syntax is quite simple, it's easy to use and it's useful to group commands in one place. In 2016, Marmelab published an article on documenting a Makefile. With some shell script voodoo, you can run make help and it will print all the available targets and their descriptions. It works and it is simple. I've been using this trick for years and I'm happy with it.

                            Today I would like to go one step further: Let's improve the help target so it also outputs the variables and their values. To do so, we can read the internal database thanks to make -p. This command prints a lot of information: recipes, prerequisites, environment variables, variables and so on.

                            bash
                            make -pn hello=there # -n for a dry run
                             # environment
                             XAUTHORITY = /run/user/1000/gdm/Xauthority
                             # environment
                            diff --git a/articles/syntax-highlighter/index.html b/articles/syntax-highlighter/index.html
                            index 3ea217e..01bb08a 100644
                            --- a/articles/syntax-highlighter/index.html
                            +++ b/articles/syntax-highlighter/index.html
                            @@ -1,4 +1,4 @@
                            -My syntax highlighter | Yann Prono

                              My syntax highlighter

                              In this article, I'm going to explain how I chose a syntax highlighting library for my blog and how I improved it because yes, I have very high expectations:

                              • The highlighting must be performed at build time. I use Eleventy as a static site generator.

                              • The output format must be HTML.

                              • A Node.js library is preferable since Eleventy requires it.

                              • The library must support at least the following programming languages: HTML, CSS, JS, TS, Makefile, JSON, Golang, Ruby, C, Rust, and Java.

                              • Support of a dark theme is a plus.

                              • Embedding extra JS scripts is not a possibility: As you know, energy prices are getting crazy. I bought a turtleneck sweater for my server but Github doesn't want to give me physical access to my machine so let's save some bytes.

                              • A concise and clean HTML output is appreciated.

                              Choosing a library

                              I'm not going to reinvent the wheel. Let's explore the different libraries available on the Internet:

                              • codemirror: I use this library for the code vizualiser of SARD. This library is complete but too overkilled for this blog. Furthermore, Codemirror is supposed to be run in a browser.

                              • shjs: Not available on npm, bye bye.

                              • rainbow: Supported languages don't match my needs.

                              • highlightjs: Highlight looks great. It's also very well integrated with Eleventy.

                              • prism.js: Another library for the browser.

                              • torchlight: There's no way I pay for highlighting my shitty code.

                              • shiki: This one looks great too.

                              After comparing highlightjs and shiki, I decided to choose shiki because the colors look great and sharp (inspired by VScode themes) and it's a way for me to test the flexibility and modularity of Eleventy. Let's run Shiki for the first time to see what the output looks like:

                              HTML
                              <!-- codeToHtml(`const shiki = require('shiki')`, { lang: 'js' }) -->
                              +My syntax highlighter | Yann Prono

                                My syntax highlighter

                                In this article, I'm going to explain how I chose a syntax highlighting library for my blog and how I improved it because yes, I have very high expectations:

                                • The highlighting must be performed at build time. I use Eleventy as a static site generator.

                                • The output format must be HTML.

                                • A Node.js library is preferable since Eleventy requires it.

                                • The library must support at least the following programming languages: HTML, CSS, JS, TS, Makefile, JSON, Golang, Ruby, C, Rust, and Java.

                                • Support of a dark theme is a plus.

                                • Embedding extra JS scripts is not a possibility: As you know, energy prices are getting crazy. I bought a turtleneck sweater for my server but Github doesn't want to give me physical access to my machine so let's save some bytes.

                                • A concise and clean HTML output is appreciated.

                                Choosing a library

                                I'm not going to reinvent the wheel. Let's explore the different libraries available on the Internet:

                                • codemirror: I use this library for the code vizualiser of SARD. This library is complete but too overkilled for this blog. Furthermore, Codemirror is supposed to be run in a browser.

                                • shjs: Not available on npm, bye bye.

                                • rainbow: Supported languages don't match my needs.

                                • highlightjs: Highlight looks great. It's also very well integrated with Eleventy.

                                • prism.js: Another library for the browser.

                                • torchlight: There's no way I pay for highlighting my shitty code.

                                • shiki: This one looks great too.

                                After comparing highlightjs and shiki, I decided to choose shiki because the colors look great and sharp (inspired by VScode themes) and it's a way for me to test the flexibility and modularity of Eleventy. Let's run Shiki for the first time to see what the output looks like:

                                HTML
                                <!-- codeToHtml(`const shiki = require('shiki')`, { lang: 'js' }) -->
                                 <pre class="shiki">
                                   <code>
                                     <span class="line">
                                diff --git a/index.html b/index.html
                                index ff02cfa..88fc5d5 100644
                                --- a/index.html
                                +++ b/index.html
                                @@ -1 +1 @@
                                -Yann Prono
                                  Me holding a piece of paper.

                                  Yann Prono

                                  Software Engineer, MAIF

                                  \ No newline at end of file +Yann Prono
                                    Me holding a piece of paper.

                                    Yann Prono

                                    Software Engineer, MAIF

                                    \ No newline at end of file diff --git a/links/index.html b/links/index.html index f75e320..2a80c45 100644 --- a/links/index.html +++ b/links/index.html @@ -1 +1 @@ -Yann Prono
                                      Me holding a piece of paper.

                                      Some links

                                      Links that could be useful one day but it will never happen.

                                      \ No newline at end of file +Yann Prono
                                        Me holding a piece of paper.

                                        Some links

                                        Links that could be useful one day but it will never happen.

                                        \ No newline at end of file diff --git a/recipes/butternut-goat-cheese-lasagna/index.html b/recipes/butternut-goat-cheese-lasagna/index.html index 04e3cbf..37d41de 100644 --- a/recipes/butternut-goat-cheese-lasagna/index.html +++ b/recipes/butternut-goat-cheese-lasagna/index.html @@ -1 +1 @@ -Lasagnes de butternut et fromage de chèvre | Yann Prono

                                          Lasagnes de butternut et fromage de chèvre

                                          Les ingrédients

                                          • Courge butternut

                                            1 Courges butternut
                                          • Feuilles de lasagnes

                                            1 paquets
                                          • Oignon

                                            1 oignons
                                          • Ail

                                            2 gousses
                                          • Concassé de tomates

                                            500g
                                          • Bûche de fromage de chèvre

                                            1 bûches
                                          • Fromage de chèvre frais

                                            100g
                                          • Gruyère râpé

                                            100g
                                          • Huile d'olive

                                            1 filets
                                          • Paprika

                                            1 cuillères à café
                                          • Cumin moulu

                                            1 cuillères à café
                                          • Beurre

                                            50g
                                          • Farine

                                            50g
                                          • Lait

                                            70cl
                                          • Sel

                                          • Poivre

                                          La recette

                                          Une photo est prévue lorsque j'aurai cuisiné cette pépite.

                                          1. Pelez et égrainez la courge butternut. Coupez-la en dés et disposez-les sur une grille recouverte de papier cuisson. Parsemez de paprika et de cumin, puis enfournez à 180°C pendant 30 minutes.

                                          2. Pelez et émincez l'oignon et les gousses d'ails faites-les revenir dans une poêle chaude avec un filet d'huile d'olive jusqu'à ce qu'ils colorent. Ajoutez-le concassé de tomates et laissez mijoter sur feux doux pondant 10 minutes.

                                          3. Incorporez le chèvre frais et la moitié de la bûche coupée à la préparation puis ajoutez les dés de courge et mélangez.

                                          4. Pour la béchamel, faites fondre le beurre à feu moyen dans une casserole puis ajoutez la farine en remuant rapidement. Versez progressivemnt le lait tout en remuant jusqu'à ce que le mélange épaississe et assaisonnez à votre convenance. Réservez.

                                          5. Beurrez un plat à gratin puis montez vos lasagnes. Étalez une fine couche de béchamel puis recouvrez de feuilles de lasagne. Versez la moitié de la sauce à la courge puis une couche de béchamel. Recouvrez de feuilles de lasagne et continuez d'amener et finissant par des feuilles de lasagnes recouvertes de béchamel, de rondelles de bûche de chèvre et de gruyère râpé.

                                          6. Enfournez 30 minutes à 180°C. Servez chaud.

                                          J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                          \ No newline at end of file +Lasagnes de butternut et fromage de chèvre | Yann Prono

                                            Lasagnes de butternut et fromage de chèvre

                                            Les ingrédients

                                            • Courge butternut

                                              1 Courges butternut
                                            • Feuilles de lasagnes

                                              1 paquets
                                            • Oignon

                                              1 oignons
                                            • Ail

                                              2 gousses
                                            • Concassé de tomates

                                              500g
                                            • Bûche de fromage de chèvre

                                              1 bûches
                                            • Fromage de chèvre frais

                                              100g
                                            • Gruyère râpé

                                              100g
                                            • Huile d'olive

                                              1 filets
                                            • Paprika

                                              1 cuillères à café
                                            • Cumin moulu

                                              1 cuillères à café
                                            • Beurre

                                              50g
                                            • Farine

                                              50g
                                            • Lait

                                              70cl
                                            • Sel

                                            • Poivre

                                            La recette

                                            Une photo est prévue lorsque j'aurai cuisiné cette pépite.

                                            1. Pelez et égrainez la courge butternut. Coupez-la en dés et disposez-les sur une grille recouverte de papier cuisson. Parsemez de paprika et de cumin, puis enfournez à 180°C pendant 30 minutes.

                                            2. Pelez et émincez l'oignon et les gousses d'ails faites-les revenir dans une poêle chaude avec un filet d'huile d'olive jusqu'à ce qu'ils colorent. Ajoutez-le concassé de tomates et laissez mijoter sur feux doux pondant 10 minutes.

                                            3. Incorporez le chèvre frais et la moitié de la bûche coupée à la préparation puis ajoutez les dés de courge et mélangez.

                                            4. Pour la béchamel, faites fondre le beurre à feu moyen dans une casserole puis ajoutez la farine en remuant rapidement. Versez progressivemnt le lait tout en remuant jusqu'à ce que le mélange épaississe et assaisonnez à votre convenance. Réservez.

                                            5. Beurrez un plat à gratin puis montez vos lasagnes. Étalez une fine couche de béchamel puis recouvrez de feuilles de lasagne. Versez la moitié de la sauce à la courge puis une couche de béchamel. Recouvrez de feuilles de lasagne et continuez d'amener et finissant par des feuilles de lasagnes recouvertes de béchamel, de rondelles de bûche de chèvre et de gruyère râpé.

                                            6. Enfournez 30 minutes à 180°C. Servez chaud.

                                            J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                            \ No newline at end of file diff --git a/recipes/goat-cheese-squash-savoury-cake/index.html b/recipes/goat-cheese-squash-savoury-cake/index.html index 582fb27..a0690b4 100644 --- a/recipes/goat-cheese-squash-savoury-cake/index.html +++ b/recipes/goat-cheese-squash-savoury-cake/index.html @@ -1 +1 @@ -Cake à la courgette et fromage de chèvre | Yann Prono

                                              Cake à la courgette et fromage de chèvre

                                              Les ingrédients

                                              • Fromage de chèvre frais

                                                1
                                              • Gruyère râpé

                                                200g
                                              • Courgette

                                                1
                                              • Levure chimique

                                                1 sachets
                                              • Lait

                                                10cl
                                              • Oeuf

                                                3oeufs
                                              • Farine

                                                100g
                                              • Sel

                                              • Poivre

                                              La recette

                                              Merci à ma pote de m'avoir partagé cette recette délicieuse. Un moule de 28cm est nécessaire.

                                              1. Nettoyer et couper la courgette en dés. Les cuire dans de l'eau bouillante pendant 20 minutes

                                              2. Dans un saladier, mélanger les oeufs, la farine, sel, poivre, la levure chimique et le lait. Ajouter en dernier le gruyère râpé et mélanger.

                                              3. Mettre la courgette cuite dans une passoire, la refroidir avec de l'eau froide et l’essorer pour retirer un maximum d'eau. Ajouter à la préparation.

                                              4. Couper la moitié de la bûche de chèvre en dés et l'ajouter a la préparation.

                                              5. Mettre du papier sulfurisé dans un moule et y verser la préparation.

                                              6. Couper 3 à 4 rondelles de fromage de chèvre et les mettre dans la préparation.

                                              7. Enfourner pendant 35 minutes à 210 degrés.

                                              J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                              \ No newline at end of file +Cake à la courgette et fromage de chèvre | Yann Prono

                                                Cake à la courgette et fromage de chèvre

                                                Les ingrédients

                                                • Fromage de chèvre frais

                                                  1
                                                • Gruyère râpé

                                                  200g
                                                • Courgette

                                                  1
                                                • Levure chimique

                                                  1 sachets
                                                • Lait

                                                  10cl
                                                • Oeuf

                                                  3oeufs
                                                • Farine

                                                  100g
                                                • Sel

                                                • Poivre

                                                La recette

                                                Merci à ma pote de m'avoir partagé cette recette délicieuse. Un moule de 28cm est nécessaire.

                                                1. Nettoyer et couper la courgette en dés. Les cuire dans de l'eau bouillante pendant 20 minutes

                                                2. Dans un saladier, mélanger les oeufs, la farine, sel, poivre, la levure chimique et le lait. Ajouter en dernier le gruyère râpé et mélanger.

                                                3. Mettre la courgette cuite dans une passoire, la refroidir avec de l'eau froide et l’essorer pour retirer un maximum d'eau. Ajouter à la préparation.

                                                4. Couper la moitié de la bûche de chèvre en dés et l'ajouter a la préparation.

                                                5. Mettre du papier sulfurisé dans un moule et y verser la préparation.

                                                6. Couper 3 à 4 rondelles de fromage de chèvre et les mettre dans la préparation.

                                                7. Enfourner pendant 35 minutes à 210 degrés.

                                                J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                                \ No newline at end of file diff --git a/recipes/index.html b/recipes/index.html index 7755800..0c08564 100644 --- a/recipes/index.html +++ b/recipes/index.html @@ -1 +1 @@ -Yann Prono
                                                  Me holding a piece of paper.A chef's hat

                                                  My cookbook

                                                  List of recipes I like to cook. No need to accept cookies, I don't have any.

                                                  \ No newline at end of file +Yann Prono
                                                    Me holding a piece of paper.A chef's hat

                                                    My cookbook

                                                    List of recipes I like to cook. No need to accept cookies, I don't have any.

                                                    \ No newline at end of file diff --git a/recipes/vegetarian-savoury-cake/index.html b/recipes/vegetarian-savoury-cake/index.html index 179adc0..e4d784c 100644 --- a/recipes/vegetarian-savoury-cake/index.html +++ b/recipes/vegetarian-savoury-cake/index.html @@ -1 +1 @@ -Cake salé végétarien | Yann Prono

                                                      Cake salé végétarien

                                                      Source: https://maryseetcocotte18.wordpress.com

                                                      Les ingrédients

                                                      • Oeuf

                                                        3oeufs
                                                      • Farine

                                                        150g
                                                      • Levure chimique

                                                        1 sachets
                                                      • Huile d'olive

                                                        8cl
                                                      • Lait

                                                        12.5cl
                                                      • Gruyère râpé

                                                        100g
                                                      • Poivron rouge

                                                        1poivrons
                                                      • Feta

                                                        150g
                                                      • Olives noires

                                                        50g
                                                      • Poivre

                                                      La recette

                                                      Un moule de 28cm est nécéssaire.

                                                      1. Faites griller les poivrons à la poêle ou au four.

                                                      2. Coupez la féta en dés et ajoutez-y les olives coupées en rondelles. Réservez. Dans un saladier, fouettez les oeufs, la farine, la levure et le poivre. Incorporez petit à petit le lait et l’huile légèrement tièdi au micro-onde. Ajoutez le gruyère. Mélangez. Incorporez ensuite le mélange poivrons-féta-olives à la pâte et remuez.

                                                      3. Transvasez le tout dans le moule beurré, saupoudrez d’un peu d’origan et faites cuire pendant 45 minutes.

                                                      J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                                      \ No newline at end of file +Cake salé végétarien | Yann Prono

                                                        Cake salé végétarien

                                                        Source: https://maryseetcocotte18.wordpress.com

                                                        Les ingrédients

                                                        • Oeuf

                                                          3oeufs
                                                        • Farine

                                                          150g
                                                        • Levure chimique

                                                          1 sachets
                                                        • Huile d'olive

                                                          8cl
                                                        • Lait

                                                          12.5cl
                                                        • Gruyère râpé

                                                          100g
                                                        • Poivron rouge

                                                          1poivrons
                                                        • Feta

                                                          150g
                                                        • Olives noires

                                                          50g
                                                        • Poivre

                                                        La recette

                                                        Un moule de 28cm est nécéssaire.

                                                        1. Faites griller les poivrons à la poêle ou au four.

                                                        2. Coupez la féta en dés et ajoutez-y les olives coupées en rondelles. Réservez. Dans un saladier, fouettez les oeufs, la farine, la levure et le poivre. Incorporez petit à petit le lait et l’huile légèrement tièdi au micro-onde. Ajoutez le gruyère. Mélangez. Incorporez ensuite le mélange poivrons-féta-olives à la pâte et remuez.

                                                        3. Transvasez le tout dans le moule beurré, saupoudrez d’un peu d’origan et faites cuire pendant 45 minutes.

                                                        J'ai quatre hommes à la maison et ils se régalent tous, il n'en reste jamais!

                                                        \ No newline at end of file