24 декабря Архивач восстановлен после серьёзной аварии. К сожалению, значительная часть сохранённых изображений и видео была потеряна. Подробности случившегося. Мы призываем всех неравнодушных помочь нам с восстановлением утраченного контента!
front-end thread - реинкарнация и логический этап развития верстка треда, в котором в течение 60 выпусков отважные аноны учили других анонов верстать говносайтики, сжимать ксс и читать фак. Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Полноценная инфа по материалам в пасте, здесь только краткая выкладка базиса и основные ссылки. Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5 и прочитаешь фак/пасту. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали. ====================
КРАТКИЙ ФАК ДЛЯ НЬЮФАГОВ И ПРОЧИХ МИМОКРОКОДИЛОВ
>Можно ли вкатиться в randomAge. Можно.
>Можно ли вкатиться без знаний программирования/матана/функционирования гипертекст протоколов/етц. Можно.
>С чего начать? Что учить? Куда смотреть? Внимательно прочитать ОП-пост, затем прочеть пасту от корки до корки. Подумать, надо ли оно тебе, перечитать все еще раз. Приступать к изучению материалов по порядку.
>Есть ли работа? Была, есть и будет, устраиваются как версталой, так и джунами фронт-ендами. Верстала без хотя бы базового знания JS сейчас как мамонт, поэтому готовьтесь учить и Javascript. В любом случае он вам понадобится, если планируете развиваться хоть куда-то. Джун фронтенд, полноценный и востребованный на рынке, а не программист на джиквери - это спец, умеющий и сайтик сложный сверстать, и страничку оживить, и приложение на нативном сваять.
>Пришел ли кто-то из нашего треда к успеху? Да, и не один а двое, азазазза, кхм.
>Сколько времени займет обучение? Плотно стоящий на ногах верстальщик с портфолио из 3-5 адаптивных макетов, но практически без знаний JS - 400+ часов. Верстала с пониманием JS и портфолио - 600+ часов. Фронт-енд джун с уверенной версткой, уверенным JS, умением в дополнительные техи/фреймворки/препроцессоры/либы/системы сборки/otherSkillName, своими пет-проджектами, в том числе наверстанным портфолио - 1000+ часов.
>Слышал что для устройства на работу нужно портфолио. Нужно, чтобы всякие эйчары могли убедится еще до отсылки тестового что ты что-то умеешь. Верстале для портфолио достаточно запилить самостоятельно пару макетов. Джуну фронту надо либо макеты с вменяемой клиентской логикой и безупречной версткой, либо какую-то приложуху.
>Подскажите хостинг/сайт/место где все эти проекты держать? Для сверстанных макетов без логики или с клиентской логикой хватит и гитхаба. Гуглишь бесплатный хост для страничек от гитхаба - github pages(gh-pages). Иметь профиль на гитхабе вообще - признак хорошего тона, так что в любом случае пригодится.
>Могу ли учить верстку/JS после работы по 2 часа? Можешь но это вряд ли будет эффективно. Указанное время в таком случае можешь смело умножать на 1,3+.
>Могу ли я спросить что-то в треде? Конечно. Но перед этим следует проделать следующие действия. 1. Подумать. 2. Погуглить. 3. Попробовать решить задачу самостоятельно. 4. Еще раз подумать. Если решения все равно нет - спрашиваешь.
Задачу описываем четко, код показываем только в песочнице тут не экстрасенсы сидят нам нужно пощупать код, иначе никто не поможет Аноны с кодом в постах, на скринах, в архивах, сразу идут нахуй. Вас предупредили. Дополнительно можно приложить скрины где показано, что работает/что не работает/как хотелось бы/как планировалось/етц. Плюс текстовые пояснения конечно. Оформите вопрос правильно - практически гарантированно получите грамотную и своевременную помощь.
Дальнейшая информация для ньюфагов в пасте в конце ОП-поста. Там ВСЕ расписано, в том числе самый удачный по мнению автора алгоритм изучения основ верстки, есть тонна полезных ресурсов для разработчиков начального-среднего уровня и прочая годнота.
=====================
Cразу скажу, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует, если конечно сможете найти такую позицию. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Работу находим в конторках и крупных фирмах. Конторки/студии - основное направление деятельности. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ. http://denweb.ru/put-veb-mastera_sod
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
Дайте обратную связь, кому не лень https://gitanon.github.io/ Разное отображение я сам вижу, не старался сверстать pixel perfect все проекты, поэтому такое можно не писать, только если совсем ни в какие ворота. Верстка конечно пиздецовая, пока верстал сам многое понял. Больше интересуют ваши наблюдения по структуре проекта, галпфайлу, подключению фраймворков и т.п.. Шрифт подключился только на фаундейшине, до него я думал все нормально, а оказалось, что нет. Исправлять не охото, на новых макетах внимательней буду. После верстки макета удаляете папку node_modules? В ней файлы маленькие, но на диске больше места занимают из-за кластеров большого размера, чем файл. У меня на порядок больше места на диске занимает, чем есть по факту.
>>532326 я удивляюсь, как легко html-academy внесли в верстку css-слайдеры с использованием input+label. это же пиздец, семантика в жопе. элементы формы вне формы. и всем нормально
>>532685 Сам то как чувствуешь. Все устаканилось? Руку набил? Если уверен, то можешь переходить в продвинутому. Только учти, что там верстать учить не будут. Там будет рассказывать про подходы и технологии, которые ты внедришь в свой процесс верстки
Есть какая-нибудь программа которая показывает, сколько времени я обучался тому то или тому то, сколько времени я верстал и т.д. ? С подсчетом времени и статистикой.
>>532906 Есть трекеры времени проведенного в разных программах/сайтах. Или по технике помидорок ты каждый раз отмеряя помидор можешь тоже потом анализ делать. Ну и я надеюсь ты не собрался прям до секунды вымерять, ибо час часу рознь. Справедливо как для разных людей, так и для одного человнка в разных состояниях. Твоя задача получить знания и навыки, а не набить почасовку. Ее можно использовать просто как косвеный показатель. Надеюсь, мысль ясна
>>532855 Я использую вот это http://www.teamviz.com/ Полностью под реквест не попадает, ведь разрабатывалась больше как менеджер помодорок. Но есть профиты типа отслеживания количества тасков, длительности, удобный подневный репорт по затраченному времени, с графиком.
>>532616 А без диплома бакалавра вообще никак? Мне нужно потратить время на изучение CSS, JS etc, а потом еще пять лет протирать штаны в вузе, получая специальность, не имеющую никакого отношения к frontend, просто, чтобы бумажка была?
двач, есть предложение идти в конторку верстаком за 25-30к/мес. подвох в том, что там нихуя не оформляют, деньги будут наликом выдавать на руки лол хочу вкатиться для получения опыта, для портфолио хуле нормальный предложений не поступает, только такая шляпа
>>532993 Сейчас работаю в такой веб-студии не версталой, полёт нормальный, з\п платят каждый месяц. Смотри на руководителя, если мутный, то нахуй надо.
>>532961 >>532976 Блядь, этот семинар для доверчивых хохлов и прочих долбоебов. Чего только стоит "JS: 100 часов", лол. Осваиваете нужны стэк технологий, идете на работу, набиваете опыт. Там если буедт нужно - можно будет сдать какой-нибудь говно-экзамен или получить сертификат. Никому нахуй не нужен диплом говновуза.
Как же я заебался с этим вордпрессом просто пиздец... Верстка блять легко давалась, а тут нихуя не понятно и не логично, нормальных гайдов на завезли к тому же, приходится каждый шаг гуглить.
Где искать работу версталой? Я хуею, даже на джунов вакансий нет, всем нужны JS/Node/React/Angular, а если не знаешь - пошел нахуй.
Я уже начинаю склоняться к фрилансу за еду, чтобы набить хоть какой-то опыт. Но это же хуйня полная, коллег нет, некого позаебывать вопросами, перенять опыт.
>>533426 два чаю этому господину. сам сейчас готовлю страницу на гитхабе, типа портфолио хз. собираюсь спамить городские вебстудии своими просьбами взять хоть на пол ставки для получения опыта, просто не верю, что все (а их в дс2 предостаточно) ответят отказом.
в местом епаме есть вакансия на джуна.. с опытом работы 3-6 лет и полным набором технологий.
>>533426 Без JS нигде. Хотя иногда встречаю вакансии уровня "кроссбраузерная верстка, IE8, бутстрап, верстка шаблонов под 1сбитрикс, пхп, мускуль, хуй 19 сантиметров 20к/мес". ДС
Реквестирую годный гайд по адаптивной вёрстке без отсебятины, точно и по делу, крайне желательно на русском, видео-курс был бы идеален. Благодарю. Пик-рандом
>>533513 хуерстаешь сначала так, чтобы верстка под мобильники не ехала. 1 блок на 1 строку. потом добавляешь медиа-запросы, в которых уже задаешь размеры отдельным блокам, допиливаешь верстку до состояния макета. ну вот так как-то
>>533469 это где-нибудь в мухосранских говноконторках часто так. ищут человека-оркестра, уровень знаний которого как раз на говноконторку. в нормальных конторах держат нормальных фронтов для клиент-сайда. но эти, пускай даже джун, фронты обладают хорошим таким стеком известных им технологий. и получают, например, в ДС3 от 45-60к, в ДС от 80 и выше.
Кстати, по-поводу прогрессивного энхансмета, неужели удобнее в медиа запросах потом выстраивать полную страницу, там же придется дохуя всего дописывать, разве не легче с полной опускаться?
Делаю техномарт из курса хтмлакадемии. Там надо сделать вот такие чекбоксы и радио.
Стилизовать при помощи картинок я умею делал это для барбершопа, но с техномартом идет вебфонт, который я не могу понять как вставлять. В голову приходит разве что костыльное решение с жс.
Подскажи анон, как стилизовать инпуты с вебфонтом.
>>533563 Это два разных подхода к адаптивности. Описанный аноном Mobile First позволяет телефонам не грузить большие картинки и прочие ресурсы десктопной версии.
>>533470 Бля, надо еще верстку выдрочить, адаптив изучить, потом уже яваскрипт. Думал, может яваскрипт выучу, когда уже реальный опыт буду подучать, но судя по всему хуй там.
Вопросец по адаптиву. Стоит ли ограничивать рамки действия медиа запроса. Т.е. @media screen and (min-width: 320px) and (max-width: 700px) или просто @media screen and (min-width: 320px)
Просто некоторые свойства унаследуются от предыдущего и хорошо это или плохо не пойму. Если что применяю mobile first
Может будет полезным. В общем пытался накатить адаптивные пикчерз. Но вот не судьба - не работает, ну как 1 запрос работал, а остальные нет (пик 1). Минут 30 убил на то чтобы разобраться. В общем никто мне не сказал что запросы нужно ставить в порядке убывания (пик 2). Всем удачи.
Бля, пацаны, понимаю, что я вас уже заебал с этим проектом, но у меня еще один трабл. Как сделать эту разноцветную линейку в футере как на макете? Поясню идею дизайнера: вот эти вот оранжевый-синий цвета имеют фиксированную ширину в 672px, а красный слева и фиолетовый справа соответственно, растягиваются уже по ширине окна браузера, то есть фиксированный width не имеют. Я так думаю, что это нужно как-то через позишн делать или бефор/афтер, но как именно – не понимаю. Буду рад любой наводке или ссылке в гугол.
>>534337 Делаешь двухцветный красно/фиолетовый блок на 100% шириной, внутри него отцентрированный блок (можно псевдоэлементом) фиксированной ширины с пятью остальными градиентами. Куда проще-то?
>>534342 Бля братан, ты гейней! Хуй знает, почему я сам до этого не допер. Наверное, нужно давать отдых мозгам. Пойду закажу пиццу и посмотрю пару серий Офиса или Клиники.
на stackoverflow за такие вопросы с ноги прописывают, спрошу тут
Какой жквери слайдер предпочитаете использовать? Мне важно, чтобы был адаптивным (не обязательно, могу и сам допилить), не нужно было указывать жестко ширину и чтобы поддерживал HTML-CSS в слайдах (а не только картинки).
Я похоже совсем захерел. Вот есть макеты. Как читать на них подписи? 320 - так должен выглядеть макет от 0-320рх? или от 320-до следующего(тут 700рх) 700 - от 320-700 или выше 700рх? и т.д.
Смотрю все адаптив крутят в бутстрапе. Какое видео не глянь - сетка бутсрапа. Вот вопрос - стоит ли дрочить самому сетку или сразу на фреймворк перекатываться?
>>534726 Я конечно полный нуб в верстке, но думаю, что Что бустрап, что скелетон не дают возможность очень точно сверстать любой макет. Мне кажется, есть макеты, которым будет тесно в системе из 12 колонок. Я бы их использовал в первую очередь для создания сайта с нуля, т.е. когда фреймворк выбран осознанно, и макет уже верстается с его учетом. Ну или когда макета нет вообще.
Сортировка в катологе продуктов, например по стоимости, по популярности, ну и заодно по возрастанию и по убыванию. Имеет ли смысл сделать ее радиобаттонами? Посмотрел примеры нескольких магазинов, везде делают ссылками.
Если радиобаттноны в этом случае недопустимы, то почему? Какие проблемы возникнут перед бэкэндщиком, чтобы привязать сортировочные скрипты к их состоянию?
>>534742 Нужно уметь верстать, и делать это хорошо. Бутстрап просто надстройка стилей, плюс залоченная сетка работающая везде. Он бывает полезен когда надо быстро без макета склепать каркас для приложухи, и тебе лень пердолиться с дизайном. Я вообще его не учил. Пишу на пьюр ксс, юзаю флексы, брат жив, зависимость есть. От бутстрапа с его кучей говноклассов, непонятным наследованием и прочими приветами слегка подташнивает.
>>534744 Ссылки универсальнее. Тем более что сортировку можено пилить и на клиенте и на сервере. В любом случае там скрипт основывается на клику по кнопке с айди/классои/дата-атрибутом. Дальше уже принимается решение. Либо на клиенте все пересортировывается и перерисовывается исходя из доступных данных, либо найди отсылается на сервак, а он уже респонсит пересортированным джсоном/готовой страницей.
>>534747 Бутстрап можно самому "приготовить" подключив только нужное и юзая миксины, где необходимо - таким образом разметка будет чистой. Но большинство почему-то его юзает в чистом виде и тогда да, всплывает классянка.
Со мной какая-то хуйня постоянно происходит. Сижу без денег, думаю сейчас бы работенку за еду и жизнь была бы в каеф. Сейчас деньги есть (работы не появилось), смотрю вакансии - мало платят, уже выёбываюсь. Как побороть это?
>>534742 >страп нужно знать А что там знать? Что там учить? Вы так говорите "учить бутстрап", будто это что-то сложное. Если умеешь нормально верстать, тебе и так все с первого раза будет понятно.
>>534635 это ошибка дизайнера, не нужно повторять такое в верстке, у нас на работе за такое пиздят. ну и обговори это с дизайнером, вдруг все-таки не ошибка.
Расскажу ка я вам занимательную историю. Вчера гулял со своей тян в ТРЦ Караван на героев труда в Харькове . Во время прогулки мы решили присесть, суток переложить вещи и т.д. Сели на лавочку. Сидим, сидим и тут мне в ухо попадает обрывок фразы: на-на-на-на-на.... препроцессоры Я такой напрягся и думаю ы надобно послушать. Поворачиваю голову и вижу что за мной сидят два чувака. Один молодой - типичный двощер анимешник нестриженый, с засалеными волосами, в какой-то одежде стремной, немытый... и такой же как первыйзасаленый и т.д. тольуо старше, лет так 35. Вот они сидят и старший грузит нашего брата всякими тупыми вопросами, типо: почему лучше чистый css, а как то, а как се. И тут я понимаю что это ничего иное, как собеседование! Блин! Собеседование на верстальщика без опыта, в ТРЦ в субботу вечером! Короче. Не буду рассказывать как я прозревал с вопросов и что думал об этом работодателе. Скажу лишь что наш брат держался молодцомну как молодцом. Молодцом для омежки и мямлил по теме. Хоть и без уверенности.
З.ы. Я уверен, что человек о котором я пишу один из нас. И если ты прочтешь эти строки - прошу, отпишись. Расскажи че как, как прошло, что это за гомнофирма такая, что даже собеседование нормально провести не может. И даже если ты прочтешь это в архиве - отпишись в действующем на тот момент треде
>>535207 >Расскажу ка я вам занимательную историю. >Вчера гулял со своей тян в ТРЦ Караван на героев труда в Харькове . Во время прогулки мы решили присесть, суток переложить вещи и т.д. Сели на лавочку. Сидим, сидим и тут мне в ухо попадает обрывок фразы: на-на-на-на-на.... препроцессоры >Я такой напрягся и думаю ы надобно послушать. Поворачиваю голову и вижу что за мной сидят два чувака. Один молодой - типичный двощер анимешник нестриженый, с засалеными волосами, в какой-то одежде стремной, немытый... и такой же как первыйзасаленый и т.д. тольуо старше, лет так 35. >Вот они сидят и старший грузит нашего брата всякими тупыми вопросами, типо: почему лучше чистый css, а как то, а как се. >И тут я понимаю что это ничего иное, как собеседование! Блин! Собеседование на верстальщика без опыта, в ТРЦ в субботу вечером! >Короче. Не буду рассказывать как я прозревал с вопросов и что думал об этом работодателе. Скажу лишь что наш брат держался молодцомну как молодцом. Молодцом для омежки и мямлил по теме. Хоть и без уверенности.
>З.ы. Я уверен, что человек о котором я пишу один из нас. И если ты прочтешь эти строки - прошу, отпишись. Расскажи че как, как прошло, что это за гомнофирма такая, что даже собеседование нормально провести не может. >И даже если ты прочтешь это в архиве - отпишись в действующем на тот момент треде
>мотивационный пик с котиком, всем в этом треде
ты тоже из Харькова? я не один тут такой? По поводу собеседования это не я, но я сижу тут тоже, если есть желание у верстанов с Харькова, можно пересечься
>>535208 в общем, если желающие есть, пишите на мыло [email protected] ps я не пью, так что ради в говно со мной пересекаться смысла нету. Но попиздеть о том о сем люблю
Ананасы, нид хелп, нужно чтоб в футере и хедере в зависимости от того, на какой странице мы находимся присваивался класс .active в менюхе. Как это сделать? Как это загуглить я хз.
Привет, может не совсем в тему, но такой вопрос: Какую CMS интернет магазина выбрать для создания шаблона по готовой верстке?
надизайнил и заверстал сайт по доставке суши. - Главная / каталог товаров - корзина / оформление заказа / оплата - текстовая страница / акции / доставка и тд.
Сейчас есть html+css+js. Хочу оживить статику, думаю выбрать cms и натянуть на него верстку. Опыт создания шаблонов только под WP, статья + форма заказа (CF7).
Цель: 1. показывать заказчикам, как готовый проект. Т.е. купить домен, разместить сайт на хостинге. 2. добавить шаблон на templatemonster.com / themeforest.net Поэтому CMS должна быть бесплатной, и чтобы я смог ее поднять на своем хостинге самостоятельно.
>>535346 Если у тебя под каждую страницу свой хтмл, то просто на нужной вешаешь класс. Если так не прокатывает, пиши проверку по location или еще как-то и вешай ее на событие DOMContentloaded
>>535510 Я тебе даже поясню, потому что мне нехуй делать: выполнить твою задачу можно, только узнав URL текущей страницы. УРЛки обрабатываются на бекэнде. То есть, там в роутере прописано, какую страницу выплевывать на /index.php, какую на /profile.php и т.д. Будет вполне логично, если добавление классов, зависимых от УРЛ, будет также происходить на бекэнде (в шаблонизаторе).
Конечно, у тебя есть возможность узнать URL и на стороне клиента. http://javascript.ru/window-location Но для этого, тебе придется добавить js-костыль, который будет срабатывать на каждой страничке и проверять урл, и в зависимости от него динамически добавлять класс. Подумав хорошенько, ты сам поймешь, что наиболее логичным вариантом является именно отработка таких моментов на бэкенде (для чего тебе шаблонизаторы-то вообще тогда придумали, а?), потому что УРЛы и роутинг у тебя по-любому отрабатываются на бэкенде, значит и все, на них завязанное, должно быть там же. Просто потому что это логично. А то получается, что основной шаблон у тебя строится на бэке, а какие-то классы в менюхе добавляются через какой-то js костыль, это путаница, это неочевидно, из-за таких костылей и не любят веб-макак.
Анон помоги с версткой интернет магазина http://joxi.ru/V2VKKMwI0DJ40A Как вообще адаптивно верстаются такие вещи? Я не прошу расписывать все, а только основные моменты. Полагаю верхний блок с лайками прилипить абсолютно. img display:block;width:100%;height:auto; Как заставить все блоки красиво сужаться?
Ахуеть, не было две недели наверное, уже перекатились во фронт-енд-треды и один даже уже уплыл. Хули вы такие быстрые? Зачем так сделали? Был же нормальный симбиоз верстка здесь + js в pr.
>>535579 Ну ладно. Хочу вот сверстать лендинг, до этого только обыкновенные многостранички верстал. Как там это делается - просто делаешь кучу блоков на всю ширину друг под другом? Это же легко?
>>535517 Все это конечно хорошо, но с чего ты взял что я строю шаблон на беке? Я предпочитаю это делать на клиенте, там же оставлять всю прочую дом зависимую логику. В большинстве случаев сервер мне просто присылает данные в сыром джейсончике. А дополнительно дергать его из-за одного ебучего класса - дебилизм. 2016 на дворе если что.
>>535544 Шакал, на твоем скриншоте нихрена не разглядеть. Какие лайки, какой верхний блок? Там какие-то скукоженные кроссовки и толстовка. Кидай нормальный скрин или пример верстки. А вообще все просто. Если делаешь мобайл-ферст, то хуячишь, допустим, враппер, ему задаешь 320-480(min и max-width соответственно, чтоб не пидарасило. Но можно и без мин.). Все эти блоки с кроссовками-хуевками на 100% ширины друг под другом. Для планшетов-десктопов перестраиваешь сетку.
Котаны, нужно сверстать сайт-портфолио+блог. Верстать и JS писать я умею, но вот как это все должно работать на стороне владельца (того, кто будет вести сайт), слабо представляю. Я так понимаю .нужно все это дело будет посадить на какой-нибудь движок и залить на хостинг? Смогу ли я это сделать, если не знаю пыхи? Вроде как никакого сложного взаимодействия с сервером у такого сайта быть не должно.
>>535596 Пока ты варишься в дивном ангулар и реакт мирке, 95% сайтов сайтов работают на обычных цмс, ещё 4% на фреймворках. Строить обычный сайт на ангуларах - ерунда и баловство.
>>535616 Тем временем в реальном мире >AngularJS is used by 0.4% of all the websites whose JavaScript library we know. This is 0.3% of all websites. http://w3techs.com/technologies/details/js-angularjs/all/all>>535616 >Twitter объявил об очередной смене архитектуры: генерация страниц теперь будет осуществляться на стороне сервера, а не на стороне клиента.
>>535705 В моем дивном, как ты выразился реакт мирке, деву платят от 15 бачей в час. Что там у цмсомакак с их днищеклиентами, мне честно говоря, вообще поебать. >Строить обычный сайт на ангуларах - ерунда и баловство. Это уже от сайта зависит. Хотя не отрицаю, что он больше ориентирован на веб-приложухи либо сайты с подобными направлениями. >>535710 Топ кек. Выкатил новость за 12 год и рад. Все зависит от используемого стека технологий, задач, реализации, перспектив разработки и прочего-прочего. Только тогда решается, какой подход выбирать. Твои доводы ты уж прости ничего отражают.
> Знание и опыт работы с HTML5, CSS3, jQuery, PHP; > Участие в обсуждении финальной реализации и архитектуры проектов; > Грамотная письменная речь > Целеустремленность, жизнерадостность > Обязательно выполнение тестового задания. > 15000 рублей > Москва
Спрощу у продвинутых анонов, у меня стоит ИЕ10 необновленный, тестирую проекты в основном на нем. Интересует поведение флексов. Отличается ли оно от поведения в ИЕ11? К сожалению и тот и другой поставить, насколько я понимаю, без танцев с бубном нельзя.
>>535517 >>535710 ананасы, я тут задумался, как поисковики считывают spa-angular приложения? вроде же с этим какой-то головняк, ведь с ангуляром по-другому генерятся страницы
>>535705 логично, блядь, 95% сайтов нахер не сдался ангуляр, ведь это обычно какие-нибудь засранные онлайн-магазины на YII или Joomla, либо лендинги на wordpress или вообще без движка с одним php-файлом отправки сообщения на электронку.
angular же используется для качественных сайтов, у которых уже охуенная аудитория, либо для сайтов, которые вот-вот должны стрельнуть. мимо
>>535582 да, это пиздец как легко, многостраничники верстать тяжелее, там есть разные aside и прочая муть, а в лендингах знай себе хуярь section и классы к ним добавляй
Посоны, а если в ТЗ не сказано о использовании сторонних свистелок вроде бутстрапа и жквери, например, могу я их использовать? Разумеется, что это не повлияет на внешний вид. Ну там не будет бутстраповских кнопочек итд. В ТЗ явно не указано, что нельзя использовать. Не забракуют мою верстку, если там будет сетка на бутстрапе и слайдер на жквери? Иди делать лучше все на ванильном хтмл/ксс?
>>535860 это как бы нормально, что ты юзаешь jquery и bootstrap-grid, если хочешь. у тебя есть задание: сделать верстку. если там явно не указано, что нельзя применять что-либо, то можешь слать все на хуй, ведь тебе нужны фреймворки для увеличения скорости верстки, кроссбраузерности и прочего говна. например, практически все слайдеры сейчас работают на jquery, без него ты создашь лишь говно-css-слайдер. короче, тут все ограничивается лишь тем, какие фреймворки тебе нравятся, а какие нет.
запомни главное правило: не нужно создавать велосипед, если уже существуют готовые решения. так ты сократишь время на разработку, а сэкономленные часы потратишь на поход в бар, где попьешь смузи.
>>535820 До этого у меня стоял 11ый. В нем флексы вроде неплохо работали, а вот в режиме совместимости с ИЕ10, он показывал как раз хуйню. Потому что часть багов которая была, к примеру, с кофликтом flex-basis и box-sizing, в нем не отображалась. Да и вылетал он у меня каждые 3 минуты. Потому собственно и обнулил до десятки.
>>536322 На этапе обучения лучше забить на дрочь этой всей фигни и юзать то, что легче и быстрее. А то проебешь дохуя времени, пердолясь с каким-нибудь вебпаком и в итоге поймешь, что он тебе нахер не нужен, лол. Как работу найдешь - тебе там популярно объяснят, что они юзают, как и для чего. А еще галп легче настраивается и раз в 10 быстрее работает. бывший грантоюзер, безработный
Народ, ткните меня пожалуйста носом в подходящий jQuery плагин: нужно запилить вертикальную карусель для картинок различных габаритов и ориентации (портретная и ландшафтная). На экране планшета должна быть в центре одна картинка, а сверху и снизу по кусочку предыдущей и следующей картинки. Ковырял slickSlider, он шикарен для горизонтальных вещей, у него огромное количество опций, но для вертикалки он не допилен.
>>536674 да, попутно еще ковырял jCarouselLite и смотрел кучу других плагинов. У большинства из них нет возможности сделать вертикальную карусель вообще.
>>536365 Грант/галп настраиваются за пару часов, еще час-другой можно потратить на ВНИКАНИЕ, и собственно все. Я к тому, что смысла сходу лезть во всякие вебпаки и вообще всячески обмазываться хипстерской хуйней не нужно.
>>536779 Ну смотря как вникать. Я например скринкастом от Кантора пару дней обмазывался в процессе смотрел и работу ноды, в частности потоков. Естественно какую-нибудь простую неоптимизированную хуевину можно и за полчаса наваять, что в принципе и гуд
На работу пришла повестка. Я ее подписывать откзаался, что мгновенно опустило меня в глазах начальства на уровень червя-пидора (т.к. их могут вжарить за мою неявку и отказ подписывать).
Походу, это оно, анончики. Пора увольняться. Это была моя первая работа, проработал на ней с начала 2012 года аж, устроиться было очень трудно. Но перспектив я в ней больше не вижу. Меня от нее тошнит, и только возвращаясь домой, и открывая видео интенсивов и Brackets я успокаиваюсь и начинаю учиться с удовольствием.
Средств мне хватит на год безработицы. Теопения тянки хватит на месяца 3-4. За это время я должен добить резиновую верстку, склепать сайт-портфолио, сверастать еще пару макетов, упороться JS по хардкору и найти работу в этой сфере хотя бы на $200/месяц.
Завтра все решится, пойду скорее всего относить заяву на увольнение в связи с переездом, чтобы потом не батрачить еще 2 недели.
Пожелайте мне удачи, или просто напишите что-нибудь. Мне нужна ваша поддержка.
>>537471 Кем работаешь? Алсо, по идее повестка теперь может считаться врученной. Если они там акт-хуякт составят, конечно, что ты отказался ее принять.
Посоны, помогите. Нужно сделать редизайн и сверстать карточки товаров для отзывчивого сайта. Возникла проблема с кнопкой "купить" и отсутствием состояния hover на touch-устройствах. Набросал 3 варианта решения поставленной задачи со своими плюсами и минусами.
1. Всегда отображать кнопку. + нет проблем с hover + положительно влияет на конверсию - кнопка многократно повторяется, к тому же на реальном сайте она красная
2. Показывать по наведению + нравится заказчику + нет монотонного повторения - функционал завязан на состоянии, которого в принципе нет на мобильных устройствах
3. Убрать кнопку + нет монотонного повторения - чтобы добавить товар в корзину, нужно сделать на один переход больше
>>537566 Так на тач устройствах вроде состояние ховер появляется при таче. Или у тебя сама карточка является ссылкой и при нажатии перенаправление будет?
>>537581 >Или у тебя сама карточка является ссылкой и при нажатии перенаправление будет? Когда тыкаешь пальце в фотку, которая обернута в ссылку, тень и кнопка появляются на долю секунды и затем сразу происходит переход на страницу товара.
>>537652 Видел давно. Чувак то сам занимается фронтендом, причем судя по пьянкам-гулянкам не слишком то и яро. А так его поддерживаю, нехуй сюда идти. НО! если только тебе это не ппц как нравится и ты готов постоянно въебывать.
>>537544 Увы, анон, но ОТКАЗ ОТ ПОДПИСАНИЯ повестки де-факто и де-юре является свидетельством того, что тебя застали с поличным и уведомили должным образом. Так что теперь ты это самое, уклонист самый настоящий. Хотя, на самом деле, всем похуй, максимум штраф 500руб впаяют.
>>537733 В ДС2 дешевле жильё и транспорт, ближе ехать до работы. В маааааскве больше вакансий. Алсо, начинающие имхо особо нахуй не нужны ни там, ни там.
>>537733 Питер уныл и уебищен, зато там клевый исторический центр. Москва огромна и охуенна, зато набита хачами и истеричными снобами. Как говорится, сорта говна. Где найдешь работу - туда и едь.
>>537844 >исторический центр Оверрейтед говно, состоящее из развалюхи, засранные дворы и толпы, просто ёбаные толпы выползающих GOOLYAT хипстеров. Ненавижу эту парашу, но живу, потому что работа в пешей доступности. А ещё в центре нет нормальных магазинов - только хачёвские закутки 24 часа, и пафосные бутики ЛЕРУА ХУЙПИЗДАЧЕ с бабскими шмотками по цене самолёта. мимо
>>537866 Я к тому, что центр - сраная параша по сравнению с цивильными спальниками (Просвет, Коменда, Йухо-Запад, Парнас). Где есть и магазины для чего-нибудь купить, и парки/большие дворы с зеленью для погулять, и наконец дома, в которых штукатурка не сыплется на голову.
>>537876 >Просвет, Коменда, Йухо-Запад, Парнас Быдлан детектед Нахуй твоя окраина никому не нужна, ты бы ещё девяткино предолжил. Отпустить девушку одну до метро вообще невозможно ни в одном из этих районов
>>537471 Не скажу что успех тебе обеспечен, но если будешь усердсвовать и ответственно к этому отнесешся, то все получится. мимо верстальщик на удаленке
>>538039 Я сам не знаю кто я, в том плане что должность не описывалась. Задачи получаю, больше верстальные, на мой взгляд, потому что JS в них оче базовый. Щас проекты идут такие, что клиентской логики маловато, а ту что посерьезнее пишет кодер на ангуляре. Впрочем, работаю я недавно, постоянно развиваюсь, так что все ще впереди.
>>538055 Всегда было интересно как работодатель измеряет работу в часах. Сам оценивает, или вы автоматизировали этот процесс? Ну не под честное же твое слово.
>>538056 >Где нашел удаленку? Вышел на одного человечка, а потом все закрутилось. >Первая работа верстальщиком? Почти >Какими скиллами обладал, когда устраивался? Отличный HTML/CSS. JS на уровне простой приложухи с вводом/сохранением/рендером. Адаптивность, флексы, весь зоопарк инструментов, кроме разве что вебпака ну и всякого по мелочи. >>538067 От менеджера все зависит. Можно и под честное, можно и под всякие проги типа вотчера с апворка, который снимает с рандомным интервалом в ~10 минут твой экран, и если в рабочее время у тебя на экране не код, а треп в вкашечке, то 10 минут своего времени можешь смело удалять, никто тебе за них не заплатит. В конце концов есть определнный набор тасков, коммиты, по ним сразу видно, работал человек или хуйней страдал. Я не халтурю, если где-то по времени затягивается, сразу предупреждаю. Стараюсь жесткие затупы, когда к примеру, час-два уходит на то чтобы разобраться на stackoverflow, че за хуйне и что с ней делать, вообще не учитывать как рабочее время. Хотя возможно, это не сильно правило. >>538071 По разному. >>538074 В чем наеб? Ангулярщик у нас, насколько я знаю, от 15ти получает. Послушай тех же типочков из академи. Они сами говорили что совсем базовая верстка стоит от 300 рублей. А это считай уже 4 зеленых бумажки. >>538076 Это не имеет значения. Все обсуждается. Но в любом случае ребятам, ориентирующимся на удаленку советую заготовить кошелек на одном из популярных ресов. В приоритете киви, пэйпал, яндекс, возможно вебмани или еще что-то. Для зарубежных пайонир или пэйпал.
>>538090 Вот когда всерьез задумаюсь над ее покупкой, тогда и буду решать. Пока обхожусь великом. >>538091 Все от задач зависит. Иногда вообще не работаю, иногда по 6 часов. В среднем от 3-5. Если меньше, толком и не сделаешь ничего. Это только кажется, что все охуеть как быстро. А как сядешь проект ковырять, уточнять таски и рисовать три перпендикулярные зеленые линии прозрачным цветом, то сразу понимаешь - это тебе не уютненькие учебные макетики на гитхабик заливать. >>538092 Понятия не имею откуда ты взял цифру в 70к.
Кек. Пришел недавно с работы - писал в треде пару раз, я тот анон, который знает основы html/css, но уже ищет работу (и я таки ее нашел - шаражкина контора без оф устройства и прочей стабильности). Вакансия была типа верстала/контент менеджер. Сегодня фиксил блоки флоатнутые влево блоки, верстал таблички и постигал основы нескольких cms. Сказали, что через некоторое время доверят верстать сайт. Только они собирают их на бутстрапе, но я надеюсь, что запилю охуенный адаптив и без него, главное потом грамотно натянуть все на cms. Охуел с цен на бизнес-ланч, по идее, если я буду его брать каждый день на протяжении месяца, то мне даже не хватит потенциальной зп на другие блага, до этого просто работал в общепита - кормили бесплатно Такие дела.
>>538131 > овладевают практически всеми современными языками программирования: Object Pascal, C/C++, PHP, Java, JavaScript, SQL, Lisp, Prolog, GPSS, HTML, XML, VHDL, Assembler > assembler > lisp > C Ну хуй знает, техническую вышку для фронтендеров требуют разве что совсем отбитые работодатели, а за бугром всем будет похуй на эту шарагу.
>>538180 совет от бывалого версталы. бери еду с собой из дома, иначе охуеешь платить. я по собственной дурости сливал почти половину зп на еду мухосрань, of course
Какой самый базовый стек технологий, чтобы устроиться на работу во фронт-энде? CSS + HTML + элементарный JS - этого хватит? Насколько критично знание препроцессоров? Нужно ли с самого начала уметь в сборщики (Gulp, Webpack)? React, Angular, JQuery?
>>538352 Отличить просто, если дать одну и ту же задачу мидлу и джуну, то выполнят они ее оба, только вот джун пока гуглит сидит и ебется с косяками мидл наученный опытом уже все сделает 3 раза.
>>538635 Методология предоставляет тебе возможность делать так как ты хочешь, но чтоб это оставалось читаемо. Это читаемо мимопроходящим? Придерживаться полностью всему бэму есть смысл только идя на работу в яндекс, в остальном это ненужно. Смысл в уходе от каскадирования при сохранении читаемости и логической зависимости элементов. А то заебали со своим бемом, боятся дефис лишний поставить, ебать грех на душу от владыки священного писания.
>>538635 Не может. social-links__item--twitter должен наследовать свойства из social-links__item, если не выполняется это условие, значит ты не правильно используешь бэм.
Я тут подметил, что если на страницу вставить видео айфреймом, а потом поменять его на другое, ебучий фаерфокс видео не поменяет, а оставит первое. Что за хуйня блять? Какждый раз куки пидорить штоле?
Пацаны, слушайте прохладную. Я решил открыть еще один репозиторий на гитхабе, создал его, но вместо того, чтобы тыкнуть на сетап ин десктоп просто в приложении создал папочку и скинул туда файлы. Потом все-таки понял, что сделал не так, и нажал на этот чертов сетап ин десктоп. Ну, содержимое папки у меня, соответственно, обнулилось. И, в общем, я реально скинул туда все, а не скопировал. Походил кругами по комнате, попил чайку. Сейчас сижу с охуевшим лицом и представляю, как просижу 3 дня и 3 ночи за переверсткой уже почти готового макета. В чем смысл-то. Всегда делайте резервные копии.
Хотя может оно и к лучшему, один хуй хотел на флексах сетку переверстать.
https://habrahabr.ru/company/mailru/blog/282027/ Видели уже? Интересно, когда эта хуитка станет доступна разработчикам учитывая тормознутость вэтрицэ - черз 10 лет. И как ее можно будет использовать. И зачем.
>>538796 Судя по твои последим двум предложениям, ты нихуя не понял из статьи, но у же что-то ждешь. Вот это, как раз про тебя и про меня >«Мне это не нужно! Я просто делаю обычные веб-страницы, а не пытаюсь хакнуть внутренности браузера или сделать что-то крайне экстравагантное, экспериментальное или суперсовременное». Если вас посетили подобные мысли, то я настаиваю на том, чтобы вы пока отложили этот текст и тщательно изучили технологии, используемые вами для создания сайтов в последние годы.
Задал вопрос в JS треде, но меня там проигнорировали. Спрошу здесь.
Вопрос от ньюфага по поводу обработчиков событий на клиенте. Какая самая лучшая практика по навешиванию множественных обработчиков на однотипные элементы. Например, есть у нас некая борда, со списком тредов. В каждом треде есть поле для ввода поста/кнопка/whatever, на него нужно повесить обработчик, который что-то там делает. Прослушиваемых элементов, как и тредов, может быть очень много.
Какой вариант в таком случае предпочтительнее?? Собирать все нужные поля со страницы в массив, проходится по нему циклом и вешать на каждое событие. Использовать делегирование на документе? Писать мелкокласс под элемент и затем инициализировать столько его копий сколько потребуется? Может какие-то другие практики?
Как быть, если font-weight:300 или lighter не отображается на safari и фаерфаксе и опере. В общем, отображается только на хроме. Шрифт подключал из гугл фонтс.
>>539591 это тест на самого внимательного долбаеба который тратит свое время на вглядывание в мелкие элементы прикрепленных пикч, ты прошел. Поздравляем.
>>539617 Постараюсь объяснить получше. Меня интересуют хорошие практики по отлову событий на множественных элементах, к примеру, кликов на кнопке. Например, есть у нас форум, на каждом посте у него висит кнопка ответа. Она делает одно и то же. Но этих кнопок столько, сколько постов, то есть сотни. Как лучши их обработать? Поймать все кнопки через querySelectorAll, а затем циклом навесить на каждую обработчик? Или заюзать делегирование с одним обработчиком по клику на документе вроде этот вариант получше, но я не уверен, что ловить каждый клик по документу для нескольких, пусть и десятков, кнопок == хорошо? Что производительнее?
>>539618 Смотри какие форматы шрифтов подключены, смотри какие форматы шрифтов поддерживают какие браузеры, смотри как ты юзаешь font-face, и какое использование поддерживают какие браузеры. Ищи несоответствие между этими параметрами. Совсем не можешь в логику, глупенький?
>>539713 Какие форматы, какой фонт-фейс. Говорю, из гугл фонт шрифт подключен. Шрифт РАБОТАЕТ ВО ВСЕХ БРАУЗЕРАХ. 300 или lighter не во всех работает, вот в чем проблема.
>>539618 если подрубал через google-fonts, то он еще и в ie не работает. совсем не работает. лично я решил эту проблему подключением font-face в css, так как требовалась поддержка ie. правда, я еще и подрубил через google-fonts шрифт, чем не горжусь
ананасы, есть такой макет. как, по-вашему, лучше сверстать такое вот? верстка уже готова, просто интересно мнение анонов, потому как я с ней поебался изрядно, проебал времени на пару часов больше, чем планировал
>>539061 я бы юзал jquery, если он используется: $('.elem').each(function(){ $(this).on('click', function(){ тело функции }) })
по сути, это тот же пробег по массиву, только не на нативе. думаю, при динамически подгружающихся элементах будет косяк, потому надо будет заново инициализировать функцию. ну и все равно по скорости это будет О(n*n), но я не вижу вариантов быстрее. то есть, я вообще не вижу других вариантов для подобного. и не вижу смысла в делегировании, ведь тогда вешать придется на body. и скорость работы, как мне кажется, будет еще меньше, ведь для начала надо будет проверить, что target == elem, а потом уже либо выйти из функции, либо продолжить выполнение.
>>539959 Я наверное даун, но не понимаю, что там происходит. По клику на маленькой фотографии появляется большая? Тогда почему на первом скрине две колонки, а на втором три? Или это вообще две разные страницы, но тогда в чем суть вопроса?
>>540008 это прайслист. большие блоки появляются только при большом разрешении, при маленьком исчезают. проблема в том, что в одном месте блок показывается слева, а в другом справа, через каждые 4 блока.
>>540070 и из-за этих больших блоков с сеткой происходит лютейший пиздец при разных разрешениях. флексбоксы не предлагать, так как требуется поддержка >=IE-9.
>>540067 Раз большой блок (судя по фото) относится к конкретному маленькому, то пусть будет с ним в одной обертке. На большом разрешении тянешь обертку на всю ширину, а сам большой блок делаешь видимым. Маленький блок в обертке остается таким же.
>>540143 я считал этот блок самостоятельным элементом, а оказалось, что он лишь часть другого блока. кроме того, я показал это нескольким знакомым прогерам, все точно так же посчитали его самостоятельным элементом.
Короче, загвоздка оказалось в том, что я в фонт-фемили взял название шрифта в кавычки. Тупой брэкетс, блять, меня запутал(выделял код оранжевым только тогда, когда я писал название в кавычках). Но тем не менее хром все правильно кушал, и другие браузеры тоже шрифт кушали, но отказывались менять его написание. Пацаны, это пиздец.
>>540793 >флексбоксы не предлагать, так как требуется поддержка >=IE-9. ожидаемо, лол Исправить эту хуйню дело пары минут. Походу ты им просто за бесплатно что-то сделал
Двачуны, как спозиционировать высоту одного блока относительно другого? То есть вот есть у меня один див, высота которого не фиксирована и скачет в зависимости от контента и мне нужно, чтоб высота другого блока менялась вместе с ним, т. е они были одинаковой высоты всегда.
в теме не нашел, но искал по ключам, собственно, вопрос. Есть интенсивы, лютая годнота, спасибо всем. Первую часть досмотрел. Где брать те макеты из проектов? UPD. Лол, перед отправкой решил взглянуть на корень папки с видосами, нашел. Запощу, чтоб такие как я знали ответ.
http://joxi.ru/BA0vvwxsBbMxbm Судари может есть какой-то хак с компоновкой слоев чтоб наложить лого на бордер и получился разрыв. Пока только додумался абсолютным позиционированием.
Как думаете, 4 адаптивных макета + седона (единственный макет, который я нашел с готовыми свг) достаточно для портфолио? А то я заебался верстать в никуда, хочу уже упороться джс по-хардкору.
>>540940 >>540946 Забыл сказать что 2 блок выше первого и просто применить высоту второго блока к первому не получится. Ну хотя там может нужно значение типа 1=2-отступ у 1.
>>541101 Нихуя толком не понятно что ты хочешь, если честно.Тебе нужно, чтобы нижняя граница первого блока совпадала со второй? Тогда inline-block + vertical-align:bottom тебе в помощь.
>>540793 визуально в макете шрифты больше, можно было бы залечить про разный рендер шрифта в зависимости от ОС и браузера, но нахуй таких. Мелкий косяк, который легко фиксится, называют "явной недоработкой".
>>542051 Не жалуйся - лучше занимайся (если действительно интересно и хочешь разобраться, если нет - то не стоит и время тратить) Я вот вчихляю сижу в ооп на js (7-8 урок в базовом по js). Вроде сама концепция понятна относительно проста и ясна, материалы из допов понял, но вот в его объяснения кода проекта чет не могу въехать. Проще самому написать, лол
Вставляю части текста с Фотошопа в проект (Ctrl+C Ctrl+V), текст написан капслоком, есть ли способ сделать его обычным? Вообще как вы работаете с контекстным текстом, тупо перепечатываете?
>>542125 Я набираю более 500 знаков в минуту на русском и английском - проблем с перепечатыванием нет. Но большие участки могу и скопировать (естественно быстрее будет).
Поэтому тоже присоединюсь к вопросу - было бы весьма удобно
>>542424 в HTML 5 может быть дохуя h1, почитай теорию, да и мне похуй собственно на семантику в этом проекте, мне за него 3к заплатят, а там еще дохуя внутренних страниц делать, пиздос.
Еще подкиньте ссылок с макетами хард-левел, а то все эти однотипные лендинги и интернет-магазины остоебенили, хочется вдохновения в веб гуе и более сложных задачек.
>>542594 >Верстаны, как заверстать гексагоны как на этом макете Делаешь пикчи вряд в одном диве, затем в другом, затем в третьем. Потом с помощью отрицательных маргинов или position:relative + top/bottom приводишь их в тот же вид, что и на макете.
Почти завидую вам, ребята, вашей энергии, вашему энтузиазму. Вроде знаю все популярные джс фреймворки, вёрстку, а делать портфолио охоты никакой. Откуда вы берете энергию на всё это?
>>542709 В смысле ошибка? Нет там ошибки. Меню оформлено так, что пункты имеют маргин т.е. белую обводку примерно 5 px. С чего мне не поможет задержка если пользователь уже успеет навести мышку на уже выпавшее окно? Как раз таки задержка и поможет.
Доброго времени суток. Парни, есть ли в этом треде те кто только начал постигать верстку до 2х недель от старта и желает найти соответствующее своим навыкам окружение для совместного продвижения в этой области? Из пожеланий только адекватность, дружелюбность и целеустремленность. Если таковые все же найдутся, то буду рад составить компанию и оказаться всяческую помощь в силу возможностей для достижения поставленных целей.
>>542767 А зачем делать расстояние между блоками? В чем профит? Если бы мне нужна была белая полоска между ними я бы тупо через бордер сделал, и всё нормально бы работало.
>>542772 есть макеты в которых например фон не однотонный или меняется и вот такое расстояние между пунктом на который наводишь и блочком который появляется
Аноны, а можно как нибудь :hover и :active повесить на псевдоэлементы ::before и ::after? Сверстал стрелочки в нердсе псевдоэлементами, а как на них ховер повесить не знаю.
>>543193 >элементарной Согласен. Кстати, каменный топор - тоже элементарный. >полезнейшей Для кого? Для актёров, которым нужно изобразить опухшие глаза? Бесспорно. --__-_-____---_-_
>>543204 То есть для тебя это сложно и непонятно? Ты не можешь разобраться, где ставить подчеркивания, где дефис, где два дефиса? Поздравляю, ты ретард! Начальник цеха Иван Саныч на сталелитейном заводе ждёт тебя с нетерпением.
>>543155 Тоже так думал, бро. Посмотри продвинутый интенсив, там как раз хорошо объясняется, почему БЭМ - годнота. В связке с препроцессорами, конечно.
>>543322 Хуита, платить смысла нет. Еще и лектор время тянет, смотрел в х2. Ах, да, очень долго смиялся, когда на 2-й лекции "студентам" за 15 минут "рассказали" про объекты, а потом полтора часа рисовали квадраты на канвасе)))
Аноны, кто верстал барбершоп, там фоновая картинка с затенением, если просто вырезать и поставить фоновую пикчу получается слишком светлый фон, как затенить?
>>543292 >>543204 >>543155 >>543409 Спешите видеть, долбоеб ИТТ! Не осилил БЭМ и начал гундеть. БЭМ однозначно нужен на больших проектах, там без него никак. Но он отсасывает на мелких проектах уровня лендингов или онлайн-магазинов с несколькими шаблонами. Попробуй написать что-нибудь типа того же фейсбука или втентаклика, и ты всосешь со своей каскадностью. мимо верстаю больше 2 лет
>>543322 Как раз таки его и стоит покупать, потому что посмотрев лекции нихуя не запомнится, а задания по нему только на интенсиве можно выполнить. Сам смотрю его и не знаю, как попрактиковаться. Выразительный ЖС еще читаю, но там как то полунеосиляторски идет.
Громов, сука, пидор, не мог в офисе трансляцию вести. Пиздец, второй интенсив смотреть невозможно из-за хуевых разрешения и звука. Да, я ничего не заплатил и жалуюсь, я знаю.
Я вот что не пойму - посмотрел уже 4 видео продвинутого. Что они там вообще верстают? Первая половина интенсива - чисто введение в инструментарий, нихуя про адаптивность не говорят. Как можно начинать верстать, если не знаешь, что должно получиться в результате? Им их кураторы это рассказывают, что ли?
Думаю страницу портфолио специально склепать на бутстрапе. Хорошая идея? Типа, вот вам и статика, вот вам и адаптивность, а само портфолио как бы покеазывает умение работать с самым популярным фреймворком.
Аноны, можно ли как-нибудь в фотошопе расставить много полосок, над которыми будет отоброжаться длина в пикселях? Сейчас чтобы измерить какой-нибудь паддинг, переключаюсь в фш, отмеряю линейкой нужный кусок, переключаюсь в css и вписываю куда надо, а так бы вначале расставил сразу все измерительные полоски и простым альтабом узнавал бы нужную инфу.
Антоны, поясните за Авокод. Вчера просил тут поделится фотожопом с работающим экспортом одной кнопкой. Да и в принципе мой уже немного устарел и нужен по новее. Предложили использовать Авокод, я решил его попробовать. Но что-то он совсем сырой. Высоту строк у одиночных слов не показывает; шрифт: вместо PT Sans Narrow, показывает просто PT Sans; сохранять с изменением качества у JPEG он тоже не способен. Может, это я просто еще не разобрался, или он и вправду на всё это не способен?
>>544084 Нашел где можно посмотреть используемые в макете шрифты, и там действительно указан PT Sans Narrow, но вот если у нас в макете также будет PT Sans Caption, то при наведении на текст, мы всё еще будем видеть только пикрелейтед, или же там будет конкретно указан PT Sans Caption или PT Sans Narow?
Антуаны есть еще пара вопросов: 1.Есть ли прога, которая будет показывать очертания тегов и их название\класс\id типа как в интенсиве, на первых видео? 2.Как верстаются всплывающие подсказки при наведении на элемент? Вангую что псевдоэлементами при hover, но неясно как сделать их заползающими на другие элементы.
>>544360 Я другой анон, но согласен что брекетс хуйня, а если поставить 3-4 плагина то вообще дико лагать начинает. В сравнении с ним вебшторм куда шустрее и фич больше. За остальные проги не поясню
Только что протестил этот плагин от адоб для брекетс. Всё те же претензии что и к Авокоду. Не дает выбрать качество картинки jpeg. Также не может правильно определить тип шрифта в семействе PT Sans (Narrow или Caption - он не видит). Размер шрифта, внезапно, он мне выдает 6px, вместо 16px. Пипетку я тут так и не нашел... А сам по себе брекетс как текстовый редактор для верстки, меня устраивает полностью.
>>544411 А хули у тебя в font-weight числовое значение? Мне советуют там писать только bold или default, наебывают? >А сам по себе брекетс как текстовый редактор для верстки, меня устраивает полностью. Попробуй webstorm, базарю понравиться, я начинал с брекетса и вроде норм было, но после того как поюзал несколько дней шторм возвращатся в эту хуиту перехотелось. Тем более там много плюшек для JS, типа автодополнения, подсказок, рефакторинга и т.д.
>>544468 > А хули у тебя в font-weight числовое значение? Так это адоб автоматически взял значение. >Мне советуют там писать только bold или default, наебывают? Да хз... Я сам в смятении. Обычно пишу тоже буквами. На базовых интенсивах чувак пишет цифрами.
Вопрос от дауна, адресованный тем, кто проходит/смотрит джаваскрипт-интенсив от кокоакадемии: Как вы настраивали свое рабочее окружение? В верстке все было легко, галп+плагины=профит, а тут уже на 3-м уроке затирают про джсоны, еслинтконфиги, вебпак, локальный сервер, при этом инфы никакой не дают. Еще и структура их учебного проекта (кексобукинг или как его) немного ебанутая. Я в смятении. Если бы платил за этот курс, то охуел бы, лол, 99% всей инфы все равно черпается у фленагана+лернджс. Пока что решаю задачки по теории в атоме+script (запуск кода прямо в редакторе через ноду).
>>544503 Громов на продвинутом говорит, что синтаксис Sass устарел, и никак не обосновывает, чем же он плох. Потом говорит, что не любит Sass (имея в виду синтаксис SCSS) за вещи наподобие @include clearfix, якобы писать слишком много. Хотя в Sass то же добавление миксина выглядит как +clearfix. Простите, подгорело.
>>544501 Эту хуйню не стал проходить, там настолько поверхностно, что смотреть можно только для того, чтобы понять, как примерно происходит работа фронтенда на реальном проекте, знаний особых интенсив не дает. Сам же собираю все через галп, и, при необходимости, сервер на том же галпе запускаю. Олсо, на винде стоит openServer, а на линуксе lamp.
На винде очень редко делаю верстку, если просто лень переключаться. Обычно все делаю в линуксе, ведь там в десятки раз проще в случае чего локально поднять долгоиграющий проект по типу готового сайта. Прямо сейчас так и работаю.
>>544570 Пишу на stylus, потому что это у него самый удобный синтаксис. Иногда приходится пересаживаться с less и sass. Вот тогда печет от того, что синтаксис уродский какой-то.
>>544607 Ну я вот прошел пока 6 уроков делая код и магию + параллельно пару простеньких дополнений написал для сайта, на котором зависаю, и примитивного бота (все по материалам этого интенсива). Хз на счет поверхностности, но Кантора читать всего все-равно буду, хоть кусками и так читал ибо в интенсиве дают на него ссылки
>>532095 (OP) Пагни, поясните за ajax. Посмотрел htmlacadeny курс продвинутый там где о прикладном javascript-e, вроде все понятно, решил протйти вот этот курс для закрепления https://learn.javascript.ru/ajax-intro Вопрос возник такой: вот делаю я что-то через аякс, что-то отправляю итд. В курсе выше есть написан код ответа сервера. На деле же примеры могут быть разными, а бекенд ни писать ни изучать желания нет. Как проверить рабочий ли код на практике? Или оставлять такие вещи бекендщикам?
Почему в продвинутом интенсиве говорят начинать верстку адаптивных сайтов с мобильной версии, а не с полноценной десктопной? Разве не проще написать кол полностью, уже в зависимости от ширины вьюпорта убирая некоторые элементы?
И второй вопрос. Дайте ссылку где почитать, или абисните на пальцах, как пишутса медиа-правила с учетом мобильников с разрешением экрана больше, чем даже в моей пеке. Нет никакого смысла же писать все эти правила для экранов 764рх, 920рх и т.д., если в какой-нибудь Xperia Z5 разрешение уже 4к.
>>544856 >ширина экрана устройства ОК, ширина экрана какого-нибудь Samsung Galaxy S6 сейчас 2560х1440рх. Как задать медиазапрос, чтобы на экране этого мобильника, верстка сжималась до moble-версии?
Да тут нечего изучать, будешь использовать один, легко сможешь использовать другой. Я с лесса пересел на стайлус и изменилось только то, что я не ставлю двоеточия и точку с запятой (фигурные скобки ставлю, мне так удобней, но можно и не ставить)
>>544891 Смотря, наверное, какие именно функции ты используешь.
Если какой-то начальный вариант вроде вложенности, переменных и простеньких миксинов - это одно, Но, наверное, сложности возникнут, если ты вдруг нашарился использовать циклы, рекурсии и т.п.
>>544894 Для начинающего версталы таких кейсов раз два и обчелся. Больше напрягаться нужно для того чтобы их придумать. Так что об этом можешь не беспокоится. Less и Sass так и вовсе практически 2 брата близнеца.
>>544607 Про поверхностность согласен, я сам больше по кантору+фленагану изучаю, а в интенсиве, как раз-таки, хотел глянуть реальный ПРОЦЕСС, но нихуя не понятно и нихуя не объясняется. Зачем там локальный сервер, как его настраивать под фронтенд для выдачи тех же кукисов? Придется самому пердолиться. Вообще уже что-то мотивация на дно укатила, верстку я освоил полностью (практически), а на джс завис, уже месяц фактически "учу" и по-прежнему нихрена не знаю.
>>545195 У меня с js такая же хуйня была. Только у меня после 3 месяцев было такое же чувство, будто я нихрена не знаю. А потом произошел резкий рывок за пару дней, я понял, что могу сделать вот это, вот то, знаю, что это такое, что то, спокойно читаю код и понимаю, что происходит. А до этого была паника, я думал, что просираю свое время, пердолясь с js и нихуя не понимая. думал даже бросать, считая, что ничему не научился. а сейчас понимаю, что я за полгода прогрессировал так, как не прогрессировал до этого за год на работе верстаком.
Господа, сделал недоанимацию на недослайдер, чтобы когда новая картинка наезжала сверху, было видно как она перекрывает предыдущую, сделал это с помощью добавления класса show предыдущему элементу. Так вот этот класс show остается у всех классов и в итоге последняя картинка перекрывает весь слайдер на последующих кругах. Как его очистить потом? И как сделать, чтобы первый слайд при загрузке странице не отрабатывал анимацию, а в следующие круги отрабатывал?
>>545220 ну, начнем с того, что если ты делаешь слайдер не для себя, а для какого-нибудь сайта, то не создавай велосипеды, прикрути уже готовый слайдер.
А во вторых, если уж ты делаешь его для себя, то можешь сделать так: при клике на следующий слайд текущему задаешь какой-нибудь класс, в котором прописана opacity: none + transition: opacity. Потом делаешь задержку например 500 (setTimeout) и после задержки следующему добавляешь класс shown (или какой передвигает слайд). потом предыдущему добавляешь класс, который делает display: none. И все. После обнуляешь все классы и начинаешь по-новому. Геморно, но прокатит.
Еще как вариант можешь накатить белый фон к слайду, тогда он будет закрывать предыдущий. Это проще, но в случае чего у тебя появятся белые квадраты, если картинка в слайдере черная, например.
images1[index1].removeAttribute('class', 'active'); вот эта строчка обнуляет класс актив, но эта же строчка не обнуляет класс show, и я не пойму как его обнулить. Уже и в элсе пихал и куда угодно, не хочет его убирать.
Мне интересно вот конкретно на этом примере. Видишь, вроде как первый круг идет нормально, слайды типа накладываются друг на друга, но класс show не обнуляется, и в итоге на втором круге показывает только самый верхний слайд, вот конкретно в этой ситуации можешь подсказать как его обнулить?
>>545260 блядь сука. посмотрел твой код, не обижайся, но верстку тебе надо учить. все можно было сделать лучше, тебе кейфрэймсы не нужны, есть же трансишн + overflow: hidden для контейнера. тогда не понадобится скрывать img при помощи display none. достаточно всем картинкам задать position relative + right -100%.
также не обязательно позиционировать картинку относительно li-шки.
>>545279 >>545260 Ничего особенного в этом нет. Нормальные сайты и должны работать без js в случае чего. Коряво, но работать. А еще поддерживать IE. Но в современном фронтенде без js никак.
Здесь аноны изучают верстку, базовый фронт-енд и обсуждают все, что с этим связано. Полноценная инфа по материалам в пасте, здесь только краткая выкладка базиса и основные ссылки.
Если ты ньюфаг, то тут тебе будут рады. Но только в том случае, если ты, перед тем как что-то спросить, погуглишь хотя бы минут 5 и прочитаешь фак/пасту. В противном случае будешь послан нахуй, и абсолютно заслужено. Совершенно идиотские вопросы, нытье и прочее - аналогично. Не говорите, что мы не предупреждали.
====================
КРАТКИЙ ФАК ДЛЯ НЬЮФАГОВ И ПРОЧИХ МИМОКРОКОДИЛОВ
>Можно ли вкатиться в randomAge.
Можно.
>Можно ли вкатиться без знаний программирования/матана/функционирования гипертекст протоколов/етц.
Можно.
>С чего начать? Что учить? Куда смотреть?
Внимательно прочитать ОП-пост, затем прочеть пасту от корки до корки. Подумать, надо ли оно тебе, перечитать все еще раз. Приступать к изучению материалов по порядку.
>Есть ли работа?
Была, есть и будет, устраиваются как версталой, так и джунами фронт-ендами. Верстала без хотя бы базового знания JS сейчас как мамонт, поэтому готовьтесь учить и Javascript. В любом случае он вам понадобится, если планируете развиваться хоть куда-то. Джун фронтенд, полноценный и востребованный на рынке, а не программист на джиквери - это спец, умеющий и сайтик сложный сверстать, и страничку оживить, и приложение на нативном сваять.
>Пришел ли кто-то из нашего треда к успеху?
Да, и не один а двое, азазазза, кхм.
>Сколько времени займет обучение?
Плотно стоящий на ногах верстальщик с портфолио из 3-5 адаптивных макетов, но практически без знаний JS - 400+ часов.
Верстала с пониманием JS и портфолио - 600+ часов.
Фронт-енд джун с уверенной версткой, уверенным JS, умением в дополнительные техи/фреймворки/препроцессоры/либы/системы сборки/otherSkillName, своими пет-проджектами, в том числе наверстанным портфолио - 1000+ часов.
>Слышал что для устройства на работу нужно портфолио.
Нужно, чтобы всякие эйчары могли убедится еще до отсылки тестового что ты что-то умеешь. Верстале для портфолио достаточно запилить самостоятельно пару макетов. Джуну фронту надо либо макеты с вменяемой клиентской логикой и безупречной версткой, либо какую-то приложуху.
>Подскажите хостинг/сайт/место где все эти проекты держать?
Для сверстанных макетов без логики или с клиентской логикой хватит и гитхаба. Гуглишь бесплатный хост для страничек от гитхаба - github pages(gh-pages). Иметь профиль на гитхабе вообще - признак хорошего тона, так что в любом случае пригодится.
>Могу ли учить верстку/JS после работы по 2 часа?
Можешь но это вряд ли будет эффективно. Указанное время в таком случае можешь смело умножать на 1,3+.
>Могу ли я спросить что-то в треде?
Конечно. Но перед этим следует проделать следующие действия.
1. Подумать.
2. Погуглить.
3. Попробовать решить задачу самостоятельно.
4. Еще раз подумать.
Если решения все равно нет - спрашиваешь.
Задачу описываем четко, код показываем только в песочнице тут не экстрасенсы сидят нам нужно пощупать код, иначе никто не поможет Аноны с кодом в постах, на скринах, в архивах, сразу идут нахуй. Вас предупредили.
Дополнительно можно приложить скрины где показано, что работает/что не работает/как хотелось бы/как планировалось/етц. Плюс текстовые пояснения конечно. Оформите вопрос правильно - практически гарантированно получите грамотную и своевременную помощь.
Дальнейшая информация для ньюфагов в пасте в конце ОП-поста. Там ВСЕ расписано, в том числе самый удачный по мнению автора алгоритм изучения основ верстки, есть тонна полезных ресурсов для разработчиков начального-среднего уровня и прочая годнота.
=====================
Cразу скажу, времена, когда можно было сверстать две фиксированных странички и завалиться в хардкорный фронт-енд давно прошли. Нет, работу конечно найти можно будет. Позиция называется Markup или HTML/CSS Developer называйте как хотите хотя даже там требуется знание адаптивности и прочих ништяков, но это только старт, и ЗП там вряд ли вас сильно порадует, если конечно сможете найти такую позицию. На данный момент фронтендеру нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.
Не помешает навык натяжки оболочки на движок. Можете даже в бэкенд завалиться, если интересно. Но продуктивно это совмещать со всем тем стаком технологий, что нужны для фронт-енда, получится не у каждого, особенно на старте. Впрочем, если есть желание - попробовать можно, оно того стоит. Только есть нюанс, материалов по бэкенду здесь в пасте представлено мало, если кто-то в будущем поделится – будем рады и включим в будущие редакции.
Работу находим в конторках и крупных фирмах. Конторки/студии - основное направление деятельности. Альтернативой конторкам может стать фриланс, тут уже все опять же индивидуально, но конкуренция там больше, в начале может быть сложно, скучно и относительно дешево. Помните о портфолио, оно просто необходимо, да и за время его создания руку набьете.
Дальше представлены первичные обучающие материалы в сильно сокращенном варианте, полные списки найдете в пасте.
http://dash.generalassemb.ly/
http://learnlayout.com/
http://htmlacademy.ru/ - ультрагоднота
http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган
http://www.codecademy.com/
http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git
http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.
http://teamtreehouse.com - тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.
Для работы понадобятся текстовые редакторы или среды разработки, тут уж решать вам.
Текстовые редакторы:
http://brackets.io/
http://www.sublimetext.com/3
https://atom.io/
ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:
Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.
http://denweb.ru/put-veb-mastera_sod
Верстка по БЭМ
http://habrahabr.ru/post/203440/
Лично я все же посоветую черпать инфу по базовой верстке из интенсивов, ссылки чуть ниже. Там ребята показывают весь процесс и делают это качественно. Никаких ошибок, минимум стилизации и отсебятины.
Гайд от анона по гитхабу:
http://randomfederation.github.io/
Шпаргалка от Громова по гиту
http://nicothin.pro/page/git
Теория продвинутых курсов HTMLacademy
https://yadi.sk/d/Ka-aU3poqa8bM
Базовый интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=899131
Тот же базовый но посвежее, за 2016 год:
http://nnmclub.to/forum/viewtopic.php?t=999246
https://yadi.sk/d/3AhpPwHaq5Bwp
Продвинутый интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=900609
Дополнительные материалы к интенсивам, рекомендуются к ознакомлению.
https://github.com/tsergeytovarov/htmlacademy-basic-additional-material
Базовый JS интенсив за 2015 год:
http://nnmclub.to/forum/viewtopic.php?t=974803
https://github.com/o0/keksobooking
Макеты для верстки, тоже от академии. Все из их рассылки, поэтому лучше бы тебе на нее подписаться. Ребята вываливают кучу годноты, хоть и относительно редко.
https://mega.nz/#!CtYGSCbB!3Y6fDxxL_N_LstGFPGjHrhXbIoNqk4BzmNjjEmk2jPc
======================
Все основная инфа и материалы здесь:
Обновленная паста, она же FAQ - http://pastebin.com/ytWW0UfU
Старая паста если кому вдруг понадобится - http://pastebin.com/tvvwC7uz
Прошлый тред