This media is not supported in your browser
VIEW IN TELEGRAM
:root {
--elastic-out: linear(
0, 0.2178 2.1%, 1.1144 8.49%,
...
1.0056 72.24%, 0.9981 86.66%, 1
);
}
button {
transition: scale 0.5s var(--elastic-out);
}
button:active {
scale: 0.8;
transition: scale 0.5s ease;
}
Посмотрите на текущее состояние смягчения в CSS и на то, что ждет нас в будущем. Очень проработанный материал, написанный доступным языком👇Please open Telegram to view this post
VIEW IN TELEGRAM
🤩TypeScript Origins: The Documentary
Друзья, отложите все дела. Перед вами док про TypeScript от команды OfferZen, в котором участвуют такие основные контрибьюторы и члены сообщества, как Anders Hejlsberg, Steve Lucco, Luke Hoban, Daniel Rosenwasser, Ryan Cavanaugh, Amanda Silver, Matt Pocock, Josh Goldberg и многие другие.
📺 Смотреть
Друзья, отложите все дела. Перед вами док про TypeScript от команды OfferZen, в котором участвуют такие основные контрибьюторы и члены сообщества, как Anders Hejlsberg, Steve Lucco, Luke Hoban, Daniel Rosenwasser, Ryan Cavanaugh, Amanda Silver, Matt Pocock, Josh Goldberg и многие другие.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Deno 1.37: современный JavaScript в Jupyter Notebooks
Команда Deno придумала кое-что довольно изящное. Deno 1.37 поставляется с интеграцией Jupyter Notebook, поэтому вы можете создавать интерактивные сессии REPL, но используя знакомый и любимый JavaScript, а не Python.
$
Команда Deno придумала кое-что довольно изящное. Deno 1.37 поставляется с интеграцией Jupyter Notebook, поэтому вы можете создавать интерактивные сессии REPL, но используя знакомый и любимый JavaScript, а не Python.
$
deno jupyter --unstable💡Простой способ показать относительное время в удобочитаемом формате.
👉 Поиграть можно здесь.
#css #tip by Shripal Soni
👉 Поиграть можно здесь.
#css #tip by Shripal Soni
388. Safari 17 и TP 179, :has в Firefox, State of HTML, Scroll-Driven…
Веб-стандарты
00:01:08 Релиз Safari 17
00:24:39 Safari TP 179
00:28:07 :has в Firefox
00:30:07 State of HTML 2023
00:41:25 Scroll-Driven Animations
00:52:31 TypeScript иногда мешает
01:15:48 Ответы на вопросы
⏯ YouTube | Apple Подкасты | Google Подкасты | Яндекс Музыка | Сайт подкаста
#подкасты
Please open Telegram to view this post
VIEW IN TELEGRAM
Знаете ли вы, что у Frontend Masters есть курс по алгоритмам с примерами на TypeScript? Бесплатно и без кредитки. Все, что вам нужно, — это электронная почта.
Please open Telegram to view this post
VIEW IN TELEGRAM
📌О порядке применения трансформаций
CSS инженер София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства transform, transform-origin, translate, rotate и scale, — и вот на что следует обратить внимание при работе с этими свойствами:
1⃣Меняем центр трансформации блока согласно свойству transform-origin.
2⃣Перемещаем на расстояния из свойства translate по всем осям.
3⃣Поворачиваем на углы из свойства rotate по всем осям.
4⃣Масштабируем на вычисленные значения scale по всем осям.
5⃣Применяем каждую из функций свойства transform по списку слева направо.
Читайте краткие заметки Софии о том, что это значит на практике.
CSS инженер София Валитова проверила по спецификации, в каком порядке применяются CSS-свойства transform, transform-origin, translate, rotate и scale, — и вот на что следует обратить внимание при работе с этими свойствами:
1⃣Меняем центр трансформации блока согласно свойству transform-origin.
2⃣Перемещаем на расстояния из свойства translate по всем осям.
3⃣Поворачиваем на углы из свойства rotate по всем осям.
4⃣Масштабируем на вычисленные значения scale по всем осям.
5⃣Применяем каждую из функций свойства transform по списку слева направо.
Читайте краткие заметки Софии о том, что это значит на практике.
Какой(-ую) инструмент/фреймворк/библиотеку вы используете для тестирования JavaScript? Можно выбрать несколько вариантов.
Anonymous Poll
15%
Mocha
9%
Jasmine
68%
Jest
6%
Karma
18%
Cypress
4%
Chai
1%
Ava
1%
Tape
15%
Свой вариант (напишу в комментариях)
15 полезных сервисов (на самом деле 14 сервисов + 1 статья-чеклист) для фронтендера, которые упростят жизнь и сохранят нервы
📌Разметка и доступность
1. Emmet — генерирует HTML-кода из CSS-селекторов и не только.
2. Can I Include — подскажет, можно ли класть один тег в другой.
3. HTML head — содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow — поможет обнаружить проблемы с заголовками, их порядком и отображением.
5. Build a Better Mobile Input — поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
6. Weblind — содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
7. Inclusive Components Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
8. Axe — браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
10. How to Favicon in 2021 — статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator — валидатор HTML-кода.
📌Инструменты для оптимизации и работы с картинками
1. Squoosh — приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG — оптимизатор SVG. Содержит массу настроек и позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview — предпросмотрщик изображений для соцсетей.
#инструменты
📌Разметка и доступность
1. Emmet — генерирует HTML-кода из CSS-селекторов и не только.
2. Can I Include — подскажет, можно ли класть один тег в другой.
3. HTML head — содержит список всего, что может быть в <head> страницы.
4. Logical Content Flow — поможет обнаружить проблемы с заголовками, их порядком и отображением.
5. Build a Better Mobile Input — поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных устройствах.
6. Weblind — содержит рекомендации по разработке сайтов для людей с нарушениями зрения.
7. Inclusive Components Содержит примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность.
8. Axe — браузерный плагин для комплексной проверки доступности страниц.
9. Good Email Code Справочник и набор рекомендаций для «пуленепробиваемой» верстки писем.
10. How to Favicon in 2021 — статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода.
11. W3C Validator — валидатор HTML-кода.
📌Инструменты для оптимизации и работы с картинками
1. Squoosh — приложение, CLI и API для оптимизации графики.
2. SVG URL Encoder — кодирует SVG в URL-строку, чтобы использовать его в background без base64. При этом SVG остается читаемым, и его можно править прямо в CSS.
3. SVG OMG — оптимизатор SVG. Содержит массу настроек и позволяет ужимать неоптимизированные SVG в десятки раз.
4. Social Image Preview — предпросмотрщик изображений для соцсетей.
#инструменты
💡Получение контроля над сетевой активностью с помощью Priority Hints
Практический взгляд на то, как браузеры могут определять приоритет загрузки ресурсов, как вы можете явно указать приоритет при использовании fetch и как распределяются приоритеты различных способов загрузки скриптов.
⚖️Читать
Практический взгляд на то, как браузеры могут определять приоритет загрузки ресурсов, как вы можете явно указать приоритет при использовании fetch и как распределяются приоритеты различных способов загрузки скриптов.
⚖️Читать
Alex MacArthur
Get All That Network Activity Under Control with Priority Hints
The browser is very good at prioritizing resources requests on its own. But it's not always great. Priority hints makes it easy to provide explicit instructions as to how and in what network activity occurs.
💡Возможно, вы не знали, но кнопку отправки формы можно использовать вне HTML-формы.
#html #tip by Shripal Soni
#html #tip by Shripal Soni
Please open Telegram to view this post
VIEW IN TELEGRAM
Шаблоны реактивности с помощью современного ванильного JavaScript
Реактивность — это то, как система реагирует на изменения данных. И хотя многие библиотеки и фреймворки вроде React/Vue предлагают реактивные решения из коробки, вы также можете сделать все это с помощью стандартного JavaScript. Разбираемся на примерах, как именно👇
🔗 Читать
Реактивность — это то, как система реагирует на изменения данных. И хотя многие библиотеки и фреймворки вроде React/Vue предлагают реактивные решения из коробки, вы также можете сделать все это с помощью стандартного JavaScript. Разбираемся на примерах, как именно👇
🔗 Читать
#холивар
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Библиотека джависта | Java, Spring, Maven, Hibernate
📊 Как я входил в IT? Результаты опроса «Библиотеки программиста»
Вы когда-нибудь задумывались о том, как входят в IT люди, у которых нет технического образования? Насколько тяжело начать карьеру с чистого листа в зрелом возрасте? Вот и мы решили выяснить это.
Читать статью
Вы когда-нибудь задумывались о том, как входят в IT люди, у которых нет технического образования? Насколько тяжело начать карьеру с чистого листа в зрелом возрасте? Вот и мы решили выяснить это.
Читать статью
💪Уверенное обновление зависимостей: гайд для фронтенд-разработчика
Тесты часто позволяют увидеть, работает ли логика в наших приложениях так, как мы ожидаем, но что, если компонент внешнего интерфейса отображается неправильно?
Визуальное регрессионное тестирование спешит на помощь! Sébastien Lorber, хорошо известный своей работой над Docusaurus, делится рабочим процессом, основанным на GitHub Actions, Playwright и Argos (коммерческий инструмент, но с уровнем бесплатного пользования, подходящим для этой задачи).
👀 Читать
Тесты часто позволяют увидеть, работает ли логика в наших приложениях так, как мы ожидаем, но что, если компонент внешнего интерфейса отображается неправильно?
Визуальное регрессионное тестирование спешит на помощь! Sébastien Lorber, хорошо известный своей работой над Docusaurus, делится рабочим процессом, основанным на GitHub Actions, Playwright и Argos (коммерческий инструмент, но с уровнем бесплатного пользования, подходящим для этой задачи).
👀 Читать
📌 Новости и обновления популярных инструментов: подборка для фронтенд-разработчика
⚡Релиз Safari 17.0. Возможности WebKit в новой версии:
• Начальная поддержка font-size-adjust, позволяющая легко сделать одинаковым визуальный размер разных шрифтов
• Поддержка text-transform: full-width и text-transform: full-size-kana.
• Новый элемент поиска <search>, атрибут popover и многое другое
⚡Релиз Firefox 118:
• В CSS добавлено 10 новых математических функций
• В CSS-свойстве font-size-adjust реализован параметр "from-font", указывающий об использовании метрик шрифта, взятых из первого доступного шрифта
• В HTTP-заголовке Permissions-Policy добавлена поддержка значения publickey-credentials-get
• По умолчанию включён механизм ORB, позиционируемый как замена механизма CORB для блокирования загрузки ресурсов при запросе со стороннего домена
• Включена по умолчанию система машинного перевода и многое другое
🔸Shoelace 2.9 — набор компонентов, не зависящих от фреймворка.
🔸Dependency Cruiser 14.0 — инструмент для визуализации и проверки зависимостей.
🔸Ember 5.3 — амбициозный фреймворк для создания современных веб-приложений.
🔸pnpm 8.8 — менеджер пакетов для JavaScript.
🔸Bit 1.0 — инструмент для изоляции, версионирования и повторного использования компонентов кода.
🔸n64js — эмулятор Nintendo 64 на JavaScript.
🔸Chardet 2.0 — библиотека для определения кодировки символов.
🔸React Chrono 2.3 — современный React-компонент для рендеринга временных шкал.
🔸Sonner 1.0 — компонент всплывающих уведомлений для React.
🔸React PDF 7.4 — инструмент для отображения PDF-файлов в React-приложении.
🔸React Bootstrap 2.9 — компоненты Bootstrap, созданные для React.
🔸React Native VisionCamera 3.1 — мощная и высокопроизводительная React-библиотека для управления камерой.
🔸ip-address 9.0 — библиотека для парсинга и управления адресами IPv4 и IPv6 в JavaScript.
🔸Jazzer.js 2.0 — фаззер для Node.js.
🔸Preact 10.18.0
🔸esbuild 0.19.4
#чтопроисходит
⚡Релиз Safari 17.0. Возможности WebKit в новой версии:
• Начальная поддержка font-size-adjust, позволяющая легко сделать одинаковым визуальный размер разных шрифтов
• Поддержка text-transform: full-width и text-transform: full-size-kana.
• Новый элемент поиска <search>, атрибут popover и многое другое
⚡Релиз Firefox 118:
• В CSS добавлено 10 новых математических функций
• В CSS-свойстве font-size-adjust реализован параметр "from-font", указывающий об использовании метрик шрифта, взятых из первого доступного шрифта
• В HTTP-заголовке Permissions-Policy добавлена поддержка значения publickey-credentials-get
• По умолчанию включён механизм ORB, позиционируемый как замена механизма CORB для блокирования загрузки ресурсов при запросе со стороннего домена
• Включена по умолчанию система машинного перевода и многое другое
🔸Shoelace 2.9 — набор компонентов, не зависящих от фреймворка.
🔸Dependency Cruiser 14.0 — инструмент для визуализации и проверки зависимостей.
🔸Ember 5.3 — амбициозный фреймворк для создания современных веб-приложений.
🔸pnpm 8.8 — менеджер пакетов для JavaScript.
🔸Bit 1.0 — инструмент для изоляции, версионирования и повторного использования компонентов кода.
🔸n64js — эмулятор Nintendo 64 на JavaScript.
🔸Chardet 2.0 — библиотека для определения кодировки символов.
🔸React Chrono 2.3 — современный React-компонент для рендеринга временных шкал.
🔸Sonner 1.0 — компонент всплывающих уведомлений для React.
🔸React PDF 7.4 — инструмент для отображения PDF-файлов в React-приложении.
🔸React Bootstrap 2.9 — компоненты Bootstrap, созданные для React.
🔸React Native VisionCamera 3.1 — мощная и высокопроизводительная React-библиотека для управления камерой.
🔸ip-address 9.0 — библиотека для парсинга и управления адресами IPv4 и IPv6 в JavaScript.
🔸Jazzer.js 2.0 — фаззер для Node.js.
🔸Preact 10.18.0
🔸esbuild 0.19.4
#чтопроисходит
🚀Паша Востриков, фронтенд-разработчик в «Лаборатории Касперского», делится богатым опытом отладки JavaScript-приложений
Паша затронул большинство важных тем, связанных с отдадкой JS, в частности:
1. Отладка фронта
2. Отладка Node.js
3. Observability: логи, трейсы, метрики (вдогонку можно посмотреть доклад «Логи, трейсы, метрики: как не заблудиться в собственном приложении»)
4. Стенды для отладки
5. Опыт команды и многое другое
Паша затронул большинство важных тем, связанных с отдадкой JS, в частности:
1. Отладка фронта
2. Отладка Node.js
3. Observability: логи, трейсы, метрики (вдогонку можно посмотреть доклад «Логи, трейсы, метрики: как не заблудиться в собственном приложении»)
4. Стенды для отладки
5. Опыт команды и многое другое
отработки навыков фронтенд-разработки, подготовки к собеседованию и общения с разработчиками по всему миру. Одним словом, LeetCode для фронтендера.
Please open Telegram to view this post
VIEW IN TELEGRAM