29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Воссоздаем Youtube Ambient Mode эффект
Туториал по реализации эффекта светящейся рамки для видео.
https://smashingmagazine.com/2023/07/recreating-youtube-ambient-mode-glow-effect/
Создание формы для донатов
Пример реализации формы на React + Express и интеграции ее с платежной системой Stripe.
https://dev.to/wra-sol/building-a-reactexpress-stripe-donation-form-2pek
Анимация изображений в grid
Демо | Github
https://tympanus.net/codrops/2023/07/27/grid-flow-animation/
Frontend interview questions
Сборник вопросов и ответов с собеседований по frontend.
https://www.frontendinterviewquestions.com/interview-questions/
Сверстать Google
Так ли просто сверстать главную страницу Google?
Вадим Макеев раскладывает по полочкам верстку и рассказывает о тонкостях и подводных камнях в 3-х часовом видео для самых выносливых.
https://www.youtube.com/watch?v=O-2xwAaXyDs
Пишем клон Твиттер
6 часовой туториал по созданию Твиттера с NextJS и Supabase
https://www.youtube.com/watch?v=QdxUZhLHZiA&ab_channel=freeCodeCamp.org
Используем http: only cookie для защиты JWT токена аутентификации
budnifronta/m3EIF2ft9hJ" rel="nofollow">https://teletype.in/@budnifronta/m3EIF2ft9hJ
Представляем вам WebProxy API — инновационный сервис для веб-скрейпинга, который позволяет получить доступ к сотням тысяч прокси-серверов, созданных реальными пользователями. 👨💻💻
Наш сервис обеспечивает высокую скорость работы, среднее время отклика составляет всего от 0,5 до 3 секунд. ⚡️💨
WebProxy API разработан с упором на простоту использования в ваших проектах. Вам понадобится всего лишь одна строчка кода, чтобы начать получать HTML-код запрашиваемых вами веб-страниц. Просто обратитесь к нашему API, передав URL ресурса, и в ответ вы получите запрашиваемую страницу с HTML-кодом. 💻🔍
Одним из главных преимуществ WebProxy API является наш уникальный подход к формированию прокси. Мы используем прокси, созданные реальными пользователями, что позволяет получить естественный цифровой след и обеспечить максимальную надежность и анонимность ваших запросов. 🚀🔒
Наш сервис открывает перед вами неограниченные возможности для сбора данных, парсинга информации и проведения исследований в Интернете. 🌐📊
Не теряйте время на рутинные задачи веб-скрейпинга. Подключайтесь к WebProxy API уже сегодня и ощутите его преимущества в деле! 💪🌟
Определяем, когда элемент попадает или покидает viewport
Или как использовать IntersectionObserver вместо события scroll.
https://gomakethings.com/how-to-detect-when-an-element-enters-or-leaves-the-viewport-with-vanilla-javascript/
Web Audio и Web MIDI API
Изучаем Web Audio и создаем свой синтезатор на JS
https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Создаем клон LinkedIn на React
10 часовой туториал создания клона LinkedIn с нуля на React + Firebase: от настройки проекта и авторизации до имплементации основных фич приложения.
https://www.youtube.com/watch?v=HimR8Xtz17U
Пишем CSS в 2023
Если вы особо не следили за тем, какие изменения произошли в CSS за последние пару лет, то статья для вас.
Container Queries, Layers, новые псевдо-селекторы и многое другое.
https://www.smashingmagazine.com/2023/07/writing-css-2023/
Выносим запрос данных из useEffect в React
Иcпользуем React Query для запросов с возможностью кеширования.
https://www.youtube.com/watch?v=Kjkx2BASAZA
Привет! Это команда IT’s Tinkoff Crew, и мы про ИТ-команду Тинькофф.
Расскажем и покажем каково это быть ИТ-специалистом в Тинькофф.
По будням сможете почитать карьерные кейсы наших ребят, посмотреть видеоотчеты мероприятий и узнать практические советы от команды. А по выходным — посмеяться вместе с нами над короткими смешными видео.
Совсем забыли дополнить, что по средам будет возможность следить за открытыми ИТ-вакансиями в удобном дайджесте по стримам, так что ваше от вас не уйдет!
Подписывайтесь 💛
Создаем простую форму регистрации с обработкой данных на NodeJS
Используем Express в связке с MongoDB для работы с данными + валидируем данные и раздаем статику.
https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/
Лучшие практики по созданию форм логина и регистрации
Несколько советов о том, как создавать формы, которыми удобно пользоваться с любых устройств.
https://web.dev/sign-in-form-best-practices/
Курс «Английский для разработчиков» Яндекс Практикума
Для тех, кто хочет изменить свою профессиональную жизнь и работать в международной команде.
Обучение построено не вокруг абстрактной теории, а вокруг рабочих ситуаций и полезных для карьеры навыков:
✋Стендапы. Подготовитесь обсуждать задачи, задавать вопросы и просить о помощи.
👨💻 Работа с заказчиками. Научитесь презентовать решения, говорить про баги и фичи.
📣 Митапы. Сможете понимать на слух доклады и выступать сами.
😎 Собеседования. Научитесь рассказывать про свой опыт, понимать вопросы и тактично переспрашивать.
👯 Неформальное общение с коллегами. Сможете рассказать о своих интересах, опыте, планах на будущее.
💻 Код-ревью. Сможете описать сделанное, дать обратную связь, тактично отстоять своё мнение.
Запишитесь на бесплатную консультацию. Кураторы определят ваш уровень языка и расскажут подробнее про обучение.
Введение в Node.js в 2023
Достоинства и недостатки современного NodeJS, уязвимости и сферы применения в большой обзорной лекции от Тимура Шемсединова
https://www.youtube.com/watch?v=mRvzgBGLVyM&ab_channel=TimurShemsedinov
Verdaccio
Локальный приватный npm registry. Прост в запуске и использовании.
https://github.com/verdaccio/verdaccio
Как я стал фронтендером
1. Смотрел уроки на ютубе
2. Делал портфолио на гитхаб
3. Начал читать Frontend || Vollex
Frontend Vollex выжимает воду из курсов, книг, видеоуроков и заботливо делится самым главным. Гайды, готовый код, тесты и никакой копипасты.
Вы знаете, что делать: @vollex_frontend
А происходит ли всплытие переменных, объявленных через let и const?
Да, но есть один нюанс.
https://www.freecodecamp.org/news/javascript-let-and-const-hoisting/
JavaScript Proxy и Reflect API
Как и для чего можно использовать Proxy в JS
https://www.freecodecamp.org/news/javascript-proxy-object/
SOLID
Хороший ресурс, помогающий понять принципы SOLID. Следование этим принципам помогает писать чистый и поддерживаемый код.
https://solidbook.vercel.app/
Операторы JS
Разбираем функционал операторов: от привычных арифметических до битовых и малоизвестных (например оператора пайплайна).
https://www.sitepoint.com/javascript-operators/
Как вырасти от junior до middle? Middle-специалист отличается не только опытом и уровнем владения технологиями, но и софт скилами. Курс Яндекс Практикума «Мидл фронтенд-разработчик» составлен так, чтобы вы могли освоить и то, и другое а ещё:
• разработать мессенджер, используя только JavaScript, Typescript, CSS и API браузера;
• познакомиться с теорией и отработать её на практике в больших проектах;
• научиться брать ответственность за решения и вкладываться в общий результат;
• самостоятельно декомпозировать задачи и распределять время;
• исследовать смежные сферы программирования, без которых невозможен фронтенд:
• информационную безопасность, прототипирование интерфейсов, командную работу, DevOps, ООП.
На всех этапах вас будут сопровождать опытные разработчики. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.
Пройдите первый бесплатный урок
Подкаст про код от HTML Academy
О юбилейном NestJS, конструкции using в TS и JS и использовании color-mix()
https://www.youtube.com/watch?v=RpTxzpIDAN0&ab_channel=HTMLAcademy
Анимации переходов для текстовых блоков
Несколько способов оживить текст
Демо | Github
https://tympanus.net/codrops/2023/07/13/inspiration-for-text-block-transitions/
Трюки с DevTools
Очередня порция свежих советов по работе с DevTools.
https://www.smashingmagazine.com/2023/06/popular-devtools-tips/
Птички на CSS
Двухчасовой стрим от Вадми Макеева для самых выносливых CSS-гиков по созданию птицы на чистом CSS.
https://www.youtube.com/watch?v=ZhWdhMpJ8bs
Полный курс Redux Toolkit + RTK Query для начинающих
https://www.youtube.com/watch?v=gPmYTqGPDWA&ab_channel=REDGroup