29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Что нового в NodeJS v20
От встроенного тест раннера до компиляции в единый исполняемый файл.
https://www.sitepoint.com/node-js-20-new
Yandex Lockbox вышел в общий доступ
Yandex Lockbox — это сервис для создания и хранения секретов в инфраструктуре Yandex Cloud. Секретами мы называем любую конфиденциальную информацию. Например, пара логин-пароль, ключи сертификата сервера или ключи сервисного аккаунта в облаке. Lockbox надёжно хранит эти данные в зашифрованном виде.
Какие задачи решает сервис:
— безопасное хранение и доступ к секретам;
— централизация хранения секретов в облаке;
— упрощение аудита и соответствие требованиям ИБ;
— удобное управление жизненным циклом секрета.
Преимущества сервиса:
— интеграция с другими сервисами платформы;
— клиенту не нужно дополнительном конфигурировать и самостоятельно поддерживать сервис;
— за отказоустойчивость и безопасное хранение данных отвечает облачный провайдер.
Читайте подробнее по ссылке ➡️
Создаем простое NodeJS приложение и оборачиваем его в Docker контейнер
Пошаговый туториал по созданию приложения и Docker контейнера + деплой на Kinsta хостинг.
https://www.smashingmagazine.com/2023/04/building-dockerizing-nodejs-app-stateless-architecture-kinsta/
Исследуем потенциал Web Workers для многопоточности в вебе
Кратко рассмотрим все аспекты работы с Web Workers: безопасность, использование ресурсов, выполнение запросов и многое другое.
https://www.smashingmagazine.com/2023/04/potential-web-workers-multithreading-web/
Используем Playwright для тестирования компонентов
https://dzone.com/articles/lets-get-start-playwright-for-component-testing
Актуальные и полезные материалы по Python, С++ и машинному обучению
Если вы хотите самостоятельно изучить одно из IT-направлений, лучше всего использовать комплексный подход:
✅ осваивать теорию по актуальным источникам;
✅ закреплять новую информацию на практических заданиях;
А тем, кто собирается заниматься в свободное от учёбы или работы время, к этому стоит добавить возможность проходить новый материал в удобном темпе.
Учитывая всё это, Академия Яндекса разработала хендбуки — бесплатные онлайн-учебники, с помощью которых можно изучить IT-темы с нуля, систематизировать знания или ликвидировать пробелы. Проходите главы последовательно или в произвольном порядке и решайте задачи.
Сейчас на сайте доступны материалы по Python, С++ и машинному обучению. Сохраняйте ссылку, чтобы не потерять: https://clck.ru/33t55W
Топ 14 Chrome расширений для веб разработчика
https://www.youtube.com/watch?v=d0EyQEGfVNg&ab_channel=webDev
Делаем сайти-визитку на коленке за 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%.
Делаем авторизацию для приложений на Vue с помощью SuperTokens
https://blog.openreplay.com/using-supertokens-in-vue/
React Router 6 - Полный курс
https://www.youtube.com/watch?v=nDGA3km5He4&ab_channel=freeCodeCamp.org
Объединяем объекты в JS
Используем Object.assign и spread operator, чтобы совместить несколько объектов в один: подводные камни, аспекты и отличие от deep copy.
https://www.sitepoint.com/merging-objects-javascript/?utm_source=rss
Друзья, огромный архив книг по нашим любимым технологиям находится по ссылке @frontendarchive.
Все книги готовы для скачивания в PDF и EPUB формате. Книги публикуются с 2020 года.
Технологии: Javascript, React, Angular, Node, HTML/CSSПодписывайтесь и качайте в один клик: @frontendarchive
Клетчатый фон в 2 строчки CSS
Или как использовать градиенты для создания фона.
https://www.amitmerchant.com/checkered-background-using-only-two-lines-of-code-in-css/
Объясняем 10 алгоритмов сортировки
Преимущества и недостатки различных алгоритмов, а также критерии выбора того или иного алгоритма.
https://www.sitepoint.com/best-sorting-algorithms
Необычный 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