Неочевидные возможности SVG в современном фронтенде
Константин Остров

В своем докладе Константин рассказал:
- о позиционировании объектов внутри SVG и о том, как им овладеть;
- о внедрении динамических элементов внутрь SVG;
- о расчете координат объектов вне box модели;
- о возможности влиять на содержимое SVG средствами CSS и JS, ограничениях и способах решения;
- о производительности SVG в вебе и о том, как ее можно улучшить.

00:00 Начало, представление спикера
00:49 Применение SVG на проекте с многоквартирными домами
02:44 Что такое SVG и в чем его преимущества
03:52 Задача: позиционирование внутри SVG
05:44 Задача: внедрение динамических элементов внутрь SVG
07:23 Задача: расчет координат вне BOX модели
08:23 Влияем на SVG с помощью JS и CSS
11:47 Производительность и что на нее влияет
14:12 Подведем итоги
15:11 Вопросы из зала

источник

👉 @frontend_1

Может уже хватит сидеть на junior с оплатой 50К в месяц?
Открою тебе тайну – в нашей сфере можно уже на старте зарабатывать от 120К в месяц спокойно. Знаешь, что для этого нужно? Прокачать свои навыки на реальном проекте и сделать правильное резюме.

Записывайся на онлайн-обучение «FrontEnd-разработчик» от школы IT Mentor с оплатой ПОСЛЕ трудоустройства и уже через полгода выйди на новый уровень жизни. Учись сейчас – плати потом! ❗

Что тебя ждет?
✔Длительность обучения 6-8 месяцев;
✔Контроль и поддержка опытного ментора во время обучения и старта работы;
✔Опыт в реальном проекте под руководством тимлида;
✔Оплата обучения ПОСЛЕ трудоустройства. Кстати, если не устроишься на работу в IT – ничего не должен! Поэтому вообще ничего не теряешь.

Хватит ждать, переходи по ссылке и записывайся в школу IT mentor прямо сейчас

❗Старт следующего потока уже в сентябре! Мест осталось мало!

✅ У нас только актуальные современные технологии. Наши менторы - это действующие Senior-разработчики, которые дают для изучения только релевантный технологический стек: GIT (GITHUB, GITLAB), Основы HTML, CSS3, JavaScript, TypeScript, React, Redux.

🤝 На всех этапах ты будешь учиться работать в команде, решать множество вопросов и задач совместно с другими учениками, чтобы эффективно прокачивать soft-skills.

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

Мы даем только актуальные материалы, которые соответствуют твоему реальному уровню знаний.

Чего ты ждешь? Переходи по ссылке, оставляй заявку!

А если ты нормально знаешь английский – вообще nice 👍, будем тебя рекомендовать в иностранные компании с возможностью релокации за границей.

Юлия Миоцен: Топ-10 CSS-свойств аниматора

источник

👉 @frontend_1

Как работает веб-браузер (с картинками)

Браузеры стали частью нашей повседневной жизни. Но задумывались ли вы когда-нибудь о том, как они на самом деле работают?

Эта статья приоткроет завесу магии, скрывающуюся за кулисами веб-браузеров.

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

👉 @frontend_1

evil-icons

Простой и чистый пакет SVG-иконок с кодом для поддержки Rails, Sprockets, Node.js, Gulp, Grunt и CDN

https://github.com/evil-icons/evil-icons

👉 @Githublib

Переходы между HTML-тегами. Еще одна причина для валидации разметки

Если вы занимаетесь созданием веб-приложений, то, скорее всего, пишете HTML. Это может быть JSX, Markdown или даже Dart в вашем редакторе кода, но в конечном итоге он будет скомпилирован в некую разметку. И чем дальше от реальных тегов, тем меньше представления о том, что туда попадает. Для большинства разработчиков это просто артефакт, как бинарный файл.

https://pepelsbey.dev/articles/jumping-html-tags/


👉 @frontend_1

Хотите стать разработчиком, но не определились с языком программирования?

Ждем вас на бесплатном практическом вебинаре 7 сентября в 19:00 по мск.

✔️ Разбираем профессию “Фронтенд-разработчик” и кому она подходит.
✔️ Пробуем на практике: вместе пишем мини-игру на JS.
✔️ Говорим о первой работе для новичков без опыта.

🎁 Дарим “Карту компетенций”, гайд «Как опубликовать страницу в интернете при помощи GitHub Pages» и «Как заговорить на сленге IT-специалистов», а еще бонусы на обучение профессии!

Трюки при работе с SVG

У SVG очень много трюков в рукаве. Это действительно полнофункциональный API для рисования, буквально созданный для Web, но мало кто из нас по-настоящему понимает его и не обращается к нему достаточно часто. Черт возьми, я даже написал об этом книгу. В то время просто заставить людей использовать SVG для иконок казалось нелегкой задачей, но, к счастью, я думаю, что эта задача уже решена.

Давайте посмотрим на несколько классных примеров SVG, которые попали ко мне на стол в последнее время.

https://blog.codepen.io/2023/08/28/chris-corner-even-more-svg-tricks/


👉 @frontend_1

Совет по CSS 💡

Возможно, вы не знаете об этом очень простом способе усечения многострочного текста с помощью только CSS 🤩.

👉 @frontend_1

Перехват маршрутов в @ nextjs 13.3

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

https://pingthread.com/thread/1644130884323536899

👉 @frontend_1

Совет по Javascript 💡

Простая генерация случайных целых чисел в диапазоне с помощью этой однострочной функции

