29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Dependency Inversion принцип в TypeScript
Чем вам поможет подход Dependency Inversion при разработке и поддержке приложений.
https://blog.logrocket.com/dependency-inversion-principle-typescript/
Архитектурный паттерн Dependency Injection в React-приложении
В статье рассказывается какой профит можно получить, используя паттерн DI и как его внедрить в свое приложение.
https://habr.com/ru/companies/tinkoff/articles/540662/
Псевдоклассы :user-valid и :user-invalid
Улучшаем нативную валидацию полей при помощи селекторов псевдоклассов, которые применяются к полям, которые были изменены пользователем, в отличии от :valid и :invalid.
https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes?hl=ru
Используем Github Pages для хостинга NextJs приложения
Простой туториал по конфигурации Github Pages и NextJs.
https://www.viget.com/articles/host-build-and-deploy-next-js-projects-on-github-pages/
TypeScript фичи, которые повысят уровень вашей разработки
hamsterhomka/e40a3424fa50" rel="nofollow">https://medium.com/@hamsterhomka/e40a3424fa50
Тестирование JavaScript c помощью Jest
Вводный курс за 1 час.
https://www.youtube.com/watch?v=IPiUDhwnZxA&ab_channel=freeCodeCamp.org
Используем CSS Subgrid для создания продвинутой разметки
https://blog.logrocket.com/designing-advanced-layouts-with-css-subgrid/
Фронтендеры, общий сбор ❄️
22 декабря в 19:00 проведём уже пятый A?.Frontend Meetup. На этот раз — в Санкт-Петербурге и онлайн.
Коллеги из Альфа-Банка, Сбера, BetaRobotics и Тинькофф обсудят связь IT-специалиста с комьюнити, стресс-менеджмент в программировании, какой профит можно получить от T-shape навыков, а ещё зачем фронтендеру микросервисы, CI/CD, Pipeline и Kubernetes ⚙️
Присоединяйтесь — зарегистрироваться на митап и узнать подробности можно по ссылке.Реклама. АО "АЛЬФА-БАНК" ИНН 7728168971
Пример реализации инпута для одноразовых паролей
https://chriscoyier.net/2023/12/04/html-css-for-a-one-time-password-input/
Участвуй в захватывающих Всероссийских соревнованиях по спортивному программированию «Фонкод»!
Дисциплина: «Программирование алгоритмическое».
💰 Общий призовой фонд составляет целых 2 000 000 рублей!
20 счастливчиков получат 10 000 рублей.
Гарантированные призы первым 2000 учасникам!
Это твой шанс не только продемонстрировать свои навыки, но и выиграть крутые призы!
К участию приглашаются:
Учащиеся средних образовательных учреждений и лицеев России в возрасте от 14 до 17 лет.
Обучающиеся высших и средне-специальных учебных заведений.
Работники организаций сферы ИТ России (18+).
📝 Регистрация участников уже открыта на официальной платформе проведения соревнований – ЗАРЕГИСТРИРОВАТЬСЯ
Не упусти свой шанс стать частью этого захватывающего события!
Как работают JS Promise
Туториал для начинающих.
https://www.freecodecamp.org/news/javascript-promise-object-explained/
Создание SVG через код
25 примеров, которые помогут вам ближе познакомиться с созданием SVG через код. Автор проведет вас через все функциональные возможности от простого к сложному.
https://svg-tutorial.com/
Как сделать так, чтобы контент на сайте или приложении грузился быстро, а сервер выдержал всплеск клиентов во время новогодних онлайн-продаж?
Регистрируйтесь на вебинар от команды T1 Cloud «Ускоряй, загружай и продавай с помощью сервиса CDN»!
Вы узнаете:
🔵 В каких случаях пора подключать CDN
🔵 Сценарии использования сервиса и преимущества для бизнеса
🔵 О чем важно знать, перед подключением CDN
🎁 Участникам вебинара будет доступен бесплатный тестовый период сервиса CDN от T1 Cloud.
5 декабря в 11:00 мск
Зарегистрироваться ➡️Реклама. Информация о рекламодателе
Server-side rendering и практики работы с запросами
Нюансы работы с запросами, отличающие клиентскую разработку от серверной.
https://habr.com/ru/companies/domclick/articles/776714/
Бесплатный доступ к российской облачной платформе и скидка 30% на все сервисы в 2024 году
Провайдер облачных и AI-технологий Cloud․ru создает платформу Cloud․ru Evolution — публичное облако на базе собственных разработок и свободно распространяемых компонентов.
Cloud․ru — №1 облако для бизнеса. Провайдер оказывает полное сопровождение и поддержку 24/7 для бесшовной миграции в облако и решения бизнес-задач любого масштаба.
До конца 2023 года Cloud․ru предлагает интересные условия: 30 дней бесплатного доступа к виртуальным машинам и контейнерам и скидку 30% на все сервисы платформы в 2024 году.
Преимущества платформы Cloud․ru Evolution:
✅ импортонезависимость;
✅ инфраструктура в дата-центрах уровня Tier III и соответствие 152-ФЗ;
✅ передовые облачные сервисы без legacy-компонентов;
✅ оплата только использованных или выделенных ресурсов;
✅ детальная документация и простой интерфейс на русском языке.
👉 Подробнее о платформе и специальных условиях на сайте компании: cloud.ru/evolution
11 best parctises для ваших форм логина и регистрации
Несколько советов о том, как сделать ваши формы более удобными, доступными и практичными.
https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
Пишем змейку на JS
Начинаем год с разработки браузерной змейки в ретро стиле на JS + CSS.
https://www.youtube.com/watch?v=uyhzCBEGaBY
Веб компонент снежинок
Честно говоря, веб компоненты используются не особо широко в современной разработке из-за своей сложности и проблем с поддержкой.
Но на простом примере, как этот, можно посмотреть кейсы, где их удобно применять и как реализовывать.
https://www.zachleat.com/web/snow-fall/
HTML и CSS ошибки, влияющие на доступность
4 статья из цикла про разработку приложений с учетом опыта незрячих пользователей.
https://habr.com/ru/companies/ruvds/articles/776392/
Думаете о карьере в сфере IT — начните с Python. Этот язык рекомендуют в качестве первого языка программирования, и для начала обучения вам не понадобятся технические знания и навыки.
Запишитесь на бесплатный курс Нетологии «Основы Python: создаём телеграм-бота». Программа акцентирована на практике. За 5 занятий вы погрузитесь в логику и синтаксис языка, изучите основные инструменты для написания кода. С нуля разработаете планировщик задач и создадите полезного Telegram-бота, которым сможет пользоваться кто угодно.
Попробуйте https://netolo.gy/csBoРеклама. ООО «Нетология». Erid LatgBhTrH
Линтер Oxlint
Простой линтер, не требующий конфигурации, основная цель которого поиск ошибочного или неиспользуемого кода.
https://oxc-project.github.io/blog/2023-12-12-announcing-oxlint.html
10 советов по оптимизации производительности приложений
Краткие советы с ссылками на подробные ресурсы.
https://calendar.perfplanet.com/2023/ten-optimisation-tips-for-an-initial-web-performance-audit/
16 впечатляющих игр на чистом CSS
Демо и исходники прилагаются.
https://www.frontendplanet.com/css-game-examples/
Создаем сложную анимацию на ThreeJS
Красивый эффект реагирующий на движение мыши.
Demo | Github
https://tympanus.net/codrops/2023/12/13/creating-an-interactive-mouse-effect-with-instancing-in-three-js/
Eleventy vs NextJS
Сравниваем 2 фреймворка для генерации статических сайтов: перфоманс, сложность работы, фичи и другие аспекты.
https://blog.logrocket.com/eleventy-vs-next-js-static-site-generation/
Вам не нужен JS для этого
Несколько примеров того, когда стоит применять правило использования более простых технологий:
▫️переключатель чекбокса
▫️ввод с подсказкой
▫️аккордеон
и еще несколько случаев, когда можно обойтись без JS.
https://www.htmhell.dev/adventcalendar/2023/2/
Статья кстати из HTML Hell адвент календаря, где каждый день декабря выходит новая статья о веб разработке.
Примеры использования WebShare API
https://blog.logrocket.com/implementing-advanced-features-navigator-share-api/
Полный курс по HTTP Networking
https://www.youtube.com/watch?v=2JYT5f2isg4
Неочевидные моменты Typescript и способы их решения
Примеры ситуаций, с которыми можно столкнуться при работе с Typescript.
https://habr.com/ru/articles/775330/
Интерактивное руководство по CSS Grid
Отличная статья с примерами, в которых можно настраивать свойства гридов и визуализировать изменения.
https://www.joshwcomeau.com/css/interactive-guide-to-grid/