Benjamin De Cock @bdc Twitter profile

Last Seen Profiles

@ahsaatvnetwork_

@cokeainechick

@galery_basah10

@beritapopuler_

@penyukastw21

@BinorRaja

@bokeplokalmalam

@beritapopuler_

@HRV_Simulation

@bokeplokalmalam

@themarv0s

@stw_pdg

@wysyh_14

@beritapopuler_

@stwmaniax

@Samy70216227

@chamoy

@ibubohay2

@drewoncemore

@BOKEPBOCILVIRA3

@sbryn0721

@tearit1again

@horizoningon

@Cumisfunnn69

@bear_x92

@sotwecom

@bokeplokalmalam

@Tar0dk

@YlAsma15121

@VmaniakJ

@BinorRaja

@BabyAnasta88217

@bokeplokalmalam

@fitizen93

@ibubohay2

Benjamin De Cock

@bdc

6 years

The CSS Working Group agreed this morning on adding many math functions. We now have: • calc() • min() • max() • clamp() • sin() • cos() • tan() • acos() • asin() • atan() • atan2() • hypot() • sqrt() • pow() The face of CSS is rapidly changing.

230

3K

10K

Benjamin De Cock

@bdc

6 years

I moved to the Bay Area a month ago. Here are my first, unfiltered impressions:

147

508

4K

Benjamin De Cock

@bdc

5 years

🧵 It's time for our industry to realize the title "frontend developer" is obsolete. The vast majority of these profiles are actually "JS engineers", and they're usually quite good at it, but they're not as good at all the other things contributing to great frontend experiences.

56

341

2K

Benjamin De Cock

@bdc

7 years

Fun fact about : while the hero image is loading, the header displays an inline SVG illustration blurred with a CSS filter ᕕ( ᐛ )ᕗ

29

238

1K

Benjamin De Cock

@bdc

4 years

I recently left Stripe after 8 incredible years. I’m extremely proud of what we’ve built, and I’ll be forever grateful for getting the chance to learn from the smartest, kindest, most humble and optimistic coworkers I could have ever hoped for.

57

12

1K

Benjamin De Cock

@bdc

3 years

I had a ton of fun designing and implementing and I thought I could share some of the pleasing technical details about it. 🧵 Thread:

Increase — Enterprise-grade Banking APIs

Modern bank infrastructure that enables technology companies to programmatically store, move, and reconcile money.

increase.com

25

82

1K

Benjamin De Cock

@bdc

4 years

New job, new tools: 💻 Hardware • MacBook Pro M1: Biggest jump in performance I've ever experienced with a new Mac. • Pro Display XDR: Actually worth the price. I'm serious. 💾 Software • Figma: Switching from Sketch, mostly for easier collaboration. • VS Code: Adios Vim.

35

20

1K

Benjamin De Cock

@bdc

3 years

We're still in private beta and we barely have a site (page?) but, excited to share our baby steps nonetheless. Say hi to Increase!

Increase — Enterprise-grade Banking APIs

Modern bank infrastructure that enables technology companies to programmatically store, move, and reconcile money.

increase.com

61

15

965

Benjamin De Cock

@bdc

5 years

Just saw yet another tweet mocking CSS centering that went viral. This meme will never die, will it? It's literally *two* lines in CSS nowadays: display: grid; place-items: center;

34

96

943

Benjamin De Cock

@bdc

8 years

Friendly reminder: you don't need weird shenanigans to convert HTML strings to DOM nodes, there's a native API for that!

13

332

920

Benjamin De Cock

@bdc

7 years

Don’t change an element’s `display` for its side-effects, make your intent explicit instead! /* Remove the space below an image */ ❌ img {display: block} ✅ img {vertical-align: middle} /* Resize to fit the content */ ❌ div {display: inline-block} ✅ div {width: max-content}

14

174

900

Benjamin De Cock

@bdc

6 years

Quick example of an alternating two column layout made with CSS Grid:

19

119

890

Benjamin De Cock

@bdc

5 years

`clip-path` makes it even easier to create our typical 12deg backgrounds in CSS 💕

17

89

799

Benjamin De Cock

@bdc

3 years

