Разработка — CSS Guru http://starhack.ru Верстка сайтов, использование CSS, Javascript, jQuery, веб-разработка Mon, 11 Jan 2021 13:03:16 +0000 ru-RU hourly 1 https://wordpress.org/?v=5.7.7 No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/ http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/#comments Sun, 30 Sep 2018 21:00:44 +0000 http://starhack.ru/?p=1169 Could not resolve all dependencies for configuration ':app:_debugApk'. > A problem occurred configuring project ':react-native-version-number'. > No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android Ключевое … Читать далее No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android]]> Проект на React Native (RN). Прилетело обновление NDK, ничтоже сумняшеся обновился. Запустил сборку yarn android. �?… тыква :(

A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugApk'.
   > A problem occurred configuring project ':react-native-version-number'.
      > No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android

Ключевое здесь
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
Дело в том, что mips64el-linux-android теперь deprecated.
Чтобы решить проблему, надо скачать одну из предыдущих версий NDK. Распаковать скачанный архив и заместить содержимое директории C:\Users\UserName\AppData\Local\Android\Sdk\ndk-bundle (вероятное место расположения SDK на Windows компьютерах).

]]>
http://starhack.ru/no-toolchains-found-in-the-ndk-toolchains-folder-for-abi-with-prefix-mips64el-linux-android/feed/ 1
Обрезка текста в React-Native http://starhack.ru/obrezka-teksta-v-react-native/ http://starhack.ru/obrezka-teksta-v-react-native/#respond Sun, 23 Sep 2018 21:00:02 +0000 http://starhack.ru/?p=1162 Читать далее Обрезка текста в React-Native]]> В React-Native, как и в CSS, есть возможность обрезать текст, если он не помещается. �? даже сделать это более гибко. Если в CSS пока есть только возможность добавить три точки в конце строки (через свойство text-overflow), то в React-Native вы можете указать, где эти три точки будут: в начале строки, в конце или в середине! Но есть небольшое замечание: узел Text должен быть непосредственным потомком узла View. Вот пример кода:

Вот так не работает
<View>
  <Touchable>
    <Text numberOfLines={1}
             ellipsizeMode="middle"
    >{attachment.name}</Text>
  </Touchable>
</View>
А вот так все хорошо!
<View>
  <Touchable>
    <View>
      <Text numberOfLines={1} //указываете допустимое количество строк для текста
               ellipsizeMode="middle" //место, где будет разрыв текста в три точки (возможно указать 'head', 'middle', 'tail', 'clip'. 'clip' только для iOS)
      >{attachment.name}</Text>
    </View>
  </Touchable>
</View>
]]>
http://starhack.ru/obrezka-teksta-v-react-native/feed/ 0
http://starhack.ru/codepen-io-v-ie11/ http://starhack.ru/codepen-io-v-ie11/#respond Tue, 18 Sep 2018 10:02:09 +0000 http://starhack.ru/?p=1158
Codepen перестал поддерживать �?Е11. Очень жаль, было удобно быстро что-нибудь перепроверить по верстке.

]]>
http://starhack.ru/codepen-io-v-ie11/feed/ 0
Placeholder по-русски http://starhack.ru/placeholder-po-russki/ http://starhack.ru/placeholder-po-russki/#respond Tue, 21 Aug 2018 14:50:32 +0000 http://starhack.ru/?p=1154

Чем заменить слово placeholder в описании задачи по-русски?

— Окнечирик (@oknechirik) August 21, 2018

]]>
http://starhack.ru/placeholder-po-russki/feed/ 0
Как открыть меню разработчика на реальном устройстве при отладке React-Native http://starhack.ru/kak-otkryt-menyu-razrabotchika-na-realnom-ustrojstve-pri-otladke-react-native/ http://starhack.ru/kak-otkryt-menyu-razrabotchika-na-realnom-ustrojstve-pri-otladke-react-native/#respond Mon, 20 Aug 2018 11:47:10 +0000 http://starhack.ru/?p=1146 You can use this command from the shell to open react native dev menu
�?спользуйте команду:

