Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular
Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.
Eng https://netbasal.com/using-angular-ngoptimizedimage-to-implement-image-loading-best-practices-e20a69d71ea3
Rus https://habr.com/ru/post/685018/
👉 @frontend_1
Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.
Eng https://netbasal.com/using-angular-ngoptimizedimage-to-implement-image-loading-best-practices-e20a69d71ea3
Rus https://habr.com/ru/post/685018/
👉 @frontend_1
10 ошибок, которых следует избегать при работе с Vue 3
Vue 3 стабилен уже довольно долгое время. Многие компании используют его в продакшене, и всем остальным рано или поздно придется перейти на него. У меня была возможность поработать с ним и я записал свои ошибки, которых вы, вероятно, захотите избежать.
https://fadamakis.com/10-mistakes-to-avoid-when-starting-with-vue-3-1d1ced8552ae
👉 @frontend_1
Vue 3 стабилен уже довольно долгое время. Многие компании используют его в продакшене, и всем остальным рано или поздно придется перейти на него. У меня была возможность поработать с ним и я записал свои ошибки, которых вы, вероятно, захотите избежать.
https://fadamakis.com/10-mistakes-to-avoid-when-starting-with-vue-3-1d1ced8552ae
👉 @frontend_1
Medium
10 Mistakes to Avoid When Starting with Vue 3
Vue 3 has been stable for quite some time now. Many codebases are using it in production, and everyone else will have to migrate…
👍1🥰1
Почему вам не нужна версия для слабовидящих
Представьте, что в кафе на застолье пришел веган. Его друзья, зная это, специально выбрали кафе с отдельным меню для веганов. Но в нем только макароны с кабачками и вишневый компот, а в обычном меню есть и картошка, и салаты и другая еда, в которой достаточно заменить пару ингредиентов, чтобы веган мог это есть. Естественно, гость в недоумении? Почему макароны с кабачками? Для чего вообще отдельное веганское меню?
Это реальная история, которую рассказал мой друг Дима, проводя аналогию с версиями для слабовидящих. На самом деле раньше я тоже делала отдельную версию для слабовидящих и вбрасывала на сайт, совершенно не разбираясь в том, что такое доступность.
Меня зовут Лена Райан, я — frontend-разработчик в X5 Tech, борец за вёрстку кнопок кнопками, доступность и семантику, амбассадор WTM, приношу новости в «Веб-стандарты» и помогаю с активностями в джун-чате, катаюсь на сноуборде и сёрф-скейте. Расскажу о популярных заблуждениях в теме доступности, юридической стороне вопроса и опыте слабовидящего человека.
https://habr.com/ru/companies/oleg-bunin/articles/660691/
👉 @frontend_1
Представьте, что в кафе на застолье пришел веган. Его друзья, зная это, специально выбрали кафе с отдельным меню для веганов. Но в нем только макароны с кабачками и вишневый компот, а в обычном меню есть и картошка, и салаты и другая еда, в которой достаточно заменить пару ингредиентов, чтобы веган мог это есть. Естественно, гость в недоумении? Почему макароны с кабачками? Для чего вообще отдельное веганское меню?
Это реальная история, которую рассказал мой друг Дима, проводя аналогию с версиями для слабовидящих. На самом деле раньше я тоже делала отдельную версию для слабовидящих и вбрасывала на сайт, совершенно не разбираясь в том, что такое доступность.
Меня зовут Лена Райан, я — frontend-разработчик в X5 Tech, борец за вёрстку кнопок кнопками, доступность и семантику, амбассадор WTM, приношу новости в «Веб-стандарты» и помогаю с активностями в джун-чате, катаюсь на сноуборде и сёрф-скейте. Расскажу о популярных заблуждениях в теме доступности, юридической стороне вопроса и опыте слабовидящего человека.
https://habr.com/ru/companies/oleg-bunin/articles/660691/
👉 @frontend_1
👍5🔥2👏1
OKLCH в CSS: почему мы ушли от RGB и HSL
В CSS мы чаще всего пишем цвета через rgb() или hex — но так сложилось исторически. Новая спецификация CSS Color 4 позволит нам описывать цвета через новые методы. В этой статье мы расскажем, почему нам больше всего нравится oklch().
https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/
👉 @frontend_1
В CSS мы чаще всего пишем цвета через rgb() или hex — но так сложилось исторически. Новая спецификация CSS Color 4 позволит нам описывать цвета через новые методы. В этой статье мы расскажем, почему нам больше всего нравится oklch().
https://web-standards.ru/articles/oklch-in-css-why-quit-rgb-hsl/
👉 @frontend_1
👍6❤1
Глубокое клонирование объектов в JavaScript, современный способ
https://www.builder.io/blog/structured-clone
👉 @frontend_1
https://www.builder.io/blog/structured-clone
👉 @frontend_1
👍6
Топ рекомендаций по Core Web Vitals на 2023 год
Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.
Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.
https://habr.com/ru/companies/timeweb/articles/714280/
👉 @frontend_1
Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals.
Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный аспект опыта взаимодействия пользователя с сайтом, измеряемый в полевых условиях и отражающий реальные действия по достижению критически важного результата, ориентированного на пользователя.
https://habr.com/ru/companies/timeweb/articles/714280/
👉 @frontend_1
👍8
Modern-errors
Библиотека для обработки ошибок в JavaScript/TypeScript
https://github.com/ehmicky/modern-errors
👉 @frontend_1
Библиотека для обработки ошибок в JavaScript/TypeScript
https://github.com/ehmicky/modern-errors
👉 @frontend_1
👍3
Как на практике работать над перфомансом веб-приложения: опыт Авто.ру
Последние полтора года я занимаюсь перформансом проекта Авто.ру. И сегодня хочу рассказать о концепции, к которой я пришла за это время, — как работать над перформансом, как искать проблемы и находить решения. Сначала расскажу немного истории и про саму концепцию, потом приведу примеры, а в конце перечислю инструменты, которые я использовала.
Примерно полтора года назад мне пришла задача. Если измерить производительность сайта Авто.ру с помощью Lighthouse, то мы получим определенное число. Его надо улучшить, чтобы оно стало как можно ближе к 100.
https://habr.com/ru/companies/jugru/articles/714656/
👉 @frontend_1
Последние полтора года я занимаюсь перформансом проекта Авто.ру. И сегодня хочу рассказать о концепции, к которой я пришла за это время, — как работать над перформансом, как искать проблемы и находить решения. Сначала расскажу немного истории и про саму концепцию, потом приведу примеры, а в конце перечислю инструменты, которые я использовала.
Примерно полтора года назад мне пришла задача. Если измерить производительность сайта Авто.ру с помощью Lighthouse, то мы получим определенное число. Его надо улучшить, чтобы оно стало как можно ближе к 100.
https://habr.com/ru/companies/jugru/articles/714656/
👉 @frontend_1
👍1
Использование CSS-селектора :is()
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/
👉 @frontend_1
https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/
👉 @frontend_1
👍3
Frontend meetup (Online)
1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения
2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.
3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.
4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером
🗓 12 июля, начало в 19:00 мск, Среда
🚀 Телеграмм канал с анонсами митапов
✅ Регистрация на мероприятие
1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения
2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.
3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.
4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером
🗓 12 июля, начало в 19:00 мск, Среда
🚀 Телеграмм канал с анонсами митапов
✅ Регистрация на мероприятие
🔥2
5 важных различий между ref() и reactive() в Vue
Если вы попали на эту статью, то, вероятно, имеете базовое представление о реактивности Vue.
Однако, как и я, вы, возможно, задаете себе вечный вопрос: каковы основные различия между ref() и reactive()? И когда использовать тот или иной метод?
https://dmitripavlutin.com/ref-reactive-differences-vue/
👉 @frontend_1
Если вы попали на эту статью, то, вероятно, имеете базовое представление о реактивности Vue.
Однако, как и я, вы, возможно, задаете себе вечный вопрос: каковы основные различия между ref() и reactive()? И когда использовать тот или иной метод?
https://dmitripavlutin.com/ref-reactive-differences-vue/
👉 @frontend_1
👍2
Подборка материалов для погружения в Angular: выбор сотрудников Selectel
При построении веб-сервисов наши фронтенд-разработчики используют Angular — один из топ-фреймворков с высокой скоростью разработки и низким порогом вхождения. Но несмотря на последнее, во время изучения могут возникнуть трудности с потоками, отписками и другими абстракциями. Поэтому мы попросили коллег порекомендовать полезные ресурсы, которые помогут в освоении этих тем.
https://habr.com/ru/companies/selectel/articles/713876/
👉 @frontend_1
При построении веб-сервисов наши фронтенд-разработчики используют Angular — один из топ-фреймворков с высокой скоростью разработки и низким порогом вхождения. Но несмотря на последнее, во время изучения могут возникнуть трудности с потоками, отписками и другими абстракциями. Поэтому мы попросили коллег порекомендовать полезные ресурсы, которые помогут в освоении этих тем.
https://habr.com/ru/companies/selectel/articles/713876/
👉 @frontend_1
👍3
Правда о производительности селекторов CSS
Если вы веб-разработчик, то, возможно, уже слышали, что некоторые селекторы CSS работают быстрее других. И вы, вероятно, надеетесь найти в этой статье список лучших селекторов для использования.
Ну, это не совсем так. Но потерпите, я обещаю, что к концу вы узнаете что-то новое о производительности селекторов CSS.
https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/
👉 @frontend_1
Если вы веб-разработчик, то, возможно, уже слышали, что некоторые селекторы CSS работают быстрее других. И вы, вероятно, надеетесь найти в этой статье список лучших селекторов для использования.
Ну, это не совсем так. Но потерпите, я обещаю, что к концу вы узнаете что-то новое о производительности селекторов CSS.
https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/
👉 @frontend_1
👍5
Forwarded from GitHub Сообщество
Optimizt
Это консольная утилита, помогающая подготавливать картинки для фронтенда.
Она умеет сжимать PNG, JPEG, GIF и SVG с потерями и без, а также создавать AVIF и WebP-версии для растровых изображений.
https://github.com/funbox/optimizt/blob/master/README.ru.md
👉 @Githublib
Это консольная утилита, помогающая подготавливать картинки для фронтенда.
Она умеет сжимать PNG, JPEG, GIF и SVG с потерями и без, а также создавать AVIF и WebP-версии для растровых изображений.
https://github.com/funbox/optimizt/blob/master/README.ru.md
👉 @Githublib
🔥4
Angular Internals: Как работает реактивность в Zone.js
Эта статья представляет собой углубленный взгляд на то, как работает Angular под капотом. Содержание статьи может быть непонятным, если вы еще не знакомы с JavaScript.
https://unicorn-utterances.com/posts/angular-internals-zonejs
👉 @frontend_1
Эта статья представляет собой углубленный взгляд на то, как работает Angular под капотом. Содержание статьи может быть непонятным, если вы еще не знакомы с JavaScript.
https://unicorn-utterances.com/posts/angular-internals-zonejs
👉 @frontend_1
Playful Programming
Angular Internals: How Reactivity Works with Zone.js
Reactivity is core to JavaScript frameworks; changing data should cause a re-render. How does this work in Angular? Let's dive into the Angular source code to see.
👍2
Градиентные тени на CSS
Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них.
https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
👉 @frontend_1
Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них.
https://css-tricks.com/different-ways-to-get-css-gradient-shadows/
👉 @frontend_1
👍4
Lit - это простая библиотека для создания быстрых и легких веб-компонентов.
https://github.com/lit/lit/
👉 @frontend_1
https://github.com/lit/lit/
👉 @frontend_1
👍4
Как создавать иконки сайтов в 2023 году — всё о favicon
Пришло время переосмыслить, как готовить набор фавиконов для современных браузеров, и прекратить безумие генераторов иконок. В настоящее время разработчикам фронтенда приходится иметь дело с 20+ статичными PNG-файлами только для того, чтобы отобразить крошечный логотип сайта во вкладке браузера или на сенсорном экране. Читайте далее, чтобы узнать, как использовать более разумный подход и принять минимальный набор иконок, который соответствует большинству современных потребностей.
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
👉 @frontend_1
Пришло время переосмыслить, как готовить набор фавиконов для современных браузеров, и прекратить безумие генераторов иконок. В настоящее время разработчикам фронтенда приходится иметь дело с 20+ статичными PNG-файлами только для того, чтобы отобразить крошечный логотип сайта во вкладке браузера или на сенсорном экране. Читайте далее, чтобы узнать, как использовать более разумный подход и принять минимальный набор иконок, который соответствует большинству современных потребностей.
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs
👉 @frontend_1
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Анимация пролета камеры при прокрутке с помощью Theatre.js и React Three Fiber
В этом уроке мы покажем, как с помощью Theatre.js и React Three Fiber анимировать камеру, пролетающую через 3D-сцену при прокрутке пользователем.
https://tympanus.net/codrops/2023/02/14/animate-a-camera-fly-through-on-scroll-using-theatre-js-and-react-three-fiber/
👉 @frontend_1
В этом уроке мы покажем, как с помощью Theatre.js и React Three Fiber анимировать камеру, пролетающую через 3D-сцену при прокрутке пользователем.
https://tympanus.net/codrops/2023/02/14/animate-a-camera-fly-through-on-scroll-using-theatre-js-and-react-three-fiber/
👉 @frontend_1
👍5
💻 БЕСПЛАТНЫЕ КУРСЫ ПРОГРАММИРОВАНИЯ ДЛЯ ШКОЛЬНИКОВ 8-11 КЛАССОВ
ДОСТУПНЫЕ ПРОГРАММЫ ОБУЧЕНИЯ:
⭐ Разработка на Python
⭐ Разработка на C++
⭐ Разработка на JavaScript
⭐ Разработка на Java
⭐ Разработка многостраничного сайта на PHP
⭐ Разработка мобильного приложения на Java
IT-разработка - точно то, что нужно, если:
✔️ Школьник увлекается играми
✔️ Школьнику интересно устройство гаджетов
✔️ Школьнику нравятся всевозможные роботы и конструкторы
Для получения подробной информации переходите по ссылке
Реклама. Университет «Синергия» ИНН 7729152149
ДОСТУПНЫЕ ПРОГРАММЫ ОБУЧЕНИЯ:
⭐ Разработка на Python
⭐ Разработка на C++
⭐ Разработка на JavaScript
⭐ Разработка на Java
⭐ Разработка многостраничного сайта на PHP
⭐ Разработка мобильного приложения на Java
IT-разработка - точно то, что нужно, если:
✔️ Школьник увлекается играми
✔️ Школьнику интересно устройство гаджетов
✔️ Школьнику нравятся всевозможные роботы и конструкторы
Для получения подробной информации переходите по ссылке
Реклама. Университет «Синергия» ИНН 7729152149
👍4💔1