29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
#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
Создание вертикальных контролов для форм
В Safari 17.4 добавили возможность использовать writing-mode: vertical-rl, что актуально при разработке приложений для стран Азии.
https://webkit.org/blog/15190/implementing-vertical-form-controls/
Практический TypeScript
10 часовой видеокурс для тех, кто еще не знаком с TS: аннотации типов, алиасы, enums, интерфейсы, дженерки, React + TS и многое другое.
https://www.youtube.com/watch?v=JHEB7RhJG1Y
React TypeScript Cheatsheets
Типизируем React приложение правильно: шпаргалка, которая поможет правильно указать типы при работе с React компонентами.
https://react-typescript-cheatsheet.netlify.app/
Новые математические функции в CSS
Как работают pow(), sqrt(), exp(), hypot() и как их можно использовать на практике
https://danielcwilson.com/posts/mathematicss-powers/
Индикатор прогресса
Туториал по созданию веб компнонента прогресса загрузки.
https://piccalil.li/blog/solution-009-progress-indicator/
Shima Dev Tool
Расширение для разработчиков и тестеровщиков, позволяющее быстро переключаться между разными конфигурациями окружения на лету.
https://www.youtube.com/watch?v=v8GkxClnf68
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
HolyJS. Апрель 2024. Свои в курсе.
Весь JavaScript-хардкор — здесь.
Билеты за счет компании — здесь.
Идете сами? Сделайте это с промокодом на скидку в 10%: FRONTENDDEV
И как всегда — все подробности на сайте конференции: holyjs.ru
Реклама. ООО "Вайлдкард". ИНН 7801718607
Safe alignment flexbox
Как значение safe влияет на расположение контента при использовании flexbox и где это может быть полезно.
https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/
📣 Всегда мечтал спросить «Слышите меня, „Лужники“?», но не было повода? Теперь есть. Мы даем тебе шанс собрать на свой доклад по разработке тот самый стадион.
Уже 23–26 мая в «Лужниках» пройдет международный киберфестиваль Positive Hack Days 2, объединяющий ценителей кода, хай-тека, безопасной разработки и защиты приложений. Мы приглашаем тебя выступить в треке Development при поддержке сообщества POSldev. Тебя услышат тысячи глаз зрителей, а твой доклад еще долго будут обсуждать в сообществе разработчиков.
Рассказываем, что нужно сделать.
1️⃣ Выбрать тему выступления. Можно из списка, можно свою.
2️⃣ Определиться с длительностью доклада: есть варианты на 15 или 50 минут.
3️⃣ Подать заявку до 1 апреля, на которую мы обязательно ответим.
4️⃣ Выступить перед множеством внимательных и заинтересованных слушателей.
Удачи!
#PHD2
Делаем DVD скринсейвер на чистом CSS
Пошаговый туториал по созданию олдскульного скринсейвера.
https://www.javiermorales.dev/blog/dvd
Фронтенд-разработка из первых уст
Канал Дениса Воронина, где он стремится создать площадку для обмена опытом всех заинтересованных.
Денис делится своими статьями и обзорами на поднятые сообщестовом темы, а также публикует и предлагает к обсуждению материалы всех участников канала.
А в обмен на ваше время, которые вы можете потратить на закомтсво с каналом, Денис проводит розыгрыш крутой механической клавы.
Так что не пожалейте пару минут: вы можете выиграть клавиатуру и стать частью интересного сообщества.
Скорость HTTP
Сравниваем основные серверные JavaScript платформы: Deno, NodeJs, Bun.
https://kitsonkelly.com/posts/http-speed
Топ 10 алгоритмов для интервью
Курс по алгоритмам с использованием JS для успешного прохождения секции лайвкодинг.
https://www.youtube.com/watch?v=ufBbWIyKY2E&ab_channel=freeCodeCamp.org