Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Управляйте маятником, чтобы построить самую высокую (и устойчивую) башню из падающих сверху постов. Следите за временем на каждый бросок по полоске справа: если она закончится, пост упадет мимо башни.

Башня

Аркады, Строительство, На ловкость

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Web-программирование

С этим тегом используют

Программирование IT Web Программист Javascript Веб-разработка HTML Все
783 поста сначала свежее
yegorpolunin.69
yegorpolunin.69
5 месяцев назад

Создание простого градостроительного симулятора в браузере на HTML, CSS и JavaScript⁠⁠

Создание простого градостроительного симулятора в браузере на HTML, CSS и JavaScript — это интересная задача, которая может быть решена разными способами. Ниже предложен базовый пример, как можно создать исключительно простую версию такого симулятора. Этот пример будет включать в себя представление сеткой, на которую пользователь может кликать, чтобы "строить" здания.

### HTML

Начнем с HTML-файла, который создаст основную структуру страницы с элементом canvas для рисования:

```html

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Градостроительный Симулятор</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Градостроительный Симулятор</h1>

<canvas id="cityCanvas"></canvas>

<script src="script.js"></script>

</body>

</html>

```

### CSS

В CSS файле мы зададим размеры нашего canvas и добавим некоторые базовые стили для оформления:

```css

body {

display: flex;

flex-direction: column;

align-items: center;

font-family: Arial, sans-serif;

}

canvas {

border: 1px solid black;

margin-top: 20px;

cursor: pointer;

}

h1 {

margin-bottom: 0;

}

```

### JavaScript

JavaScript будет использоваться для управления логикой игры. Основная идея — это создать сетку, на которой пользователь сможет "строить" здания путем кликов:

```javascript

const canvas = document.getElementById('cityCanvas');

const ctx = canvas.getContext('2d');

const gridSize = 10;

const cellSize = 40; // Размер клетки на сетке

canvas.width = gridSize * cellSize;

canvas.height = gridSize * cellSize;

const cityGrid = new Array(gridSize).fill(0).map(() => new Array(gridSize).fill(0));

// Функция для отрисовки сетки

function drawGrid() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let x = 0; x < gridSize; x++) {

for (let y = 0; y < gridSize; y++) {

ctx.strokeStyle = 'gray';

ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);

if (cityGrid[x][y] === 1) { // Если построено здание

ctx.fillStyle = 'blue';

ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);

}

}

}

}

// Обработка клика

canvas.addEventListener('click', (event) => {

const rect = canvas.getBoundingClientRect();

const x = Math.floor((event.clientX - rect.left) / cellSize);

const y = Math.floor((event.clientY - rect.top) / cellSize);

cityGrid[x][y] = cityGrid[x][y] === 0 ? 1 : 0;

drawGrid();

});

// Начальная отрисовка сетки

drawGrid();

```

### Описание

1. **HTML**: Создает базовый каркас страницы с canvas, где будет происходить рисование.

2. **CSS**: Определяет стили для страницы и canvas, добавляя границу и стили для текста.

3. **JavaScript**: Определяет сетку города, состоящую из массивов. Пользователь может кликать на клетку сетки, чтобы "строить" (или "сносить") здания, используя двумерный массив для отслеживания состояния каждой клетки.

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

Показать полностью
Программирование HTML Web-программирование Программа Технологии Браузер Компьютер Текст Длиннопост
2
6
a3at0s
a3at0s
5 месяцев назад
Web-технологии

Опенсорсный проект на Vue3 + Ionic⁠⁠

Приветствую, друзья!

Недавно я опубликовал пост о своем мобильном приложении MyTasks.
Данный пост больше нацелен на разработчиков (начинающих и более опытных).
Я решил сделать этот проект опенсорсным, ссылка на проект в github:
https://github.com/azatgt1996/my-tasks.

Цель проекта: поделиться опытом разработки мобильного приложения на Vue3 и Ionic Capacitor.
Проект не сложный, надеюсь начинающие смогут понять код, старался декомпозировать на модули и компоненты, давать хорошие названия им.
Также буду рад увидеть фидбек от более опытных разработчиков в плане лучших практик разработки.

Немного про фичи приложения:
- добавление, редактирование, выполнение и удаление задач (последние 2 действия можно выполнять прямо в списке свайпами влево/вправо)
- мультиязычность, темная тема, настройки
- категории задач
- групповые действия с задачами
- уведомления и приоритеты задач
Ссылка на само приложение:
https://play.google.com/store/apps/details?id=com.kvarta.myt...

Также проект можно смело использовать как костяк для собственных проектов, что ускорит разработку.
И пару слов почему решил использовать такой стек. Vue3 и Ionic являются удобными инструментами для фронтенд разработчика, так как имеется хорошая документация с примерами. Для разработки на Ionic нет необходимости запускать android-эмулятор, что сильно экономит время и ресурсы компьютера. Просто запускаете проект и сразу видите результат в вашем браузере.

Спасибо за внимание!

Показать полностью
[моё] Vue Javascript Frontend Web-программирование Приложение на Android Текст
2
3
programmator69
programmator69
6 месяцев назад
Web-технологии

Плавное погружение в SvelteKit на примере создания сайта знакомств. Часть 6⁠⁠

Посмотреть: рутуб, youtube

С озвучкой помог Борис из SaluteSpeech

Содержание:

  • Страница с чатами и совпадениями

Показать полностью
[моё] Web-программирование Javascript Pikaweb Видео
0
3
programmator69
programmator69
6 месяцев назад
Web-технологии
Серия SvelteKit для грудничков

Плавное погружение в SvelteKit на примере создания сайта знакомств. Часть 5⁠⁠

Посмотреть: рутуб, youtube

С озвучкой помог Максим бот из fretts

Содержание:

  • Всплывающие уведомления при совпадении

  • Страница с историей лайков/дизлайков

Показать полностью
[моё] RUTUBE Web-программирование Видео
0
6
progerdan
progerdan
6 месяцев назад
Web-технологии

Разработка сервиса управления серверами⁠⁠

Привет всем! 🚀

С сегодняшнего дня я начинаю делиться процессом разработки своего сервиса для управления серверами и деплою проектов.

Разработка сервиса управления серверами Стартап, Сервер, Программирование, Web, Web-программирование

Страница управления пакетами

Ключевые возможности:

• Быстрое развертывание серверов: автоматическая подготовка и установка сервера, поддержка различных провайдеров (timeweb, ihor, regru и другие) (автоматический заказ услуг и дальнейшая работа с ними)

• Управление окружением: Установка пакетов и управление конфигурациями (nginx, bunker, sudo)

• Управление сайтами: простое создание и настройка сайтов с поддержкой популярных платформ: Laravel, WordPress, NodeJS

• Управление DNS: легкое управление DNS-записями через удобный интерфейс.

• Балансировка нагрузки: настройка балансировщиков нагрузки в один клик для распределения трафика между серверами.

• Уведомления: интеграция с e-mail, Telegram и другими сервисами для получения уведомлений о деплоях и событиях.

• SSL-сертификаты: поддержка Let’s Encrypt с установкой в один клик.

• Управление очередями: автоматическое создание и управление конфигурациями Supervisor для обработки очередей.

На первом этапе сосредоточусь на работе с пакетами, после чего перейду к поддержке веб-сайтов, интеграции с VCS (пока только Github), деплою и SSL.

Следите за апдейтами — впереди будет много интересного

Показать полностью 1
[моё] Стартап Сервер Программирование Web Web-программирование
4
15
A.Kristina
A.Kristina
6 месяцев назад
Интересный AliExpress

Что подарить инженеру-программисту? 8 идей⁠⁠

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Металлические эмалированные броши с различными кодами и программным юмором. Стоят около 100 руб. Ссылка на них.

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Футболка с забавным котом-программистом. Стоит около 1300 руб. Ссылка на неё

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Набор с программатором для перепрошивки Bios на материнских платах компьютера и ноутюука. Стоит набор около 550 руб. Ссылка на него

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Большой набор стикеров-наклеек на различную компьютерную тематику. Стоит набор из 50 штук 195 руб. Ссылка на него

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост
Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Линейка электронного инженера. Стоит 113 руб. Ссылка на неё.

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Набор для сборки и программирования на компьютере умного электронного робота на гусеницах. Стоит около 8 000 руб. Ссылка на него

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Прикольный подарок-кружка с различными надписями из будней программиста. Ссылка на кружку. Стоит около 700 руб.

Что подарить инженеру-программисту? 8 идей AliExpress, Товары, Китайские товары, Программист, Инженер, Я у мамы инженер, Подарки, Сувениры, Программирование, Web-программирование, Электроника, Гаджеты, Компьютерное железо, Длиннопост

Брелок с ноутбуком, клавиатурой и мышкой. Стоит по акции Комбо 70 руб. Ссылка на него

Показать полностью 9
AliExpress Товары Китайские товары Программист Инженер Я у мамы инженер Подарки Сувениры Программирование Web-программирование Электроника Гаджеты Компьютерное железо Длиннопост
3
pikabu.education
pikabu.education
6 месяцев назад
Серия Программирование

Топ-5 курсов по разработке на React⁠⁠

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

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

  • Курс «Специализация Frontend-разработчик» от Skillfactory

  • Курс «JavaScript Developer. Basic» от Otus

  • Курс «Frontend-разработчик» от Академия Eduson

  • Курс «Профессия Фронтенд-разработчик» от Skillbox

  • Курс «Web-разработчик» от ProductStar

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Обзор курсов

