Window.getComputedStyle() of pseudo elements.

Возникла необходимость получить размер псевдоэлемента (:after) в js коде.

Для этого есть простая возможность:

window.getComputedStyle(element, pseudoElt);

Где pseudoElt это строка с именем псевдоэлемента.

Прочитал документацию, примеры смотреть не стал, написал:

window.getComputedStyle(element, 'after');

Проверил в хроме, всё работает. И на этом закончил.

Через некоторое время, что сопутствующая функциональность не работает в Файрфоксе. Расстроился, полез смотреть. Не мог ничего понять, полез искать в сети. В том числе посмотрел примеры из доков. Всего-то, что и надо было это pseudoElt писать, так сказать полностью, вот так:

window.getComputedStyle(element, ':after');

Не хватало двоеточия перед именем псевдоэлемента. Хром же подстроился под пользователя, и понял, что я хотел. Файрфокс, как и всегда, оказался занудой.

Читайте доки внимательнее. Не пропускайте детали. Будьте аккуратнее. Проверяйте в нескольких браузерах.

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

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