После того как я много лет использовал timetrap от Ruby (к сожалению, больше не поддерживаемый), я понял, что в экосистеме Node.JS нет аналога, и решил создать его.

Представляю track-time-cli, утилиту для отслеживания времени, которое вы тратите на свои проекты, и со временем просмотра полезных метрик и статистики о вашей производительности.

#NodeJS #TypeScript

https://dev-gang.ru/article/treker-vremeni-s-nodejs-cli-2q6khqlv1c/

На прошлой неделе коллега попросил меня оценить количество людей на мероприятии, и именно тогда нам обоим стало очевидно, что мои навыки оценки ужасны. Мне было так неловко! Той ночью я решил попробовать написать игру, которая поможет мне лучше оценивать.

#JavaScript #CSS #HTML

https://dev-gang.ru/article/sozdaite-ocenocznuu-igru-s-pomosczu-vanilla-javascript-zw4pt4ya62/

Если вы новичок в веб-разработке или только начинаете работать с Flask, эта запись в блоге — идеальное место для начала. Мы проведем вас через процесс создания базового приложения Flask с нуля. К концу у вас будет работающее приложение Flask и базовое понимание веб-разработки с использованием Python.

#Python #Flask

https://dev-gang.ru/article/sozdaite-svoe-pervoe-prilozhenie-python-flask-ea6ymx1o3c/

До сих пор мы рассматривали основы HTML и CSS, обсуждали различные методы, позволяющие размещать элементы на веб-странице, и изучали концепцию адаптивного дизайна, которая позволяет создавать веб-страницы, автоматически адаптирующиеся к различным размерам экрана.

В этой главе мы объединим все, что мы узнали до сих пор, чтобы воссоздать YouTube, используя только HTML и CSS.

#CSS #HTML

https://dev-gang.ru/article/vossozdaem-youtube-s-pomosczu-html-i-css-r57qqfmjii/

Удержать клиентов на веб-сайте может быть непросто, но есть трюк, который работает как шарм: отображение модального окна подписки, когда они собираются уйти. Это не только повышает конверсию, но и улучшает удержание клиентов на вашем сайте.

В этом посте мы узнаем, как реализовать эту функцию с помощью JavaScript DOM.

#JavaScript

https://dev-gang.ru/article/otobrazhat-modalnoe-okno-kogda-polzovateli-pokidaut-sait-zcaxr0h9tc/

В этом сообщении блога мы рассмотрим, как создать анимацию горизонтальной прокрутки с помощью HTML и Tailwind CSS. Он может добавить визуально привлекательный элемент на вашу следующую целевую страницу.

#CSS #HTML

https://dev-gang.ru/article/sozdanie-animacii-logotipa-s-prokrutkoi-s-pomosczu-tailwind-css-jiyhurmemb/

Хотели ли вы когда-нибудь добавить специальное сообщение или указание авторства, когда пользователи копируют текст с вашего сайта? Например, когда пользователи выделяют текст и нажимают Ctrl + C, вы можете захотеть указать оригинальный веб-сайт.

#JavaScript

https://dev-gang.ru/article/dobavte-specialnoe-soobsczenie-esli-polzovatel-skopiruet-tekst-bdjlvpa18h/

Вместо того, чтобы напрямую включать простой код проверки орфографии в свой проект, почему бы не превратить его в библиотеку, которую нам было бы легче использовать в других местах, а также публиковать публично.

#Elixir #Erlang

https://dev-gang.ru/article/sozdanie-biblioteki-elixir-dlja-proverki-orfografii-z3yoblbqtb/

Сегодня мы научимся создавать простое приложение Hello World, используя Ruby on Rails. Так отправимся же с вами в наше путешествие.

#Ruby

https://dev-gang.ru/article/sozdanie-prilozhenija-hello-world-v-ruby-on-rails-29d35hcrx8/

Существует способ смешивать цвета в чистом CSS.

Функциональная запись color-mix() принимает два значения цвета и возвращает результат их смешивания в заданном цветовом пространстве на заданную величину. Теперь у него достаточно хорошая поддержка браузеров, и мы можем его использовать.

#CSS

https://dev-gang.ru/article/kak-smeshat-cveta-v-css-gqi7h3vpw9/

Hanko — это легкое решение для аутентификации пользователей с открытым исходным кодом, которое поможет вам выйти за рамки паролей.

Узнайте, как быстро добавить аутентификацию и профиль пользователя в приложение Next.js с помощью Hanko.

#JavaScript #PostgreSQL #Next.js

https://dev-gang.ru/article/autentifikacija-prilozhenija-nextjs-s-pomosczu-autentifikacii-interfeisa-hanko-2naas69drg/

