• Как проверить, что знаешь на базовом уровне JavaScript?

    @JSmitty
    Хотите задачку? Ловите.

    Сделать на JS светофор основной (3 цвета) и связанный пешеходный (2 цвета) с кнопкой по запросу пешеходного перехода:
    1) основной включен на зеленый, пешеходный на красный
    2) по нажатию на запрос, через не менее чем 5 секунд на 5 секунд показывается желтый на основном, затем основной - красный, пешеходный зеленый на 15 секунд. После пешеходный на красный, основной сразу на зеленый.
    3) минимальное время зеленого на основном - 60 секунд. Если кнопка запроса перехода нажата ранее 60 секунд с момента включения зеленого - пункт 2 срабатывает через 60 секунд с момента включения зеленого.
    4) после нажатия запроса и до включения зеленого на основном светофоре, кнопка запроса игнорируется.

    Часть задачи - сделать отображение светофоров, и кнопку. Кнопка всегда доступна к нажатию (не ставим атрибут disabled). Другая часть - реализовать асинхронную логику. По возможности на чистом JS (не прибегая к библиотекам).
    Ответ написан
  • Почему светлый блок не покрывает полностью экран?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Сделайте ему top: 0px и нет проблем.
    Когда стоит автоматический top, то блок остается на том месте, где он бы находился при position: static. А т.к. блок внутри блока body, у которого есть padding, то этот блок уже смещен вниз. Поэтому задавайте ему нужную позицию сами.
    Ответ написан
  • Верстка с нуля: какие основные этапы работы?

    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.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан
  • Opera 46 со встроенным VPN: как зайти на Рутрекер и Флибусту?

    Host-Eiweb
    @Host-Eiweb
    Хостинг VPS серверов в Европе и США
    Арендуйте VPS, поднимите OpenVPN сервер и работайте на здоровье.
    Закон таким образом Вы не нарушаете.
    Стоимость VPS под эти цели от $2.5 / mo. до $4/mo. (стоимость зависит от провайдера, качества услуги и локации).
    Если разделите сумму на 2х пользователей - стоимость будет копеечная.
    Ответ написан
  • Настройка окружения для front end?

    devellopah
    @devellopah
    установи yeoman командой npm install -g yo
    установи webapp-generator (сгенерирует дефолтный шаблон для будущего сайта) командой npm install -g webapp-generator
    установи gulp-cli и bower командой npm install -g gulp-cli bower

    и наконец командаyo webapp чтобы поднять каркас

    Вообщем всё это объясняется на самом сайте yeoman.io

    UPDATE: поскольку этот вопрос очень многих заинтересовал, я написал простой стартер для вёрстки с pug.
    вкратце: под капотом проект, который скаффолдит webapp-generator, только приспособленный для работы с pug, убрана папка тестов, добавлен gulp-uncss(чтобы отрезать неиспользумемые стили фреймворка) и почищен gulpfile.js
    Вобщем форкайте, лайкайте, пулл-реквестите(если хотите)
    Ответ написан
  • С какой книги стоит начать изучать html5 и css3?

    @Za0r
    pop()
    1)Идешь на htmlacademy.ru и проходишь все бесплатные курсы.
    2) На этом пункте,невольно задаешься вопросом,как тебе использовать эти знания. Смотришь как верстать простейший макет https://www.youtube.com/watch?v=vFjRVugE030 на float.
    3)Проходишь все платные курсы.
    4) Читаешь https://www.ozon.ru/context/detail/id/22435909/ эту книгу. Можешь найти на просторах в инете.
    5) Берешь самостоятельно простенький макет и верстаешь его на флексах и адаптивно( на этом пункте будешь знать что это.
    6) Читаешь https://www.ozon.ru/context/detail/id/137213400/ .
    7) На этом этапе ты знаешь что существуют предпроцессоры,и хочешь изучить,советую https://youtu.be/H4cG4tbc-xQ для знакомства.
    8) читаешь такое и присматриваешь что учить дальше:
    1) glivera-team.github.io/how-to/2016/05/02/how-to-st...
    2)https://coggle.it/diagram/52e97f8c5a143de239005d1b...
    3)https://github.com/zualex/devmap
    4)blog.flppv.me/all/frontend
    5)https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%...
    6)krekotun.ru/ui-developer-skills.html
    7)Как быстро подтянуть свой уровень веб-разработчика, чтобы соотвествовать требованиям работодателей?
    8)webmasters.teamdev.com/#html

    9) Дальше думаю сам разберешься,Удачи!
    Ответ написан
  • Как верстать адаптивно с нуля?

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

    0) https://www.memrise.com/login/?next=/home/ + https://www.memrise.com/course/332202/12527/
    www.bbc.co.uk/learningenglish
    https://www.ted.com/

    Изучайте английский. Язык международный. 90% информации на этом языке! Без него никак.
    Не сыграйте пару партий в HS/доту. Посмотрите на одну серию текущего сериала меньше, или лучше посмотрите его на английском с субтитрами! Всего 30 минут в день обеспечат вас безбедным будущим!

    1) klava.org/#eng_basic
    15 минут в день. Это все, что нужно для осваивания слепой печати.

    2) https://webref.ru/ref
    Учим все. Как учили стихи в школе. Да, будет больно, но потом это окупится сторицей.
    Совет: заведите тетрадку и переписывайте туда все теги/свойства. Не ставьте себе задание: "выучить все за месяц". Поставьте задание: "выучить три тега/три свойства за день". Так ваш мозг будет получать удовлетворение от процесса.

    3) https://flexbox.io/
    https://cssgrid.io/ Отличный курс по относительно новой технологии. При поддержке Mozilla
    Переходите к этим курсам только после выполнения второго пункта.
    Курсы на английском. Если не понимаете, вообще ничего страшного. Просто повторяйте за автором. Пройдите курсы до конца. По видео в день. Это не займет много времени.

    4) https://drive.google.com/open?id=1uD0VkRXS3wUlw3oP...
    Сверстайте любые три макета.
    - не использую flexbox/cssgrid
    - используя flexbox
    - используя cssgrid
    Сделайте их полностью adaptive/responsive.

    В общем-то все. Для вас после этого не составит никакого труда сверстать что-либо. НЕ НУЖНЫ никакие платные курсы для этого.

    Что касается дальнейшего развития, то это отдельная тема. Удачи, я в вас верю! =)

    Старый ответ
    spoiler
    @dyfran: мне потребовалось 4 месяца, чтобы изучить с нуля до уровня подходящего для устройства на работу. При этом я часов по 12 занимался каждый день, может было в сумме выходных 5 за это время. Изучил html, css, sass, js, gulp, bower, git. Начинал тоже с html academy, но там его полностью прошел 2 раза. Вот курсы, которые я прошел за эти 4 месяца:

    1) Html academy
    2) https://www.coursera.org/learn/html-css-javascript...
    3) https://www.coursera.org/learn/html-css-javascript
    4) https://www.coursera.org/learn/website-coding
    5) https://learn.javascript.ru/
    6) После прохождения первых пяти, копайте в сторону stylus/sass, bourbon, webpack/gulp, git.

    Чтобы отдыхать от курсов, подпишитесь на рассылку от htmlacademy и верстайте макеты, которые они будут присылать.

    Несколько musthave ссылок
    1) https://developer.mozilla.org/en-US/docs/Learn/Jav...
    2) https://webref.ru/ref
    3) caniuse.com
    4) stackoverflow.com
    5) https://codepen.io/
    6) https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr... канал с полезной информацией

    Сделайте упор на эти вещи и не распыляйтесь ни на что другое.

    Удачи.
    Ответ написан
  • Photoshop.Как изучать?

    EvgenijDv
    @EvgenijDv
    C/C++ programmer
    Судя по тому, что вы не знаете с чего начать, вы не знаете зачем оно вам надо, а если вы не знаете зачем оно вам надо, то скорее всего оно вам не надо ;-)
    Ответ написан
  • Каков план личностного развития PHP программиста с нуля?

    somenumboola
    @somenumboola
    Team Lead in B-online Solutions
    Буду исходить из "дано" задачи "PHP программист" и из того что автор вопроса стремится заниматься сугубо back-end программированием. Заранее прошу прощения, я несколько увлекся
    Итак:
    1. Установка сервера (Open Server, Xampp, Denver), на начальном уровне. (просто из exe)
    2. Общие принципы.
    2.1. Типы данных.
    2.2. Переменные.
    2.2.1. Работа с переменными по ссылке.
    2.2.2. Методы объявления и уничтожения переменных.
    2.3. Управляющие конструкции (если знаком, то особенности синтаксиса в рамках языка).
    2.3.1. Условия.
    2.3.2. Циклы.
    2.4. Конструкции вывода(print, print_r, echo).
    2.5. Конструкции отладки и управления выполнением(var_dump,die,exit,break в циклах, пустой return;).
    2.6. Пред определенные глобальные переменные($_GET,$_POST,$_REQUEST,$_SERVER), константы зарезервированные под модификаторы (static, function, const, $this)
    2.7. Особенности версий 5.3, 5.4.
    2.7.1. Анонимные функции.
    2.7.2. Замыкания.
    2.7.3. Особенности объявления массивов.
    2.7.4. Пространства имен.
    3. HTTP протокол.
    3.1. Заголовки входящие.
    3.2. Заголовки исходящие.
    3.3. Процесс общения.
    3.4. Метод php “header(…)” в контексте темы.
    3.5. Глобальная переменная $_SERVER[] в контексте темы.
    4. Установка сервера на среднем уровне (основы файла .htaccess и RewriteRule)
    5. Процедурное программирование.
    5.1. Математические методы.
    5.2. Оперирование типами.
    5.2.1. Методы оперирования массивами (array_values,array_keys,array_map и т.д.)
    5.2.2. Методы оперирования строками (strlen,substr и т.д.).
    6. ООП.
    6.1. Классы.
    6.1.1. Инкапсуляция(public,protected,private). Понимать разницу.
    6.1.2. Наследование.
    6.2. Интерфейсы.
    6.2.1. Имплементация интерфейсов.
    6.3. Абстрактные классы.
    6.4. Полиморфизм.
    6.5. Магические методы.
    6.5.1. Базовые (__construct,__get,__set,__destruct)
    6.5.2. Расширенные (__invoke,__serialize,__isset)
    6.5.3. Разобраться когда стоит применять магические методы а когда это плохая практика.
    7. Библиотека SPL, и расширение поведенческих возможностей классов за ее счет.
    8. Базы данных.
    8.1. SQL
    8.2. Примитивный уровень общения с БД. (mysql_connect,mysql_close,mysql_query).
    8.3. Средний уровень общения с БД(PDO и другие кастомные библиотеки).
    8.4. Высокий уровень (ActiveRecord,DataAccessObject,ObjectRelationMapping).
    8.5. NoSql БД на примере MongoBD (настоятельно рекомендуется, но не обязательно).
    9. Фреймворки. На мой вигляд можно начать с Kohana. Сужу по уровню вхождения стажеров которых видел и отсутствию пространств имен с которыми по первах могут возникать проблемы.

    И главное, Внимание! Личностные качества.
    - Усидчивость.
    - Владение Google при оттачивании темы или сложной задаче на уровне, когда поисковик видит в пользователе не то что DDOS а полноценный физический краш. тест.
    - Не брезгливость. Умение заставить себя разбираться в гов… хм. Нелицеприятных дебрях.
    - Збагойствие. Отсутствие паники при различных ошибках и не состыковках. Всегда остыть и попробовать снова, но по другому.
    Ответ написан