Made in HTML/CSS
1.49K subscribers
732 photos
39 videos
2 files
657 links
Научись классно верстать и создавать сайты благодаря Made in HTML/CSS.
По рекламе - https://t.me/ZilantTG
Download Telegram
Vue, согласно Google, называется фреймворком для разработки программного обеспечения на JS. Он был создан в 2012 году. Разработчиком Vue выступает один из работников Google.

Популярность к этому фреймворку пришла в 2015 году – после твита Тейлора Отвелла – создателя одного из наиболее популярных PHP-фреймворков (Laravel).

VueJS, согласно Google, широко применяется в разработке самого разного программного обеспечения.

Vue имеет как сильные, так и слабые стороны. Знание этой информации поможет разработчику понять, когда рассматриваемый инструмент лучше всего использовать в процессе программирования.


🌐 Читать статью

Made in HTML/CSS
👍6🔥3
Элементы <details> и <summary> в HTML создают интерактивные разделы, которые можно разворачивать и сворачивать по клику.

Они идеально подходят для отображения дополнительной информации, такой как FAQ или сложные инструкции, делая контент более доступным и организованным.



Made in HTML/CSS
🔥12
React.js — это JavaScript-библиотека от «Фейсбука»* для удобной разработки интерфейсов, то есть внешней части сайтов и приложений, с которой взаимодействует пользователь.

React.js — это всего лишь способ в удобном виде представить код JavaScript и HTML, сделать его повторяемым и наглядным. Компоненты React.js пишут на особом языке — JSX, который выглядит как смесь JavaScript и HTML.


🌐 Читать статью

Made in HTML/CSS
🔥11👨‍💻1
Деструктуризация с псевдонимами в JavaScript позволяет извлекать значения из массивов или объектов и сразу же присваивать их новым переменным с удобными именами. Это делает код более чистым и понятным, избавляя от необходимости писать многократные присваивания.

Например, вместо того чтобы извлекать
user.name и user.age, можно сразу назначить их переменным username и userAge, что улучшает читаемость и удобство работы с данными.



Made in HTML/CSS
🔥8👍2
Peacock изменение цвета рабочей области в VScode. Идеально подходит, если у вас есть несколько окон или используете VS Live Share.

Имеет обширную документацию и множество вариантов настройки

🌐 Читать статью

Made in HTML/CSS
👍7🔥5
Excalidraw — это мощный и интуитивно понятный плагин для создания рукописных заметок и диаграмм. Он идеально подходит для тех, кто ищет простой и удобный способ визуализировать свои идеи, заметки или процессы. С Excalidraw вы можете легко создавать схемы, блок-схемы, макеты и даже просто рисовать от руки, используя разнообразные инструменты для рисования и аннотирования.

Одной из значимых преимуществ этого плагина - это поддержка совместного редактирования в реальном времени, что делает его отличным инструментом для командной работы и обмена идеями.

Made in HTML/CSS
👍3🔥3
Что такое REST и RESTful API?

REST (Representational State Transfer) — это архитектурный стиль для создания веб-сервисов, который использует стандартные HTTP-методы для обмена данными.

RESTful API — это веб-сервис, построенный на принципах REST, который позволяет клиентам взаимодействовать с ресурсами на сервере через HTTP-запросы.

Основные принципы REST включают:

Клиент-серверная архитектура: Клиент и сервер независимы друг от друга.
Отсутствие состояния (stateless): Каждый запрос содержит всю необходимую информацию.
Кэширование: Клиенты могут сохранять ответы для уменьшения запросов.
Единообразие интерфейса: Стандартный интерфейс упрощает взаимодействие.
Слои: Клиент не знает о внутренней структуре сервера.

RESTful API позволяет выполнять операции с ресурсами (например, получать, создавать, обновлять и удалять данные) через HTTP-методы, такие как GET, POST, PUT и DELETE.

Made in HTML/CSS
👍6🔥1
Что такое специфичность CSS-селекторов и как она работает?

Специфичность CSS-селекторов — это механизм, который определяет, какие стили будут применены к элементу, когда на него действует несколько конфликтующих правил. Специфичность помогает браузеру решить, какие стили имеют приоритет. Вот как это работает:

Инлайн-стили: Наивысшая специфичность (1-0-0-0), перекрывают все внешние стили.

ID-селекторы: Специфичность 0-1-0-0, уникальны для каждого элемента.

Классы, атрибуты, псевдоклассы: Специфичность 0-0-1-0, применяются к группам элементов или по состояниям.

Элементы и псевдоэлементы: Специфичность 0-0-0-1, применяются ко всем элементам данного типа.

Когда несколько правил конфликтуют, браузер применяет стиль с наибольшей специфичностью. Если специфичность одинаковая, применяется правило, которое объявлено последним в коде. Кроме того, ключевое слово !important, добавленное к стилю, имеет наивысший приоритет и перекрывает все другие стили, даже если их специфичность выше.

Made in HTML/CSS
👍7
Colors Interactor представляет собой онлайн-инструмент, предназначенный для работы с цветами в дизайне и разработке. Он может быть полезен разработчикам и дизайнерам по нескольким причинам:

Интерактивное управление цветом: Позволяет пользователям взаимодействовать с цветовыми палитрами, изменяя и настраивая цвета в реальном времени. Это помогает быстро находить подходящие сочетания цветов для проектов.

Генерация цветовых палитр: Сервис может предлагать готовые цветовые палитры или помогать создавать их на основе заданных параметров, что упрощает процесс выбора цветов для дизайна.

Made in HTML/CSS
🔥7
Какие проблемы могут возникнуть при использовании атрибута «defer» для подключения скриптов?

Использование атрибута defer для подключения скриптов в HTML может вызвать несколько проблем, несмотря на его преимущества, такие как улучшение производительности за счет отложенной загрузки скриптов. Вот некоторые из возможных проблем:

Неподдерживаемые браузеры: Старые браузеры могут не поддерживать defer, что приведет к неправильной загрузке скриптов.

Проблемы с зависимостями: Если скрипт с defer зависит от другого скрипта без defer, это может вызвать ошибки.

Отложенное выполнение: Скрипты с defer выполняются после загрузки HTML, но до DOMContentLoaded, что может вызвать проблемы, если скрипт должен выполняться раньше.

Отсутствие поддержки в инлайн-скриптах: defer не работает с инлайн-скриптами(<script> с кодом внутри тега), что может вызвать путаницу, если ожидается их отложенное выполнение.

Made in HTML/CSS
👍5🔥2
CSS Grid Generator - онлайн-сервис, который помогает разработчикам создавать и настраивать CSS Grid Layouts.

Инструмент позволяет быстро создавать сложные сеточные макеты без необходимости писать весь код вручную. Это экономит время и уменьшает вероятность ошибок.

Made in HTML/CSS
🔥7👍1
Задача: "Palindrome Number"

Описание:
Определите, является ли заданное число палиндромом. Число является палиндромом, если оно читается одинаково справа налево и слева направо.

Объяснение:
1) Преобразование в строку: Число преобразуется в строку, чтобы можно было легко работать с его символами.
2) Переворот строки: Используем методы split, reverse и join, чтобы перевернуть строку.
3) Сравнение: Сравниваем исходную строку с перевернутой. Если они равны, число является палиндромом.

Made in HTML/CSS
👍8🔥1
На что нужно обратить внимание при разработке мультиязычных сайтов?

При разработке мультиязычных сайтов на Angular стоит обратить внимание на следующие аспекты:

Использование модуля angular-translate. Он обеспечивает перевод текста и динамическое переключение между языками без обновления страницы.

Асинхронная загрузка файлов перевода. Для этого используется модуль angular-translate-loader-static-files, который поддерживает ленивую загрузку языковых данных, улучшая производительность приложения.
Динамическое управление направлением макета. Для языков с разными направлениями письма (справа налево и слева направо) используется CSS и AngularJS.

Хранение предпочтений пользователя. Для этого применяется модуль angular-translate-storage-local и браузерное localStorage, что позволяет приложению запоминать выбор пользователя и применять его при последующих посещениях.

Подготовка к локализации. Включает извлечение текста для перевода на разные языки и форматирование данных для конкретной локали.

Made in HTML/CSS
🔥5
Glassmorphism CSS Generator предназначен для создания эффекта (кто бы мог подумать) "стеклянного морфизма" (glassmorphism) в веб-дизайне с помощью CSS. Этот эффект придает элементам интерфейса прозрачный, стекловидный вид с размытием фона, что делает дизайн более современным и привлекательным

Made in HTML/CSS
👍5🔥1
Что такое прогрессивная развертка изображения?

Прогрессивная развертка изображения — это метод оптимизации веб-страниц, который улучшает пользовательский опыт и ускоряет загрузку сайта. Вместо ожидания полной загрузки изображения, пользователь видит его с низким качеством, которое постепенно улучшается. Это создает впечатление быстрой загрузки контента.

Преимущества: Быстрое отображение изображения, улучшение восприятия скорости загрузки, повышение удовлетворенности пользователей.

Реализация:
Использование форматов изображений, поддерживающих прогрессивную развертку, таких как JPEG.
Настройка кодирования изображений с использованием атрибутов srcset и sizes.
Оптимизация изображений для уменьшения размера файла без потери качества.

Проблемы:
Потеря качества изображения на начальном этапе.
Увеличение времени загрузки страницы при большом количестве изображений на сайте.
Сложность оптимизации для различных устройств и экранов.

Made in HTML/CSS
👍4🔥1
В статье рассказывается о том, как разместить текст внутри круга с помощью HTML и CSS. Вы узнаете, как использовать свойство shape-outside и другие CSS-техники для достижения этого эффекта. Автор также обсуждает возможные сложности и ограничения, связанные с таким подходом, такие как количество символов, шрифты, размеры и требования к адаптивности.

🌐 Читать статью

Made in HTML/CSS
👍3🔥2👨‍💻2
Что такое прогрессивная развертка изображения?

Прогрессивная развертка изображения — это метод оптимизации веб-страниц, который улучшает пользовательский опыт и ускоряет загрузку сайта. Вместо ожидания полной загрузки изображения, пользователь видит его с низким качеством, которое постепенно улучшается. Это создает впечатление быстрой загрузки контента.

Преимущества: Быстрое отображение изображения, улучшение восприятия скорости загрузки, повышение удовлетворенности пользователей.

Реализация:
Использование форматов изображений, поддерживающих прогрессивную развертку, таких как JPEG.
Настройка кодирования изображений с использованием атрибутов srcset и sizes.
Оптимизация изображений для уменьшения размера файла без потери качества.

Проблемы:
Потеря качества изображения на начальном этапе.
Увеличение времени загрузки страницы при большом количестве изображений на сайте.
Сложность оптимизации для различных устройств и экранов.

Made in HTML/CSS
👍4🔥1
Статья рассматривает значимость развития soft skills в условиях распространения искусственного интеллекта. Автор отмечает, что ИИ быстро совершенствуется и может заменить разработчиков, занимающихся исключительно написанием кода. В связи с этим, инвестиции в soft skills становятся критически важными для сохранения конкурентоспособности и адаптации к изменениям на рынке труда.

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

🌐 Читать статью

Made in HTML/CSS
🔥6
Названия популярных CSS-методологий и их отличия.

OOCSS (Object-Oriented CSS): Основана на разделении внешнего вида элемента и его структуры. Стили максимально абстрагируются, что делает код гибким и переиспользуемым.

SMACSS (Scalable and Modular Architecture for CSS): Использует последовательный подход к разработке, разделяя правила на категории. Это создает четкую структуру проекта и удобно для крупных систем.

ITCSS (Inverted Triangle CSS): Организует стили по уровням, начиная с самых общих. Это упрощает управление зависимостями и подходит для больших проектов.

Atomic CSS: Основана на создании набора классов, которые комбинируются в HTML. Это уменьшает объем кода, делает его более читаемым и позволяет повторно использовать написанные участки.

Utility-First CSS (например, Tailwind CSS): Использует набор утилитарных классов для создания интерфейсов. Минимум кастомных стилей, высокая производительность и подходит для быстрого прототипирования.

Made in HTML/CSS
🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Данный селектор представляет собой комбинацию :has() и :not().

Этот селектор применяется в случае, когда курсор наведен на одного из прямых потомков ul (элемент списка), ко всем элементам списка, кроме наведенного и элементов, перед и после него.


Made in HTML/CSS
👍8🔥6