​Создание генеративных SVG гридов

Интересный проект по созданию svg-сетки, генерируемой случайный образом. Здесь вы найдёте и готовое решение, и подробное описание создания аналогичного проекта:

https://frontend.horse/articles/generative-grids/

​Переиспользуемые фронтенд-компоненты на чистом JavaScript

Да, фреймворки призваны облегчить создание фронтенда, в том числе благодаря возможности создания компонентов. Но иногда они избыточны, а реализовать компонент можно и без применения сторонних инструментов.

О том, как сделать компонент на ванильном JS, читайте в этой статье:

https://nuancesprog.ru/p/12044/

#javascript

​Улучшение доступности компонентов Angular

В этой статье вы узнаете, какими способами можно повлиять на доступность ваших компонентов Angular в лучшую сторону. Это и переход на интеграцию MDC Web, и работа с автофокусом и многое другое. Подробнее:

https://blog.angular.io/improving-angular-components-accessibility-89b8ae904952

#angular

​Разбираем задачи для фронтенд-разработчиков с чемпионата по программированию

Предлагаем вам решить несколько задач, которые предлагались на чемпионате по программированию в прошлом году. Вы можете попробовать решить их сами, а затем посмотреть рабочее решение под спойлером для сравнения.

https://habr.com/ru/company/yandex/blog/460139/

#фронтенд

Интересная реализация блока меню в виде стопки карточек

Первоначально пункты выглядят просто как стопка карточек, но при выборе определённого пункта меню лишние карточки смахиваются из области видимости, а выбранная занимает 100%.

Познакомиться с проектом поближе можно тут:

https://codepen.io/renatoruk/pen/WwyJjE

#codepen

​CSS-свойства для работы с изображениями

При работе с изображениями стоит учитывать различные способы настройки их отображения на странице. Можно вставить изображение в виде HTML-элемента, а можно и как фон для блока, например. Здесь предлагаем рассмотреть первый вариант и несколько свойств, которые помогут добиться идеального отображения:

https://techrocks.ru/2022/01/05/css-properties-for-images/

#css

​Как ваш браузер обрабатывает прикосновения к экрану телефона

В javascript существует 4 события которые вызываются при вашем прикосновении — touchstart, touchend, touchmove и touchcancel. Они позволяют реализовать самые разные сценарии взаимодействия с сенсорным экраном. Как при этом обрабатывает это всё браузер — отдельный вопрос, который помогает лучше настроить доступность и улучшить опыт пользования вашим приложением.

Подробнее об этом:

https://habr.com/ru/post/592317/

#javascript #фронтенд

​5 распространённых ошибок HTML, которых легко избежать

HTML крайне неприхотлив и «съест» всё, что вы ему предложите независимо от семантичности. Но это не означает, что можно забить на все правила и писать как угодно. Здесь мы предлагаем познакомиться с 5 ошибками, которые мешают вашей вёрстке быть качественной и полезной:

https://devdojo.com/abhiraj/5-common-html-mistakes-you-should-avoid

#html

​Превращение страницы GitHub в прогрессивное веб-приложение

Благодаря этой небольшой инструкции вы сможете превратить свой сайт в GitHub Pages в PWA приложение:

https://christianheilmann.com/2022/01/13/turning-a-github-page-into-a-progressive-web-app/

#github #pwa

​Шаблоны макетов

Коллекция шаблонов макетов, созданных с использованием современных API-интерфейсов CSS, которые помогут вам создавать стандартные интерфейсы, такие как карточки, области динамической сетки и полностраничные макеты:

https://web.dev/patterns/layout/

#css

И так каждый раз

​JavaScript: захват медиапотока из DOM-элементов

В этой статье вы изучите возможность захвата и записи медиаданных в процессе воспроизведения аудио и видеофайлов. Для наглядности вы даже создадите своё приложение, которое сможет сводить видео и аудио в единый файл.

Подробнее:

https://habr.com/ru/company/timeweb/blog/646831/

#javascript

Создание генератора кроссвордов с помощью JavaScript

Это сложный, но интересный проект. Каких-то кардинально новых методов или возможностей JavaScript тут нет, но зато вы можете прокачать свои навыки создания сложных алгоритмов и чтения кода.

Автор рассмотрел основные особенности генератора, рассказал как они работают и оставил код проекта для детального изучения:

https://mitchum.blog/building-a-crossword-puzzle-generator-with-javascript/

#javascript

​3 шаблона проектирования компонентов React, о которых вы должны знать

Среди десятков шаблонов проектирования есть те, которые используются наиболее часто из-за их эффективности, надёжности и универсальности. О трёх из них — шаблоне провайдера, шаблоне представления и компонента-контейнера, а также шаблоне составных компонентов — в статье:

https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

#react #фронтенд

​Оптимизация видео по размеру и качеству

Добавление видео в ваше приложение может повысить заинтересованность и удовлетворенность клиентов. Но при проблемах с воспроизведением видео может произойти прямо противоположное: видео раздражают и отталкивают клиентов. 

В этой статье вы рассмотрите шаги по оптимизации видео на вашем веб-сайте, чтобы обеспечить быстрое воспроизведение и уменьшить количество зависаний:

https://www.smashingmagazine.com/2021/02/optimizing-video-size-quality/

И углы у кнопок слишком угловатые

Адаптивная галерея изображений с анимированными подписями

Адаптивное изменение размера изображений является общей потребностью. Современный CSS предоставляет инструменты для обеспечения придания адаптивности изображениям без искажений, например aspect-ratio или object-fit. В этой статье автор продемонстрировал современные возможности адаптивности на примере галереи изображений:

https://moderncss.dev/responsive-image-gallery-with-animated-captions/

#css

​​Microsoft поддерживает добавление в JavaScript синтаксиса типов

Microsoft поддержала предложение добавить в JavaScript необязательный и стираемый синтаксис типов, чтобы сделать язык TypeScript быстрее и проще в использовании.

По сути, предлагается добавление аннотаций типов в код JavaScript, которые могут быть проверены внешними средствами проверки типов и обработаны как комментарии движком JavaScript во время выполнения. Если предложение будет одобрено, разработчики смогут запускать программы на TypeScript, Flow и других языках.

Подробнее можно прочитать в этой статье:

https://habr.com/ru/news/t/655749/

#javascript #новости

​a11yphant — простой способ изучить основы веб-доступности

Это студенческий проект, который даёт возможность изучить важные вопросы доступности в пошаговой форме. Вам не нужно читать большое количество текста, чтобы разобраться. Вместо этого вы будете учиться, применяя концепции в коде. 

Изучить основные проблемы доступности можно здесь:

https://a11yphant.com/

«Нужен специалист с 8-летним опытом работы со Svelte»