Что общего между Telegram-ботами, турникетами и светофорами: конечные автоматы на практике

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

Источник: <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Flenta.ru%2Fcomments%2Fnews%2F2022%2F01%2F19%2Fmmetro%2F&postId=1767177" rel="nofollow noreferrer noopener" target="_blank">пресс-служба Московского метрополитена</a>
6
1

Кейс модификации Tilda: разные слайдеры с фото и описание для каждого варианта в карточке товара

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

15
1
1

Календарь в телеграм боте на Node.js за 5 минут: готовое решение.

Создание календаря c датами
1

Как правильно работать с цепочками промисов в JavaScript: без сложностей и путаницы

Как правильно работать с цепочками промисов в JavaScript: без сложностей и путаницы
3

Кейс модификации Tilda: создание слайдера с анимированными карточками отзывов для сайта

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

5

Миф: кодировать на нескольких языках программирования одновременно — это плохо

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

Клон Flappy Bird за 5 минут с помощью chatGPT на React JS!

Пишу клон игры Flappy Bird с помощью chatGPT и новейшей текстовой модели o1 на React JS!

1

Топ-5 языков программирования, которые стоит изучить в этом году 💻✨

В постоянно развивающемся мире технологий быть на шаг впереди - значит быть в курсе последних достижений в области программирования. Независимо от того, являетесь ли вы новичком или опытным разработчиком, вот топ-5 языков программирования, которые стоит изучить в этом году:

Как сделать свое активити для Битрикс24 без написания кода

С помощью ChatGPT можно генерировать код для автоматизации Битрикс24, а с помощью REST.js - внедрять его моментально

Как сделать свое активити для Битрикс24 без написания кода

🌐Как работает браузер? Понимание основ веб-серфинга🌐

Веб-браузер — это ключевой инструмент для доступа к информации в Интернете. Он позволяет нам просматривать веб-страницы, запускать веб-приложения и взаимодействовать с онлайн-контентом. Но как именно браузер выполняет свою работу? В этой статье мы рассмотрим основные этапы работы браузера, от ввода URL до отображения веб-страницы на экране.

1

Фильтр мата на JavaScript

Написал Телеграм бота для фильтрации сообщений в чатах телеграм от мата😎

2

UI-Kit vs Код: Гонка с препятствиями за время вёрстки

Представьте себе: вы — веб-разработчик, вам нужно сверстать сайт.

9
1

Как управлять сервером с помощью Telegram бота на JavaScript?

Как управлять сервером с помощью Telegram бота на JavaScript? Написал Telegram бота, который выступает в роли системного администратора сервера, на JavaScript и фреймворке grammY!

Основные этапы разработки сайта: От концепции до запуска

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

Программист за работой 

Как обучить нейросеть в Teachable Machine и автоматически пройти капчу Amazon

В этой статье мы создадим и обучим собственную нейросеть с помощью Google Teachable Machine и разработаем API для автоматического решения капчи Amazon.

Создать нейросеть и решить капчу Amazon
29

Написал Telegram бота для подготовки к собеседованию на Frontend разработчика

Я решил написать своего Telegram бота викторину для подготовки к собеседованию на Frontend-разработчика.

Telegram бот для подготовки к собеседованию

5 популярных баз данных для веб-приложений

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

## Использование JavaScript в бизнесе: как повысить конверсию с помощью технологий

JavaScript (JS) представляет собой мощный инструмент, способный значительно улучшить пользовательский опыт и повысить конверсию на веб-сайте. В данной статье мы рассмотрим примеры успешного использования JavaScript в бизнесе и его влияние на рост конверсии.

1

🖥 Квинтэссенция знаний о современной веб-разработке на JavaScript

🖥 Квинтэссенция знаний о современной веб-разработке на JavaScript

React 19 уничтожит все фреймворки

React 19 уничтожит все фреймворки
2

Языки программирования в веб-разработке: От HTML до JavaScript🌐🖥️

Языки программирования в веб-разработке: От HTML до JavaScript🌐🖥️

Разработка браузерных игр с использованием Phaser3, React, Typescript

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

Курсы для тех, кто хочет стать программистом

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

2

React Custom Hook: useTimeout

React Custom Hook: useTimeout

React Custom Hook: useStorage

React Custom Hook: useStorage

