• С чего начать создание игры на android/iOS?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    C#, Unity, и оба - по оф.документации, и никаких видео кроме тех, что будет в оф.документации!
    Ответ написан
  • Макеты для тренировки навыков анимирования (CSS, JS, GSAP)?

    alexyarik
    @alexyarik
    Битрикс разработчик
    Вот на мой взгляд интересные задачки:
    вертикальная прокрутка и смена авто
    porschevolution.com/#2000s
    горизонтальная смена экранов
    hotdot.pro/#bilet2u
    Интересный Parallax на первом скрине
    www.firewatchgame.com
    несколько разных эффектов
    https://kirillpritula.com/en/
    прокрутка с разными эффектами появления
    lavash26.ru
    первый экран прикольно меню сделано
    https://rizon.pro/
    примеры
    https://threejs.org/examples/
    вращение товара, уменьшение и приближение
    www.manufaktur-sehen.de/brillenkonfigurator
    много всего
    https://codepen.io/search/pens?q=animation
    Ответ написан
    Комментировать
  • Какие полезные ресурсы используете в работе?

    sfi0zy
    @sfi0zy Куратор тега Вёрстка
    Creative frontend developer
    Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
    MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
    Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
    WAVE и regex101, чтобы проверять себя.
    В Browserhacks иногда полезно заглянуть.
    FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
    Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
    Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
    Google - если затупил.
    Noisli - для фонового шума.
    Cross Browser Testing, чтобы тестировать результат.
    Ответ написан
    5 комментариев
  • Где взять макеты для верстки?

    paradokso
    @paradokso
    Начинающий фронт-эндер
    ищите в гугле по запросам
    free psd templates for website
    freebie psd for website
    free psd for html

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

    Нужно читать документацию на английском сколько бы времени это не занимало. Вот этот плагин показывает по клику на слове статью из толкового словаря grammarly.com
    Ответ написан
    2 комментария
  • Как проверить, что знаешь на базовом уровне JavaScript?

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

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

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

    arsenty
    @arsenty
    Full Stack Designer
    Без JS и с описанной адаптивностью: https://codepen.io/arsenty/pen/mYxXoQ
    Ответ написан
    1 комментарий
  • Как Вы управляете проектами с удаленными заказчиками?

    @grinat
    И итоге делал так, заказчик присылает тз, его обстоятельно обсуждаем во всех подробностях, назначаем сроки/стоимость, я делаю, показываю результат, он присылает замечания/всплывшие косяки, я исправляю если оно в рамках тз. Обсуждение по email исключительно. Никаких суси-пуси, часовых скайпов ни о чем и т.п., ему нужен продукт, тебе деньги, если он хочет общения, пускай идет к жене/любовнице, если его что-то беспокоит, то может идти куда подальше. Если будешь каждому опу подтирать, то быстро сгоришь играя одновременно в программиста/аналитика/менеджера, так что выбирай что-то одно. Плюс имей в виду, что база нарабатывается и там потом одни и теже люди будут к тебе обращаться, поэтому если ты им сопли постоянно подтирал, то придется и дальше этим заниматься, а если общение четко и только по делу, то и далее оно будет таким. Если будут какие-то споры, а заказчики разные, и они 100% будут, то беседу по скайпу в качестве доказательств своей правоты не приложишь. Трело тогда не было, шел просто по тз, и зачеркивал выполненные пункты.
    Ответ написан
    Комментировать
  • Где научиться алгоритмам?

    @zzzevaka
    Кнут - это, конечно, замечательно, но явно не "понятнее".

    Все зависит от того, какой уровень вам нужен.

    Я бы рекомендовал начать с этого
    aliev.me/runestone
    Ответ написан
    Комментировать
  • Как лучше писать стили CSS Modules или Styled Components?

    @grinat
    То и то отвратительно, благодаря обычному css реально можно просто и быстро стилизовать страницы. А это все калька с десктопных приложений, а их стилизация всегда была кошмаром, попытка добавить какое-нить скругление превращалось в борьбу с кучей xml'ек. Теперь же когда десктоп почти умер, поскольку все массово переходят в вэб, народ пытается перетащить худшие вещи оттуда.
    Ответ написан
    7 комментариев
  • Где установить обработчик событий?

    rockon404
    @rockon404
    Frontend Developer
    Если вы хотите описать компонент, используемый в единственном экземпляре, то лучше использовать объект, а не класс. Обработчик событий может быть как в Menu, так и внешний:

    const Menu = {
      el: document.getElementById('js-main-menu'),
      btn: document.getElementById('js-main-menu__btn'),
    
      init() {
        this.toggle = this.toggle.bind(this);
        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
    
        this.btn.addEventListener('click', this.toggle);
      },
    
      toggle() {
        this.el.style.display = 
         !this.el.style.display || this.el.style.display === 'block' ? 'none' : 'block';
      },
    
      open() {
        this.el.style.display = 'block';
      },
    
      close() {
       this.el.style.display = 'none';
      }
    }
    
    export default Menu;


    import Menu from './Menu';
    
    const closeButton = document.getElementById('js-close-button');
    const openButton = document.getElementById('js-open-button');
    
    Menu.init();
    closeButton.addEventListener('click', Menu.close);
    openButton.addEventListener('click', Menu.open);


    Демо: https://jsfiddle.net/ey53xuyp/

    В случае с классом вешайте хандлеры в constructor:
    class Menu {
      constructor({ el, btn }) {
         this.el = document.getElementById(el);
         this.el = document.getElementById(btn);
    
         this.toggle = this.toggle.bind(this);
         this.close = this.close.bind(this);
         this.open = this.open.bind(this);
         
         this.btn.addEventListener('click', this.toggle);
      }  
      ...
    }
    
    export default Menu;


    import Menu from './Menu';
    
    const closeButton = document.getElementById('js-close-button');
    const openButton = document.getElementById('js-open-button');
    const menu = new Menu({
      el: 'js-main-menu',
      btn: 'js-main-menu__btn',
    });
    
    closeButton.addEventListener('click', menu.close);
    openButton.addEventListener('click', menu.open);


    Если же вы хотите использовать компонентную архитектуру, с наследованием от базового класса компонента, вам лучше использовать React или Vue. Иначе рискуете написать трудно поддерживаемых, плохо масштабируемых велосипедов.
    Ответ написан
    5 комментариев
  • Как вы делаете проверку типа аргументов функции?

    DIITHiTech
    @DIITHiTech
    Fullstack javascript developer
    Увы, для runtime аргументы проверяю самописным кодом с давних времен 2011-2012 года, тогда решения готового не нашел. Забавно, сейчас кстати занят глубоким рефакторингом этой части, с целью оформления в ES6 модуль и на гит хаб.
    Для проверки аргументов, в начале тела проверяемой функции вызываю функцию проверки типов и количества обязательных аргументов, которая может бросить исключение по шаблону с указанием имени внешней функции, которое вытягивается со стека. Все типы - битовая маска, ну и по этому очень хорошо сжимается минификатором.
    В коде это выглядит примерно так:
    function on(event, handler, silent= false) {// some func
            /* @ifdef DEBUG */
            checkArgs(arguments, [TYPE_STRING | TYPE_ARRAY, TYPE_FUNCTION, TYPE_BOOLEAN], 2);
            /* @endif */                 
            //Function implementation
        }

    Обычно вызовы обрамляю директивой, дабы при желании для production версии Gulp+preproccess можно было собрать версию без runtime проверки аргументов.
    on() //TypeError: Function [on] is expecting at least 2 arguments, but 0 were given
    on(1,2,3) //TypeError: Function [on] is expecting STRING, ARRAY as 1th argument, but NUMBER, INTEGER given
    Так что никто не мешает тоже написать подобное, ну либо ждать меня :)
    Ответ написан
    2 комментария
  • Как настроить сборку front-end?

    @sgrogov
    Посмотрите шаблон для быстрого старта от csssr https://github.com/CSSSR/csssr-project-template. Все задачи написаны на es2015 синтаксисе, используется кеширование для ускорения сборки, таски разбиты на отдельные файлы, статичные данные вынесены в json, готов к использованию svg, есть retina-спрайты, вовсю используется БЭМ. Много плюшек, разве что на windows могут быть проблемы с установкой зависимостей (впрочем это проблема не самого шаблона, а некоторых модулей в npm).
    Ответ написан
    Комментировать
  • Почему NPM не ставит глобально?

    MAKAPOH
    @MAKAPOH
    многостаночник
    У меня под win 7 каталог с глобальными модулями:
    C:\Users\<user_name>\AppData\Roaming\npm
    Его нужно добавить в переменную PATH.
    Под win 8.1 скорее всего путь тот же.
    Ответ написан
    1 комментарий
  • Как вы начинаете вёрстку сайта?

    darkrain
    @darkrain
    У меня есть уже своя html+css заготовка.

    1) Копирую заготовку в новый проект
    2) Долго и нудно пишу html, ненавижу когда много мелких элементов на макете
    3) Режу картинки, спрайты
    4) пишу css, попутно иногда правлю html

    Но у меня уже опыта много, лет 9 уже как. Поэтому я заранее знаю что где и как будет, не гадаю, этот опыт позволяет мне не писать css вместе с html. Получается очень быстро. И я использую всякие бутстрапы только по требованию. Считаю излишними во многих случаях.
    Ответ написан
    1 комментарий
  • Реализация структуры страниц сайта(обьясните noob'у)?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    0. Есть такая штука, как роутер. (URI-роутер, это не тот "краб" с проводами и лампочками в пыли). Это точка входа всех пользовательских запросов (скрипт на стороне сервера, например, на php)
    1. Вначале - роутер принимает запрос URI (аналог "стрелки" на ж/д путях)
    2. потом - он переводит на нужную ветку подготовки данных для будущей страницы, где скрипты согласно URI работают с информацией (преобразования, работа с базой и т.д.)
    Там данные передаются модулям для обработки и их подготовки.
    3. Затем, для подготовленных данных вызывается нужный шаблон, который состоит из нескольких модульных частей (например, как Ваше topMenu.html, только на php).
    4. Данные вставляются в шаблон: каждые данные - в нужное место (по-модулям: блокам на странице)
    5. После того, как весь "конструктор" собран - страница отдается пользователю по 80-му порту протокола TCP для отображения на экране.

    В вкратце, как-то так...
    Иллюстрация
    Ответ написан
    2 комментария