• Где найти интерактивное изучение js?

    evgeniy8705
    @evgeniy8705
    Повелитель вселенной
    nnmclub.to/forum/viewtopic.php?t=973073&start=45
    Единственный курс, в котором подробно изучается сам стандарт ES.
    Очень много практических заданий.
    Тем более обучение основано на изучении по учебнику Ильи Кантора.
    Тем более преподаватель бывший сотрудник Яндекса, нынешний сотрудник Lusoft
    Обучение длится 48 часов. Это только видеолекции, не считая времени на практику.
    По ES в курсе достаточно большое количество задач после каждой лекции, по JS также много задач из учебникак Ильи Картора, плюс выполняются такие работы как Слайдер, ToDo list, RSS ридер, корзина интернет магазина с local storage, а также выпускные проекты, сайт и игра.

    Этого курса + книги на learn.javascript.ru будет достаточно чтобы получить очень хорошую базу, конечно если выполнять все задания.
    Ответ написан
    1 комментарий
  • UI/UX developer?

    gr1mm3r
    @gr1mm3r
    50% ответа в правильном вопросе. Остальное мануал.
    ux-vs-ui-dev-skills-expanded.png
    Думаю самое наглядное объсянение
    Ответ написан
    6 комментариев
  • Как можно быстро начать зарабатывать на oDesk?

    opium
    @opium
    Просто люблю качественно работать
    Используйте лансермонитор для мониторинга новой работы
    pumainthailand.com/eshhyo-odin-horoshij-servis-dly...
    Ставьте биды первым и прочитайте вопросы и ответы про одеск
    pumainthailand.com/otvechayu-na-voprosy-o-rabote-n...
    Ну и напоследок всегда можно послушать мое интервью про фриланс и одеск
    pumainthailand.com/diskussiya-o-frilanse-i-odeske-...

    Вхожу в топ5% фрилансеров на одеске
    Ответ написан
    Комментировать
  • Какие есть обучающие ресурсы по фронтенд разработке?

    edward04
    @edward04
    Начинающий ninja frontend
    https://www.youtube.com/channel/UC7enHM_oJRYJOnyJr...
    https://www.youtube.com/channel/UCZeU17nbVfzczAkJV...
    https://www.youtube.com/channel/UCHHw70vvbfyM6xJQo...
    https://www.youtube.com/channel/UCIIt69f5D44s2cdb9...
    tohtml.it/post/74511047203/markup-process

    По нему скучаю искренне и иногда сижу на подоконнику с лате и смотрю на капли дождя, стекающие по стеклу:
    https://www.youtube.com/channel/UCdnFX7mzgup9moXG2...
    Это для общего развития:

    https://stepic.org/course/%D0%90%D0%BD%D0%B0%D0%BB...

    Похожий вопрос:
    Какие задачи нужно уметь выполнять на JS начинающему?

    Ваша библия:
    https://developer.mozilla.org
    Можно докинуть еще:
    webref.ru
    htmlbook.ru
    Просто случайная ссыль
    https://docs.google.com/document/d/1kehaJKKRo7zxYp...
    Еще одна:
    https://github.com/ihorzenich/html5checklist
    Еще какая то штука
    https://github.com/dypsilon/frontend-dev-bookmarks
    Лучшие практики тостеровцев
    Как вы начинаете вёрстку сайта?
    Инструменты
    fredsarmento.me/frontend-tools

    После пары часов выпускания пара из ушей, включить на всю громкость и хоть как то отвлечься от этой жизни
    https://www.youtube.com/channel/UCY0C6A3t3RTUN3BB6...

    На freecodecamp.com неплохо алгоритмы можно потренить

    Ну и конечно
    learn.javascript.ru

    PS
    еще это
    Какие ресурсы с новостями по web-разработки вы знаете?

    PSPS
    Не отвечаю за качество контента под ссылками, может кое что уже outdated.

    https://vk.com/video79753760_171233585

    Удачи, брат
    Ответ написан
    4 комментария
  • Что лучше canvas или svg?

    @Sashjkeee Куратор тега CSS
    f-e
    Плюсы Canvas:
    • Высокая производительность при отрисовке любых 2D объектов.
    • Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения.
    • Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т.п.), редактирования изображений и операций, требующих манипулирования на уровне пикселей.
    Плюсы SVG:
    • Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана.
    • SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью JavaScript.
    • Можно получить полный контроль над каждым элементом, используя SVG DOM API в JavaScript.
    • SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений.
    Минусы Canvas
    • Отрисовка основана на пикселях.
    • Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы.
    • Слабые возможности по рендерингу текста.
    • Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2D и 3D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью JavaScript. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas.
    • HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе.
    Минусы svg
    • Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM
    • Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG.
    Вывод
    HTML 5 Canvas следует использовать для:
    1. Редактирования изображений: обрезки, изменения размеров, фильтров (удаления эффекта красных глаз, создания эффекта сепии, изменения цветности или яркости)
    2. Создания растровой графики: визуализации данных, создания фракталов и графиков функций.
    3. Анализа изображений: создания гистограмм и т.п.
    4. Создания игровой графики, такой как спрайты и фоны.
    SVG следует использовать для:
    1. Создания пользовательских интерфейсов веб-приложений, независимых от разрешения экрана.
    2. Высокоинтерактивных анимированных пользовательских интерфейсов.
    3. Графиков и диаграмм.
    4. Редактирования векторных изображений.
    честно скопипастил
    Ответ написан
    Комментировать
  • Какая почасовая ставка у Front-end разработчика?

    vicodin
    @vicodin
    Имею некоторый опыт
    15-25$/hr junior
    25-40$/hr middle
    40-100$/hr senior
    100+$/hr god

    Ну это по моим наблюдениям, есть боле источники с большей выборкой, например этот по США(в эру фриланса можно не привязываться к конкретной стране) https://www.hellobonsai.com/rates/
    Ответ написан
    22 комментария
  • Современные инструменты front-end?

    zorro76
    @zorro76
    Sass/Less
    Gulp/Webpack
    Git
    Bower
    Github
    ну и конечно же интернет, уметь им пользоваться

    А вообще читай здесь, это Букварь так сказать: вот
    Ответ написан
    4 комментария
  • Как выучить js творческому человеку?

    wielski
    @wielski
    ✔ Совет: Вам помогли? Отметьте ответы решением.
    Читайте книжки.
    Практически любой язык программирования никак не связан с математикой. Вам не обязательно иметь степень магистра, чтобы его понимать. Главное развить в себе логику, и понимание того, как все работает.

    • Возьмите любую книжку по душе, в течении первых 2-3 глав поймете что такое переменные, функции, объекты.
    • Попробуйте на практике минимальные конструкции, чтобы понять принцип их работы.
    • Не бойтесь экспериментов - ничего не испортите.
    • Не отчаивайтесь в случае ошибок - лучше погуглилить и исправить самому, чем бежать на тостер. Будьте уверены - такие же тривиальные проблемы до вас случались как минимум у сотни человек.


    Удачи.
    По вашему вопросу с примерами кода помочь не смогу, опять таки из-за того, что вы не совсем понимаете что происходит внутри браузера. Книжки это лучше разжуют.
    Ответ написан
    3 комментария
  • Лестница изучения фронтендера?

    html - css - js - Практика на этих языках - сборщики проектов - изучение фреймворков, препроцессоров и другого сахара.

    Под фреймворками подразумеваю всякие бутстрапы и т.п.
    Вообще идеальный вариант, это начинать с основ, а когда появится уверенность в своих силах и ощущение, что чего-то не хватает, то уже двигаться выше.
    Без понимания основ - того как тотже бутстрап заставляет елемент выглядеть \ вести себя именно так как он это делает - использовать его бесполезно - замучаетесь отлавливать баги.
    Ответ написан
    Комментировать
  • Лучший ресурс/книга/видеоуроки для изучения AngularJS?

    @bromzh
    Drugs-driven development
    Читаешь и запоминаешь это
    Гуглишь про каждый пункт отсюда
    Попутно пишешь как можно больше приложений.
    Если думаешь, что начать писать можно только после кучи теории - так и останешься в теоретиках.
    Ответ написан
    Комментировать
  • Лучший ресурс/книга/видеоуроки для изучения AngularJS?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    Дополню ответ bromzh

    лучший способ изучения


    Ограничивать себя и практиковаться.

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

    Или там "никогда не используйте фильтры для работы с коллекциями, пусть результат фильтра всегда будет строкой". Это сразу сильно ограничит вас в том как убить свое приложение и превратить шаблоны в кашу, а так же чуть почистит мозги.

    Или... "Не полагаться на двустороннее связывание". То есть... оно увы в angular 1.x везде, но нужно понимать риски с этим связанные и стараться делать все так, что бы элементы нижнего уровня ничего не меняли на верхнем уровне, а все изменения проходили либо через колбэки или сервисы. Исключения - формы, тут двусторонний биндинг бывает очень полезным.

    Так же "Никогда не использовать ng-controller", или "Делать все на stateless компонентах" и все такое.

    Для всех этих правил есть свои исключения, но нужно 10 раз подумать можно ли соблюсти правило прежде чем его нарушить.

    Я так же собрал парочку толковых ссылок которые могут быть полезны новичку. Там так же пример ооочень простого приложения с тестами.

    Так же рекомендую сразу же изучить хотя бы основные плюшки ES6 с babel и использовать их. Таким образом можно сильно упростить структуру приложения.

    А ну и да, ТЕСТЫ! Пробуйте писать приложения используя TDD, это очень полезно для новичков и так же действует как ограничение. Типа "если неудобно писать тесты - подумай как сделать так что бы было удобно писать тесты изменяя тестируемый код". Ну и все такое. У TDD есть свои правила вроде "не меняйте тесты и код одновременно" и т.д.

    Новички должны быть в ежевых рукавицах.
    Ответ написан
    Комментировать
  • Какой стек технологий и инструментов сейчас востребован?

    @dixoNich
    frontend developer
    стандартный набор: webpack (gulp) + babel (for es6) + stylus (less/sass)
    ну а дальше уже зависит от конкретной вакансии в конкретной работе
    если вы хорошо знаете es5, то вряд ли вас не возьмут в компанию с формулировкой "не умеет писать классы es6!!!"
    если вы сейчас, конечно, не используете даже системы сборки, то отстали вы прилично :) я уж не помню, как без них то жили...
    Ответ написан
    5 комментариев
  • Что верстальщики хотели бы донести до веб-дизайнеров?

    serjikz
    @serjikz
    web-developer
    Прошел через все стадии создания web-проектов начиная с копирайтинга, заканчивая back-end и настройку серверов. В итоге остановился на front-end + чуть-чуть дизайн (но это не значит, что плохо знаю фотошоп))).

    Что мне было делать лень, как дизайнеру:
    1. Прикладывать файлы со шрифтами
    2. Архивировать работу
    3. Писать комментарии к дизайну
    4. Присылать исходники иконок (если используется пак)
    5. Рисовать :hover :active :focus и тп для элементов, которые это 100% требуют
    6. Общаться с тугим верстальщиком, который не может отличить iline от inline-block
    7. Корректировать работу, если это просит верстальщик

    Что я понял, когда перешел на другую сторону:
    1. Я хочу архив с адекватными шрифтами (идеал - ссылку на шрифт в goolge fonts или подобном сервисе, где есть сразу все форматы шрифтов)
    2. Я хочу хотя бы .zip потому что инет в России не всегда и везде качественный и я могу быть не дома, когда хочу скачать и посмотреть диз, а он весит 300мб
    3. Я хочу несколько .psd если лендос/сайт большой (экранов в 25-30 или больше). Разбивайте на 7-10 экранов максимум каждый .psd потому что не у всех верстал 8-16 гигов оперативки
    4. Я хочу состояния :hover :active (пожалуйста!!! пусть уж без :focus, сам его придумаю)
    5. Я хочу ссылку на пак с иконками, если они использовались в дизайне
    6. Я хочу комментарии пусть даже в .txt если там что-то из-под чего-то должно выезжать при наведении/клике и тп
    7. Я хочу группы в макете с адекватными названиями, а не сплошняком все слои и/или группы "Группа 1 и тп"
    8. Я хочу минимум скрытых слоёв/групп в шаблоне (если группа не может донести суть - писать в .txt для чего она)
    9. Я хочу каждую часть текста по отдельности, а не заголовок (60px желтый отступ от абзаца с помощью межстрочного интервала) вместе с абзацем (18px белый с межстрочным интервалом не равным заголовку). Хочу чтоб был отдельно абзац и отдельно заголовок (подзаголовок, без разницы как называть)
    10. Я хочу отдельно каждую картинку, а не слитый воедино фон шапки с изображением товара/курса/др.
    11. Я хочу большой векторный логотип отдельно от шаблона
    12. Я хочу прозрачность, чтоб сделать png, а не "Режим наложения"->"Умножение" (обязательно адекватно мягко по контуру вырезанный объект, а не ступенька из пикселей)
    13. Я хочу общаться с дизайнером, если у меня есть его контакт
    14. Я хочу мобильную версию, если она должна быть у сайта
    15. Я хочу бесшовную текстуру отдельно от документа, если есть фон, который имеет свойство повторяться (его в "Наложение узора" обычно ставят в стилях слоя)
    16. Я хочу скайп дизайнера в макете чтоб связаться с ним))) Главное нарисуйте так, чтоб его не принять за элемент сайта и не заверстать случайно

    Ну как-то так. Думаю список можно ещё пополнить, но уже о некотором сказали.

    P.S. Я не эгоист, уже давно сам придерживаюсь всех этих правил, если хотят, чтоб дизайном занимался именно я.
    Ответ написан
    2 комментария
  • Как запустить Angularjs проект на сервер nodejs?

    @Scorpiored88 Автор вопроса
    Я недавно начал изучать angular.Сделал несколько проектов для себя на angular PhoneGap с сервером api на node express.
    Дело в том что angular PhoneGap приложения запускает сам телефон(или сервер на нем,точно не знаю),тоесть я вручную не скармливаю angular какому то серверу... В оф. Документации,а именно в туториале,ангулара,кратко сказано про какой то простой сервер на ноде и все...
    Я же просто хочу понять принцип работы...кто кому что скармливает...
    Вот допустим есть у меня несколько html страниц,для того чтобы переходя по заданному адресу открывать их,я запущу сервер на ноде (express) которий собственно и будет рендерить ети страницы и отвечать на get и post запросы и тд... тут все понятно.
    А как в случае с ангуларом? Правильно ли будет если я,етому же серверу по запросу на определённый адрес буду отдавать response.render(index)... index.html ангулара ,к которому собственно все и привязовается в етом фреймворке? Будете ли ето работать вообще?
    Или же тут Инной принцип,запускаем простейший http сервер с примера в туториале про ангулар, на своём сервера и все,етого достаточно...,ето релиз...,и таким образом мой angular проект выходит в свет?
    Разжуйте пожалуйста,а то на angular вроде как пишу,и expressОМ пользуюсь и модули разные подключаю,но вот куда и как прикрутить мой сайт на ангулар я не знаю (за исключениям PhoneGap).... :(
    П.С. Извините за ошибки,сейчас пишу с телефона
    Ответ написан
    Комментировать
  • Верстка -> Frontend -> Full Stack developer - какой оптимальный путь развития?

    Fesor
    @Fesor
    Full-stack developer (Symfony, Angular)
    что бы быть full stack вы должны понимать что происходит на каждом уровне вашего приложения. от кнопочек которые вы верстаете, до того как обрабатываются запросы на сервере, в плодь до взаимодействия с базой данных через все прослойки.

    Вне зависимости от выбранного языка или фреймворка, принципы остаются примерно те же. С Symfony мы можем говорить о гексагональной архитектуре, луковой архитектуре, data mapper и т.д. С nodejs мы тоже можем обо всем этом говорить но там не особо развиты идеи data mapper (на данный момент). Приходится жить с active record или dbal. Ну и опять же управление зависимостями в js и в php по разному организованы, хотя суть (dependency inversion) остается той же.

    Единственный совет дам - не распыляйтесь. Старайтесь не переключаться между фронтэндом и бэкэндом слишком часто, это уменьшит скорость обучения. Большая часть знаний в принципе спокойно мигрирует из одной сферы в другую, так что не переживайте.
    Ответ написан
    Комментировать