Правильный frontend?

Question

[Junior]

Здравствуйте! Нужен совет!
Нужно изучить препроцессоры (sass/scss например), git, gulp... таким образом выйти на новый уровень frontend developer'a! Планирую сделать не большой лендинг с использованием этих технологий и похода дела изучить их! Хочу это все изучать в связке с бутстрап!
Подскажите пожалуйста как правильно построить работу, какой-то алгоритм действий?
Интересуют любые детали!
Буду очень благодарен за помощь!

Comments

[SerzN1]

Это не фронтенд! Фронтенд это JS фреймворки (backbone, angular ...) , библиотеки построения динамического интерфейса типа React , SPA , JS модули , построение структуры веб приложения FLUX, MV*. Все что у вас перечислено обычные дополнения для верстки в современных условиях. Советую начать с shamansir.github.io/JavaScript-Garden/. И главное бутстрап - это средство а не цель.

Answer 1

[webdisigner]

Сначала поработай с нативным css,html,js - 1 годик так точно
Потом поработай с bootstrap, сначала научись переопределять стили, потом изменять стили в исходном файле bootstrap.css. После этого научись пользоваться файлами bootstrap.js ну и конечно тут не обойтись без фундаментальных знаний Jquery - 15-30 дней и ты уже в теме
Потом установи sass, и поработай с ним через командную строку
Потом попробуй расширить sass, например установи susy, breakpoint-sass
Опять поработай с командной строкой - 14-30 дней
Потом установи интерпритатор sass, например compass
Разузнай все тут, поработай с командной строкой, установи config для compass`a
7-10 дней на это все, многое узнаешь.. - 2 дня макс.
->
Потом чтобы это все говно сжать у себя в мозгу как раз придумали gulp
Вот с этих пор, ты познаешь истинное удовольствие с gulp`ом
Тут то и понадобятся навыки работы с консолькой
Понимание глобального и локального нахождения плагинов и не только
Установишь node.js, выберешь себе консольку по-красивее и по-краше, прочитаешь туториалы, просмотрешь видосы и ты уже спец по gulp - 12-15 дней макс

материал:
1) sass - sass-lang.com
2) sass-playground: www.sassmeister.com (поддерживает susy,breakpoint-sass)
3) susy - susy.oddbird.net (любые сетки, полный контроль)
4) bootstrap - dedushka.org (неплохие уроки по css), www.w3schools.com/bootstrap/default.asp (неплохие уроки по css и js бутстрапа)
5) gulp - https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=P... (неплохие уроки по gulp)

Ты все еще хочешь стать фронтенщиком? :)

Comments

[everdimension]

>> Потом поработай с bootstrap, сначала научись переопределять стили, потом изменять стили в исходном файле bootstrap.css.

...а потом научись никогда так не делать? Меняя исходный bootstrap.css, ты запираешь себя на конкретной версии без возможности обновиться. Сами разработчики бутстрапа рекомендуют так не делать.

Вообще ваш ответ похож на "как выучить sass", а не как построить нормальный фронтенд. Но признаю, что и вопрос конечно поставлен не особо, с акцентом на вспомогательные инструменты, а не на основные.

[webdisigner]

everdimension: согласен так делать нельзя, зато можно убрать неиспользуемые стили с помощью uncss, хотя попотеть там тоже нужно))
А вообще я свою точку зрения развития представил, конечно хочется всего и сразу, но лучше по порядку))

[Иван Сергеевич]

Compass - интерпретатор Sass? Ты укурился чтоль?

[webdisigner]

Иван Сергеевич: препроцессор, сорян

[Иван Сергеевич]

webdisigner: Compass is an open-source CSS Authoring Framework.
Они же написали

Answer 2

[Александр Зубарев]

Вот есть мой репозиторий - это готовый шаблон для адаптивной верстки. Как раз там все прелести используются (git, gulp, sass, autoprefixer)
Имеется пример.
Так же рекомендую к прочтению Руководство по написанию Sass

Comments

[Александр Зубарев]

Сергей Сергеев: Хех, да не круто, не спорю с вами. Хотел сделать очень простой шаблон. Немного обновил его

[everdimension]

Дааа, "правильный" фронтенд. "build" у вас исходники, а "src" — скомпилированные файлы. Стыд и смех.

Vendor-файлы скачаны вручную, зачем npm и bower нужны — неизвестно? Bower, к слову, плавно помирает и весь фронтенд скоро будет принято брать из npm.

Плагины для gulp в dependencies, а сам gulp в devDependencies? Ок, спишем на невнимательность.

[Александр Зубарев]

everdimension: Спасибо за критику. Я с вами согласен, обязательно обновлю репозиторий.

Answer 3

[Денис Инешин]

Туториал по Grunt: nano.sapegin.ru/all/grunt-0-4
Когда все настроите поймете что писать на LESS/SASS не сложнее чем на чистом CSS, так как грунт сделает всю фоновую работу по конвертации в CSS за вас.

Бутстрап пока что отложите. Этот фреймворк вам сейчас помешает понять как оно все работает. Но в будущем очень поможет, когда все остальное уже будете знать.

