Автор: admin

Стиль для внешних ссылок

Ссылки, ведущие на другие сайты, со страниц вашего сайта (внешние ссылки) можно стилизовать несколькими способами. Например, добавляя к таким ссылкам отдельный CSS-класс.

Но можно обойтись исключительно средствами CSS! Для этого используем селектор атрибута.

/* <a href="//google.com">External link 1</a> */
/* <a href="https://google.com">External link 2</a> */
/* <a href="http://some-site.example">External link 3</a> */

a[href*="//"]:not([href*="your-site-address.name"]) {
    /* any styles you want */
}

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

a[href^="http"], a[href^="//"] {
    /* any styles you want */
}

See the Pen mdrGxMx by Sergey Kirichenko (@oknechirik) on CodePen.

Полезные функции в CSS, о которых хорошо бы знать. Часть первая. CSS-функция attr.

В CSS, как это ни странно, есть свои функции. Например, функция для задания цвета rgb. Но сейчас не о ней.

CSS-функция attr

Функция attr() возвращает значение атрибута на выбранном элементе. Это позволяет нам получить значение атрибута и использовать для, например, свойства content выбранного элемента.

Вот пример.

<a href="http://example.com">Example</a>

a:after {
    content: ' (' attr(href) ')';
}

See the Pen abmLzea by Sergey Kirichenko (@oknechirik) on CodePen.

GAP/GRID-GAP и Flexbox

Если вы вдруг не знали, то знайте: Firefox применяет свойство grid-gap для flex-контейнеров.

Для меня это оказалось неожиданным именно из-за именования. Grid в названии вроде как указывает на применимость для grid-контейнеров. Вероятно, поэтому это свойство и переименовали в просто gap.

Свойство экспериментальное и сейчас поддерживается только в Firefox.

Обои 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% списком.