Web разработка


Channel's geo and language: Russia, Russian
Category: Technologies


Самая акутальная информация для web разработчиков
По всем вопросам @haarrp
@channels_telegram - 🔥лучшие ит-каналы
@ai_machinelearning_big_data - машинное обучение
@programming_books_it - бесплатные it книги
@pythonl - 🐍

Related channels

Channel's geo and language
Russia, Russian
Statistics
Posts filter


🖥 Индикатор загрузки на чистом CSS

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

📎 Пошаговое создание индикаторов загрузки


Pure CSS Tic-tac-toe

Игра крестики-нолики. Написана на чистом CSS.

#css

https://codepen.io/ziga-miklic/pen/QWrGyW


Expandable Animated Card Slider

Слайдер с анимацией расширяющихся карт при клике на слайд. Реализован с помощью jQuery и Owl.carousel.js.

#js

https://codepen.io/yudizsolutions/pen/wvzrPoj


Устроиться ВК за два дня: Weekend Offer для бэкенд
разработчиков

VK строит суперапп Почты Mail.ru и ищет коллегу, готового улучшать пользовательский опыт: интегрированные сервисы, технологии искусственного интеллекта, персонализация контента. С такими задачами вы прокачаете свои скиллы и познакомитесь с крутыми профессионалами из смежных команд. За одни выходные — познакомитесь с тимлидами, узнаете о работе, побываете на всех этапах собеседований и, возможно, присоединитесь к команде. Срок подачи заявок истекает 15 марта в 12:00.

Подать заявку

#web #code

@htmlcssjavas


Video is unavailable for watching
Show in Telegram
Совет по CSS 💡

Используя color-mix() или синтаксис относительных цветов, мы можем динамически изменять прозрачность любого цвета.

@htmlcssjavas


🔥 Лучшие бесплатные курсы Javascript

Читать

@htmlcssjavas


Video is unavailable for watching
Show in Telegram
💡Совет CSS и JS💡

Этот вариант теперь работает во всех браузерах и поддерживает настройки движения через CSS и JS

Размытый текст при выходе?

@ keyframes fade {
to { opacity: 0; filter: blur(2rem); }
}
h2 {
animation: fade;
animation-timeline: view();
animation-range: cover 40% cover 85%;
}

Как насчет круглой формы на прокрутке? Это анимированный клип-патч

@ keyframes unclip {
to { clip-path: ellipse(220% 200% at 50% 175%); }
}

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

.content {
clip-path: ellipse(220% 200% at 50% 300%);
animation: unclip both linear;
animation-timeline: --article;
animation-range: entry;
}

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

@ keyframes scale-down {
0% { scale: 5; }
}
img {
animation: scale-down;
animation-timeline: --article;
animation-range: entry;
}


⚒️ Reatom — высокоэффективный logic/state manager, предлагающий простые абстракции и мощные инструменты для создания как маленьких виджетов, так и крупных SPA.

Недавно был выпущен reatomResource, новый API для простого и эффективного управления ресурсами. Совместим с другими асинхронными API: withDataAtom, withStatusesAtom, withRetry, withCache.


Circular Corner Borders 3D Hover Image (CSS Only) - Эффект при наведении на карточку, выполненный на чистом CSS, без использования JavaScript

https://codepen.io/TheMOZZARELLA/pen/OJOOVVJ

@htmlcssjavas


🖥 Django начало работы

Video


FigDart — мост между Figma и Flutter для разработчиков

FigDart — это плагин для Figma, созданный для ускорения разработки и оптимизации рабочего процесса в Flutter

Он позволяет легко конвертировать стилизацию из Figma в повторно используемый код Dart, обеспечивая бесшовный переход от дизайна к разработке

В будущем планируется добавление функциональности для конвертации компонентов Figma в Flutter-виджеты

Стоимость: #бесплатно

#Figma #Flutter


Best CSS Button Generator — генератор олдовых стилей кнопок на CSS

Сервис предлагает удобный интерфейс для дизайна кнопок, которые легко интегрируются с различными фреймворками и библиотеками

Вы можете выбрать из 30+ предопределённых стилей или цветовых тем, которые затем можно легко настроить, чтобы они соответствовали интерфейсу вашего сайта

Стоимость: #бесплатно

#CSS #web


Search: новый HTML-элемент в 2023

Статья рассматривает новый семантический элемент в стандарте HTML, предназначенный для разделов страницы, используемых для поиска или фильтрации.

#статья #html


Form Builder — инструмент для создания форм без написания кода

Утилита достаточно интуитивна, к тому же позволяет создавать формы для сбора данных без необходимости писать код

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

Стоимость: #бесплатно

#формы #no_code


Код, написанный на 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 #веб


Утечки памяти в JavaScript

Авторы рассмотрели распространённые типы данной проблемы, а также рассказали, как использовать инструменты разработки Chrome, чтобы найти их.

#javascript #безопасность


⚡️Маст-хэв список для программистов, каналы с последними книжными новинками, библиотеками, разбором кода и актуальной информацией, связанной с вашим языком программирования.
Лучший способ получать свежие обновлении и следить за трендами в разработке.

Машинное обучение: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
C#: t.me/csharp_ci
C/C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Devops: t.me/devOPSitsec
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
Rust: t.me/rust_code
Javascript: t.me/javascriptv
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Linux: t.me/+A8jY79rcyKJlYWY6
Big Data: t.me/bigdatai
Хакинг: t.me/linuxkalii
Тестирование: https://t.me/+F9jPLmMFqq1kNTMy
Java: t.me/javatg

💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy

Папка машинное обучение: https://t.me/addlist/_FjtIq8qMhU0NTYy

📕 Бесплатные Книги для программистов: https://t.me/addlist/YZ0EI8Ya4OJjYzEy

🎞 YouTube канал: @uproger' rel='nofollow'>https://www.youtube.com/@uproger

😆ИТ-Мемы: t.me/memes_prog

🇬🇧Английский: t.me/english_forprogrammers


CSS Selectors/Combinators Classifier — классификатор селекторов и комбинаторов CSS

Он предназначен для организации и выделения селекторов и комбинаторов CSS по типам

Особенностью инструмента является возможность быстро и эффективно группировать и классифицировать селекторы CSS, что помогает упростить процесс написания и отладки CSS-кода

Стоимость: #бесплатно

#CSS #web #code


Video is unavailable for watching
Show in Telegram
Используем background-attachment, чтобы прикрепить фон к области просмотра👇

card {
background: radial-gradient(circle at var(--x) var(--y), ...);
background-attachment: fixed;
}

➡️ Полный пример здесь.

#css #tip by Jhey


SnipCSS — инструмент для извлечения CSS из веб-компонентов

С его помощью буквально в пару кликов можно извлечь HTML, CSS и изображения, связанные с определённым элементом на любой веб-странице, превращая его в повторно используемый веб-компонент

При этом вы также можете заменить любой авторский текст, изображение и SVG на данные, сгенерированные AI, или иконки под лицензией MIT

Стоимость: #бесплатно (но есть платные тарифы)

#CSS #web #code

20 last posts shown.