• Вы в браузере набрали адрес сайта, нажали Enter. Расскажите максимально подробно о технических процессах происходящих далее?

    Deerenaros
    @Deerenaros
    Программист, математик, задрот и даже чуть инженер
    Действительно, уважаемый. Это слишком. Вряд ли я затрону все тонкости, но попробую наметить примерный путь:

    0) Пользователь вбивает в адресную строку браузера адрес сайта (нажимая клавиши на клавиатуре, которые замыкают определённую дорожку в матрице, по которой происходит определение нажатой клавиши, что через шину USB в какой-то момент передастся OS, где это поймает HID-драйвер и вызовет определённое прерывание, что OS передаст как событие/или_ещё_как в программу, которая вызовет соотвествующую функцию из API менеджера окон, которая изменит содержимое строки и в результате когда-то будет перерисован UI-элемент, а если нажат был Enter, то начнётся следующее).
    1) Браузер вытащит из input'а строку с запросом и посмотрит, похоже ли это на адрес. Если да, то добавит недостающие уточнения (например, http или file протокол, порт и подобные довольно стандартные вещи). Если нет - то скорее всего создаст запрос в поисковую систему, установленную по умолчанию (я более не буду опускаться до таких бессмысленных деталей, как вызовы API-функций, иначе я буду набирать это сообщение ОЧЕНЬ долго). В любом случае на выходе мы по сути получим URL, который надо загрузить. Протокол file:// мы рассматривать не будем, ftp далеко не везде есть, https:// на не хватит вечности, так что остановимся на http, который по сути есть tcp/ip по умолчанию на 80 порту с определённым форматом общения.
    2) Окей, url есть. Теперь нам нужен адрес, к которому обращаться. Так как http это tcp/ip - нам нужен ip адрес. Здесь нам помогают dns-сервера. Обычно, нормальный провайдер устанавливает у себя кэш-сервера dns, которые не обращаются по стопицот раз за vk.com к ответственному серверу com-зоны. Давайте не будем отвлекаться на то, как происходит там общение, если что - вот (вики тем хороша, что часто содержит внизу релевантные ссылки). Скажу лишь то, что на выходе мы получаем ip адрес(а).
    3) Имея адрес мы можем запросить страницу. Собственно, всё что после первого слэша - это как-бы параметры для http-сервера: какую именно страницу запрашивать, он всё же не телепат. Конечно, можно было бы немного схитрить и отправить читать про tcp/ip, но ведь существует и shared-hosting. Ограничемся лишь его упоминанием. Собственно, по полученному адресу отправляется GET запрос, который и обрабатывает сервер, находящийся по полученному IP-адресу.
    4) Сервер же, получив адрес, начинает распарсивать строку, медленно вытягивая нужные данные из баз-данных и настроек, выполняются сотни скриптов, иногда делается ещё не одна сотня различных запросов на другие сервера (здесь и разного вида метрики и разного вида HADOOP и т.д.). Пройдя сквозь скрипты и темплейторы в самом конце мы получаем html-страницу, готовую к употреблению. Её-то сервер и отправит в ответе (после заголовков, конечно).
    5) Вот и началось самое интересное. Получив html страницу браузер начинает жутко надругаться над CPU, HDD и GPU, попутно сжирая тонны RAM и мусоря в swap. Виной всему нереальные для полного соблюдения стандарты от небезызвестной w3c.org. Для облегчения многие делают костыли, вроде webkit, а некоторые и вовсе забивают на него и пилят свой стандарт с преферансом и картёжницами (впрочем, в последнее время становиться лучше). Здесь снова начинаются сотни вызовов API ОС, windows manager'а и прочих библиотек, вроде boost, qt или libpng. В ходе работы в RAM строится макет, по которому потом строится нечто вроде PDF (тоже сильно векторный), что, потом, обрабатываясь быстрыми шейдерами на GPU, выдаётся на экран. Опять же, многое пропущено, но вряд ли кому-либо, кроме парня в свитере с оленями, действительно интересно, как работает GDI, DirectX или OpenGL.
    6) Ах да, мы же забыли про тысячи js-скриптов, миллионы картинок и анимации с котиками, а также о таких дополнительных плюшках, как flash-player или java-weblets. В кратце, что js, то и flash и java - это виртуалка, со специальной архитектурой. Они, виртуалки, конечно разные (хотя flash и js довольно похожи, ещё бы - ECMAScript один и тот же). JS - самый интегрированный внутрь браузера, он же и самый медленный чисто визуально (ибо последние два имеют доступ к быстрому GPU), хотя самый быстрый в попугаях. Второй постепенно вымирает и представляет из себя, так же как и третий специальную shared-библиотеку, о которой браузер как-нибудь узнал и которой скармливает специальное содержимое помечанное специальным тегом html. Третий уже почти умер и встречается лишь изредка или в каком-нибудь энтерпрайзед со страшным legacy-базой. Ну здесь из сылок разве только гугл. Ибо сколько всего - даже не сообразишь. Да и вообще, эта тема ещё скучнее GDI, DirectX и OpenGL и к свитеру с оленями требуются ещё очки с толстенными стёклами, дающие стопицот к терпению и задроству над матаном. Если в кратце, то в случае JS, всё что было загружено в память и не думает выгружаться и формирует этакое дерево - DOM, над которым с помощью специального API и происходят модификации. При этом, перед тем как исполниться, весь JS-код компилируется, в нативный для VM байт-код. То же самое в общем-то и со вторым и третьим, разве только они не имеют доступа к DOM и организовать его - дело тех ещё костылей. Ах да, забыл ещё про Silverlight (или как оно там пишется), который сдох, не успев родиться. Так же как и Java, жив в серьёзном энтерпрайзе, не поскупившийся не "дешёвую" поддержку MS.
    7) Ну... А дальше пользователь нажимает на нужную гиперссылку и всё по новой.

    За кадром остались такие костыли, как ajax, websockets и прочая асинхронная ересь. С ней всё в миллионы раз сложнее. И к очкам со свитером потребуется ещё и... а чёрт их знает, что они там ещё носят. Ну да ладно, я искренне завидую тем парням (и девушкам), которые разбираются во всей этой машине. Целиком. Ибо это лишь верхушка айсберга. Разбавленная не лучшей памятью и ужасным гуглом.

    P.S. Не бейте сильно за грамматические и синтаксические ошибки. Спеллчекер приказал долго жить, да и 5 утра как никак.

    UPDATE
    На хабр выложили неплохой перевод дающий некоторое представление, как браузер ругается над памятью и процессором. Хотя и весьма поверхностное,
    Ответ написан
    26 комментариев
  • Какие порекомендуете книги по сетям для веб разработки?

    DDDsa
    @DDDsa
    А я всё-таки порекомендую Таненбаума. Он понятно и увлекательно пишет
    Ответ написан
    Комментировать
  • Как разобраться в темах для Wordpress?

    eholin
    @eholin
    Web-developer (frontend + backend)
    Разобраться со структурой шаблона поможет схема wphierarchy.com - только на английском, на русском полезной информации вообще мало. Лучше уж читать в оригинале.

    Что касается виджетов и т.д. - нужно руководствоваться простым правилом: вся функциональность реализуется только через плагины, в темах может быть лишь оформление. Если делаете тему для паблика - не нужно пихать в неё виджеты, не нужно набивать functions.php кучей кода, который не относится к внешнему виду. Тем более уж не нужно добавлять в тему шорткоды и кастомные типы записей.

    Чтобы было проще разобраться в структуре, читайте Кодекс, возьмите шаблон с underscores.me и разберитесь в нем - там действительно все просто, при этом нет никаких примесей от дизайна, голая логика.

    По поводу подключения сторонних шаблонизаторов - это, ИМХО, извращение. Да, у WordPress нет своего шаблонизатора, но структура темы прозрачна и достаточно логична, если, повторюсь, не набивать тему кодом, который задает именно функциональность.
    Ответ написан
    6 комментариев
  • Как разобраться в темах для Wordpress?

    HeadOnFire
    @HeadOnFire
    PHP, Laravel & WordPress Evangelist
    Читайте WordPress Codex и уроки на Tuts+ в рубрике WordPress.

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

    UPDATE: Есть плагины, которые подключают к WP шаблонизаторы от Laravel, Symfony, тот же Smarty кажется тоже видел. Найти их в родном репозитории не проблема, все они рекламируют, что можно работать с нормальной разметкой для шаблонов. Но сам не пользовался, поэтому подробнее не подскажу.
    Ответ написан
    4 комментария
  • Что читать junior front-end?

    igorperegudov
    @igorperegudov
    Frontend-developer
    Дэвид Флэнаган. Подробное руководство. - мастхев
    Ответ написан
    2 комментария
  • Что читать junior front-end?

    ltalash1
    @ltalash1
    Молодой инвестор с образованием юриста.
    Я бы совтетовал начать с этих книг:

    Дэвид Флэнаган. Подробное руководство.
    Алекс Маккоу. Веб-приложения на JavaScript.
    Стоян Стефанов. JavaScript шаблоны
    Ответ написан
    1 комментарий
  • Какой программой заснять действия пользователя, которые показывают баг в программе?

    platotel
    @platotel
    IT Product Manager
    Именно для этой цели использовала вот эту программу: https://gyazo.com/pro. Вполне может хватить бесплатной версии.
    Ответ написан
    1 комментарий
  • Какой программой заснять действия пользователя, которые показывают баг в программе?

    @ArcadyZherdev
    Я знаю такую штуку.. И мы её активно юзаем. Записывает действия пользователя ну и позволяет делать их replay: https://therootcause.io/
    Хотя там и без реплея столько отладочной информации что уже хорошо..
    Ответ написан
    Комментировать
  • Какой программой заснять действия пользователя, которые показывают баг в программе?

    ThunderCat
    @ThunderCat
    {PHP, MySql, HTML, JS, CSS} developer
    ключевое поисковое слово - скринкаст, выбирайте по удобствам/функционалу.
    Ответ написан
    Комментировать
  • Какой программой заснять действия пользователя, которые показывают баг в программе?

    kpa6uu
    @kpa6uu
    Программист Талибана [Пыхерский Алибаба]
    С помощью Licecap можно делать отличные анимированные изображения с нужным фпс
    www.cockos.com/licecap
    Ответ написан
    1 комментарий
  • Какой программой заснять действия пользователя, которые показывают баг в программе?

    @WayMax
    gif хорошего качества (на которых видно ваши действия, а не размытые пятна) весят намного больше чем видео сжатое кодеком H264.
    Ответ написан
    Комментировать
  • Почему разрабатываемый мной сайт делает сторонние запросы?

    @PavelFokeev
    pavl1k.ru
    Может это какой-нибудь плагин хрома? Справа должно быть написано, что инициировало запрос. Отключайте подозрительные плагины (или откройте режим инкогнито) и проверьте ещё раз.
    Ответ написан
    1 комментарий
  • Есть ли php компилятор для css?

    @BorisKorobkov Куратор тега PHP
    Web developer
    У меня только один вопрос: зачем все это?
    1. Если хотите изначально писать структурированный CSS - используйте LESS, Sass, ZUSS или подобное.
    2. А если уже есть куча разных CSS, то просто слейте их последовательно и минифицируйте. Или у вас прямо такой идеальный сайт, что надо экономить трафик на "спичках" (сотню байт)? Тогда похвастайтесь, мы поучимся у вас.
    Ответ написан
    Комментировать
  • 16 лет. Идти во фриланс или начинать junior'ом в конторе?

    DevMan
    @DevMan
    на галеры. в смысле в контору.
    если контора нормальная:
    1. быстрее подростешь в проф.плане
    2. увидишь/поймешь как устроена разработка ПО
    3. прокачаешь коммуникационный скил

    а потом уже можно на фриланс, если захочется свободы.
    Ответ написан
    Комментировать
  • Почему не работают glypicons Bootstrap?

    thewind
    @thewind
    php программист, front / backend developer
    Правильно писать glyphicon, у вас буква h пропущена. Проверьте
    Ответ написан
    2 комментария
  • Оптимизация загрузки изображений по url

    AterCattus
    @AterCattus
    Люблю быстрый backend
    Одним потоком через curl_multi_init можно хоть несколько сотен картинок скачивать.
    Ответ написан
    Комментировать
  • Что изучать верстальщику и в каком порядке?

    webirus
    @webirus
    Тыжверстальщик! Наверстай мне упущенное...
    Пишу по порядку, как реально нужно.

    Поиск по Тостеру, так как схожие вопросы задаются минимум 2-3 раза в неделю.

    адаптива не знаю, он у нас и не требуется

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

    про бэм и препроцессоры что-то где-то читал, но тоже не знаю

    Да не используйте, и не учите. Просто теряете время и ресурсы на написание код (или говнокода, не знаю).
    Просто без препроцессоров всё делается долго и нудно, и тяжело структурировать, копаясь в одном файле.
    А так, можете не учить, если хочется заморачиваться %)

    js так же, на уровне скопировал-вставил

    Выскажу свое личное мнение.
    Верстальщик без JS, это не верстальщик, это контент-менеджер со знанием HTML.
    Любой сайт от лендинга до портала требует JS, правда часто делают хрень, напичканную плагинами, даже если требуется 2-3 строки кода. Не нужно подключать плагины там, где оно не нужно и обратная сторона вопроса, не нужно писать свой код там, где можно использовать готовый плагин (не изобретать велосипед).
    Но если есть время, желание и умение, можно писать и свои плагины, для тренировки.

    Верстаем display:table/table-cell

    Тут буду краток. $^*(&%#(*$%($(%&*(*$#&*%($#%)($)^_*()#&@%$ - вырезано цензурой.

    не в одну компанию с такими навыками меня явно не возьмут

    Что мешает заниматься самообразованием?
    Благо живем в 21 веке, в интернете есть любые учебники, тесты, курсы, да чего только нет.
    На крайний случай, можно напросить в подмастерья к какому-нибудь верстальщику (знаю, часто требуются).
    Да, работать придется в основном "за еду", но будет опытный наставник, который скажет - так норм, а так не надо.

    надо изучать с бустрапа сразу

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

    советы от товарищей по цеху, как развивались они и откуда брали инфу

    90% опыта приходит вместе с практикой.
    Можно прочитать 100 учебников и не понять, что это за свойство, а можно один раз применить и сразу понять.
    Нужно просто много и усердно практиковаться. Качать любые шаблоны PSD, верстать, верстать, верстать.
    Сначала простые, трехколоночные сайты. Потом посложнее и закончить каким-нибудь паралаксом.
    Но повторюсь, для обучения минимум плагинов.

    есть ли смысл работать в маленьком городе

    Не знаю, что за город у вас. Скажу про свой. Население около 900тыс.
    В городе порядка 5 топовых студий по созданию сайтов, не считая 2-3 десятков мелких контор.
    Также есть топовые IT компании, но про них говорить не буду, с таким багажом тебя туда пока не возьмут.
    Так что в любом городе есть смысл работать.
    Да и фриланс, удаленную работу никто не отменял.

    вопрос только Москва или оставаться в городе

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

    В общем, резюмируя всё вышесказанное - учись, развивайся.

    Удачи.

    ЗЫ: Недавно на Хабре опубликовали ссылку.
    webmasters.teamdev.com
    Чесслово, проникся. Отличный мануал.
    Ответ написан
    17 комментариев
  • Разработка сайта с использованием git. Как работать правильно?

    zoonman
    @zoonman
    ⋆⋆⋆⋆⋆
    Чтобы решить проблемы, которые у вас существуют, нужно сделать 3 вещи, но планомерно и плавно.
    1. Обучите программистов такой вещи, как git. Подождите с недельку. Затем просто прогоните их по циклу - откати эти изменения. Верните изменения. Ну раз 5, с дедлайном вчера. Все, кто не будет пользоваться git, будут мучаться часами и днями. Напомните им, как легко это делается с помощью git. Повторите испытание через некоторое время. Поставьте ультиматум: git или идите искать новую работу. Кстати, у каждого человека должен быть свой отдельный аккаунт.
    2. Держите репозитарий для проекта целиком. Сделайте отдельные папки для исходников верстки, для собранной верстки и самого сайта. Верстальщики работают со своими папками. Собирают верстку и коммятят собранную верстку в отдельную папку. Программисты через историю коммитов смогут отследить изменения и внести их назад в разработанные компоненты.
    3. Реализуйте автоматизированное развертывание проекта и запретите редактирование файлов через FTP/минуя git.

    Ну а в целом ваша проблема - низкая квалификация кадров. Решается просмотром ютуба и обучением разработчиков. Если кто-то не хочет учиться, немного снижается ставка, а деньги отдаются тем, кто учится. Даже 500 рублей будут отличным мотиватором.
    Ответ написан
    9 комментариев
  • Что мне нужно изучить, чтобы стать настоящим Middle PHP-разработчиком?

    xmoonlight
    @xmoonlight
    https://sitecoder.blogspot.com
    Подскажите что помимо фреймворков, паттернов требуется мне изучить, чтобы в течение 1-2 лет стать твердым миддлом?
    Научитесь обучаться самостоятельно по документации. Пока - больше ничего.
    Ответ написан
    Комментировать