• Что изучать верстальщику и в каком порядке?

    vilka_2009
    @vilka_2009
    Верстаю
    Не слушай тех, кто говорит, что без JS верстальщик - не верстальщик. Такие люди уже слишком давно работают, чтобы осознавать насколько сложно быстро изучить js попутно получая свой первый опыт в верстке.
    Запомни вообще: мы не можем знать все и сразу. Опыт - это самое важное после стремления и умения учиться и развиваться. Чтобы ты не боялся, что не возьмут в другую компанию: https://habrahabr.ru/post/323188/ Взять к примеру сообщение Тима Дикерса: "Привет, в лид в гугле, и более чем 30 лет программирую. И каждый раз мне надо искать, как узнать длину строки в питоне." А ведь самый первый урок на любом языке начинается с примера, как узнать длину строки ))

    Теперь поделюсь немного своим опытом. Как начинала я: я уволилась с работы и пошла учиться на курсы в htmlacademy База там дается отличная, правда с первого раза мне сложно было заставить себя учиться, поэтому я прошла бесплатно второй такой же интенсив. Перед НГ защитилась на отлично, можно сказать, и в феврале меня уже пригласили на работу примерно как у тебя (тоже java, совдепия, xml, таблицы). Сидела я там и баги всякие поправляла. Ушла через 5 месяцев. Долго не могла устроиться и из-за отсутствия свободных мест, и из-за собственного же страха и неуверенности. Бралась за фриланс, получала опыт, даже бесплатно работала в стартапе)) Мне важно было как можно больше практиковаться и получать опыт. Благо вообще нравится верстать) Весной следующего после увольнения года мне предложили работать в какой-то новой конторке, нас там было всего трое - дизайнер, программист и верстальщик. Всему обещали научить и чему успели научили) И ведь до сих пор люди считают, что верстальщик в компании должен быть! А некоторые компании совмещают приятное с полезным: верстальщика с программистом-фронтендером. Тем самым экономят рабочие места и зарплаты. Удобно же, да?) И вот такие опытные разрабы и говорят, верстальщик без js - не верстальщик. Фигня все это. Сейчас верстка гораздо сложнее и заковырестее, чем работа контент-менеджера, которая заключается в том, чтобы текст писать и вставлять его куда надо. Когда ты умеешь js - ты уже junior фронтендер. Это мое ИМХО. Ты отвечаешь не только за верстку, но и за фронт. Короче, далее)) В этой маленькой конторке я получила норм опыт и через пол года меня уже переманили в другую, одну из топовых организаций нашего небольшого города (тоже 400к). Зп как я когда-то хотела, проекты интересные, полная свобода действий и самостоятельность, даже уважение!) и я не знаю JS. И флексбоксы только начала пробовать. И проекты в моем портфолио за 2 года можно по пальцам пересчитать. Нужно просто успокоить себя и осознать, что верстка - это совсем не сложно. И js тоже совсем не сложно. И быть неопытным - тоже не проблема. Те организации, которые готовы брать неопытных людей, знают на что идут, они могут выделить свое личное время на твое обучение, на допиливание твоего опыта) Мы с коллегами 2 раза в неделю остаемся после работы и учим js. Нам читают учебник learn.javascript (да да), быстренько так зачитывают, все на пальцах и примерах в браузере тут же показывают, объясняют простым языком и потом ты уже спокойно можешь перечитывать учебник и понимать, что там написано и выполнять задачки под статьями. Периодически, для закрепления материала, нам дают домашку. Точнее давали, мы уже закончили js-лекции. И все равно, нельзя сказать, что мы сейчас прям сядем и плагин свой напишем - ни! Мы теперь можем понять практически любой код, написанный другими людьми. И использовать его. Для написания своего нужен просто опыт, больше практики.

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

    Вот мой "блог"-цель по развитию в профессии, может прибавит тебе чего. Я его чисто как чек-лист для себя составляла.

    По поводу адаптива: в бутстрапе тоже используются медиазапросы. И покапавшись в нем, поюзая его, я поняла и осознала, что такое адаптив. Не знаю, что там учить перед его использованием?! Его и создавали как раз для программистов-бэкэндеров, чтобы они не запаривались и не вникали в адаптивную верстку, а просто юзали нужные классы. Так что, начинай использовать бутстрик и норм будет ;)

    Вот те мини-план от меня:
    • отбросить страхи
    • включить уверенность
    • блочная верстка
    • сетка на float || inline-block
    • попробовать бутстрап
    • html5, css3, семантика (она плотно зашита в html5)
    • попробовать расположить все элементы на странице/блоке позиционированием
    • ( так же все это можно попрактиковать на бесплатный курсах html-академии )
    • медиа-запросы
    • устроиться на работу
    • осознать бутстрап (то есть попробовать осознанно сверстать несколько макетов на бутстрапе, с адаптивом, на работе прям и попробуешь, ведь ты же уже знаком с бутстрапом :))
    • флексы - узнать и осознать, что это круче и удобнее бутстрапа в миллион раз
    • Внедрить флексы в рабочий проект, утвердив с ведущими и доказав, что его можно спокойно юзать и что не надо поддерживать ie 9... да даже 10
    • Самое главное: уделять по 1-2 часу в день, чтобы прочитать 0,5-1 главу на learn.javascript и пройти задачки под каждой прочитанной статьей ( у меня примерно столько уходило времени).


    Кстати да, совсем забыла про svg - это само собой ) Выкладывать на гитхаб свои работы прям на ходу разработки - это тема! Проверяющие будут видеть как ты коммитишь и юзаешь гит.
    Ответ написан
    10 комментариев
  • Что учить frontend разработчику?

    1. Сначала учим фундаментальщину (как работают компьютеры, сети и браузер, http, основы программирования).
    2. Затем изучаем как работают конкретные веб-технологии (html, js, css, как всё это парсится браузером и рендерится в веб-страницу, учимся верстать и использовать js, книжек и курсов масса).
    3. Далее изучаем технологии, которые всё это автоматизируют, упрощают и абстрагируют (фреймворки, бутстрапы, реакты, сборщики, jquery, новые стандарты, гриды итд итп).
    4. Практика, применение изученного, выбор специализации (зависит от того, что хотите далее делать во фронте - это может быть просто вёрстка, создание интерфейсов или визиуализация данных, а может быть и работа с графикой\аудио\видео, тренды (сейчас это react, bootstrap, foundation, babel, es6, d3, RxJS, функциональное программирование)), далее развиваться на протяжении жизни можно до бесконечности. Но без первых пунктов это всё ничто.
    Ответ написан
    Комментировать
  • Что лучше/рекомендуется использовать, querySelector или getElementById/getElementsByClassName?

    IonDen
    @IonDen
    JavaScript developer. IonDen.com
    Во всех браузерах по разному, но традиционно считается что самый быстрый это getElementById.
    getElementsByClassName - очень быстр, но появился только в IE9, так что если поддерживаем IE8, то его не используем.
    querySelector/querySelectorAll - супер универсальный и очень неплохо оптимизирован в браузерах сегодня.

    В остальном поищите тесты, аналогичные этому: https://jsperf.com/getelementsbyclassname-vs-query... или этому: https://jsperf.com/getelementsbyclassname-vs-query...
    и посравнивайте в разных браузерах, а потом решите для себя.

    ИМХО, в любом случае, производительность всех этих методов в современных браузерах очень очень высока, и вообще берите то что нравится больше.
    Ответ написан
    Комментировать
  • Что имеют ввиду под знанием http?

    rework
    @rework
    Помог ответ? В благодарность отметь его решением
    • типы запросов (POST, GET, PUT, UPDATE, DELETE, OPTIONS и т.д.),
    • заголовки запроса, ответа
    • коды состояний
    • редиректы (location)
    • кэширование
    • и т.п.
    Ответ написан
    5 комментариев
  • Что такое API и для чего он нужен?

    mrkto
    @mrkto
    Попробую просто:
    API для сайта — это скрипт (как правило), который принимает запросы (по методам GET (site.ru/api.php?a=b), POST) и отдаёт не обычный HTML для браузеров, а результат запроса в определённом формате (XML, JSON, php serialize()-ed).
    Соответственно предназначен он не пользователям, а скрипту со стороннего сайта/сервиса/программки, который посылает эти GET/POST запросы, получает результат и как-то использует данные. Посылает он запросы естественно не просто так, а чтобы выполнить определённое действие (напр. как действия которые выполняют пользователи сайта через браузер).

    Пользователям-программистам он нужен для интеграции с другими сайтами/сервисами программами, или автоматизации некоторых действий, создав программку для вашего сайта. Соответствено нужен он обычно только очень популярным сайтам/сервисам.
    Ответ написан
    1 комментарий
  • Курсы по html и верстке писем

    MTonly
    @MTonly
    Веб-разработчик с 2002 года
    Современная вёрстка сайтов не имеет ничего общего с вёрсткой электронных писем. Вёрстка писем многократно рассматривалась на Хабре:

    Ответ написан
    Комментировать
  • С какой книги лучше начать изучать HTML и CSS?

    @tef
    Я бы не хотел заранее вас пугать, но существует достаточно объективный факт, что внятной статьи или книги по HTML или CSS не существует. Причин много. Одна из них, конечно, что сам по себе HTML и CSS это один большой костыль. Я не шучу. Техники которые используются, они используются только потому что по другому просто нельзя. Со временем вы, конечно, поймёте этот абсурд. Некоторым даже нравится. И вам ещё повезло, что вы не застали времена, когда верстали на таблицах и знаменитый ie6.

    Основные вещи, которые вам нужно понять это как ведут себя div и span, позиционирование, поток и слои. Всё остальное не так так важно и будет усваиваться со вторым-третьим свёрстанным макетом, как, собственно, и всё вышеперечисленное. Начать советую с каркаса какого-нибудь типичного двуколоночного макета с хедером и футером. Задавайте любой интересующий вопрос на форумах. Как правило люди нормально относятся к любым, даже на первый взгляд, самым глупым вопросам и охотно помогают. То есть, если чувствуете затор, то лучше не терять времени и спросить. Кто-нибудь да и объяснит.

    Когда я понял всю соль и научился верстать. Я открыл эти книги, которые все расхваливали с таким энтузиазмом. И ужаснулся тому, как по этому вообще можно чуму-то научиться? Я практически уверен, что все эти добрые люди, которые советовали «мудрые» книги сами их либо не открывали, либо не осилили.
    Ответ написан
    2 комментария
  • Резонно ли использовать display:flex, display:grid? В чем реальное отличие gird от flex?

    GriNAME
    @GriNAME
    Front-End Developer, Android Developer
    Flexbox и Grid это не два противоборствующих свойства, они наоборот дополняют друг друга.
    Grid - инструмент позиционирования основных блоков страницы.
    Flexbox - инструмент позиционирования элементов внутри блоков, спозиционированных с помощью Grid.

    GMD - пример сетки на flexbox, которую мы с командой используем и которую я сам написал.
    Ответ написан
    2 комментария
  • За и против Bootstrap?

    RostOsipov
    @RostOsipov
    Designer
    Плюсы Bootstrap - простота (следовательно - быстрота) разработки, уверенность в валидности и возможность сэкономить на дизайнере (так многие действительно думают), используя заранее готовые UI компоненты.
    Понятный код, разобраться в котором может ученик старших классов, ходящий на факультативы по информатике.

    Минусы - от Bootstrap'a пахнет Bootstap'ом. Поменяй все стандартные наборы на уникальные - запах не исчезнет.
    Это как мебель от IKEA - все вроде отлично, но нет "души". )
    Ответ написан
    2 комментария
  • Backend для frontend разработчика?

    sHinE
    @sHinE
    веб-разработчик, php/js/mysql и сопутствующее
    Со своей колокольни посоветую.
    В первую очередь - протокол http - основные заголовки, методы передачи данных на сервер, как кодируются формы.
    Основные принципы работы веб-сервера, принципы переписывания урлов.
    Основые sql и серверных языков, принципы формирования страничек.
    Глянуть простенькие туториалы по основным фреймворкам для разных языков.
    Почитать что такое ORM и глянуть основные для популярных языков.
    Вот как-то так.
    Ответ написан
    2 комментария
  • Какова техника верстки landing page?

    mrusklon
    @mrusklon
    Не получается? Яростно гугли!
    Наткнулся на канал недавно , по моему очень содержательно:
    • Часть 1: Адаптивная HTML верстка на примере сайта автосервиса(смотреть)
    • Адаптивная HTML верстка на примере образовательного Landing Page(смотреть)
    Ответ написан
    3 комментария
  • Как получить опыт программирования в команде?

    IonDen
    @IonDen Куратор тега IT-образование
    JavaScript developer. IonDen.com
    Работа в команде с другими PHP-шниками предполагает работу. Когда все уже умеют всё что нужно и делают большой проект. Да, тут возможен коучинг, но даже если вы вошли в команду Junior-ом, это все равно предполагает, что у вас есть пару лет опыта.

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

    Программисты обычно делятся на 2 группы. Первая группа это те, что получили образование в ВУЗе и там им дали всю нужную базу программирования и понимания. Вторая группа это самоучки, которые сами до всего дошли с помощью книг, интернета и практики.

    Так что как видите, не бывает начального обучения в команде. Основы вы должны постичь сами или идти в ВУЗ (благо вокруг очень много возможностей получить например второе высшее).

    Вам же просто не хватает усидчивости. Миллион программистов спокойно всё осваивает самостоятельно и ничего. Интернет это не только гугление, это еще и Stackoverflow и тот же Тостер, где можно и нужно задавать конкретные вопросы и изучать чужой опыт. Кроме того по тому же PHP просто тонны обучающих материалов, онлайн курсов и книг. Двигайтесь последовательно, хватит пытаться изучать MVC, когда вы ничего остального еще не умеете.
    Ответ написан
    Комментировать