🧐Микровселенная безумия, или Как устроены микрофронтенды в Dodo
В этой статье автор расскажет о процессе разработки и доставки микрофронтендов с использованием Single-spa, SystemJS и import-map-overrides, а также о подходе к Continuous Delivery микрофронтендов.
Читать...
Original post link: t.me/frontendnoteschannel/3279
Forwarded and filtered by @smartfeed_bot
В этой статье автор расскажет о процессе разработки и доставки микрофронтендов с использованием Single-spa, SystemJS и import-map-overrides, а также о подходе к Continuous Delivery микрофронтендов.
Читать...
Original post link: t.me/frontendnoteschannel/3279
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 14 messages
Today you received: 13 messages
Our filtering prevented you from: 1 messages
Top 3 source channels:
Веб-страница: 6 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 14 messages
Today you received: 13 messages
Our filtering prevented you from: 1 messages
Top 3 source channels:
Веб-страница: 6 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Создаём генератор персонажа
Этот codepen-проект Kodama Generator показывает необычную стороны возможностей CSS и JavaScript для создания персонажей с рандомизацией некоторых деталей.
Исходники: https://codepen.io/pavlovsk/pen/rNYwKeo
#codepen
Original post link: t.me/tproger_web/4343
Forwarded and filtered by @smartfeed_bot
Этот codepen-проект Kodama Generator показывает необычную стороны возможностей CSS и JavaScript для создания персонажей с рандомизацией некоторых деталей.
Исходники: https://codepen.io/pavlovsk/pen/rNYwKeo
#codepen
Original post link: t.me/tproger_web/4343
Forwarded and filtered by @smartfeed_bot
codepen.io
Kodama Generator
...
Forwarded from Senior Frontend - javascript, html, css
Экстремальные практики программирования
Экстремальное программирование — это одна из гибких методологий разработки. Понятие относится скорее к менеджменту, построению процессов, но оно тесно переплетено с непосредственно разработкой: техническими возможностями и конкретными технологиями, которые помогают соблюдать практики этой методологии.
Рассмотрим некоторые практики:
Разработка через тестирование
Эта практика подразумевает, что разработчики сначала пишут тесты, а потом под эти тесты пишется программное обеспечение. Наличие автотестов, которые запускают после каждого изменения кода, — это критически важный момент. Без этого уже тяжело представить взаимодействие с большой кодовой базой.
«Игра в планирование»
Сложно запланировать большую систему на несколько месяцев вперед. Как правило, когда команда начинает работать, план быстро начинает расходиться с реальностью. Или все продолжают придерживаться плана, но едут не туда и получают не такой качественный результат.
Здесь же идея в том, чтобы планировать более «несерьёзно», меньшими итерациями, — не бояться что-то зафейлить, быстрее адаптироваться к меняющимся условиям. Команда обсуждает, что они могут сделать в рамках спринта, условно пары недель, это позволяет им быть более гибкими («agile»).
«Заказчик всегда рядом»
Классическая модель работы выглядит так: заказчик ставит задачу, бизнес-аналитики собирают требования, исполнители реализуют проект и приносят результат на утверждение. Часто это не самая удачная стратегия.
Принцип «заказчик всегда рядом» подразумевает, что команда контактирует с заказчиком супермаленькими интервалами, показывая ему процесс разработки в мелочах. Это помогает вовремя всё подправить и избежать ситуации, когда при сдаче проекта оказывается, что требования поняли некорректно и принесли не тот результат.
Парное программирование
Вместо того, чтобы разработчик работал в одиночку, а потом показывал результат коллегам или продакт-оунеру, процесс построен по аналогии с гонками: когда есть драйвер и штурман.
- Качество кода, как правило, выше за счёт двух моментов:
- Люди — «социальные животные»: когда за ними наблюдают, они стараются сильнее. Конечно, при условии, что наблюдение экологичное и не создаёт стресса.
Двое экспертов могут додуматься до вещей, к которым не прийти в одиночку. Они могут замахнуться на более сложные решения и, возможно, даже реализовать их быстрее.
👉 @seniorFront
Экстремальное программирование — это одна из гибких методологий разработки. Понятие относится скорее к менеджменту, построению процессов, но оно тесно переплетено с непосредственно разработкой: техническими возможностями и конкретными технологиями, которые помогают соблюдать практики этой методологии.
Рассмотрим некоторые практики:
Разработка через тестирование
Эта практика подразумевает, что разработчики сначала пишут тесты, а потом под эти тесты пишется программное обеспечение. Наличие автотестов, которые запускают после каждого изменения кода, — это критически важный момент. Без этого уже тяжело представить взаимодействие с большой кодовой базой.
«Игра в планирование»
Сложно запланировать большую систему на несколько месяцев вперед. Как правило, когда команда начинает работать, план быстро начинает расходиться с реальностью. Или все продолжают придерживаться плана, но едут не туда и получают не такой качественный результат.
Здесь же идея в том, чтобы планировать более «несерьёзно», меньшими итерациями, — не бояться что-то зафейлить, быстрее адаптироваться к меняющимся условиям. Команда обсуждает, что они могут сделать в рамках спринта, условно пары недель, это позволяет им быть более гибкими («agile»).
«Заказчик всегда рядом»
Классическая модель работы выглядит так: заказчик ставит задачу, бизнес-аналитики собирают требования, исполнители реализуют проект и приносят результат на утверждение. Часто это не самая удачная стратегия.
Принцип «заказчик всегда рядом» подразумевает, что команда контактирует с заказчиком супермаленькими интервалами, показывая ему процесс разработки в мелочах. Это помогает вовремя всё подправить и избежать ситуации, когда при сдаче проекта оказывается, что требования поняли некорректно и принесли не тот результат.
Парное программирование
Вместо того, чтобы разработчик работал в одиночку, а потом показывал результат коллегам или продакт-оунеру, процесс построен по аналогии с гонками: когда есть драйвер и штурман.
- Качество кода, как правило, выше за счёт двух моментов:
- Люди — «социальные животные»: когда за ними наблюдают, они стараются сильнее. Конечно, при условии, что наблюдение экологичное и не создаёт стресса.
Двое экспертов могут додуматься до вещей, к которым не прийти в одиночку. Они могут замахнуться на более сложные решения и, возможно, даже реализовать их быстрее.
👉 @seniorFront
🔮Вдали от Webpack, или Как мы в Dodo микрофронтенды на Vite переводили
В этой статье мы рассмотрим переход с Webpack на Vite и Vitest, обсудим преимущества и недостатки их использования, а также опишем решение проблем, возникающих при переходе.
Читать...
Original post link: t.me/frontendnoteschannel/3280
Forwarded and filtered by @smartfeed_bot
В этой статье мы рассмотрим переход с Webpack на Vite и Vitest, обсудим преимущества и недостатки их использования, а также опишем решение проблем, возникающих при переходе.
Читать...
Original post link: t.me/frontendnoteschannel/3280
Forwarded and filtered by @smartfeed_bot
Вставляем смайлики в JS-скрипт
UTF-16 кодирует символы в виде последовательности 16-битных слов, это позволяет записывать символы Юникода в диапазонах от U+0000 до U+D7FF и от U+E000 до U+10FFFF (общим количеством 1 112 064). Если требуется представить в UTF-16 символ с кодом больше U+FFFF, то используются два слова: первая часть суррогатной пары (в диапазоне от 0xD800 до 0xDBFF) и вторая (от 0xDC00 до 0xDFFF).
Подробнее про эмодзи можно почитать здесь.
#трюки
Original post link: t.me/senior_front/1850
Forwarded and filtered by @smartfeed_bot
UTF-16 кодирует символы в виде последовательности 16-битных слов, это позволяет записывать символы Юникода в диапазонах от U+0000 до U+D7FF и от U+E000 до U+10FFFF (общим количеством 1 112 064). Если требуется представить в UTF-16 символ с кодом больше U+FFFF, то используются два слова: первая часть суррогатной пары (в диапазоне от 0xD800 до 0xDBFF) и вторая (от 0xDC00 до 0xDFFF).
Подробнее про эмодзи можно почитать здесь.
#трюки
Original post link: t.me/senior_front/1850
Forwarded and filtered by @smartfeed_bot
🐙 JavaScript Testing Best Practices – сборник материалов по тестированию приложений. Есть примеры кода и перевод на многие языки мира.
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1652
Forwarded and filtered by @smartfeed_bot
Сайтодел | #репозиторий #github
Original post link: t.me/sitodel/1652
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Star Trails with options
Звёзды генерируются и анимируются на чистом JS.
👉 @seniorFront
Original post link: t.me/seniorFront/3786
Forwarded and filtered by @smartfeed_bot
Звёзды генерируются и анимируются на чистом JS.
👉 @seniorFront
Original post link: t.me/seniorFront/3786
Forwarded and filtered by @smartfeed_bot
🎃Сравниваем структуры хоть и глубоко, но быстро
В этой статье вы узнаете о библиотеке $mol_compare_deep, которая позволяет сравнивать произвольные структуры, даже содержащие циклические ссылки.
Читать...
Original post link: t.me/frontendnoteschannel/3281
Forwarded and filtered by @smartfeed_bot
В этой статье вы узнаете о библиотеке $mol_compare_deep, которая позволяет сравнивать произвольные структуры, даже содержащие циклические ссылки.
Читать...
Original post link: t.me/frontendnoteschannel/3281
Forwarded and filtered by @smartfeed_bot
5 сборщиков модулей для приложений Node.js
Составили подборку из пять сборщиков модулей для приложений Node.js, указали плюсы и минусы каждого из них и рассказали, как их установить.
Смотреть статью
Original post link: t.me/senior_front/1852
Forwarded and filtered by @smartfeed_bot
Составили подборку из пять сборщиков модулей для приложений Node.js, указали плюсы и минусы каждого из них и рассказали, как их установить.
Смотреть статью
Original post link: t.me/senior_front/1852
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 8 messages
Our filtering prevented you from: 1 messages
Top 3 source channels:
Senior Frontend Developer: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
Frontender's notes [ru]: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 9 messages
Today you received: 8 messages
Our filtering prevented you from: 1 messages
Top 3 source channels:
Senior Frontend Developer: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
Frontender's notes [ru]: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Оператор cache: в поиске Google перестанет работать в ближайшее время
Оператор cache: нужен, чтобы найти кэшированную версию страницы, генерируемую Google, даже если не удаётся перейти на сайт.
Дэнни Салливан, представитель Google SearchLiaison, рассказал об удалении возможности просмотреть кэшированную версию страницы через добавление «cache:» к URL-адресу в поиске.
Как отмечает Салливан, оператор cache: — одна из старейших функций Google, необходимая, чтобы пользователи не теряли доступ к данным, когда сайт недоступен. Сейчас таких ситуаций практически не происходит, поэтому было решено от функции отказаться.
Салливан надеется, что в будущем Google договорится с Internet Archive об интеграции ссылок на копии сайтов из The Wayback Machine в раздел «Об этом результате». А пока будет так.
#интернет #google
Original post link: t.me/tproger_web/4344
Forwarded and filtered by @smartfeed_bot
Оператор cache: нужен, чтобы найти кэшированную версию страницы, генерируемую Google, даже если не удаётся перейти на сайт.
Дэнни Салливан, представитель Google SearchLiaison, рассказал об удалении возможности просмотреть кэшированную версию страницы через добавление «cache:» к URL-адресу в поиске.
Как отмечает Салливан, оператор cache: — одна из старейших функций Google, необходимая, чтобы пользователи не теряли доступ к данным, когда сайт недоступен. Сейчас таких ситуаций практически не происходит, поэтому было решено от функции отказаться.
Салливан надеется, что в будущем Google договорится с Internet Archive об интеграции ссылок на копии сайтов из The Wayback Machine в раздел «Об этом результате». А пока будет так.
#интернет #google
Original post link: t.me/tproger_web/4344
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Cube Effect Slider
Куб сделан при помощи библиотеки Swiper. Частицы на фоне генерируются библиотекой tsparticles.
👉 @seniorFront
Original post link: t.me/seniorFront/3787
Forwarded and filtered by @smartfeed_bot
Куб сделан при помощи библиотеки Swiper. Частицы на фоне генерируются библиотекой tsparticles.
👉 @seniorFront
Original post link: t.me/seniorFront/3787
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Dynamic CSS
Динамическое изменение цвета анимированных элементов при перемещении курсора мыши.
https://codepen.io/sandrina-p/pen/axVeGg
Original post link: t.me/senior_front/1853
Forwarded and filtered by @smartfeed_bot
Динамическое изменение цвета анимированных элементов при перемещении курсора мыши.
https://codepen.io/sandrina-p/pen/axVeGg
Original post link: t.me/senior_front/1853
Forwarded and filtered by @smartfeed_bot
Как научиться анимациям в CSS за 20 минут?
В CSS существует два способа создания анимаций: переходы (transitions) и анимации (animations). В статье рассказываем, на что способен каждый из них: https://tproger.ru/articles/kak-nauchitsya-animaciyam-v-css-za-2-minut
#css
Original post link: t.me/tproger_web/4345
Forwarded and filtered by @smartfeed_bot
В CSS существует два способа создания анимаций: переходы (transitions) и анимации (animations). В статье рассказываем, на что способен каждый из них: https://tproger.ru/articles/kak-nauchitsya-animaciyam-v-css-za-2-minut
#css
Original post link: t.me/tproger_web/4345
Forwarded and filtered by @smartfeed_bot
Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в документации MDN, а на просторах интернета полно статей на этот счет.
Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS. В качестве испытуемого возьмем один из самых распространенных, на сегодняшний день, движок V8 от компании Google.
Читать...
Original post link: t.me/frontendnoteschannel/3283
Forwarded and filtered by @smartfeed_bot
Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS. В качестве испытуемого возьмем один из самых распространенных, на сегодняшний день, движок V8 от компании Google.
Читать...
Original post link: t.me/frontendnoteschannel/3283
Forwarded and filtered by @smartfeed_bot
🗃Доменные имена с валидным SSL для локальных Docker-контейнеров
В этой статье можно узнать о новом сервисе, который позволяет использовать доменные имена с валидным SSL для локальных Docker-контейнеров.
Читать...
Original post link: t.me/frontendnoteschannel/3284
Forwarded and filtered by @smartfeed_bot
В этой статье можно узнать о новом сервисе, который позволяет использовать доменные имена с валидным SSL для локальных Docker-контейнеров.
Читать...
Original post link: t.me/frontendnoteschannel/3284
Forwarded and filtered by @smartfeed_bot
Media is too big
VIEW IN TELEGRAM
Cursor Follow Navigation Menu
В этом видео создаётся оригинальный эффект при наведении на меню при помощи CSS и JS.
👉 @seniorFront
Original post link: t.me/seniorFront/3788
Forwarded and filtered by @smartfeed_bot
В этом видео создаётся оригинальный эффект при наведении на меню при помощи CSS и JS.
👉 @seniorFront
Original post link: t.me/seniorFront/3788
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 7 messages
Our filtering prevented you from: 2 messages
Top 3 source channels:
Веб-страница: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Today the bot processed: 9 messages
Today you received: 7 messages
Our filtering prevented you from: 2 messages
Top 3 source channels:
Веб-страница: 3 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Mini Music Player – стильный музыкальный плеер, написанный на Vue.js. Тут можно переключать песни, добавлять их в избранное и смотреть ссылки с информацией.
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1653
Forwarded and filtered by @smartfeed_bot
Сайтодел | #сниппет #css
Original post link: t.me/sitodel/1653
Forwarded and filtered by @smartfeed_bot