#frontend

Minimal #CSS only blurry image placeholders

https://leanrada.com/notes/css-only-lqip/

#frontend #webdev

#CSS #typography ... uh, wow. If you only sort of know what this is or if yo ukow what it is a lot, this is well worth the watch. Bookmarking for my students!

#frontend #UI

https://youtu.be/WdBNYcWG0Yg?si=rdYPFYVjVPgZTm0I

WebSocket: просто о сложном. Часть 2 — практическое применение и тонкости

С вами снова Юля, системный аналитик из EvApps и мы продолжаем разбираться в технологии WebSocket. В первой части (WebSocket для начинающих системных аналитиков: просто о сложном. Часть 1 ) , мы познакомились с основами WebSocket, а теперь давайте заглянем под капот реального сайта, например, криптобиржи. Попробуем понять, как работает этот сложный механизм: что происходит, когда вы видите мгновенно меняющиеся котировки и графики, и что происходит “за кулисами”.

https://habr.com/ru/articles/896836/

#websocket #frontend #backend #realtime_web #Безопасность #Производительность #системный_анализ #api

Bon dia!

Volem compartir eines útils #senseIA per a que pugueu treballar sense haver de fer servir tota aquesta parfernàlia del vibe coding i els crecepelos que es beuen la nostra aigua.

Coneixeu https://uiverse.io/ ? És una #web on podeu consultar el codi de molt components de #frontend amb llicència MIT, lliures per fer-se servir.

#desenvolupamentweb #desenvolupament #programacio
#opensource

The <select> element can now be customized with CSS

https://developer.chrome.com/blog/a-customizable-select

Discussions: https://discu.eu/q/https://developer.chrome.com/blog/a-customizable-select

#css #frontend #programming #webdev

#Development #Findings
The WebAIM Million 2025 · Accessibility of the top 1,000,000 home pages https://ilo.im/1633v1

_____
#Accessibility #WCAG #ARIA #Contrast #AltText #Headings #Regions #WebTechnology #WebDev #Frontend

Single `img` element squircle + inner shadow with #SVG #filter magic

Check it out on @codepen https://codepen.io/thebabydino/pen/MYgNgBa

#svgFilter #squircle #code #coding #web #frontend #webDev #ebDevelopment #dev

Here's another such example on @codepen https://codepen.io/thebabydino/pen/azbLBJy

Concave rounding, gradient background, shape drop-shadow, responsivity... all in one demo. Also using an #SVG #filter + #CSS #grid.

#svgFilter #cssGrid #cssLayout #coding #web #dev #webDev #webDevelopment #code #frontend

#Development #Introductions
MCP · The standard for a shared language between AI and apps https://ilo.im/1630fl

_____
#MCP #OpenStandard #AI #Software #Applications #Development #WebDev #Frontend #Backend

Little @codepen demo: stacked avatars https://codepen.io/thebabydino/pen/ogNQryV

Pure #CSS and very little of it, just some #flexbox magic.

#cssLayout #layout #coding #frontend #web #dev #webDev #webDevelopment #code

Here's a gradient background version on @codepen too https://codepen.io/thebabydino/pen/KwKrJGp

Shape depends on how the text content naturally wraps.

#SVG #filter #svgFilter #gooey #coding #web #dev #webDev #webDevelopment #code #frontend

To fix this, we give the assembly a tiny blur.

We don't want blurry edges either, so we push some of the semitransparent edge pixels to either 0 or 1, whichever is closer. To do so, we use another `feComponentTransfer` and map the [0, 1] alpha interval to [-2, 3]. Basically we're stretching the alpha interval to be 5 times bigger, keeping same midpoint (.5), then it's clamped to [0, 1].

#SVG #filter #CSS #cssFilter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend #svgFilter

Enter the #SVG #filter!

`feComponentTransfer` allows us to manipulate individual RGBA channels. In this case just the alpha (via `feFuncA`) by making all assembly pixels whose alpha is below `.5` fully transparent (alpha = 0). And all other pixels fully opaque (alpha = 1).

This makes edges jagged.

Maybe not so noticeable in some cases, but it often won't cut it.

#CSS #cssFilter #svgFilter #cssBlur #code #webDev #web #dev #webDevelpment #coding #frontend #goo #gooey #blobs #metalball

How the assembly alpha is computed is something I've detailed in https://css-tricks.com/adventures-in-css-semi-transparency-land/

Keep in mind that where we have overlap, two corresponding pixels from the two layers may both have an alpha below .5, but their overlap can still give the assembly an alpha above .5!

For example:

.4 + .3 - .4*.3 = .7 - .12 = .58

Both .4 and .3 are smaller than .5, but the overlap alpha .58 is bigger than .5!

#css #cssFilter #filter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend

As you can see in the recording blurring makes the pixels around the edges semitransparent. The bigger the blur radius, the more pixels become transparent.

When the particles get closer, their semitransparent areas overlap. This increases the assembly alpha there.

#CSS #filter #cssFilter #cssBlur #coding #web #dev #webDev #webDevelopment #code #frontend

What's going on here?

We have particles moving around inside a `.goo` assembly. How we do that (layout, animation) doesn't matter.

We blur these particles with a #CSS #filter (same blur radius or not). CSS allows us to use whatever unit we need for the blur radius. rem, cqi, lh.

#cssFilter #code #coding #frontend #web #dev #webDev #webDevelopment

A little spinner I made years ago on @codepen but never shared publicly https://codepen.io/thebabydino/pen/OJQKbKW

#CSS #loader #spinner #code #coding #web #dev #webDev #webDevelopment #frontend #cssGradient #cssMask #conicGradient #cssSpinner #cssLoader #singleDiv #oneDiv

Make Data Visualization Great Again (или как мы создавали свой инструмент визуализации данных)

Всем привет! Меня зовут Олег Косарев. Я – ведущий инженер-программист. В группе компаний «Цифра» занимаюсь развитием и поддержкой продукта «Диспетчер». Моя основная специализация – Frontend-разработка. В данной статье я хочу поделиться с вами нашим опытом по созданию MVP (Minimum Viable Product, «минимально жизнеспособный продукт») редактора аналитических панелей .

https://habr.com/ru/companies/zyfra/articles/896302/

#data_visualization #frontend #javascript #react #npm #charts #scrum #retrospective #вебразработа

#Development #Challenges
Mind the WCAG automation gap · What can automated tools test without humans? https://ilo.im/1630tn

_____
#Testing #Accessibility #WCAG #AI #Automation #Design #WebDesign #WebDev #Frontend

#Development #Techniques
Poisoning well · An effort to dupe nasty AI crawlers with nonsense https://ilo.im/1632tq

_____
#AI #ChatBots #SEO #Content #Protection #RobotsTxt #WebDev #Backend #Frontend #HTML