Hakim El Hattab
@hakimel
Followers
41,267
Following
231
Media
466
Statuses
7,994
Making @slides – @revealjs – – • Creator of questionable value at • 🇸🇪🇲🇦
Sweden
Joined September 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
ドラフト
• 407151 Tweets
#わたしの宝物
• 78929 Tweets
Baakhabar Sant Rampal Ji
• 66211 Tweets
#หนึ่งในร้อยEP11
• 63134 Tweets
CONSTRUCT A NEW DREAMSCAPE
• 61201 Tweets
#빛나는_리노의_YOUTH
• 60319 Tweets
#るぅとくん誕生祭2024
• 59924 Tweets
#PrideOfKpopLeeKnow
• 56065 Tweets
青春18きっぷ
• 53272 Tweets
ILL BE THERE TODAY
• 48364 Tweets
FURIA EN BONDI
• 31638 Tweets
#與那城奨を沖縄から世界へ
• 29603 Tweets
Sumar
• 28606 Tweets
WALL SONG OHMLENG
• 27081 Tweets
#HAPPYSHODAY
• 24013 Tweets
まっすー
• 15506 Tweets
GENTO SA TAIWAN
• 14064 Tweets
GALA X DESPIERTA
• 13691 Tweets
もやしもん
• 13642 Tweets
REALLY LIKE YOU PREVIEW
• 13151 Tweets
#甲斐田晴誕生日2024
• 12450 Tweets
LEVEL UP PITBABE
• 12237 Tweets
冬月くん
• 11600 Tweets
Pinned Tweet
Shipped Motionscribe 1.0 🚀
Create great looking promo videos in minutes ⚡️
26
24
334
Now that ChatGPT has vision and DALL·E in the same context it can generate avatars 😁
70
359
6K
Forever working on improving the home office. Now with a dual monitor arm and a bigger display ✨👨🏾💻
120
194
5K
tfw your hotel shower is a more prolific OSS contributor than you
18
530
3K
Was just reminded of an old demo. Made this 13 years ago 👴
46
165
3K
Say hello to Kodemo — a work in progress tool for writing code tutorials/docs 👀
63
265
2K
Started drawing dynamic SVG hit areas for this menu component 👀
29
290
2K
Kodemo is now open source 🎉
You can use it to integrate code tutorials like this anywhere you want.
42
322
2K
👀 Made transform anchors spread at small sizes, to make it easier to resize small blocks. (Left is old, right is new.)
30
145
2K
TIL scroll-margin-top can be used to prevent anchors from being covered a sticky header
16
178
1K
I'm terrible at writing concise UI copy. ChatGPT to the rescue.
23
67
940
👀 If you've got a static site with a scrollable sidebar, it really helps to memorize the scroll position across page loads.
(left is default, right memorized)
4
103
734
TIL the Bluetooth logo is the runic initials of the Danish king it was named after, Harald "Bluetooth" 🤯
7
225
715
reveal.js 5.0 is out 🚀
Use the new scroll view to turn any presentation into a scroll animated page. Auto-enabled for mobile.
7
93
715
Introducing Motionscribe 🪄
Create great looking promo videos from text. Built for macOS.
31
52
601
This Google Ad Manager menu is a great example of how not to use tooltips.
18
132
548
Front-end development is hard, but have you ever tried single-handedly getting two kids ready for preschool on time? 😵
22
48
549
Make your scroll shadows even better by gradually turning up their strength based on *how much* overflow there is ✨
6
46
539
Our custom captcha for Slides 🟢👈
It's one of the first things new users interact with so I tried to polish it for a good first impression.
21
21
541
Worked on automatic transitions between similar code blocks tonight and it turned out so freaking cool 😲
15
29
524
Super happy with this directional hover effect on the new 👆✨
21
50
497
Made a scrollbar for the reveal.js reader mode 👀
- Each bar is a slide
- Dots indicate in-slide animations
- Auto-invert when the slide bg changes
7
23
477
Kodemo now matches & animates lines with different indentation. Look at these transitions 😍
12
24
457
Kodemo is now available 🚀
Try it out for free—no sign up needed. Pay for cloud storage/image uploads.
16
73
409
👀 Refined our dark mode button to infinitely loop in the same direction and now I can't stop clicking it ☀️🌙
7
19
394
👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surrounding page. More seamless and color flexible than a border.
4
66
395
Final version of the progress nav! Switched to SVG and made it animate around corners.
Live demo:
25
89
377
I’m leaving Google Inbox like the UK is leaving the EU—imminently without an exit strategy.
11
57
355
One of the reasons I love working for myself is being able to do this
10
3
323
One of my favorite lifehacks is a text replacement that turns @@ into my email in macOS/iOS ⌨️
18
38
316
Especially happy with the dynamic drawings based on anchor/menu location.
7
21
294
reveal.js 4.0.0 is out! 🚀
- New docs at
- Auto-Animate
- Refactored source to es6/esm
- Multi-presentation support
- Automatically scroll syntax highlight lines into view
Release notes & demos:
11
75
291
The novelty of the slide-down animation in Slack's new text toolbar wore off very quickly.
👉 Avoid in/out transitions that users will see repeated this frequently.
9
33
279
Did you know you can hold space to move the macOS screenshot selection box?
19
13
245
Added auto-animate support to the new scroll mode.
Now every reveal.js deck out there can also be a scroll-animated website 🪄
4
9
240
reveal.js 3.9.0 is out! Adds support for step-by-step code highlights 🚀
7
43
223
Wanted to stack and center a set of unknown elements and turns out grid makes that super easy ❤️
3
42
225
Working on a more flexible & responsive header for Slides 👀
5
12
221
I like to animate content coming *into* view, but remove it instantly when closing.
In-animations tell the user where to focus next 👍 Out-animations draw attention to what's going away 👎
Intros over outros.
11
25
206
Started a twitter moment for all of my UI and interaction experiments ✨
2
27
205
👀 Worked on the auto-animate interface today! Happy with the progress so far.
10
17
203
Making sure this popout arrow accounts for all the positioning edge cases 🧐
12
11
182
👀 A little drag and drop animation I worked on. It's over-the-top but I'm still really happy with it 🙃
6
7
184
Working on presentation.
Hm, guess I just need a picture of a scrollbar for this slide.
Two hours of procrastination later:
5
9
181
Saying “that’s been built/written/made before!” to invalidate someone’s work always bewildered me.
Everything is derivative. Reinventing things with your own perspective is great.
6
34
178
📝
Monitor arm: ErGear Dual Monitor Arm 13"-32"
Laptop holder: InLine 23162A
Monitor: Pro Display XDR
Mic + arm: Blue Yeticaster
Camera: Sony A7II via Cam Link 4K
Camera arm: Elgato Multi Mount
Lights: Elgato Key Light Air
Desk: IKEA table top + Brizley AdjusTable Pro3X Black 600
12
8
176
built a tool that ranks job applicants by how well they match your job description 👀
7
6
172
Wow. Google just announced a SWF to HTML5 converter. Examples:
http://swiffy.googlelabs.com/
11
546
161
Working on freehand drawing support in
@slides
👀 Powered by
@steveruizok
's wonderful perfect-freehand library 🙌
8
12
162
Couldn't find a simple math quiz to use with my kids so I built one this morning 🙃
11
10
153
Driving through Norway today was a real feast for the eyes 😍
4
8
157
Moved the family to Thailand for the next two months. Will be hard to get much work done from here 😅🏝️
13
0
154
Adding auto-scrolled keyboard navigation was surprisingly painless with:
scrollIntoView({behavior: 'smooth', block: 'nearest'});
+
scroll-padding: 2em;
❤️
3
16
148
If you want to give it a try, here's a link to a couple of different menu examples:
3
7
136