29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Круговые зависимости в 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-решений ➡️
Эксперимент с новым синтаксисом для создания SVG через CSS
https://yuanchuan.dev/experimenting-a-new-syntax-to-write-svg
Поиграться и поэкспериментировать самому можно тут
Динамические ключи в TS
Дмитрий Павлутин рассказывает, как использовать структуры с динамическими ключами и чем они отличаются от Record.
https://dmitripavlutin.com/typescript-index-signatures/
Визуализация данных с помощью Unovis
Создаем проект и рисуем графики, чарты и строим графы с библиотекой Unovis.
https://blog.logrocket.com/exploring-data-visualization-unovis/
Примеры использования Trig.JS
Trig.JS — небольшая библиотека, которая позволяет делать анимации, реагирующие на скролл.
https://idev-games.github.io/Trig-JS-Examples/
Визуализируем JavaScript: Promises & Async/Await
https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke
Создаем CSS разметку в стиле masonry
Туториал, включающий несколько способов создания разметки, один из который с использованием экспериментальных фич CSS.
https://dev.to/logrocket/creating-css-masonry-style-layouts-50b7
Как начать работать с git за 10 минут
Простой вводный курс для тех, кто еще не начал
https://youtu.be/f2TurkSBnYQ
Это — Дмитрий Безуглый, у него огромный опыт во фронтенд-разработке. Кто, если не он, научит вас делать серьёзный фронтенд?
Дима участвовал в принятии решений по разработке на все команды Вконтакте, с нуля запустил рекламный кабинет для новичков и выстроил множество процессов в команде как тимлид. А если вы используете Яндекс.Трекер, то знайте, его интерфейсы – тоже работа Димы.
Сейчас Дима — 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
Глубокое погружение в ES-модули
Разбираемся, как работают ES-модули.
https://medium.com/web-standards/71f42c1e851a
React 3D анимация на ThreeJS и GSAP
Туториал по анимированию сайта и отображению 3D моделей
https://youtu.be/IyBhFma4H1A
😀Встраивание WebGL в HTML-страницу с помощью Three.JS
В данной статье мы рассмотрим совмещение WebGL‑анимации с прокруткой страницы HTML, используя библиотеку Three.js.
https://habr.com/ru/company/simbirsoft/blog/721912/
Учим Vite за 2 часа
https://www.youtube.com/watch?v=VAeRhmpcWEQ&ab_channel=freeCodeCamp.org
Некоторые кроссбраузерные фичи DevTools, о которых вы могли не знать
https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
Курс «Английский для разработчиков» от Яндекс Практикума
Для тех, кто хочет говорить с коллегами на английском так же естественно, как на русском.
Вы узнаете, как на английском говорить о себе на собеседованиях, общаться с коллегами и закрепите пройденное на практике с иностранцами из IT. В мае введут разговорные клубы для разработчиков.
Для студентов с уровнем Pre-Intermediate или выше.
В основе обучения:
- Занятия с личным преподавателем. Объяснит английский на примере рабочих ситуаций, даст упражнения, будет регулярно проверять вас и анализировать прогресс.
- Практика с иностранцами из IT. Тренируйте собеседования, стендапы и ревью с теми, кто не говорит по-русски.
- Разговорные клубы. Студенты будут созваниваться раз в две недели, практиковать и обсуждать то, что уже прошли. Появятся в мае.
1 апреля курс подорожает. До этого можно купить его по старой цене с доступом к клубам.
Запишитесь на бесплатную консультацию. Куратор определит ваш уровень языка и поможет разобраться, подойдёт ли курс.
Решаем все проблемы стилизации разметки
Как сделать страницу, которая выглядит отлично на всех устройствах.
https://levelup.gitconnected.com/62349644a71e