1. Курс «Специализация Frontend-разработчик» от Skillfactory
Вы научитесь создавать современные веб-сайты и приложения с нуля. Освоите базовые технологии верстки (HTML и CSS), программирование на JavaScript, работу с библиотекой React и основы backend-разработки.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 9 месяцев.
Подробности:

  • пошаговое обучение;

  • много практики;

  • техническое задание для финального проекта подготовлено сотрудниками компании СКАН;

  • работа с фреймворками Angular и Vue.js в дополнение к React;

  • высокая сложность на этапах изучения JavaScript и React;

  • только базовые знания Node.js;

  • программа трудоустройства;

  • доступ к материалам курса навсегда.

Посмотреть программу курса >>>


2. Курс «JavaScript Developer. Basic» от Otus
Вы научитесь основам и современным подходам разработки на JavaScript, включая использование TypeScript и библиотеки React. Поймете, как работать с системой контроля версий Git, тестировать код, создавать одностраничные приложения (SPA) и управлять состоянием с помощью Redux.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: 96 000 ₽
Цена со скидкой: 81 600 ₽
Длительность: 5 месяцев.
Подробности:

  • полный цикл обучения;

  • практическая направленность;

  • современные инструменты: работа с TypeScript, Redux, Git, тестовыми фреймворками;

  • фокус на реальной разработке;

  • высокая нагрузка для новичков;

  • в подарок видеокурс «JavaScript для начинающих» для самостоятельного прохождения;

  • налоговый вычет.

Посмотреть программу курса >>>

3. Курс «Frontend-разработчик» от Академия Eduson
Вы не только научитесь создавать сайты, но и освоите управление базами данных, проектирование API и принципы контейнеризации.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: зависит от тарифа.
Подробности:

  • обширная программа;

  • практическая направленность;

  • работа с популярными инструментами;

  • стажировка в IT-компании;

  • помощь в трудоустройстве;

  • доступ к курсу навсегда;

  • диплом о профессиональной переподготовке.

Посмотреть программу курса >>>


4. Курс «Профессия Фронтенд-разработчик» от Skillbox
Вы освоите HTML, CSS, JavaScript, TypeScript, а также популярные фреймворки React.js или Vue.js на выбор.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 9 месяцев.
Подробности:

  • глубокая проработка тем;

  • выбор фреймворка: React.js или Vue.js;

  • большой объем практики;

  • обучение ключевым современным технологиям;.

  • высокая нагрузка;

  • курс обновлен в 2024 году;

  • помощь в трудоустройстве;

  • доступ навсегда;

  • налоговый вычет.

Посмотреть программу курса >>>


5. Курс «Web-разработчик» от ProductStar
Вы научитесь создавать современные веб-приложения с нуля, начиная с основ HTML и CSS и завершая продвинутыми технологиями, такими как JavaScript, React и TypeScript.

Топ-5 курсов по разработке на React Учеба, Обучение, React, Frontend, Web-программирование, Онлайн-курсы, Длиннопост

Цена: зависит от тарифа.
Длительность: 10 месяцев.
Подробности:

  • глубокое погружение в профессию;

  • практическая направленность;

  • высокая нагрузка;

  • отсутствие фокуса на одной специальности: для тех, кто хочет стать специалистом только во фронтенде или только в бэкенде, программа может быть слишком обширной;

  • курс обновлен в 2024 году;

  • помощь в трудоустройстве;

  • стажировки в компаниях-партнерах;

  • подписка на РБК на 6 месяцев;

  • 3 мини-курса в подарок;

  • интенсив на выбор.

Посмотреть программу курса >>>

Реклама. ООО Скилфэктори, ИНН 9702009530, ООО Отус онлайн-образование, ИНН 9705100963, ООО Эдюсон, ИНН 7729779476, ЧОУ ЧАСТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ДОПОЛНИТЕЛЬНОГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ СКИЛБОКС (КОРОБКА НАВЫКОВ), ИНН 9704088880, ООО ТРИВИУМ, ИНН 7806297293.

Показать полностью 6
Учеба Обучение React Frontend Web-программирование Онлайн-курсы Длиннопост
22
user9803998
user9803998
6 месяцев назад
Web-технологии

Концепт мобильного приложения для клиники⁠⁠

Стартовые экраны мобильного приложения для медицинского центра в Канаде. Будем рады обратной связи, на сколько вам откликается концепт ?

[моё] Медицина IT Web-программирование Приложение Apple Приложение на Android Программа Тестирование Веб-разработка Графический дизайн Дизайн Сайт Клиники Частная клиника Видео
13
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии