Baptiste Adrien
@baptadn
Followers
2,246
Following
374
Media
311
Statuses
937
developer.tsx @premieroctet , bytes hunter-gatherer 🎈
Paris
Joined April 2009
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
梅雨明け
• 208034 Tweets
Raila
• 160348 Tweets
#BKPPยอม_MV
• 55845 Tweets
パワプロ
• 47647 Tweets
NORAWIT X BV IN EMPORIUM
• 29837 Tweets
Harmony
• 24815 Tweets
暇空敗訴
• 24622 Tweets
PAPA DALI
• 20099 Tweets
Kamari
• 20011 Tweets
Overdose
• 19926 Tweets
WazirX
• 16967 Tweets
SEMANGATbaru EKONOMItumbuh
• 15856 Tweets
JIMMYSEA CHOC x AIS
• 15531 Tweets
डिब्रूगढ़ एक्सप्रेस
• 14581 Tweets
रेल मंत्री
• 13175 Tweets
スキズ再契約
• 12212 Tweets
Mehmet Büyükekşi
• 10976 Tweets
#プレバト
• 10939 Tweets
When dealing with SMS validation code form, don't forget to add the autocomplete attribute with the value "one-time-code".
It allows iOS to autofill the input with the incoming SMS 📩
32
1K
6K
💥Introducing OpenChakra (beta)!
An open-source visual editor for
#reactjs
!
✨ Based on Chakra UI by
@thesegunadebayo
🎨 Drag and drop
👀 Live props editing
⚛️ JSX Production-ready code
💽 Localstorage sync
🎈
@codesandbox
export
♥️ From
@premieroctet
21
255
938
Introducing my new little side project: 📸
An open-source AI avatar generator webapp built on Dreambooth model
▲
@Vercel
+ Next.js
🖼
@chakra_ui
for UI components
🧠
@replicatehq
for AI model
💰
@stripe
for payments
🐙
13
30
334
Took the last weekend to work on my
@figmadesign
exporter. It's now turning your Figma pages into real web pages! 😎
Under the hood a
#Nextjs
website is built and deployed on
@vercel
thanks to their Deployments API 🚀
12
25
304
Figside helps non-tech people to ship simple static websites thanks to Figma.
Here is an overview of the Figside process from
@figmadesign
login to
@vercel
publishing! Check out the templates for some examples:
4
31
229
I'm working on a visual builder for Chakra UI (from
@thesegunadebayo
) 🔥
💈Drag and drop components
💈Props editing panel
💈Live code preview
💈CodeSandbox export
More soon!
#reactjs
#wip
7
30
211
3
14
110
Protips: When shipping a React Native app with an embedded website in a WebView, don't forget to reload the webview in the onContentProcessDidTerminate callback.
If you don't do it, the user might get a blank screen when they return to the app (on iOS).
3
13
108
2
5
98
New React trend spotted "in-app DevTools" 🧿
- from
@bluebill1049
- from
@kentcdodds
- from
@tannerlinsley
Libs are shipping their own DevTools to improve DX 💯
2
10
90
I built a demo on top of the latest
@TensorFlow
handpose model 👐 Runs well with react-three-fiber (from
@0xca0a
) on my iPhone 11 (Safari)
The CodeSandbox
#reactjs
#reactthreefiber
#tensforflow
🏄♂️
1
13
81
🚨 Next Admin 3.5 is out with a ton of UI/UX/DX improvements:
- Fresh design
- Custom resource icons
- Grouping and external links
- And more!
Sneak peek of the sidebar configuration, fully typed with
@prisma
and
@nextjs
⚡️
kudos
@premieroctet
4
7
81
How to stick an April Fool on the back of a chocolate rabbit?
It's easy, thanks to the Decal helper from the drei library 🐇
#r3f
#reactjs
#AprilFoolsDay
2
3
77
Okay, last teasing before the beta release on next Wednesday! (thanks to
@premieroctet
)🎈
OpenChakra is a visual editor for Chakra UI (a component library by
@thesegunadebayo
)
#reactjs
⚛️
Introducing the preset feature 👇
4
13
77
Just designed and shipped a new
#Bitcoin
widget to my System 1 iOS Theme! The widget is built with
@scriptableapp
🔥
Also update the product website:
@gumroad
+
@vercel
is the perfect stack for this kind of little product 🛍
1
7
65
Reminder: Always add the autocomplete="one-time-code" attribute to your SMS validation pin forms.
It enables devices to automatically fill in the input with the code from incoming SMS, streamlining the UX.
Don't overlook this small but impactful detail!
6
17
59
I added Notion support in Figside last weekend! Powered by react-notion-x from
@transitive_bs
💛
🎨 Design your website in
@figmadesign
📝 Create your content in
@NotionHQ
🚀 Publish it as a static website with
@FigsideApp
on
@vercel
Output:
1
7
57
You can now use the
@chakra_ui
gradient props in OpenChakra to add some swag to your component! Kudos to
@PCrouillebois
for the PR 🎊
💈OpenChakra app:
💈Gradient Doc:
#reactjs
#nocode
#chakraui
0
9
55
Added Auto Layout v3 support to my
@figmadesign
website exporter last night ☕️ It now works smoothly with the flexbox system!
Fluid layouts are OK but how to deal with responsive layouts? Simply add breakpoint names/values in your layer name! 🎩🐇
#figma
2
10
51
Introducing next-admin by
@premieroctet
!
It spawns a full-featured admin for your
@nextjs
app based on your
@prisma
schema! It's still in early stage, but don't miss out on giving it a spin! 💖
📚 GitHub:
🔴 Demo:
1
15
51
Worked on a Figma to Web prototype last night:
🖼Sktech your design in
@figmadesign
🧞♂️Import your sketch in my secret app
🎈Deploy on
@vercel
with one click
There is still a lot to do but it's exciting 🙃
5
8
47
Playing with the blur backdrop-filter
#CSS
property to shape a glass effect 👀
🔴 Code:
(GIF from
@MotionMarkus
)
1
6
45
0
9
35
First prototype of my response driven API feat. for
@chakra_ui
🤜✨🤛
The video shows an example with movie data but should work with any kind of data 🍿
#GPT3
#reactjs
#ChakraUI
1
3
36
Voici mon article détaillant la construction de la map Vélib connectée ! 🖖🚲
4
15
36
Sneak peek at the augmented Photobooth we've been cooking at
@premieroctet
📸
It transforms your photos without needing to train a custom model like Dreambooth
Powered by
@expo
+
@replicate
+
@tamagui_js
+
@nextjs
3
3
31
Some Keynote app tips for tech slides 👇
⚡️Use the Magic Move (by character) transition between 2 code slides for highlighting changes
1
7
31
@thesegunadebayo
@codesandbox
@premieroctet
🎈OpenChakra is open source thanks to
@premieroctet
!
• Built with TypeScript and Chakra UI
• Hosted on
@Netlify
💕
0
2
31
I had a great time building , here is the stack:
🖼
@chakra_ui
for UI
🤹🏻♂️
#ReactQuery
for data
🚢
#nextjs
for front/API (w/ next-auth)
📚 React-notion for doc (thanks
@splitbee
)
⚙️
@prisma
for ORM
🧩
@digitalocean
for database
🚀
@vercel
for hosting
🖤
2
2
30
InstantMesh model:
0
1
26
Guide tour of my Photoshot app (source available on )
🏄🏻♂️The Workflow:
- Login with magic link (
@nextauthjs
)
- Photos upload on S3
- Payment wall with
@stripe
checkout
- Model training with
@replicatehq
(20mn)
- Prompt the custom model with
@replicatehq
2
5
25
has reached the top of the Hacker News mountain 🔥🎈
Thanks all for the warm support!
0
1
24
Cheap way to allow users to save some reminders on their phones 📩
<a href="sms:user_phone&body=👋" /> // iOS
<a href="sms:user_phone?body=👋" /> // Android
0
2
24
Not your regular webapps:
- Create awesome 3D web scene -
- Create impossible video -
- Create beautiful animations for web
2
2
24
Played with
@cavalry__app
this weekend! I used their spreadsheet utility and a bunch of behaviors to visualize my
@github
activity 💕
The real-time rendering feature is awesome
1
2
22
System Error
#1
----------------------
Pen: Sakura Moonlight (405 Orange)
Plotting time: 47 minutes
Length of path drawn: 49.62 meters
#plottertwitter
@sakuraofamerica
2
6
20
Some ways to keep your code simple 🧶
📍Avoid early abstractions
📍Duplication is ok
📍Differentiate between complicated/complexity (TS is complicated but makes your code less complex)
📍Ease mental model
📍Avoid the "one line" syndrom
📍Be kind, rewind if your abstraction leaks
2
3
21
Capture node screenshot from
@ChromeDevTools
- select a node
- press cmd-shift-p
- select Capture node screenshot 📸
More tips:
2
4
20
I put 3 examples from the
@chakra_ui
doc in the GPT-3 model, and here it is 🍭
Quite impressive!
#gpt3
#reactjs
1
3
18
Friday Release 🙈
New features:
🧞♂️Duplicate component button (cmd/ctrl+d)
🔍Highlight components from Children panel
📝Double click for text editing
👴New Parent panel
🎯Browse components from Children/Parent panel
Thanks to
@foyarash
+
@PCrouillebois
💕
0
5
18
"Animez vos applications React Native avec Lottie"
👉 Les slides de mon talk
@ReactjsParis
sur la librairie Lottie de
@AirbnbEng
sont disponibles ici 🤓
#reactnative
#animation
0
9
16
I've just upgraded my Slowww app with some features: login, database synchronization, text file integration, and a dedicated RSS file reader.
Bring back RSS readers!
Current tech stack :
@nextjs
/
@chakra_ui
/
@vercel
/
@tan_stack
1
4
17
Introducing the new Event mode in our Photobooth AI app!
Customize your own Photobooth session with personalized branding and prompts tailored to your event🤳
Built on top of
@expo
/
@replicate
/
@vercel
1
4
16
TIL you can grab a free *.js.org domain for your open-source projects 💛
0
1
16
We are thrilled to announce that we're open-sourcing , our tool to streamline knowledge sharing, making it simpler for teams!
▲
@nextjs
(app dir)
🖼
@tailwindcss
+
@radix
for UI
📦
@prisma
for db
@premieroctet
Discover more 🧵
2
6
15
Use the new awesome
@tailwindcss
color palette right in your
@chakra_ui
app! 🎨
Grab the color palette here
0
0
14
I’m thrilled to announce the Figside beta, a tool that turns your
@figmadesign
files into websites and publish them on
@vercel
🚀
Figside is optimised for Figma files designed with the Auto Layout feature!
#figma
1
6
14
Love this slick chart line component from
@JoshWComeau
and
@unsplash
even if the lib is no longer actively maintained 📈
1
0
13
Seeded a GPT-3 call to ease the prompt creation on
@photoshot_ai
🌱
Just provide a keyword and let the Prompt Wizard do the rest. It's like a prompt that creates prompts for you! 🤖
Although the seed still has room for improvement, it is already performing well!
3
3
12
1
0
11
In these lockdown times. We can get overwhelmed with notifications! 🚨
Hold down the option ⌥ key while clicking on the notification panel icon to quickly switch "Do Not Disturb" mode 🧘♀️🧘♂️
#macos
#tips
#keepfocus
1
3
12
Will you escape from the node_modules? 🕳
Here is a little game built by
@premieroctet
with the amazing
@GBStudioDev
app (developed in React ⚛️)!
0
3
11
CSS-in-SVG is my favorite method to quickly add some animations: easy, light & standard. And animations are embedded in your images! 🤹🏻♂️
1
0
11
Working on the
@Picksale
shop editor!
Goal: a user-friendly, speedy editor with minimal settings for non-tech users.
The sidebar is still a bit messy, but it's getting better. Built on top of
@chakra_ui
theme! ⚛️
#reactjs
2
4
10
I will talk about Chakra UI and OpenChakra on next tuesday! 🧘♂️🧘♀️
Our next meetup at
@XebiaFr
will feature:
-
@dabit3
who will talk about Building a Full Stack CMS for the Modern Age
-
@shinework
who will talk about his nocode tool OpenChakra
RSVP here 👇👇
0
2
10
1
0
11
Happy Christmas! ⭐️
Family computers & printers fixed: 8/10 👷♂️
▓▓▓▓▓▓▓▓▓▓▓▓░░░
0
0
11
Protips 2: Don't forget to add the allowsBackForwardNavigationGestures props on WebView component to allow swipe navigation (on iOS)
#reactnative
#expo
0
0
10
Jumping into the plotter thing! First hello world plot designed in
@cavalry__app
Plotter + Cavalry is a good match!
#plottertwitter
#cavalryapp
0
3
10
Our
@photoboothai
app is now live on
@ProductHunt
!
If you have an account on PH, your upvote would be greatly appreciated 🚀🙏
2
3
7
