Препарируем Vue и находим родовые травмы
Мелкозернистая ленивая реактивность, но..
- При всплытии исключения компонент просто исчезает
- Нет отсечения эквивалентных изменений.
- Неконсистентное состояние при циклических зависимостях.
Мелкозернистая ленивая реактивность, но..
- При всплытии исключения компонент просто исчезает
- Нет отсечения эквивалентных изменений.
- Неконсистентное состояние при циклических зависимостях.
Доброго времени суток. У меня есть сайт, он хостится на bitrix24. Также у меня на Nic.ru куплены dns-сервера. Мне нужно каким-то образом загрузить на мой сайт файл html с js логикой и css.
Читаю учебник по JS, натолкнулся на строки:
отрицательные значения width/height означают, что прямоугольник «растет» влево-вверх из правого угла.
Вот прямоугольник с отрицательными width и height (например, width=-200, height=-100):
https://learn.javascript.ru/coordinates#koordinaty-otnositel...
Размышляю, как осознанно создать html элемент с отрицательной шириной? В css отрицательное значение не поместишь(да и зачем?). Через transform его можно перевернуть, но значение ширины от этого не поменяется.
Тем ни менее, чувствую автор не врет и ошибки иногда возвращают отрицательную ширину.
Как сделать своё рабочее место удобным и комфортным, а так же повысить свою производительность?
Как Вы предпочитаете писать код?
- В консоли Putty mcedit на веб-сервере под Linux/BSD напрямую
- В Far Manager
- В Eclipse PHP Developer
- Используете ломаный PHPStorm или другой платный редактор (почему?)
Как Вы предпочитаете редактировать файлы?
- Локально, веб-сервер под Windows
- Монтирую сетевую шару под виндой с Linux/BSD
- Использую WinSCP
- Иное решение
Используете ли Вы GIT?
- Да, вместе с github или другим облаком
- Да, вместе со своим локальным (домашним) репозитарием.
- Использую другую систему управления версиями
- Не использую.
Сколько у Вас мониторов?
- Один, переключаюсь вручную.
- Один, использую систему переключения между виртуальными экранами (типа "Куб Рабочих Столов")
- Два
- Более двух (расскажите, как у Вас организовано рабочее пространство)
По настройке Eclipse (при использовании библиотек адаптивной вёрстки, основанных на Bootstrap, находит в них кучу ошибок). Как избавиться? Или это нормально?
Верстаете ли Вы под Internet Explorer или нынче это уже не актуально?
Где почитать о правильной настройке Яндекс.Вебмастер?
Пишете ли Вы stub (заглушки) для проверки (например, для проверки соединения с БД)? Какие инструменты используете для ускорения разработки? Типа, готовые решения CRUD или что-то подобное? Какой JS-фреймворк предпочитаете и почему? Имеет ли смысл оставлять старые версии Bootstrap или лучше как можно скорее переходить на актуальные?
Имеет ли смысл изучать Symfony/Yii2 ? Не ломают ли сделанные на них сайты? Есть ли в этих решениях известные уязвимости? Не имеют ли сайты на таких решениях лишний вес и неповоротливость? Что по этому поводу почитать?
Что лучше использовать для распространения резервных копий?
- Ansible или другую систему управления конфигурациями
- GIT или другую систему управления версиями
- rsync или аналогичное решение
Что порекомендуете по SQL (MariaDB)?
- Что почитать по скорости и отличиям движков Aria и XtraDB (InnoDB)? Имеет ли смысл применение Aria?
- Что почитать по индексам?
Не техническая проблема, но... Как Вы боретесь с прокрастинацией?
Заранее благодарен! Всем добра!
Эх.. Первый пост на данной платформе.
Интересно, получится ли написать что-то интересное?!
Сегодня, хотелось бы создать задаток для будущих постов в данной серии.
Она (серия), повествует, о том, как решил создать свою веб-студию, что из этого вышло на данный момент и выйдет в будущем.
Сразу хочу ответить, что сам по себе - разработчик средней руки.
Имею в стеке HTML5, CCS3, JS, Node.js, PHP, React.js, SQL, PostgreSQL и Kotlin.
Занимаюсь программированием около 3.5 лет и на данный момент, заканчиваю учебное заведение по специальности. С предисловием - всё. Переходим к самому интересному (возможно, что не очень).
Опустим процесс обучения азам и сразу перейдём к моменту получения первого заказа.
Интересно, что успел его выцепить ещё в то время, когда еле-еле освоил азы HTML и CSS.
Как-то гулял по просторам интернета и попал на биржу «Weblancer». Не могу сказать, что она сильно популярная, но в отличие от аналогов в RU сегменте, хотя бы даёт пару бесплатных откликов и возможность получить реальный заказ, а не спамит кучей фейков от ботов.
Тогда, моим максимумом были простенькие landing-page и формочки. Отправив пару откликов на немногочисленные запросы, которые хотя бы в теории мог выполнить, получил один положительный ответ и сразу же упало сообщение в личку от заказчика. Им оказался мужчина из Киева, который занимался перепродажей БУ стиральных машинок. Стоимость работы была мизерная (как и большинство подобных на фрилансе) - около 4000 рублей, но тогда, мне казалось, что это какие-то космические деньги.
Стоит упомянуть, что к моменту сдачи заказа, мы уже успели успешно ретироваться с биржи в Viber и деньги были перечислены напрямую, что в дальнейшем привело к моей блокировке на самой платформе (в целом - не жалею).
Требовался простенький сайт, который должен был включать в себя написанные копирайтером текста и соответствовать заданной стилистике, которая, к слову, была достаточно лёгкой, так как, представляла из себя что-то похожее на сайты прямиком из середины нулевых.
Ох.. Каким же испытанием для меня стала вёрстка этого простенького на данный момент макета и его адаптирование под мобильные устройства. Ушли примерно 2 дня, слёзы, пот, кровь и нервы, но сайт был сделан и функционирует по сей день.
Заказчик был крайне доволен, оставил положительный отзыв и предложил подработать личным репетитором для его сына. Ставку согласовали в размере 500 руб/час (взрыв мозга для меня в 17 лет). Можно ли сказать, что был хорошим репетитором? Думаю, что да, хоть мои знания на тот момент и ограничивались самым базисом, старался подготавливать интересный материал и повторять все необходимые темы к урокам. Потом, парень ушёл на летние каникулы и к сожалению - больше мы не сотрудничали. В этом году, мужчина написал мне в Discord с просьбой помочь разобраться в части кода и мы быстренько разобрали, что там и как. Собственно, больше не контактировали, но опыт оказался интересным и зародил во мне желание найти подобное в будущем.
Долго ждать не пришлось - спустя месяц, упал заказ по вёрстке продающей landing-page под прогнозы на спорт. К слову.. Это был мой первый негативный опыт (кинули), но хочу оставить эту часть истории для отдельного поста. Возможно, что кому-то будет интересно, как избежать подобного и не потерять собственные время, деньги, силы и нервы.
Затем, последовал период проблем в личной жизни и мне пришлось выпасть из всего этого примерно на год. Осознал, что нахожусь в простое и никуда не двигаюсь. Принял волевое решение сутками налегать на документацию и в ускоренном темпе осваивать различные технологии. Так прошло около нескольких месяцев и на меня вышел подрядчик. Мы успели закрыть несколько крупных заказов и несколько landing-page, вошёл во вкус и начал получать удовольствие от профессии - это уже не было таким адом, каким было в момент изучения материала. Сложно передать боль и страдания во время изучения чего-то сложного, когда месяцами не выходишь из дома, смотришь в экран и пытаешься в чём-то разобраться, но предполагаю, что студенты технических ВУЗов смогут понять.
На данный момент, мы до сих пор работаем вместе, да и обрасти новыми связями успел, что не может не радовать, а ручки стали сильными, набитыми (буквально на автомате делаешь то, что требуется).
В какой-то момент, мне надоело просто делать заказы, терять процент с комиссии подрядчиков и играть в сломанный телефон. Из всех возможных идей, самой интересной, оказалась возможность создания собственной студии с командой разработчиков, постоянным потоком клиентов и перспективами масштабирования. Знакомые с набитой рукой, были подняты по единому сигналу сирены, взывающей к общей жажде развития и чего-то нового.
Теперь, я, как и мои соратники по студии, стоим перед бескрайней пропастью возможностей, которая, одновременно пугает и в то же время, побуждает к действию, маня и внушая тот самый энтузиазм, который когда-то, все мы испытывали, взяв первый заказ, впервые открыв документацию, установив WebStorm и написав первую строчку кода.
А вот что же будет дальше, Вы, узнаете из последующих постов, которые, уверяю - будут интересными, объёмными и постараются передать Вам наш опыт.
С Вами был OverCode.
Всех благ и до новых встреч!
Всем привет.
Хочется заняться вплотную frontend-разработкой, но никак не могу подобрать актуальный курс изучения. Очень сильно прошу накидать примерных роадмапов по которым сами учитесь/недавно учились, или же курсы, которые действительно хорошие, а не нашумевший скиллбокс.
Остановился на html и css, javascript упорно не хочет лезть в голову, правда я только 1 курс начинал проходить от Ивана Петриченко.
Я уже предрекаю комментарии в духе "Какой же ты разработчик, если сам не можешь найти материал" или "Еще один прАграмист", но прошу отнестись с пониманием: мне 25, хочу сменить сферу деятельности и пока только это меня привлекает.
Итак, меня сделали админом этого сообщества :) К сожалению, постов тут нет, так что модерировать особо нечего. Старые посты тоже модерировать уже нельзя :)
Попробую исправить ситуацию :) Напишу пост сам и забаню кого-нибудь в комментариях :)
Насколько нелепо большие проекты вы писали на простых бесплатных cms? В моей практике, присутствует интернет магазин с собственным движком и практически годом разработки на wordpress и крупный проект в сфере телекома ( https://irt24.ru/ ).
Проект в сфере телекома, продажа интернет и ТВ тарифов, по сути сайт посредник(диллер) продающий тарифы Ростелекома/МТС и прочих через свой функционал.
На старте функционал выглядел не очень большим, на пару месяцев работы, подумаешь парочка тарифов и не такое делали. Максимум 6-8 месяцев, хотя сроки я не взялся сразу точно назвать.
На практике оказалось, что количество параметров редактируемых у этих тарифов физически в админке выглядит как простыня 1000px на 9000px, это сотни параметров различающихся в зависимости от группы тарифов и обладающие сложными взаимосвязями между собой.
Там где на сайте скромный каталог из четырех разделов, в админке скрыто ещё 10-к каталогов взаимосвязанных друг с другом. Тарифы телевидения содержат каналы, каналы распределяются по пакетам каналов, делятся по тематикам итд.
Стоит подметить, админка wordpress без особых проблем справилась с подобной загрузкой, каталоги весьма удобно распределились в меню, параметры редактирования тарифа органично распределись на всем доступном пространстве экрана администратора.
Один экран, с настройками роутеров(подобные экраны ещё два вверх, несколько вниз):
На самом сайте, разумеется фунционал тоже реализовывался без лишней скромности и с максимальным размахом. Беглый просмотр функционала Ростелекома и МТС по тематике показал крайнюю их узость и отсутствие массы ценных и необходимых пользователю функций.
Зато данные функции в избытке нашлись на американских площадках, откуда и начали щедро заимствоваться, попутно максимально расширяясь и усложняясь.
Так родились карточки генерируемые вплоть до запятой под каждый тариф и даже в мелочах редактируемые через админку, умная корзина позволяющая детально настроить все основные и дополнительные опции для тарифа, разумеется отдельные страницы для каждого тарифа позволяющие сделать тоже самое +дающие развернутое описание опций.
Тарифов оказалось довольно много и им явно нужен каталог для удобной сортировки и подбора нужного. С одной стороны, для этих целей могло хватить обычного каталога со списком тарифов, но это не создает достаточной боли в процессе разработки.
Поэтому был добавлен аяксовый каталог-фильтр поверх основного каталога, позволяющий тыкая параметры(вроде скорости интернета) тут же формировать список подходящих тарифов на странице. Разумеется, необходимо что бы в фильтре остались активны только те параметры которые встречаются среди уже отобранных тарифов.
То есть, если безлимитной мобильной связи среди тарифов со скоростью интернета 500 мб/с нет, то данная опция становится недоступной и мы показываем подсказку почему так произошло.
Впрочем, выше сказанное указывает только на фильтр. Где же каталог? Разумеется, наш фильтр должен уметь переключаться между категориями каталога, причем проверяя сможет ли он это сделать с уже выбранными опциями.
Обязательно, нужно добавить в фильтр возможность подбора по цене, это очень важно. Причем ползунков там должно быть два и оба в режиме реального времени оценивать своё состояние, нельзя прокрутить ползунок в состояние в котором фильтр не найдет тарифа.
Так же, никогда нельзя забывать про мобильные устройства, все должно работать на любом смартфоне/планшете/умном холодильнике(кто знает как жизнь повернется?)
И так, тарифы подобраны, дальше нужно их сравнить. Здесь нужно реализовать функционал сравнения по каждой опции и от щедрой души разрешить сравнивать между собой даже тариф только с интернетом, против тарифа только с ТВ. Вдруг появятся желающие(ценители).
В целом, реализация подобных монстров в одиночку на WP, это довольно спорная идея. Хотя вполне возможно, структура кода тоже получается максимально простой.
Чистый php, общение с базой данных через базовый функционал WP.
Jquery и парочка простых библиотек.
Файлы в коде изолированы по модулям, модуль сравнение содержит все свои стили, скрипты и файлы php шаблонов. То есть, практически автономен, имеет свой css и свой js, не подгружаемые другими модулями. Заметных сложностей с поиском кода не было :)
Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.
Чтобы быстро разобраться в основах можно почитать следующие 3 статьи:
Затем, чтобы погрузиться в детали — можно прочитать статью:
Статья достаточно большая, поэтому лучше её читать постепенно и не один раз. Я читал раза 3 с перерывами и выписал для себя основные моменты:
Браузер отправляет запрос на сервер и получает в ответ текстовый HTML файл с заголовком Content-Type: text/html; charset=UTF-8
Браузер парсит полученный файл и создаёт DOM (Document Object Model)
Браузер считывает CSS из всех ресурсов и строит CSSOM (CSS Object Model)
CSSOM не содержит не визуальные элементы: script, meta, title, …
Для построения CSSOM используются: стандартные стили браузера, авторские стили (которые и пишут разработчики), стандартные стили описанные в W3C CSS и правила каскадного наследования CSS
DOM Tree + CSSOM Tree = Render Tree
Содержит лишь видимые на экране элементы
Именно это дерево использует бразуер для отображения контента, который мы видим в браузере
Процесс отрисовки страницы
Элементы на странице могут перекрывать друг друга (z-index). Поэтому браузер располагает элементы на различных слоях.
Каждый слой может рендериться в отдельном потоке.
Композиция слоёв
Происходит объединение упомянутых выше слоёв
Слои разделены на тайлы, так как композиция слоёв будет происходить при изменении стилей или размеров окна браузера
Все перечисленные выше операции представляют собой Critical Rendering Path (CRP) — последовательность операций, которые необходимо произвести браузеру для отображения страницы пользователю
Парсинг и сторонние ресурсы
Браузер парсит HTML по мере скачивания (не ждёт скачивания всего документа)
Парсинг HTML происходит в основном потоке исполнения JavaScript
Parser Blocking Scripts
Это скрипты, которые приостанавливают парсинг HTML
Если парсер натыкается на тэг script — парсинг приостанавливается и происходит выполнение скрипта
Если скрипт находится в отдельном файле, браузер приостанавливает парсинг, скачивает файл, выполняет его (в главном потоке) и лишь потом продолжает построение DOM дерева
Браузер приостанавливает парсинг, так как мы можем изменять DOM с помощью JavaScript. Иначе мы бы столкнулись с race condition между JavaScript и парсером, ведь JavaScript может модифицировать DOM дерево
Можно использовать async атрибут тэга script, чтобы не блокировать парсер при скачивании js-файла, файл будет выполенен, как только загрузится.
Также можно использовать тэг defer, который работает также как async, но выполнение скрипта произойдёт только когда завершится парсинг
Render Blocking CSS
Построение CSSOM происходит в главном потоке
Построение CSSOM не происходит по мере скачивания (в отличии от построения DOM). CSSOM обновится, когда сторонний файл со стилями будет загружен целиком. Пока стили не загружены, Render Tree не будет обновлено. Поэтому CSS - render blocking ресурс.
В то же время, построение DOM дерева продолжается.
Если парсер натыкается на тэг script, то он будет скачан, но не будет выполнен до тех пор, пока не завершится загрузка файла со стилями. Это важно, так как мы можем манипулировать CSS свойствами через JavaScript. Такой CSS называется script-blocking.
Так как построение Render Tree приостановлено, следовательно и Critical Render Path застопорился, и контент не обновляется.
Чтобы не блокировать рендеринг, необходимо загружать стили как можно раньше, желательно в секции head
Какие статьи помогли вам понять, как браузер рендерит страницу?