29396
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Создаем простую форму регистрации с обработкой данных на NodeJS
Используем Express в связке с MongoDB для работы с данными + валидируем данные и раздаем статику.
https://www.sitepoint.com/build-simple-beginner-app-node-bootstrap-mongodb/
Используем background-size и background-position для позиционирования фона
Небольшой туториал по настройке расположения фонового изображения.
https://www.sitepoint.com/how-to-use-css-background-size-and-background-position
Frontend meetup (Online)
1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения
2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.
3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.
4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером
🗓 12 июля, начало в 19:00 мск, Среда
🚀 Телеграмм канал с анонсами митапов
✅ Регистрация на мероприятие
Введение в нативное CSS наследование
https://www.sitepoint.com/an-introduction-to-native-css-nesting/
ESLint Plugin Perfectionist
Плагин для ESLint, содержащий правила для сортировки данных в вашем коде. Объекты, импорты, TS типы, JSX пропсы и всё остальное.
https://github.com/azat-io/eslint-plugin-perfectionist
Эффект с svg фильтрами
Необычный эффект появления изображений при скролле.
Демо | Github
https://tympanus.net/codrops/2023/07/05/on-scroll-svg-filter-effect/
Git для профессионалов
Туториал по хорошим практикам коммитов, видам и выбору branch стратегии, а также способам разрешения мерж конфликтов и использованию merge/rebase.
https://www.youtube.com/watch?v=Uszj_k0DGsg
Открой для себя лучший способ найти работу на удаленке или в офисе: подпишись на React Job
Здесь вы найдете:
➡️ Вакансии от ведущих IT-компаний (таких как Яндекс, Сбер, Intel)
➡️ Вакансии стартапов, которые не представлены на других сайтах;
➡️ Предложения от зарубежных компаний с возможностью релокации;
➡️ Стажировки и обучающие материалы для карьерного роста
Цени свое время - подпишись на @Job_React
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 мы придумали еще кучу разных активностей.
Например, их эксперты будут публично ревьювить код наших академиков!
Полный курс Redux Toolkit + RTK Query для начинающих
https://www.youtube.com/watch?v=gPmYTqGPDWA&ab_channel=REDGroup
Frontend meetup (Online)
1. Построение микрофронтендной архитектуры. Первый взгляд, боли и решения —Никита Морозов, АО "МТТ"
В докладе будет представлен путь построения микрофронтендной архитектуры на примере проекта МТС «Exolve», а также поэтапный рассказ об эволюции проекта от webpack до vite, от SingleSPA до собственного решения
2. Бьем монолит. Основные практики — Гузенко Александр IT_ONE
Рассмотрим основные подходы к разбиению монолитных фронтедов.
3. Безопасный TypeScript. Защищаемся от any в кодовой базе —Максим Земсков, Яндекс
Как получить максимум безопастности при использования TypeScript. Какие настройки стоит использовать и как улучшить типизацию стандартных функций.
4. Beyond Frontend — Алексей Тюльдюков, VK
Как T-shape подход может помочь фронтенд разработчику стать техническим менеджером
🗓 12 июля, начало в 19:00 мск, Среда
🚀 Телеграмм канал с анонсами митапов
✅ Регистрация на мероприятие
XSS уязвимость в Telegram
Как в web версии Telegram можно выполнить XSS атаку на пользователя.
https://habr.com/ru/articles/744316/
NodeJS аутентификация: JWT vs Tokens
Способы аутентифицикации пользователей на стороне сервера - в каких случаях что использовать?
https://blog.logrocket.com/node-js-server-side-authentication-tokens-vs-jwt/
ChatGPT не заменит разработчиков, зато создаёт отличные мемы про них!
А ещё, вот курс посоветовал для тех, кто хочет расти дальше во фронтенде и перенимать лучшие практики индустрии от тимлидов в разработке. Доверять ли ему, уже посмотрите сами: https://clck.ru/34vEre
По промокоду FRONTDEV22 для вас скидка 7% на ближайший поток.
#timeweb_статьи_перевод #игры
Движок для игры от первого лица в 265 строках Javascript
⭐️⭐️◽️◽️◽️
📖Читать
Кластеризация приложения на NodeJS
Пример простого сервера с кластеризацией + нагрузочное тестирование
https://www.youtube.com/watch?v=YHPWG23cS4c&
Отзывчивая разметка без 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/