{"id":19831545,"url":"https://github.com/notacat1/mesto-project","last_synced_at":"2026-05-08T06:41:26.781Z","repository":{"id":169497941,"uuid":"645021376","full_name":"NotACat1/mesto-project","owner":"NotACat1","description":"\"Mesto\" is a web platform that provides the ability to create photo cards using JavaScript functionality. Here, users can share captivating locations and make them accessible to other participants. This way, a unique collection of moments and places is created, which can be explored and enjoyed.","archived":false,"fork":false,"pushed_at":"2023-10-20T13:16:17.000Z","size":3225,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-11T10:17:31.817Z","etag":null,"topics":["adaptive","asynchronous","asynchronous-programming","bem","bem-methodology","css","html","javascript","js","json","oop-principles","yandex-praktikum"],"latest_commit_sha":null,"homepage":"https://notacat1.github.io/mesto-project/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NotACat1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-24T18:44:48.000Z","updated_at":"2023-09-03T15:39:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"b158e5a4-4a70-4ade-9ca9-966cf5e91252","html_url":"https://github.com/NotACat1/mesto-project","commit_stats":null,"previous_names":["notacat1/mesto-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Fmesto-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Fmesto-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Fmesto-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2Fmesto-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NotACat1","download_url":"https://codeload.github.com/NotACat1/mesto-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241191533,"owners_count":19925286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adaptive","asynchronous","asynchronous-programming","bem","bem-methodology","css","html","javascript","js","json","oop-principles","yandex-praktikum"],"created_at":"2024-11-12T11:32:41.957Z","updated_at":"2025-10-21T07:21:29.756Z","avatar_url":"https://github.com/NotACat1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mesto\r\n\r\n![Проект Mesto](https://github.com/NotACat1/mesto-project/assets/113008873/ee7b6626-eb2d-49f9-809e-57e81413d4b4)\r\n\r\n## О проекте\r\n\r\n[Mesto](https://notacat1.github.io/mesto-project/) - это веб-платформа предоставляет возможность создавать фотокарточки, используя функциональность JavaScript. Здесь пользователи могут делиться захватывающими местами и делать их доступными для других участников. Таким образом, создается уникальная коллекция моментов и мест, которые можно исследовать и наслаждаться.\r\n\r\n## Реализованный функционал\r\n\r\n### 1. Добавление карточки\r\n\r\nСоздание новой фотокарточки и добавление ее в галерею предоставляют уникальную возможность для каждого пользователя. Здесь вы можете поделиться увлекательными снимками и получить оценку от других участников, создавая вместе невероятно разнообразную и интересную коллекцию изображений.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/567ae8d8-637c-4eba-855c-844cd0910421\r\n\r\n### 2. Лайк карточки\r\n\r\nВозможность ставить лайки к выложенным фотокарточкам доступна для каждого пользователя. Эта функция позволяет выразить свою позитивную реакцию на фотографии других пользователей и поделиться своим восхищением. С помощью нажатия на кнопку \"Лайк\" пользователи могут показать, что фотокарточка вызвала у них интерес или понравилась.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/78482e45-3aca-490f-bd05-339bafa2c088\r\n\r\n### 3. Удаление карточки\r\n\r\nВозможность удаления собственных фотокарточек - это важная функция, которая дает пользователям полный контроль над их контентом и опытом в приложении или на платформе. Эта функция обеспечивает гибкость и управляемость для пользователей, позволяя им самостоятельно решать, какой контент оставить, а какой удалить.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/384b610b-38b0-4abd-9724-3e509475fbbe\r\n\r\n#### Подтверждение удаления\r\n\r\nИспользование всплывающего окна (попапа) для подтверждения удаления фотокарточки - это эффективный способ защиты пользователя от случайного удаления контента. Этот дополнительный уровень подтверждения позволяет убедиться, что пользователь осознанно принимает решение о удалении, и уменьшает вероятность ошибки.\r\n\r\n![Подтверждение удаления](https://github.com/NotACat1/mesto-project/assets/113008873/fc414824-b03d-4994-a512-18290f0c3fd0)\r\n\r\n\r\n### 4. Открытие попапа с картинкой\r\n\r\nПри клике на фотографию фотокарточки пользователь может открыть изображение в полноэкранном режиме, чтобы более детально рассмотреть и ознакомиться с ней. Эта функция позволяет предоставить более углубленный и визуально насыщенный опыт для пользователей.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/64d41488-cbb3-4e53-8aed-ad3da577c952\r\n\r\n### 5. Валидация форм\r\n\r\nВалидация форм на стороне клиента является важной частью оптимизации пользовательского опыта при заполнении данных в формах на веб-сайте или в приложении. Она предоставляет мгновенную обратную связь пользователю о том, что он ввел некорректные данные до отправки формы на сервер.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/f9f02cf9-9ac5-4d98-bbae-86cbe56a45d5\r\n\r\n### 6. Редактирование профиля\r\n\r\nРедактирование профиля - это функциональность, которая предоставляет пользователям возможность изменить различные аспекты своего профиля, такие как никнейм и описание. Эта функция позволяет пользователям поддерживать актуальность информации и настраивать свой профиль по своему усмотрению.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/d811f304-574c-42cd-85d6-297bb014080e\r\n\r\n### 7. Смена аватарки пользователя \r\n\r\nСмена аватарки пользователя предоставляет возможность пользователям обновить свое изображение профиля, что способствует индивидуализации и актуализации их визуального представления в онлайн-среде.\r\n\r\n![Смена аватарки пользователя](https://github.com/NotACat1/mesto-project/assets/113008873/8f913feb-4880-431f-9bcb-27890087178d)\r\n\r\n### 8. Закрытие попапа\r\n\r\nЗакрытие всплывающего окна (попапа) - это процесс скрытия окна, которое было открыто поверх основного контента страницы. Закрытие попапа обеспечивает пользователю возможность вернуться к основному контенту и продолжить взаимодействие с интерфейсом.\r\n\r\n#### 8.1 Закрытие попапа по нажатию кнопки\r\n\r\nЗакрытие попапа при помощи нажатия на кнопку-крестик - это распространенный и интуитивно понятный способ завершения взаимодействия с всплывающим окном.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/3ac67af5-cb75-4cd2-b198-bf16e1996d0b\r\n\r\n#### 8.2 Закрытие попапа по нажатию на оверлей\r\n\r\nЗакрытие попапа по нажатию на оверлей (область вне самого попапа) - это эффективный способ закрыть всплывающее окно и вернуться к основному контенту. Этот метод предоставляет пользователю простой способ закрыть попап.\r\n\r\nhttps://github.com/NotACat1/mesto-project/assets/113008873/28beccde-915a-4f3a-9ace-bda91d5a06e8\r\n\r\n#### 8.3 Закрытие попапа по нажатию клавиши Esc (Escape)\r\n\r\nЗакрытие попапа по нажатию клавиши \"Esc\" (Escape) - это удобная и стандартная функциональность, которая обеспечивает быстрый и интуитивный способ закрыть всплывающее окно.\r\n\r\n#### 9. Объектно-ориентированное программирование (ООП)\r\n\r\nВ данном проекте использование объектно-ориентированного программирования (ООП) имеет ключевое значение для создания структурированного и легко управляемого кода. Применение ООП позволяет разделить функциональность на отдельные объекты с собственными свойствами и методами, что способствует повышению читаемости, переиспользуемости и масштабируемости проекта.\r\n\r\n#### 10. Методология БЭМ (Блок-Элемент-Модификатор)\r\n\r\nПрименение методологии БЭМ (Блок-Элемент-Модификатор) в проекте дополняет применение объектно-ориентированного программирования (ООП), создавая структурированный и модульный подход к организации кода и стилей. Методология БЭМ ориентирована на создание понятной и семантически верной разметки и стилей, что способствует легкости сопровождения и расширения проекта. \r\n\r\n## Используемые технологии\r\n\r\n### 1. Normalize.css\r\n\r\n[Normalize.css](https://necolas.github.io/normalize.css/) предоставляет браузерам возможность более последовательного отображения всех элементов согласно современным стандартам. Он акцентируется на нормализации только тех стилей, которые действительно требуют коррекции.\r\n\r\n```css\r\n/* index.css */\r\n@import url(../vendor/normalize.css);\r\n```\r\n\r\n### 2. Webpack\r\n\r\n[Webpack](https://webpack.js.org/) - это инструмент с открытым исходным кодом для сборки веб-приложений. Он позволяет объединять различные файлы, такие как HTML, CSS, JavaScript, изображения, в единый пакет для оптимизированной доставки на веб-сервер. Webpack также поддерживает использование различных загрузчиков и плагинов, что облегчает процесс разработки, минимизации и управления зависимостями.\r\n\r\nНастройки Webpack:\r\n\r\n```js\r\n// webpack.config.js\r\nconst path = require('path');\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\r\nconst { CleanWebpackPlugin } = require('clean-webpack-plugin');\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\r\nmodule.exports = {\r\n  entry: {\r\n    main: './src/pages/index.js'\r\n  },\r\n  output: {\r\n    path: path.resolve(__dirname, 'dist'),\r\n    filename: 'main.js',\r\n    publicPath: '',\r\n  },\r\n  mode: 'development',\r\n  devServer: {\r\n    static: path.resolve(__dirname, './dist'),\r\n    open: true,\r\n    compress: true,\r\n    port: 8080\r\n  },\r\n  module: {\r\n    rules: [{\r\n        test: /\\.js$/,\r\n        use: 'babel-loader',\r\n        exclude: '/node_modules/'\r\n      },\r\n      {\r\n        test: /\\.(png|svg|jpg|jpeg|gif)$/,\r\n        type: 'asset/resource',\r\n        generator: {\r\n            filename: 'images/[name].[hash][ext]',\r\n          }\r\n      },\r\n    {\r\n      test: /\\.(woff|woff2|eot|ttf|otf)$/i,\r\n      type: 'asset/resource',\r\n      generator: {\r\n            filename: 'fonts/[name].[hash][ext]',\r\n        }\r\n      },\r\n      {\r\n        test: /\\.css$/,\r\n        use: [MiniCssExtractPlugin.loader, {\r\n            loader: 'css-loader',\r\n            options: {\r\n              importLoaders: 1\r\n            }\r\n          },\r\n          'postcss-loader'\r\n        ]\r\n      },\r\n    ]\r\n  },\r\n  plugins: [\r\n    new HtmlWebpackPlugin({\r\n      template: './src/index.html'\r\n    }),\r\n    new CleanWebpackPlugin(),\r\n    new MiniCssExtractPlugin(),\r\n\r\n  ]\r\n}\r\n```\r\n\r\n#### 2.1 Babel\r\n\r\n[Babel](https://babeljs.io/) - это инструмент для транспиляции кода на JavaScript. Он позволяет разработчикам писать код, используя современные функции языка, которые могут быть не поддержаны всеми браузерами. Babel преобразует этот код в совместимый с более старыми версиями браузеров, обеспечивая кросс-браузерную поддержку и совместимость.\r\n\r\nНастройки Babel:\r\n\r\n```js\r\n// babel.config.js\r\nconst presets = [\r\n  ['@babel/preset-env', {\r\n    targets: {\r\n      edge: '17',\r\n      ie: '11',\r\n      firefox: '50',\r\n      chrome: '64',\r\n      safari: '11.1'\r\n    },\r\n    useBuiltIns: \"entry\"\r\n  }]\r\n];\r\nmodule.exports = { presets };\r\n```\r\n\r\n#### 2.2 PostCSS\r\n\r\n[PostCSS](https://postcss.org/) - это инструмент для обработки и трансформации кода CSS. Он позволяет разработчикам применять различные плагины к CSS коду, автоматизируя задачи, такие как автопрефиксинг, оптимизация, генерация переменных и многое другое. PostCSS гибкий и настраиваемый, что позволяет адаптировать его под конкретные потребности проекта.\r\n\r\nНастройки PostCSS:\r\n\r\n```js\r\n// postcss.config.js\r\nconst autoprefixer = require('autoprefixer');\r\nconst cssnano = require('cssnano');\r\nmodule.exports = {\r\n  plugins: [\r\n    autoprefixer,\r\n    cssnano({ preset: 'default' })\r\n  ]\r\n};\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fmesto-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotacat1%2Fmesto-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fmesto-project/lists"}