It seems like a very common practice now to define the color palette in CSS using custom properties mapped to hexadecimal values. That's suboptimal. I highly recommend to use a functional syntax instead so that you can easily change the alpha value if needed.

24

76

765

Benjamin De Cock

@bdc

7 years

I wrote about some of the front-end shenanigans behind the new Stripe Connect!

Connect: behind the front-end experience

Online payment processing for internet businesses. Stripe is a suite of payment APIs that powers commerce for businesses of all sizes.

stripe.com

24

163

646

Benjamin De Cock

@bdc

5 years

My favorite features in Chrome 76: 1️⃣ <img src=foo.png loading=lazy> 2️⃣ backdrop-filter: blur(10px) 3️⃣ @media (prefers-color-scheme: dark)

5

109

626

Benjamin De Cock

@bdc

3 years

I didn't realize the new CSS dynamic viewport units were already implemented in @webkit \o/ That means all the viewport hacks and workarounds for iOS are coming to an end! Meet your new friend: body { height: 100dvh }

16

79

580

Benjamin De Cock

@bdc

3 years

TypeScript is like pair programming with this guy

12

46

546

Benjamin De Cock

@bdc

7 years

Although CSS Grid shines with two-dimensional layouts, it's also often the best way to solve one-dimensional layouts. Quick example: a typical component header with a title on the left and actions on the right.

11

65

540

Benjamin De Cock

@bdc

7 years

Friendly reminder: CSS Grid is often a cleaner, more robust way to stack elements than relying on absolute positioning.

11

100

541

Benjamin De Cock

@bdc

6 years

7 years at Stripe 🤯

8

1

545

Benjamin De Cock

@bdc

3 years

Pretty great in-depth article by @michaelvillar on context menus:

Building like it's 1984: A comprehensive guide to creating intuitive context menus - Height

height.app

3

59

544

Benjamin De Cock

@bdc

7 years

You feel like you keep writing align-items: center; justify-items: center; ? There’s a shorthand for that! place-items: center;

10

110

521

Benjamin De Cock

@bdc

7 years

Friendly reminder: if you don't need IE/Edge support (e.g. internal tools), you don't have to reset every CSS property individually. button.lame { padding: 0; border: none; outline: none; font: inherit; color: inherit; background: none } button.cute { all: unset }

6

80

454

Benjamin De Cock

@bdc

6 years

Tweet-sized guide to low-cost investing: ❶ Open a Vanguard account ❷ Invest your age in % in VSIGX ❸ Invest 60% * (100 - age) in VTSAX ❹ Invest 40% * (100 - age) in VTIAX ❺ Profit! So, say you're 30 with $20k to invest: • $6000 in VSIGX • $8400 in VTSAX • $5600 in VTIAX

9

23

444

Benjamin De Cock

@bdc

5 years

Little weekend project: a simple touch-friendly JS gallery! Download: Demo:

13

35

424

Benjamin De Cock

@bdc

7 years

Hey @Twitter , how about you invert these numbers?

9

69

415

Benjamin De Cock

@bdc

6 years

Props to @firefox for being the first browser to implement the new `gap` property we introduced a year ago (). Quick example:

Benjamin De Cock

@bdc

7 years

Did you want something like `grid-gap` in Flexbox? A new shared `gap` property has been accepted by the @csswg for Grid, Multicol & Flexbox!

0

11

54

12

88

408

Benjamin De Cock

@bdc

6 years

Just in case you need another reason to switch to @figmadesign :

12

37

395

Benjamin De Cock

@bdc

5 years

Love this feature in @sketch 55 💖

6

32

386

Benjamin De Cock

@bdc

7 years

My favorite thing about :

10

84

388

Benjamin De Cock

@bdc

3 years

If you're into print design and typography (and if not, you should), I highly recommend this book! 👌

6

7

373

Benjamin De Cock

@bdc

8 years

Also, looks like @apple 's designers are using @sketchapp :)

12

105

356

Benjamin De Cock

@bdc

8 years

1

69

348

Benjamin De Cock

@bdc

6 years

Fun fact: the last 17 people to join @stripe 's design team are women! On a related note, we're hiring 🙃

10

33

338

Benjamin De Cock

@bdc

3 years

We recently migrated and its internal pages to @nextjs . It's my first experience with it in production and now I just can't imagine using anything else — the developer experience and out-of-the-box performance are simply outstanding!

