Автор: admin

Обои Windows 10 для экрана блокировки

Что меня лично очень радует на Windows 10, так это красивые фотографии на экране блокировки. Очень они мне нравятся. Хотелось все время их скачать, чтобы, например, поделиться с кем радостью.
И вот, где они спрятаны:

    1. Найдите папку C:\Users\[UserName]\AppData\Local\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets (для этого у вас должна быть включена видимость скрытых папок и файлов)
    2. Там вы найдете какое-то количество файлов с бессмысленными именами и без расширений.
    3. Скопируйте в удобное для вас место самые крупные из самых последних
    4. Переименуйте скопированные файлы во что-то осмысленное с добавлением расширения .jpg
    5. И вуаяля: красивые фотографии с замечательными видами со всех уголков Земли в вашем распоряжении. При соблюдении прав корпорации MS, конечно.

    Всем добра!

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 компьютерах).

Обрезка текста в 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>

Прозрачность в шестнадцатеричном виде

Если вы используете HEX-нотацию для задания цветов в своих стилях и хотите использовать прозрачность в цвете, то вот простая подсказка, если не хочется пересчитывать прозрачность. Уже все пересчитали за нас: Шестнадцатеричный код цвета для прозрачности от 100% до 0% списком.

Как открыть меню разработчика на реальном устройстве при отладке React-Native

You can use this command from the shell to open react native dev menu
Используйте команду:

adb shell input keyevent 82

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

Дебаг React-Native приложения в браузере

При разработке 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 и все заработает.

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

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