29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Необычный hover эффект для изображений
Пошаговый видео туториал по созданию сложного noise эффекта.
https://www.youtube.com/watch?v=z1wZp4jV4cQ&ab_channel=Hyperplexed
Tech MeetUp от Сбера в Санкт-Петербурге — крутая возможность узнать много нового о frontend, backend и QA, познакомиться с топовыми спикерами и пообщаться с интересными людьми 👨💻
👉 Какие темы будем обсуждать?
Наши лучшие специалисты расскажут о магии, которая происходит внутри Сбера: как нажатие одной кнопки запускает сотни процессов, как правильно тестировать действия, кто стоит на страже багов.
Еще они поделятся, с какими проблемами столкнулись при использовании виртуальных машин в дата-центрах и поговорят об использовании Mobx State Tree при разработке React-приложений
👉 Что еще интересного будет на митапе?
Нетворкинг, Q&A-сессии и кофе-брейк.
👉 Где и когда встречаемся?
25 апреля в 18:30 в единственном IT-баре в Санкт-Петербурге — Failover Bar по адресу: 7-я линия Васильевского острова, 42.
Узнать подробности и зарегистрироваться!
Где и как хранить большие данные в браузере?
Видео о том, как IndexedDB может помочь с хранением данных на фронте и как ее использовать.
https://youtu.be/WkMqt6Tm7sM
#css #frontend
Больше контроля над селектором :nth-child() с помощью синтаксиса of S
Новое в CSS Selectors Level 4 - возможность опционально передавать список селекторов в :nth-child() и :nth-last-child().
⭐️◽️◽️◽️◽️
📖Читать
Двусторонний дата биндинг в 15 строчек на чистом JS
Как добавить реактивность без использования фреймворков? Попробуем сделать это с Proxy.
https://gomakethings.com/two-way-data-binding-and-reactivity-with-15-lines-of-vanilla-javascript/
Как красиво отобразить многострочный текст?
Ахмад Шадид рассказывает о настройке красивого отображения текста с помощью свойства text-wrap:balance.
https://ishadeed.com/article/css-text-wrap-balance/
Публикуем свой сайт бесплатно на GitHub pages
Простая инструкция для тех, кто хочет захостить свое приложение на GitHub pages.
https://dev.to/pvishnuprasaath/host-react-app-in-github-pages-35p9
Круговые зависимости в Node.js
И как с ним справляться с помощью пакета madge.
https://dev.to/successgilli/circular-dependency-in-nodejs-and-nestjs-3e1d
Как обеспечить безопасность веб-приложений?
Руководство по стратегиям аутентификации для разработчиков.
https://dev.to/ma7moud3bas/how-to-secure-the-web-a-comprehensive-guide-to-authentication-strategies-for-developers-48od
Используем pre-render в React приложении с react-snap
Что такое pre-render и в чем его отличие от SSR
https://blog.logrocket.com/pre-rendering-react-app-react-snap/
Кроссбраузерная поддержка двух фич: Push Notification и importmap
Safari, FireFox, Chrome и даже Edge
Подробнее про Push Notifications
Подробнее про importmap
Команда Тинькофф и Angular Moscow соберет фронтенд-комьюнити в Москве 🅰️
Ребята из Тинькофф, «Европлана» и Bimeister проведут митап 12 апреля. На встрече обсудят:
— как выводить продукты на новые рынки i18n;
— как создавать собственный инструмент для просмотра документов;
— как мигрировать с Angular CLI на Nx.
После докладов проведут неформальный нетворкинг: обменяются кейсами с участниками, обсудят технологии и просто поболтают о полезном.
Кстати, для тех, кто не сможет приехать в Москву, будет трансляция. Не забудьте зарегистрироваться и позвать с собой коллег:
— ссылка для тех, кто планирует встретиться с нами в Москве: https://l.tinkoff.ru/angular.meetup.tinkoff.ofline.moscow
— линк для тех, кто планирует посмотреть онлайн: https://l.tinkoff.ru/angular.meetup.tinkoff.online.all
Запускаем Github actions локально
Для отладки и тестирования своего workflow удобно делать это на локальной машине. Показываем, как это сделать с помощью пакета act.
https://dev.to/ken_mwaura1/run-github-actions-on-your-local-machine-bdm
Мое первое расширение для Firefox
Николас Франкель делится опытом создания расширения для автоматического добавления карточек в Trello.
https://dev.to/nfrankel/my-first-firefox-extension-21bf
Создайте навык Алисы 💡
Алиса — виртуальный голосовой помощник. Она умеет ставить музыку, сообщать погоду, говорить шёпотом и даже заказывать продукты из магазина.
И это не предел — постоянно появляются новые сценарии использования. Их может добавлять не только команда Яндекса, но и все желающие — от разработчиков до простых пользователей.
Чтобы создать навык Алисы быстро и просто, используйте serverless-решения Yandex Cloud:
— все необходимые компоненты и технологии в рамках одной платформы;
— использование функций Cloud Functions для навыков Алисы не тарифицируется;
— управление сервером, администрирование, обновление ПО и интеграцию Yandex Cloud берёт на себя;
— автомасштабируемое окружение справится с любыми нагрузками, в том числе нерегулярными и непостоянными;
— доступна подробная документация, пошаговые инструкции и вебинары о создании навыков Алисы в экосистеме serverless.
Узнайте больше и создавайте навыки Алисы с помощью serverless-решений ➡️
Делаем сайти-визитку на коленке за 20 минут
Простой сайт на NextJS + деплой на vercel.
https://www.youtube.com/watch?v=Xk9-rWLcgj4
Можете ли вы сделать красивую обводку текста на CSS?
Рассмотрим варианты стилизации текста с помощью CSS и SVG.
https://blog.logrocket.com/create-beautiful-stroked-text-css/
Пиксельный эффект перехода между страницами
Демо
Github
https://tympanus.net/codrops/2023/04/05/ideas-for-pixel-page-transitions/
Можно бесконечно смотреть на три вещи: как течет вода, горит огонь и фронтендеры пилят монолит
Ребята из банды фронтендов TeamSnack решили раз и навсегда разобраться в подходах к микросервисам. Сравнивать будут Single-spa(SystemJS) и Webpack Module Federation. Обещают живое общение с едой и напитками, а также интерактив в Miro с рабочими схемами, которые можно потом протестировать в работе.
Когда: 14 апреля, 19:00 - 21:00
Где: ценители ламповой атмосферы могут приехать в офис Cloud (Москва, 2-я Звенигородская улица, 28), а для закоренелых удаленщиков доступен онлайн-формат в Telegram-канале сообщества.
Все детали можно узнать у самой команды TeamSnack: /channel/+UVJdDqb9YvU3NWMy
Реклама. Рекламодатель: ООО «Облачные технологии». erid: LatgBzuon
Поверхностное и глубокое копирование объектов JS
В чем разница и как реализуются методы копирования объектов в JavaScript.
https://web.dev/structured-clone/
Generics в TypeScript
Что такое Generics и как их использовать в классах и интерфейсах.
https://levelup.gitconnected.com/generics-in-typescript-ea1c6f41d5c1
Пишем крестики-нолики
Пошаговый туториал по созданию игры
▫️на чистом HTML/CSS/JS
▫️с добавлением TypeScript
▫️c рефакторингом в React приложение
https://www.youtube.com/watch?v=MsnQ5uepIaE
Это — Дмитрий Безуглый, у него огромный опыт во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?
Дима участвовал в принятии решений по разработке на все команды Вконтакте, с нуля запустил рекламный кабинет для новичков и выстроил множество процессов в команде как тимлид. А если вы используете Яндекс.Трекер, то знайте, его интерфейсы – тоже работа Димы.
Сейчас Дима — CTO Chrome Extension Frogly. Сервис помогает в изучении иностранных языков.
Диме нравится передавать свой опыт другим — у него был бесплатный курс, личные консультации. Теперь он собрал весь свой опыт воедино и вместе с друзьями сделал программу с огромным количеством практики и инсайтов индустрии.
Если вы junior+ фронтендер и хотите научиться работать над масштабными проектами, вам сюда!
Записывайтесь на курс до 17 апреля, а по промокоду FRONTENDDEV19 вы получите скидку 10%.
5 крутых инструментов для работы с JSON
https://blog.logrocket.com/5-useful-json-tools-improve-productivity/
Выпуск Kolesa Podkast о frontend разработке
Kolesa Podkast - подкаст о казахстанском IT.
Вместе с гостями ребята обсудили технологии и ключевые языки программирования, как выглядит и куда движется современный frontend, а также начало карьеры и развитие разработчика.
Послушать можно тут:
— Youtube
— Apple Podcasts
— Яндекс.Музыка
Что такое source maps?
Как минифицировать и разбираться в коде с помощью source maps? Плюс несколько примеров по работе с расширениями для source maps.
https://web.dev/source-maps/
Мок-интервью на позицию junior frontend c упором на лайвкодинг
https://www.youtube.com/watch?v=9nBbRK-Gfjg
Глубокое погружение в CSS Grid Minmax
Разбираемся с возможностями функции minmax при работе с гридами.
https://ishadeed.com/article/css-grid-minmax/
Prop drilling в React
Что это такое и как с этим бороться.
https://dev.to/codeofrelevancy/what-is-prop-drilling-in-react-3kol
Руководство по отзывчивому дизайну в 2023 и далее
О том, почему отзывчивый дизайн это не просто версии для декстопа и мобилки и какие задачи решать, чтобы сделать приложение действительно отзывчивым.
https://ishadeed.com/article/responsive-design