Как загрузить макет в zeplin
Перейти к содержимому

Как загрузить макет в zeplin

  • автор:

Как подготовить макет интерфейса мобильного приложения к передаче в разработку?

Или «как сделать вашего разработчика счастливым, а финальное приложение точно сверстанным по макету».

Александр Момотов

Дизайн-кабак

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

Проанализировав свой многолетний опыт работы, я с уверенностью могу сказать, что:

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

Основное, что должен получить от вас разработчик:

  1. Дизайн-макет приложения, выполненный в Sketch, Figma, XD, Photoshop, Illustrator, в виде файла или ссылки.
  2. Дизайн-макет приложения, загруженный в Zeplin, Sympli или другой инструмент для «просмотра макета глазами разработчика», в виде ссылки.
  3. Карту экранов приложения, выполненную в XMind, MS Visio или другом похожем по функционалу инструменте, в виде файла или ссылки.
  4. Кликабельный прототип, выполненный в Marvel, InVision или другом похожем по функционалу инструменте (Sketch, XD, Figma, Framer, UXPin, и пр.) в виде сслыки.
  5. Иконки и иллюстрации использованные в дизайн-макете для всех плотностей экранов в виде файлов: mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi — для Android и @1x, @2x, @3x— для iOS.
  6. Шрифты, использованные в дизайн-макете, в виде файлов.
  7. Видео-файлы со всеми нестандартными анимациями или ссылки на примеры таких анимаций из других приложений.

Немного расскажу поподробней про каждый пункт.

Непосредственно сам макет

Дизайн-макет приложения может быть выполнен в любом удобном вам и вашей команде инструменте. Как правило, это Sketch, XD, Figma, Photoshop или Illustrator. Другие инструменты are fine as well, но лучше использовать что-то популярное.

В чём бы вы ни работали, ещё раз проверьте, всё ли внутри макета в порядке, а именно:

  1. Используются pt в качестве единиц измерения.
  2. Используется сетка 8×8 pt для Android и 10×10 pt для iOS и к ней включена привязка (а не к пикселю).
  3. Все артборды созданы для базового ppi (в @1x или mdpi).
  4. Все артборды, группы и, по возможности, все слои адекватно проименованы («Rectangle copy 59» или «Group 12» быть не должно).
  5. Все иконки и иллюстрации помечены как «exportable» и имеют понятные имена.
  6. Нет пустых или недоделанных экранов, элементов.

�� Зачем это? Это просто контроль качества. Если макет сделан некорректно, то это так или иначе приведет к конфликту или правкам. Лучше сделать хорошо сразу.

Макет для «просмотра глазами разработчика»

Макет нужно загрузить в Zeplin или Sympli. Ну или сгенерировать ссылку для разработчика, если вы работаете в Figma или Sketch.

�� Зачем это? Это делается для того, чтобы разработчик мог посмотреть все спецификации (отступы, размеры, цвета, названия шрифтов и пр.) и при этом не открывать оригинальный файл с дизайн-макетом в редакторе, которого, к слову, у него может и не быть.

Карта экранов

Карта экранов — это изображение, которое отражает в себе все экраны приложения и все возможные переходы между ними.

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

Карту экранов лучше всего рисовать в инструментах для составления mindmap’ов. Мои любимые, например, XMind и MS Visio.

�� Зачем это? Карта экранов поможет разработчику разобраться с логикой приложения. Из нее он сразу получит ответы в стиле «что будет, если нажать на это?».

Кликабельный прототип

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

�� Зачем это? По тем же соображениям, что и карта экранов. Одно можно заменить другим. Но, как правило, кликабельный прототип более нагляден для разработчика и для клиента.

Экспорт иконок и иллюстраций

Нужно экспортировать и разложить по соответствующим папкам все использованные в макете иконки и иллюстрации в формате PNG для всех 6-ти плотностей экранов (mdpi, hdpi, xhdpi, xxhpdi, xxxhdpi) для Android и в формате PNG или PDF для всех 3-х плотностей экранов (@1x, @2x, @3x) для iOS. Также можно использовать SVG, тогда достаточно по одному файлу.

Обязательно все иконки и иллюстрации должны быть адекватно проименованы в соответствии с принципами:

  1. Только латиница.
  2. Вместо пробелов нижнее подчеркивание.
  3. Только нижний регистр.
  4. Для иконок префикс «ic_», для иллюстраций «ill_», для фото «pic_».

Итого, у вас должна получиться следующая структура:

�� Зачем это? Если разработчик будет сам экспортировать иконки, то что-то обязательно пойдет не так. Поедет цвет, иконки станут мыльными и так далее. К тому же, он будет вынужден потратить время на то, чтобы разобраться с тем, как их экспортировать и как назвать, вместо того, чтобы кодить. Лучше избежать этого и сделать всё самому. Тогда разработчик просто скопирует всё в Android Studio или XCode и будет счастлив.

Шрифты

Нужно сложить в отдельную папку все шрифты, использованные в макете. Если это платный шрифт, то ссылку на место, где его можно купить. Но лучше не использовать платные шрифты.

�� Зачем это? Если разработчик будет искать использованные вами шрифты сам, то есть вероятность того, что он найдет не тот шрифт или, например, устаревшую версию шрифта. Лучше всего будет просто потратить 2 минуты и сохранить шрифты отдельно.

Видео с анимациями

Если вы сделали очень клевую нестандартную анимацию интерфейса в After Effects или Principle и хотите её реализовать, то её тоже нужно экспортировать и передать разработчику. Можно как в видео-формате, так и в формате GIF.

Если же вы просто хотите сделать «как вот в этом приложении», то не забудьте положить ссылки на примеры таких анимаций.

�� Зачем это? Если разработчик не увидит вашей анимации, он просто её не реализует и ваша задумка окажется лишь задумкой.

Итого

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

Как загрузить макет в zeplin

Learn how to publish your designs from Photoshop to Zeplin

Getting Started

In order to publish designs from Photoshop to Zeplin, you will need to download the desktop app.

When you download the desktop app, Zeplin automatically installs a plugin on Photoshop. If you’re not seeing the plugin, you can install it manually by following these steps for Mac or Windows.

☝️ It is not possible to publish PSD files directly without using the plugins.

Enabling the plugin

After downloading the desktop app, you can enable the plugin from Photoshop menu up top at “Window > Extensions”.

☝️ If your Mac is running on an M1 or higher chip, the “Extension (legacy)” menu has been disabled by default on Photoshop. You’ll need to enable the "Open using Rosetta" option.

Publishing your designs

To publish your designs from Photoshop to Zeplin:

Select any layer/artboard in your Photoshop file

Open the plugin and click “Export selected artboards

Select your project or styleguide then click “Import” to start the export process

☝️ On the project selection window, you can switch between your workspaces to choose the desired project or styleguide.

��‍♀️ Zeplin has 100 character limit for screen names. If your artboard has a name with more than 100 characters, it’ll be trimmed to 100 in Zeplin.

If you’d like to export your individual layers or groups into Zeplin as assets, you will need to mark them as assets in Photoshop first. You can learn more here.

Seeing file location

Zeplin shows the location of the file containing the screen if you are the same user who exported that screen and using the same machine (computer) used to publish your design. You can directly open the design file in Photoshop by clicking on the file name.

How to export from photoshop to zeplin

Considering this, how do I create a zeplin in Photoshop?

  1. Download the plugin from here.
  2. Unzip it and copy the folder called io. zeplin. photoshop-plugin .
  3. Paste it under Photoshop’s Plug-insGenerator folder.

Furthermore, how do I upload a design to zeplin?

  1. Next, select the artboards you want to upload into Zeplin.
  2. Go to Plugins > Zeplin > Export Selected Artboards.
  3. Select the project to which you want to upload your designs, then click Import.

People ask also, can you export from Photoshop? Open your file in Photoshop. Go to File > Export > Export Preferences. Set your Export preferences, such as format, quality and destination. Now go to File > Export and select Export As… at the top of the menu to export with your saved preferences.

You asked, how do I export from zeplin? Select any layer/artboard in your Sketch file. Press ⌃⌘E or use the menu up top “Plugins > Zeplin > Export Selected…” to start the export process.

Where do I put plugins for Photoshop?

All you need to do is to copy (or drag) the file into the Plug-Ins folder of Adobe Photoshop. The Adobe folder is typically located in Program Files on Windows and in Applications on Mac computers. If you have installed Photoshop in any other location you should look for the Plug-Ins folder there.

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ ⁠ ⁠

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

Добрый день! Сегодняшняя статья даст вам узнать об удобных инструментах при работе с макетами и выбрать подходящий для себя.

Как правило, большинство шаблонов это PSD файлы. И мы, работая с ними в известном для всех Adobe Photoshop, ощущаем его недостатки. Но есть ряд программ, которые облегчают работу с макетами. Мы рассмотрим с вами 4 инструментa для совместной работы дизайнеров и фронтенд-разработчиков. Давайте познакомимся с ними!

Что это за инструменты и как они работают

Это Avocode, Zeplin, Sympli и Marsy. Они нацелены на перевод макета из Photoshop или Sketch в код. Нужно только загрузить макет дизайна и инструменты сделают свою работу.

Эти инструменты позволяют:

• Изучать дизайн, подготовленный в Photoshop или Sketch

• Экспортировать ресурсные файлы для любых элементов

• Получать все необходимые элементы дизайна

Этот инструмент ориентирован в большей степени на веб-разработку.

Прежде чем начать использовать Avocode, нужно зарегистрироваться и получить аккаунт. Avocode не предоставляет бесплатных аккаунтов под один-два проекта, и на знакомство с продуктом у вас будет только 7 дней триального периода. Дальше нужно будет оплатить месячный или годовой тариф, для команды или одного человека.

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

У сервиса есть веб-менеджер и десктопное приложение (рекомендую использовать именно десктопную версию, ведь веб-менеджер ограничен в своих функциях и не даст вам полностью использовать этот инструмент). Avocode работает с макетами в рамках проекта, и первым делом создадим свой первый проект. После нужно загрузить файл. Это можно сделать с помощью Dropbox или с вашего компьютера.

И так, когда мы впервые открываем наш макет в Avocode мы видим схожесть с уже знакомым Adobe Photoshop.

Советую посмотреть видео о Avocode, в нем рассматриваются основные инструменты этого сервиса:

• Удобный и лаконичный интерфейс, с множеством функций и продуманных деталей

• Поддерживает большое количество расширений файлов

• Avocode можно использовать на всех основных платформах (Mac, Windows, Linux)

• Поддерживает веб и мобильные проекты (iOS и Android)

• Нет бесплатного плана, после семидневного пробного периода нужно оформлять платный тариф

Zeplin — еще один инструмент для фронтенд-разработчиков.

Для начала работы регистрируемся на сайте. После регистрации предложат посмотреть базовый курс работы с инструментом. У Zeplin, как и у Avocode есть веб и десктопная версии.

Zeplin не дает загружать файлы на прямую. Для того чтобы начать работать с нашим макетом нам нужно скачать плагин для Photoshop или Sketch. На сайте можно его скачать. Zeplin подробно нам объясняет как установить плагин и впоследствии загрузить макет.

Zeplin отличается простым интерфейсом, он не насыщен лишними функциями, в нем только все необходимое.

У этого сервиса есть большое количество расширений под разные ситуации:

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

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

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

• Минималистичный интерфейс. Ничего лишнего!

• Поддерживает веб и мобильные проекты (iOS и Android)

• Нет интеграции с IDE, и разработчикам нужно вручную переносить все ресурсы из Zeplin в IDE XCode и Android Studio

• Для загрузки файла нужно скачивать плагин

Sympli — это платформа для совместной работы дизайнеров и фронтенд-разработчиков. Включают процессы передачи макетов Photoshop или Sketch, а также импорт дизайна в Android Studio и Xcode. Этот инструмент сильно ускоряет разработку.

Первое, что вы увидите на сайте, будет блок How it works — она расскажет, что нужно знать чтобы работать с этим инструментом. Теперь вы должны зарегистрироваться и создать новый проект.

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

В Symli как и в Zeplin нужно установить плагин для Photoshop или Sketch. Все загруженные макеты появляются в «облаке».

По сравнению с Avocode и Zeplin плагин Sympli для Sketch позволяет экспортировать скрытые ресурсы.

Sympli автоматически сохраняет все цвета и шрифты, которые используются в проекте. Он сам группирует их, а позже эти цвета и шрифты можно использовать в других проектах. Такая функциональность носит название Brandbooks. Эта функциональность полезна, если есть несколько проектов для одного бренда.

Sympli также позволяет выгружать все ресурсы в формате Bitmap или Vector.

Огромная разница Avocode и Zeplin в том, что Sympli предоставляет плагины к студиям разработки Android Studio и Xcode.

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

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

• Пользователям не нужно устанавливать отдельное приложение на локальную машину. Все, что нужно, доступно в многофункциональном веб-приложении

• Поддерживает веб и мобильные проекты (iOS и Android)

• Расширения для XCode и Android Studio позволяют транслировать дизайн прямиком в код

• Дополнительный набор полезных функций, таких как Brandbooks

• Для загрузки макета необходимо установить плагин

Marsy — это инспектор макетов в формате PSD. Сразу первое что мы видим на сайте это видео, которое дает нам краткое понятие, что из себя представляет сервис, его функциональность и особенности. В левой боковой панели мы можем видеть иконку в виде камеры, переходя по ссылке нас ждут обучающие видео по работе с Marsy.

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

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

У Marsy есть бесплатный тариф, но в нем доступна работа только над одним проектом. Из всех предложенных у этого инструмента платные подписки стоят в районе 100-200 рублей в месяц.

ИНСТРУМЕНТЫ ОБЛЕГЧАЮЩИЕ ВЕБ-РАЗРАБОТКУ Разработка, HTML, Frontend, Верстка, Обучение, Видео, YouTube, Длиннопост

Советую посмотреть видео о Marcy, в нем рассматриваются основные инструменты этого сервиса:

• загрузка макета на прямую

• выбор языка (rus/eng)

• работа только с форматом PSD

• функционал сильно ограничен

Советы по выбору сервиса

Avocode отлично подходит для веб-разработки.

Стоит обратить внимание на Sympli, если вам нужна интеграция с XCode или Android Studio. Также рассматривайте этот инструмент, если вы работаете большой командой.

Стоит рассмотреть Zeplin или Marsy, если у вас относительно небольшой проект, функциональности этих сервисов хватает для этого.

Думаю, что Marsy стоит использовать, если вы только учитесь, у вас ограниченный бюджет, вы используете только PSD макеты и у вас нет необходимости в большом разнообразии инструментов. Marsy очень прост в использовании и русифицирован, но лично я всё равно отдавала бы предпочтение Zeplin из этих двух.

Все рассмотренные сервисы предлагают хорошие инструменты для работы с макетами. Avocode, Zeplin, Sympli и Marsy отлично вписываются в процесс передачи дизайна в разработку.

Используйте только лучшие инструменты, чтобы переводить дизайн в код без потери сил и времени!

Сейчас фигма — это как признак хорошего тона, psd-макеты присылают спецы, которые не очень как спецы

Ищу единомышленников⁠ ⁠

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

Вместо тысячи слов, короткое видео (Пикабу мне его обрезал до 3мин зачем-то):

Это мой проект выходного дня. Разрабатываю полностью с нуля, без заимствований кода. Крайне неспешно, вообще без авралов. Делаю так, как нравится самому. Проект образовательный некоммерческий, как показал опыт предыдущей большой игры, сейчас вывести деньги с Гугла — мишшн импоссибле.

На данном этапе разрабатываю механики, т.е. то, чем впоследствии буду оперировать при создании уже самой игры. Сейчас у меня по сути технологическое демо. Мы умеем: ходить, носить вещи, у нас есть инвентарь трех типов, мы умеем грейдить и пробуждать (прокачивать) предметы, генерировать статы (с учетом их веса) на предметах, использовать расходники. У нас правильно считаются характеристики персонажа от надетых вещей, сами вещи корректно отображаются на персонаже. Мы можем в кулинарию и крафт. Можем общаться с НПС, выбирать реплики. Принимать, выполнять и сдавать задания.

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

Куда идем. По задумке, игра будет сюжетная с гринданом и автобоем. Но это не точно.

Проект мобильный, мультиязычный. Выходить будем в GooglePlay и ряде зарубежных локальных издателей (сейчас веду переговоры с Южной Кореей по своей предыдущей игре). AppStore учетки у меня нет.

Так вот. Я бы с удовольствие пригласил поучаствовать в проекте заинтересованных в геймдеве людей, с опытом и без. Тех кто давно хотел попробовать, но не знал с чего начать. В первую очередь дизайнеров. Хоть я и фулстак.

Ищу единомышленников Gamedev, Разработка, Инди, Unity, RPG, Обучение, IT, Видео, Без звука, Длиннопост

