Rik Schennink
@rikschennink
Followers
7,065
Following
111
Media
2,642
Statuses
15,823
Solopreneur • Founder @PQINA • Maker of @PinturaSDK ($20K+ MRR) and @FilePondJS (Free) • Web enthusiast
Netherlands
Joined February 2010
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Stop FakeNews On Sant RampalJi
• 407834 Tweets
ゼンゼロ
• 201578 Tweets
Independence Day
• 181924 Tweets
Happy 4th of July
• 154168 Tweets
ゼンレスゾーンゼロ
• 137421 Tweets
#あや姉さん一生ついて行きます
• 53692 Tweets
HANBIN
• 47235 Tweets
#ILAND2
• 40497 Tweets
インティマシーコーディネーター
• 37227 Tweets
Declaration of Independence
• 33664 Tweets
Ruffin
• 31219 Tweets
Happy Fourth of July
• 30692 Tweets
#VictoryParade
• 29998 Tweets
God Bless America
• 22750 Tweets
Hesitate
• 21715 Tweets
VLOG 3 WITH BUILD
• 21370 Tweets
izna
• 17709 Tweets
#バンドリ大発表会2024
• 17400 Tweets
GULF X MD
• 17344 Tweets
Happy Birthday America
• 16450 Tweets
アンジュルム
• 15886 Tweets
#ファフナー大祝福
• 12555 Tweets
SQUARE_ONE
• 12310 Tweets
Zafer İşareti
• 12293 Tweets
川村文乃
• 11987 Tweets
Pinned Tweet
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 🎉
72
42
1K
📱 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.
🎉
6
358
1K
FilePond v5 CSS grid view showing 200 file items.
Spring animated positions and sizes.
60fps with 6× CPU slowdown.
17
111
1K
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!
#webdesign
45
276
1K
You can now edit your photos at 🔗
🍪 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.
50
305
1K
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
:
Use discount code "ph25" for a 25% discount today 🎉
36
221
1K
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
72
959
For now, let's just focus on fixing it quickly...
6 months later...
http://t.co/06nxj2sMqj
26
1K
778
There’s more users with disabilities than people using IE8.
Still, we tend to drop accessibility in favour of IE8 support.
#fronteers14
33
1K
662
🧪 Use CSS numeric factory functions instead of string concatenation to set style unit values.
10
117
635
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.
20
39
575
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).
#javascript
#css
#webdesign
11
104
501
🔥 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
7
62
496
🖌 Billions of device mockups available for download on:
10
242
476
🗜️ 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.
11
62
380
#FilePond
Upload anything, from anywhere 🌊
🍎 Blobs
🍐 Data URIs
🍊 Local and remote URLs
🍋 Files
🍱 Directories
⚡️ Browse, Drop, Paste or use the API 🔌
#javascript
#css
#webdesign
#ux
5
76
336
📯 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! 🚀
16
15
322
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.
18
47
320
The Vite port number isn't just some random numbers.
localhost:5173 👉 localhost:SITE
17
15
305
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 ❤️
35
41
275
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.
11
11
243
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
18
28
210
💳 Combined some of the DeviceMotion effects it to render a credit card.
#css
💕
#javascript
11
38
205
✨ I've just Open Sourced Flip Counter
✅ Zero dependencies
✅ Beautiful animations
✅ Auto fits container width
✅ All major browsers supported
✅ JavaScript and jQuery API
👨💻
#webdesign
#ux
#javascript
11
46
193
@JacobyBrandon
Filter → noise. Filter → blur horizontal. New layer → Filter → noise. Filter → blur vertical. Layer blend mode → overlay.
7
5
190
🔥 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
7
29
180
Also applicable to
#CSS
👎 .is-loading
👍 [data-state=“loading”]
It’s possible that a WAI-ARIA state is more fitting:
ℹ️ Quick tip - more often than not, "boolean flags" should be considered code smells. Consider using string enums instead:
60
325
1K
2
34
173
Me centering elements with Flexbox
"align-items"... refresh .. nope
"align-content"... refresh .. nope
"justify-content"... refresh \o/
8
49
176
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.
#javascript
6
33
151
On actually understanding
#CSS
gradients instead of goofing around with its property values.
http://t.co/X0VD2Mrlta
1
73
150
@DavidZabinsky
@blakeaburge
I only launched it 2 months ago, don't be too hard on yourself ;)
1
2
140
@wesbos
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
134
it's almost done
👇
it's 20% done and I'm about to find out about the other 80%
5
14
126
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
123
✨ 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.
4
15
125
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
116
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.
5
18
108
👨💻 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
31
107
🔥 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.
👨💻
4
14
106
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 🙌 */
}
2
12
104
CropGuide now at $500 MRR.
It's a snail pace but our customers are over the moon so we're on to something.
14
2
101
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.
14
2
99
⌨️ 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:
1
10
99
Within 2 months organic traffic to passed 1000 visitors a day 😵
15
2
97
🔊 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
17
92
🚀 Launched
🎛 A tiny web-app to generate nice looking SVG Color Matrices for use with the `<feColorMatrix>` filter.
#webdesign
#webdev
#css
1
31
92
Just Disney® using my Flip countdown JavaScript library.
Found out because the devs didn't disable the PQINA credits link ❤️
🔗
8
1
90
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
87
🖊️ I'm going to try to write more articles this year. So, here's a blog post on writing dumb JavaScript and Smart CSS.
#webdesign
3
11
84
📱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
👉
7
7
82
@disco_lu
Loved it so much that I built an open source lib to simulate the interaction on the web. It feels especially great on mobile.
0
9
79
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
77
@jdan
I recall an endless stream of tutorials on how to replicate the aqua button in Adobe Photoshop 4
1
0
72
@iamharaldur
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. 🔥
6
0
72
📸 Just published snapText.js, a handy utility to snap pictures of HTML text.
Turns text into an SVG, image, blob, or canvas.
1
6
73
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*
9
5
87
6
8
74
📟 I just published short-and-sweet, an accessible character counter, tested with VoiceOver and NVDA
#a11y
#accessibility
#js
#ux
🔧
⚙️ npm install short-and-sweet --save
4
20
72
@levelsio
> 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
72
@csallen
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
68
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.
#ux
4
0
67
🛫 Only 2 weeks left until the family and I move to Curaçao for 8 months, super excited!
We’re on holiday in Curaçao ☀️
I’ve been thinking about “nomading” with wife and kids so looking to possibly return for a longer period next year.
6
0
16
8
1
66
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 🙌
14
0
65
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
52
5
63
@heydonworks
Maybe this floating header where JS is kept as basic as possible and "logic" is moved to CSS?
3
2
61
I just published 🎉
✍️ An app to quickly redact photos in your browser.
🤳 Works on both mobile and desktop devices.
🕵️♂️ 100% private. Everything stays in your browser.
8
12
61
💰 Don't be afraid to raise your prices.
Low prices attract a different audience. If my prices were lower my support requests would not increase linearly. Low price → 2x customers → 4x support.
3
2
58
@wesbos
I feel that when you start out energy is derived from getting things done instead of doing it correctly.
After a while you know you can get things done, and you’ll get more energy from focussing on how you do it.
I feel that’s the point TypeScript should be introduced.
4
4
61
Use `:placeholder-shown` combined with an "empty" `placeholder` attribute to toggle an icon in a search field without JavaScript.
3
8
61
For the past couple months I've been on/off debugging weird flickery movement when dragging a FilePond v5 item to another position. I should've just moved to the next thing on the list, but I've got issues.
This morning I finally figured it out! Turns out I was looking in the
FilePond v5 CSS grid view showing 200 file items.
Spring animated positions and sizes.
60fps with 6× CPU slowdown.
17
111
1K
5
1
61
The biggest challenge in
#responsive
design is not technical or visual, it's making your client understand what the web is actually about.
2
84
59
What's your side-project and how's it doing?
Feel free to post a link 👍
68
2
59
Don’t use a date input for birthdates.
People remember their birthdate as a string of numbers so use number inputs.
10
4
59