Bootstrap 4

Никакой.

Все

ручками пишите?

tailwind или uikit 3 (getuikit.com)

https://material.io/

SASS/SCSS

Ну если не клепать страницы по одинаковым шаблонам, то фреймворки весьма ограниченны.

w3.css

Bootstrap

Что мешает их расширять? Добавляешь новый класс и...

Хм, не знал что гугл материал и для веба сделал. Думал это чисто для андроида

boostrap это не только компоненты, но и грид система и плагины кстати.

Для похожих шаблонов это удобно и время экономит.

• смотреть в первую очередь на проекты с минималистическим уклоном
• желательна поддержка препроцессоров

Меня бесят эти модники, очень.

Есть два решения, готовое и свое.

Свое бывает проще чем готовое, хотя смотря что нужно.

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

Сеточный фреймоврком и решений очень много, но если не знаете с чего начать, начните с бустрапа.

У тебя к обычному цсс есть претензии или так?

персональная сборка стилей и так далее

Так это только в 3, а в 4 нет. Разве что самому редактировать стало удобнее, но это про другое

Что сейчас модно?

Так а что нужно-то? Анимация, сетка, эффекты, etc? Никакой конкретики в вопросе.

сетка,

Кстати, а зачем сетка то? Вроде же и так можно разбить на нужные колонки.

Bulma, Ant Design.

Но лучше сразу смотреть на Pure CSS Grid.

Голова всему фреймворк.

Нуууууу блииииин... Сетку делать надо, родительские контейнеры, отступы прописывать, планшетный/мобильный вид верстать, чтобы адаптивно. Время на это тратить. Не всегда все нюансы получается сделать хорошо. А в Bootstrap, например, все из коробки есть. Ты только выбираешь какой размер колонок тебе нужен.

Я заметил, что в студиях частенько как бы не доверяют верстаку. Мол, наверстает костыли, поэтому пускай лучше использует библиотеку.

А вот если Bootstrap-овские колонки тебе не подходят, то приходится делать свои, например на ПК версию, а вот мобильный/планшетный вид можно использовать из сетки Bootstrap-а.

Я бы посоветовал писать на чистом CSS с БЭМ методологией.

планшетный/мобильный

Так у телефонов и планшетов несколько разрешений, нет универсальной ширины ведь.

Решений данной задачи просто множество, у нас на заводе в принципе нет особых стандартов, но на будущее, смотря все от проф. навыков реализующего - что либо.

Есть люди на коленке тебе сетки на 3 часа под все девайсы напишут и протестят, но обычно у таких людей уже есть свои наработки, типа дефолтные.

Лучше использовать стандарты, bootstrap как раз то что нужно и сетки и стили и формы все в одной коробке.

Если делать по минимому своим ходом, то нужно будет убить не мало времени (Если это делается впервые).

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

Еще раз бустрап, либо своим ходом.

П.С от дел отошел давно, так что там версии итд пишите все равно, хоть буду знать чем там промышляют фронт эндеры нынче.

Есть такое понятие как responsive :)

Я в курсе, но порой оно всё равно криво-косо получается.

Криво-косо только у тех кто не верстал либо не знает как это работает и как это тестить.

Настоящий верстальщик должен пройти курс молодого бойца !

Верстать от IE6 :D со всеми вытекающими.

Кстати я готов стать главно-командующим данного раздела.

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

Ты же давненько тут, чего не нафлудил на звезду?

Мне звезду должны вообще только за то что я тут выжил :)

Но было интересно, путь джуниора к практически сеньору за месяц-полтора.

Жаль не видать мне больше чорных терминалов.

Да, но есть основные. Блоки сами подстраиваются под конкретное расширение уменьшая расстояние между блоками, если не влазят, то прыгают на следующую строку.

Тебе скор резали что ли? Просто и правда странно, 44 темы, 979 комментариев, а звезды нет.

Размеры же меняются не только по ширине, но и по высоте. А от таких изменений порой всё становится весьма вырвиглазным.

