cv's People
cv's Issues
Тернарник в тернарнике. list-item.pug
Плохой подход) Даже при таких простых конструкциях это выглядит нагромождено и не так уж понятно с первого взгляда. Причем в итоге просто конкатенируется название класса с темой переданной в аргументе. + что ты будешь делать если дальше потребуется наличие 3,4,5 тем у list-item?
circle-progress-bar-b и circle-progress-bar
Это ишус ко второму макету
Переименовать согласно семантике
Ссылка на изображение
img.developer-card__image(src=""+data.card.image+"" alt="developer's avatar")
Интересно, что за пустые строки в src )
Иморты в начале
За редкими исключениями все импорты, как в js, так и pug и css, должны быть в самом начале.
Убрать горизонтальный скролл
Сделать так, чтобы при любой ширине экрана не было горизонтального скролла
передавать в блоки только нужную там информацию
Не забывай про инкапсуляцию и изолированность. Зачем блоку контактов в контракте требовать от внешнего кода передачи ему данных скиллов? :) Передавай в каждый блок только то, что там реально нужно, контракты должны быть минимальными
block-header
Почему "block-header", а не "header"? Где-то есть конфликт имён? Если нет, то стоит переименовать
require.context отрефакторить и не дублировать
Ты можешь все заимпортить одним вызовом require.context, смысла делить на три тут нет :)
Различные плагины должны использоваться из node_modules
Сейчас в твоих скриптах используются плагины, которые должны быть установлены глобально) Чтобы это исправить, нужно изменить пути запуска плагинов на локальные (node_modules)
Лучше сразу поправить во всех проектах :)
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"npm i": "npm install",
"prod": "webpack -p",
"dev": "webpack-dev-server"
}
Не использовать фиксированные значения для выравнивания
Ни для горизонатльного, ни для вертикального. Делать все максимально гибко, и чтобы не было захардкоженных значений.
Например, в header.less top: 45%;
: он сейчас и не выравнен по вертикали - просто подогнан, а если ты захочешь потом сделать линии толще (особенно если значение будет в px или rem), тебе придется менять значение top
Добавить README
Добавить README c описанием проекта и командами его запуска.
После этого, попробуй склонировать свой проект с гитхаба и запустить
согласно инструкции, которой ты написал.
Если всё ок - закрывай ишус
data.json
У объектов не должно быть плоей item1..3 и т.д. Вместо этого нужно использовать массив по типу:
"names": [ { "name":"Alex" }, { "name":"Ivan" }, { "name":"Olga" } ],
Куда пропали эти кнопки?
js файлы в папках с блоками
JS файлы в блоках нужны нам для обработки визуальных эффектов блоков, событий и прочего. Сейчас они у тебя выглядят, как вынужденный костыль. Попробуй написать модуль, который будет, бегать по блокам и собирать less файлы.
Вот файл — пример, который, возможно, пригодиться. Здесь собирается все файлы из папки, которые не являются index.js и передаются в качестве схем баз данных.
https://gist.github.com/Zarwlar/4d8e68e2960a13f473f1f9e224bd0a07
Общие замечания по стилям
Мы работаем по БЭМу, поэтому:
- Нужно убрать li, span, img и заменить их на соответствующие классы;
- Нужно убрать каскады, иерархия селекторов должна быть плоской.
Помимо БЭМа:
- В .developer-education и .skills-item заменить у padding'ов px-ли на другие
величины.
Шрифты
В макете не Arial шрифт. Там подключается свой.
Подстраивание сайта под макет
Это ишус ко второму макету
Как правило, мы берём макет, загружаем его в PixelPerfect и задаём ему определённый масштаб, чтобы проверить вёрстку. Но в твоём случае приходиться изменять зум окна страницы, чтобы подогнать его под макет. Это нужно исправить.
Т.е. при открытии окна должно быть что-то такое:
Но точно не так:
circle-progress-bar-b
Данные не должны струтурно зависеть от верстки
У тебя сейчас структура данных жескто завязана на том, как в верстке это выглядит, но это мягко говоря неадекватно. Ты же не будешь в базе делить данные на две таблицы с одинаковой структуруой, просто потому что выводятся данные в двух колонках визуально разных. И что за блок card
в data.json? Почему инфа о профиле и описание профиля разделены? Опять же, только потому тчо в верстке это два разных блока? :)
tel в contact-item
Этот тип выглядит, как неуместный транслит. Лучше переименовать
инклудить в начале файла
Импорты лучше посреди файлов никогда не писать, это и для js, и для pug одинаково верно. Все импорты в начале и они срабатывать должны всего лишь раз при старте программы
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.