Так же порекомендую вот эту тему: Какие есть практические курсы\уроки по html5 + css3 + javascript?

Comments

[Милок Мурлыка]

Лучше начинать сразу с gulp'a, он быстрее и конструкции там не столь громоздкие

[Денис Инешин]

Милок Мурлыка: на вкус и цвет, гульп чуть более своеобразный.

[Андрей Бережной]

Денис Инешин bootstrap мне не мешал :)

[Денис Инешин]

Андрей Бережной: бутстрап не мешает, он многое делает за вас. Что конечно удобно, но на начальной стадии обучения немного лишнее, нужно понять как все устроено и какие есть подводные камни.

[Андрей Бережной]

Денис Инешин: когда мне нужно знать как что устроено, я смотрю "под капот" :) Вроде неплохой метод обучения.

[Денис Инешин]

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

Answer 4

[Владислав]

Создайте приблизительно такую структуру проекта:
project/
project/src/
project/src/scss/
project/src/js/
project/src/images/

Создайте package.json командой npm init, заполните всю информацию, название проекта, автор, зависимости и т.д. Установите gulp, создайте git репозиторий и файл gitignore в котором будут папки node_modules/ app/ и т.д. Создайте gulpfile.js, добавьте его в индекс(в репозиторий) и сделайте первый коммит. Затем напишите пару задач в gulpfile.js и установите пару модулей. Все ваши исходники будут собираться в папку app/, а в ней уже будут app/css, app/js, app/images и т.д.
В итоге ваш проект можно будет легко поднять просто клонировав репозиторий и сделав npm install, а затем запустив gulp.

Comments

[xfg]

А вот чтобы не делать это руками, есть yeoman.io генерирует структуру проекта уже с настроенными gulp/grunt тасками.

[Владислав]

xfg: И чему тогда топикстартер научится?

[xfg]

Владислав: правильному фронтенду.

[Владислав]

xfg: сначала он должен ручками все сделать.

[sompylasar]

В современном фронтенде разделяют по компонентам (HomePage, AboutPage, Button и т.д.), а не по технологиям (JS, CSS, HTML).

[Владислав]

sompylasar: полностью согласен, в наших проектах мы всё по БЭМ блокам разделяем. Но надо же человеку дать самому всё пощупать и попробовать, что бы ему было с чем сравнить.

[sompylasar]

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

[Владислав]

sompylasar: Таким образом, оно и не появится.

Answer 5

[Сергей]

Могу предложить для начала вот это https://github.com/Insayt/frontend-devil , там есть ссылка на статью на хабре о том, как это готовить)
Более подробного мануала не видел. Для начала самое оно :)

Comments

[uniquenicknqame]

А что там готовить? контрол а, шифт дел, энтер!

[Александр Решетняк]

удалил похоже уже)

[Сергей]

Аксель AxeLVaisper, да

Answer 6

[Marcel Lefter]

HTML5, PostCSS(с ним можно и LESS/SCSS/Stylus), Gulp(Browser-sync для live reload) он быстрее, Bootstrap и конечно хороший настрой.

Answer 7

[Artem Malko]

Очень советую TARS, как раз подойдет для текущей задачи. Есть подробное описание на двух языках + статьи на хабре.

Answer 8

[frontendthug]

1. Первым делом разберитесь, что такое пакетный менеджер(в нашем случае npm)
2. Попробуйте понять, как работает сборщик проекта (Gulp). Основы Gulp.
2. Попытайтесь внедрить туда те технологии, которые Вас интересуют. ( Даже если Вы их не выучили, в инете полно гайдов по внедрениям разных технологий в Gulp .Это избавляет от использования программ типа PrePros ).
3. Начните изучать SASS.
4. Внедрите bootstrap-sass в свой проект.
5. Постоянно практикуйтесь.

Из источников, где можно всё это хорошо подучить, я могу выделить несколько:

WebReference - много вкусностей для начинающих. Именно этот сайт помог мне в начале пути фронтендера.
Frontender Magazine - огромное количество полезных статей.
Zencoder - тут тоже можно много чего найти по Вашим предпочтениям.
Прогрессор - аналогично предыдущему.

Вам должно вполне хватить данной мной информации. Успехов!

Answer 9

[Саня Технадзор]

Просто подпишитесь на твиттер https://twitter.com/jsunderhood и через пару недель у вас будет достаточное представление о современном хорошем фронтенде. Там же и вопросы задавайте.

Answer 10

[Дима]

Что тебе тут посоветовали, фронтендом даже и не пахнет... Фронтенд - это знание js и использование его фреймворков, знание некоторых php фреймворков да и вообще самого php(хотя бы основ), а основы фронтенда - это знания верстальщика - html(а лучше jade или haml), css(а лучше scss или less) и jquery

кстати, дока по sass на русском - sass-scss.ru

Comments

[uniquenicknqame]

Да.. да! именно так и есть.
Забыли упомянуть обязательное знание Spring MVC, Hybernate, C# и Турбо Паскаль фор виндовс.

[Дима]

uniquenicknqame: Хотел сумничать? Чет не получилось...

[uniquenicknqame]

