• Какие курсы JavaScript выбрать?

    approximate_solution
    @approximate_solution
    JS Developer
    Посоветуйте пожалуйста подходящие и хорошие курсы.

    Советую книги, что-то типо Javascript на примерах и в действии, Разработка интерфейсов на react\angular\vue(любое на выбор), чем быстрее вы перейдете от примеров - перебор массивов - до копания реального дерьма в вебе, тем лучше.


    И стоит ли их брать или можно справиться самому?

    Можно справиться самому, если есть хороший навык чтения технической литературы.
    Пример как нужно читать технические книги тут(начало на 5:00) - https://www.youtube.com/watch?v=nUPVkY2BzC0&t=524s

    Просто почти все уроки на YT по JS очень старые, а на сколько я знаю язык быстро развивается.

    Не настолько быстро что бы из языка ушел базовый синтаксис, и его типовые конструкции. Плюс работа программиста это не только писать код на всяких модных штуках, но и копаться в legacy коде. Поэтому нужно знать как выглядит обычная функция, и как стрелочная. Чтобы на собеседовании не делать бараньи глаза и не говорить, я всегда писал const func = () => {}, а эту конструкцию вижу в первый раз.

    P.s так же буду рад, если кто даст ссылку на свежие уроки на YT по современному JS

    Заходите в гугл, пишите там "Курсы фронтенд разработчика", заходите на любой сайт инфоцыган, ищите программу курса, вырываете её из контекста, вбиваете каждую позицию программы в ютуб, гугл, toster, stack и тд. И так от 0% до трудоустройства.
    Ответ написан
  • Не умею верстать PSD макеты?

    sniggering_deus
    @sniggering_deus Куратор тега CSS
    I will live forever in the flame of your eyes.
    Наверное мир не сильно изменился с тех пор как был задан этот вопрос. А так в верстке нет ничего сложного.

    1. Просмотрите несколько видео на тему как верстать сайты по PSD макетам.
    2. Почитайте статьи на данную тему. В сети их огромное множество.
    3. Повышайте свои знания HTML / CSS.
    4. Вам не всегда будут попадаться макеты в PSD. Иногда будут макеты из Figma, Sketch и так далее, или вообще что-то в текстовом формате, и вам придётся вручную воссоздавать картину, чтобы понять что вам нужно сверстать.
    5. Если ваши знания HTML и CSS будут высоки, наверняка вы не будете задаваться вопросом: "Как сверстать макет по PSD макету?"

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

    И вот ещё несколько полезных советов на будущее в целом:

    ■ Изучите популярные методологии. Например БЭМ и/или другие методологии. Разумеется нет единой, которую можно было бы считать панацеей. Но изучив несколько совершенно разных подходов, можно даже например научиться комбинировать разные методологии как пазл и собирать что-то абсолютно новое.
    ■ Научитесь отказываться от громоздкой каскадности CSS.
    ■ Научитесь использовать как можно меньше вложенности тегов. Конечно не всегда получается обходиться без лишних обёрток и так далее, но если такая возможность имеется, тогда лучше пользоваться шансом.
    ■ Повышайте опыт в основном стэке: CSS | HTML | JavaScript.
    ■ Освойте адаптивную верстку.
    ■ Изучите Препроцессоры CSS. Например Sass или Scss или Less и другие, но у каждого есть свои плюсы и минусы.
    ■ Либо изучайте CSS - переменные, которые упрощают работу и не требуют долгих изучений.
    ■ Не используйте #ID для стилизации элементов в CSS, для этого существуют Классы.
    ■ Попробуйте - компонентный подход. Когда каждый элемент представляет из себя компонент - управлять становится проще. Верстка превращается в сборку разных элементов, что-то в стиле игры в конструктор LEGO.
    ■ Почитайте про метод - DRY.
    ■ Разбивайте стили внутри файла .css с помощью - комментариев.
    ■ Откажитесь от инлайн стилей. Поддерживать проект в будущем будет достаточно сложно, если верстка будет напичкана инлайн стилями, которые, возможно, однажды, придётся чистить.
    ■ Не используйте - !important. Это правило нужно использовать в самых крайних случаях, когда всё слишком плохо.
    ■ Называйте адекватными именами элементы.
    ■ Используйте Google, ибо с помощью него можно найти ответы на многие вопросы.
    ■ Верстайте для опыта сложные макеты, а не лёгкие и серые.
    ■ Изучите такие инструменты как Figma, Sketch, Photoshop.
    ■ Познакомтесь с SVG | Clip Path. Это классные технологии и они особенно полезны когда нужно сделать что-то сложное, красивое, и вообще это хорошие явления, у которых множество плюсов.
    ■ Используйте в верстке Flexbox и/или CSS Grid. Однако если вам нужна поддержка IE, а вы используете CSS Grid, можно воспользоваться таким свойством как @supports. На эту тему также достаточно статей в сети.

    Для начала было бы хорошо изучить CSS / HTML на хорошем уровне. Изучите основные свойства, возможности, решения тех или иных задач. Затем идёте на dribbble или behance, скачиваете интересные дизайны, начинаете верстать. Желательно брать сложные макеты, так как благодаря тяжёлым решениям и повышается опыт.

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

    И даже если вы наберётесь много опыта и однажды почувствуете что уже всему научились, не останавливайтесь Учиться новому вам придётся всегда ибо в веб-разработке нет такой грани, достигнув которой можно спокойно заниматься делами. Время будет лететь и что-тобудет забываться. Записывайте ключевые моменты, создавайте личную документацию.

    Посмотрите как менялась история CSS/HTML и сколько всего произошло со дня их создания. А что насчёт Javascript. Беритесь за него, когда уже почувствуете твёрдую почву под ногами. Не торопитесь. Спокойно и адекватно начните с основ, закрепляйте знания, также создавайте конспекты, документацию. Изобретайте велосипеды. Всё это будет вам полезно.
    Ответ написан
  • Есть еще варианты заменить if в map?

    0xD34F
    @0xD34F Куратор тега JavaScript
    return character === '...' ? '...' : character;

    Или, если замен предполагается несколько, сделайте объект, где будет указано, кого на кого надо поменять:

    const replacements = {
      '...': '...',
      '...': '...',
      ...
    };
    
    const newCharacters = characters.map(n => replacements[n] || n);
    Ответ написан
  • Как сверстать такую штуку?

    Seasle
    @Seasle
    Помог - отметь решением \( ゚ヮ゚)/
    Как-то так
    Ответ написан
  • Как практиковаться в веб разработке?

    baitarakhov
    @baitarakhov
    Software Developer
    Учеба учебой, но скоро наступит момент, когда ты захочешь активно использовать свои новые навыки на практике, и что немаловажно - начать зарабатывать на этом. Для получения первого интересного проекта за деньги, тебе потребуется как минимум эстетически красиво оформленное портфолио.

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

    Ссылки:
    Почему дизайн-системы терпят неудачу и как застави...
    Cоздание дизайн-систем с помощью Atomic Design
    Создание дизайн системы (пошаговое руководство)
    Каталог отечественных компонентных дизайн-систем, ...
    Ответ написан
  • Как правильно отцентрировать шапку на flexbox?

    sharomet
    @sharomet
    Front-End
    Уберите у section - width: 100%
    В дальнейшем с таким подходом у вас будут проблемы.
    В хедере у вас содержимое разбито на 3 колонки
    Кнопка для отображения меню | name | call
    Сейчас первая и последняя колонки почти одинаковые. но что если в колонке call будут еще ссылки - а они будут? Ваш name сдвинется влево.
    Если хотите что бы name всегда был по центру вам нужно либо его позиционировать (position: absolute), либо задавать одинаковую ширину двум другим колонкам.
    5e81f75edc0b7418413209.png
    Ответ написан
  • Каким путем выучить современную верстку с 0?

    Garfields
    @Garfields
    Советую обратить внимание на курсы, которые я указал ниже.
    Обучение
    • Джош Кауфман «Первые 20 часов. Как научиться чему угодно... быстро»
    ru.learnlayout.com
    htmlacademy.ru/program
    w3schools.com
    flexbox.ninja
    Карта развития веб-разработчика

    Видеокурсы HTMLAcademy
    • htmlacademy «Базовый HTML и CSS»
    coursehunters.net/course/bazovyy-html-i-css-18-2017
    • htmlacademy «Продвинутый HTML и CSS»
    coursehunters.net/course/prodvinutyy-html-i-css-po...
    • htmlacademy «Профессиональный HTML и CSS Уровень 1»
    coursehunters.net/course/professionalnyy-html-i-cs...
    • htmlacademy «Профессиональный HTML и CSS Уровень 2»
    coursehunters.net/course/professionalnyy-html-i-cs...

    Справочники
    htmlbook.ru
    webref.ru
    developer.mozilla.org/ru/

    Выполнение заданий
    flukeout.github.io (изучение селекторов в CSS)
    flexboxfroggy.com/#ru (изучение flexbox в CSS)
    flexboxdefense.com (изучение flexbox в CSS)
    dmitrylavrik.ru/training/process/flexbox-grid (создание сетки на flexbox)
    cssgridgarden.com/#ru (изучение gridbox в CSS)

    Задачи для практики:
    htmlbook.ru/practical

    Макеты для практики:
    drive.google.com/drive/u/0/folders/0B8LYygUI_oGeSG...
    freebiesbug.com/psd-freebies/website-template/
    symu.co/freebies/templates-4/
    dcrazed.net/free-photoshop-psd-website-templates/
    Ответ написан
  • Какие книги посоветуете начинающему web-дизайнеру?

    mixail_fet
    @mixail_fet Куратор тега Дизайн
    Дизайнер веб-интерфейсов
    Добрый день!
    Нет, образование не нужно, тем более Вам никто не даст настоящего образование веб-дизайнера. В этом случае, я бы предпочел саморазвитие.

    Что конкретно нужно делать:
    30% теории, мой список книг:

    Якоб Нильсон «Веб Дизайн»
    Стив Круг «Не заставляйте меня думать»
    Майк Монтейро «Дизайн — это работа»
    Дональд Норман «Дизайн привычных вещей»
    Виктор Папанек «Дизайн для реального мира»
    Генрих Альтшуллер «Найти идею»
    37Signals «Getting Real»
    Джеф Раскин - Новые направления в проектировании компьютерных систем
    Джеф Раскин - Об интерфейсе
    Брюс Тогнаццини «Главные принципы интерактивного дизайна»
    Ян Чихольд «Новая типографика»
    Эмиль Рудер «Типографика»
    Нора Галь «Слово живое и мертвое»
    Саша Карепина «Искусство делового письма»
    Мюллер-Брокман «Модульные сетки в графическом дизайне»

    60% практики:
    Рисуйте все что попадется под руку, перерисовывайте шаблоны - это очень помогает, делайте личные проекты, которые только пришли Вам в голову, в конце-концов, берите заказы.

    10% вдохновения:
    Каждый день, перед началом любых работ, заглядывайте на:
    Behance.net
    dribbble.com
    themeforest.com
    Ответ написан
  • Верстка с нуля: какие основные этапы работы?

    Vlad_IT
    @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

    0) Запускаю Spotify :-)

    1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

    2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

    3) Запускаю VS Code, открываю нужную папку.

    4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

    5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

    6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

    7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
    Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

    8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

    9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

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

    11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

    11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

    12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

    Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан