CodeBase | Frontend
2.14K subscribers
381 photos
150 videos
5 files
569 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
👩‍💻 Псевдокласс :empty

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

👀 Объясню на пальцах

➡️ Не будет пустым следующее содержимое:

🟢другие теги;
🟢текст, включая пробельные элементы (пробел, невидимый пробел, табуляция, переносы строк).

➡️ Будет пустым следующее содержимое:

🟢HTML-комментарии;
🟢текст, указанный с помощью CSS-атрибута content;
🟢псевдоэлементы.

🗣 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.


CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
⚡️ Grunt — Инструмент веб-разработки, который используют для автоматизации повторяющихся задач: сжатие изображений, компиляция CSS и JavaScript, а также линтинг кода.

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

🔵Сложная настройка. Настройка может вызвать затруднение у новичков из-за конфигурационного подхода.
🔵Производительность. Медленнее по сравнению с другими инструментами автоматизации.

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
3
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Developer or Designer? — Стилизованный переключатель с плавной анимацией.

Технологии: SVG, SCSS, TypeScript

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
👩‍💻 Обёртка String

String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:

🟡поиска по строке;
🟡строковых преобразований;
🟡получения отдельных символов.

🟡 Строки автоматически оборачиваются в обёртку String при вызове методов над ними.

➡️ Обернуть строку в String можно вручную, вызвав конструктор new String():

const primitive = 'приветики'
const str = new String('приветики')


🗣️ При работе с формами и вводом значений следует очищать поля ввода от замыкающих пробелов вызовом метода trim()

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


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
⚡️ JSLint — Инструмент, который помогает разработчикам обнаруживать ошибки и потенциальные проблемы в исходном коде JavaScript. Он проводит строгую проверку кода на соответствие определенным стандартам и правилам.

🔵Предотвращение распространенных ошибок. Эффективно выявляет распространенные ошибки и плохие практики.

🔵Ограниченная гибкость. Имеет строгий набор правил, который может подойти не для всех стилей кодирования.
🔵Бывает чересчур строг. Иногда JSLint излишне строг и выдает предупреждения по мелочам.

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Scroll-Driven Glow Cards — Карусель карточек с анимированной подсветкой.

Технологии: SVG, CSS, JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
👩‍💻 Псевдоэлемент ::marker

::marker — псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

👀 Пример

Создадим ненумерованный список <ul> и установим синий цвет точки для каждого элемента <li>:

<ul>
<li>Цвет точек</li>
<li>этого ненумерованного списка</li>
<li>#2e9aff</li>
</ul>


li::marker {
color: #2e9aff;
}


Псевдоэлемент ::marker работает только на элементах списка.


💡 Для обратной совместимости с CSS 2 браузеры позволяют писать некоторые псевдоэлементы с одним двоеточием, например: ::before, ::after, ::first-letter, ::first-line.

⚠️ Однако псевдоэлемент ::marker необходимо указывать с двумя двоеточиями.

CodeBase | Frontend | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍52👏2🥰1
⚡️ Mocha — Поддерживает асинхронное тестирование, обладает богатым набором функций для описания тестовых сценариев.

🔵Гибкость в написании тестов. Mocha позволяет разработчикам использовать любую библиотеку утверждений, что делает его гибким для различных стилей тестирования.
🔵Поддержка асинхронного тестирования. Эффективно работает с асинхронным кодом, облегчая тестирование в современных JavaScript-приложениях.
🔵Широкий функционал. Предлагает множество удобных функций для описания и группирования тестов, что облегчает организацию тестовых сценариев.

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

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Code Magic — легкий генератор CSS и Tailwind кода, на основе вашего выбора и вводимых данных.

🔗 Ссылка на сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💩3
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Sticky Slider — Анимированный слайдер со стилизованными карточками.

Технологии: SVG, CSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎1
👩‍💻 Тернарный оператор

Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.

Используется как компактная замена условного оператора if...else.

const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять


➡️ Обьяснение:

(A) ? (B) : (C)


Где A — условие, B — первое выражение, C — второе выражение.

Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C.

💡 Внутри одного тернарного оператора можно написать другой:

const num = 10
const result = num > 10 ? 'Число больше 10' :
num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'


В этом случае запись идентична использованию конструкций if...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее.

🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤯3🤔2
⚡️ Komodo IDE — IDE для веб-разработки, которая поддерживает девять языков для фронтенд- и бэкенд-разработки.

🔵Простота и удобство. Понятный интерфейс, который облегчает работу с веб-страницами, HTML-рассылками и другими веб-ресурсами.
🔵Удобные функции отладки. Предлагает простые и эффективные инструменты для отладки в режиме онлайн.
🔵Легкость навигации. Предоставляет легкий доступ ко всем функциям, делая использование программы интуитивно понятным.
🔵Мощный редактор с функциями автозаполнения и рефакторинга. Это облегчает и ускоряет процесс разработки, а также снижает вероятность допустить ошибку.

🔵Временами может тормозить. В особенности это заметно при автозаполнении кода в Python с множеством возможных вариантов.
🔵Порой требуется перезапуск для обновления символов. Это может быть неудобно при работе над крупными проектами.
🔵Сервис платный.

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎21
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Silky smooth link effects — Набор из различных анимаций кнопок при нажатии.

