29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Отзывчивая разметка без media queries
Как flexbox и grid помогут вам обойтись без media брейкпоинтов: несколько советов и уловок.
https://www.youtube.com/watch?v=p3_xN2Zp1TY
HTML best practises
Подборка правил (с некоторыми, конечно, можно поспорить), соблюдение которых поможет создавать более читаемую и поддерживаемую разметку.
https://github.com/hail2u/html-best-practices
Карманный справочник
Удобные подсказки по HTML, CSS и JS для начинающих и не только. Есть набор генераторов для CSS, компрессор для JS и еще много инструментов для разработчиков.
https://htmlcheatsheet.com/
Сloudflare внедрили HTTP/3 приоритизацию запросов
Что такое приоритизация, и как она помогает грузить приложение еще быстрее.
https://blog.cloudflare.com/better-http-3-prioritization-for-a-faster-web/
ProgEng: Английский для айтишников - клевый канал для тех, кому нужен английский для IT профессии.
Пара фактов о канале:
— ребята публикуют уникальные материалы — например, рубрики #howtosay "Как сказать по-английски"
— составляют тесты на знания IT английского,
— публикуют IT термины, которые айтишники употребляют в работе
— находят интересные английские шутки о программировании.
Кому полезно:
— айтишникам с базовым знанием английского;
— тем, кто хочет войти в айти;
Подписывайся на ProgEng и изучай по 5-10 минут английский каждый день 😇
Как работать с несколькими обработчиками для одного события
Несколько способов добавления разных хендлеров для событий в JS.
https://gomakethings.com/how-to-more-performantly-listen-for-the-same-event-across-different-scripts-with-javascript/
Создаем приложение на Svelte с SSR рендерингом при помощи SvelteKit
Пошаговый туториал по разработке приложения + деплой на Netlify.
https://www.smashingmagazine.com/2023/06/build-server-side-rendered-svelte-apps-sveltekit/
Оптимизация JS
В профайлере DevTools можно увидеть задачи с лейблом Script Evaluation, которые могут занимать много времени. Что это за задачи и как их можно оптимизировать?
https://web.dev/script-evaluation-and-long-tasks/
Подробно о HTTP
От создания до HTTP/2. Основные аспекты и особенности работы, а также какие проблемы решил HTTP/2.
https://cs.fyi/guide/http-in-depth
Эффект нарезанной картинки
Реализация необычного эффекта при наведении на изображение.
Демо
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/
CSS Grid за 13 минут
Быстрое введение в CSS Grid (индусский английский присутствует, тем не менее реально доходчиво и быстро).
https://www.youtube.com/watch?v=EiNiSFIPIQE&ab_channel=SlayingTheDragon
Полное руководство по доступности frontend компонентов
Большой гайд от Виталия Фридмана о техниках и инструментах для создания доступных приложений.
https://www.smashingmagazine.com/2021/03/complete-guide-accessible-front-end-components/
Git File History - расширение для VSCode для отображения истории изменений файла
Удобно отображает комиты в виде горизонтального списка + анимирует изменения в файле.
https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history
Подборка Web API's для добавления интересного функционала к вашему приложению
Web Speech, Accelerometer, Page Visibility и еще несколько.
https://dev.to/ruppysuppy/7-more-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-50bg
Руководство по макетам и вложенным макетам Next.JS
https://blog.logrocket.com/guide-next-js-layouts-nested-layouts/
Руководство по созданию Glassmorphism эффекта на CSS
https://dev.to/anuraggharat651/an-intuitive-guide-to-css-glassmorphism-4id9
🍾🎁 Время сюрпризов!
Теперь в стандартную подписку за 99 рублей входят тренажеры HTML Academy!
Тренажеры - мега-полезная вещь! Сам их проходил когда-то.
Есть тренажеры по HTML, CSS, JS и React.
Продвинутые тренажеры будет полезно пройти даже опытным разрабам,
а начинающим проходить обязательно!
Чтобы получить доступ, пишите мне в личные сообщения на Boosty.
Смотреть какие есть тренажеры!
Получить тренажеры!
P.S.
С HTML Academy мы придумали еще кучу разных активностей.
Например, их эксперты будут публично ревьювить код наших академиков!
Руководство по использованию Bootstrap с React
https://deadsimplechat.com/blog/bootstrap-with-react/
#вакансия
Компания: UAPP.AI
Front-End Разработчик (Удаленная работа)
Привет! Мы ищем Front-End Разработчика с опытом и знаниями в адаптивной верстке. У нас интересный проект и зарплата от $1000.
📌 Требования: опыт Front-End разработки (2+ лет), HTML, CSS, JavaScript, фреймворки (React, Angular, Vue.js), адаптивная и кросс-браузерная верстка, Git.
📌 Предлагаем: удаленную работу, гибкий график, профессиональный рост.
📍Примечание: Заработная плата обсуждается индивидуально с выбранным кандидатом (от 1000$ USDT)
Резюме и портфолио для рассмотрения отправлять сюда @topunr
Маленькие полезные сайты
Крис Корнер делится списком сайтов, которые могут помочь в разработке. От создания необычного фона и подбора цветовой темы до набора бейджей и анимированных переключателей для вашего приложения.
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/