Как быстро вкатиться в фронтенд  Публичный пост

Когда-то давно, когда AJAX еще только-только зарождался, CSS уже изобрели но продолжали верстать табличками, я подрабатывал джуном-фуллстеком. Потом занялся пакетным софтом и бекендами и за происходящим в браузерах следить перестал.

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

Открыл гугл, а там фреймворков и библиотек наплодили, божечки! Судя по статьям, люди годы тратят на изучение ХХХ и потом презирают и гневно плюются в тех кто все эти годы изучал УУУ.

Мне уже наверное поздно в этом всем разбираться, я уже старенький, да и не хочу быть настоящим фронтендером.

Подскажите, какие сейчас есть инструменты, чтобы тот html что выдает мой сервер выглядел более-менее прилично? Ну, типа клуба, наверное: супер-дизайна и всяких интерактивных штук кроме кнопок и ссылок мне не надо.

20 комментариев 👇

Всё-таки «вкатиться во фронтенд» != «запилить небольшую домашнюю страничку». Для последнего реакт нахер не нужон, как тут уже насоветовали.
Для сборки я бы взял любой static site generator типа Eleventy. Чтобы не морочиться с версткой — любой css framework как посоветовал @petter

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

Берёшь React/Vue, чтобы это всё работало, изучаешь, мануалов тысячи
Потом берёшь Material/Bootstrap для CSS, чтобы хорошо смотрелось, изучаешь, мануалов тысячи
Потом понимаешь что есть всякие готовые компоненты на выбранном фреймворке CSS/JS

Потом открываешь MDN, начинаешь вникать во всякие тонкости, вот тут уже можешь начинать плакать, перестаёшь смеяться от '1' + 0 == 10 и одновременно радоваться что IE/Edge был убит Microsoft и немного радуешься


Как только достиг просветления, берёшь и переписываешь всё на Svelte

@C1nde, но я не хочу просветления, я хочу просто собрать страничку, хе-хе

@dmitryv, тогда просто бери бутстрап, оно по дефолту выглядит весьма хорошо, кастомизируется, да и тем как платных так и бесплатных овер много

для всякой интерактивности где надо приделывай Vue, он очень легко учится, местами проще чем React

за вдохновлением можешь обращаться в исходники клуба

@dmitryv, вот, тут такой вопрос, а если просто страничку, то для чего? Может тебе конструктор подойдёт типа тильда или wix? Ну или простой jekyll который генерит статические сайты из маркдаун документов, его и на гитхабе можно хостить бесплатно.

@C1nde,

IE/Edge был убит Microsoft

Было бы хорошо, но увы :(

Старый Edge пока что ещё жив на Xbox (но его, к счастью, тоже собираются менять на Chromium-версию, правда непонятно когда), а вот с IE всё совсем грустно - Microsoft конечно с августа этого года прекращает поддержку IE в некоторых своих сервисах, но техподдержка и всякие обновления безопасности будут предоставляться, пока не кончится жизненный цикл Windows 10.

@e965, но IE11 же меньше процента в проде, я бы не сказал, что это сильно скажется, только если вот очень надо поддерживать. Я бы сказал, беги оттуда где вот это очень надо. Остальным можно показывать сообщение пожалуйста, установите браузер

@C1nde, мы вынуждены поддерживать, к сожалению.

Конторой договоры на ПО с заказчиками были заключены ещё тогда, когда всё было актуально. Последние цифры, что я застал в метрике - чуть больше 10% у IE в феврале этого года. И это наши облака, а ещё есть интрасети заказчиков, где, насколько я знаю, что-то очень близкое к 90-100%.

Спасибо современным технологиям, пока никаких проблем в этом плане вроде особо не было. Приходится отказываться от вёрстки гридами, конечно, но флексы поддерживаются. А почти всё JS-ное полифилится полифилами.

Я вообще не фронтендер, но мне надо было запилить страничку для игры. Я выбрала бутстрап и получилось нормально вроде. Почти все, что там есть - из коробки. Кастомного css очень немного. Статика на Jekyll. Можно и просто html сделать, безо всяких генераторов.

Подскажите, какие сейчас есть инструменты, чтобы тот html что выдает мой сервер выглядел более-менее прилично?

Такой инструмент называется css framework

План такой:

  1. гуглишь best css frameworks
  2. из топа выбираешь что больше нравится по внешнему виду, там будут всякие бутстрапы, тэилвинды, материалы и прочие.
  3. в выбранном фреймворке открываешь страницу "getting started"/"installation", там будет инструкция по установке, обычно это скопировать файлы в свой проект и подключить CSS/шрифты.
  4. в документации ищешь нужный компонент (кнопка/таблица/навигация), копируешь код из примера и вставляешь в свой html.

Поддерживаю. Для собственной странички БД скорее всего не потребуется. Нужны статический html, да подходящий CSS.

@petter, Пётр, привет! рад тебя видеть :)

Сходите в яндекс.практикум на фронтэнд — станете богом верстки за первые 2-3 месяца. Остальное время в курсе идет js.

Плюс в том, что они дают vanila html/css/js с БЭМом (сейчас вроде расширили немного реактом). Этого достаточно, чтобы потом при необходимости войти в тайпскрипт + условный vuejs, если появится желание в spa vs server-render.

У них, говорят, остальные курсы зашкварные по отзывам, но именно этот ничего (знания получите, подтверждаю). Точнее, он тоже был феерический: я когда проходил для систематизации два года назад, под сотню тикетов, минимум, сделал. За что мне бесплатно в итоге дали курс = вернули деньги в обмен на фидбек (и чтобы поменьше поливал их матом за такое качество за такие деньги в слэке потока среди желторотых студентов, кек). Наставник(!), например, понятия не имел про 2х картинки и зачем нужно отписываться от событий (и так сойдет). Но если у вас бэк-прошлое на нормальном™ языке кровавого энтерпрайза™ без говнокода, не пропадете.

Нашел у них тогда же «уязвимость»: их notion торчал голой жопой в интернет без пароля (со всеми планами типа выхода на международные рынки, интервью, внутренние материалы и т. д.). «Щедро» отблагодарили пачкой молотого кофе с доставкой курьером — то, что у меня неспрессо, не спросили :-)

@piskov, быстренько сверстаем, 20 минут, туда и обратно!

Начинаешь учить модный фреймворк типа реакта, через пару часов сможешь написать hello world, к этому времени фреймворк уже устареет и все будут писать на чем-то более новом типа svelte.

@ztsv, и уже специалист по поддержке легаси кода:)

Вы можете писать привычный HTML, а стилизовать его с помощью https://tailwindcss.com/, это быстрее и проще. Главное попробовать, а не остановиться на чтении документации :)

С Tailwind у вас получится консистентный внешний вид, но, в отличие от Bootstrap, дизайн будет более уникальный

Вообще есть tailwind чтоб страничку собрать. Вы же там не клиентское приложение пишете, чтоб js фреймворк цеплять?

Мне в свое время помогли вкатиться вот эти два ютюб канала - просто смотрел какой-нибудь курс для новичка и перепичатывал всё что там говорят:
https://youtube.com/c/TraversyMedia
https://youtube.com/c/Academind

😱 Комментарий удален его автором...

😎

Автор поста открыл его для большого интернета, но комментирование и движухи доступны только участникам Клуба

Что вообще здесь происходит?


Войти  или  Вступить в Клуб