Making the web a better place each day
Tel Aviv
Joined January 2009
- Tweets811
- Following387
- Followers205
- Likes3.1K
Check this out! I'm getting onboard with an offering on OKX NFT Launchpad. Join us now. @okxweb3 okx.com/web3/marketplace/lau…
Elior Tabeka retweeted
Yikes
Readers added context they thought people might want to know
Sinclair Broadcast Group owns a large number of local news stations, who shared a prepared statement back in 2018:
nytimes.com/2018/04/02/bus…
Elior Tabeka retweeted
CSS Tip! ✨
Trigonometric functions (sin, cos, etc.) are landing in CSS 🙌
Use them in animations & layouts 😯
How about these images laid out along a sine wave using scoped custom properties?
img {
translate: 0 calc(sin(var(--index) * 50%)); 👈
}
@CodePen link below! 👇
Elior Tabeka retweeted
Bare-bones #SVG UI Slider
Just a few svg <rect> and an <ellipse>. Easily made interactive with @greensock's Draggable. Made pretty with #CSS
💥SUPER Scalable💥
@codepen Demo:
codepen.io/snorkltv/pen/QWmp…
more 👇
Elior Tabeka retweeted
Future CSS Tip! 🔮
Use :has() to power <form> micro-interactions and theme 😎 No JavaScript. Animations powered by <input> state 🚀
.group:has(:invalid) {
animation: shake 0.5s;
}
form:has(.email:valid):has(.password:valid) .submit {
--color: green;
}
Demo link below 👇
Elior Tabeka retweeted
✨ CSS Tip! ✨
You can create an expanding <img> gallery view with a lil display:flex and the flex property 💪
.container { display: flex; }
img { flex: 1; }
img:hover { flex: 5; }
~40 lines of CSS 🔥
👉 codepen.io/jh3y/pen/QWQVOZV via @CodePen
Elior Tabeka retweeted
Tooling tip: in @ChromeDevTools you can use the global `monitorEvents` to get logs in the console for all the events dispatched on an object
Super useful when debugging weird behavior on triggered event handlers 🔥
Elior Tabeka retweeted
#CSS `:focus-visible`
Lets the browser decide whether or not to show focus
Video shows the difference between `:focus` and `:focus-visible` when Javascript is used to focus buttons after mouse interaction
tldr;
less concerns / better UX
Learn more web.dev/learn/css/pseudo-cla…
Elior Tabeka retweeted
⚡ Announcing Angular DevTools, a new way to debug your apps ⚡️
Install now to:
‣ Visualize the structure of your apps 🗺
‣ Explore, inspect & edit components 🔍
‣ Profile performance 📊
👩🏾💻 Read more → goo.gle/angular-devtools
🚀 Install here → goo.gle/install-angular-devt…