29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Изучаем CSS Box Model
Подробный туториал о работе и использовании CSS Box Model.
https://www.youtube.com/watch?v=nSst4-WbEZk
ESLint Config Inspector
Визуализирующий инструмент для просмотра, поддержки и изучения правил линтинга на вашем проекте.
https://eslint.org/blog/2024/04/eslint-config-inspector/
Interaction to Next Paint
Подробнее о том, за что отвечает метрика INP.
https://gtmetrix.com/blog/interaction-to-next-paint-inp-explained/
Как use() работает под капотом React?
https://jser.dev/2024-03-16-how-does-use-work-internally-in-react/
DevTools: советы и трюки
Пачка малоизвестных (вперемешку с заезженными) фич DevTools, позволяющих экономить время и силы при разработке и дебаге.
https://frontendmasters.com/blog/devtools-tips-tricks/
🤖 API и SDK от 2ГИС: технологии для вашего бизнеса
Ищете способы улучшить свой сервис, приложение или сайт? 2ГИС предлагает API и SDK — готовые решения для интеграции геоданных в ваш продукт.
💼 Что вы получаете:
- API карт: Детальная карта с редактором стилей — от подключения виджета с филиалами до геоинформационного сервиса.
- API справочника: Поиск по названию, виду деятельности, адресу и координатам. Доступ к подробной информации о миллионах организаций. А ещё преобразование координат в адрес и обратно, получение данных о парковках, остановках.
- API навигации: Инструменты для такси, курьеров, транспортных и логистических компаний. Маршруты для разных видов транспорта мимо пробок, шлагбаумов, перекрытий, платных и грунтовых дорог. Информация о расстоянии и времени в пути между точками на карте.
- Mobile SDK: 3D-карты, поиск и маршрутизация для приложений на iOS и Android — с тонкими настройками стилей и маркеров, построением маршрутов и доступом к справочнику.
⭐️ Почему стоит выбрать 2ГИС:
- Регулярные обновления данных о дорогах, организациях и пробках.
- Точность: Информация обрабатывается с помощью ИИ и выверяется с помощью пеших картографов и контакт-центра.
- Поддержка: Сопровождение клиентов на всех этапах работы, личный кабинет, подробная документация и примеры кода.
- Привлекательные условия: Гибкая настройка по техническим требованиям и тестовый период.
Попробуйте!
Курс по основам JS: Learn JavaScript
Базовый курс из 28 уроков от команды разработчиков Chrome.
https://web.dev/learn/javascript
React Design Pattern
Плейлист из 5 видео с основными паттернами разработки на React: HOC, Layout, custom hooks, etc.
https://www.youtube.com/playlist?list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-
Ребят, в начале или середине своего пути, вам часто нужно смотреть на примеры кода и реализацию разных возможностей
⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда сможете сохранить заготовки себе на будущие проекты
Раньше мы публиковали множество сайтов. Но теперь есть специальный канал для этого: @code_ready
У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства
➡️ Так что подписываемся
Оптимизация карусели для EditorJS
Показательный пример того, что не все библиотеки собраны оптимальным образом, и как с эти можно бороться (если очень нужно)
https://dev.to/appqui/how-i-optimized-carousel-for-editorjs-2x-in-size-4efa
Телеграм-канал фронтендерского сообщества Яндекса
Yandex for Frontend — канал от фронтендеров Яндекса. Рассказываем, как мы делаем красивые и функциональные интерфейсы в наших продуктах, и показываем людей, которые двигают фронтенд-разработку вперёд.
Подписывайтесь 👉 /channel/yandex4frontend
Изучаем относительные viewport единицы в CSS
Как и когда использовать 100vh, 100dvh, 100lvh, 100svh.
https://webdesign.tutsplus.com/learn-these-viewport-relative-css-units-100vh-100dvh-100lvh-100svh--cms-108537t
Изучаем NestJS - Полный курс
Большой 14 часовой курс по разработке на NestJs: котроллеры, сервисы, модули, работа с БД, авторизация, сваггер и другие аспекты разработки веб серверов.
https://www.youtube.com/watch?v=sFnAHC9lLaw
⁉️ Только начинаешь свой путь в IT, и для трудоустройства не хватает реального опыта работы?
Знакомая история? Тогда давай к нам! 🚀
PREAX — онлайн-стажировка для frontend-разработчиков.
Помогаем накопить реальный 💪 опыт, формируем кадровый резерв для работодателей и привлекаем лучших к коммерческим заказам.
ЧТО ВНУТРИ?
🔖 Пять больших проектов. Пополнишь портфолио крутыми кейсами.
🔖 Спринты и дедлайны. Научишься рассчитывать время и укладываться в сроки.
🔖 Работа с легаси. Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг.
🔖 Пачка код-ревью. Поделишься опытом и увидишь, как сделать свой код еще лучше.
🔖 Поддержка сообщества. Сможешь задать вопрос и получить совет, если нужна помощь.
🔖 Новый стек технологий. Закрепишь на практике и расширишь стек технологий.
🔖 Гибкий график. Сможешь выстраивать нагрузку, легко совмещая её с работой или учебой.
В итоге получишь реальный опыт работы в команде!
Попробуй! 1-й спринт — 🆓 БЕСПЛАТНО!Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755
Документируем свой JS код
Краткий курс по использованию JSDoc.
https://www.youtube.com/watch?v=YK-GurROGIg
Казань, 25 и 26 апреля приглашаем на митапы IT Talk by Sber 🤩
Поговорим о технических вызовах в разработке и поделимся опытом решения сложных задач. Вас ждут 4 хардовых доклада от экспертов Сбера и 2 больших софтовых выступления для тимлидов.
Программа 25 апреля 👇
✔️ Виталий Куценко «Optional — применение здорового человека»
✔️ Алексей Кардашов «Управление UI через backend в стеке jvm с использованием composite screen platform»
✔️ Евгений Ляшенко «Проверка на глубокие знания языка: как к такому подготовиться?»
✔️ Антон Непша «Когда синдром самозванца — не синдром»
Программа 26 апреля 👇
✔️ Владислав Хачатуров «О дивном новом мире ИТ-инженера без розовых очков глазами руководителя»
✔️ Арина Штерн, Пётр Белкин, Антон Штульберг «Профессиональные сообщества: зачем инженеру и руководителю»
Встречаемся:
👉 25 апреля в 17:30 в ИТ-парке им. Башира Рамеева (ул. Спартаковская, 2).
👉 26 апреля в 17:30 в Школе 21 (ул. Спартаковская, 2к2).
Ждём всех крутых разработчиков Казани!
Регистрируйтесь по ссылке.
DI для JS и TS
Dioma - библиотека для реализации паттерна Dependency Injection для чистого JS/TS
https://github.com/zheksoon/dioma
👨💻Изучаешь Frontend? Я тоже!
idk Frontend - канал, в котором я максимально подробно конспектирую весь мой путь обучения с самого старта.
С меня:
— Сложная теория простым языком;
— Практические примеры и объяснения;
— Работа над ошибками.
С тебя:
— Подписка @idk_frontend
Продолжим обучаться вместе! 👋
Интерактивный гайд по CSS Container Queries
Шанс попробовать относительно новую фичу без необходимости создавать свою песочницу.
https://ishadeed.com/article/css-container-query-guide
Введение в Jest - JS библиотеку для тестирования
Краткое руководство, основные фичи, юзкейсы и сравнение с другими библиотеками.
https://blog.logrocket.com/jest-adoption-guide/
13 репозиториев для изучения веб-разработки
Подборка из 13 ресурсов для бесплатного обучения основам и аспектам разработки от Евгений Ковальчука.
https://www.youtube.com/watch?v=UEyEAfnxp_c
#accessibility #html
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7
⭐️⭐️◽️◽️◽️
📖 Читать
React Router v6 - Полный курс
Курс по React Router v6, включающий как базовую настройку роутинга, так и продвинутую конфигурацию и кастомные переходы между страницами.
https://www.youtube.com/watch?v=SMq1IQRweDc
Подборка записей с конференций (300+) по JS за 2023 год
https://dev.to/techtalksweekly/all-javascript-conference-talks-300-from-2023-ordered-by-the-number-of-views-1akm
Скролл-анимация с типографикой
Эксперимент с анимацией с появлением изображения в тексте при скролле.
Демо | Github
https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/
KeyUX - библиотека, позволяющая удобно работать с вашим сайтом с клавиатуры
Сделана не только для доступности, но и для тех, кто любит использовать клавиатуру по максимуму в своей работе. Весит всего 2Кб и не использует дополнительные зависимости.
https://github.com/ai/keyux
Прощай, JS Profiler
Профайлинг CPU c помощью вкладки Performance в Chrome. О причинах ухода от профайлера, и как теперь мониторить производительность приложений.
https://developer.chrome.com//blog/profiling-cpu
7 простых правил для лучшего отображения данных
Как визуализировать данные понятно и наглядно для пользователей вашего приложения.
https://www.sitepoint.com/better-data-visualization-simple-rules/
Продуктовый подход к pet-проекту, или как я разработал музыкальное веб-приложение
https://habr.com/ru/articles/803673/
Создаем виртуальную 3D галерею на Three.js
Большой туториал по работе с Three.js, включающий создание сцен, работу со светом и текстурами, контролами, анимациями.
https://www.youtube.com/watch?v=imqiYWidUIA