. но склоняюсь больше к коду, а дизайн у меня хромает на обе ноги. В перспективе будет написание сценария, диалогов. Нужно будет работать со звуком. Придумывать механики врагам. Рассчитывать баланс. Переводить на разные языки. Рисовать арты, модельки, анимации. Ставить режиссуру кат-сцен. Придумывать названия, в конце концов. В общем, были бы руки, дело найдется. Возраст неважен, нужен ответственный подход к делу и желание. Со своей стороны обещаю поддержку, буду делиться знаниями, уж какие есть. В каких-то аспектах будем учиться вместе. Мой стаж — 3 года Unity и несколько релизных проектов.

Как держать связь подумаем вместе, заинтересованных просьба отписаться на unity.pikabu@hotmail.com. Если вообще будут отклики, заведем общий чат в Скайпе (вот такой я динозавр).

Спасибо за внимание.

Анонс бесплатного курса "Командная строка для разработчиков"⁠ ⁠

По нашему опыту, современному backend-разработчику неплохо бы понимать Linux на каком-то уровне. Свои мысли насчёт того, зачем разработчику Linux, мы недавно оформили в виде статьи, вызвавшей особо бурные обсуждения.

Кто-то считает, что без линукса действительно никуда. Кто-то считает, что разработчику и в винде комфортно. Кому-то наши примеры показались выдуманными. Кто-то нашёл примеры очень жизненными.

На наш вкус, линукс полезен, но существует непростая проблема высокого порога входа. Есть либо огромные книги вроде Advanced Bash-Scripting Guide, либо фрагментарные статьи совершенно разного уровня качества, либо различные курсы. Курсов много разных, но у нас своё видение. Как в классическом комиксе про стандарты:

Анонс бесплатного курса "Командная строка для разработчиков" IT, Linux, Обучение, Ubuntu, Курсы, Онлайн-курсы, Python, Программирование, Разработка, Длиннопост

Сообщество любит отправлять новичков читать мануалы, что мега-полезно, но довольно непросто. Кстати, на курсе мы разберём, как читать man-ы.

Наша мотивация по созданию курса

Мы довольно давно готовим молодых python-разработчиков, и начинаем именно с базовых знаний в Linux, прививая желание и умение работать в терминале. Вдохновляясь курсом «Поколения Python» на степике, мы решили сделать свой бесплатный курс «Командная строка для разработчиков», посвящённый терминалу Linux, языку bash и базовому администрированию. Начинающим разработчикам поможем преодолеть неловкость перед текстовым терминалом, опытным разработчикам покажем неочевидные и полезные в работе фишки для увеличения продуктивности.

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

Подробнее о курсе

Курс сильно завязан на практику, поэтому обязателен компьютер с линуксом в каком-то виде. Мы предлагаем три варианта:

Ubuntu в качестве гостевой операционной системы. Для этого в системе виртуализации (virtualbox, VMWare или любой другой) поставить Ubuntu.

Ubuntu в качестве основной операционной системы. Годится любой Linux-дистрибутив или даже macOS.

Ubuntu в WSL2, он же Windows Subsystem for Linux.

Начало курса неспешное и подходит совсем для начинающих. При этом мы обращаем внимание на важные детали, на которые часто никто не обращает внимание. Например, когда выбирать короткие, а когда выбирать длинные флаги команды? Есть ли разница между ls -al, ls -la и ls —all?

Примерная структура курса

Модуль 1. Пользуемся Ubuntu. Осваиваем терминал

Введение в курс.

Перемещаемся по файловой системе.

Работаем с файловой системой.

Редактор текста, работаем с файлами. Создаём и запускаем скрипты.

Процессы, знакомимся с PID, ps | grep и конвейером.

Используем ctrl-r и работаем с историей команд. Алиасы.

Модуль 2. Программируем в Ubuntu. Основы Bash

Bash для разработчика, несколько занятий. Полезные однострочники на примере изменения формата файлов, сортировки в разных вариациях.

Всё про поиск — конкретных файлов, поиск внутри файлов .

Виртуальная файловая система proc. Используем proc, PID, PPID, дескрипторы стандартных потоков, файловые дескрипторы, аргументы командной строки, подменяем PATH. Переменные окружения (как они работают, область и время действия), в том числе PATH и HOME. Спецсимволы < > >> 2> 2>> &>.

Работаем с учётными записями в Ubuntu. Разграничиваем права доступа.

Применяем sudo и root. Немного про безопасность, проблемы копирования из терминала, про пакеты, которые ставятся курлом.

Добро пожаловать на курс «Командная строка для разработчиков»! Введение и первое занятие уже доступно.

Интереса ради, мы спросили ChatGPT, нужен ли линукс для питонистов.

ChatGPT о важности Linux для python-разработчика

Python-разработчикам может быть полезно использовать операционную систему Linux в своей работе по ряду причин.

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

Во-вторых, многие инструменты и библиотеки для Python, такие как NumPy, SciPy и Pandas, часто предназначены для работы в Linux-подобных операционных системах. Разработчики, которые используют эти инструменты, будут иметь преимущество, если они работают на Linux.

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

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

В целом, использование Linux может значительно улучшить производительность и эффективность работы Python-разработчика, поэтому знание и опыт работы с этой операционной системой могут быть ценными навыками для разработчика.

Как считаете, правы ли нейросети?

На волне / Работа / Начал сегодня обучение с нуля⁠ ⁠

На волне / Работа / Начал сегодня обучение с нуля Работа, Волна постов, Битрикс, Профессия, Frontend, Обучение, Новая жизнь

Ещё один бизнес-процесс в три ночи, сон, выгулять собаку и иду обучаться по фронтенду в 36, хоть меня в нем и не ждут)

