В продолжение прошлогодней темы «Кому-нибудь требуется начинающий питонист в подмастерья?

Автор: Lazytech
Дата: 04.05.19

». За год с небольшим поднабрался теоретических знаний и кое-какого практического опыта по части фронтенда.

К примеру, за последние полторы недели по просьбе одного разработчика переделал веб-интерфейс клиентской части одной программы со связки JavaScript + jQuery + Bootstrap на Svelte + Bootstrap. Теперь исходники разбиты на небольшие модули Svelte (ES6+), из Bootstrap используется только CSS (bootstrap.min.css), а в конце для лучшей поддержки старых браузеров код транспилируется из ES6+ в ES5.

Не обошлось без мелких разочарований. Я сначала было прикрутил Sveltestrap (надстройка над Bootstrap, написанная на Svelte). Однако вскоре выяснилось, что верстка на выходе получается не совсем такой (а иногда совсем не такой), как при использовании оригинального Bootstrap. Кроме того, в некоторых случаях было затруднительно — если вообще возможно — прокинуть значения некоторых атрибутов. В общем, пришлось по большей части вернуть на место Bootstrap. А жаль, потому что HTML-разметка со Sveltestrap была лаконичной и выразительной (см. примеры под катом ниже).

	Bootstrap vs Sveltestrap
	Сравните: Modal · Bootstrap <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> Components – Modals ⋅ Storybook <div> <Button color="danger" on:click={toggle}> Open Modal </Button> <Modal isOpen={open} {toggle}> <ModalHeader {toggle}>Modal title</ModalHeader> <ModalBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ModalBody> <ModalFooter> <Button color="primary" on:click={toggle}> Do Something </Button> <Button color="secondary" on:click={toggle}> Cancel </Button> </ModalFooter> </Modal> </div>

По ходу работы не раз и не два возникали проблемы как с логикой, так и с версткой. Я их по большей части решил либо обошел — привет StackOverflow, Mozilla Developers Network, Google Developers и иже с ними.

Переработанное приложение, как и оригинальное, работает и на десктопе, и на мобилах (пока только на Android; для поддержки iOS, возможно, еще придется повозиться, хотя в онлайн-эмуляторе уже малость потестировал).

Добавлю, что недавно еще попробовал поработать с Node.js. Оказалось, что на деле Node чуть ли не проще, чем Python, хотя, казалось бы. Кстати, Python я тоже вспомнил. Написал на нем простенький веб-парсер для своих нужд, а совсем недавно — небольшой текстовый парсер по просьбе одного опытного разработчика (больше для оценки моих способностей, поскольку он наверняка знает Python гораздо лучше меня).

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

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

В продолжение прошлогодней темы «Кому-нибудь требуется начинающий питонист в подмастерья?

Автор: Lazytech
Дата: 04.05.19

». За год с небольшим поднабрался теоретических знаний и кое-какого практического опыта по части фронтенда.

К примеру, за последние полторы недели по просьбе одного разработчика переделал веб-интерфейс клиентской части одной программы со связки JavaScript + jQuery + Bootstrap на Svelte + Bootstrap. Теперь исходники разбиты на небольшие модули Svelte (ES6+), из Bootstrap используется только CSS (bootstrap.min.css), а в конце для лучшей поддержки старых браузеров код транспилируется из ES6+ в ES5.

Не обошлось без мелких разочарований. Я сначала было прикрутил Sveltestrap (надстройка над Bootstrap, написанная на Svelte). Однако вскоре выяснилось, что верстка на выходе получается не совсем такой (а иногда совсем не такой), как при использовании оригинального Bootstrap. Кроме того, в некоторых случаях было затруднительно — если вообще возможно — прокинуть значения некоторых атрибутов. В общем, пришлось по большей части вернуть на место Bootstrap. А жаль, потому что HTML-разметка со Sveltestrap была лаконичной и выразительной (см. примеры под катом ниже).

	Bootstrap vs Sveltestrap
	Сравните: Modal · Bootstrap <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> Components – Modals ⋅ Storybook <div> <Button color="danger" on:click={toggle}> Open Modal </Button> <Modal isOpen={open} {toggle}> <ModalHeader {toggle}>Modal title</ModalHeader> <ModalBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </ModalBody> <ModalFooter> <Button color="primary" on:click={toggle}> Do Something </Button> <Button color="secondary" on:click={toggle}> Cancel </Button> </ModalFooter> </Modal> </div>

По ходу работы не раз и не два возникали проблемы как с логикой, так и с версткой. Я их по большей части решил либо обошел — привет StackOverflow, Mozilla Developers Network, Google Developers и иже с ними.

Переработанное приложение, как и оригинальное, работает и на десктопе, и на мобилах (пока только на Android; для поддержки iOS, возможно, еще придется повозиться, хотя в онлайн-эмуляторе уже малость потестировал).

Добавлю, что недавно еще попробовал поработать с Node.js. Оказалось, что на деле Node чуть ли не проще, чем Python, хотя, казалось бы. Кстати, Python я тоже вспомнил. Написал на нем простенький веб-парсер для своих нужд, а совсем недавно — небольшой текстовый парсер по просьбе одного опытного разработчика (больше для оценки моих способностей, поскольку он наверняка знает Python гораздо лучше меня).

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

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

P.S. Немного потестировал переделанную мною и оригинальную версии вышеупомянутого веб-приложения на мобильных версиях Safari и Chrome для iOS, воспользовавшись этими сайтами:

http://www.responsinator.com/ — очень неплохой бесплатный сервис; при желании можно материально поддержать разработчиков («угостить пивом»).

https://browserstack.com/ — навороченный платный сервис; на разовую пробу каждой виртуальной модели Apple дается ограниченное время.

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