• WebGl - c чего начать изучение?

    Книга на русском "WebGL - программирование трехмерной графики". Есть на рутрекере
    Ответ написан
    Комментировать
  • Какой идеальный путь начинающего веб-разработчика?

    ali_aliev
    @ali_aliev
    Разработчик на Django/Python, JavaScript
    Python+Django и конечно же JavaScript. С питоном разберетесь быстро (если прочтете Лутца проблем никаких быть не должно). Django тоже не сложный фреймворк, достаточно прочесть официальную документацию. У JavaScript-а очень много подводных камней, слабо типизированный язык, читать придется много и учиться постоянно. Еще вам необходимо будет знать хотя бы на базовом уровне верстку, прочтите книгу "Влад Мержевич - вёрстка веб-страниц". Обязательно изучить SQL (он очень простой, любая книжка подойдет но я советую начать с "Понимание SQL", Мартина Грабера), далее PostgreSQL учебник тыц и тыц. Вот вроде бы и все, двигайтесь в этом направлении.
    Ответ написан
    Комментировать
  • На каком хостинге делать большой проект?

    @MadridianFox
    Web-программист, многостаночник
    Делайте сразу в контейнерах и размещайте там где они могут запускаться. Если проект взлетит, то без проблем перенесёте в облако. Более того, грамотная работа с контейнерами сразу заставит вас организовать масштабируемую архитектуру.
    В случае с быстрым выжиранием диска, лучше сразу идти в облако. Всякие там S3 с одной стороны могут дать вам условно неограниченное, а главное сразу масштабируемое хранилище. Ну и так же заставят вас использовать чуть более грамотный подход, чем "сразу в лоб" класть файлы на диск, а потом мучиться с масштабированием.
    Ответ написан
    Комментировать
  • Javascript backend frameworks or vanilla js?

    MarcusAurelius
    @MarcusAurelius Куратор тега Node.js
    автор Impress Application Server для Node.js
    Посмотрите вот этот мой развернутый ответ: Подсоветуйте фреймворк для node?
    Инструментов можно набрать тут: nodeframework.com и тут https://github.com/sindresorhus/awesome-nodejs и тут https://github.com/vndmtrx/awesome-nodejs

    По БД рекомендую MongoDB, если у Вас данные аморфные, сложной или часто изменяющейся структуры с этими драйверами: https://www.npmjs.com/package/mongodb А если данные имеют редко меняющующуюся структуру и хорошо ложатся в таблицы, то берите реляционку, лучше PostgreSQL, с драйверами: https://www.npmjs.com/package/pg Но я не люблю и не рекомендую ORM, обычно от них больше проблем, тормозов и дополнительной работы больше, чем выгоды от их внедрения. Если уж приспичит, то для монги есть mongoose: mongoosejs.com это ODM, аналог ORM для документных баз, а для PG есть много вариантов, которые основаны на том же драйвере pg.

    Паттерн MVC он вообще изначально был изобретен для графических интерфейсов пользователя, и там он еще как-то себя оправдывает, да и то кривенько, почитайте эти мои статьи: habrahabr.ru/post/204958 и habrahabr.ru/post/117791 Для ноды это вообще противоестественно. GUI и бекенд должны быть разделены сетевым API, на которое вешаются что мобильные приложения, что браузерные, что оконные, это уже без разницы.
    Ответ написан
    Комментировать
  • CSS и JS анимации, как освоить?

    mudrenokanton
    @mudrenokanton
    frontend dev
    Просто начните пытаться реализовать свои идеи. Возникнут вопросы, найдете на них ответы. Так и научитесь.
    Со знанием базовых вещей будет проще конечно, но все равно прогресс чувствуется когда садишься и делаешь.

    По SVG:
    commons.oreilly.com/wiki/index.php/SVG_Essentials/...
    Книга по основам, я читал в более адекватном epub формате
    https://sarasoueidan.com/tags/svg/index.html
    Блог Сары (SVG, но можно и про CSS&JS почитать), более практичные и полезные вещи, читал с конца к началу

    По JS:
    https://classroom.udacity.com/courses/ud860/lesson...
    Это база для понимания "че оно лагает?"
    https://developers.google.com/web/tools/chrome-dev...
    Понимание возможностей DevTools, очень упрощает жизнь в перспективе
    https://github.com/getify/You-Dont-Know-JS
    И конечно знание самого JS всегда нелишнее

    По библиотекам и анимации:
    Сам codepen, понятное дело. Смотрите в чужой код, пытайтесь разобраться.
    https://www.youtube.com/playlist?list=PLkEZWD8wblt...
    Более-менее можно прочувствовать что такое GSAP вообще, неплохой начальный курс
    https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/
    Сама документация и туториалы на сайте, можно и на их youtube канале что-то подсмотреть.
    https://tympanus.net/codrops/
    Много полезного с примерами

    Всякого рода математика:
    https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
    https://www.youtube.com/user/codingmath/videos?flo...
    Можно залипнуть, чтобы понимать как все эти векторные фишки делаются на canvas

    Еще есть 3D, но это отдельная тема.
    Ответ написан
    1 комментарий
  • SASS компилятор для Sublime Text (Windows)?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    плагин же есть для саблайма
    https://packagecontrol.io/packages/SASS%20Build
    и чтобы он работал по сейву https://github.com/alexnj/SublimeOnSaveBuild
    Ответ написан
    Комментировать
  • Серверная часть под Bootstrap?

    PretorDH
    @PretorDH
    HTML5, CSS3, PHP, JS - люблю в чистом виде.
    Обьясню популярно.
    Вашу ситуациию можно стравнить с рабочим строителем - он никогда не поймет архитектора.

    1-10 левел. HTML5 + CSS5 вообще не програмирование, это пасивные сущности. BOOTSTRAP это даже не сущность, это набор патернов - не более. Если вы выучили набор патернов, но не понимаете как работает HTML и CSS, вы помощник дизайнера/верстальщика. Фактически Вы чернорабочий - научились держать лопату, рыть канавы и перекидать мешки с места на место, без вреда для здоровья.

    10-30 левел. Изучив HTML и CSS на таком уровне, что понимаете как изменяя CSS придать правильный вид любой разметке. Учится здесь довольно быстро 1 годик, и 1 год опыта.
    Теперь: Вы фактически научились забивать гвозди, и выставлять доски по уровню.

    30-70 левел. JS, PHP, Node.js - уже програмирование. Там совсем другая парадигма. И начинать нужно с парадигмы програмирования. Понять что такое переменные, циклы, условия. Изучить алгоритмы, Обьектную модель, наследование, чэйнинг..., изучить серверные фреймворки Yii, Simphony, WP и т.д. Здесь быстрых результатов не ждать!!!, учится лет 5 и года 3 опыта в програмировании.
    Теперь ваш уровень соответствует специалисту по прокладке инженерных сетей - сантехнику, электрику.

    70-80 левел. Изучив сетевые протоколы, структуру серверов, архитектуру програмного обеспечения, серверные языки програмированя, взаимодействие инфраструктур и много чего ещё, вы только тогда станете Фулстак разработчиком (и в итоге архитектором програмного обеспечения 80 уровня). Но учится на рахитектора минимум 10 лет и еще 5 лет опыта в проектировании ПО.

    P.S. На вашем уровне, Вам подойдет например делать контен на готовых конструкторах WIX или CMS Wordpress. Сдесь много знаний не надо, надо научится регить домен, покупать хостинг, устанавливать в панели хостинга нужную CMS. И самое малое изучить саму CMS.
    Ответ написан
    5 комментариев
  • Почему gulp-sass прогрессивно увеличивает время исполнения таска?

    reskwer
    @reskwer Автор вопроса
    front-end developer
    Решение найдено! Всему виной оказался Вотчер, к примеру имеем мы вот такой вотчер для стилей.
    gulp.task('watch', function() {
    	gulp.watch('sass/**/*.scss', gulp.series('style'));
    });

    Всему виной вот эта конструкция, **
    bc1a60d24bd74453801fdf083fb135b1.png

    Не используйте в вотчере такую конструкрую, пишите прямо все папки где искать, к примеру вот так
    gulp.watch(['sass/*.scss', 'sass/block/*.scss', 'sass/page/*.scss'], gulp.series('style'));

    В данном примере мы указали 3 папки где будут вотчится все файлы, это sass, block, page. и если теперь вы будете редактировать файлы из этих папак, то стили у вас будут собираться рекордно быстро, и время исполнения таска НЕ БУДЕТ УВЕЛИЧИВАТЬСЯ

    ПРИМЕР!!
    Имея вот такой таск вотчера.
    gulp.task('watch', function() {
    	gulp.watch('sass/**/*.scss', gulp.series('style'));
    });

    Я захожу в файл sass/components/header.scss и редактирую рас 10, пока время выполнения таска не доходит до секунды, потом захожу в файл sass/block.scss и редактирую его 3 раза, обратити внимания на скорость выполнения таска.. 150-180 милисекунд дальше я опять редактирую фай sass/components/header.scss и время выполнения таска уже больше однойсекунды.. так что делайте вывод господа..
    ba7cfc8431e544f28cf001a426b50753.png
    Ответ написан
    3 комментария
  • Какие технологии вы используете для лендингов?

    @Kjuri
    Если ориентироваться на ваш список, те. различные скрипты js ( анимация, паралакс и слайдер) + шрифты, то список окажется очень длинным. Нужное используется по мере необходимости и исходя из минимизации допиливания.
    Разве что из постоянных:
    Fancybox - модальные окна для более сложных вариантов
    Owl - адаптивная каруселька
    +свои наработки для ajax заявок и простых модальных

    Но могу заметить, это не то что серьезно влияет на скорость работы - сделать сайтик и не поставить какой-нибудь js скрипт это сейчас редкость.

    Берите выше - для ускорения одних js-скриптов недостаточно.
    Это и обвес своего редактора нужными плагинами (Emmet в первую очередь)
    Это изучение клавиатурных сокращений (серьезно так ускоряет)
    Это npm, сборщик проектов (gulp, grunt) + соответствующий обвес
    Это фреймворк (bootstrap)
    Это препроцессоры
    Вот такой начальный список, а дальше - смотря что найдете и изучите полезного в интернете.
    Ответ написан
    Комментировать
  • Какие технологии вы используете для лендингов?

    Nikolay12
    @Nikolay12
    Верстальщик
    Если без фреймворка, а просто верстка по макету, то:
    • Emmet - быстрый кодинг html и сss
    • less - переменные для шрифтов, вложенность селекторов или бэм-нейминг.
    • flexbox - для сетки, расположения элементов и респонсива.
    • autoprefixer - добавление css-префиксов
    • Imagemin-pngquant - для сжатия картинок
    • gulp - для сборки вышеперечисленного
    • slick - карусели и слайдеры
    • remodal - модалки


    Если использовать фреймворк, например, bootstrap, то быстрее будет работать с исходниками бутстрапа и потом собрать их:
    • переопределить переменные
    • подключить нужные js-скипты из коробки
    • подключить нужные less-стили
    • собрать это всё галпом
    Ответ написан
    1 комментарий
  • С помощью чего делается анимация на лендингах?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    JS:
    viewportchecker.js или wow.js на выбор
    CSS:
    animate.css, есть и другие, но эта самая популярная

    Я чаще всего использую связку viewportchecker + animate.css.

    $('.bxslider').addClass('hidden').viewportChecker({ // добавляем класс hidden
    // ждем появления блока в поле зрения, чтобы применить к нему анимацию
        classToAdd: 'visible animated fadeIn', // меняем классы, выполняем анимацию
        offset: '50%', // доп параметры, когда начинать анимацию
        repeat: true, // повторять при возвращении снизу вверх
    });

    PS: Классы hidden и visible нужно добавить в css.
    Если используете Bootstrap, то лучше классы сделать другие, чтобы не было конфликта.

    Преимущество подключения именно viewportchecker для меня.
    То, что его можно использовать для любых скриптов вообще, не только для анимации.
    Запуск видео, инициализация слайдера, "убийство" слайдера, особенно animateNumber.js ( описание ) удобно привязать, чтобы анимация цифр срабатывала не при загрузке, а именно в момент скролла до блока.
    И библиотека весит совсем немного.
    Ответ написан
    Комментировать
  • Нюансы верстки email-письма?

    @krontill
    Очень рекомендую ссылку на кучу полезных ресурсов, руководств и исследований - https://habrahabr.ru/company/pechkin/blog/273677/
    Какие почтовики, какие стили поддерживают -https://www.campaignmonitor.com/css/
    emailframe.work фреймворк в помощь.
    https://habrahabr.ru/post/106387/ грабли
    https://habrahabr.ru/post/60420/ рекомендации
    Ответ написан
    Комментировать
  • Какой выбрать фреймворк для сложных веб-анимаций (с примером)?

    Ronnie_Gardocki
    @Ronnie_Gardocki
    Я у мамы фронтендщик.
    Варианта 2 почти всегда:
    1) Greensock (GSAP). Самая крутая либа для анимаций, умеет наверное все, кроме разве что канваса/webgl (для этого обычно уже юзают threejs или ручками что-то пишут).
    2) Bodymovin. На второй гифке например последовательная анимация, не требующая интеракций от юзера, но содержащая при этом множество деталей и микродвижений. Пилить такое руками - ОЧЕНЬ много часов (разница между похожим прототипом и прототипом на 90% схожим с гифком - колоссальная). В то время как с bodymovin вы просто экспортируете всю анимацию из after effects и запустите ее на клиенте. Есть конечно же свои плохие стороны, отсутствие гибкости и весьма немалое количество кода, экспортируемого из AE, но обычно в таких ситуациях других способов не бывает.
    Ответ написан
    Комментировать
  • Как организован workflow фронтенд разработчика?

    serjikz
    @serjikz
    web-developer
    Давайте по пунктам постараюсь рассказать, как вообще надо работать во front-end.
    1. Вы должны научиться думать блоками (блоками в потоке, выпадающими из потока, flex-блоками и тд и тп). Научиться можно только когда вы поймете как на самом деле надо верстать.
    2. Начните с простой вёрстки. Возьмите макет в .psd (80% работы над каждым сайтом вы будете пользоваться PhotoShop и если вы его не знаете хотя бы на предбазовом уровне - печаль беда), импортируйте оттуда все нужные вам картинки ну и начинайте верстать шаблон поблочно, смотря где какой цвет шрифта, размер, жирность, размер блока, фон этого блока и тд и тп.
    3. Зачем вы себе морочили голову gulp, sass, bootstrap когда ещё верстать даже нормально не умеете - я увы не понимаю. Вам ни один из этих инструментов не поможет пока вы не будете уметь именно верстать. На данный момент не думайте о технологиях, структуре и тд и тп. Просто сверстайте хоть какой-нибудь макет хоть как-то.
    4. Общайтесь с людьми, которые вам могут помочь продвинуться в этой сфере. Таковых крайне много. Можете ко мне в скайп добавиться и узнавать некоторые вещи, можете к другим, к кому угодно фактически, наверно 60-70% верстальщиков с удовольствием поделятся с вами своим опытом
    5. Пишите код аккуратно. Был тут недавно вопрос, в котором человек предоставил код, а там ни{ } нету, ни отступов нормальных нет, ну и половина ; просто потеряны, а в html теги применяются не по назначению вовсе. Нельзя так делать ни в коем случае, иначе ваш уровень не поднимется с уровня плинтуса.
    6. Файловая структура: папки css images js и на уровне с этими папками лежат файлы .html либо .php всё. Если говорить о препроцессорах и сборщиках - не лезте пока в это, потом узнаете как только научитесь нормально верстать. Я думаю нет смысла объяснять что в папках тех должно лежать. Если вы считаете себя особенным - можете распределять внутри images картинки по папкам на составляющие, к примеру сделать папку отзывов, папку галерей каких-нибудь и тп, но я чаще так не делаю, не хочу чтоб дополнительные символы засоряли мне код и ухудшали читаемость.
    7. Связывать между собой html и css судя по всему вы и так уже умеете и привязывать к ним js. Не знаю что вам мешает сверстать любой сайт если вы понимаете как устроены эти 3 технологии (а на них по факту всё и держится).

    Итог: Забудьте про sass, gulp и прочее пока не сверстаете шаблонов 10, эти технологии вас никак не ускорят и никак вам не помогут пока вы не будете уметь просто верстать с шаблона .psd и писать нужные скрипты на js или jQuery хотя бы. Научитесь немного фотошопу и занимайтесь практикой. Найти те самые .psd вообще не проблема, их куча бесплатных в интернете.
    Ответ написан
    2 комментария
  • Какая ширина адаптивного сайта считается минимальной?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Есть андроид с дисплеем 240x320 (px) . (это всякие кнопочные и противоударные)
    Шах и мат:
    326596c0cd0d4a39a4f153babd03265d.jpg186bac23400547218ef028f35099b85b.jpg
    UPD: Разрешения дисплеев, иконок, dpi (все в табличном виде): тут
    Ответ написан
  • Какими плагинами для браузера пользуются Web дизайнера и Разработчики?

    sabramovskikh
    @sabramovskikh
    Для хрома:
    PerfectPixel - для наложение JPG дизайна на верстку
    Page Ruller - измерение расстояний и размеров
    ColorZilla - узнать цвет
    Joxi - сделать скриншот страницы
    Visual Event - посмотреть JS события
    Cookie Manager - управление куками
    Instant Translate - окошко для перевода слов
    Элементы Яндекса: Перевод - выделение и перевод слов
    Ответ написан
    4 комментария
  • Sublime не распознает SASS\SCSS, как быть?

    @lex111
    Наверное, нужно установить расширение для поддержки синтаксиса SASS https://packagecontrol.io/packages/Sass
    Ответ написан
    1 комментарий
  • Правильный frontend?

    @denikeweb
    Freelancer, creative developer
    Я бы посоветовал двигаться шагами, которые закрепляют одну (максимум две) технологии. Но это больше вопрос психологической нагрузки — проще, когда ты используешь в 40% случаев незнакомую технологию, когда остальные 60% являются технологиями, в которых Вы уже имеете опыт.

    В принципе, можете использовать такую последовательность действий:
    1) Напишите небольшой лендинг (2 экрана, думаю, будет достаточно), используя Bootstrap. Если Вы раньше с ним не работали, то добавлю, что у Bootstrap, если брать в общем, есть 2 функции — структура блоков на сайте (с обеспечением адаптивности) и готовые элементы интерфейса. То есть, для сайта с нестандартной модульной сеткой и прорисованными дизайнером лучше написать несколько лишних строчек CSS, а для лендингов Bootstrap в самый раз.
    2) Установите git. Создайте пустой проект, чтобы просто "пощупать", а потом создайте новый проект на основе лендинга. Разберитесь с основными терминами git и поработайте с сервером (можете использовать BitBucket), почитайте о gitHub, внесите какие-либо изменения в проект и добавьте их в git
    3) Установите SASS (перед этим Ruby). Перепишите весь css-код в соответствии с возможностями sass. Если в документации SASS есть описание возможностей, которых нет в лендинге, добавьте новый блок, чтобы попрактиковаться с некой конкретной возможностью. Я почитал в ответах, что также советовали попробовать less и Stylus. По Stylus не скажу, так как с ним не работал, а less, как по мне, не стоит — у него меньший функционал, да и по популярности он намного ниже, потому сложнее будет искать ответы на вопросы.
    4) Автоматизируйте процессы, используя gulp (можно просто пройтись по документации, чтобы иметь список действий, можно почитать инструкцию в Интернете)

    По ощущениям, этот список для изучения примерно на сутки, но может Вы растянете, а может за 8 часов, к примеру, разберетесь. В любом случае, желаю успехов в изучении!
    Ответ написан
    1 комментарий
  • Правильный frontend?

    @frontendthug
    1. Первым делом разберитесь, что такое пакетный менеджер(в нашем случае npm)
    2. Попробуйте понять, как работает сборщик проекта (Gulp). Основы Gulp.
    2. Попытайтесь внедрить туда те технологии, которые Вас интересуют. ( Даже если Вы их не выучили, в инете полно гайдов по внедрениям разных технологий в Gulp .Это избавляет от использования программ типа PrePros ).
    3. Начните изучать SASS.
    4. Внедрите bootstrap-sass в свой проект.
    5. Постоянно практикуйтесь.

    Из источников, где можно всё это хорошо подучить, я могу выделить несколько:

    WebReference - много вкусностей для начинающих. Именно этот сайт помог мне в начале пути фронтендера.
    Frontender Magazine - огромное количество полезных статей.
    Zencoder - тут тоже можно много чего найти по Вашим предпочтениям.
    Прогрессор - аналогично предыдущему.

    Вам должно вполне хватить данной мной информации. Успехов!
    Ответ написан
    Комментировать