Обертывание компонентов пользовательского интерфейса для инкапсуляции настраиваемого поведения — распространенная практика при создании собственной библиотеки пользовательского интерфейса, особенно в более крупных командах, где общая библиотека используется среди множества приложений.

Основным преимуществом этого подхода является отделение зависимости от сторонней библиотеки, поскольку приложения-потребители вместо этого зависят от общей библиотеки.

#Vue.js

https://dev-gang.ru/article/sozdaite-svou-sobstvennuu-biblioteku-polzovatelskogo-interfeisa-vue-s-pomosczu-unstyled-primevue-core-i-tailwind-css-36697pgsq1/

В этом сообщении блога мы рассмотрим несколько примеров того, как использовать dangerouslySetInnerHTML и как безопасно очистить HTML перед настройкой с помощью dangerouslySetInnerHTML.

#JavaScript #React #HTML

https://dev-gang.ru/article/kak-bezopasno-ispolzovat-reactlysetinnerhtml-v-react-2t395bn11w/

При определении подкласса существуют разные способы вызова метода init родительского класса. Давайте начнем с базового класса и рассмотрим каждый из этих методов.

#Python #Django #Flask

https://dev-gang.ru/article/python-super-protiv-metoda-baseinit-ud71pxggb8/

При работе с Docker, чем быстрее мы сможем создать образ, тем быстрее будут наши рабочие процессы разработки и конвейеры развертывания. Кэш сборки Docker, также известный как кеш слоев, — это мощный инструмент, который может значительно ускорить сборку образа, если его можно использовать в разных сборках.

В этом посте мы рассмотрим, как работает кэш сборки Docker, и поделимся стратегиями его эффективного использования для оптимизации ваших Dockerfiles и сборок образов.

#Golang #Docker

https://dev-gang.ru/article/sozdavaite-obrazy-docker-bystree-ispolzuja-kesh-sborki-58m9sc2xih/

В этой статье мы поговорим о React SVG и о том, как он делает процесс добавления и обработки изображений на современных веб-сайтах более универсальным и увлекательным.

#React #JavaScript

https://dev-gang.ru/article/ispolzovanie-svg-v-react-zs6dwxs90w/

Когда мы перевели наше приложение с Node.js (Express) на Go, нам удалось уменьшить размер образа Docker с 2,8 ГБ до 400 МБ, что изначально нас устраивало. Однако, стремясь к более эффективному использованию ресурсов и более быстрому развертыванию, мы поняли, что все еще есть возможности для дальнейшего уменьшения размера изображения, поэтому мы решили попробовать новый подход.

#Golang #Docker

https://dev-gang.ru/article/optimizacija-obrazov-docker-s-pomosczu-mnogoetapnyh-sborok-i-bezdistributivnogo-podhoda-459pgm9ahk/

Проблема "undefined this keyword variable" в JavaScript обычно возникает при попытке доступа к свойству или методу с использованием this в функции, но контекст этого потерян или установлен неправильно. Есть несколько способов решения этой проблемы.

#JavaScript

https://dev-gang.ru/article/problema-undefined-this-keyword-variable-v-javascript-24ggyttm54/

Как разработчик, работающий над полнофункциональным приложением, вам необходима локальная среда разработки, максимально приближенная к производственной среде. Это позволит вам тестировать и отлаживать ваше приложение локально перед его развертыванием в рабочей среде.

#PostgreSQL #Docker #Next.js

https://dev-gang.ru/article/sozdanie-lokalnoi-sredy-razrabotki-zapusk-polnofunkcionalnogo-prilozhenija-nextjs-s-postgresql-i-minio-s-s-ispolzovaniem-docker-465fxeldo4/

Конкурентный режим (Concurrent Mode) и suspense - это две функции, меняющие правила игры, которые были представлены в последних версиях React. Они позволяют создавать более отзывчивые и производительные приложения, раскрывая возможности параллельного рендеринга и приостановленной загрузки.

В этом руководстве мы подробно рассмотрим обе функции и дадим практические советы о том, как эффективно использовать их в ваших собственных приложениях React.

#React #JavaScript

https://dev-gang.ru/article/kak-pobedit-parallelnyi-rezhim-i-ozhidanie-v-react-t244fmyxh6/

React предоставляет мощный способ создания пользовательских интерфейсов, но иногда вы сталкиваетесь с ситуациями, когда вам необходимо визуализировать компоненты за пределами обычного дерева React. Вот тут-то и пригодятся порталы.

Порталы позволяют отображать компонент за пределами его родительской иерархии DOM, что часто полезно для таких сценариев, как модальные окна, всплывающие подсказки или другие наложения.

#JavaScript #React

https://dev-gang.ru/article/sozdanie-portalov-v-react-s-pomosczu-huka-useportal-cyrn8xwy0v/