Git Product home page Git Product logo

toxin-website's Introduction

Toxin Website Frontend

The first practical task for MetaLamp Frontend education program.


Table of contents


Getting Started

Downloads: built pages, PerfectPixel screenshots

UI Kit

Website


Contributing

Technologies

The following jQuery plugins are used:

The project uses the BEM methodology for markup and styles.

Setup and Scripts

  • Clone the repository and install its dependencies:

    git clone https://github.com/Aleinbanger/toxin-website.git
    npm install
    
  • Launch dev-server:

    npm run dev
    
  • Run ESLint:

    npm run eslint
    
  • Build the project:

    npm run prod
    
  • Deploy to GitHub Pages:

    npm run deploy
    

License

This project is licensed under the MIT License. See the LICENSE file for details.

toxin-website's People

Contributors

aleinbanger avatar dependabot[bot] avatar

Watchers

James Cloos avatar  avatar

toxin-website's Issues

Префикс js

Вот тут почему то отличается именование класса с префиксом
.search-room__filter-item должно быть .js-search-room__filter-item, а у тебя .js-search-room__dropdown-date
Проверь пожалуйста, чтобы по всему проекту класс с префиксом соответствовал классу без префикса
Снимок экрана от 2021-08-17 17-22-17

js

А почему класс CardForm лежит в папке с глобальными скриптами?
Снимок экрана от 2021-12-16 10-26-54

Иммутабельность данных

Нужно стараться делать данные не изменяемыми.
К примеру здесь происходит мутирование pug объекта attributes, чтобы этого избежать можно ведь создать новый объект, к примеру

const params = {
      type: 'button',
      title: 'likeCount',
      'data-active': active,
      class: [blockName, `js-${blockName}`, active && `${blockName}_active`],
}

И затем уже передавать этот объект button&attributes(params).


let icon = 'favorite_border';

Здесь так же можно обойдись без изменения значения переменной в процессе, достаточно использовать тернарный оператор const icon = active ? 'favorite' : 'favorite_border';



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

const btnTag = {
      'link': 'a';
      'button': 'button'
};
#{btnTag[buttonType]}&attributes(attributes) #{btnText}

Но это если много вариаций будет, в данном случае так как вариации всего две, вполне можно обойтись тернарным оператором const btnTag = btnType === 'link' ? 'a' : 'button';

Именование картинок

Все картинки, шрифты и т. д. должны иметь уникальное название в рамках проекта и не содержать кириллических символов. Если в проекте нет индивидуальных соглашений, то они должны именоваться в стиле lower-case-hyphenated.

Инициализация плагинов

Сейчас плагины где-то инициализируются где-то внутри блока, где-то на страницах сайта. Нужно привести инициализацию к одному виду и разделить реализацию и инициализацию. Можно к примеру создать в блоках создать init.js и там производить инициализацию

Верстка

screencast-aleinbanger.github.io-2021.07.02-11_44_16.mp4

При открытии "Дополнительных параметров" почему-то на долю секунды появляется полоса прокрутки.

Сокращения

Использовать сокращения в именовании не очень хорошо, т.к. это ухудшает читаемость и поиск по проекту

Вынести числа в константы

Вот тут из контекста конечно можно понять, что означает это число в скобочках, но хорошей практикой считается держать такие вещи в константах
Снимок экрана от 2021-11-12 12-47-07

Именование файлов с классами

Файлы с классами нужно именовать исходя из названия классов, то есть если у тебя класс называется ButtonLike, то и файл должен быть ButtonLike.js

Футер

Нужно добавить футер на основные страницы сайта для экранов 768px и меньше, который есть в макетах.

Обработчики событий

Тут неверное именование обработчика

Обработчики событий для БЭМ-элементов, а также для компонент, вложенных в БЭМ-элементы, именуются по шаблону handleElementNameEventName, где ElementName - имя БЭМ-элемента.

Снимок экрана от 2021-11-12 12-45-55

Тут обработчик на mousedown, а в именовании click
Снимок экрана от 2021-11-12 13-25-09

БЭМ

Тут нужны модификаторы ключ-значение, я так понимаю, что для инпутов small сделал булевым, потому что другие размеры не используются, но мне кажется, что это все равно по смыслу немного не то, т.к. булевый модификатор чаще всего отражает состояние, например, disabled и тут понятно, что кнопка может быть либо задизейблина, либо активна, третьего вариант нет. А с размером ты можешь и large добавить и medium и еще что-нибудь, т.е. важно значение модификатора, а не просто его наличие

С кнопками может быть вообще стоит дата атрибуты использовать вместо модификаторов, если они для стилизации не используются, а только поведение отражают
Снимок экрана от 2021-11-12 13-17-26
Снимок экрана от 2021-11-12 13-11-42
)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.