if() without if() in CSS using :has and :nth-child - Frontend Engineering Explained
How do we change the size of a card in a list of cards based on the total number of cards using just CSS?
Verwaltet von:
#webdev
128 Beiträge93 Beteiligte0 Beiträge heute
hey #programming, I just decided to summarize most of the security trainings and courses for devs.
WebSocketStream
https://developer.mozilla.org/en-US/docs/Web/API/WebSocketStream
The WebSocketStream interface of the WebSockets API is a promise-based API for connecting to a WebSocket server. It uses streams to send and receive data on the connection, and can therefore take advantage of stream backpressure automatically, regulating the speed of reading or writing to avoid bottlenecks in the application.
MDN Web DocsWebSocketStream - Web APIs | MDNThe WebSocketStream interface of the WebSockets API is a promise-based API for connecting to a WebSocket server. It uses streams to send and receive data on the connection, and can therefore take advantage of stream backpressure automatically, regulating the speed of reading or writing to avoid bottlenecks in the application.
EmbedPDF is a framework‑agnostic, MIT‑licensed #PDF viewer that drops into any #JavaScript project ( #React, #Vue, #Svelte, or vanilla).
GitHubGitHub - embedpdf/embed-pdf-viewer: A PDF viewer that seamlessly integrates with any JavaScript projectA PDF viewer that seamlessly integrates with any JavaScript project - embedpdf/embed-pdf-viewer
<meter>
Represents either a scalar value within a known range or a fractional value.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meter
MDN Web Docs<meter>: The HTML Meter element - HTML | MDNThe <meter> HTML element represents either a scalar value within a known range or a fractional value.
️ New Article: Checking for focus in an element using CSS in your JavaScript https://ift.tt/fa5zMhd #WebDev #FrontEndDeveloper #100DaysOfCode #CodeNewbie
ift.ttChecking for focus in an element using CSS in your JavaScriptI’ve finally found a kind of CSS-in-JS that doesn’t suck: using modern CSS selectors instead of JavaScript methods to filter out DOM elements.
Let’s dig in!
A use case Yesterday, I was working on a Kelp web component to close open subnav menus when the user presses the Esc key or clicks outside of an active subnav/dropdown.
Let’s imagine you have a setup like this example from my subnav article the other day…
Custom Websites! - #Commissions OPEN!
Pricing starts at $100 Front-end ONLY; these are static sites HTML, CSS, and minor JS Provided as a ZIP 5-7 days turnaround
#KoFi #CommissionsOpen #CommsOpen #OpenCommissions #webDev #WebDevelopment #FrontEnd #HTML #CSS #JS #Neocities #Nekoweb #StaticWebsite
"Google Zero" bezeichnet den Zeitpunkt (in der Zukunft) , wenn es keinerlei Traffic mehr durch Suchmaschinenergebnisse von Google gibt, weil Google es schafft mit den KI-Antworten die Leute auf der eigenen Plattform zu halten. Welche Auswirkungen das auf den Journalismus hat, diskutieren Paris Marx und Matt Pearce im sehr hörenswerten Podcast
https://techwontsave.us/episode/288_what_google_zero_means_for_journalism_w_matt_pearce
... und auch die Auswirkungen auf Websites und damit auch auf die Website-Erstellung werden massiv sein ...
Tech Won't Save UsWhat Google Zero Means for Journalism w/ Matt Pearce - Tech Won’t Save UsA left-wing podcast for better technology and a better world.
#Development #Cheatsheets
Conformance vs. compliance in accessibility · The meaning of the two easily confused terms https://ilo.im/1662vn
_____
#Terminology #Accessibility #WCAG #Conformance #Compliance #Legislation #Design #WebDesign #WebDev #Frontend
Hidde's blogConformance vs compliance, accessibility standards editionWhat's the difference between compliance and conformance?
CET 
Still working on unlearning the "top: 0; left: 0; right: 0; bottom: 0;" pattern from way back when.
I just don't get why anyone would use:
```
display: flex;
flex-direction: column
```
when `display: grid` is supported, shorter to write and allows for a lot more flexibility if you want more from your layout.
#Development #Techniques
Another article about centering in CSS · There’s no silver bullet for centering https://ilo.im/1664uj
_____
#Centering #Layout #Container #Text #Content #WebDev #Frontend #CSS #CssGrid #CssFlexbox
PiccalilliAnother article about centering in CSSThis one is different, I promise. It's my advice on approaching the options we have to center an element with CSS now and what pragmatic choices we should make.
Dew Drop – August 14, 2025 (#4476)
buff.ly/LX2J3sI
#dotnet #ai #webdev #csharp #windowsdev #visualstudio #devops #mobiledev #cloud #dewdrop
Dew Drop – August 14, 2025 (#4...
#Design #Approaches
Highlighting used components on a page · A new way to audit design system usage https://ilo.im/1662ve
_____
#Business #Cost #Audits #Components #DesignSystem #UiDesign #WebDesign #Development #WebDev #Frontend
ilo.imA New Way to Audit Design System Usage - Tony WardPlug in to your existing end-to-end tests to audit Design System usage.
What's the longest place name in Australia?
What's the longest personal name ever used?
What's the best text to use to try out a font?
What's a pangram?
I cover them all in my latest post! The most ridiculous test data I use to stress test designs and web implementations:
https://didoesdigital.com/blog/stress-test-data-for-web-projects/
didoesdigital.comStress Test Data for Web Projects · DiDoesDigitalBreak designs by stuffing them with test data and mock images so you can build more resilient websites.
I have a weird #webDev question #askFedi
I'm customizing the Apache directory index in XHTML mode (so no hard styling). The table is set to width: 100% with some padding via CSS. When I restrict the horizontal space below 825px, though, the central (Name) column doesn't shrink anymore, as if there was something preventing it from wrapping text more than it has, so the table overflows. Only happens in some directories. How do I find what's preventing the shrink/wrap?
WebGLRenderingContext: scissor() method
Widely available (from Jul 2015)
https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/scissor
The WebGLRenderingContext.scissor() method of the WebGL API sets a scissor box, which limits the drawing to a specified rectangle.
MDN Web DocsWebGLRenderingContext: scissor() method - Web APIs | MDNThe WebGLRenderingContext.scissor() method of the WebGL API sets a scissor box, which limits
the drawing to a specified rectangle.
<h4>
Represents the fourth highest section level heading.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements
MDN Web Docs<h1>–<h6>: The HTML Section Heading elements - HTML | MDNThe <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest. By default, all heading elements create a block-level box in the layout, starting on a new line and taking up the full width available in their containing block.