Был электромонтером по высокой стороне, кабельщиком, мастером по ремонту, гитаристом в Сephalic Impurity, печатником, верстальщиком, менеджером, . — работа такая штука

Повторится ли история с промышленной революцией в мире IT?⁠ ⁠

Стремительное развитие нейронных сетей заставляет задуматься многих представителей(или будущих представителей) IT-профессий о том, есть ли вероятность того, что меня заменят?

Да, сеньор и миддл разработчиков может рассмешить данный пост, ведь нейронные сети не имеют такого же опыта, они не умеют работать в команде и тем более мыслить дальше, чем заданный запрос. Софт-скиллы важный навык для любого программиста, но интеграция ChatGPT в разработку может помочь с написанием более мелких частей кода или с разъяснением некоторых аспектов для джунов, чтобы те не бежали и не отвлекали своих коллег с большим опытом по разным глупым моментам(тем же синтаксисом).

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

Во времена промышленной революции поднялся большой шум, много людей потеряли работу из-за станков, но тут вопрос в другом, станки заменили людей которые занимались ручным трудом или же люди, которые научились пользоваться этими станками?

Оставлю этот вопрос открытым и задам еще один.

Мне хотелось бы узнать у опытных программистов, которые читают этот пост, пользуетесь ли вы ChatGPT в своей работе?🤔

Левел дизайн гоночной трассы⁠ ⁠

Как делать трассу для игр про машины? Я не смог найти эту информацию в интернетах, поэтому с радостью делюсь с вами своим опытом. Уникальный контент получается)

Все бы тебе тараканов гонять по монитору, сын. #1⁠ ⁠

Сижу я значит как-то в аэропорту Внуково, рейс отложили, и дай думаю скачаю себе на телефон игру такую, чтоб рпг, да с автобоями, и чтобы не пять чибриков было как во всех идлах, а 1 и с системой прокачки. Искал, искал и не нашел ничего внятного, ну вот совсем. Плюнул, ладно думаю, демоны, сам сделаю!

И ведь сделал бы. Вот только был ма-а-аленький нюанс, игр то я никогда ни делал, рисовать не умею, а знакомство с программированием ограничено 2-мя уроками Python на рандомном сайте, и десятком решеных задачек на Сodewars.

Чтож, решено. Открываю значит я урок 3, и что вы думаете? Урок 3: Пишем текстовый квест!

Ну вот же оно. Это ли не знак?

Так input(), print(), ну понятно погнали.

Все бы тебе тараканов гонять по монитору, сын. #1 Программирование, Gamedev, Обучение, Python, Разработка, Длиннопост

Значит что имеем:

Все бы тебе тараканов гонять по монитору, сын. #1 Программирование, Gamedev, Обучение, Python, Разработка, Длиннопост

Система боя с критами, блоком, скоростью атаки, уворотом, промахом. — чек
Генерация этажей/мобов — чек
Пассивные способности — чек
Активные способности — чек
Характеристики — чек.
Сохранение/Загрузка — чек
Генерация итемов разной рарности с модами — чек.
Магазин — чек
Состояния (горение, переохлаждение, шок, яд) — чек

Все бы тебе тараканов гонять по монитору, сын. #1 Программирование, Gamedev, Обучение, Python, Разработка, Длиннопост

Все бы тебе тараканов гонять по монитору, сын. #1 Программирование, Gamedev, Обучение, Python, Разработка, Длиннопост

Все бы тебе тараканов гонять по монитору, сын. #1 Программирование, Gamedev, Обучение, Python, Разработка, Длиннопост

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

Играние в игру преимущественно осуществляется посредством нажатия на кнопки принятия решений (зеленая и красная), в зависимости от принятого решения игрок получает очки «безумия» либо очки «хладнокровия». По достижению 20 очков получает статус «Берсерк» либо «Манчкин» соответственно. Каждый статус дает свои плюшки сам по себе (к примеру у Берсерка растет урон при падении хп, а Манчкин с некоторой вероятностью находит дополнительно золото на привалах), количество и качество которых растет с увеличением очков безумия либо хладнокровия. Так же пассивки получают разные бонусы в зависимости от вашего статуса и количества очков.

Бои проходят на автомате, единственное влияние это активные заклинания. У заклинаний имеется ощутимый кулдаун, который в половину величины распространяется на другие заклинания, к примеру «Восстановление» имеет кулдаун 16сек, и соответственно при касте уводит в кд другие скиллы на 8сек . Поэтому тут надо четко прикидывать что и когда кастовать. Алсо заклинания вместо маны жрут ресурс «осколки душ» который также является деньгами.

Все остальное это поиск билда и прокачка характеристик, выбор и прокачка пассивок, выбор активок, и подбор итемов под билд.

Чего не имеем:

Графониум — не чек. Непонятно будет ли. В целом идеи как это реализовать на киви есть, нет особо времени. Возможно займусь после того как закрою остальные моменты. В принципе все сообщения в окне боя: это вызовы опр. функции генерирующей сообщения, при желании можно в нее передавать запрашиваемую анимацию/спрайт.
Интерфейс — не чек.(30%)
Контент — не чек. (пока готовы 10 этажей с боссом)
Сюжетка — пока только в голове(не чек)

Что в планах:

Ограничить количество смертей до 10.
Сделать сохранение платным и доступным только в конце этажа. (цена этаж*20)
Сделать магазин доступным только в конце этажа.
Добавить кристаллы с рандомными перманентными усилениями в магазин, усиление роллится после активации, в момент покупки различаются только силой и ценой.
Добавить несколько активок вызывающих горение, переохлаждение, шок.
Добавить в генерацию предметов мод на +% урон к огню/яду и.т.д.
Добавить несколько пассивок работающих с состояниями.(шансы/сила/доп/эффекты)
Доделать меню создания персонажа(возможно добавить расы с бонусами)
Дорисовать интерфейс.
Окно характеристик, с подробной информацией о персонаже.
Окно развития навыков «Безумия» и «Хладнокровия».
Окно ачивок.(?)
Туториалы и подсказки.
Ладдер таблица(очень далекий план).

