Рубрика «разработка» - 41

Я тружусь в компании Mutual. Она работает в Бразилии, в сфере равноправного кредитования. Мы помогаем заёмщикам и заимодавцам наладить связь друг с другом. Первые ищут хорошие ставки, а вторые — доходы, превышающие то, что может предложить им рынок. Наш продукт применяется широким кругом пользователей, мы работаем в большой стране. В результате наши приложения для iOS и Android, основанные на React Native, загружают на очень разные устройства.

Уменьшение размера React Native-приложения на 60% за несколько простых шагов - 1
Читать полностью »

Что выбрать для анимирования элементов веб-страниц? JavaScript или CSS? Этот вопрос однажды вынужден будет задать себе каждый веб-разработчик. А может — и не однажды.

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

Анализ производительности CSS-анимаций - 1

Так как вы это читаете, я могу предположить, что вы знакомы с JavaScript-анимацией. Поэтому предлагаю исследовать тему CSS-анимации в разных её проявлениях, а так же — предлагаю поговорить о производительности такой анимации.
Читать полностью »

Поддержка CSS-функций сравнения min(), max() и clamp() появилась в Firefox 8 апреля 2020 года. Это означает, что данные функции теперь поддерживаются во всех основных браузерах. Эти CSS-функции расширяют наши возможности по созданию динамических макетов и по проектированию более гибких, чем раньше, компонентов. Их можно использовать для настройки размеров элементов-контейнеров, шрифтов, отступов и многого другого. Правда, веб-дизайнеру, создающему макеты страниц с учётом возможности использования этих восхитительных функций, может понадобиться научиться думать по-новому.

CSS-функции min(), max() и clamp() - 1

Сегодня я хочу рассказать об особенностях этих функций, объяснить всё то, что может оказаться в них непонятным, и привести практические примеры их использования.
Читать полностью »

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

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

Что лучше: подтверждение действия или возможность его отмены? - 1

Несмотря на популярность вышеописанного механизма, использование диалогового окна подтверждения действия — это, в 90% случаев, неправильно. Поговорим о том, почему это так.
Читать полностью »

В ноябре 2019 года люди услышали о первых случаях неизвестной смертельно опасной болезни в Китае. Теперь все знают о том, что эта болезнь называется COVID-19. Видимо, эпидемия навсегда изменила тот мир, который мы знали. Вирус опасен и очень заразен. И человечество пока не особенно много знает о нём. Очень надеюсь, что скоро будет найдено лекарство от этой болезни.

Go, Vue и 3 дня на разработку: система реального времени для мониторинга пациентов - 1

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

VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.

10 расширений для VS Code, без которых я не могу программировать - 1
Читать полностью »

В нашем распоряжении имеется множество компиляторов и других инструментов, позволяющих создавать .wasm-файлы и работать с ними. Количество этих инструментов постоянно растёт. Иногда нужно заглянуть в .wasm-файл и разобраться с тем, что у него внутри. Может быть, вы — разработчик одного из Wasm-инструментов, или, возможно, вы — программист, который пишет код, рассчитанный на преобразование в Wasm, и интересующийся тем, как выглядит то, во что превратится его код. Такой интерес может быть вызван, например, соображениями производительности.

Что внутри у .wasm-файла? Знакомство с wasm-decompile - 1

Проблема заключается в том, что в .wasm-файлах содержится довольно-таки низкоуровневый код, который сильно похож на настоящий ассемблерный код. В частности, в отличие, например, от JVM, все структуры данных компилируются в наборы операций load/store, а не в нечто такое, в чём имеются понятные имена классов и полей. Компиляторы, вроде LLVM, могут так изменить входной код, что то, что у них получается, и близко на него не похоже. 

Как быть тому, кто хочет, взяв .wasm-файл, узнать о том, что в нём происходит?
Читать полностью »

Программист должен решать - 1

Недавно вышла статья, мимо которой я сначала решил пройти, но потом решил написать развернутый комментарий в виде очередной статьи.

Программист должен решать проблемы бизнеса
Программист не должен решать задачи бизнеса

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

Уровни разработчиков

Начну я, пожалуй, с вопросов иерархии и уровней. Раньше я думал, что существует 3 уровня:

Читать полностью »

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

Отложенное применение функционала директив в Angular - 1

В моём случае, так как я много работаю с popper.js, я нашёл библиотеку tippy.js, написанную тем же разработчиком. Для меня такая библиотека выглядела как идеальное решение задачи. Библиотека tippy.js обладает обширным набором возможностей. С её помощью можно создавать и всплывающие подсказки (элементы tooltip), и многие другие элементы. Эти элементы можно настраивать с помощью тем, они быстры, строго типизированы, обеспечивают доступность контента и отличаются многими другими полезными возможностями.
Читать полностью »

Памятка по работе с Canvas API - 1

Доброго времени суток, друзья!

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

Это не руководство по работе с холстом, а лишь демонстрация некоторых из его основных инструментов.

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

Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».

Парочка важных моментов.

Ширину и высоту холста лучше определять с помощью атрибутов:

<canvas width="300" height="300"></canvas>

Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:

const width = canvas.width = innerWidth
const height = canvas.height = innerHeight

Холст и двумерный контекст рисования я определяю следующим образом:

const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')

Довольно слов.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js