29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Эффект нарезанной картинки
Реализация необычного эффекта при наведении на изображение.
Демо
Github
https://tympanus.net/codrops/2023/06/21/coding-the-sliced-image-hover-effect-from-quai-network/
Работаем с CSP в React
Что такое Content Security Policy и как добавить нужные теги для настройки CSP с помощью React Helmet.
https://blog.openreplay.com/security--how-to-deal-with-csp-in-react/
Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇
📌Senior Frontend — JS, HTML и CSS
📌Frontend Interview — как проходить собеседования
📌Web Craft — только Web-разработка
📌Frontender Libs — библиотеки для фронтендеров
Туториал по SQL для новичков
5 часовой курс + ответы на технические вопросы с собеседований
https://www.youtube.com/watch?v=-fW2X7fh7Yg
Друзья!
Владимир Швец, разработчик с 15 летним опытом, прошедший путь от тестировщика до ведущего архитектора, недавно выпустил книгу о работе в IT индустрии:
"От джуна до сеньора: Как стать востребованным разработчиком"
В книге освещены самые актуальные проблемы в сфере разработки: полезные практики по работе с кодом, выстраивание коммуникаций в коллективе, личный рост, борьба с выгоранием, сомнениями и страхами.
Книга будет полезна и интересна как тем, кто только начинает свой путь в разработке, так и уже разработчикам с опытом.
Кстати для подписчиков канала действует промокод FRONTENDDEV на скидку 20% до 30 июня!
Несколько анимаций с типографикой
4 интересных эффекта для вашего приложения.
https://tympanus.net/codrops/2023/06/16/4-exclusive-demos-slideshows-typographic-animations/
Создаем приложение аудио-в-текст с помощью Whisper, React и Node
Пошаговый туториал по разработке back и front частей приложения.
https://www.sitepoint.com/speech-to-text-whisper-react-node
Открываем новые фичи TypeScript 5
http://blog.logrocket.com/exploring-typescript-5-features-smaller-simpler-faster/
Проверяем, что все символы в строке уникальные
3 способа проверки:
▫️String.prototype.indexOf
▫️Array.prototype.filter
▫️Set
https://gomakethings.com/how-to-test-if-all-characters-in-a-string-a-unique-with-vanilla-javascript/
Примитивные объекты в JS
Как использовать примитивные объекты и какие преимущества они дают.
https://smashingmagazine.com/2023/06/primitive-objects-javascript-part-2/
Делаем данные на сайте удобными для восприятия
Советы и практики для улучшения отображения данных в сетках и таблицах.
https://www.smashingmagazine.com/2023/06/universal-cognitive-friendly-ux-design-tables-grids/
Эффект анимации фона при движении курсора
Сочетание SVG фильтров и CSS blend mode.
Демо | Github
https://tympanus.net/codrops/2023/06/07/gooey-cursor-effect/
Делаем приложение для генерации цитат на NodeJS, TypeScript и AWS Amplify
6 часовой курс создания full stack приложения с нуля до деплоя и настройки CI/CD.
https://www.youtube.com/watch?v=FRmCxj9K7II
Сравниваем Redux и React Query
Что выбрать для проекта? Посмотрим разницу между Redux и React Query, плюсы и минусы библиотек.
https://www.youtube.com/watch?v=YLowBWmYChc&ab_channel=ITVDN
Стилизация элементов при помощи псевдокласа :empty
https://blog.logrocket.com/styling-css-empty-pseudo-class/
Маленькие полезные сайты
Крис Корнер делится списком сайтов, которые могут помочь в разработке. От создания необычного фона и подбора цветовой темы до набора бейджей и анимированных переключателей для вашего приложения.
https://blog.codepen.io/2023/06/19/chris-corner-little-useful-websites/
Подкаст Веб Стандарты - 374
В выпуске: сабгриды, JS-итераторы, тестирование с Chrome, CSS-нестинг.
https://web-standards.ru/podcast/374/
5 способов сделать полосатый фон с помощью CSS
И все они основаны на градиентах.
https://blog.logrocket.com/5-ways-implement-striped-background-css-only/
Проверка браузера на поддержку CSS фич
Используем @supports для проверки и применения стилей в браузерах с поддержкой современных фич, а также применяем fallback при необходимости.
https://blog.logrocket.com/testing-browser-support-css-features-feature-queries/
Front-end. Вопросы на собеседовании
Разбор новой порции вопросов с собеседований Frontend разработчиков: REST, HTTP/2, OSI, SSL и виды аутентификации.
https://www.youtube.com/watch?v=-mWa7erZu64
Приватная файловая система веб-приложений
Новый способ работы с файлами с File System Access API, который позволяет безопасно читать и изменять файлы.
https://web.dev/origin-private-file-system/
#.zip #.mov
Почему новые домены .zip и .mov — подарок «Гугла» мошенникам
⭐️⭐️◽️◽️◽️
📖Читать
Обрабатываем ошибки в NextJS c App Router
От ошибок аутентификации и разметки до ошибок на стороне сервера.
https://www.sitepoint.com/next-js-error-handling-app-router
Изучайте самые востребованные направления в разработке и получите возможность устроиться на работу в лидирующие компании!
На канале факультета программирования вы найдёте контент, который поможет вам набрать скиллы в программировании: Q&A с преподавателями, гайды, реальный кейсы и мемы.
Погрузитесь в мир кодинга — подписывайтесь на канал факультета программирования!
Введение в CSS scope
https://fullystacked.net/posts/scope-in-css/
Как вырасти в скиллового фронтендера?
Научиться на ошибках опытных специалистов эффективно решать рабочие задачи и создавать серьёзный фронтенд на курсе от karpovꓸcourses. Преподаватели и авторы — тимлиды с опытом работы в Яндексе, VK и Telegram Open Network.
Освоив лучшие практики индустрии, вы научитесь:
- находить и лечить сложные ошибки производительности
- делать сайт работающим в офлайне и понятным для скринридеров
- работать с сетевыми запросами и кешировать данные
- создавать серверную часть веб-приложения самостоятельно с нуля
- писать автоматические тесты для веб-приложений
А по промокоду FRONTENDDEV для вас скидка 5% на ближайший поток.
Присоединяйтесь до 15 июня создавать рабочий production-ready сервис и прокачиваться в своих навыках: https://clck.ru/34ejV2
Нативная вложенность в CSS
Как использовать SASS-подобный синтаксис в CSS.
https://www.amitmerchant.com/sass-like-nesting-in-native-css/
Пишем плагин для бесшовного drag and drop перемещения элементов на чистом JS
Подробный туториал по созданию плагина, включающий работу с событиями и DOM элементами для различных устройств.
https://tahazsh.com/blog/seamless-ui-with-js-drag-to-reorder-example
Вы уже слышали про классный канал с вакансиями в сферах IT и digital? 🤔
Если нет, то скорее заглядывайте в Avito Career. В нём нет ничего лишнего: только актуальные предложения для всех грейдов без спама и постов в выходные.
Подписывайтесь, откликайтесь и не забудьте рассказать друзьям.
Реклама. Рекламодатель ООО “КЕХ еКоммерц". 2VtzqxjVmus
Друзья!
Совсем скоро стартует очередная Неделя IT-донора. Она пройдет с 5 по 9 июня.
Дважды в год айтишники со всей страны сдают кровь. Это помогает пополнять банки крови и спасать жизни. В движении IT-доноров принимают участие более 2500 человек, и вы тоже можете стать его частью!
Для этого нужно зарегистрироваться на сайте, прийти в сроки акции на любую станцию крови в своем городе и сдать кровь.
Всем добра✌️🕊️