Cory LaViska
@claviska
Followers
4,733
Following
1,360
Media
3,307
Statuses
22,872
Just a guy with a laptop and a dream. Created @shoelace_style .
New Hampshire
Joined November 2007
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Biden
• 2831337 Tweets
Secret Service
• 1861354 Tweets
トランプ
• 840809 Tweets
#Trump
• 543949 Tweets
Republican
• 467489 Tweets
Thomas Matthew Crooks
• 172826 Tweets
ترامب
• 113801 Tweets
TAEMIN
• 84894 Tweets
AR-15
• 64365 Tweets
函館記念
• 61218 Tweets
Attentat
• 51212 Tweets
OUR BELOVED BOSSCKM
• 37612 Tweets
#14Juillet
• 23383 Tweets
BINIVERSE GOES TO CEBU
• 22571 Tweets
VIF IN KHONKAEN X GULF
• 21277 Tweets
ネクロズマ
• 19870 Tweets
ホウオウビスケッツ
• 17255 Tweets
中村靖日さん
• 12269 Tweets
Τραμπ
• 10693 Tweets
Pinned Tweet
“The only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking and don’t settle.” — Steve Jobs
1
11
68
I bet the person who added atob() and btoa() to JavaScript was not the same person who developed APIs such as getElementById() and getElementsByClassName().
31
118
2K
“So why is Next.js so pushy about [React Server Components]? I can't avoid feeling that the new direction taken by Next.js is not designed to help developers, but to help Vercel sell React.”
35
61
518
Everyone thinks this surprise Apple event is all about ARM-based Macs but web devs know exactly what's going down.
9
73
447
Discussing which framework to use when we suddenly agree on Web Components.
4
152
427
Unpopular opinion: in a design system, a "link" and a "button" should be one component.
71
30
389
The end of an era.
14
93
367
@shoelace_style
The triangle is displayed as a fixed position pseudo element (::after) cropped with clip-path and anchored to:
- The cursor
- The top-start of the submenu
- The bottom-start of the submenu
The coordinates get updated on mousemove and when the menu repositions. The triangle is
7
30
352
Time to talk about the future of Shoelace.
It's been more than two years since the beta release of Shoelace 2.0, which was the first version of the project to ship Web Components…
👇 cont'd
35
36
225
Gather 'round, it's story time.
A number of years ago, I was hired by a company to rebuild a component library for their design system. The one they were replacing was built with AngularJS, but AngularJS was old and rickety and nobody wanted to use it anymore. 👇
19
60
216
“The software giant has ditched its old React codebase from its previous web version of the Microsoft Store and replaced it with a modern web version that uses Shoelace, Lit, Vite, and a C# ASPNET backend.”
11
21
208
@notdetails
Not very original. I’ve played this on every financial institution’s website for years. /s
0
2
194
"What are some good resources to learn Web Components?"
I get asked this a lot, and I'm tired of not having an answer. Here are some links. 👇
Please reply with your own and RT for reach! 🙏🏻
15
46
198
What's stopping you from using the Popover API in your web apps today?
38
22
192
Shadow DOM? Light DOM? Slots?
If you’ve heard of these but aren’t sure what they are, maybe this will clear things up!
👇
4
56
189
Shoelace is becoming Web Awesome, part of the Font Awesome family.
I give a lot through open source and I don’t usually ask for anything in return. Today, I’m asking you to tip the scale a bit for us in our Kickstarter 👇👇
7
80
177
“The DOM is much less deficient and much more portable and reliable. That is why I now recommend abandoning the libraries, which have grown into bloated platforms, and instead using the DOM and plain old JavaScript together.”
15
30
169
I’m happy to report that I’m joining Microsoft on Monday! I’ll be working with a great team building amazing things with web components. 💙
Here’s to a new chapter! 🍺
35
4
148
React supporting Web Components will allow us to focus less on tooling and more on building interoperable components that all devs can use.
It will also uncover a new world of platform technologies that many React users are completely unaware of.
Like the DOM, for instance.
9
23
141
So many websites are made like this
Making a delicious glass of water 😜
📹 foodkagechris
663
3K
36K
1
19
138
I'm excited to announce that I'm joining the open source team at
@Ionicframework
!
It's been a dream of mine to work on open source for a living. This is an amazing opportunity to work with really smart people and a fantastic community. 😄
17
5
129
The
@Dropbox
plan:
1. Add a bunch of features nobody asked for.
2. Introduce a dog shit rebranding.
3. Stop listening to users and go all in on B2B.
4. Watch long time customers get annoyed and jump ship.
All for what? Growth? Pleasing stakeholders? It’s counterintuitive.
10
22
123
What's one component you never want to build again and why is it date picker?
18
10
124
Shoelace was the second most popular web component library, after Google's Material Web. 🎉
There are some big players on that list including Microsoft, Salesforce, and Adobe. It's crazy how one person can make something that competes with some of the world's biggest brands. 🤯
9
13
123
Friendly reminder that users don't care about your tech stack. They just want things to work.
7
13
120
Seriously. Why would you expect a custom element to work if you disable JavaScript? You literally need JS to define them. Also, I’m curious how well React, Angular, and Vue components work when you disable JavaScript.
Go ahead. I’ll wait while you try it out.
32
17
118
“Ladybird is an open-source project aimed at building an independent web browser, rather than yet another browser based on Chrome. […] Ladybird is not ready to replace Firefox or Chrome for regular use, but it is showing great promise.”
5
13
116
"We're just gonna roll our own components…"
OK, but before you do, please understand the effort it takes to build, maintain, and troubleshoot bugs for *every single component.* You're setting your org up for a multiyear commitment.
Build apps, not buttons.
10
17
116
[Friday at the office]
Dev: "Should we deploy today?"
PM: "No, let's wait until Monday."
Dev: Maybe just a quick push to prod...
2
34
112
I like the shadow DOM, but web component usage would probably take off overnight if we introduced "open-styleable shadow roots" as
@justinfagnani
proposed.
12
22
109
You've spent months designing, building, fine tuning, and testing hot new components for your design system. Now it's time to pair up and see how everyone is using them!
5
16
98
Adding "safe trapezoids" to
@shoelace_style
so tooltips don't close suddenly when you hover over the gap between target and tooltip. They're not as sexy as safe triangles, but they're equally useful.
(shown in orange for demonstration purposes)
5
7
95
Web components are custom HTML elements. You’re working with the platform, not a framework.
✨ Custom elements are awesome! ✨
1
14
90
My mission is to build the best damn UI components that will work everywhere, and you won’t have to throw them out when you switch/upgrade/stop using frameworks.
11
7
90
CSS Anchored Positioning:
If you've ever used Popper.js, this will be of interest to you. Imagine positioning top layer popovers with pure CSS! 🤩
1
14
89
“React encouraged a mindset of replacement: ‘forgot what browsers can do; do everything in a React component instead, even if you’re reinventing the wheel.’ HTML web components encourage a mindset of augmentation instead.”
3
22
84
Lit is on Hacker News today! My favorite comment:
“Been using Lit for a few years now, it just keeps getting better. It does what it does, and stays out the way. Please don't call it a framework though, the best part of Lit is that is basically some (very lovely!) sugar over
3
14
80
“Switches are a popular control on mobile platforms as well as in a large variety of UI frameworks, but until now they were not built into the web platform. Seeing the widespread need for this control we decided to change that.”
7
11
78
ElementInternals was just merged into WebKit!
7
25
77
The sun sets over the desert, and with heavy hearts we bid him farewell.
I love you, dad.
18
1
76
Friendly reminder that you don't need to use custom elements to take advantage of the shadow DOM API.
Here's a <div> with its own shadow root and slots!
6
9
75
The worst mistake you can make is to silo your design and engineering teams. Disconnect turns to distrust and, eventually, despair. Ever heard this phrase murmured in a dubious tone?
"Well, that's what design wants..."
You have to learn to build shit together.
5
10
74
The Intl.RelativeTimeFormat API is a great way to get localized times like "10 days" ago without having to lean on userland translations. Let the browser do the work for you!
Docs:
2
21
75
My daughter learned that I was leaving Microsoft so she made me a new badge. I’m “graduating” this week! 😂
6
1
75
The best way to advocate for web components is to build great things with them. Actions speak louder than words.
#useThePlatform
6
8
72
Most components = you can’t please everyone.
Data tables = you can’t please anyone.
7
6
72
CSS is moving so quickly I didn't even notice that rotate and scale were added *not* as transform options but as first-class properties! 🤯
Rotate:
Scale:
Props to
@jaredcwhite
for this tip!
3
11
70
Start with some HTML. Sprinkle in some CSS. Add behaviors with JS.
Now wrap them up into a nice, clean package that works with or without a framework.
That’s a web component.
5
11
68
@rauchg
on it!
1
1
68
Shoelace is the 50th most popular library on jsDelivr with 600M hits/month.
1
5
68
"jQuery was the pinnacle of front end development…and we let it slip away."
11
4
67
“React 19 adds full support for custom elements and passes all tests on Custom Elements Everywhere.”
3
10
67
One of the most exciting things coming to CSS is Relative Color Syntax.
The alpha use case alone will reshape custom property-based design tokens in incredible ways.
Spec:
2
13
66
It's bittersweet, but as I close this chapter at Microsoft, I will be starting a new chapter with the folks at Font Awesome. I will be responsible for building Shoelace into a sustainable open source project under their expert guidance.
3
1
65
"Web Component authors already know how powerful slots are, but what if you could do even more with them? Here's an interesting technique to use (or abuse) slots in your custom elements. I've been calling the pattern dynamic slots."
10
22
65
I have two words.
THANK YOU 🧡
12
8
63
CSS Modules in Chrome and Edge 93 🎉
3
10
61
“Nobody uses web components.”
Microsoft announces more big investments in Web Components with their Fabric UX System!
2
24
100
6
7
62
When interviewing candidates, I have never and will never ask them to live code during an interview.
We’ve built a fantastic team by asking questions, having thoughtful discussions, and letting candidates talk about their interests.
You can learn so much more from that.
6
4
62
Just in: Meta started enabling the flag for custom element support in React for internal testing purposes.
> Once the flag is removed, barring any extraordinary circumstances, it should ship in the next major.
Full comment here:
2
15
61
Now that it’s been a loooong time…I’ll take color mod functions, LCH, and container queries.
2
5
59
Confession: For as many years as I've been a dev, I'm not a git expert. I have a workflow that I've settled into that "just works" 99% of the time. When something breaks, I search for ways to fix it and learn from that experience.
You don't have to be an expert in everything. 🤷🏻♂️
5
3
58
React's custom element support is getting closer!
Once this PR gets merged, it will land in the next React canary.
5
10
59
Looks like a dev has been assigned to Declarative Shadow DOM for Firefox!
0
7
59
Form-associated custom elements have been merged into WebKit! 🎉
1
8
58
I've worked extensively in:
- Lit
- FAST Element
- Stencil
- Hybrids
…and even created my own library to build web components.
@buildWithLit
is where it's at. ✌️
"I've been down that road before. I built my own library to author web components. […] I ended up spending more time working on the library than the components. If only there were something out there that did exactly what I was looking for…"
6
9
44
3
12
56
This is why I hate meetings. I’m not very good at synchronous communication. I like to think things through and sort shit out in my head before drawing conclusions.
The loudest and most confident speakers are not always the best ones to listen to.
2
2
56
A number of devs have reached out to me privately through direct messages to say “thank you” for speaking out against React and how it has, in many ways, taken over the front end.
To be clear: I’m not speaking out against React. I’m speaking out in favor of Web Standards.
4
4
53
Reason: designers always, always ask for links that look like buttons and buttons that look like links. Devs end up producing the same styles and logic in two separate components.
12
0
54
Opinion: web components shouldn't self-assign class names on the host element.
If you're going to do it, at least prefix them — preferably with the same prefix as the tag name — to avoid collisions with user styles.
7
7
55
@zachtratar
I feel like GE missed an opportunity here. I would have commended the employee and made some big changes. 🤷🏻♂️
3
1
54
Web components encourage *evolution* instead of *revolution* — no need to throw your components away or rebuild them when a new framework comes out.
#useThePlatform
3
9
53
“The EditContext API can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.”
3
4
54
New podcast just dropped on
@syntaxfm
with
@RogersKonnor
and yours truly. What could it possibly be about?! 😂
4
16
54
Converters in
@buildWithLit
can be used to convert attributes <==> properties. Here's an example that turns a space-separated attribute to an array property.
In this case, the property will always be an array and the attribute will always be a string.
5
6
53