Bramus

50.9K posts

Bramus banner
Bramus

Bramus

@bramus

Chrome DevRel at Google (CSS + Web UI). @CSSWG Member. Former University Lecturer. PADI Divemaster. Blogs at @bramusblog. You should follow me on Bsky 🦋.

Belgium Katılım Eylül 2007
741 Takip Edilen13.9K Takipçiler
Sabitlenmiş Tweet
Bramus
Bramus@bramus·
(You know the good stuff is happening on b​sk​y, right?)
English
4
3
24
13.5K
Bramus
Bramus@bramus·
@clckkkkk @theo It’s getting better and better with each build … have you tried 147 yet?
English
0
0
1
14
Kevin Zhong
Kevin Zhong@clckkkkk·
@bramus @theo trying out this feature on V146 now. i feel that the animation is still not that smooth, but it's good enough. I love vertical tabs😭
English
1
0
1
33
Bramus
Bramus@bramus·
🌟 Vertical Tabs are available behind a flag in Chrome 145 (current beta) 1. Go to `chrome://flags/#vertical-tabs` 2. Set it to enabled 3. Relaunch Chrome 4. Right click the tabbar and choose “Move Tabs To The Side” Attached are before and after screenshots.
Bramus tweet mediaBramus tweet media
English
73
121
1.9K
215K
Wes Bos
Wes Bos@wesbos·
When did they add this? Chrome devtools now shows the computed step values for css calc + variables Makes debugging 100x easier
Wes Bos tweet media
English
22
67
1.1K
44.5K
Bramus
Bramus@bramus·
More things you’ve missed: - view-transitions-mock, a non-visual polyfill for Same-Document View Transitions - Element-Scoped View Transitions excitement (see video) - All DevTools can’t properly deal with scrollbars in the Box Model. The sky is bluer on the other side 😉
English
1
1
2
360
Bramus
Bramus@bramus·
Some more things you’ve missed while being here instead of there: - Dynamic connections with CSS anchor() using REAL borders demo. - Sneak Peek: Retargetable View Transitions (aka Interruptible View Transitions) demo - CSS-only Scroll-Triggered Animations
English
1
0
2
832
Bramus
Bramus@bramus·
(You know the good stuff is happening on b​sk​y, right?)
English
4
3
24
13.5K
Bramus
Bramus@bramus·
@filos That’s the current Chrome Canary. (Note that using Chrome Canary as your daily driver can be risky, so maybe it’s best to wait until that version reaches Chrome Beta (or Chrome Stable))
English
1
0
1
221
Bramus
Bramus@bramus·
UPDATE: Looks like the flag is no longer available in Chrome 145. You can still find it in Chrome 146 though :)
English
1
0
14
3.4K
Bramus
Bramus@bramus·
ICYWW: - Yes, you can resize the sidebar (and can even collapse it to a minimal state). - Yes, it plays nice with Tab Groups.
Bramus tweet mediaBramus tweet media
English
6
2
114
16.2K
Bramus
Bramus@bramus·
@kaimnsrvr Hmm, looks like the flag is no longer available in Chrome 145. You can still find it in Chrome 146 though :)
English
0
0
4
770
Kai
Kai@kaimnsrvr·
@bramus What happened to the flag? 😭
English
1
0
0
760
Junior García
Junior García@jrgarciadev·
Animating stacked toasts is usually messy. We’re using the View Transitions API instead and React Aria. Zero animation libraries. Just native browser transitions. Coming soon on HeroUI beta.4
English
28
24
627
42.2K
Bramus
Bramus@bramus·
@theo Good feedback, I appreciate it. Thanks! As for the laggy animation: have you tried Chrome 146 (current Chrome Dev and Canary) yet? AFAICT the feature is doing much better in those versions.
English
1
0
5
1.9K
Theo - t3.gg
Theo - t3.gg@theo·
@bramus I've been waiting for this for so long you have no idea. Biggest request: hotkey (and customization of hotkey) for expand/collapse Also noticed the expand/collapse has an animation but it's super laggy, maybe the option to disable that? Thank you all for shipping this 🙏
English
5
1
155
9.4K
Bramus
Bramus@bramus·
@Mr_Jfranklin That would be a bug, as it goes with flagged experimental features :) I am mainly using Chrome Canary (146) which seems to do much better with this feature, so you’ll have to wait another release (or use Chrome Canary – which comes with its own challenges – or Chrome Dev)
English
0
0
1
913
James A Franklin II
James A Franklin II@Mr_Jfranklin·
@bramus Love this but on mine the address bar is very large. How to I make it smaller like in you images?
James A Franklin II tweet media
English
1
0
0
1.1K
Bramus
Bramus@bramus·
@Dmitry31571105 No loose nesting, but it does play nice with the Tab Groups feature.
Bramus tweet media
English
2
0
30
7.7K
Dmitry
Dmitry@Dmitry_ddm·
@bramus Does it support nesting tho?
English
1
0
3
8.1K
Bramus
Bramus@bramus·
@Dalton_Walsh I’ve heard several requests about this before, so I’m sure it will please a lot of folks out there. (Personally I’m also sticking to horizontal ones … for now)
English
2
0
11
8.5K
Dalton Walsh
Dalton Walsh@Dalton_Walsh·
@bramus Randomly tried that today, pretty random I see this post. Not sure if like it, but it's a big change to get used to
English
1
0
8
10.1K
Bramus
Bramus@bramus·
@adamwathan Tough to hear. Hope you can turn things around.
English
0
0
0
711
Adam Wathan
Adam Wathan@adamwathan·
🎧 Recorded a new morning walk this morning, hard one to share because I'm sure people will want to roast me for it but have been transparent up until now so publishing it anyways.
English
485
531
5K
2M
Bramus
Bramus@bramus·
The graph must go up and to the right.
Peter Girnus 🦅@gothburz