adb shell input keyevent 82

�?ли просто хорошенько встряхните аппарат :)

]]>
http://starhack.ru/kak-otkryt-menyu-razrabotchika-na-realnom-ustrojstve-pri-otladke-react-native/feed/ 0
Дебаг React-Native приложения в браузере http://starhack.ru/debag-react-native-prilozheniya-v-brauzere/ http://starhack.ru/debag-react-native-prilozheniya-v-brauzere/#respond Mon, 09 Apr 2018 14:21:06 +0000 http://starhack.ru/?p=1141 При разработке React Native приложения удобно отслеживать изменения с помощью браузера. Включить это возможность на эмуляторе можно так:

    1. Ctrl+M
    2. Debug JS remotly

Откроется вкладка Chrome, в консоли которой вы сможете видеть свои console.log, ошибки etc.

Но по умолчанию открывается вкладка с адресом http://10.0.2.2:8081/debugger-ui. Точнее по такому адресу не открывается. Замените на http://localhost:8081/debugger-ui и все заработает.

]]>
http://starhack.ru/debag-react-native-prilozheniya-v-brauzere/feed/ 0
Interaction Media Features http://starhack.ru/interaction-media-features/ http://starhack.ru/interaction-media-features/#respond Fri, 03 Nov 2017 10:54:25 +0000 http://starhack.ru/?p=1131 Читать далее Interaction Media Features]]> Interaction Media Features — это тип медиа-запроса в стилях. Определяет каким путем пользователь может взаимодействовать с вашим приложением.
Простой способ разделить стили для устройств с различными типами взаимодействия, например, тач-устройства и десктоп, управляемый мышкой.
Сейчас во многих интерфейсах управляющие элементы показываются только при наведении курсора мыши по событию :hover. Но на тач-девайсах такое событие отсутствует как класс. И вот тут нам как раз пригодится рассматриваемый медиа-запрос.
Вот простой пример кода:
HTML

<div class="parent">
  parent
  <div class="child">child</div>
</div>

CSS

.parent:not(:hover) .child {
  /* здесь мы указываем показывать child элемент только при наведении на parent'а */
  display: none;
}
@media (hover:none) {
  .child {
/* а тут указываем, что child должен быть виден на устройствах, где hover отсутствует */
    display: block!important;
  }
}

И таким образом мы покажем пользователю с тач-устройством то, что на ему недоступно без события :hover.
И живой пример на codepen.

See the Pen Interaction Media Features by Sergey Kirichenko (@oknechirik) on CodePen.


Для проверки работы медиа-запроса откройте инспектор и переключите вид на мобильное устройство.
Toggle device toolbar

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

]]>
http://starhack.ru/interaction-media-features/feed/ 0
Верстка на атрибутах элементов и ИЕ11 http://starhack.ru/verstka-na-atributax-elementov-i-ie11/ http://starhack.ru/verstka-na-atributax-elementov-i-ie11/#respond Wed, 01 Nov 2017 06:38:37 +0000 http://starhack.ru/?p=1122 Читать далее Верстка на атрибутах элементов и ИЕ11]]> CSS предоставляет нам возможность использовать не только классы, элементы и ID, но и атрибуты. При этом у атрибута может быть свое значение. И по этому значению мы можем применять к элементам разное оформление. На нынешнем проекте я попробовал использовать такой подход. Для разметки на flexbox я создал в стилях вот такие конструкции:

[layout] {
  display: flex;
}
[layout="column"] {
  flex-direction: column:
}

