CSS *

Обновил Блог!

Ушла эпоха, ушла первобытная романтика и подкупающая искренность прошлого дизайна.

Теперь он новый, свежий, минималистичный и с доработками.

Подробнее в статье

Также буду благодарен, если найдёте баги - пишите о них в комментариях.

Дорогие разработчики, как вы относитесь к работе в стартапах?

Если был опыт работы в них, то на каких условиях вы соглашались работать? Процент от компании или зп? Может и то и другое?

Я делаю стартап и ищу разработчиков в команду, поэтому хочу узнать какие условия могли бы быть интересными для вас

Было бы шикарно, если бы кто-нибудь смог проконсультировать по разработке

Посчитай свой кредит!

Как и обещал в прошлом посте - чуть более серьезный проект:

Калькулятор Кредита

Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.

Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.

Самый быстрый, удобный и красивый калькулятор кредита!

Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.

Наслаждайтесь)

Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!

Вот CodeSandbox

Сделано с помощью библиотеки Fusor

Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)

Предтеча другого, более крупного проекта, который будет потом)

В иконках сайта обновление!

Теперь можно генерировать изображения иконок для сайта самостоятельно (все-таки он теперь генератор).

Работает на GigaChat API - генерирует так себе, так что это скорее для галочки.

Но если будет пользоваться популярностью может куплю токенов по-лучше

@container запросы на основании стилей — давно забытое старое, да и сделано убого.

При взгляде на эту новую технологию вспоминается давно забывая спецификация для @extend, на которую все забили, кроме пары плагинов для PostCSS. Как и та спецификация, эта технология — чуть более сложный миксин или функция, копировать — вставить с условиями. Жаль только, что сделана настолько криво. Я конечно не ожидал от приемников создателей flex и grid чудес, но не настолько же.

1: Срабатывая неявно (достаточно иметь свойство с определённым значением), они делают код похожим на минное поле. Нужно либо помнить все свойства, что вызывают запросы, либо жёстко регулировать их применение (ещё один подводный камень который будет в разработке, очень удобно).

2: Какой мыслант гигысли додумался сделать это на основе контейнерных запросов? Ведь совершенно очевидно, что запрос с названием «container» будет принимать... стили.

Иначе выражаясь — переделывать.

Программеры Vivaldi сделали кривой Dark Mode

(Видео ниже)

Если поднять яркость экрана, то очень бледный цвет виден. Примерно 5% от белого оригинала. Представьте, сколько можно потерять времени, если отлаживать код в Vivaldi. Я отложил примерно сутки с перерывами. Вместо танков. Спасибо, Вивальди.

Вы будете искать потерянные div и span в Vivaldi часами.

CHROME, EDGE не имеют таких проблем.

Больше всего возмущает такой низкий уровень проблемы. То, что сами разрабы (все абсолютно) не пользуются своим собственными продуктами, это уже давно мне известно. И Вивальди здесь впереди всех, лидер этой банды. Они там всей толпой сидят в Светлой Теме, слепят глаза себе и нам. Багов не видят. Могу еще перечислить. У них там система bug-report cкрыта, разумеется. Но их номера давно перевалили за 100 000. Этой информации достаточно, чтобы перестать писать тудой.

Не могу утверждать что через Vivaldi вообще не виден Белый Свет. По крайней мере, color: этого поста -- активно белый. Но у меня нет других мыслей, кроме ихнего кривого Dark Mode.

Я допускаю, что есть более простое объяснение. Жду его в комментах, очень интересно заполнить свои и вивальдовские пробелы. Заранее согласен на свой позор.

Жду разъяснений, в том от числе и от самих Vivaldi :)

P.S. это также видно на YouTube Shorts

Производственный календарь

Мини-сервис, который позволит удобнее выяснить свою ЗП (аванс и оплату)

Открыт к предложениям по улучшению

Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.

Напоминалки и полезные функции для рутинных задач.

Буду рад предложениям, что еще полезного можно добавить)

Как растянуть элемент #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%;
}

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

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

• Тормоза при любой динамике.

• Раздутый HTML.

• Крайне слабая кастомизация стороннего кода.

• Сложный массовый рефакторинг.

• Куча стилей компонента в одну строку.

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

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

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

• Раздутый как CSS, так и HTML, и даже JS

• Несемантичный CSS и HTML

• Околонулевая типизация без автодополнения

• Много бойлерплейта

• Зависимость от Babel

• Тормозная сборка

• Сложная отладка

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

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