Не так давно тоже задался этим вопросом. И пришел к выводу: если ты не крутой верстак (я бэкенд-разраб, но еще и фронт знаю на уровне мидла где-то), то юзай любой CSS фреймворк. Не слушай тех, кто советует писать на чистом CSS - задолбаешься, потратишь кучу времени. Не факт, что получится универсально, а еще потом это поддерживать будет крайне запарно. Чтобы сделать верстку на чистом CSS, нужно реально обладать колоссальным опытом. А любой фреймворк можно допилить под себя, причем настолько, что никто особо и не заметит, что у тебя используется Bootstrap (если в html не полезет). Если уж совсем не хочется фреймворки, то бери хотя бы сетку от какого-нибудь, чтобы с адаптацией под разные экраны не заморачиваться.

Будешь писать сам на голом CSS - потратишь уйму времени впустую. А потом еще столько же потратишь на исправление косяков.

плюсую. От себя добавлю помимо bootstrap еще есть semantic ui

Это уже от конкретной задачи зависит:

height: auto;
overflow-y: hidden;

или как-нибудь ещё

Не знаю насколько в бою используется, но мне приглянулся smart-grid от Дмитрия Лаврика.

Как вариант еще есть такой - помню Flex Box, он там вообще лайтовый кажется.

Сегодня на обеде заводском, наткнулся в сети на одну статью, как один верстальщик полу-бэк эндер как я понял, начал продавать свои шаблоны на каких-то площадках, в общем если коротко, за пол или год - когда его темы начали одобрять, заработал около 200к долларов.

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

Riniko, ты видать не верстальщик или не разрабатывал верстки, раз такое пишешь, все делается элементарно, если ты чётко, знаешь задачу, что и как должно работать и отображатся. Ни каких скролов, косяков с растягиванием при адаптивной верстки нет, там все элементы танцуют в зависимости где они отображенны.Конечно все зависит от структуры сайта, что и как должно, в бустрапе на сколько помню можно творить все что захочешь с сеткой, даже складывать ее по особому если это мобильный девайс, в общем тот еще кубир рубик - фронтальный только :)

Я тут думал на счет бэк-эндеров, где можно или как найти, материал о том как работает бэк-эндер с проектом ?

Желательно если бы был списочек, типа, применяемый софт, и список последовательность работы с проектом-кодом.

А то все через этот мобильный инет не могу нормально сообразить как все таки работает бэк-эндер. Можно даже коротко.

Допустим когда я не работал на заводе я иногда баловался, бэк-эндом но в основном это были либо CMS либо Frameworks типа Yii. Но я работал можно сказать из под блокнота, все работало, но знаю что в фирмах - где работает команда, ты так не поработаешь ибо у них там другая система, в которую ты входишь как - винтик- как я понимаю - вот интересно как это

Так вот Flex Box - это, если не ошибаюсь, и есть сетка для лэйаута как раз. Так что норм.

«когда его темы начали одобрять, заработал около 200к долларов.» - да это все уникальные случаи, на самом деле. Но на биржах фриланса крайне много задач по WP. Если его освоить, как следует, то можно очень неплохо зарабатывать. Но надо понимать, что WP-мастеров навалом, поэтому в этом направлении лютый демпинг.

nixbrain, да, я просто тыкаю немного CSS.

Видишь ли, раньше фронтенд-разработка представляла из себя просто набор jQuery-плагинов и немного какой-то логики. Поэтому и фронтендом и бэкендом занимались нередко одни и те же разработчики — fullstack developers. В последние годы фронтенд стал сильно развиваться. Вместо jQuery используются более сложные и современные библиотеки и фреймворки, позволяющие, например, переиспользовать компоненты (чтобы код не дублировать) и красиво и удобно организовывать код. Поэтому разработчики разделились на 2 лагеря: фронтенд-разрабы и бэкенд-разрабы. Можно пытаться изучить и то направление, и другое, но ты вряд ли сможешь знать и то, и другое в совершенстве. Недаром говорят, что фулстек — это вечный мидл (разработчик среднего уровня знания). Да и не стоит в это врюхиваться, потому что в конторах, где практикуют этот подход, задачами завалят по уши, а платить больше все равно не будут.

Так что сейчас делят веб-разработчиков на фронт и бэк. Соответственно, всякие Yii, различного рода CMS и т. п. Тут не подходят. Yii и другие fullstack-фреймворки не годятся, потому что в них много лишнего — и не позволяют разработчикам отделить фронтенд от бэкенда, все равно где-то будут пересекаться, копаться в одном и том же коде.

