Positionned

[abelards]

I'm sorry I have to be like this, we all have some kind of OCD you know?

Anyway it really is an AWESOME work, sad I couldn't attend the talk.
How long did it take to do all of this?

You're doing circle with images, why did you decide not to try an UTF-8 or border-radius?
Interesting shadow technique for multiple symbols, several :before couldn't cut it?

Again, thanks for that awesome work.

[pixelastic]

Haha, thanks Sylvain.

I'd be happy to play the talk again at the ParisRB if you think it fits what the audience is looking for.

I started this one year ago, but I stopped after about 2 months because I did not really grok what flags were. Then I restarted it again 6 months later and really read about vexillology to understand what a flag really is, understand the vocabulary and ratios and then I was able to do it correctly. I couldn't say really how long it took me. I remember doing one or two flags every day after work. Really, I'd say the commit history is the best answer I could give :)

Regarding circles: I tried to use the SVG font only for symbols I do not know how to do in pure CSS. Using the font kinda looked like cheating, so I tried to use it only when there was no other choice. I could have used border-radius: 50%, but this meant using a precious after/before and I really needed them for symbols and/or triangles.

I can only use one after and one before so I had to be creative in the way I was using them. I mean I could have put several symbols on the same content but then it was hard to give them different size, color or position. I managed to put up to three different symbols using both first-line and first-letter but that was the max I could do.

If you have any other techniques, I'd be happy to know them, to finish the flags I couldn't do :)

[abelards]

I'd be happy to play the talk again at the ParisRB if you think it fits what the audience is looking for.

I think the audience would be amazed, and I'd love to see it!
We're "too lucky" for now and the lineup looks full for next week AND next month,
so perhaps redoing it as a lightning, or waiting for April+ if it fits you.

I started this one year ago, but I stopped after about 2 months because I did not really grok
what flags were. Then I restarted it again 6 months later and really read about vexillology

Classic example of something going on in your brain and developing an understanding with time :)

It's great you went beyond the initial frustration and your mind kept "background processing it" until things became clearer. That in itself is worth a talk, but it's difficult for the audience to understand unless it happened to them in a "a-ha" moment :)

Regarding circles: I tried to use the SVG font only for symbols I do not know how to do in pure CSS.
Using the font kinda looked like cheating, so I tried to use it only when there was no other choice.

I was about to call you on "cheating" things but it's really impressive work, well done!

I could have used border-radius: 50%, but this meant using a precious after/before
and I really needed them for symbols and/or triangles.

Is it a hard CSS limitation, complexity to change sizes/colors, or is it "just" to avoid some dirty problems?
I'm interested (but would not spend the time) in chaining after/before: perhaps you got the question after the talk? I'd be glad to have a chat about that some day.

If you have any other techniques, I'd be happy to know them, to finish the flags I couldn't do :)

I don't do advanced CSS, mostly because I don't need to (my job's challenges are elsewhere, this is not where I'd bring the most value).
But I feel like I understand CSS and can do some clean "vanilla" CSS, and it looks like a rare enough skill for me to be proud enough :p

[pixelastic]

I need about 30mn for the talk, so I'm ok to wait until you have a slot available.

I'm interested (but would not spend the time) in chaining after/before: perhaps you got the question after the talk? I'd be glad to have a chat about that some day.

Actually, it is not possible to chain before. div:before:before is not valid. Is that what you had in mind?

[abelards]

We usually do 5 or 20mn but that'll fit ;)
I'm adding this for April? (OMG we have a full month of runway!)

As for the :before I forgot your self-imposed constraint on a single div.
Once written down div:before:before looks weird (but could be legit),
I was wondering on tricks like adding markup or fetching shadow DOM elements in the content which could then have :before.
I guess that's not available yet, if ever :)

[pixelastic]

I'll be in Japan until April 10th, so as long as it's after that I'm ok.

And yeah, one div :). Another direction I'd like to explore is perspective

[abelards]

May the 3rd then? Have fun in Japan :D

[pixelastic]

The day before my birthday. Deal!