I'm no longer on Twitter, you can find me here: rik.schenn.ink
Netherlands
- Tweets 15,916
- Following 117
- Followers 7,035
- Likes 14,598
Our team of computer scientists have managed to position the flies on top of the MacOS Bin.
*lightning strikes, evil laughter can be heard in the background*
31
71
1,439
151,211
🔒 Set password field font-family to Verdana for nicer password dots. #CSS
ALT sans-serif or system font stack create tiny dots on some browsers, set Verdana font to the password field and the dots are the same on all browsers.
20
115
1,400
5 years ago I took a pay cut of 70% and stopped all consulting work to pursue my dream to become an indie product developer.
It took me 5 years of blood sweat and tears but in 2021 the monthly revenue from my products has finally surpassed my income as a consultant 🎉
ALT total income since oct 2018 is 215000 US dollars, income for March 2021 so far is 19000 US dollars
68
40
1,345
📱 TIL about the Visual Viewport API
⌨️ When opening a soft keyboard `window.innerHeight` will stay the same but `visualViewport.height` won't!
📡 Even better, you can listen for `resize` and `scroll` events on the `visualViewport` object.
🎉 developer.mozilla.org/en-US/…
5
327
1,318
FilePond v5 CSS grid view showing 200 file items.
Spring animated positions and sizes.
60fps with 6× CPU slowdown.
17
103
1,311
177,391
I just published a free, mobile friendly, online image editor.
🖼 Drop your image
✂️ Crop it
🎢 Rotate and flip it
📷 Apply filters
🔬 Adjust the color balance
🖍 Add some markup
📐 Resize to your liking
⬇️ Save it!
pqina.nl/doka/image-editor/ #webdesign
38
254
1,260
#css { scroll-behavior: smooth }✨
codepen.io/rikschennink/deta…
15
339
1,166
You can now edit your photos at edit.photo 🔗
🍪 no cookies to accept
🤹♂️ no popups to close
👤 no account to create
🎯 no ads to ignore
🕵️♂️ no spying on you
✨ 100% free
Paste, browse, or drop your photo and start editing.
45
276
1,166
I'm super excited to finally launch Doka.js! 😄
✂️ Doka.js is #JavaScript Image Editor for your Website.
🕹 Flip, rotate, resize, client-side transforms, Doka handles it all.
🔥 Live on @ProductHunt: producthunt.com/posts/doka-j…
Use discount code "ph25" for a 25% discount today 🎉
35
203
1,143
Don’t do this.
Use `outline` instead of `border`.
Outline doesn’t take up space, border does.
Set color to `rgba(255, 0, 0, .25)` instead of `red` so you can see overlapping outlines more clearly.
10
60
893
117,904
It seems this has been fixed for a while now.
Apparently this was only possible on Macs released prior to 2008. Since then the LED is tied to the sensor hardware signal.
daringfireball.net/2019/02/o…
5
8
611
271,648
There’s more users with disabilities than people using IE8.
Still, we tend to drop accessibility in favour of IE8 support.
#fronteers14
32
1,249
555
🧪 Use CSS numeric factory functions instead of string concatenation to set style unit values.
developer.mozilla.org/en-US/…
ALT use CSS.px(value) to set a style unit value instead of using value + 'px'
8
108
586
Yesterday I tried to create a shiny silver line using the DeviceOrientation sensors. The orientation is mapped to the offset of an SVG radial gradient. It's functional but not very realistic yet.
18
34
522
Just published the first version of Shiny.js, a library to make backgrounds, borders, and text appear to reflect light on mobile devices (devices that support `deviceorientation` events).
github.com/rikschennink/shin…
#javascript #css #webdesign
9
96
445
🔥 CSS tip → Use font-variant when you animate numbers.
.animated-numbers {
font-variant: tabular-nums
}
This applies a uniform width to the numeric glyphs resulting in a smoother animation.
Top: font-variant not set
Bottom: font-variant set to tabular-nums
4
53
461
🗜️ Compressing images before upload.
Instead of bothering your visitors with image requirements, compress them with JavaScript.
Quick read on using <canvas> to compress images and DataTransfer to save images back to the file input from whence they came.
pqina.nl/blog/compress-image…
10
58
364
61,853
Crossed 1 Million in total revenue on Gumroad 🔥
ALT 1,028,129.87 in revenue, mostly by Pintura
48
6
349
76,035
#FilePond Upload anything, from anywhere 🌊
🍎 Blobs
🍐 Data URIs
🍊 Local and remote URLs
🍋 Files
🍱 Directories
⚡️ Browse, Drop, Paste or use the API 🔌
pqina.nl/filepond #javascript #css #webdesign #ux
5
68
313
📯 I've crossed the $125,000 worth of sales boundary on @envato
🍰 I've been selling on Envato for 5 years
📦 Sold 7,919 licenses shared over 11 products
🌟 I've gathered 438 ratings averaging at 4.93 out of 5 stars
💬 Answered a gazillion support requests
Wahoo! 🚀
14
13
301
In other news.
Safari 15 has a canvas memory limit of 4096 × 4096 pixels where Safari 14 could deal with resolutions up to 16384 x 16384.
What a mess.
16
41
298
The Vite port number isn't just some random numbers.
localhost:5173 👉 localhost:SITE
16
13
290
214,140
I finally launched Edit • Photo on Product Hunt! 🛵💨
No pop-ups, no ads, no account, no subscriptions, and no discount codes, because it’s 100% free.
Would love your support ❤️
producthunt.com/posts/edit-p…
33
37
265
57,288
Our 7-year old wanted to learn how to play chess, but we didn't own a chess set, so we built a tiny one with LEGO.
ALT chess set with tiny lego models
10
10
226
17,471
Reading up on the EU Cyber Resilience Act (CRA).
In short it’s an extensive list of requirements and validations for companies and individuals selling software in the EU.
A lot of time consuming and costly hoops to jump through. Fines up to 15 million Euros.
Oh I forgot. If your open source project accepts donations, you need to comply.
It sounds like a next level VAT-MOSS.
A method to make it even harder for new companies to compete with existing enterprises.
16
29
198
876,333
💳 Combined some of the DeviceMotion effects it to render a credit card.
#css 💕 #javascript
10
33
189
Will the real close button please stand up?
ALT Sign into X on mobile iOS Safari, lots of x characters in the top left
7
25
187
13,615
✨ I've just Open Sourced Flip Counter
✅ Zero dependencies
✅ Beautiful animations
✅ Auto fits container width
✅ All major browsers supported
✅ JavaScript and jQuery API
👨💻 pqina.nl/flip/ #webdesign #ux #javascript
ALT Flip supports event countdown, session countdown, historic counters, recurring events, fund raising campaigns, number reveal, value animations, clocks and billboard.
10
43
182
Filter → noise. Filter → blur horizontal. New layer → Filter → noise. Filter → blur vertical. Layer blend mode → overlay.
5
4
179
25,420
🔥 The FilePond Image Editor UI is coming together nicely, it's fully powered by CSS transforms and easily runs at a stable 60FPS on my iPhone SE
#javascript #css #webdesign
6
26
170
Also applicable to #CSS
👎 .is-loading
👍 [data-state=“loading”]
It’s possible that a WAI-ARIA state is more fitting:
w3.org/TR/wai-aria-1.1/#stat…
ℹ️ Quick tip - more often than not, "boolean flags" should be considered code smells. Consider using string enums instead:
2
34
159
Me centering elements with Flexbox
"align-items"... refresh .. nope
"align-content"... refresh .. nope
"justify-content"... refresh \o/
6
47
167
Installing Doom on ChatGPT...
ALT ask it to pretend to be a linux terminal
ALT install linux doom package
2
23
140
I just published the FilePond source code 🙈✨
Slightly nervous as I the unit tests aren't that great, so if you 💕 writing tests and have time to help out, it would be very much appreciated.
github.com/pqina/filepond/ #javascript
5
32
140
On actually understanding #CSS gradients instead of goofing around with its property values.
medium.com/@patrickbrosset/d…
1
64
130
It’s not the “it’ll build websites” part that worries me, it’s the “it’ll browse the web for people” part.
When it starts doing that the relevancy of interactivity and design on the web starts plummeting as less and less humans will use it.
7
5
126
✨ I got a bit carried away with the shiny DeviceMotion thing. It now works on text, borders, and backgrounds.
I’m cleaning up the API and hope to push version 0.1 to GitHub on Monday.
3
15
114
The perfect time to start your side project is when you’ve just started learning how to code.
It’s a small window in your career where you only focus on getting stuff done instead of worry about how it’s done.
4
13
115
Last Wednesday I removed Slack, Twitter, Telegram, Reddit, and "business" email from my phone in an effort to be more present.
Went on a city trip to London and spend 15 minutes of screen time to check the weather.
When I checked this morning, my company wasn't on fire.
Life++
3
5
109
🔥 TIL `document.currentScript` returns a reference to the scripts script tag.
Very useful for inline scripts that need access to sibling elements without using id's or classes.
👨💻 codepen.io/rikschennink/pen/…
ALT document.currentScript gets a reference to the script tag, previousElementSibling is used to then select the button element preceding the script
4
12
105
👨💻 TIL you can use `monitorEvents(element)` in Chrome dev tools to log all the element events to console.
📡 Pass event name or group as second argument to filter events.
Log click events: `monitorEvents(element, 'click')`
Log mouse events: `monitorEvents(element, 'mouse')`
1
25
93
CSS nesting is still in draft but might as well get used to the syntax so your selectors are future proof:
🔥 Using Sass? Prefix your nested selectors with &
🔥 Using PostCSS? Use the PostCSS Nesting plugin.
w3.org/TR/css-nesting-1/#dir…
ALT old syntax .button { .icon { color: red } } versus new syntax .button { & .icon { color: green } }
4
15
96
Writing smart #CSS to show and hide elements on the page.
Store session duration and scroll offset in data attributes on the `<html>` element. Now we can use this data in our CSS. 🔥
html[scroll-y~='50%'][visit-duration~="30s"] {
/* Styles 🙌 */
}
dev.to/rikschennink/using-sm…
1
9
95
Our little bananabin.app is top story on The Verge.
ALT Title: This new Mac app uses animated flies to tell you when to take out the trash
16
2
102
7,944
I just trained my own Dreambooth Stable Diffusion model thingy, cause why spend money if you can-do-it-yourself-for-free™
It takes long to train, but takes an even longer to come up with good prompts and wait for results.
Getting dozens of profile pictures for $29 is a steal.
ALT generated portrait, happy cartoon like, pink light from left, green light from right
14
1
89
CropGuide now at $500 MRR.
It's a snail pace but our customers are over the moon so we're on to something.
ALT chart showing growth jumps during summer
14
2
97
⌨️ nudgeable.ts
A tiny @sveltejs action to add arrow key interaction to an element.
🏃♂️ Bigger steps? Hold [SHIFT]
```
<div use:nudgeable on:nudge={ handleNudge }/>
<script>
const handleNudge = ({ detail: translation }) => {
}
</script>
```
src: gist.github.com/rikschennink…
10
89
Within 2 months organic traffic to edit.photo passed 1000 visitors a day 😵
ALT from 0 to 1000 visitors a day via google in 2 months
15
2
90
🔊 What does a fieldset sound like?
Group radio buttons together using a `<fieldset>` element and add a `<legend>` to describe the group.
Assistive technology can now tell the user what group the radios belong to.
6
12
79
🚀 Launched fecolormatrix.com
🎛 A tiny web-app to generate nice looking SVG Color Matrices for use with the `<feColorMatrix>` filter.
#webdesign #webdev #css
1
26
81
Just Disney® using my Flip countdown JavaScript library.
Found out because the devs didn't disable the PQINA credits link ❤️
🔗 pqina.nl/flip
ALT Flip countdown on Disney landing page
7
1
87
12,704
As an experiment I wrote a new item component for FilePond v5, it uses <canvas> instead of CSS.
Just ran a performance test with 200 file items in a grid. Fully expected it to crash and burn, turns out it's like 50 times faster than using the DOM.
*scratches head*
9
5
85
31,381
We're in beta! 🪰🗑️🎉
@leonschrijvers and I built a MacOS app that adds flies to your Bin to remind you that it's time to clear it.
bananabin.app
11
9
79
9,515
🖊️ I'm going to try to write more articles this year. So, here's a blog post on writing dumb JavaScript and Smart CSS.
dev.to/rikschennink/applying… #webdesign
3
10
79
$12,000 contributed to open source.
If I can do it as a solo dev, so can your company.
ALT eleventy 3700 svelte 3200 tauri 200 verdaccio 1200 react-drop zone 4500
6
6
79
10,619
Pintura and @figmadesign sitting in a tree ❤️
Thanks for the idea @wesoudshoorn!
2
4
79
📱This Sales Widget for @ScriptableApp displays your recent @Gumroad sales right on your iOS homescreen
🗓 Stats for 7 days
💸 Total income
📦 Total sales
📈 Daily income
📊 Daily sales + recurring sales
🔄 Last update time
🌓 Bright and Dark theme
👉 gumroad.com/l/sales-widget
7
7
80
Loved it so much that I built an open source lib to simulate the interaction on the web. It feels especially great on mobile.
rikschennink.github.io/tilt/…
9
74
How it started 👉 How it's going
ALT Zero clients
ALT Dropbox, Accenture, Mailgun, Swatch, Square, ConvertKit, GraphiteConnect, Atos, Pattern, Samsung, Ghost, Amazon, GettyImages
12
1
77
12,561
📗 I wrote a quick step-by-step introduction to file uploading with #VueJS and FilePond.
dev.to/pqina/how-to-upload-f…
1
17
71
I hate it but it looks like after 5 years I’m leaving @gumroad :/
Incredibly reckless to announce a 300% price hike on Twitter.
No, I didn’t get the email this morning. Also, it’s Saturday.
9
2
73
55,574
Now with real AI using @replicatehq
8
6
75
49,401
Devs here! Thanks for sharing! 🙏🙌
@leonschrijvers and I are kinda blown away by all the attention it’s getting. 😄
7
71
7,163
I recall an endless stream of tutorials on how to replicate the aqua button in Adobe Photoshop 4
1
63
9,712
Switched from using the Drag and Drop API to using plain old PointerEvents (down → move → up).
Turns out simple PointerEvents are faster.
When using Drag events the browser runs hit test logic which it doesn't do with PointerEvents.
As an experiment I wrote a new item component for FilePond v5, it uses <canvas> instead of CSS.
Just ran a performance test with 200 file items in a grid. Fully expected it to crash and burn, turns out it's like 50 times faster than using the DOM.
*scratches head*
6
8
69
20,188
Apparently it’s a battery size thing why there’s no new mini :/
Hope they reconsider, love the mini form factor, but back to 5 size would be even better. 🔥
5
67
18,500
📟 I just published short-and-sweet, an accessible character counter, tested with VoiceOver and NVDA #a11y #accessibility #js #ux
🔧 github.com/rikschennink/shor…
⚙️ npm install short-and-sweet --save
2
17
66
📸 Just published snapText.js, a handy utility to snap pictures of HTML text.
Turns text into an SVG, image, blob, or canvas.
github.com/pqina/snaptext
1
6
72
8,473
AI is going to be a huge drain on support.
Same thing happened to me last week, a dev submits a support ticket and posts code that is totally bonkers.
Turns out he was using ChatGPT to generate the library initialisation code. 🫠
3
64
7,033
> Your friends peer pressure you in drinking alcohol “come on, one beer, don’t be so strict”
If they know you don’t drink than it’s time to find new friends.
6
3
68
29,173
New dev version of Doka Image Editor running on my old iPhone SE 5" ☎️
I redesigned the filters page so it supports grouping. Also added more effects like Clarity and Gamma. Noise and Vignette are on the todo list.
pqina.nl/doka/ #ux
2
61
Context: Dad of two, never really wanted kids, but also wasn't against it.
For: They add meaning to life and make you look at yourself and your parents in a completely new light. I love them to bits.
Against: I put them on a planet that's on fire and the guilt is eating me up.
5
2
61
Huge shoutout to @rive_app 🙌
Without Rive it would've been a lot more difficult to build bananabin.app
Our flies are controlled by lots of timelines and state machines. 🕹️
2
1
66
5,703
Doka.js is 1 year old 🎉
📈 $ 5,482.25 in sales this November
🙌 First 4 customers renewed their annual licenses
🤫 Soft-launched Doka for WordPress
👨💻 Set up the PQINA customer portal
A million new plans on the horizon ☀️
pqina.nl/doka/ #indie #webdev
1
3
60
It has been 10 years.
Risky ROI is why I switched to the more safe route of selling web components.
I hoped one day to make enough to return for a second attempt.
That day has finally come.
I'm building a new game and I couldn't be more excited 🙌
ALT Dim moonlight shines through a forest. A man stands next to a rockface in the dark, a long shadow is cast by the campfire nearby.
14
60
My new product ideas are constantly hampered by the fact that I don't have a lot of experience writing backend solutions.
What would be the easiest Node / React (or Svelte) based solution to build a very basic SaaS?
Needs:
- authentication
- privacy
- easy to extend
48
5
59
Just published Doka.js v3.1, it now ships with #VueJS components 💚
👉 pqina.nl/doka/
11
55
🎙️ I was interviewed by IndieHackers on building, launching, and reaching 3K/mo for Doka.js
A bit of history, info about the tech used, sales and visitor numbers, features that were cut, and tips for other makers.
indiehackers.com/interview/h… #indiedev #webdev #startup
1
7
57
I just published redact.photo 🎉
✍️ An app to quickly redact photos in your browser.
🤳 Works on both mobile and desktop devices.
🕵️♂️ 100% private. Everything stays in your browser.
7
11
53
Maybe this floating header where JS is kept as basic as possible and "logic" is moved to CSS?
codepen.io/rikschennink/pen/…
2
2
53