Mohamed Attia's Macrocosm

Please Use HTML data-attributes

Sun, 27 Jul 2025 20:38:09 +0200

If you need to attach custom attributes to an HTMLElement that you can also access from JavaScript or CSS, please use data-attributes.

HTML

Let’s say you have a very simple gallery that has image thumbnails and it displays the full image when you click on a thumbnail and also displays a caption for the image, we can define this gallery in HTML as follows:

<div id="gallery">
 <img
 src="thumb1.jpg"
 alt="Sunrise thumbnail"
 class="thumbnail"
 data-full-src="images/sunrise.jpg"
 data-caption="Sunrise over the mountains"
 >
 <img
 src="thumb2.jpg"
 alt="City skyline thumbnail"
 class="thumbnail"
 data-full-src="images/skyline.jpg"
 data-caption="Nighttime city skyline"
 >
</div>

<div id="lightbox" class="hidden">
 <button id="close-btn">❌</button>
 <img id="lightbox-img" alt="">
 <p id="lightbox-caption"></p>
</div>

Notice how for each image we used 2 attributes that start with data-:

Quick journaling in org-mode in Emacs

Sun, 24 Mar 2024 00:00:00 +0000

A while back I started maintaining a journal, it can contain things that I’ve learned like new programming techniques, new commands, new insights, …etc. The key for me to make this viable is to be low-friction, so I’ve written an Emacs Lisp script that opens a journal in my journal directory with today’s date as the filename, so whenever I want to write something, I just hit Ctrl-x-j in emacs, write what i want and move on. And later on, if I want to check something in my journal e.g. an obscure command, I can just grep my journal directory.

Barebones python project with a virtual environment in Emacs Lisp

Sat, 23 Mar 2024 00:00:00 +0000

A lot of the time I find myself wanting to have a directory with a basic Python virtual environment initialized in it, so I wrote the following Emacs Lisp script to do that, you can use it as an interactive function in emacs or as a script that you call from a shell.

Remember to change the path and the keybinding to your liking

#! emacs --script


;;; Code:
(defun setup-python-project-in-directory (project-name)
 "Setup a Python project at PROJECT-NAME with a virtual environment."
 (interactive (list (read-string "Enter the project name: "
 "frobenius")))
 (let* ((project-dir (concat (expand-file-name "~") "/personal/python-playground/" project-name))
 (venv-cmd (format "python3 -m venv %s/.venv --prompt %s" project-dir project-dir))
 (exists (file-exists-p project-dir)))

 (when exists
 (if (y-or-n-p (format "Directory %s exists. Delete and recreate? " project-dir))
 (delete-directory project-dir t)
 (user-error "Process cancelled by the user")))


 (unless exists (make-directory project-dir t))
 (message "Setting up virtual environment...")
 (shell-command venv-cmd)
 (message (format "To activate your virtual environment, run: \n\n source %s/.venv/bin/activate" project-dir))))


(when noninteractive
 (let ((project-name (car command-line-args-left)))
 (if (or (null project-name) (string= project-name ""))
 (error "No project name provided. Usage: script %s <project-name>" load-file-name)
 (setup-python-project-in-directory project-name))))

(global-set-key (kbd "C-x p y") 'setup-python-project-in-directory)

(provide 'setup-python-project-in-directory)

I haven’t bothered to make a proper shebang but check this out if you’re interested in doing that.

Python Internals – CPython Bytecode

Sat, 16 Jun 2018 23:51:11 +0200

In this post, I am gonna walk you through compiling python code to CPython bytecode, what code objects are, how to construct them, how to disassemble them, and how to decompile them.

I will be using CPython 3.6.5.

A simple example

>>> codestr = """
print('Witness me!')
"""

>>> compiled_codestr = compile(codestr, '<string>', 'exec')

>>> type(compiled_codestr)
<class 'code'>

Whoo, we have created our first code object.

We passed arguments to the compile function as follows:

codestr is, as you might have guessed, our code as a string.

ADTs (Algebraic Data Types) in Haskell

Wed, 30 May 2018 00:00:00 +0000

Update (2021-10-19) Correct inaccurate language referring to simple ADTs thanks to e01izuz

Algebraic Data Types are a way for us to define types like the ones that come with Haskell e.g. Bool and Int.

Single Constructor Without Arguments

One of the simplest datatypes we can construct in Haskell is a type with a single constructor,

data Frame = MkFrame
x = MkFrame

Examining the type in ghci

:> :type MkFrame
MkFrame :: Frame

:> :type x
x :: Frame

In this example, we use the data keyword to signify a Data Type, Frame is the name of that type and we refer to it as a Type Constructor. MkFrame is called a Data Constructor and this is how we create new instances of the type Frame.

Mathematical Induction

Mon, 12 Jun 2017 00:00:00 +0000

Suppose you want to sum up the first 10 natural numbers 1, 2, 3, ...

The most obvious way to do it would be to add the numbers consecutively like so:
1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 = 55
No big deal, but now you want to sum the first 1000 natural numbers i.e. 1, 2, 3, ..., 1000. While you’re carrying out this laborious task, your friend Hypatia passes by and tells you with a confused look “Why are you doing all that? You can just use this formula:”
$$ \frac{n(n+1)}{2} $$
Skeptical, you give it a try on the first 10 natural numbers, because you already know the answer to that. So, you substitute n for 10 and you get
$$ \frac{10(10+1)}{2} = \frac{110}{2} = 55 $$
Lo and Behold, it’s the right answer. Go ahead and try it for other values of n yourself, see if it works.