И так далее и тому подобное для использования возможностей flexbox.
А потом решил посмотреть на всё в Internet Explorer 11.
Сказать, что ничего не работало, не могу. Но все работало настолько удручающе медленно, что пользоваться интерфейсом было почти совершенно невозможно.
Немного технических деталей о проекте.
Это SPA на Angular 1x. Идет медленная миграция на React. Для стилей изначально использовали SASS, сейчас переписываем на PostCSS. Графические ресурсы в виде SVG.
Когда ИЕ11 начал подтупливать, я списывал это на большое количество JS и медленность Angular. Но когда простейший hover эффект стал отрабатывать с задержкой в секунду и более я таки решил посмотреть на вкладку Производительность, что встроена в отладчик ИЕ11.
К своему большому огорчению увидел, что основное время ИЕ11 тратит на расчёт и перерасчёт стилей :( На каждый элемент разметки, а их на странице очень много (списки, таблицы etc), ИЕ тратил от 2 до 4 десятых секунды!!!
И я стал искать.
И интернет подсказал, что проблема может крыться в использовании атрибутов для написания стилей.
В одной из статей на подобную проблему автор привел и пример своего решения. У них тоже в продукте использовался Ангуляр, и чтобы не перелопачивать кучу шаблонов для удаления атрибутов и замены их аналогичными по содержанию классами, автор написал несколько директив, которые просто добавляли классы элементам, у которых были атрибуты.
HTML

<div layout></div>

JS

module.exports = ['layout', /* @ngInject */ () => {
    return {
        restrict: 'A',
        controller: /* @ngInject */ ($element,$attrs) => {
            if($attrs.layout === 'column') {
                $element.addClass('layout-column');
            } else {
                $element.addClass('layout');
            }
        }
    }
}];

И вот такая замена стилей на атрибутах на обычную верстку на классах снизила нагрузку на расчет стилей почти на порядок: теперь для расчет стилей уходило от 1/100 до 1/10 секунды на элемент. 1/10 это тоже немало, но таких элементов немного и это обычно неизвестные ИЕ11 теги, которые неизбежны, когда продукт построен на ангулярных компонентах. Вот таких например:

<grid-item ng-repeat="file in files"></grid-item>

В общем и целом вывод таков: пока жив ??Е, не стоит отказываться от рекомендаций по производительной верстке. ??спользовать классы и не использовать атрибуты и элементы, особенно со многими вложенностями.
А я пока продолжу искать узкие места в своей верстке, чтобы окончательно привести ИЕ 11 в чувство.

]]>
http://starhack.ru/verstka-na-atributax-elementov-i-ie11/feed/ 0
http://starhack.ru/safari-browser-kak-ie6-nashix-dnej/ http://starhack.ru/safari-browser-kak-ie6-nashix-dnej/#respond Wed, 11 Oct 2017 07:35:29 +0000 http://starhack.ru/?p=1117 Читать далее Safari browser как �?Е6 наших дней]]> Если вы спросите меня какой браузер сейчас самый сложно поддерживаемый,то я не задумываясь скажи, что это Сафари. Такого количества непредсказуемых багов, как в Сафари, я никак не ожидал.
Это и проблема с градиентами в SVG, если у вас используется тег BASE, и проблемы с flexbox, и некорректная работа с такими единицами измерения, как VH и VW при зуме. Жесть.
UPD. В продолжение темы :)

]]>
http://starhack.ru/safari-browser-kak-ie6-nashix-dnej/feed/ 0
Первый postcss плагин. http://starhack.ru/emify-everything/ http://starhack.ru/emify-everything/#respond Thu, 01 Jun 2017 14:01:24 +0000 http://starhack.ru/?p=1080 Читать далее Первый postcss плагин.]]> В продолжение темы postcss. Если коротко, то я в восторге!
Второй день работы с postcss, и я уже пишу себе плагинчик, для перевода пикселей в EM’ы. Да, вы скажете, что уже есть такое, но дело в том, что в наследие от работы с SASS в стилях осталось много мест с вызовом SASS-функции em($font-size, $context). �? чтобы не менять пока, на время миграции, этот подход, набросал плагинчик, повторяющий подобное поведение.
Не хватает пока, разве что, указания точности в настройках (precision). Чтобы уменьшить количество знаков после запятой.

]]>
http://starhack.ru/emify-everything/feed/ 0