Welcome
You reached a self-hosted website with no ambition except being some kind of a notepad as well as a personal sandbox. But feel free to take away anything you may find useful.
I'm considering publishing here short articles about what I'm learning. I'll avoid hosting images because I don't have much storage available.
Stay tuned!
Lately I've been working on refreshing les éditions du samedi website - firstly launched with PluXML... 10 years ago. PluXML served us well for quite a time but maintenance became a little difficult from the moment our catalogue began to grow. And I must admit I did not find how to upgrade, I may have missed too much in-between updates and would have to start again from zero.
So I took this opportunity to explore more in depth the possibilities offered by Static Site Generators (SSG), in this case Eleventy with Simple.css. The main problem I was expecting was the ability for user to edit pages - I did not want to force any other member of the association to learn Markdown or to upload files on a server - evenless on GitHub.
This is why I set up an administration interface using Decap CMS. It was rather straightforward eventhough I struggled on understanding that there was no possibility to navigate the media folder through the interface. Now I'm watching the corresponding issue ^^'
The last part that was to set up was the structure to build the site before it is served - and why not, to handle the contact form. It took not much research to find the right candidate: it would be Netlify! So I pushed the local work I've prepared to GitHub and made the connection in Netlify. I started with a pre-prod website with a specific branch for my friends can test in advance and let me know what they think (I had just to make a few CSS changes, otherwise it was fine for them).
The hard (and long) part was to redirect to the Netlify application I created for the prod website. The domain was registered at OVH. So in case you are also struggling to understand what you should do here's the configuration that went well for my case:
In Netlify > Domains > your externally registered domain:
75.2.60.5 (as per this Guide)[sitename].netlify.app (as per same Guide)In OVH > Domain > DNS Servers
In OVH > Host
It's a small publishing structure where I'm a volunteer editor as well as... the webmaster ^^
I started from scratch with much help from Eleventy recipies, Eleventy rocks and Learn Eleventy - as well as the official website of course. I hope to write a specific note of what I've learned in the Eleventy world building this project - and share solutions for the problems I've faced.
No! I still have to do some settings in Netlify and verify redirections from the former website. I also have some ideas for improving it. But the major part is done. Hurray!
FreeCodeCamp changed their courses again. Now they have a Certified Full Stack Developer Curriculum which I started taking and... surprise! I discovered several things. Let's have a look at them.
This is an information present in the meta tag inside the head section to inform social media platforms (Facebook, X, LinkedIn...) how your website's content should appear. It is used via the property attribute which value starts with og: to call for Open graph protocol. The information you want to provide should go as the value of the content attribute. Here's some examples:
og:title for the title that displays for social media posts<meta property="og:title" content="My amazing blog">og:type to indicate the type content that is shared (article, website, video, music...) <meta property="og:type" content="website">og:image to set the image that is shared on social media post<meta property="og:image" content="https://my-image.png">og:url to set the the URL that is shared on social media post<meta property="og:url" content="https://my-website.com">Replaced elements call for a resource, for istance an image or a video. For this reason, it's content cannot be modified by CSS. It's not a discovery in itself but it's an easy way to conceptualize it.
Oh, did you know about the poster attribute for the video tag? You can link to an image that will display while the video is not playing. Interesting!
And for accessibility purposes, take a look at the track element. It would be nested within video or audio element to provide subtitles and / or captions, with the help of several attributes. Some more info are available on MDN!
Description list can be used for a glossary of course but other use cases would include:
Basically, when you have key-value pairs you would be right to use description lists!
<h2>Ingredients</h2>
<dl>
<dt>Flour</dt>
<dd>250g</dd>
<dt>Milk</dt>
<dd>0,5L</dd>
<dt>Oil</dt>
<dd>2 spoons</dd>
</dl>The i element is mostly use to host font-awesome character but it has a meaning: idiomatic text does not indicate if the text is important or not, it only shows that it's somehow different from the surrounding text. It can be used to highlight alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
The i element does not
I learned that sub element can be used for footnotes, in addition to the common use case of chemical formulas.
menuI saw this curiosity on the Fediverse. This menu element can be used for hosting an unordered list of items, juste like ul. The difference is that menu represents a toolbar containing commands that the user can perform or activate:
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>As always, this is a high quality vision of semantics. We can have some pedagogy with users but most would simply like to select text and click on a button to shape it as they want. How do you implement time, description lists and so on on a easy way? This is an open question!
Dear 2025,
Hope you'll be doing well.
2024 was unstoppable. Here's a catch up.
Let's have a look at last year ambition list:
Wish me luck haha.
See you next year and take care
Love
Julie
I'm happy to announce that the first version is available since May! You can play Qwixx here: https://qwixx.jboisseur.xyz
I've been working on this project for a long time. It started when I took a few Python lessons a few years ago but I abandonned because I had no clue about how to get an UI. Going back to HTML/CSS and then starting learning JavaScript put me back on tracks.
So many things! Particularly in JavaScript where I worked with arrays, listened for events, ran a huge amount of loops, created functions, toggled CSS classes, saved data in the user's browser etc. I also learned about debugging and using the web developer tools on the browser. I had to use some PHP as well, for saving best scores.
This said, I think the biggest take away was to divide the work into achievable challenges and push the harder ones at the end. Keeping this goal in mind: at the end of each step, the full game should be playable. This way, the path was most of the time enjoyable, and having something to share along the way is very rewarding.
I already started working on version 2, which is about allowing two persons to play on a same device. I'm experimenting working on cold and old code. It's very time-consuming but I try to refrain from starting all over on a blank project. I try to improve what's already there and implement what's missing to achieve this 2-players goal. One small step at a time.
The less the better BUT just in case, these CSS properties could be handy for some cosmetic touches (examples available on an ugly CodePen):
Use box-shadow and / or text-shadow property. Values: offsetX offsetY (blurRadius) (spreadRadius) color.
For instance
<p class="shadow">Lorem ipsum</p>
.shadow {
box-shadow: 2px 5px 2px 5px rgba(100, 100, 100, .25);
text-shadow: 2px 5px 2px green;
}
Use text-align-last property (right or center)
Use vertical-align property (text-top / super ; text-bottom / sub)
text-decoration shorthand property for: text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness
For instance :
text-decoration: underline overline dotted red 5px;
font-variant property to display text in a small-caps font for instance
Good to now: 1em corresponds to the current font size (browser default is 16px.
The solution that works in all browsers:
body { font-size: 100%; }
h1 { font-size: 2.5em; }
h2 { font-size: 1.875em; }
p { font-size: 0.875em; }
/* unvisited link */
a:link { color: red; }
/* visited link */ a:visited { color: green; }
/* mouse over link */
a:hover { color: hotpink; }
/* selected link */
a:active { color: blue; }
!important:
Also use :hover pseuo-class with a background-color property on <tr>!
Zebra-strip table with tr:nth-child(even) { background-color: #f2f2f2; }
That's all... for now.
overflow: hidden;
resize: none;
Aren't you? I'm always struggling to know where to use the for... of loop or the for... in loop.
Let's have here a quick note for reference:
Iterates over an iterable object (object, array, string, map...) and temporarily assign to a variable
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
for (const char of chars) {
console.log(char); }
Note that you can use const if the variable is not reassigned within the loop.
Loops for properties of an array or object. Not to be used if the order is important.
// array
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
for (let char in chars) {
console.log(char); // prints the indexes as strings
console.log(chars[char]); // prints the value }
// object
const soldier = {firstname: "Jack", lastname: "O'Neill", team: "SG1"};
for (let key in soldier) {
console.log(key); // prints the key (firstname, lastname, team)
console.log(soldier[key]); // prints the value (Jack, O'Neill, SG1) }
The same result can be obtained using forEach() method (on an array).
const chars = ["Jack", "Daniel", "Sam", "Teal'c"];
chars.forEach(function (char, index) {
console.log(index); // prints the indexes as numbers
console.log(char); // prints the names
});