Olimpio

Técnico em informática e engenheiro de computação, leio, rio, me divirto com adversidades da vida, sem perder o prazer de conhecer o novo!

[sanyam @sanyampunia]

css tip 🌲

𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚜𝚑𝚊𝚙𝚎() is 𝚙𝚊𝚝𝚑() in css units.

.𝚌𝚊��𝚍 {
𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑: 𝚜𝚑𝚊𝚙𝚎(
𝚏𝚛𝚘𝚖 𝟶 𝟶,
𝚑𝚕𝚒𝚗𝚎 𝚝𝚘 𝚌𝚊𝚕𝚌(𝟻𝟶% - 𝟼𝟸𝚙𝚡),
𝚊𝚛𝚌 𝚝𝚘 𝚌𝚊𝚕𝚌(𝟻𝟶% + 𝟼𝟸𝚙𝚡) 𝟶 𝚘𝚏 𝟼𝟸𝚙𝚡 𝚌𝚌𝚠,
𝚑𝚕𝚒𝚗𝚎 𝚝𝚘 𝟷𝟶𝟶%, 𝚟𝚕𝚒𝚗𝚎 𝚝𝚘 𝟷𝟶𝟶%, 𝚑𝚕𝚒𝚗𝚎 𝚝𝚘 𝟶
);
}

percentages resolve against the box, so the notch stays under the avatar at every width, whereas 𝚙𝚊𝚝𝚑() takes svg path data with no percentages, so the notch is stuck at the width you drew it at.

[jhey ʕ•ᴥ•ʔ @jh3yy]

a little css trick i like ↓

adapt the radius gradually based on available space

shrink from --r to 0 within --g 🧑‍🍳

.card__surface {
--r: 42px;
--g: 24px;
border-radius: clamp(
0px,
(100vi - 100cqi) / 2 *
var(--r) / var(--g),
var(--r)
);
}

[Bharat Kara @KaraBharat]

⚡️ TypeScript Tip: Use key remapping to pick or omit properties by type

#TypeScript

[Bharat Kara @KaraBharat]

I rarely see Infinity used in JavaScript.

But array.flat(Infinity) is surprisingly useful for deeply nested arrays 👇

#JavaScript

[Seb ⚛️ ThisWeekInReact.com @sebastienlorber]

This Week In React 279:
⚛️
- React Compiler
- TSRX
- StyleX
- TanStack
- XState
- shadcn
- Hook Form
- Inertia
📱
- Swift Package Manager
- JSI
- SimCam
- Enriched Markdown
- MLX
- Jail Monkey

🍿 Read/subscribe: https://t.co/hYQISjypMX

✍️ @kacperkapusciak @Konrad_Armatys

[Jason D @JasonUXUI]

Bulk actions for tables ✨

With @shadcn, @Tabler

[angel @angeldot_]

GOOGLE CREÓ LA MEJOR HERRAMIENTA DE ESTUDIO DEL MUNDO

Es gratis. Lleva meses disponible.

Y el 90% de la gente no la conoce.

Te doy 6 prompts de NotebookLM para aprender lo que sea en tiempo récord.

📌Guárdalo, te salvará en tu próximo examen

[IP @ipwanciu]

`image-set` should be the first choice when dealing with background images 🤌

One CSS line fixes:
→ 1x/2x and even 3x resolution switching
→ Modern format fallbacks - AVIF, JPEG, WebP

Zero JS. Pure CSS! 💪

✅Widely available since September 2023

[Camille Roux @CamilleRoux]

Algorithm Visualizer devrait être dans la boîte à outils de tout·e développeur·se qui apprend ou enseigne des algos — la visualisation en direct à partir du code rend les mécanismes abstraits vraiment lisibles.
https://t.co/LMycabGIbQ

[jhey ʕ•ᴥ•ʔ @jh3yy]

iOS-style morphing context menu w/ css transitions 👨‍🍳

[popover] api + anchor positioning + transition-behavior: allow-discrete

[AI_Explorer @ai_explorer25]

Learn Coding by playing games

1. Kubernetes
https://t.co/asmX2e63Va

2. DevOps
https://t.co/5d9UZmCLKm

3. Linux
https://t.co/5lykebIy4w

4. Git
https://t.co/ffznxkA17X

5. Python
https://t.co/2nprnaayRU

6. CSS & HTML
https://t.co/1hOf8oa8Kk

7. Cybersecurity
https://t.co/kD2US36n4R

8. Mobile Coding (like Duolingo)
https://t.co/aXsdDAR7PR

9. For Complete Beginners
https://t.co/XoxpHQwCZM

10. 25+ Programming Languages
https://t.co/c5uulSTTeW

[Bharat Kara @KaraBharat]

The CSS Custom Highlight API lets you highlight search results

— Without affecting the DOM structure.

::highlight(search-results) {
background-color: #ff0066;
color: white;
}

#CSS #WebAPIs

[Abraham John 🦄🦓 @Abmankendrick]

UI/UX Designers, here’s a quick mobile grid guide for iOS and Android screens.

Bookmark it for later 💜

[Best Designs On ✧ @bestdesignsonx]

Menu animation by @dev_ya

More on → https://t.co/Rtvl4XkzjG

[CSS by T. Afif @ChallengesCss]

I thought I had found a bug that prevented counter() from working properly, but it was a feature!

https://t.co/M4lJgx5SqO

Another CSS gotcha that you'd better know about if you don't want to waste time trying to figure out why your code isn't working.

[Justin Schroeder @jpschroeder]

We’re open sourcing ArrowJS 1.0: the first UI framework for coding agents.

Imagine React/Vue, but with no compiler, build process, or JSX transformer. It’s just TS/JS so LLMs are already *great* at it.

AND run generated code securely w/ sandbox pkg.

➡️ https://t.co/y477CtT6qY

[左子祯 @zuozizhen]

这个号称完美主义者的 UI 框架细节确实到位，包括这种带 Icon 的按钮左右间距看起来视觉不平衡的细节都考虑到了，AI 是真的做不到这个程度啊

https://t.co/FqWTlmSn6P

[Tom Dörr @tom_doerr]

TypeScript payment orchestration framework

https://t.co/YfRMGSZAqZ

[Bharat Kara @KaraBharat]

⚡ TypeScript utility types cheatsheet for cleaner and safer code

#typescript

[Milan Jovanović @mjovanovictech]

I built a .NET app that takes a receipt photo and turns it into structured data using Ollama + MEAI.

Here's what I covered:
- Local vision model setup
- Image analysis from .NET
- Prompt tuning for better extraction
- JSON + typed output

Full breakdown: https://t.co/LOVRCkf4lU