CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views14:01

⚡️

GitHub: Терминология

⚡️

Пора обогатить ваш словарь Git перед тем, как мы сделаем первый запрос на слияние (Pull Request).

🟣 Хранилище (repository) — это каталог проекта, который контролируется Git. Внутри этого каталога содержится проект, история изменений и метаинформация проекта (хранится в скрытом каталоге .git).

🟣 Индекс — это место, где записаны имена файлов и их изменения, которые должны быть включены в следующий коммит. С точки зрения фактического хранения, индекс представляет собой просто файл. Файлы не попадают автоматически в индекс, их нужно добавлять явно с помощью команды git add.

🟣 Фиксация (commit) — это сохранение изменений в истории проекта (изменения, внесенные в индекс). Фиксация содержит измененные файлы, имя автора фиксации и время ее создания. Каждая фиксация обладает уникальным идентификатором, который позволяет в любое время вернуться к этой точке. Коммит можно рассматривать как точку сохранения.

🟣 Ветка (branch) — это последовательность фиксаций. По сути, это ссылка на последнюю фиксацию в данной ветке. Ветки не зависят друг от друга — изменения в одной ветке не затрагивают другую (если вы явно этого не попросите). Обычно вы начинаете работу с одной ветки — main, об этом чуть позже.

🟣 Форк (Fork) — это ваше собственное ответвление другого проекта. Это означает, что GitHub создает копию проекта в вашем пространстве имён, и вы можете легко вносить изменения, отправляя их (push) обратно.

🟣 Запрос на слияние (Pull Request) — предложение внести изменения в чужой репозиторий. Например, если вы скопировали чей-то репозиторий, сделали изменения и хотите, чтобы они были включены в оригинальный репозиторий, то вы создаете запрос на слияние с просьбой добавить ваши изменения.

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views05:07

⚡️

Макет сайта: 𝗚𝗥𝗘𝗘𝗡 𝗘𝗡𝗘𝗥𝗚𝗬

⚡️

Чудесный макет сайта "зеленая" энергия. Прокачает ваши навыки!

🟢

Сложность: ⭐️⭐️⭐️⭐️⭐️

🟢

Технологии: HTML/CSS, JS и др.

🔗

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views12:06

0:02

⚡️ Использование свойства white-space с параметром nowrap

⚡️

🟢 Свойство white-space с параметром nowrap предотвращает автоматический перенос текста на новую строку внутри элемента, даже если текст не помещается в доступной ширине контейнера.

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views05:01

⚡️ Крутой концепт прелоадера страницы ⚡️

➡️ Технологии: CSS

🟢 Геометрические фигуры в стиле тетриса непрерывно формируются в правильной последовательности — представляет собой оригинальное решение.

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

🔗

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views20:18

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:06

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views12:02

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views02:03

0:18

⚡️

Анимация перехода от дня к ночи

⚡️

Крутое решение для вашего проекта. Красиво, удобно, лаконично. Пользуйтесь на здоровье!)

🔵

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

🔗

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views02:01

⚡️

Маскирование в CSS при помощи свойства mask

⚡️

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

➡️

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

mask: url("../shape.png"); 
mask-repeat: no-repeat; 
mask-size: cover; 
mask-position: center;

➡️

или записать все в одну строку:

mask: url("../img/shape.png") center/cover no-repeat;

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views03:57

⚡️

Знакомство с DOM

⚡️

🟢Браузер рассматривает все теги в HTML-документе как объекты, где одни теги могут содержать другие теги, что делает их дочерними. Проще говоря, HTML-документ представляет собой древовидную структуру с разветвленными элементами тегов, что и составляет DOM (Document Object Model).

Итак, самая простая страница:

<html>
<head>
    <title>Page title</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>
</body>
</html>

➡️ Этот пример представляет собой минимальную HTML-страницу. Убедитесь, что вы сохраняете эту разметку в формате .html, чтобы браузер мог ее корректно отобразить.

➡️ Если внимательно посмотреть на приведенные в примере теги, то можно заметить, что внутри одних тегов мы чётко видим другие.

🟢 Внутри тега <html> лежат все остальные теги: <head>, <body>. Внутри же этих тегов, например, <head> лежит тег <title>.

🟢 Все, что существует внутри HTML-документа, является частью DOM-дерева.

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

➡️ Давайте подытожим, DOM позволяет нам крутить и вертеть всеми элементами нашего HTML-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно.

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:02

⚡️

Псевдокласс ::first-letter

⚡️

🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.

➡️ Принятые свойства:

🔵 color — цвет первой буквы
🔵 background-color — цвет фона
🔵 font-family — шрифт первой буквы
🔵 font-size — размер шрифта
🔵 font-weight – насыщенность шрифта
🔵 line-height — высота строки
🔵 text-decoration — текстовое оформление (подчеркивание, зачеркивание)
🔵 text-transform — преобразование текста (в верхний регистр, в нижний регистр)
🔵 margin - внешние отступы
🔵 padding - внутренние отступы
🔵 border — граница первой буквы
🔵 float — выравнивание (например, слева, справа).
🔵 text-shadow — тень текста

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views10:32

⚡️

Разница между cookie, sessionStorage и localStorage

⚡️

➡️ Эти технологии — cookie, sessionStorage и localStorage — позволяют хранить данные на стороне клиента в браузере. Однако у них есть различия в способе использования и хранения данных.

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

Пример:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

🟢 SessionStorage — это объект, который позволяет сохранить данные в браузере только на время сессии, т.е. пока вкладка браузера открыта. Данные хранятся в форме ключ-значение и могут использоваться для сохранения состояния приложения или другой информации, доступной только в рамках текущей сессии.

Пример:

sessionStorage.setItem('username', 'John');
console.log(sessionStorage.getItem('username')); // вывод "John"

🟢 LocalStorage — это объект, который позволяет хранить данные в браузере на неопределенный период времени, даже после закрытия браузера и перезагрузки компьютера. Данные также хранятся в форме ключ-значение и могут использоваться для хранения состояния приложения или другой информации, доступной в любое время.

Пример:

localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // вывод "John"

ℹ️ Таким образом, основное различие между cookie, sessionStorage и localStorage заключается в их сроке жизни, способе использования и том, как они могут быть применены в веб-приложениях.

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views05:01

🔥

Установка атрибутов файлов cookie

🔥

При работе с cookies в JavaScript можно настроить различные атрибуты, которые определяют их поведение.

Эти атрибуты добавляются в строку cookie в виде пар ключ-значение.

⚡️ Вот некоторые из часто используемых атрибутов:

1️⃣ Имя и значение:

Имя и значение определяют данные, которые будут храниться в cookie. Формат выглядит как name=value.

Например, document.cookie = "username=johndoe".

2️⃣ Срок действия (expires):

Атрибут expires определяет срок действия cookie. По умолчанию cookie хранятся до закрытия браузера. Чтобы установить конкретную дату истечения срока действия, используйте expires=date.

Например, document.cookie = "username=johndoe; expires=Thu, 31 Dec 2022 23:59:59 GMT".

3️⃣ Домен (domain):

Атрибут domain указывает на домен, к которому принадлежит cookie. По умолчанию cookie связаны с текущим доменом. Для явного указания домена используйте атрибут domain.

Например, document.cookie = "username=johndoe; domain=example.com".

4️⃣ Путь (path):

Атрибут path определяет путь в домене, по которому доступен cookie. По умолчанию cookie доступен для всего домена. Чтобы ограничить cookie определенным путем, укажите атрибут path.

Например, document.cookie = "username=johndoe; path=/admin".

5️⃣ Безопасность (secure):

Атрибут secure гарантирует, что cookie передается только через безопасное HTTPS-соединение. Для защиты cookie включите атрибут secure.

Например, document.cookie = "username=johndoe; secure".

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views05:04

⚡️

reveal.js

⚡️

🖥

reveal.js - это open-source фреймворк, предназначенный для создания HTML-презентаций.

➡️ Он обладает широким спектром функций:

🔵 включая поддержку Markdown
🔵 возможности анимации
🔵 экспорт в PDF
🔵 заметки для докладчика
🔵 поддержку верстки в LaTeX
🔵 подсветку синтаксиса для кода
🔵 удобное API.

🔗

Ссылка

CodeBase | Frontend | #js #framework

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views10:02

🟢

Крутой макет интернет магазина: Дроны

🟢

Поможет прокачать вам свои навыки!

🔵 Технологии: HTML/CSS, JS
🔵 Страницы: Многостраничный

🔗

Ссылка

CodeBase | Frontend | #макет

Please open Telegram to view this post

VIEW IN TELEGRAM

1.6K views05:09

⚡️ WEBPACK ⚡️

➡️ Утилита для веб-разработчика, которая объединяет JavaScript- и CSS-файлы в один файл, известный как "bundle".

🟢 При работе над крупными проектами возникает необходимость эффективно организовывать код.

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

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

CodeBase | Frontend | #webpack

Please open Telegram to view this post

VIEW IN TELEGRAM

1.8K views05:02

0:09

🌟

Анимация смены текста

🌟

🔵 Реализовано на HTML, CSS и JS

🔗

Ссылка

Code Base | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views05:01

🟢

SAAS

🟢

⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярностью среди опытных специалистов.

🟢 Возможность совместимости с различными версиями CSS позволит вам использовать любые CSS библиотеки в вашем проекте.
🟢 CSS препроцессоры, обладающие таким богатым функционалом, как Sass, являются редкостью.
🟢 Sass является одним из самых опытных CSS препроцессоров, который накопил множество знаний за свою долгую историю.
🟢 Удобство использования Sass фреймворков, таких как Bourbon, значительно облегчит жизнь разработчику. Мы также используем Bourbon в определенных выпусках Джедая верстки при работе с Sass.
🟢 Синтаксис Sass предлагает выбор между двумя вариантами: упрощенным (SASS) и более похожим на CSS (SCSS), чтобы каждый мог выбрать наиболее удобный.

🔗

Посмотреть урок [34:43]

CodeBase | Frontend | #обучение #sass

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views01:09