29203
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu
Появление WebGL изображений при скролле
Эффект обратной пикселизации изображений при скролле с использованием WebGL и GSAP
https://tympanus.net/codrops/2024/02/07/on-scroll-revealing-webgl-image-explorations/
Демо | GitHub
Оборачиваем в Docker ваше NextJs приложение с помощью Github Actions
Пошаговый туториал с конфигами, позволяющий настроить билд приложения с Github Actions.
https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions
От множества к единому - переводим наши проекты в монорепозиторий
В каких случаях стоит хранить проекты в монорепе, и как слить все проекты в один, не потеряв при этом историю комитов.
https://www.aha.io/engineering/articles/monorepo
#css #accessibility
HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5
⭐️⭐️◽️◽️◽️
📖 Читать
Изучаем доступность
Полный туториал по a11y познакомит вас с основами доступности, аспектами разаботки веб приложений с учетом нюансов доступности, и почему это важно.
https://www.youtube.com/watch?v=e2nkq3h1P68
Создаем игру Gorillas на JS
Подробный туториал по разработке игры с использоваием JS + Canvas.
https://www.freecodecamp.org/news/gorillas-game-in-javascript/
Оптимизируем время до первого байта
Несколько советов по улучшению метрики TTFB.
https://web.dev/articles/optimize-ttfb
Создаем размытый box-shadow эффект
Используем комбинацию масок, градиентов и фильтров для создания более мягкого и интересного аналога box-shadow.
https://www.smashingmagazine.com/2024/01/css-blurry-shimmer-effect/
Утечки памяти, которые не утечки
О видах памяти, как работает сборщик мусора и как можно найти причину большого расхода памяти в NodeJs приложениях.
https://habr.com/ru/companies/alfa/articles/789782/
Перед мемоизацией
Несколько советов от Дена Абрамова по улучшению производительности React приложений, на которые стоит обратить внимание перед использованием memo и useMemo.
https://overreacted.io/before-you-memo/
Passkey аутентификация на Express.js + Docker
Web Authentication API туториал
https://www.youtube.com/watch?v=lzelnAI914A
12 свойств CSS, которые можно использовать в ваших проектах
Несколько советов по использованию относительно новых, но уже поддерживаемых CSS свойств, которые упростят вашу разработку или позволят обойтись без использования JS.
https://moderncss.dev/12-modern-css-one-line-upgrades/
Зумим фон при скролле
Пример реализации Scroll Driven Animations
https://frontendmasters.com/blog/background-size-zooming-with-scroll-driven-animations/
Гайд: проектируем систему цветов. Всё про styles, tokens, variables
https://habr.com/ru/articles/781082/
Используем возможности console на максимум
Что можно сделать, используя CSS, SVG и HTML в выводе console (если вы не в Safari).
https://frontendmasters.com/blog/console-delight/
Иммутабельные изменения массивов с Array.prototype.with
Заметка о том, как with поможет с модификацией массивов, создавая новую копию с изменениями.
https://web.dev/blog/array-with?hl=en
‼️Всем кодерам посвящается‼️
Code ready — лучшие подборки эффектов, анимаций и многое другое для твоих проектов, сразу с готовым кодом и примером их использования.
🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready
За гранью пикселей и rems в CSS - относительные единицы измерения основанные на viewport
Частые ловушки, в которые попадают разрабочики при использовании относительных единиц измерения в CSS.
https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-in-css/relative-length-units-based-on-the-viewport
Разбираемся с Interaction to Next Paint
О чем говорит новая метрика Core Web Vital и как ее можно оптимизировать.
https://blog.logrocket.com/exploring-interaction-next-paint-new-core-web-vital/
Как получить реальный опыт во фронтенд-разработке за 7 дней?
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
Что нового в DevTools
Обновления DevTools v.122: официальное расширение для записи, новый функционал таймлайна, улучшенная работа с куками и еще куча всего.
https://developer.chrome.com/blog/new-in-devtools-122?hl=en
#timeweb_статьи_перевод #javascript
Важные аспекты Unicode, о которых должен знать каждый разработчик JavaScript
⭐️◽️◽️◽️◽️
📖 Читать
#вакансия
Разработчик фронтенда в HR Tech
Яндекс
Москва/Санкт-Петербург
гибрид
middle, senior, team lead
Что нужно делать
- развивать и поддерживать один или несколько сервисов;
- улучшать инфраструктуру, стабильность и скорость сервисов;
- разрабатывать десктопные и мобильные версии сервисов, участвовать в ревью кода и обсуждении технических решений;
- взаимодействовать со смежными командами.
Мы ждем, что вы
- работали с TypeScript и React не меньше двух лет;
- пишете эффективный и понятный код;
- способны объяснять свои решения и договариваться с коллегами;
- внимательны к пожеланиям и проблемам пользователей;
- самостоятельны и готовы работать в команде.
Будет плюсом, если вы
- работали с Node.js, NestJS, Effector, Redux, Docker.
Откликнуться
Для связи в тг @maslova_y94
Как посчитать временную сложность алгоритма
Что такое временная сложность и примеры расчета для разных видов алгоритмов.
https://algo.monster/problems/runtime_summary
Python книги на русском - канал для скачивания Python книг на русском языке.
Что в нашем канале:
1. Книги по питону, которые помогут вам пройти собеседование на позицию Python Developer.
2. Все книги на русском языке
3. Все книги можно скачать в 2 клика
4. Всё, никакой другой воды.
Подписывайтесь и качайте книги: @pythonknigiru
Упрощаем работу с CSS View Transition c Velvette
Что такое View Transition и как он помогает анимировать экранные переходы - в статье.
https://tympanus.net/codrops/2024/01/19/making-css-view-transitions-easy-with-velvette/
Web Development 2024 Roadmap & Trends | Что учить в 2024?
Евгений Ковальчук собрал тренды для начинающих веб разработчиков, на которые стоит сделать упор при изучении. Все доп ресурсы в описании к видео.
https://www.youtube.com/watch?v=f76BnFk3pLI
Yandex Query: сервис федеративных запросов к Object Storage, PostgreSQL и ClickHouse®
Сервис позволяет выполнять аналитические и потоковые запросы к структурированным и частично структурированным данным с помощью YQL — диалекта SQL.
Возможности сервиса:
▫️ Межсистемная аналитика: выполняйте федеративные запросы сразу к Object Storage, PostgreSQL и ClickHouse®, агрегируйте полученные результаты и обрабатывайте их как единое целое.
▫️ Потоковая обработка данных: позволяет обрабатывать и анализировать данные в режиме реального времени по мере их поступления
▫️ Полностью управляемый сервис: нет необходимости следить за кластерами и управлять их мощностью. Ресурсы для исполнения запросов выделяются в момент запуска и освобождаются после завершения, а сами запросы начинают исполняться сразу же.
💬 Подробнее про сервис по ссылке.
CSS border-image
О сложном, но классном свойстве border-image: способы применения для реализации красивого дизайна.
https://www.smashingmagazine.com/2024/01/css-border-image-property/
- Как думаешь, изучить фронтед самостоятельно - реально?
- Вероятно, что да, но мы не советуем.
-А если нет возможности оплатить курс?
-Готов сразу взяться за дело?
Привет, это команда ICHY School и мы обучаем фронтенд разработке.
О тебе: хочешь стать разработчиком с нуля, изучаешь программирование самостоятельно или планируешь перейти в разработку из другой IT-профессии.
О нас:
⚡️Сначала трудоустройство, оплата потом. Все для твоей уверенности.
⚡️Куратор, с которым ты обсудишь все тонкости разработки и узнаешь все о работе в ведущих IT-компаниях
⚡️Реальные проекты в портфолио.
⚡️Живое общение и классное комьюнити
⚡️Подготовка и помощь в трудоустройстве
Интересно? Нам тоже!
Оставляй заявку здесь, продолжим наше знакомство! Реклама. ИП Панкратов И.В ИНН: 500915684952 Erid:2VtzqwH19SN