#frontend

#Development #Guides
The HTML ‘canvas’ element · Why is ‘canvas’ actually necessary alongside SVG? https://ilo.im/163jyn

_____
#HTML #Canvas #SVG #Content #Accessibility #WebPerf #WebDev #Frontend #JavaScript

Как правильно пофиксить INP и весь Performance: опыт команды ОК

С 12 марта 2024 года метрика FID (First Input Delay) из семейства Core Web Vitals заменена метрикой INP (Interaction to Next Paint), которая оценивает скорость отклика сайтов. При этом, согласно оценке Google, по метрике FID было оптимизировано 93% сайтов, но лишь 65% — по INP. В связи с этим владельцы интернет-ресурсов столкнулись с необходимостью оперативно дорабатывать свои сайты, чтобы не потерять позиции в поисковой выдаче. Меня зовут Кирилл Радыгин. Я руководитель фронтэнд направления в компании Одноклассники. В этой статье я расскажу, как команда ОК адаптировала соцсеть под изменившийся набор метрик оценки перформанса.

https://habr.com/ru/companies/vk/articles/905196/

#продуктовая_разработка #performance #performance_optimization #performance_tests #frontend #webvitals #google_console #lcp #inp #cls

Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb

One of my most hearted demos ever & my only one to get over 1000 without being in the most hearted of previous year.

#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment

Here's a super simple pure #CSS #3D hover effect on @codepen https://codepen.io/thebabydino/pen/ZYYXGLR

*Heavily* commented, every coding choice explained.

#code #coding #cssTransform #css3D #web #dev #webDev #webDevelopment #frontend

Как мы перевели аналитику внутренних сервисов Авито на собственное решение

Привет всем! Меня зовут Антон Галич, я фронтенд-инженер в департаменте разработки Analytics Platform в Авито. В этой статье я рассказываю историю о том, как мы перевели аналитику для внутренних сервисов компании на нашу собственную платформу, отказавшись от стороннего решения Amplitude.

https://habr.com/ru/companies/avito/articles/904054/

#аналитика #внутренние_сервисы #frontend #клики #тепловая_карта #бигтех

I tried to figure out the difference between a menu and a navigation, give it a read if you have some time to spare:

https://stevefrenzel.dev/posts/menu-and-navigation-the-difference/

Let me know if I got something wrong, I'd appreciate your feedback.

#a11y #accessibility #html #css #JavaScript #frontend #WebDev #blog

Maybe don't rely on AI to answer your CSS questions. Actually... without the maybe. Don't rely on AI to answer your CSS questions.

#CSS #AI #aiCode #code #coding #frontend #web #dev #webDev #webDevelopment #cssGradient

What sort of device are you reading this toot on right now?
(Please boost for a diversified panel.)

#Webdev #frontEnd #OSs #FLOSS #polls #tech #poll #usage #data #decoupling #personalData #dataPrivacy #dataProtection #EuropeanAlternatives #decoupling #nonAligned #alternatives #nonUS

“Vibe coding, where 2 engineers can now create the tech debt of at least 50 engineers.” — I Am Devloper

_____
#Development #Programming #Coding #VibeCoding #AI #TechDebt #WebDev #Frontend #Backend #Quotes

React vs Vue – подробное сравнение и перспективы

В этой статье мы проведём подробный анализ современных практик frontend-разработки, сравним состояние React и Vue 5 лет назад и на текущий момент, а также попробуем спрогнозировать их перспективность в обозримом будущем с учётом развития LLM моделей и AI агентов. Посмотрим их экосистемы (Next.js и Nuxt, Redux и Pinia), использование в бэкенде, популярность решений в энтерпрайзе, а так же понимание разработчиками и LLM моделями.

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

#frontend #ai #vue #react #javascript

Losing it. This demo is broken in a very weird way in Chrome (all fine for Firefox & Epiphany).

https://codepen.io/thebabydino/pen/zqGzLR

The shape is made up of 3 parts = 1 octagonal prism + 2 square cupolae.

The faces of only one of the two square cupolae are flattened in the parent plane. Can't get it. #CSS #code #coding #frontend #web #dev #webDev #webDevelopment #3d #transform #css3d #cssTransform

#tinyCSStip Want the same border, but only for two edges, not for the others?

Don't set borders on the two edges to the same value, set border, then override border-width. If you later need to make the border thicker or thinner or pink or green, you only need to make that change in one place.

#CSS #cssBasics #code #coding #web #dev #webDev #webDevelopment #frontend

A few new tags on https://frontenddogma.com—enough to warrant a short update 

* Accordions: https://frontenddogma.com/topics/accordions/
* BFF: https://frontenddogma.com/topics/backend-for-frontend/
* Backlinks: https://frontenddogma.com/topics/backlinks/
* Breadcrumbs: https://frontenddogma.com/topics/breadcrumbs/
* Coda: https://frontenddogma.com/topics/coda/
* Disclosure widgets: https://frontenddogma.com/topics/disclosure-widgets/
* Fresh: https://frontenddogma.com/topics/fresh/
* Postman: https://frontenddogma.com/topics/postman/
* SSG (≠ SSGs): https://frontenddogma.com/topics/static-site-generation/
* “View source”: https://frontenddogma.com/topics/view-source/

#frontend #webdev #history

Frontend Coffee Break - Podcast

Ep. #42: Accessibility in 2025, tips to be ready

We discuss the European Accessibility Act (EAA) that might affect your website, how to check, and deal with common issues. How hard is it to follow the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA? We give you an insight and share our experience.

What's your experience with accessibility?

https://frontend.coffee/s1/42

#podcast #frontend #WebDevelopment #accessibility

Irregular shaped image with both convex & concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.

Because someone asked how to
https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/

Live on @codepen https://codepen.io/thebabydino/pen/LEExpVg

#CSS #subgrid + #SVG #filter magic.

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

After 3+ years of work and refining in private repos, I've finally published an open-source implementation for client-side error handling that should work for 99% of cases! https://github.com/practical-computer/practical-error-handling-js

#javascript #frontend #indiehackers

Help an idiot who is useless with layout? How can I get this result with flexbox and no media queries? If viewport wide enough, those small articles are on the side, one under the other. Otherwise, they're below, next to one another.

https://codepen.io/thebabydino/pen/XJJpjzv

Thanks!

#CSS #flexbox #layout #code #coding #frontend

Пиши простой код

И это решит 95% проблем типичного стартапа. Как-то так повелось, что по всему СНГ и его окрестностям на работу набирают зумеров с колоссальным опытом в три года, и они начинают создавать идеальные архитектуры. Да, каждый из вас, как только получает возможность взять на себя хоть малейшую ответственность, сразу вспоминает все прочитанные и не прочитанные книги и пилит свою уникальную архитектуру, непохожую ни на что.

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

#вебразработа #программирование #backend #frontend #алгоритмы #архитектура

Пиши простой код

И это решит 95% проблем типичного стартапа. Как-то так повелось, что по всему СНГ и его окрестностям на работу набирают зумеров с колоссальным опытом в три года, и они начинают создавать идеальные архитектуры. Да, каждый из вас, как только получает возможность взять на себя хоть малейшую ответственность, сразу вспоминает все прочитанные и не прочитанные книги и пилит свою уникальную архитектуру, непохожую ни на что.

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

#вебразработа #программирование #backend #frontend #алгоритмы #архитектура

I'm looking for some more friends who are interested in front end design
#css #design #frontEnd