@home

November 23, 2022 Reading time: ~1 minute

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!


cosmetic CSS properties

September 8, 2024 Reading time: 4 minutes

The less the better BUT just in case, these CSS properties could be handy for some cosmetic touches (examples available on an ugly CodePen):

Shadowing

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;
}

Aligning

last line of text

Use text-align-last property (right or center)

an element vertically

Use vertical-align property (text-top / super ; text-bottom / sub)

Fun with fonts

Decorate

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;

Vary

font-variant property to display text in a small-caps font for instance

Default size

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; }

a: pseudo classes

/* 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:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover

Tables

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.

Prevent textarea resizing

overflow: hidden;
resize: none;

For loop: are you of or in?

July 13, 2024 Reading time: 2 minutes

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:

for... of loop

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.

for... in 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) }

forEach() method

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
});


grid overview

February 19, 2024 Reading time: 4 minutes

Two steps are required when it comes to building grid designs:

  1. slice a container into... a grid
  2. fill the cells or area of cells with elements

Imagine we work with following code:

<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>

The corresponding CodePen is of course available.

Slicing

First, we need our container to display its content as a grid : #container { display: grid; }. After that we need to slice down the container. There's two ways to do that:

Classic way

#container {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

Here we'll have a grid of 2 columns and 2 rows.

By name

#container {
display: grid;
grid-gap: 1em;
grid-template-areas:
"div1 div2"

"div3 div4"
}

Same here but we use names. In both cases we set up a gap, which is the space between the child element of the container.

Filling

Classic way

#div1 {
grid-column: 1;
grid-row: 1;

}

div1 will go in first column and first row.

By name

#div1 {
grid-area: div1;
}

Here we declare the element's name. As div1 was the first name on the first line, #div1 element will go on first column and first row.

Units and functions

For the slicing part, we can use different units, exclusively or in a combination, such as:

  • fraction (fr) - the browser divides the screen with the all fractions that were specified
  • relative units: %, vw, vh, auto...
  • fixed units: px
  • keywords: min or max-content, auto

We can also use functions, exclusively or in combination, such as:

  • repeat(nbOfTimes, unit)
  • minmax(minSize, maxSize)

Coordinates

For the filling part, we can set up precise coordinates which will be a line or a column line number with the syntax from / to

For instance, if our first div was supposed to fill the entire first line, we could write:

#div1 {
grid-column: 1 / 3;
grid-row: 1;

}

Where we are telling the brower to extend #div1 on column 1 and 2 (column 1 is between number 1 and 2 and column 2 between number 2 and 3).


CSS selectors

February 11, 2024 Reading time: 4 minutes

Target the right element is a must-know. Here's a recap of the available options. Examples are for the following structure:

<h2>Some title</h2>
<p>A paragraph</p>
<div>
<p>I am child of div</p>
<p>The guy up there is my bro.</p>
<section>
<p>Lonely paragraph</p>
</section>
<p>Third brother.</p>
</div>
<p>Out of div</p>
<p>Same</p>

As always, a demo is available on CodePen.

Combinators

Target a list of elements

Separate the elements with a ,.

h2, section {
font-weight: bolder;
color: navy;
}

Target all descendants of an element

Separate the parent element from the descendant element with a space.

div p {
text-decoration: underline;
}

Target all children of an element

Separate the parent element from the child element with a >.

body > p {
font-family: monospace;
}

Target the next sibling

Separate the first bro element from the second with a +.

div + p {
text-align: center;
}

Target all next siblings

Separate the first bro element from the other ones ~.

div ~ p {
width: 20%;
padding: 0.5em;
border: 0.25em solid indianred;
}

Pseudo-class selectors

A full list can be found on MDN Web Docs.

Target all first child from a parent element

Use a pseudo class after the element's name you want to target:

p:first-child {
letter-spacing: 0.25em;
}

Target every x element of a type from a parent

p:nth-of-type(3n) {
color: blue;
}

Pseudo-elements

Locate a starting point then create inline elements or specific decoration. For instance:

h2::before {
content: "ā™„ ";
}

h2::selection {
background-color: gold;
}

Attribute selectors

There's no attribute in the demo page. See attribute selectors


xHTML vs HTML5

January 26, 2024 Reading time: ~1 minute

I may have been stuck in xml model or several years ago but in the Uni course I learned that a HTML5 document doesn't validate if you close self-closing elements. You should write <img src="" alt="">, <br>, <hr> etc. and not <br/> and so on.

Here's the W3C HTML5 validator: https://validator.w3.org/nu/#textarea. You can also add an extension to your code editor.

Also, the closing tag may be omitted if a block element follows, for instance:

<p>Some text added
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

is valid.

Confusing, eh!


A look back at 2023

January 6, 2024 Reading time: 6 minutes

Happy New Year from New Zealand! This is a schedulded post

2023 was amazingly dense. Here's a snapshot of my walk through the year.

Computer science

Web development

Thanks to FreeCodeCamp and W3Schools I made first steps with JavaScript libraries like React and jQuery and with CSS libraries like Bootstrap and Sass. React in particular was quite a challenge but in the end it was a good introduction to the component world, I feel like it will be very useful - and that is just the beginning.

Also, after proof-reading the two books that were released at les Ć©ditions du samedi in October, I went back into building EPUBs. Iā€™m more comfortable in this exercise now Iā€™m more familiar with command line (for executing epubcheck for instance) and since Iā€™ve refreshed my HTML/CSS knowledge. I'm rather happy with the result!

Last but not least, I made progress in understanding and utilizing GitHub for Qwixx project and some others, like making my first pull request. I'm also discovering how Bludit is built and the existing plugins, for example I installed Disqus to allow comments!

Hardware

My Raspberry Pi, transformed into a server thanks to Yunohost, crashed due to its SD card that was corrupted. I rebooted it and now try to maintain it better than I did. Iā€™m proud I found what the issue was and study how to prevent it. It was also the occasion of finding where to configure IPV6 ports and how to access the www folder via an FTP client.

My laptop is aging and the lack of memory made it freeze when coding or surfing on Firefox so I found out I could gently reboot as well as allow some more memory with a ā€œswap fileā€. Iā€™m happy I can make my computer last a little longer. My father-in-law also helped me with the electricty supply which was flickering.

Methodology

I try to be patient. I try to be kind to myself. These are not my strongest skills and I often feel like I'm wasting precious time trying to resolve a problem or understand a concept without making progress. Fortunately my wife* helps me and encourages me. Future me, please remember you have the right to find a topic challenging. Give it the time it needs and let it rest for a while if you feel you're stuck.

On the other hand, I think I'm rather good at planning. I'm happy I found a way to make progress on the Qwixx project by cutting it down to managable improvments (adding controls on user input), one step at a time. I also find it useful to blog on what I learn, at the moment (searching, explaining with my words) and later on (I'm often looking for previous posts for Boilerplates or Flexbox for instance!).

Aaand there's work as well. 4 days a week, not nothing! I was not far away from a burn out at the beginning of the year but it was better and brighter on the end. There is some projects to come I'm very excited about and I feel I'm more efficient with my programming skills (on XSLTs) and with understanding how things go together.

Life!

Well, it's been a year that a close friend is imprisoned. Heā€™s keeping up. I would very much like to hug him again. Also on the dark side, my wife lost a childhood friend and my best friend lost her father-in-law. I did my best to give them support. Show love when you can!

*Yes, on the bright side the big news is that I got married! It was a lot of stress, of money and prep but well, love shines above all haha It was a beautiful and rainy and awesome day but wah, this is exhausting and neverending (thank you cards to send!)

What's next?

In 2024 I'll take a University course on my free time. So I think I'll continue learning web development!

What I'd like to achieve on computer science side:

  • writing article about jQuery
  • home server: autosave on dedicated USB key
  • laptop: add memory
  • Qwixx project: release v1, work on planning for v2
  • obtain my degree