15

21

342

Benjamin De Cock

@bdc

8 years

1. Open on mobile 2. Watch the compass icon as you rotate your device 3. 😱

Stripe’s Apple Pay Integration | Accept Payments from Apple Pay

Start accepting Apple Pay at your business or website with Stripe’s Apple Pay integrations. Easily enable one touch payment in mobile apps and websites.

stripe.com

14

147

337

Benjamin De Cock

@bdc

7 years

Quick centering comparison between CSS grid and flexbox (spoiler: grid is a tad nicer).

9

62

330

Benjamin De Cock

@bdc

6 years

Just realized that @stripe 's design team is now bigger than the size of the entire company when I joined.

6

7

324

Benjamin De Cock

@bdc

3 years

I tweeted earlier this month about upcoming CSS units making the dynamic iOS 15 viewport easier to deal with. To clarify, it's already possible to build app-like interfaces today with fixed elements and a fully adaptive viewport without any fragile hacks. Here's an example:

6

31

319

Benjamin De Cock

@bdc

3 years

Friendly reminder: you don't need complex JS-based client-side navigation and routing to make your site fast to browse. A simple static HTML site and some basic prefetch hints are sufficient to make your site feel pretty much instant. is a good example.

6

19

314

Benjamin De Cock

@bdc

7 years

Figma is full of these it-just-works interactions you naturally do without considering if they might actually be supported or not 👌

15

30

312

Benjamin De Cock

@bdc

3 years

Lovely to see Apple embracing CSS Grid 👌

1

15

312

Benjamin De Cock

@bdc

5 years

💸 Thread: Step-by-step guide to successful low-cost investing in the US with Vanguard.

6

13

314

Benjamin De Cock

@bdc

2 years

Once <link rel=prefetch> and the Shared Element Transition API are supported in all modern browsers, I'm not touching a single-page app ever again.

5

17

307

Benjamin De Cock

@bdc

2 years

TIL pseudo elements can be selected and animated with the Web Animations API!

3

27

301

Benjamin De Cock

@bdc

7 years

Introducing Animate Plus 2.0 -- lighter, faster and stronger than ever!

GitHub - bendc/animateplus: A+ animation module for the modern web

A+ animation module for the modern web. Contribute to bendc/animateplus development by creating an account on GitHub.

github.com

11

51

289

Benjamin De Cock

@bdc

5 years

Specifically, most frontend developers have an abysmal knowledge of CSS, even though it's a crucial part of building fast, responsive, and smooth user interfaces.

7

28

282

Benjamin De Cock

@bdc

7 years

Design never becomes easier, you only keep pushing expectations higher.

4

64

281

Benjamin De Cock

@bdc

8 years

Firefox 52 released—the CSS Grid revolution has begun!

5

121

270

Benjamin De Cock

@bdc

10 years

Introducing http://t.co/4oAUUAfJTU -- a minimal, UI-focused programming language for web designers.

37

203

273

Benjamin De Cock

@bdc

3 years

Safari Tech Preview 133 supports CSS Cascade Layers \o/

9

32

276

Benjamin De Cock

@bdc

7 years

I have some exciting news to share: my family and I are moving to the Bay Area later this year! 🎉✈️ 🇺🇸

14

0

270

Benjamin De Cock

@bdc

8 years

Speed up your site by preloading the next page’s stylesheet (the ~300ms delay between hover and click will usually be enough to preload it).

3

49

268

Benjamin De Cock

@bdc

8 years

Friendly reminder: external SVG files can be manipulated in JavaScript.

6

75

263

Benjamin De Cock

@bdc

7 years

Most accordions on the web perform offensively poorly, notably because they’re animating expensive CSS properties like height. Doing it properly means relying on transform, which is much harder, but it’s the only way to reach 60 FPS. Here’s an example:

13

31

256

Benjamin De Cock

@bdc

6 years

🔥

7

21

252

Benjamin De Cock

@bdc

3 years

I'm not a fan of Safari on Monterey so far. The tab bar's interaction design sounds smart in theory but it's a mess in practice. Even basic system-wide interactions like reordering tabs don't work anymore. And really, web developers shouldn't be able to tint the user's toolbar...