Сейчас очень популярен подход, когда бэкенд пилится в виде API: грубо говоря, бэкенд, написанный php/python/go/java (и т.п.), принимает от браузера GET и POST параметры, а отдает обратно ответ в JSON. То есть никаких шаблонов на сервере и т.п. - чисто обработка данных, работа с базой. Фронтенд пишется на React/Angular/Vue. Можно и на jQuery по старинке, но такой код потом сложно поддерживать. Фронт делает к бэку http-запросы (ajax) - так и работает все это. То есть по сути бэк от фронта отделен. На мой взгляд, это удобно и современно.

Если хочешь освоить этот подход, сделай простой скрипт, например, на php, который будет принимать GET/POST параметры, а отдавать обратно json (пусть это будет просто список статей, например). И к нему сделай фронт на React.

-- Сейчас везде мастеров много, так что демпинг лютый везде.

Сейчас везде лютый демпинг и чем он лютее тем интересней.

Я на обеде, нечем занятся, лажу, читаю, смотрю.

Недавно рыскал по обьявам фирм, распишут, от и до, заходишь на их сайт и думаешь, каким им удалось такое утворить с их типа репутацией. Тогда понимаешь, что это все, обвертка, на самом деле настоящих спецов которые знают что и как работает от А до Я мало.

Такие обычно и скорей всего на дядь, не работают, они либо у них свои проекты, либо фрилансят но за большие деньги не в ру сегменте.

------

По поводу бэк-энда полезная информация, а то все никак не вникну в эти новые «нано-технологии» разработок.

На сколько я понял, бэк-энд типа работает ввиде принимающей - обрабатывающей и отдающей части по средством API.

А что по поводу административной части ?

На счет GET/POST/JSON, было когда-то дело, как раз таки списки и отдавали из базы, большие. А то подгружать на сколько я помню это дело прям в код, страница привышала все возможные лимиты ) а так, первый селект статичный, по запросу первого второй делал запрос в базу и отдавал список. Но детали уже не помню

По поводу REACT не имел дело, ANGULAR как-то читал на обеде, в принципе ничего сложного нет для тех кто понимает JS. Еще Node есть - но не читал что за зверь и как-то смотрел Electron - вот там меня удивили возможности, создавать «софт», на js html

Так как ты бэк-эндер уже с опытом тебе легче понимать задачи.

Если не сложно накидай, каких нибудь мелких заданий, как в последнем сообщении, я в свободное постараюсь попробовать все реализовать.

У меня теперь главное правило, не подходить к консоли, а то эти со своими почтовыми ящиками, чуть опять меня не в тянули в эти чорные терминалы )

Благодарою за ответы

«Сейчас везде лютый демпинг и чем он лютее тем интересней.» - ну уж не знаю. На биржах фриланса нередко вижу задачи вида «запили мне парсер за 500 рублей». С одной стороны, парсеры часто бывают совсем простыми. Но 500 рублей - это стоимость минут 30 работы максимум. Сможешь сделать за это время парсер нормально? Вряд ли. И из этих 500 рублей еще сама биржа берет процент. Но при этом даже на такие заказы 5-7 откликов частенько бывает. Уж не знаю, неужели это выгодно кому-то. Смотришь на это - и грустно становится. Я бы за парсер нормальный меньше 5 тыс. не взял. И то это если не надо Selenium какой-нибудь туда всобачивать.

«На сколько я понял, бэк-энд типа работает ввиде принимающей - обрабатывающей и отдающей части по средством API. А что по поводу административной части ?» - ну да. А что касается административной части - пишешь точно по такому же принципу самостоятельно. Но даешь туда доступ только определенным людям, которые и будут админами. Все, как и раньше, в этом смысле.

«На счет GET/POST/JSON, было когда-то дело, как раз таки списки и отдавали из базы, большие» - так делать не надо, нужен пагинатор. Все разом отдавать не стоит. Особенно когда количество этих данных может расти. Хотя бы LIMIT-OFFSET.

«смотрел Electron - вот там меня удивили возможности, создавать «софт», на js html» - выглядит круто, да, но по факту эта технология далека от идеала. Очень уж много потребляет оперативной памяти, к сожалению.