Я у мамы вээфыксер⁠ ⁠

Итак, вы захотели делать эффекты для игр. Куда бежать, с чего начать?
Осторожно! Огромное количество ссылок может вызвать эпилепсию.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

1. База

Для начала вам нужно обладать какими-то базовыми знаниями по 3м софтовым направлениям:

Графический редактор (Photoshop, GIMP, Krita)

3D-пакет (Blender, Maya, 3D’s Max, Cinema4D, Houdini)

Игровой движок (Unreal Engine, Unity)

С первыми двумя пунктами все относительно просто:
если не обладаете базовыми знаниями, то, открываете строку гугла и вбиваете “<нзвание_софта> базовые уроки”.

Из редакторов я бы выбрал фотошоп, потомучто он более универсален и по нему больше уроков. Что вы выберете из 3D-пакетов — не столь существенно. Единственное из всего списка хочется отметить Houdini — это самый сложный для старта с нуля в 3D софт, но для позиций Middle VFX Artist и выше вам так и так придется в нём работать 🙂

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

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

Я сам прокачивал своего перса по ветке Unreal Engine, поэтому начнём с него. А так же по этой причине ветка Unity будет выглядеть ампутированной культёй на фоне анриловской (но статья будет ещё дополняться, поэтому я открыт к предложениям ссылок на материалы по Unity эффектам в чате).

Так вот, анрил, и опять же, прежде чем творить красоту, нужно изучить инструмент и основы. Регистрируетесь и скачиваете двиг с офф сайта, и переходите в раздел с обучением, где собраны бесплатные мини-курсы по различным тематикам движка. Ищете основы и проходите пару-тройку таких мини-курсов как эти — Your First Hour in Unreal Engine или Editor Introduction. Помимо основ делаете упор на создание материалов (например вот Materials Master Learning и Material Editor Fundamentals). Эти знания вам пригодятся при создании эффектов.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

Помимо этого есть рускоязычный канал Unreal Engine Rus с большой библиотекой базовых уроков по различным тематикам. Также обратите внимание на канал Мэтью Вадштейна WTF Is?, в котором наглядно можно посмотреть как работать с тем или иным инструментом\нодой в движке. Ну и конечно можно влиться в рускоязычное комьюнити в телеге или международное в дискорде.

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

Что можно сказать про Unity? Так же качается с офф сайта, так же есть раздел с обучением, где можно найти базовые уроки по движку. Так же уделяйте внимание шейдерам. Есть ещё хороший канал со всякими разными вещами, в том числе и базовыми. И есть рускоязычный чат в телеге.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

2. Системы частиц

В двигле разобрались, самое время переходить непосредственно к эффектам. Для начала рекомендую внимательно ознакомиться с этими двумя супер полезными ссылками:

В ссылках представлен материал и по Unity и по Unreal Engine. Ну а мы по традиции начнём со второго. Итак, при создании эффектов в движке зачастую вы будете работать с двумя вещами: редактор материалов и системы частиц. В Unreal Engine на данный момент существуют две системы частиц: старая Cascade и новая Niagara. В идеале неплохо бы знать обе, потому что старые проекты в компаниях скорее всего используют Каскад и, если вы попадете на такой проект только со знаниями Ниагары, то придется в экстренном порядке переучиваться 🙂

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

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

Изучение Niagara я советую начать с этого плейлиста от хорошего спеца Томаса Харле и с этого плейлиста базовых уроков канала GameDev Outpost. Они отлично дополняют друг друга и дают неплохую базу в понимании системы частиц. Также можно собственноручно посмотреть и потрогать примеры систем частиц на уровнях Niagara_Particles и Niagara_Advanced_Particles в проекте Content Examples, который можно найти во вкладке Samples в лаунчере. В нём же, кстати, а также вообще в разделе Samples, можно найти много интересного по базе движка.

Если вдруг имеется потребность в изучении Cascade, то можно с начать с этого официального плейлиста, а далее по ссылкам ниже, в некоторых из них уроки по старой системе. Также в проекте Content Examples можно изучить примеры систем частиц на уровнях Cascade_Legacy_Particles и Cascade_Legacy_Effects.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

Дальше можно двигаться так:

Туториалы от Луоса по эффектам в Cascade и материалам на его канале (вообще весь его канал советую прошерстить, там много полезного и интересного)

Туториалы по Niagara от Art Hiteca, где вы не только будете настраивать модули, но и попрактикуетесь в написании своих

Много базовых и продвинутых вещей по материалам от Бена Кловарда

Хороший контент по материалам в Unreal Engine все от того же tharleVFX

Tips&Tricks в эффектах и системах частиц (и каскад и ниагара) от Саймона, а так же его бомбезный сайт с описанием некоторых визуальных трюков, которые использовались в играх

Канал Jason Keyser на котором куча полезной инфы по эффектам

Крутые туторы по шейдерной логике от техарта Epic Games Taizyd Korambayil. К сожалению, открываются только через веб-архив, но этот гемор того стоит.

Туторы от Janga FX: всплески и серия из трех уроков про огненный прожектайл

Неплохие туторы по эффектам с материалами на канале UnrealCG

Канал выступлений с GDC, на котором можно найти много лекций по визуальным эффектам