Технологии: SVG, SCSS, JavaScript

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1😁1
👩‍💻 Селектор по атрибуту

Селекторы по атрибутам в CSS — это мощный инструмент для стилизации элементов на основе наличия или значений атрибутов. Они позволяют сделать стили более гибкими и динамичными.

➡️ Основные виды:

🟠[attribute]: применяет стиль к элементам с указанным атрибутом. Например:
[disabled] { opacity: 0.5; }


🟠[attribute="value"]: стилизует элементы с определённым значением атрибута:
[type="text"] { border: 1px solid blue; }


🟠Частичные совпадения: [attribute^="value"] — начинается с, [attribute$="value"] — заканчивается на, [attribute*="value"] — содержит.

✔️ Пример использования:

[href^="https"] { color: green; }


Этот код применит зелёный цвет ко всем ссылкам, начинающимся с https.

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
⚡️ QUnit — Библиотека JavaScript для модульного тестирования, предоставляющая функции для организации и выполнения тестов в веб-браузерах и Node.js.

🔵Простота и удобство. У QUnit простой и интуитивно понятный интерфейс. Он подойдет даже для новичков в тестировании.
🔵Идеально подходит для jQuery. QUnit был разработан для тестирования кода jQuery, что делает его идеальным выбором для проектов, использующих эту библиотеку.
🔵Поддержка синхронных и асинхронных тестов. QUnit позволяет тестировать как синхронный, так и асинхронный JavaScript-код.

🔵Фокус на модульных тестах. QUnit в основном ориентирован на модульное тестирование, что может быть недостаточно для комплексного тестирования приложений.

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Jumping Coin Preloader — Анимированная загрузка в виде прыгающей монетки.

Технологии: HTML, SCSS

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍1
🌐 Что такое API

API — это инструмент, который помогает разным программам и сервисам "общаться" друг с другом. Это важно для разработки на фронтенде, где нужно интегрировать клиент с сервером.

➡️ Существует три основных типа API: REST,SOAP и RPC.

REST — самый популярный, удобный и гибкий. SOAP используется в крупных проектах благодаря строгим стандартам, а RPC — для сложных вычислительных задач.

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


CodeBase | Frontend | #web
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
Daisy UI

Это красивая и простая в использовании библиотека компонентов для Tailwind CSS. Но она не похожа на типичные библиотеки компонентов, Material UI или Mantine UI. Вместо набора компонентов Daisy UI предоставляет набор классов-утилит, которые вы можете использовать для создания своих компонентов, например, btn, btn-primary, modal, modal-box и т. д.

✔️ Установка

В вашем проекте должен быть установлен Tailwind CSS. Вы можете использовать его с любым JavaScript-фреймворком или просто с ванильным HTML.

Устанавливаем через npm:

npm install daisyui


⚙️ Использование

const App = () => {
return <button className='btn'>Button</button>
}


Вы можете использовать имена классов для настройки компонентов. Например:

const App = () => {
return (
<button className="btn">Button</button>
<button className="btn btn-neutral">Neutral</button>
<button className="btn btn-primary">Primary</button>
<button className="btn btn-link">Link</button>
)
}


Если хотите попробовать данную библиотеку в действии, переходите по ссылке и ознакомьтесь со всей информации на официальном сайте DaisyUI.

🔗 Сайт DaisyUI

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
⚡️ Brackets — Бесплатный и открытый инструмент, оптимизированный для веб-разработки.

✔️ Плюсы

🔵Live preview. Главная фишка Brackets — возможность видеть изменения в реальном времени в браузере, что делает процесс разработки понятнее.
🔵Поддержка нескольких языков. Идеально подходит для работы с HTML, CSS и JavaScript, что делает его отличным выбором для фронтенд-разработчиков.
🔵Расширения и плагины. Поддержка разнообразных расширений и плагинов позволяет пользователям настраивать редактор под свои нужды.
🔵Простой и удобный интерфейс. У Brackets чистый, минималистичный интерфейс, что облегчает работу с кодом.
🔵Бесплатный и открытый исходный код. Brackets доступен бесплатно, и его исходный код открыт для сообщества.

Минусы

🔵Низкая производительность. В некоторых случаях Brackets может быть медленнее по сравнению с другими редакторами кода, особенно при работе с большими файлами.
🔵Редкий выход обновлений. Не обновляется так же часто, как некоторые другие редакторы, что может замедлять внедрение новых функций и исправление ошибок.

➡️ Сайт

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Interactive Gradient — Сцена с интерактивным фоном в виде градиента.

Технологии: SVG, SCSS, Babel

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
3
👩‍💻 Объект

Кроме примитивных типов в JavaScript существуют и сложные — например, объект.

🗣️ Объект (object) — это набор свойств. Каждое свойство состоит из названия и значения. Название может быть строкой или символом, а значение может быть любым.

➡️ Объекты в JavaScript используются повсюду, особенно для хранения данных. Для уверенной работы с объектами необходимо знать, как создавать объект, как его изменять и как читать значения свойств.

Пустой объект без свойств можно создать парой фигурных скобок:

const cat = {}


✔️ Когда нужно создать объект со свойствами, то их описывают внутри фигурных скобок. Свойства указываются в формате имяСвойства : значение, между свойствами ставится запятая:

const book = {
title: 'Война и мир',
author: 'Лев Толстой',
pages: 1274,
isFinished: true
}


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5