CodeBase | Frontend

👩‍💻 Псевдоэлемент ::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

⚡️Scroll-Driven Glow Cards — Карусель карточек с анимированной подсветкой. Технологии: SVG, CSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

💻Настоящие читы для программистов/разработчиков! Программистика — Огромная база данных для питонистов. С помощью этого канала вы точно освоите python! GameDev Base — Множество крутых приёмов и лайвхаков для геймдев разработчиков; 🫵Подпишись и прокачивай свои навыки с невиданной скоростью!

⚡️ JSLint — Инструмент, который помогает разработчикам обнаруживать ошибки и потенциальные проблемы в исходном коде JavaScript. Он проводит строгую проверку кода на соответствие определенным стандартам и правилам. 🔵Предотвращение распространенных ошибок. Эффективно выявляет распространенные ошибки и плохие практики. 🔵Ограниченная гибкость. Имеет строгий набор правил, который может подойти не для всех стилей кодирования. 🔵Бывает чересчур строг. Иногда JSLint излишне строг и выдает предупреждения по мелочам. ➡️ Сайт CodeBase | Frontend | #tool

👩‍💻 Обёртка String String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками: 🟡поиска по строке; 🟡строковых преобразований; 🟡получения отдельных символов. 🟡 Строки автоматически оборачиваются в обёртку String при вызове методов над ними. ➡️ Обернуть строку в String можно вручную, вызвав конструктор new String():

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

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

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

CodeBase | Frontend | #js

⚡️Developer or Designer? — Стилизованный переключатель с плавной анимацией. Технологии: SVG, SCSS, TypeScript 🔗 Ссылка CodeBase | Frontend | #animate

Python и Java разработчики❗️ Выкатываем специально для вас подборку лучших в телеграме каналов, для тех, кто по правде хочет узнать полезную информацию: 📱Pythoner — Реальный код, полезные советы и интересные задачи для Python-разработчика. 📱Javer — Полезные материалы по Java, которые будут интересны опытному и начинающему прогеру. 🖥Книжный python — Сборник всех самых полезных статей и книг по Python. 🖥Книжный Java — Сборник всех самых полезных статей и книг по Java. 🌐IT memer — Самые жизненные и смешные мемы для любого программиста.

⚡️ Grunt — Инструмент веб-разработки, который используют для автоматизации повторяющихся задач: сжатие изображений, компиляция CSS и JavaScript, а также линтинг кода. 🔵Множество плагинов. Обширная экосистема плагинов обеспечивает гибкость в настройке. 🔵Простая интеграция. Легко интегрируется с другими инструментами и системами разработки, что делает его универсальным софтом. 🔵Сложная настройка. Настройка может вызвать затруднение у новичков из-за конфигурационного подхода. 🔵Производительность. Медленнее по сравнению с другими инструментами автоматизации. ➡️ Сайт CodeBase | Frontend | #tool

👩‍💻 Псевдокласс :empty Псевдокласс :empty используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста. 👀 Объясню на пальцах ➡️ Не будет пустым следующее содержимое: 🟢другие теги; 🟢текст, включая пробельные элементы (пробел, невидимый пробел, табуляция, переносы строк). ➡️ Будет пустым следующее содержимое: 🟢HTML-комментарии; 🟢текст, указанный с помощью CSS-атрибута content; 🟢псевдоэлементы.

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

CodeBase | Frontend | #css

⚡️Radios With Sliding Focus — Анимированный переключатель с эффектом при наведении. Технологии: HTML, CSS 🔗 Ссылка CodeBase | Frontend | #animate

🟢 Stylus — плюсы и минусы 🟢 ⚡️ Stylus запустили в 2010 году как универсальный CSS-препроцессор с гибкой синтаксической структурой. ➕Плюсы 🟢Гибкий синтаксис. Позволяет опускать двоеточия, точки с запятой и фигурные скобки. Код получается более лаконичным и читаемым. 🟢Использование отступов для организации кода. Отступы для блоков улучшают структуру и визуальное восприятие кода. 🟢Расширенный функционал. Переменные, миксины и вложенные селекторы. ➖Минусы 🟠Отличается от традиционного CSS. Его уникальный синтаксис может потребовать дополнительного времени на обучение, особенно для тех, кто привык к стандартному CSS. 🟠Нестандартный синтаксис может привести к путанице. Особенно в командной работе, где участники проекта используют разные стили написания кода. CodeBase | Frontend | #Stylus

👩‍💻 Что такое тег <section> Тег <section> создаёт независимый блок — например, блок новостей, блок с контактами или просто абзац с заголовком.

<section>
  <h1>Заголовок первого блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей чаю.</p>
</section>

<section>
  <h1>Заголовок второго блока</h1>
  <p>Съешь ещё этих мягких французских булок, да выпей же чаю.</p>
</section>

• Тег <section> всегда закрывается при помощи парного тега </section>. • Внутри <section> обязательно должен быть заголовок <h1>...<h6>. • Контейнеры <section> можно вкладывать друг в друга, как матрёшку. 💡 Если вы хотите просто объединить и стилизовать второстепенные элементы, которые не так важны для поисковика, лучше использовать <div>. Некоторые начинающие разработчики неверно понимают семантику этого тега и заменяют им большую часть дивов на странице. Так делать не стоит. Тегом <section> стоит оборачивать большие логические блоки на странице.

🛠 По спецификации допустимо размещать в каждом <section> заголовок первого уровня (<h1>). Несмотря на это, не стоит размещать на странице больше одного заголовка первого уровня. Это важно для правильной индексации сайта поисковыми роботами.

CodeBase | Frontend | #html

⚡️Neumorphic Rocker Switch — Стильный переключатель отображения температуры, выполненный в стиле неоморфизма. Технологии: HTML, SCSS, TS 🔗 Ссылка CodeBase | Frontend | #animate

⚡️ WebStorm — Среда разработки веб-приложений на JavaScript, CSS и HTML. Обеспечивает быстрое программирование благодаря функциям анализа кода и автодополнения. 🔵 Широкий функционал. WebStorm предлагает широкий спектр инструментов и возможностей, включая поддержку необходимых фронтенд-разработчику языков и фреймворков. 🔵 Встроенная проверка орфографии. Сокращает время на поиск и исправление мелких ошибок. 🔵 Удобное меню настроек с горячими клавишами. Облегчает и ускоряет процесс программирования. 🔵 Умное автозаполнение кода. Ускоряет процесс разработки и снижает вероятность ошибок. 🔵 Сайт CodeBase | Frontend | #ide

👩‍💻 Псевдокласс :focus Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus, и мы можем задать для него красивые стили. ⚠️ Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается. ➡️ После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
  outline: 2px solid hotpink;
}

➡️ Фишки: ⏺ Смену стилей между состояниями можно анимировать при помощи transition ⏺ В браузер встроены дефолтные стили для фокуса. ⏺ Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся. ⏺ Стили для фокуса можно увидеть, открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода. CodeBase | Frontend | #css

Наступила осень... но хороший разработчик может устроить себе лето в любое время... --- Чтобы оставаться в тренде, читай понятные и полезные статьи, обзоры, новости из мира программирования. dr.Brain пишет для тебя каждый день

⚡️Панелька с анимированными иконками — Панель навигации с анимированными иконками при нажатии. Технологии: HTML, SCSS, TS 🔗 Ссылка CodeBase | Frontend | #animate

На css и js можно делать крутые отзывчивые интерфейсы Если знать, как 💥 Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо Несколько сотен готовых решений для вдохновения и использования  Личный помощник фронтендеру прямо в мессенджере!

Я с сентября буду копить на рекламу

👩‍💻 ТОП-3 JavaScript ТРЮКА С МАССИВАМИ 👩‍💻 ➡️ Фильтрация уникальных значений 🟢 С появлением нового типа объектов Set в стандарте ES6 и его комбинацией со спред-оператором (...), можно быстро создать новый массив из старого, содержащий только уникальные значения.

const array = [1, 1, 2, 3, 5, 5, 1] const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // [1, 2, 3, 5]

➡️ Кэширование длины в цикле 🟢 При изучении JavaScript, мы всегда встречаем стандартный цикл for в учебных материалах:

for (let i = 0; i < array.length; i++){ console.log(i); }

🟢 Этот шаблон следует использовать, верно? Однако, он не является оптимальным. На каждой итерации будет пересчитываться длина массива array. И хотя иногда это может быть полезно, чаще всего более эффективным будет кэшировать ее после первого расчета. Для этого мы создаем переменную length вместе с определением счетчика цикла в первой части условия:

for (let i = 0, length = array.length; i < length; i++){ console.log(i); }

🟢 Такой код остается лаконичным, но при работе с большими массивами будет немного более эффективным. ➡️ Укорачивание 🟢 Один из широко известных JavaScript-трюков - сокращение массива, который всегда полезно вспомнить. 🟢 Для удаления нескольких значений с конца массива не обязательно использовать методы slice(), splice() или pop(). Просто присвойте новое значение свойству length массива:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; array.length = 4; console.log(array); // [0, 1, 2, 3]

🟢 Этот подход работает только с массивами, так как с Set, например, данный трюк не сработает. Если понравился пост, добавь 🔥 🔥 🔥 И, мы обязательно разберем данный вопрос подробнее! CodeBase | Frontend |#js