Последние посты
dr.Brain
5 июл. 2025 г., 15:13
Почему JavaScript лучше чем TypeScript?Гибкая типизацияДинамические типы JavaScript позволяют сохранять любое значение в переменной без предварительных объявлений. Можно переключаться между числами, строками, объектами или массивами на лету. Эта текучесть особенно удобна при работе с полезными нагрузками JSON.let data = { id: 1, name: 'Alice' }; data = [1, 2, 3];Обработка необработанных данных из API проста благодаря JavaScript Object Notation (JSON) . Вам не придется часто писать шаблонные определения типов или сложные интерфейсы.#frontend #jsdr.Brain
2 июл. 2025 г., 19:54
Почему JavaScript лучше чем TypeScript?Простая настройкаОдно из самых больших преимуществ JavaScript заключается в том, что он изначально работает в браузере и Node.js без компиляции. Можно добавить тег <script> или запустить node script.js, и все готово. Не нужно настраивать tsconfig.json, не требуется готовить сборку, не нужно ждать завершения компиляции.Процесс с нулевой настройкой позволяет запускать быстрые демонстрации и проверять гипотезы.#frontend #jsdr.Brain
27 июн. 2025 г., 18:58изменён
Иллюзия контроляПриступая к новому проекту, обычно мы представляем самый беспроблемный и простой способ достижения цели, не учитывая моменты "Ой, постойте":"Ой, постойте, API изменился" "Ой, постойте, что-то случилось со средой разработки". "Ой, постойти, я не понял логику этой функции"Даже опытные разработчики попадают в ловушку, недооценивая неизвестные факторыВзгляните на закон Хофштадтера :Всегда требуется больше времени, чем вы ожидаете, даже если вы принимаете во внимание закон Хофштадтера Невозмжно победить, не планируя поражение#devdr.Brain
25 июн. 2025 г., 18:55изменён
Мы все говорим:Это займет всего пару часов... а через неделю все еще отлаживаем приложение...Оценка необходимого времени - тяжкий груз разработчика, независимо от того, являетесь ли Вы фрилансером, частью команды или руководите разработкой проектов.Мы продолжаем совершать одну и ту же ошибку: оцениваем задачи так, словно знаем будущее#devdr.Brain
23 июн. 2025 г., 19:28
Как оптимизировать CSS?Удаляйте неиспользуемый CSSВы когда-нибудь проверяли, какой объем кода CSS на самом деле использует Ваш сайт?Такие инструменты, как PurgeCSS и UnCSS, позвол неиспользуемые правила CSS, анализируя ваш HTML. Это особенно полезно, если вы используете большие фреймворки, такие как Bootstrap или Tailwind.#frontend #cssdr.Brain
20 июн. 2025 г., 17:42
Можно ли использовать Tailwind CSS с другими фреймворками? Tailwind CSS можно интегрировать с другими фреймворками: Vue.js, React, AngularTailwind CSS дружелюбен к мобильным устройствам? Tailwind CSS разработан с учетом принципов mobile-first, это упрощает реализацию адаптивного дизайна.Можно ли создавать пользовательские компоненты с помощью Tailwind CSS? Можно создавать пользовательские компоненты с помощью служебных классов Tailwind, сохраняя единообразие дизайна во всем приложении Vue.js.#frontend #css #tailwind #tailwindvuedr.Brain
19 июн. 2025 г., 15:52
Что нужно знать о Tailwind Vue1. Настройка конфигурации Tailwind Tailwind позволяет выполнять обширную настройку через файл tailwind.config.js, в котором можно настроить темы, размер экрана и многое другое.2. Режим JIT включите режим Just-In-Time (JIT) для быстрых итераций дизайна и меньшего рабочего объема CSS, настроив tailwind.config.js:module.exports = { mode: 'jit', purge: ['./index.html', './src//.{vue,js,ts,jsx,tsx}'], // other configurations }3. PurgeCSS обязательно настройте PurgeCSS в настройках Tailwind, чтобы удалить неработающие классы CSS в рабочей среде и сохранить небольшой объем финальной таблицы стилей.4. Плагины У Tailwind CSS есть богатая экосистема плагинов, способных улучшить разработку, предоставляя дополнительные функции: формы, типографику и утилиты соотношения сторон.dr.Brain
15 июн. 2025 г., 16:56
Начало работы с Tailwind Vue1. Создайте новый проект Vue.js (используя Vue CLI)vue create my-tailwind-vue-app2. Перейдите в папку Вашего проектаcd my-tailwind-vue-app3. Установите Tailwind CSSnpm install -D tailwindcss postcss autoprefixer4. Создайте файлы конфигурации Tailwind и PostCSSnpx tailwindcss init -p5. Добавьте Tailwind в свой CSS , включивследующие строки в src/assets/styles.scss или в любой другой основной файл CSSdr.Brain
13 июн. 2025 г., 17:42
Что такое Tailwind Vue?Tailwind Vue является интеграцией Tailwind CSS в приложения Vue.js.Vue.js - прогрессивный фреймворк JavaScript для создания пользовательских интерфейсов. В сочетании с Tailwind CSS он позволяет разработчикам быстро создавать визуально привлекательные и интерактивные приложения, сохраняя при этом чистую кодовую базу.В Tailwind Vue, можно использовать подход Tailwind, ориентированный на утилиты, вместе с реактивной природой Vue.js. Это эффективное и мощное сочетанием для современной веб-разработки.Основные преимущества использования Tailwind Vue1. Скорость разработки: с помощью служебных классов разработчики могут стилизовать компоненты непосредственно в разметке, ускоряя процесс разработки.2. Настройка: Tailwind предоставляет большие возможности настройки, позволяя легко расширять стандартную тему в соответствии с требованиями проекта.3.Адаптивныйdr.Brain
11 июн. 2025 г., 18:30
CSS трюкиЗначение атрибута: attr()С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдоэлементами:<h2 class="title" data-count="01">Section</h2> <h2 class="title" data-count="02">Section</h2> <h2 class="title" data-count="03">Section</h2>.title { font-size: 35px; letter-spacing: 3px; }.title::before { content: attr(data-count); font-size: 1.2em; color: steelblue; margin-right: 10px;dr.Brain
9 июн. 2025 г., 18:18
CSS трюкиПсевдоэлемент ::selectionПсевдоэлемент ::selection позволяет применить стилm к части документа, который был выделен пользователем, например, с помощью мыши:p::selection { color: white; background-color: green; }#frontend #cssdr.Brain
6 июн. 2025 г., 17:42
CSS трюкиСписки и счетчикиСчетчики CSS позволяют вам настраивать внешний вид контента в зависимости от его расположения в документе.<ul class="list"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul>li { font-size: 40px; margin-bottom: 20px; counter-increment: li; }dr.Brain
4 июн. 2025 г., 19:21
Нужные элементы HTML5Подписи к изображениям: <figure> и <figcaption>Обычно разработчики реализуют подписи к изображениям с помощью элементов <div> или <p>, но в HTML5 для этого есть специальные элементы:<figure> <img src="chart.jpg" alt="Sales chart for Q2 2025"> <figcaption>Fig.1 - Company sales increased by 25% in Q2 2025.</figcaption> </figure>Элемент '<figure>' предназначен не только для изображений. Его можно использовать для любого контента, на который можно сослаться как на единое целое:<!-- Code snippet with caption --> <figure> <pre><code> function greet(name) { return Hello, ${name}!; } </code></pre>dr.Brain
3 июн. 2025 г., 18:41
Нужные элементы HTML5Семантическое время: <time>Обычно дату и время выводят с помощью текстовых элементов, но в HTML5 для этого есть специальный тег:<p>The article was published on <time datetime="2025-05-20">May 20, 2025</time>.</p>Атрибут datetime позволяет указать дату в стандартизированном формате (ISO 8601), понятном для машин, а также отображать ее в удобном для пользователя формате.Это полезно для поисковых систем, извлекающих точную дату, а также для браузеров или расширений, которые могут предлагать такие функции, как добавление событий в календари.Вы можете использовать <time> для различных форматов даты и времени:<!-- Just a date --> <time datetime="2025-05-20">May 20, 2025</time><!-- Date and time --> <time datetime="2025-05-20T14:30:00">2:30 PM on May 20, 2025</time>dr.Brain
1 июн. 2025 г., 20:26
Нужные элементы HTML5Семантическое выделение: <mark>При выделении текста большинство разработчиков используют span с фоновым цветом. Но в HTML5 для этого есть специальный элемент:<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>По умолчанию браузеры устанавливают желтый фон, но его можно изменить:mark { background-color: #fff9c4; padding: 2px 4px; border-radius: 3px; }Это особенно полезно для результатов поиска:const searchTerm = "HTML"; const content = "HTML elements are the building blocks of HTML pages.";dr.Brain
30 мая 2025 г., 17:30
Нужные элементы HTML5Результаты расчетов: <output>При создании калькуляторов или интерактивных форм большинство разработчиков используют элемент div для вывода результата. Но в HTML5 для этого есть специальный элемент:<form oninput="result.value = parseInt(a.value) + parseInt(b.value)"> <input type="number" id="a" value="0"> + <input type="number" id="b" value="0"> = <output name="result" for="a b">0</output> </form>Атрибут for создает связь между входными и выходными данными. Это помогает программам чтения с экрана понять, что выходные данные являются результатом конкретных входных данных.#frontend #htmldr.Brain
27 мая 2025 г., 18:02изменён
Нужные элементы HTML5Автозаполнение: <datalist>Возможность автозаполнения является основой современных вебформ. Большинство разработчиков обращаются к сторонним решениям, но в HTML5 для этого есть встроенный элемент:<input list="browsers" name="browser" placeholder="Choose a browser"> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Edge"> </datalist>Это дает вам возможность ввода текста c предложением вариантов по мере его набора, дополненную как возможностью выбора из списка, так и вводом целиком собственного текста.Интересным вариантом использования является создание палитры цветов с именованными цветами:<input type="text" list="colors" placeholder="Choose a color"> <datalist id="colors">dr.Brain
25 мая 2025 г., 18:19
Нужные элементы HTML5Аккордеон: <details> и <summary>Аккордеоны используются везде - это часто задаваемые вопросы, сведения о продукте, панели настроек... Чаще всего разработчики ищут решенеи на JavaScript, но в HTML5 для этого есть собственные элементы:<details> <summary>Развернуть</summary> <p>Этот контент разворачивается и скрывается без JavaScript!</p> </details>Это все, что нужно. Браузер обрабатывает функционал переключения, атрибуты доступности и навигацию с помощью клавиатуры.Вы можете оформить элементы в соответствии со своими потребностями:details > summary { list-style: none; }details > summary::before {dr.Brain
24 мая 2025 г., 19:56
Нужные элементы HTML5Модальные окна: <dialog>Вы начинаете новый проект и встречаетесь с необходимостью добавить модальный диалог.Ваше первое действие... JavaScript, React, Vue? Вы делали это бесчисленное количество раз.Но в HTML5 есть элемент, специально разработанный для этой цели:<dialog id="myDialog"> <h2>This is a Native Dialog</h2> <p>No JavaScript frameworks required!</p> <button id="closeDialog">Close</button> </dialog><button id="openDialog">Open Dialog</button>Конечно, для обработки действий открытия и закрытия модального окна все-таки потребуется немного JavaScript:dr.Brain
21 мая 2025 г., 19:16
Вы чувствовали себя глупцом, изучая программирование?Не секрет, что научиться писать качественный код сложно, но не стоит на этом зацикливаться. Гораздо лучше считать, что программирование - вызов, Это позволит изменить отношение с "код — это боль" на "код — это вызов".Действительно, программирование - это вызов, квест, в котором герой отправляется на поиски сокровищ, сталкивается с различными проблемами, а иногда даже с огромным и пугающим монстром.Никто не знает всего, мы учимся по ходу дела, и программирование — это вызов, в котором всегда можно стать лучше#мнение
