هلالtonight’s moonشمسةthe sixteen-petal rosette — how it is drawn

The observatory

Tonight’s moonهلال

Next new moon
—
Next full moon
—

The first thin crescent — هلال, the hilal — is the moon a day or two out of conjunction, and it is a beginning. The Hijri calendar is lunar: twelve months of twenty-nine or thirty days, a year some eleven days shorter than the solar one, so its months walk backwards through the seasons. A month opens when the new crescent is seen — and the naked-eye hilal is a hard object, thin and low and lost in the dusk it hangs in, which is why what counts as seeing it has been argued over for centuries.

That is one reason the astronomers of the medieval Islamic world measured the moon as closely as they did. Al-Battani, who spent most of his life at Raqqa and died in 929, left the earliest surviving zīj — a book of astronomical tables — in the Ptolemaic tradition, and tables like it could place the crescent before anyone went out to look for it. The disc above is worked the same way: everything on it follows from ψ, the angle between sun and moon, which fixes both the phase and the lit fraction, (1 − cos ψ) ⁄ 2.

The observatory

The sixteen-petal rosetteشمسة

the compass circle · sixteen points

Everything here is stepped off one circle. Sixteen points around it, each joined to the sixth from it; the {16/6} star polygon that follows then supplies its own measurements — the petal valleys at 0.689 R where consecutive chords meet, the ring at 0.390 R where they cross closest to the centre. Nothing is chosen by eye.

Patterns built on that kind of scaffolding are girih, the interlaced strapwork behind much of Islamic geometric ornament; cut from glazed terracotta and set piece by hand-chiselled piece, the same figures become zellij, the mosaic of Morocco and al-Andalus this page is named for. What craftsmen carried between sites was the construction rather than the finished design: the Topkapı Scroll, 114 patterns from the Timurid workshops, is the one pattern-book of its kind to survive. The eight-pointed star this rosette closes on is the khatam — two squares laid across each other, the octagram the Qur’an uses in its margins as the Rub el Hizb.

Ahmed El Gabri

أحمد الجابري

Two-centred drop arch — the Mosque of Ibn Tulun, Cairo, 876–879

Blog

Global scope, namespacing & CSS

· css · front-end

Update (2022):

I mainly use https://tailwindcss.com/ at this point & highly recommend it.

Update (2016):

Currently I don’t use or recommend using BEM with big apps, I prefer functional/atomic CSS, CSS modules or CSS in JS with React. These are useful links:

The problem

Anyone who worked with CSS before knows that one of the biggest problems we face as front-end developers is that CSS lacks scope or namescpacing, unlike with JavaScript for example. Which makes it very prone to selector conflicts which is something for sure you have struggled with at least a couple of times, whether it’s through third-party plugins/apps/API’s injected CSS or you working on an old projects with a tight deadline or even working with other developers who don’t understand CSS very well.

The fix

Some smart people came up with new ideas to fix it like that: Jonathan Snook’s SMACSS or the clever guys at Yandex with their BEM methodology & syntax which I prefer and started to use in all my projects.

But with the rise of OOCSS and trying to be as modular and flexible as possible and to make our selectors short and concise, the problem seems still existant. For example take the media object Harry Roberts mentioned in his article about BEM; the syntax looks like the following.

.media {
}

.media__img {
}

.media__img--rev {
}

.media__body {
}

It’s still prone to conflicts, cause maybe another developers or even a third-party API decided to use .media class, selectors will conflict and the last one will win - I’m not talking about specificity here, my rules are no IDs & max two selectors per rule. I’m trying to write simplest specific rules as possible -, so I’m assuming that this component is first class citizen in your CSS.

My idea

I’m in the process of writing a small framework to act as my starting point for any of the projects that I’m working on. So my solution for it was to create a fake scope. I achieved this by prefixing all my selectors with something like an your project initials, or your initials maybe if you work alone, framework initials, something that you & your team can understand. This should be documented of course.

So let’s make this easier, if we imagined that CSS had a global scope like JavaScript it will look something like this.

global object

    |_ <your prefix>

        |_ media object

        |_ grid

        |_ tabs

        |_ buttons

You shouldn’t be using different prefixes in your project, you will only use only one per project. For example lets take the same .media object above and apply this idea to it, assuming that we are working on “realmadrid.com” website. the new code will look like that:

.rm-media {
}

.rm-media__img {
}

.rm-media__img--rev {
}

.rm-media__body {
}

And you will need to apply this to all of your project objects, the pros of this approach are:

  • Your selectors are protected scoped from new selectors by third-party plugins/APIs or from new developers
  • Easily you will understand if this code was written by you/your team or by someone else.
  • If you work on multiple projects at a time, it’ll make it easier for you to understand which project you are working on with a glance.

The only downside I can think of know is it’ more verbose especially if you are going to use multiple classes on the same object like so. Which I stopped caring about anyway. Code readability is much more important

<div class="clearfix rm-media rm-media--wide rm-theme--green">
	<div class="rm-media__img">
		<!-- code -->
	</div>

	<div class="rm-media__body">
		<!-- code -->
	</div>
</div>

Yes I used .clearfix without a prefix cause it’s not an object class & most probably when it’s used by someone else it is a clearfix, if you want to be on the safe side maybe you can prefix helper classes with .h- or something if you like I’ll be using this technique in all of my upcoming projects & let’s see, but I’m optimistic about this approach. Let me know if you have any ideas about this or how can I improve it more.

Update: YouTube is doing the same.
youtube

You can share this post or reach me on @ahmedelgabri.