@janstidorado: looks mehh -_-

jansti dorado
jansti dorado
Open In TikTok:
Region: PH
Tuesday 13 July 2021 08:27:42 GMT
79
6
0
2

Music

Download

Comments

There are no more comments for this video.
To see more videos from user @janstidorado, please go to the Tikwm homepage.

Other Videos

How I build with Claude 👇 Academy in bio 🔗 Live market data that looks trustworthy, step by step: 1. One WebSocket for the whole page, never one per pill. const ws = new WebSocket(url); ws.onmessage = function(e) { const d = JSON.parse(e.data); update(d.symbol, d.price, d.change); } 2. Never re-render the list. Build a Map of symbol to DOM node once, then only touch the textContent of the two spans that actually changed. Re-rendering 40 pills ten times a second will tank your frame rate. 3. Format the number, never print the raw float: new Intl.NumberFormat('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 3 }).format(price). A 4.328000000001 on screen destroys trust instantly. 4. Percentage: new Intl.NumberFormat('en-GB', { style: 'percent', minimumFractionDigits: 2, signDisplay: 'always' }).format(change / 100). signDisplay gives you the plus sign for free. 5. Drive color from the sign in one place: el.dataset.dir = change > 0 ? 'up' : change < 0 ? 'down' : 'flat'. Then style it in CSS with [data-dir=
How I build with Claude 👇 Academy in bio 🔗 Live market data that looks trustworthy, step by step: 1. One WebSocket for the whole page, never one per pill. const ws = new WebSocket(url); ws.onmessage = function(e) { const d = JSON.parse(e.data); update(d.symbol, d.price, d.change); } 2. Never re-render the list. Build a Map of symbol to DOM node once, then only touch the textContent of the two spans that actually changed. Re-rendering 40 pills ten times a second will tank your frame rate. 3. Format the number, never print the raw float: new Intl.NumberFormat('en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 3 }).format(price). A 4.328000000001 on screen destroys trust instantly. 4. Percentage: new Intl.NumberFormat('en-GB', { style: 'percent', minimumFractionDigits: 2, signDisplay: 'always' }).format(change / 100). signDisplay gives you the plus sign for free. 5. Drive color from the sign in one place: el.dataset.dir = change > 0 ? 'up' : change < 0 ? 'down' : 'flat'. Then style it in CSS with [data-dir="up"] { color: #16c784 }. 6. Use the ▲ and ▼ characters, not icon components. The pill never reflows and you ship zero extra bytes. 7. Flash on update: el.classList.add('flash'), then el.addEventListener('animationend', function() { el.classList.remove('flash'); }, { once: true }). The once option is what stops listeners piling up. 8. Keep the flash subtle. Background from rgba(22,199,132,0.22) to transparent over 400ms. A hard flash reads as an error, not as an update. Market status card: 9. Never hardcode opening hours against the visitor's clock. Read the venue's own timezone: new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/Berlin', hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }).format(new Date()). 10. For the open check use formatToParts on that same formatter, pull the weekday and hour, then open = weekday is Mon to Fri and hour is between 9 and 17. Using the visitor's local hour breaks for every visitor outside that timezone. 11. Status dot: 10px circle, and when open animate a pulse from box-shadow 0 0 0 0 rgba(22,199,132,0.5) to box-shadow 0 0 0 12px transparent over 2s infinite. Glass objects: 12. Glass is not opacity. new THREE.MeshPhysicalMaterial({ transmission: 1, thickness: 0.6, ior: 1.5, roughness: 0.05, metalness: 0 }). 13. transmission refracts whatever is behind it, so you need an environment. Load an HDRI, run it through PMREMGenerator, assign it to scene.environment, and set ACESFilmicToneMapping on the renderer. Skip this and your glass renders as flat grey plastic. 14. Add iridescence: 0.4 on the same material for that thin colored edge along the bevels. Save this if you want live data that people believe 📈 #claudefable5 #buildinpublic #webdesign #gradient

About