CSS *

Каскадные таблицы стилей

28 дек 2023 в 17:268.2K

Как растянуть элемент #code на оставшуюся ширину?

<!DOCTYPE html>
<html>
    <head>
        <title>Code Editor</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="panel">
                
            </div>
            <div class="tips">
                <p>tips</p>
                <hr>
            </div>
            <textarea id="code">
                
           </textarea>
        </div>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}

body {
    background: #202020;
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.panel {
    width: 100%;
    height: 5vh;
    background: #2d2d2db2;
}

.tips {
    width: 30%;
    height: 100%;
    background: #303030;
    z-index: 100;
}

.tips p {
    color: #202020;
    padding: 1.5vh;
}

.tips hr {
    background: #202020;
    border: 1px solid #202020;
}

#code {
    background: red;
    width: 100%;
    height: 100%;
}

-4

nin-jin

25 дек 2023 в 05:016.5K

Веб-разработка * CSS * $mol *

Препарируем Tailwind CSS и находим родовые травмы

Бандлинг лишь используемых стилей, но..

Тормоза при любой динамике.
Раздутый HTML.
Крайне слабая кастомизация стороннего кода.
Сложный массовый рефакторинг.
Куча стилей компонента в одну строку.

Копилка благодарностей: https://boosty.to/hyoo

nin-jin

19 дек 2023 в 18:218.7K

Веб-разработка * CSS * ReactJS * TypeScript * $mol *

Препарируем StyleX и находим родовые травмы

Решение от большой компании, но..

Раздутый как CSS, так и HTML, и даже JS
Несемантичный CSS и HTML
Околонулевая типизация без автодополнения
Много бойлерплейта
Зависимость от Babel
Тормозная сборка
Сложная отладка

Копилка благодарностей: https://boosty.to/hyoo

nin-jin

16 мая 2023 в 18:562.8K

CSS *

Нам обещают эффективную компиляцию utility-css ради высокой скорости, но получаем мы дикие тормоза на ровном месте.

ris58h

24 апр 2023 в 16:083.9K

CSS * JavaScript * Текстовые редакторы и IDE *

Если вы используете бесплатную IntelliJ IDEA Community Edition, то из поддержки JS и CSS там только весьма скудная syntax highlighting only подсветка синтаксиса, но есть простой способ её улучшить.

В этом нам поможет плагин TextMate Bundles, который уже встроен в современных версиях IDEA. В этом плагине уже встроены бандлы для JavaScript и CSS, причём, с достаточно неплохой подсветкой синтаксиса. Загвоздка в том, что эта подсветка не работает из коробки, т.к. её перекрывает та самая syntax highlighting only подсветка.

Чтобы всё заработало, идём в Settings > Editor > File Types и удаляем File name patterns для CSS (syntax highlighting only) и JavaScript (syntax highlighting only). Тоже самое можно проделать и для SQL (syntax highlighting only).

Пример было/стало для JavaScript:

К сожалению, это не даёт подсветку синтаксиса для CSS и JavaScript встроенных в соответствующие HTML тэги.

+10