Hakim El Hattab hakimel

Making Slides.com • kodemo.com • reveal.js • Creator of questionable value at https://hakim.se

hakimel / custom-css-edge-aligned-controls.less

Created September 13, 2024 08:46

hakimel / reveal-swap-deck-sync.tsx

Created June 4, 2024 09:09

	import { useEffect, useRef, useState } from "react";
	import Reveal from "reveal.js";
	import "reveal.js/dist/reveal.css";
	import "reveal.js/dist/theme/black.css";

	function Presentation() {
	const deckDivRef = useRef<HTMLDivElement>(null)
	const deckRef = useRef<Reveal.Api\|null>(null);

	const deckContent = [

hakimel / clickmeifyoucan.html

Created May 12, 2023 07:44

	<html>
	<head>
	<title>Click me if you can</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	html, body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

hakimel / menu.jsx

Created February 15, 2023 00:09

KodemoMenu with a custom logo

	function Menu() {
	return (
	<KodemoMenu.Root>
	<KodemoMenu.Dropdown trigger={<CustomLogo />}>
	{/* ... */}
	</KodemoMenu.Dropdown>
	</KodemoMenu.Root>
	);
	}

hakimel / stack

Created January 30, 2023 13:12

revea.js markdown presentation with a stack of images

	# Slide 1

	Here's a stack:
	<div class="r-stack">
	<img class="fragment" src="https://placekitten.com/450/300" width="450" height="300">
	<img class="fragment" src="https://placekitten.com/300/450" width="300" height="450">
	<img class="fragment" src="https://placekitten.com/400/400" width="400" height="400">
	</div>

	---

hakimel / stack.md

Created January 30, 2023 13:11

reveal.js presentation with a stack of images

Slide 1

Here's a stack:

hakimel / gmail.css

Created August 24, 2022 17:33

Minimal gmail theme. Remember Inbox? 🥲

hakimel / get-past-fragments.js

Created June 9, 2022 07:17

Retrieves the total number of fragments that have been stepped past in a reveal.js presentation.

	function getUniqueFragments( fragmentElements ) {
	return Array.from( fragmentElements )
	.map( ( fragment, i ) => fragment.getAttribute( 'data-fragment-index' ) \|\| i )
	.filter( (value, index, array) => array.indexOf(value) === index ).length;
	}

	function getPastFragmentCount() {
	const pastSlides = Array.from( Reveal.getSlidesElement().querySelectorAll( 'section.past' ) );

	const fragmentsInPastSlides = pastSlides.reduce( ( total, slide ) => {

hakimel / gmail-user-style.css

Created November 9, 2020 08:57

	/* footer */
	.aeG, .pfiaof {
	display: none;
	}

	/* hide header logo and hamburger */
	.gb_3c {
	display: none !important;
	}

hakimel / sunandmoon.scss

Last active May 30, 2020 13:45