умничал я когда был юн и писал на рнр.
А теперь я дряхлый старик-проститутка, тоесть фронтендэр в энтерпрайзе и за деньги продал все православное из мира программирования. И ООП и депенденси инджекшн и донт репит йорселф и слабосвязанную модульную архитектуру.
Один (не при людях будь упомянут) ангулар остался.
Но за деньги. Большие. Так что я валютная путана.
---
А давайте джуну Линукс насоветуем и собрать рнр с исходников?

[Дима]

uniquenicknqame: Чувак, здесь написано про правильный фронтенд, а правильный фронт включает в себя знание хотя бы основ серверного языка. Кому-то нужен руби, кому-то питон, кому-то пыху, а кто-то учит ноду.

[uniquenicknqame]

Хоть что-то в энтерпрайзе есть хорошего: наши бэкэндеры во фронтэнд не лезут.
А на прошлой лезли..
(я тут новичек! вопрос: за слова суки-бляди-пидарасы -- тут забанят?)
А у нас таки да -- матерый народ: шарит что такое сингл респонсибилити, распределенная команда контрактное программирование)

прикольный у нас чат, Дима, не правда ли?

[Дима]

uniquenicknqame: ваще збс чат=) про баны не в курсах, не использую данные слова тут)

[uniquenicknqame]

та я тоже интелигентишко, но сугубо при маме.
Просто в ее присутсвтии я не делаю энпиэм инсталл и уж тем более не заглядываю в папку ноде_модулес)

[Дима]

uniquenicknqame: муахахаа

Answer 11

[almac]

Фронтендеру нужно знать следующие технологии:
https://i.imgur.com/EB3TIdK.png (картинка взята отсюда - https://parbhatpuri.com/skills-essential-for-a-fro...)

Я знаю лишь половину (с фокусом на верстку, а не на JS), и мне этого хватает для большинства проектов. Но лучше все же изучить все, что на картинке - тогда вы будете ниндзей фронт-енда )

Answer 12

[Денис Драгомирик]

Я бы посоветовал двигаться шагами, которые закрепляют одну (максимум две) технологии. Но это больше вопрос психологической нагрузки — проще, когда ты используешь в 40% случаев незнакомую технологию, когда остальные 60% являются технологиями, в которых Вы уже имеете опыт.

В принципе, можете использовать такую последовательность действий:
1) Напишите небольшой лендинг (2 экрана, думаю, будет достаточно), используя Bootstrap. Если Вы раньше с ним не работали, то добавлю, что у Bootstrap, если брать в общем, есть 2 функции — структура блоков на сайте (с обеспечением адаптивности) и готовые элементы интерфейса. То есть, для сайта с нестандартной модульной сеткой и прорисованными дизайнером лучше написать несколько лишних строчек CSS, а для лендингов Bootstrap в самый раз.
2) Установите git. Создайте пустой проект, чтобы просто "пощупать", а потом создайте новый проект на основе лендинга. Разберитесь с основными терминами git и поработайте с сервером (можете использовать BitBucket), почитайте о gitHub, внесите какие-либо изменения в проект и добавьте их в git
3) Установите SASS (перед этим Ruby). Перепишите весь css-код в соответствии с возможностями sass. Если в документации SASS есть описание возможностей, которых нет в лендинге, добавьте новый блок, чтобы попрактиковаться с некой конкретной возможностью. Я почитал в ответах, что также советовали попробовать less и Stylus. По Stylus не скажу, так как с ним не работал, а less, как по мне, не стоит — у него меньший функционал, да и по популярности он намного ниже, потому сложнее будет искать ответы на вопросы.
4) Автоматизируйте процессы, используя gulp (можно просто пройтись по документации, чтобы иметь список действий, можно почитать инструкцию в Интернете)

По ощущениям, этот список для изучения примерно на сутки, но может Вы растянете, а может за 8 часов, к примеру, разберетесь. В любом случае, желаю успехов в изучении!

Comments

[uniquenicknqame]

отета я нашел суперсайт, который переплюнул все джойреакторы, фишки, яплакалы и прочая.
Особо извращенный юмор.
Или тут присутствуют супертролли 10080 уровня?
---
По ощущениям, этот список для изучения примерно на сутки, но может Вы растянете, а может за 8 часов, к примеру, разберетесь
---
и под какой наркотой джун это все вытянет за сутки?

Answer 13

[Руслан Исаев]

Я сделал видео про Git.Я там объяснил про ветви про коммиты итд.Видео

Comments

[Dedalus]

Не позорься. Удали это "обучающее" видео. От него будет больше вреда, чем пользы

[Руслан Исаев]

Dedalus: ((((((

Answer 14

[Дмитрий Христоев]

канал logtblog - https://www.youtube.com/playlist?list=PLY4rE9dstrJ...

Answer 15

[Виталий Кудла]

Я бы советовал тебе найти третий курс по HTML и CSS у Специалиста, там как раз подробно рассказываются и описываются те технологии которые ты указал и даже больше. Узнаешь про (SASS, LESS, STYLUS) для себя сделаешь выбор какой больше понравиться. Узнаешь про препроцессоры HTML (Haml). Про Gulp тебе скинули хорошую ссылку выше от loftblog.