23

19

242

Benjamin De Cock

@bdc

6 years

I come back to Figma every now and then to check its progress so, in order to test the latest version, I redesigned Figma in Figma 🙃

Figma

dribbble.com

9

8

248

Benjamin De Cock

@bdc

6 years

𝑺eriously 𝑻his 𝑹ole 𝑰s 𝑷retty 𝑬xciting

5

17

227

Benjamin De Cock

@bdc

5 years

Can we all agree the Unicode Consortium should approve this emoji, like, right now? Proposed name: "malicious thinking face".

10

29

231

Benjamin De Cock

@bdc

8 years

Things all hotels do: - hide light switches - provide 17 more pillows than you need - require a PhD in thermodynamics for using the shower

3

51

226

Benjamin De Cock

@bdc

2 years

Quick behind-the-scenes thread on the new — starting with the usage of the shiny <dialog> element! Customizing and animating dialog and ::backdrop isn't trivial, but you get a lot for free by relying on it and it's already supported by all modern browsers!

9

8

227

Benjamin De Cock

@bdc

7 years

I had the chance to work on — a topic I deeply care about and an initiative I’m proud we’re undertaking. 🌏❤️

13

16

226

Benjamin De Cock

@bdc

3 years

Safari 15 finally gets a CSS grid inspector. I dig it!

1

9

215

Benjamin De Cock

@bdc

3 years

I just visited Dribbble again for the first time in ages. Turns out it's still mostly the same fake, unusable, ostentatious and preposterous crap. Happy Monday!

18

8

220

Benjamin De Cock

@bdc

7 years

As usual, @billlabus casually ships a ridiculously nice and overengineered landing page

7

23

216

Benjamin De Cock

@bdc

8 years

Some perf wins about : - no render-blocking scripts - no png/jpg - preloaded font - lazy-load of secondary resources

16

39

210

Benjamin De Cock

@bdc

8 years

Drawing basic shapes in CSS is now super easy thanks to the `clip-path` property

8

37

206

Benjamin De Cock

@bdc

8 years

Confession: I measure things with ⌘⇧4.

30

45

205

Benjamin De Cock

@bdc

8 years

We pushed a bunch of fresh pixels 🎉 A glorious by @phlntn and a new homepage by yours truly

Stripe Payments | Global Payment Processing Platform

Capture more revenue with a unified payments solution that eliminates the need for one-off merchant account, payment gateway, and processor integrations.

stripe.com

24

32

208

Benjamin De Cock

@bdc

3 years

❌ transform: translateX(5px) ✅ translate: 5px ❌ justify-items: center; align-items: center ✅ place-items: center ❌ color: rgba(255, 255, 255, 0.4) ✅ color: #fff6 ❌ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) ✅ grid: auto/auto-flow 1fr

9

20

210

Benjamin De Cock

@bdc

4 years

@JoshWComeau @Una (Not so) fun fact: I painfully designed Stripe's mesh gradients by drawing random shapes and blurring them. I then (also painfully) implemented them in SVG and CSS but couldn't reach a 60 FPS animation on all browsers… so we threw everything away and went with WebGL ¯\_(ツ)_/¯

5

3

205

Benjamin De Cock

@bdc

7 years

Six years ago today I timidly drew my first pixels for @stripe on a Mac mini (!) in Fireworks (!)

Support icons

dribbble.com

12

1

206

Benjamin De Cock

@bdc

5 years

The modern frontend developer is most often than not a "Jack of all trades" mastering JS (or even just a framework) and barely tolerating HTML/CSS as a necessary evil. That's understandable. I strongly think it's a different specialization, and it's too much for a single person.

9

20

198

Benjamin De Cock

@bdc

6 years

I realize it's a huge undertaking, but browsers absolutely need to make it possible to animate other properties than transform and opacity smoothly. Evangelism is just not working, most developers keep animating painfully expensive properties such as margin and padding like here:

6

17

204

Benjamin De Cock

@bdc

7 years

Apple's web designers are still very much at the top of their game. This is audacious, bold, and invigorating. Kudos to the team!

18

17

199

Benjamin De Cock

@bdc

7 years

zomg CSS Grid just landed in Edge, which means *all* modern browsers now support the new spec 😍