One of the key advantages of this custom hook is its simplicity. You can use it to store any type of data, such as strings, numbers, or even complex objects, with just a few lines of code. Additionally, useStorage handles the serialization and deserialization of data for you, so you don't have to worry about converting values to and from JSON.

React Custom Hook: useStateWithHistory

React Custom Hook: useStateWithHistory
  • Automatic history tracking: useStateWithHistory automatically keeps track of the values you set, allowing you to access the complete history whenever you need it.
  • Efficient memory usage: The hook utilizes a capacity parameter, ensuring that the history doesn't grow indefinitely. You can define the maximum number of historical values to keep, prevent…

React Custom Hook: useScript

React Custom Hook: useScript

One of the significant advantages of useScript is its ability to handle script loading asynchronously. By setting the script's async attribute to true, you ensure that it won't block the rendering of your application. This improves the performance and overall user experience, especially when dealing with larger scripts or slow network connections.

React Custom Hook: useRenderCount

React Custom Hook: useRenderCount

One of the major advantages of using useRenderCount is its simplicity. By abstracting the logic into a reusable hook, you can easily integrate it into any component without cluttering your codebase. Additionally, it provides a clear and concise way to monitor render behavior, which can be crucial for performance optimization and debugging.

React Custom Hook: usePrevious

React Custom Hook: usePrevious

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for your…

React Custom Hook: useOnScreen

React Custom Hook: useOnScreen
1

React Custom Hook: useOnlineStatus

React Custom Hook: useOnlineStatus

One of the main advantages of "useOnlineStatus" is its simplicity. By importing and using this hook in your component, you can effortlessly access the online status of the user. The hook internally uses the "navigator.onLine" property to determine the initial online status and dynamically updates it whenever the user's connectivity changes.

1

React Custom Hook: useMediaQuery

React Custom Hook: useMediaQuery

One of the key advantages of this custom hook is its simplicity and reusability. With just a few lines of code, you can effortlessly implement responsive behavior throughout your application. Whether you need to conditionally render components, apply specific styles, or trigger different functionality based on screen size, useMediaQuery has got you…

1

React Custom Hook: useLongPress

React Custom Hook: useLongPress

One of the key advantages of useLongPress is its simplicity. By utilizing this hook, developers can easily define a long-press action on any element in their React application. With just a few lines of code, the hook takes care of handling the intricacies of tracking the long-press duration and triggering the associated callback function.

1

React Custom Hook: useHover

React Custom Hook: useHover

One of the key advantages of useHover is its simplicity and reusability. By encapsulating the hover logic within the hook, you can easily use it across multiple components without duplicating code. This promotes clean and maintainable code, saving you time and effort in the long run.

1

React Custom Hook: useFetch

React Custom Hook: useFetch

The useFetch hook also offers flexibility through its customizable options parameter. Developers can pass additional headers, query parameters, or request options as needed, ensuring compatibility with various APIs. The hook follows best practices by providing default options for setting the Content-Type header as application/json, promoting clean…

React Custom Hook: useEventListener

React Custom Hook: useEventListener

One of the major advantages of useEventListener is its flexibility. You can specify the event type, callback function, and even the element where the event listener should be attached. This flexibility allows you to tailor event handling to your specific needs, enhancing the reusability of your code.

React Custom Hook: useEffectOnce

React Custom Hook: useEffectOnce

By encapsulating the repetitive useEffect pattern, useEffectOnce allows you to focus on the logic within the effect function itself. This elegant solution saves you from writing boilerplate code repeatedly and helps keep your component files clean and concise.

React Custom Hook: useDeepCompareEffect

React Custom Hook: useDeepCompareEffect

One of the key advantages of useDeepCompareEffect is its ability to prevent unnecessary re-renders. By performing a deep comparison between the current and previous dependencies, the hook intelligently determines if the effect should be triggered, leading to optimized performance in scenarios where shallow comparisons fall short.

React Custom Hook: useDebugInformation

React Custom Hook: useDebugInformation

One of the main advantages of useDebugInformation is its simplicity. By integrating just a few lines of code into your component, you gain access to a wealth of debugging data. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last render. This comprehensive information empowers you to analyz…

React Custom Hook: useDebounce

React Custom Hook: useDebounce

One of the main advantages of useDebounce is its simplicity and flexibility. By wrapping your callback function, delay duration, and any dependencies in this custom hook, you can effortlessly implement debouncing functionality without cluttering your component code. The hook takes care of managing the timeout and clears it when necessary, ensuring…