Last quarter I rolled out Microsoft Copilot to 4,000 employees. $30 per seat per month. $1.4 million annually. I called it "digital transformation." The board loved that phrase. They approved it in eleven minutes. No one asked what it would actually do. Including me. I told everyone it would "10x productivity." That's not a real number. But it sounds like one. HR asked how we'd measure the 10x. I said we'd "leverage analytics dashboards." They stopped asking. Three months later I checked the usage reports. 47 people had opened it. 12 had used it more than once. One of them was me. I used it to summarize an email I could have read in 30 seconds. It took 45 seconds. Plus the time it took to fix the hallucinations. But I called it a "pilot success." Success means the pilot didn't visibly fail. The CFO asked about ROI. I showed him a graph. The graph went up and to the right. It measured "AI enablement." I made that metric up. He nodded approvingly. We're "AI-enabled" now. I don't know what that means. But it's in our investor deck. A senior developer asked why we didn't use Claude or ChatGPT. I said we needed "enterprise-grade security." He asked what that meant. I said "compliance." He asked which compliance. I said "all of them." He looked skeptical. I scheduled him for a "career development conversation." He stopped asking questions. Microsoft sent a case study team. They wanted to feature us as a success story. I told them we "saved 40,000 hours." I calculated that number by multiplying employees by a number I made up. They didn't verify it. They never do. Now we're on Microsoft's website. "Global enterprise achieves 40,000 hours of productivity gains with Copilot." The CEO shared it on LinkedIn. He got 3,000 likes. He's never used Copilot. None of the executives have. We have an exemption. "Strategic focus requires minimal digital distraction." I wrote that policy. The licenses renew next month. I'm requesting an expansion. 5,000 more seats. We haven't used the first 4,000. But this time we'll "drive adoption." Adoption means mandatory training. Training means a 45-minute webinar no one watches. But completion will be tracked. Completion is a metric. Metrics go in dashboards. Dashboards go in board presentations. Board presentations get me promoted. I'll be SVP by Q3. I still don't know what Copilot does. But I know what it's for. It's for showing we're "investing in AI." Investment means spending. Spending means commitment. Commitment means we're serious about the future. The future is whatever I say it is. As long as the graph goes up and to the right.

English
0
0
8
2.6K
Bramus
Bramus@bramus·
@k_grajeda The pseudos are not allowed in :has() … but I have filed an issue for that. Could you leave a comment with your use-case on github.com/w3c/csswg-draf… to help move it forward? Thanks!
English
1
1
7
533
Kevin Grajeda
Kevin Grajeda@k_grajeda·
hey @bramus, question about nested view transitions for “enter” animations of an element on a MPA I’m doing something like: ::view-transition-new(prototype-window):only-child { animation: vt-prototype-window-in 600ms var(--out-quart) forwards; } this works great, it only animates when `prototype-window` is being added and it’s the only child. now I added a nested group inside that element and I want to apply the same animation to the group, but only for enter transitions I tried something like (I know this doesn’t work and looks crazy): ::view-transition-group-children(prototype-window):has( ~ ::view-transition-image-pair(prototype-window) > ::view-transition-old(prototype-window):only-child ) { animation: vt-prototype-window-in 600ms var(--out-quart) forwards; } is this possible in some way? basically: how do I apply the same "enter" animation to a child group but only when the parent is "entering"?
English
1
0
1
1.5K