• Bootstrap-Vue - В чём фишка данного симбиоза?

    copist
    @copist
    Empower people to give
    Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

    Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

    Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

    Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

    Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

    И вот получается Bootstrap-Vue

    На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

    Добавляем тот факт, что в Vue можно не импортировать компоненты, которые не нужны (например, я не работаю с дропдаунами и модальным окнами) и код становится меньше, грузится быстрее, работает быстрее.

    Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

    Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся
    Ответ написан
    4 комментария
  • Как собрать команду блокчейн разработчиков? Где их найти? Как договориться?

    Adamos
    @Adamos
    Скорее всего, ваш "проект" так успешно "продался" именно потому, что
    Мы то сами не разработчики ни разу да и в технологии шарим "поверхностно"

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

    "Ведущие издатели очень заинтересованы в нашей ААА-игре об ограблении корованов, теперь нужно только ее написать".
    Ответ написан
    Комментировать
  • Профессия веб-дизайнер мертва?

    @HungryGrizzzly
    Сумасшедший кросс
    Для начала посмотрите, что такое ui/ux. Если у вас останутся вопросы касательно востребованности профессии "веб дизайнер", то посмотрите ещё раз.
    Ответ написан
    Комментировать
  • Зачем frontend девелоперу такой большой опыт?

    mroforolhc
    @mroforolhc
    умственно отсталый
    Интересный вопрос, который и продолжил бы быть "интересным", если бы не ваш максимализм (а именно деление на черное/белое) и нежелание понимать, как всё устроено на самом деле. Постараюсь ответить вам, учитывая вышесказанное.

    Не хочу говорить, что веб сложнее тех же плюсов, это будет лукавство. Но и утверждать, что за 3 дня можно познать все реакты и вебпаки, почитать исходники это тоже самое, что и говорить "да я ща месяц потрачу на прочтение книг страуструпа - всё буду знать, он же создатель языка" — полный бред, который может сказать только профан. Изучить строение молотка и принцип его работы это не то же самое, что и забивать гвозди. И вот как раз за забивание гвоздей отвечает ваш нелюбимый "опыт". Благодаря которому вы не будете совершать ошибок новичков, а сразу вкатитесь на работу со своими наработками.

    Ну и если всё так просто на словах, попробуйте, чисто для эксперимента, отвлекитесь от плюсов и других ЯП, связанных с железом, и напишите пару проектов за...сколько там у вас в посте...а, за 1-2 недели. Это не такой большой срок, но зато какие потом большие перспективы (ориентируясь на ваш пост, опять же). И не смотрите на года опыта. Это примерная оценка того, сколько требуется человеку, чтобы он умел владеть необходимым стеком технологий. Если вы такой замотивированный и классный, то вам вполне хватит, как вы и написали, 2 недели и можете устраиваться на работу с опытом работы от 3 лет. Работодателю не важен особо факт того, что вы работали до этого 3 года. Если вы знаете всё, то он вас с радостью возьмёт. А сроки "от 3 лет" это указаны специально для нас – очень глупых людей, работающих на дядю, без мотивации, 30летние бездари одним словом.
    Ответ написан
    2 комментария
  • Как оптимально питаться при работе головой?

    sergey-gornostaev
    @sergey-gornostaev
    Седой и строгий
    Никогда не следил за питанием. Ем преимущественно мясо, запиваю пивом и кофе. Регулярно оскотиниваюсь более крепкими напитками, в процессе оскотинивания курю нон-стоп.
    Ответ написан
    14 комментариев
  • Какие диаграммы нужны для полноценного документирования программного проекта?

    @ned4ded
    Верстка, Фронтенд
    Добрый день!

    Так сложилось, что я отучился на бизнес-аналитика и имею некоторый опыт работы в этой сфере (но в данный момент я занимаюсь разработкой).

    Теперь немного тезисно по вашей информации:
    1) Диаграмма - способ представить информацию, любую диаграмму можно описать словами.
    2) Диаграмма - инструмент для выявления новой информации о системе.
    3) Впервые слышу про диаграмму бизнес-объектов: может это что-то крайне редкое (крайне специализированное), но с высокой долей вероятности, это вам не потребуется.
    4) UML - язык, а не гайдлан по документированию ПО, сл-но в книгах с аббревиатурой UML вы не найдете нормального руководства по документированию.

    Вывод из этого следующий: диаграмма используется как подкрепление к документации, как инструмент проектирования ПО (для выявления зависимостей и новых сущностей). В обоих случаях набор нотаций будет зависеть от требований, предъявляемых к таким документам.

    Если вам интересно документирование ПО, то гуглите: техническая документация, техническое задание, ГОСТ 34, ГОСТ 19, SRS, хорошая статья на хабре про это.

    Если вам интересно именно полноценное описание проекта, то гуглите: методологии разработки программного обеспечения, управление проектами, pmi, pmbok, agile.

    Теперь пройдемся по диаграммам в зависимости от назначения. Я сейчас могу выделить несколько направлений (не претендуя на полноту):
    1) уровень бизнеса (любые части системы, находящиеся вне ПО per se)
    2) уровень программного обеспечения (системные модули, компоненты системы уже реализованные на уровне ПО)
    3) уровень данных (структура данных, описание типов данных и т.д.)
    4) уровень hardware (например, топология сети)

    На уровне бизнеса обычно описываются бизнес-процессы (idf0, idf3, aris, bpmn, dfd), воркфлоу, юзкейсы, маиндмапы и проч. - это все идет сюда. На этом уровне выделяются основные процессы, выполняемые внешними относительно системы акторами, выявляются точки их взаимодействия с системой. На основе этого проектируются основные модули системы, исполняемые ими функции и их взаимодействие. Взаимодействие системы с внешней средой.

    На уровне ПО обычно используются алгоритмы, псевдокод, сущность-связь, диаграммы классов, флоучарты, маиндмапы, диаграммы состояний и все вот это вот абстрактное. Как вы понимаете, все сущности, описываемые на этом уровне уже выделены на уровне бизнеса и здесь происходит их уточнение и описываются особенности реализации. Под сущностями я тут понимаю как и глобальные системные модули и подсистемы, так и абстрактные сущности внутри системы, как то "товар", "пост", "юзер" и т.п.

    На уровне данных обычно делается схема бд. Собственно, схема бд строится на основе описанных сущностный из предыдущего уровня.

    Уровень hardware я лично всегда рассматривал редко, но он строится на основе требований бизнеса, требований к программному обеспечению, требований к обработке, хранению данных.

    К сожалению, я не могу в один пост уместить весь объем знаний, полученный мной за годы обучения и практики, но надеюсь, что это направит вас в нужное направление.

    ps на небольших и средних проекта я стараюсь прибегать к одной из нотаций бизнес-процессов, если требуется что-то автоматизировать (idf или bpmn), юзкейсам для выявления интеракций пользователя с приложением; для подготовки к написанию ПО - сущность-связь, иногда алгоритмы.
    Ответ написан
    Комментировать
  • Как блокируется поток?

    inoise
    @inoise Куратор тега PHP
    Solution Architect, AWS Certified, Serverless
    да для каждого пользователя просто создается параллельный поток через php-fpm как правило. это не Nodejs, python или Java где запускается один процесс к которому все стучатся
    Ответ написан
    7 комментариев
  • Как соединить линиями блоки div?

    freislot
    @freislot
    Frontend-разработчик
    https://codepen.io/freislot/pen/YbaEjm

    Накидал в форме бреда, ответ не претендует на качество и все такое. Нужно будет пилить под вашу верстку и встраивать в ваш код. Я лишь показываю вам просто как идею для примера. Про плагины не подскажу, сделал на скорую руку первое, что пришло в голову. Ну и адаптив как бы есть, но лучше на resize window сесть и правки внести на нужных экранах. В общем не знаю) решать вам что делать с этим дальше. Успехов
    Ответ написан
    Комментировать
  • Каковы современные тенденции веб программирования?

    AntonBoltnev
    @AntonBoltnev
    Со-основатель сервиса поиска продавцов Bicco
    чтобы оно было универсально, то есть корректно отображалось на смартфонах, планшетах, десктопах


    Bootstrap учить далеко необязательно. В нем много лишнего. И порой ты можешь столкнуться с проблемой неBootstrap макета. Если дизайнер не нарисовал по сетке - бутстрап ваш только проект загрузит барахлом не нужным и придется переопределять стили. Что геморойно и опять же сжирает байты.
    Научитесь лучше верстать на flex или grid. В нативное поведение этих css-свойств уже зашито адаптивное поведение.

    чтобы оно корректно работало на старых/дешевых смартфонах


    А насколько старыми они должны быть? iphone 3-4? и подобные?
    Начнем с того, что эти устройства, на сколько мне известно, не поддерживают интернет выше 3g. А на таком соединении у них даже лендинги будут грузиться не быстро.
    Тут тонкий момент. Либо ты постоянно пытаешься подстроиться под старое унылое г....:) Либо ты забиваешь на это и кодишь современно! Почитай про Изящная деградация vs. постепенное улучшение

    Что касается того на чем вообще писать код. По бекенду не скажу, но очень популярна (как и всегда) Java. Из относительно нового - Node.js
    Во Фронтенде если 3 фреймворка вокруг которых уже не первый год твориться истерия:
    - Vue.js
    -React.js
    -Angular (уже мало кто пользует с нуля. В основном это поддержка уже написанных проектов)

    Я для себя, как фронтенд, выбрал Vue.js
    У него самый низкий порог вхождения и понятный "подкопот".
    Популярность пониже чем у React.js, но набирает обороты.
    Ответ написан
    3 комментария
  • Как вынести часть js из основного потока?

    Sanasol
    @Sanasol Куратор тега JavaScript
    нельзя просто так взять и загуглить ошибку
    На метрику точно забейте.

    Ютуб надо убирать под JS, вместо плеера картинка -> при клике вставляется плеер.
    Ютуб безобразно долго грузится.

    Живосайт не факт что так сильно влияет, но можно сделать финт ушами

    setTimeout(function(){
    (function(){ var widget_id = '***';var d=document;var w=window;function l(){
      var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true;
      s.src = '//code.jivosite.com/script/widget/'+widget_id
        ; var ss = document.getElementsByTagName('script')[0]; ss.parentNode.insertBefore(s, ss);}
      if(d.readyState=='complete'){l();}else{if(w.attachEvent){w.attachEvent('onload',l);}
      else{w.addEventListener('load',l,false);}}})();
    }, 3000);


    В целом вся оптимизация вордпресса это:
    1. Прогнать картинки через https://compressor.io/
    2. И поставить какой-нибудь W3 Total Cache + включить всякие минификации и т.д.
    3. Всякие виджеты засунуть в setTimeout

    На выходе получите 90-100 для десктопа и 80-100 для мобильного на PageSpeed
    Ответ написан
    4 комментария
  • Как дебажить браузеры на ios?

    profesor08
    @profesor08
    Если нет мака, то создаешь виртуалку с хакинтошем, там ставишь xcode, в нем есть эмуляция девайсов, в том числе айфонов. Там будет тебе и лог, и девтулз.

    Дебажить устройства на андроиде проще. Открываешь на компе хром, в настройках выбираешь remote devices, подключаешь устройство к компу по usb, включаешь в нем usb debug, далее из хрома запускаешь нужные страницы. А вообще там все инструкции написаны.
    Ответ написан
    1 комментарий
  • Как создать онлайн веб сервис?

    h0w4rd
    @h0w4rd
    Python dev.
    Цитируя ответ выше "Хочу сделать свой боинг 777, на данный момент умею забивать гвозди, что нужно изучить?":
    Сначала нужно понять, что вообще там используется?
    1. Node.JS хорошо, но вот как данные хранить?
    В файлах, нет! MySQL, а это уже +1 библиотека и знание одного "ЯП" - SQL (ведь даже ORM не спасут от этого).
    2. Дальше... А как данные шифровать? Ведь без нее никак уже, всякие хацкеры. Это уже криптография, +1 библиотека так точно. (Это не шутки, с безопасностью не шутят)
    3. Дальше, сервер... Если это Node.JS то это уже +1 библиотека / фреймворк.
    И так можно продолжать очень долго.
    И не стоит сразу замахиваться на огромные проекты, где безопасность важнее скорости, ведь тут не просто какие-то там монетки, а РЕАЛЬНЫЕ деньги!
    Для начала лучше какой-то бложик, статика. Потом уже покрупнее.
    Ну а затем пробовать, ПРОБОВАТЬ что-то с финансами.
    Одному человеку почти нереально сделать платежку, или, что там.
    Ведь если что-то криво сделать - это материальный ущерб, а это статья УК если не ошибаюсь.
    Просто почуток, эволюция не сделала клетки сразу человеком. Очень долго, от клетки к губкам, от губок к медузам и так далее...
    Думаю суть ясна.
    Ответ написан
    Комментировать
  • Как одновременно изменить один и тот же массив в Node.js?

    @StockholmSyndrome
    если уже существует элемент с таким code, то просто не добавлять его
    if (!this.products.find((item) => res.code === item.code)) {
      this.products.push(res);
    }


    либо я не понял вопроса
    Ответ написан
    5 комментариев
  • Какой выбрать монитор для верстальщика?

    webinar
    @webinar
    Учим yii: https://youtu.be/-WRMlGHLgRg
    Какой выбрать монитор для верстальщика в 2019 году?

    широкоформатный или 2 вместо одного

    Если ли смысл в 4k?

    нет

    Не раздражают ли верстальщиков изогнутые формы?

    если бы верстальщики отделились в отдельную группу несколько миллионов лет назад, то возможно у них бы появились настолько серьезные особенности психологии наряду с четвертой рукой.

    Как вы считаете?

    программно или в уме
    Ответ написан
    17 комментариев
  • Как можно создать такую анимацию? Точнее с помощью чего?

    profesor08
    @profesor08 Куратор тега JavaScript
    Создается N блоков, каждому задается один и тот-же фон, но со смещением, чтоб выглядело все это дело как единая картинка. Этим блокам задается одинаковый transform: skew, чтоб они стали под наклоном, а при анимации сдвигают их по одному с какой-то задержкой. Создавать блоки программно или руками дело твое.
    Ответ написан
    Комментировать
  • Что делать с этой кнопкой в системнике?

    @hiddenSt
    Это похоже на защиту от включения компа при открытом корпусе. При закрытом корпусе она не должна влиять на работу.
    Ответ написан
    5 комментариев
  • Владение какой технологией/ЯП в США имеет наибольший шанс на получение хорошей работы?

    @uelkfr
    Я думаю так:
    1) JavaScript - высокая востребованность и зарплата
    2) Java - высокая зарплата, средняя востребованность
    3) C/C++ - высокая зарплата, не подходит для молодежи, низкая востребованность
    4) перспективно Scala, Closure, Rust
    5) в США наверное Objective C и Swift популярны

    По технологиям:
    1) Web Backend (centos, ubuntu, debian, Docker, Docker Swarm/Kubernetes, ansible, systemd, supervisor, nginx, haproxy, php5-fpm, nodejs, postgresql, mysql/mariadb/perconaserver, redis, cassandra, Consul, Ceph, ElasticSearch/Sphinx)
    2) Web Frontend (html6, web 3.0, css5, es8, nodejs, gulp, grunt, browserify, angularjs, react, flux/redux, mocha, selenium-webdriver, protractor)
    3) Android/iOS (менее перспективно BlackBerry, Sailfish OS, Ubuntu Touch)
    4) Databases (ext4, Ceph, Oracle, PostgreSQL, Cassandra, ElasticSearch/Sphinx)
    5) Big Data
    Ответ написан
    Комментировать
  • Как реализовать визуальный конструктор фильтра/алгоритма?

    usdglander
    @usdglander
    Yipee-ki-yay
    Вставлю свои 5 копеек, так как в настоящий момент примерно над этим сейчас и работаю. Моё решение следующее:
    Хранить этот фильтр в виде формализованного набора правил для построения запроса. Что то вроде
    [
        'OR'
        ['like', 'from', '%example%'],
        ['=', 'theme', 'hello'],
        ['like', 'body', 'world']
    ]

    Затем "скармливаю" этот массив в объект ConditionDispatcher, который в зависимости от типа указанного в нём "провайдера" (потребителя) преобразует этот набор правил либо в where-секцию MySQL запроса, либо в запрос в MongoDb, либо в код функции, выполняющей фильтрацию на стороне браузера (javascript).
    Ответ написан
    2 комментария
  • Как использовать движки при написании сайта?

    @inkvizitor68sl
    Linux-сисадмин с 8 летним стажем.
    CMS намного чаще используют для того, чтобы сделать готовый сайт, не написав ни строчки кода (ну только шаблон сверстать или свистнуть откуда-нибудь).

    > как связать свой код
    Здесь всё зависит от CMS. Варианты
    0) самый печальный - CMS проприетарная, код зашифрован. Здесь - никак (кроме последнего пункта ниже, но тоже не факт).
    1) как раз случай с wordpress - ко многим CMS можно писать свои плагины, используя "внутреннее API" самой CMS.
    2) если CMS плагинов не предполагает, но код открыт/доступен - можно переписать часть кода так, как необходимо.
    3) отдельные гении пишут просто независимый код, который напрямую взаимодействует с той же базой, что и cms. Оправдано в очень-очень редких случаях.

    А зачем использовать - чтобы не плодить тонны говнокода, который делает одно и то же.
    Ответ написан
    Комментировать