«Если не сложно накидай, каких нибудь мелких заданий, как в последнем сообщении, я в свободное постараюсь попробовать все реализовать.». А чего тут накидывать-то? Сделай просто блог. То есть админку, где ты можешь создавать/редактировать/удалять статьи и смотреть их список (с пагинацией). И клиентскую часть, где люди могут эти статьи смотреть в списке и переходить на конкретные. Сперва сделай максимально простую версию. Потом усложни. Нужна загрузка изображений, обработка их, сжатие, кеширование данных, валидация форм создания/редактирования статей. Потом ты поймешь, что поисковые системы такие сайты плохо индексируют - и тебе придется прикрутить рендеринг на сервере. В общем, даже примитивный банальный блог можно сделать очень сложно и круто - и получить уйму знаний.

Главное правило - сделай отдельно бэк и отдельно фронт, которые будут взаимодействовать по апи, как будто это вообще разные приложения (так, собственно, и есть на самом деле). Постарайся бэкенд покрыть тестами - это крайне важный навык. Проект без тестов - это не проект.

P.s. Не умеешь делать бэкенд, не значешь, на чем его делать - бери пхп, это проще всего.

Давай на всякий тебе стек посоветую:

Фронтенд - тут сам, что больше понравится из Angular/React/Vue

Бэкенд - сам код на php (бери любой микрофреймворк, например, php Slim - там будет роутинг и некоторые штуки для удобства, а больше ничего лишнего). Если сложно так - бери тот же Yii, фиг с ним. Базу данных юзай MySQL или Postgres. Для кеша юзай либо Memcache, либо Redis.

P.s. про тесты не забудь. Это может вызвать сложности (например, чтобы сделать mock базы данных), но результат стоит того. Умение писать тесты для программиста крайне важно.

Фронт-энд я помню еще по старинке причем не плохо, просто когда читаю, статьи, смотрю как делают все на современный лад.

Бэк-энд было дело php как раз мне не нужен, ибо как работает или сделать примитивный бэк на php, тоже примерно помню.

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

На счет идексации - рендеринга не совсем понял, как он выглядит в реализации и как с рендерингом ?

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

Еще бы хотел знать об общей картине разработки, допустим есть проект, новый, вот дальше, как все начинает происходить.. как он начинает создаваться развертываться собираться тестироваться.. вот это интересно в общих чертах узнать - изнутри как говорится.

И еще списко установленного софта типа IDE плагины - доп софт, т.е в какой среде идет разработка, тоже интересно, у всех может по разному, но плюс минус, так засетаплю себе, буду свободен, буду проходить по мере возможности все этапы.

Код писать можно в Visual Studio Code - бесплатно и удобно. Либо в PHPstorm (что даже лучше, но нужно купить или пользоваться триалом). С базой взаимодействовать через DBeaver можно. Ну или всякие phpmyadmin и т.п.

«Бэк-энд было дело php как раз мне не нужен, ибо как работает или сделать примитивный бэк на php, тоже примерно помню.» - так чтобы понять подход, тебе не важно, на чем именно ты запилишь бэк. Тут суть в том, что он не должен быть вперемешку с фронтом.

«создание блога на по такой технологии понимание придет в плане суть работы данной техники» - ну да. Сначала вообще сделай просто: id статьи, название, текст (даже не html, просто текст). Потом прикрути какой-то редактор типа Draft JS, заменив текст статьи на html. Ну и так далее усложняй.

«На счет идексации - рендеринга не совсем понял, как он выглядит в реализации и как с рендерингом ?» - дело в том, что когда ты делаешь сайт таким способом, как я написал, фронт у тебя отрисовывается в браузере. Таким образом, если такую страницу скачать каким-нибудь wget’ом, то ты скачаешь пустую страницу. Все то, что подгружается по api аяксом, будет отсутствовать. Из-за этого многие поисковые системы твой сайт будут плохо индексировать - для них почти все страницы будут пустыми. Гугл научился нормально их индексировать (умеет выполнять js), но он все равно такие сайты индексирует хуже тех, у которых контент «готовится» на сервере. Поэтому делают, грубо говоря, специальный сервер, который умеет выполнять js и отдавать html с контентом. Называется это SSR (server side rendering). Пока не рекомендую вообще с этим заморачиваться. Но, на будущее, если возьмешь для фронта Реакт, то NextJS решит за тебя эту головную боль.

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