7

68

194

Benjamin De Cock

@bdc

4 years

Hello, world -- it's been a while. Back to work after a (well-deserved?) break. Can't wait to share with you what I've just started working on! 🧑🏻‍💻

11

0

196

Benjamin De Cock

@bdc

5 years

I dig the lock animation on the Apple logo here The implementation, however, is kinda questionable 🙃

12

9

189

Benjamin De Cock

@bdc

8 years

Well, this is it. Game over. @billlabus just won the internet.

10

35

185

Benjamin De Cock

@bdc

7 years

The new @framer is out, and it's really, really solid. The UI is polished af, performance is amazing, and best of all: the artboard rendering is done entirely in SVG, which means they avoid all kinds of fragile export shenanigans by being a true WYSIWYG. 👌

3

14

185

Benjamin De Cock

@bdc

7 years

I spent the last two weeks designing a new project with @figmadesign . Here are my quick, unfiltered impressions so far:

7

15

180

Benjamin De Cock

@bdc

8 years

If you plan to use CSS Grid soon: 1) you're doing it right 2) keep your fallback rules separate so you don't penalize everyone in the future

4

47

175

Benjamin De Cock

@bdc

6 years

tfw you can't even focus on what your coworker is teaching you because he keeps touching your immaculate display

10

21

170

Benjamin De Cock

@bdc

6 years

This is me trying to justify doing fun stuff on the web

Benjamin De Cock | Motion & Playfulness | UX Special, CSS Day 2018

While everyone enjoys delightful interfaces, polishing the user experience is rarely the priority when building new products. Animations are more often than not…

vimeo.com

9

14

168

Benjamin De Cock

@bdc

2 years

We're still early, and the untapped potential is intimidating, but I cannot wait to see what you build. Increase — Build your bank.

Increase — Enterprise-grade Banking APIs

Modern bank infrastructure that enables technology companies to programmatically store, move, and reconcile money.

increase.com

10

7

165

Benjamin De Cock

@bdc

5 years

Tweet-sized iPhone 11 Pro review: 💯 Most beautiful hardware Apple has ever released. 📱 I still miss the size and weight of my iPhone 7 though. 🔋 Battery life is incredible. This thing just won't die. ⚡️ Face ID is blazing fast and suspiciously reliable. 🤯 The camera… damn.

13

10

162

Benjamin De Cock

@bdc

7 years

🔥 I wrote a blog post about my favorite animation tool: requestAnimationFrame!

Gain Motion Superpowers with requestAnimationFrame

In my last blog post explaining some of the technical details behind Connect, I briefly touched on the different options we now have to…

medium.com

1

39

159

Benjamin De Cock

@bdc

10 years

I made a fast and tiny jQuery-like library for modern browsers:

GitHub - bendc/sprint: A tiny, lightning fast jQuery-like library for modern browsers.

A tiny, lightning fast jQuery-like library for modern browsers. - bendc/sprint

github.com

15

66

155

Benjamin De Cock

@bdc

6 years

Although it's still not as good as @sketchapp (especially with the SVGO plugin), @figmadesign 's SVG export has improved dramatically in the last few versions! Here's a quick before/after comparison:

7

10

161

Benjamin De Cock

@bdc

9 years

Nice job @sketchapp 💯

3

63

157

Benjamin De Cock

@bdc

8 years

Some of the pages we designed last year

5

17

157

Benjamin De Cock

@bdc

7 years

Chrome 62 ships with a new and shiny CSS Grid highlighter!

2

39

159

Benjamin De Cock

@bdc

7 years

Our poster wall keeps getting better 👌

6

3

159

Benjamin De Cock

@bdc

6 years

In hindsight, I'm not entirely sure it was a good idea to allow our engineers decorate the office walls.

1

8

155

Benjamin De Cock

@bdc

7 years

The modern layout features CSS provides us are amazing, but don't forget they don't automatically invalidate or make the previous specs obsolete. Use what fits your needs and mental model :)

6

26

151

Benjamin De Cock

@bdc

3 years

You don't have to build a fully custom <select> if you only want to tweak the select element itself but not its options. You can't just style the select element as the options inherit some styles from it on some browsers (color, font, etc.) but you can take a different approach: