​Построение системы координат при помощи HTML и CSS

Предлагаем вам познакомиться с способом создания динамической декартовой системы координат, где все вычисления на себя берёт метод calc() в CSS.

Подробности:

https://techrocks.ru/2022/01/06/coordinate-system-in-html-and-css/

#html #css

​Что такое CSS attr

Вы знали, что в CSS есть функция, которая может получить значение любого атрибута элемента? Она называется attr() и с помощью неё вы можете лучше взаимодействовать с HTML. Конечно, это редко где может пригодиться, но всё-таки стоит её держать в голове.

Вот здесь о функции можно узнать подробнее:

https://doka.guide/css/attr/

#css

​10 основных функций, представленных в Tailwind CSS v3.0

Tailwind CSS v3.0 был выпущен 9 декабря 2021 года. Эта версия — одна из самых интересных для пользователей Tailwind CSS, ведь в ней огромное количество новых функций. О десяти из них рассказали в этой статье:

https://levelup.gitconnected.com/top-10-features-introduced-in-tailwind-css-v3-0-39f9700b12a1

#tailwind

Фронтенд просто уже привык

​Как тестировать фронтенд на телефонах и эмуляторах, и почему фронтендеру никуда без макбука

Несмотря на, казалось бы, очевидную кроссплатформенность, особенно в случае с Safari, где на всех устройствах применяется один и тот же движок, иногда могут вылезать очень необычные баги. Об одном из них рассказал Вадим Макеев — почему-то в мобильной версии сайта некоторые стили вели себя неадекватно и проверить это можно было только непосредственно на устройстве или в эмуляторе.

Что с этим делать и почему так происходит — в этом видео:

https://www.youtube.com/watch?v=71qnSzSjCyY

#видео #фронтенд

Результаты опроса State of JS 2021

Опрос State of JS проводится ежегодно для оценки состояния экосистемы JavaScript. В опросе этого года поучаствовало 16,085 разработчиков со всего мира. Результаты опроса получились интересными и ознакомиться с ними вы можете здесь:

https://2021.stateofjs.com/ru-RU/

#javascript

Как использовать библиотеку веб-компонентов React от Uber

Да, компания Uber решила поделиться своими наработками в области веб-интерфейса и выложила в открытый доступ компоненты, которые используются в её продуктах.

Даже если вы не React-разработчик, полезно посмотреть, как именно разрабатывает свои веб-компоненты такая крупная компания:

https://nuancesprog.ru/p/15086/

#react

​Как создаются расширения для VS Code

У VS Code очень богатая библиотека расширений, которые позволяют превратить редактор кода в одну из самых удобных IDE на сегодняшний день. Вам когда-нибудь было интересно, как такие расширения создаются?

В этой статье автор поделился историей создания расширения для фреймворка, работающего на Rust, WebAssembly и TypeScript:

https://www.osohq.com/post/building-vs-code-extension-with-rust-wasm-typescript

#rust #vscode #typescript

Современный аналог скринсейвера с медузами на Canvas

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

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

https://codepen.io/justjspr/pen/JMBWEV

#codepen #canvas

​Знакомимся с утиной типизацией в TypeScript

Утиная типизация встречается в разных языках ООП. Суть её звучит так: «Если это выглядит как утка, плавает как утка и крякает как утка, то, вероятно , это утка». Логично, не правда ли? Применительно к коду это означает, что он выполнит именно то, что применительно к тем данным, которые он получил.

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

https://javascript.plainenglish.io/what-is-duck-typing-in-typescript-c537d2ff9b61

#typescript

​Большая интерактивная шпаргалка по Tailwind CSS

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

У вас её ещё нет? Тогда скорее забирайте:

https://flowbite.com/tools/tailwind-cheat-sheet/?ref=producthunt

#tailwind #шпаргалка

​Создание генеративных 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