Шпаргалка по CSS
CSSReference.io — это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций:
https://cssreference.io/
#css #веб
CSSReference.io — это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций:
https://cssreference.io/
#css #веб
👍7❤1🔥1
Lighthouse. Руководство по оптимизации сайтов для начинающих
Быстрые сайты любят и пользователи, и поисковики. Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.
В этой статье вы изучите базовые возможности Lighthouse, которые пригодятся каждому начинающему веб-разработчику:
https://habr.com/ru/companies/htmlacademy/articles/585866/
#веб
Быстрые сайты любят и пользователи, и поисковики. Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.
В этой статье вы изучите базовые возможности Lighthouse, которые пригодятся каждому начинающему веб-разработчику:
https://habr.com/ru/companies/htmlacademy/articles/585866/
#веб
❤3👍1
Основные коды состояния HTTP на котиках
Недавно писали про расшифровку большинства самых популярных кодов состояния HTTP. А вот забавный проект, который показывает коды состояния на котиках. Можно использовать в своих проектах — по ссылке с указанием кода сервис отдаёт мем, который наглядно иллюстрирует код ошибки:
https://http.cat/
#инструменты #веб
Недавно писали про расшифровку большинства самых популярных кодов состояния HTTP. А вот забавный проект, который показывает коды состояния на котиках. Можно использовать в своих проектах — по ссылке с указанием кода сервис отдаёт мем, который наглядно иллюстрирует код ошибки:
https://http.cat/
#инструменты #веб
❤1👍1
Что такое ECMAScript и что туда входит?
Наверняка, многие из вас знакомы с языком программирования JavaScript? Так вот ECMAScript — это стандарт JavaScript (и некоторых других языков), который устанавливает правила, синтаксис и другие критерии создания кода. Его ежегодно дополняет сообщество разработчиков.
Самые последние обновления ECMAScript включают в себя новые функции и методы, которые помогают разработчикам писать более гибкий и мощный код. И вот, какие функции были добавлены в ECMAScript в 2023 году: https://tproger.ru/articles/chto-bylo-dobavleno-v-ecmascript-v-2023-godu/
#js #веб
Наверняка, многие из вас знакомы с языком программирования JavaScript? Так вот ECMAScript — это стандарт JavaScript (и некоторых других языков), который устанавливает правила, синтаксис и другие критерии создания кода. Его ежегодно дополняет сообщество разработчиков.
Самые последние обновления ECMAScript включают в себя новые функции и методы, которые помогают разработчикам писать более гибкий и мощный код. И вот, какие функции были добавлены в ECMAScript в 2023 году: https://tproger.ru/articles/chto-bylo-dobavleno-v-ecmascript-v-2023-godu/
#js #веб
👍2
7 CSS проектов для начинающих веб-разработчиков, которые ускорят работу над проектом
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты #веб
@htmlcssjavas
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты #веб
@htmlcssjavas
👍3❤1
7 инструментов для начинающих веб-разработчиков, которые ускорят работу над проектом
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты #веб
В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.
1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.
2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.
3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.
4. Carbon поможет создавать красивые изображения вашего кода.
5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.
6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.
7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.
#инструменты #веб
👍4
Код, написанный на JavaScript, обрабатывается движком. Но как именно это происходит «под капотом» и какие процессы в этом задействованы?
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
В общих чертах и с очень наглядными анимациями
А если решили погрузиться серьёзно, вот огромный цикл статей, которые раскроют внутреннее устройство Java Script лучше любой книги:
1. Обзор движка, механизмов времени выполнения, стека вызовов
2. О внутреннем устройстве V8 и оптимизации кода
3. Управление памятью, четыре вида утечек памяти и борьба с ними
4. Цикл событий, асинхронность и пять способов улучшения кода с помощью async/await
5. WebSocket и HTTP/2+SSE — что выбрать
6. Особенности и сфера применения WebAssembly
7. Веб-воркеры и пять сценариев их использования
8. Сервис-воркеры
9. Веб push-уведомления
10. Отслеживание изменений в DOM с помощью MutationObserver
11. Движки рендеринга веб-страниц и советы по оптимизации их производительности
12. Сетевая подсистема браузеров, оптимизация её производительности и безопасности
13. Анимация средствами CSS и JavaScript
14. Абстрактные синтаксические деревья, парсинг и его оптимизация
15. Классы и наследование, транспиляция в Babel и TypeScript
16. Системы хранения данных
17. Технология Shadow DOM и веб-компоненты
18. WebRTC и механизмы P2P-коммуникаций
19. Пользовательские элементы
20. Паттерны и анти-паттерны
21. JavaScript ES8 и переход на async/await
#javascript #веб
👍3🔥3