А что по Unity?
Сейчас там тоже присутствуют две системы частиц: старая Shuriken (вводник туть) и новая VFX Graph (вводник туть).
Но из каналов с эффектами на Unity я знаю только эти:

Супер клёвый канал Hovl Studio с подробными уроками на русском и украинском

Канал про эффекты в Unity от Gabriel Aguiar

И этот, который уже фигурировал здесь выше. Там тоже есть уроки по эффектам

Канал PolyTools — туторы по эффектам и шейдерам

Принимаю ваши предложения по дополнению этого раздела с уроками по юнити в чате.

Во всей этой суматохе не забывайте про теорию! Терминология в эффектах, принципы создания визуальных эффектов, математика и вектора. А еще неплохо бы пользоваться принципами анимации в своих работах. Можно так же глянуть стайл-гайды стилизованных эффектов для LoL.

Вдохновляться эффектами других людей и вообще всяким разным можно вот здесь:

А еще эффекты можно невозбранно глядеть в превью абилок у персонажей на подобных сайтах: LostArk, LoL, Valorant, Овервочб, Дока 2.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

3. Симуляции

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

Для подобного рода симуляций идеально подойдет Houdini, но, так как он неописуемо сложен, добавлю ещё несколько альтернативных вариантов:

EmberGen — новый пакет для рил-таймовых флюидных симуляций ориентированный на геймдев. Очень функциональная вещь, хотя и до сих пор в активной разработке. Отлично заменяет гудини в изготовлении огня, дыма, взрывов. С симуляцией воды пока никак, но обещают после релиза заняться и ею. Бесплатный 14-ти дневный триал без ограничений можно забрать на офф сайте. Туторы смотреть на офф канале тут, и тут (старый интерфейс) по дефолту с программой ставится около сотни пресетов разных эффектов их тоже можно поковырять, чтобы разобраться. А ещё есть чат в телеге.

Плагины для симуляций для вашего почти любого любимого 3D-пакета. Такие как FumeFX, TurbulenceFD, Krakatoa, RealFlow. Туторы под конкретно ваш пакет и выбранный вами плагин лежат в широком ассортименте в этих ваших ютубах.

Из коробки флюидные симуляции есть в Maya и Blender. К сожалению, сильно не в курсе в каком они там состоянии и с каким функционалом, но для начала возможно может хватить.

Ну и вернемся к любимому Houdini. На офф сайте есть бесплатная урезанная версия для обучения. Начать обучение можно отсюда, отсюда и отсюда. Затем перейти к Энтагме и Houdini по-русски. Ещё вам может очень сильно помочь чат в телеге.

Что касается взаимодействия Houdini и игровых движков:

Очень хорошая серия туторов Houdini for Games от Андреаса Глада. Собрал все выпущенные уроки здесь в одном месте. Делаем сетапы в Houdini, переносим в Unreal Engine. Крайне рекомендуется к просмотру даже если вы не собираетесь пока сильно лезть в гудини.

От него же годный маленький курс на плюре про создание и перенос взрыва из Houdini в Unreal Engine. На сайте вроде есть триальный период, за который можно успеть глянуть курс.

Официальная серия уроков по взаимодействию Houdini и Niagara.

Перенос эффектов с помощью вертексной анимации (VAT) в Unreal Engine и Unity. На текущий момент самая актуальная это версия 3.0, гайды по ней здесь. Но в сети вы можете встречаться с туторами по более ранним версиям 1.0 и 2.0. Они немного отличаются пайплайном, но суть одна и та же.

На Houdini по-русски есть серия уроков (около 20ти штук) про перенос эффектов и всякого в Unity. Жаль нету для серии отдельного плейлиста, но легко находится на канале по превьюшкам, например один из уроков вот.

У Энтагмы есть серия уроков про UE от Матеаса Винкельмана, но там больше для моушен дизайна, чем про эффекты.

А еще есть канал чатика Houdini for Games в котором подобного добра навалом для Unity и UE.

4. Дополнительный софт

Помимо всего вышепречисленного VFX артисты активно юзают Adobe After Effects для эффектов и работы со спрайт-шитами и Substance Designer для процедурной генерации текстур для эффектов.

Для After Effects из полезного могу направить только на полезные бесплатные скрипты: один собирает спрайт-шит из анимации, другой наоборот превращает спрайт-шит в обычную анимационную композицию.

По сабстансу можно начать с этого: Basics of SD for Real-time FX. Также могу отметить паренька, который делает уроки по текстурам для стилизованных эффектов. Хороший канал с уроками так же тут. И этот полезный тред Substance Designer for VFX. А ещё бесплатный мини-курс на артстанции.

Я у мамы вээфыксер Обучение, Полезное, Урок, Unreal Engine, VFX, Real-time, Niagara, Unity, Эффект, Визуальные эффекты, Gamedev, Разработка, Ue5, Unreal Engine 4, Epic Games, Visual effects, Гифка, Длиннопост

5. Не лезь, она тебя сожрёт

Для тех, кто всё ещё хочет, чтобы ему напихали по самые небалуйся ещё, вот дополнительные ссылочки:

Отличный плейлист с уроками по написанию шейдеров в Unity от Артёма Кагарманова

Лекция раз и лекция два от Александра Виноградова про визуальные эффекты

Хороший видос про базовые аспекты и продвинутые штуки в материалах Unreal Engine

Подборка клевых докладов с GDC про эффекты

Сайт Тома Лумана с полезной технической и шейдерной инфой

Тутор про разные типы дисолвов в UE4 от Семёна Альмяшева

Мои весёлые туторы с кеками и в конце плейлиста более серьёзные уже без них (там скоро будут новые туторы, когда-нибудь)

Огромная база уроков по Niagara от Ashif Ali. Но новичкам следует быть осторожными — часто техники, которые он показывает очень неоптимизированы. Поэтому этот канал я рекомендую смотреть, только когда вы уже немного понимаете что нагружает фпс