👉 @frontend_1

Совет по CSS 💡

Создайте креативный текст с помощью всего 3 строк CSS-кода ✨

👉 @frontend_1

React, Visualized

Интерактивное руководство по основным концепциям React

Для того чтобы по-настоящему оценить React, необходимо понять исторический контекст его создания. От jQuery до Backbone и AngularJS - каждая эпоха по-своему вдохновляла React.

https://react.gg/visualized

👉 @frontend_1

Подборка Telegram каналов для программистов

Системное администрирование 📌
https://yangx.top/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://yangx.top/sysadminof Книги для админов, полезные материалы
https://yangx.top/i_odmin Все для системного администратора
https://yangx.top/i_odmin_book Библиотека Системного Администратора
https://yangx.top/i_odmin_chat Чат системных администраторов
https://yangx.top/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://yangx.top/sysadminoff Новости Линукс Linux


https://yangx.top/tikon_1 Новости высоких технологий, науки и техники💡
https://yangx.top/mir_teh Мир технологий (Technology World)

https://yangx.top/rust_lib Полезный контент по программированию на Rust
https://yangx.top/golang_lib Библиотека Go (Golang) разработчика

https://yangx.top/itmozg Программисты, дизайнеры, новости из мира IT.
https://yangx.top/phis_mat Обучающие видео, книги по Физике и Математике

https://yangx.top/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://yangx.top/nodejs_lib Подборки по Node js и все что с ним связано
https://yangx.top/ruby_lib Библиотека Ruby программиста

1C разработка 📌
https://yangx.top/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://yangx.top/cpp_lib Библиотека C/C++ разработчика
https://yangx.top/cpp_knigi Книги для программистов C/C++
https://yangx.top/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://yangx.top/pythonofff Python академия. Учи Python быстро и легко🐍
https://yangx.top/BookPython Библиотека Python разработчика
https://yangx.top/python_real Python подборки на русском и английском
https://yangx.top/python_360 Книги по Python Rus

Java разработка 📌
https://yangx.top/BookJava Библиотека Java разработчика
https://yangx.top/java_360 Книги по Java Rus
https://yangx.top/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://yangx.top/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://yangx.top/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://yangx.top/developer_mobila Мобильная разработка
https://yangx.top/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://yangx.top/frontend_1 Подборки для frontend разработчиков
https://yangx.top/frontend_sovet Frontend советы, примеры и практика!
https://yangx.top/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://yangx.top/game_devv Все о разработке игр

Вакансии 📌
https://yangx.top/sysadmin_rabota Системный Администратор
https://yangx.top/progjob Вакансии в IT

Чат программистов📌
https://yangx.top/developers_ru

Библиотеки 📌
https://yangx.top/book_for_dev Книги для программистов Rus
https://yangx.top/programmist_of Книги по программированию
https://yangx.top/proglb Библиотека программиста
https://yangx.top/bfbook Книги для программистов
https://yangx.top/books_reserv Книги для программистов

БигДата, машинное обучение 📌
https://yangx.top/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning

Программирование 📌
https://yangx.top/bookflow Лекции, видеоуроки, доклады с IT конференций
https://yangx.top/coddy_academy Полезные советы по программированию

QA, тестирование 📌
https://yangx.top/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://yangx.top/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://yangx.top/thehaking Канал о кибербезопасности
https://yangx.top/xakep_1 Статьи из "Хакера"

Книги, статьи для дизайнеров 📌
https://yangx.top/ux_web Статьи, книги для дизайнеров

Английский 📌
https://yangx.top/UchuEnglish Английский с нуля

Математика 📌
https://yangx.top/Pomatematike Канал по математике

Excel лайфхак📌
https://yangx.top/Excel_lifehack

Совет по CSS 💡

Код в одну строку, чтобы сделать iframe отзывчивым 🤩

👉 @frontend_1

Отменить нельзя продолжить

Как описать асинхронную цепочку запросов и не сломать всё? Просто? Не думаю!

Я автор менеджера состояния Reatom и сегодня хочу вам рассказать про главную киллер-фичу redux-saga и rxjs и как теперь её можно получить проще, а так же про грядущие изменения в стандарте ECMAScript.

Речь пойдёт об автоматической отмене конкурентных асинхронных цепочек — обязательном свойстве при работе с любым REST API и другими более общими асинхронными последовательными операциями.

https://habr.com/ru/companies/ruvds/articles/725208/

👉 @frontend_1

Css em vs rem

👉 @frontend_1

Принцип работы async/await в JavaScript

Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание. Некоторым ветеранам JS известно, что async/await – это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в данной статье.

Rus https://habr.com/ru/companies/ruvds/articles/759772/

Eng https://akashhamirwasia.com/blog/internals-of-async-await-in-javascript/

👉 @frontend_1

Совет по Javascript 💡

Легко выбрать последний элемент массива с помощью этого нового метода 🤩

👉 @frontend_1

Овладейте всем потенциалом анимирования с Vue

Vue позволяет разработчикам писать более гибкий и переиспользуемый код за счёт наличия дополнительных возможностей для организации компонентов. И одной из областей применения этих возможностей являются анимации. В текущей статье мы разберём использование Composition API для создания анимаций в Vue с помощью CSS и JS библиотеки GSAP (GreenSock Animation Platform).

Rus https://habr.com/ru/companies/ruvds/articles/728746/

Eng https://medium.com/@khalidoghli7/unleashing-your-power-with-vue-animation-33a1cd0aa9c7

👉 @frontend_1