Настраиваем деплой приложений с Dokku
Dokku - это мини-Heroku, который можно установить на свой сервер и удобно деплоить приложения командой git push.
В статье — пошаговый туториал по установке, первоначальной настройке и конфигурации приложений для деплоя.
https://jem-space.ru/dokku-deploy/
Dokku - это мини-Heroku, который можно установить на свой сервер и удобно деплоить приложения командой git push.
В статье — пошаговый туториал по установке, первоначальной настройке и конфигурации приложений для деплоя.
https://jem-space.ru/dokku-deploy/
10 консольных команд, необходимых для разработчика
Grep, cat, tail и ещё несколько команд, которые повышают удобство и скорость разработки.
https://www.trevorlasn.com/blog/10-essential-terminal-commands-every-developer-should-know
Grep, cat, tail и ещё несколько команд, которые повышают удобство и скорость разработки.
https://www.trevorlasn.com/blog/10-essential-terminal-commands-every-developer-should-know
Кастомный слайдер с использованием API привязки позиционирования
Пошаговый туториал по созданию слайдера на основе современных фич CSS: Anchor Positioning API и Scroll-Driven Animation.
https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/
Пошаговый туториал по созданию слайдера на основе современных фич CSS: Anchor Positioning API и Scroll-Driven Animation.
https://frontendmasters.com/blog/custom-range-slider-using-anchor-positioning-scroll-driven-animations/
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем таймер обратного отсчета на чистом CSS
https://blog.logrocket.com/how-to-build-countdown-timer-using-css/
https://blog.logrocket.com/how-to-build-countdown-timer-using-css/
This media is not supported in your browser
VIEW IN TELEGRAM
‼️Тест по React JS от OTUS
— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!
👉ПРОЙТИ ТЕСТ - https://vk.cc/czSWZI
Курс доступен в рассрочку.
❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
— Ответьте на 30 вопросов и проверьте, насколько хорошо вы знаете язык.
Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js по спец. цене!
👉ПРОЙТИ ТЕСТ - https://vk.cc/czSWZI
Курс доступен в рассрочку.
❇️ Пройдите тест и получите:
✔️ Живое общение с экспертами
✔️Получите видео-курс по Git в подарок
✔️ Лучшие открытые уроки прошлых наборов курса
✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+
✔️ Скидку на прохождение онлайн курса «React.js Developer»
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru
CSS Grid Areas
Свежий взгляд на CSS grid template areas и как использовать их потенциал по максимуму. Интерактивное руководство.
https://ishadeed.com/article/css-grid-area/
Свежий взгляд на CSS grid template areas и как использовать их потенциал по максимуму. Интерактивное руководство.
https://ishadeed.com/article/css-grid-area/
Telegram Mini App. Как создать Web App с нуля
Туториал по созданию веб-приложения для Telegram и работе с Telegram API.
https://habr.com/ru/companies/amvera/articles/838180/
Туториал по созданию веб-приложения для Telegram и работе с Telegram API.
https://habr.com/ru/companies/amvera/articles/838180/
Мониторим показатели Web Vitals с web-vitals.js
Показатели CLS, INP и LCP теперь можно удобно отслеживать в консоли без необходимости запускать Lighthouse!
https://www.debugbear.com/blog/core-web-vitals-js
Показатели CLS, INP и LCP теперь можно удобно отслеживать в консоли без необходимости запускать Lighthouse!
https://www.debugbear.com/blog/core-web-vitals-js
Консольные команды для чайников
Хотите быть адептом терминала, но не понимаете что делают те или иные команды?
Держите сайт, который помогает разобраться с консолью, объясняя, что делает команда и значение каждого флага или опции в ней.
https://explainshell.com/
Хотите быть адептом терминала, но не понимаете что делают те или иные команды?
Держите сайт, который помогает разобраться с консолью, объясняя, что делает команда и значение каждого флага или опции в ней.
https://explainshell.com/
Как оптимизировать ваше приложение еще до того как оно загрузилось?
О сетевых взаимодействиях, которые происходят во время запросов — какие и как их можно ускорить.
https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/
О сетевых взаимодействиях, которые происходят во время запросов — какие и как их можно ускорить.
https://blog.sentry.io/how-to-make-your-web-page-faster-before-it-even-loads/
Диалоговое окно с анимацией на показ и скрытие
Простое демо с нативной поддержкой входных и выходных анимаций.
https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/
Простое демо с нативной поддержкой входных и выходных анимаций.
https://frontendmasters.com/blog/the-dialog-element-with-entry-and-exit-animations/
Объясняем, как работают генераторы в JS (сложно)
Глубокое погружение в одну из малоиспользуемых фич JS — генераторы.
https://www.reactsquad.io/blog/understanding-generators-in-javascript
Глубокое погружение в одну из малоиспользуемых фич JS — генераторы.
https://www.reactsquad.io/blog/understanding-generators-in-javascript
Sticky хедер + элементы на всю высоту: хитрая комбинация
Sticky-позиционирование не всегда надежное, и может быть нарушено многими факторами.
Вот небольшой разбор, как можно сделать его более стабильным, если вам нужно использовать разметку с заголовком и элементами на всю страницу.
https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/
Sticky-позиционирование не всегда надежное, и может быть нарушено многими факторами.
Вот небольшой разбор, как можно сделать его более стабильным, если вам нужно использовать разметку с заголовком и элементами на всю страницу.
https://www.smashingmagazine.com/2024/09/sticky-headers-full-height-elements-tricky-combination/
Создаем React с нуля
Большая статья с собственной реализацией основных фич React: рендер, эффективное обновление DOM, хуки.
https://www.rob.directory/blog/react-from-scratch
Большая статья с собственной реализацией основных фич React: рендер, эффективное обновление DOM, хуки.
https://www.rob.directory/blog/react-from-scratch
Разбираемся с Record Type в TS
Создание, использование и отличие от Tuple.
https://www.sitepoint.com/typescript-record-type-comprehensive-guide/
Создание, использование и отличие от Tuple.
https://www.sitepoint.com/typescript-record-type-comprehensive-guide/
Даты в JS скоро будут исправлены
Что не так с Date и как новый Temporal API упростит работу с датами в JS.
https://docs.timetime.in/blog/js-dates-finally-fixed/
Что не так с Date и как новый Temporal API упростит работу с датами в JS.
https://docs.timetime.in/blog/js-dates-finally-fixed/
Улучшаем производительность в аспекте шрифтов
Большое руководство по оптимизации загрузки и использованию шрифтов в веб-приложениях.
https://www.debugbear.com/blog/website-font-performance
Большое руководство по оптимизации загрузки и использованию шрифтов в веб-приложениях.
https://www.debugbear.com/blog/website-font-performance
CSS display: contents
Ахмад Шадид подробно рассказывает, что за новое свойство contents, как оно влияет на отображение содержимого и в каких случаях его удобно использовать.
https://ishadeed.com/article/display-contents/
Ахмад Шадид подробно рассказывает, что за новое свойство contents, как оно влияет на отображение содержимого и в каких случаях его удобно использовать.
https://ishadeed.com/article/display-contents/
Docker для начинающих
Быстрое введение за 1 час, для тех, кто еще не знаком с контейнеризацией.
https://www.youtube.com/watch?v=lr1rYnUubpQ
Быстрое введение за 1 час, для тех, кто еще не знаком с контейнеризацией.
https://www.youtube.com/watch?v=lr1rYnUubpQ