Твиттер Криса Мёрфи с типсами и триксами по анрилу и эффектам

Подборка лекций и уроков по Ниагаре с официального канала Эпиков

Группа в вкшечке, в которой рассказывают про эффекты, телеграм-канал и, конечно же, телеграм-чат где эффекты обсуждают

Встаём с колен⁠ ⁠

Встаём с колен АвтоВАЗ, Транспорт, Работа, Электромобиль, Инженер, Работа мечты, Разработка, Лада, Обучение, Высшее образование, Конструирование, Инженерия, Вакансии, HH

Что то мне кажется ироничным в том, что инженер который в России делает автомобили, никогда не сможет купить себе автомобиль 🤡

Как браузер рендерит веб-страницу⁠ ⁠

Для фронтенд-разработчиков очень важно знать, как происходит отрисовка веб-страницы на всех этапах: от отправки запроса на сервер до отображения картинки, которую мы видим в браузере.

Как браузер рендерит веб-страницу Javascript, Браузер, CSS, HTML, Производительность, Frontend

Чтобы быстро разобраться в основах можно почитать следующие 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

Какие статьи помогли вам понять, как браузер рендерит страницу?

Как видит задачу фронтенд⁠ ⁠

Если попросить фронтендера разработать линукс

Ответ trdm в «Яндекс и "Цифровые профессии"»⁠ ⁠

Предложу своё видение материалов для начинающего python-разработчика на 2022 год. Есть общая часть для любого backend developer, она же годится для старта в data science и devops.

Сразу скажу, что 80% успеха в изучении — это самостоятельная работа. Ни один курс или преподаватель не сделает из вас специалиста, это доступно только вам. Помочь может размеренное изучение — 1 час изучения каждый день куда эффективнее, чем 10 часов в воскресенье.

Подборка бесплатного материала по python:

0. При погружении в новую область знаний сразу возникает вопрос, куда копать и с чего начать. Ответ можно найти в книгах, обзорных статьях, видео и других источниках. Одним из вариантов визуализации подобных знаний является roadmap. Это такая «дорожная карта» с пометками, что следует освоить. Самым популярным проектом является roadmap.sh. В их github 220к звёзд, настолько это общее место для индустрии. Прописаны roadmap для самых разных специализаций и технологий, в том числе по python. Недавно к каждому навыку они стали прикреплять пачку статей и видео из изучения. Roadmap позволяет выявить пробелы в текущих знаниях и наметить актуальные вопросы для изучения.

1. Классическим хорошим курсом для начала из бесплатных считаются Поколения Python на stepik для начинающих и для продвинутых от школы BEEGEEK. Первые два курса (для начинающих и для продвинутых) бесплатные, третий (для профессионалов) платный, стоит в районе 3к. В каждом курсе порядка 200+ тестов и

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

2. Дополнить текст можно годными лекциями Тимофей Хирьянова из МФТИ.

3. Python: основы и применение на stepik. Тут пространства имён, классы, наследование, исключения, итераторы и генераторы, файловая система, лямбды, pep8, регулярки, немного про http и API.

4. Не питоном единым, поэтому надо ещё и немного в базы. Начинать однозначно стоит с реляционных баз. Можно посмотреть на Интерактивный тренажер по SQL. Тут и про реляционную модель в целом, про запросы, групповые операции, CRUD, и много практики

5. Надо освоить git, достаточно 4 глав из книги Pro Git. Сейчас git без вариантов, у него 97% рынка. Не писать код без локального git-репозитория вообще. Использовать серверный github/gitlab по желанию.

6. Дополнительно можно практиковаться на codewars и leetcode. Берём и решаем по задаче в день. Конкретно leetcode популярен при подготовке к собеседованиям.

7. Для общего развития есть крутой вводный курс в computer science CS50 от Гарварда. Он большой и на английском, начинается с Си и алгоритмов, а дальше про память, структуры данных, python, SQL, HTML, CSS, javascript и даже Flask. Такая сборная солянка. Есть видео-лекции, лабораторные работы с заданиями и всё такое. Говорят, что яндекс.браузер умеет на лету всё переводить, но я не пользовался.

8. Связанный с предыдущим пункт. Без английского нынче никуда. Кто посоветует, как тут можно начать? Мне кажется, что нужны основы языка (база типа грамматика по любому учебнику), а потом много практики уровня «перевод со словарём». Словарный запас всему голова.

9. В современном проекта никуда без тестов. Для python лидером является pytest, могу порекомендовать гайд Python Testing with pytest. Просто, Быстро, Эффективно и Масштабируемо

10. Без linux никуда, все сервера работают на linux. Кто знает хороший гайд для начинающего? Легко сказать «поставь ubuntu и разберись», но это сложно.

11. Без docker тоже никуда. Мне нравится огромный гайд Introduction to Containers в виде 829-страничной презентации. Тут и теория, и практика. Для углубления знаний есть Best Practices.

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

Из книг для более глубокого понимания внутренностей Python рекомендую Лутца (двухтомник, нужно свежее 5 издание 2019-2020 годов). Многие жалуются, что книга тяжёлая для начинающего. Крутой книгой для повышения уровня я считаю Python. К вершинам мастерства Лучано Рамальо (в 2022 году вышло второе издание, лучше его).

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

Постоянным источником материалов может быть телеграмм-канал devfm, где мы разбираем разные нюансы из жизни разработчика на Python и не только. Зачем нужен докер, что такое WSGI, чему стоит научиться в вузе, шаблоны проектирования микросервисов с недавнего highload++. По пятницам у нас культурный код с фильмами, книгами и всяким разным.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *