CodeBase | Frontend – Telegram

CodeBase | Frontend

@codebase_frontend

2.13K subscribers

362 photos

129 videos

2 files

524 links

Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)

Download Telegram

About

Blog

Apps

Platform

CodeBase | Frontend

2.13K subscribers

CodeBase | Frontend

⚡️

Знакомство с 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

CodeBase | Frontend

⚡️

Псевдокласс ::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

CodeBase | Frontend

⚡️

Разница между 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

CodeBase | Frontend

🔥

Установка атрибутов файлов 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

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️

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

CodeBase | Frontend

🟢

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

🟢

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

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

🔗

Ссылка

CodeBase | Frontend | #макет

Please open Telegram to view this post

VIEW IN TELEGRAM

1.6K views05:09

CodeBase | Frontend

⚡️ WEBPACK ⚡️

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

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

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

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

CodeBase | Frontend | #webpack

Please open Telegram to view this post

VIEW IN TELEGRAM

1.8K views05:02

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

🌟

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

🌟

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

🔗

Ссылка

Code Base | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views05:01

CodeBase | Frontend

🟢

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

CodeBase | Frontend

🟢

Макет cайта школы серфинга: Wawe

🟢

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

🔗

Ссылка на макет

CodeBase | Frontend | #макет

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views10:02

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️ Эффект наведения с подсветкой ⚡️

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

🔗

Ссылка

CodeBase | Frontend | #html #css

Please open Telegram to view this post

VIEW IN TELEGRAM

1.4K views05:03

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views05:01

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K viewsedited 18:14

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️

Эффект волн - очень привлекательная анимация логотипа.

🔵 Реализована с использованием SCSS и JavaScript.

🔗

Ссылка

CodeBase | Frontend | #scss_js

Please open Telegram to view this post

VIEW IN TELEGRAM

1.5K views05:06

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K viewsedited 05:01

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

⚡️

QUOKKA

⚡️

🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера.

🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами.

🟢 В нем есть встроенные отчеты и функции форматирования вывода.

🔗

Ссылка

CodeBase | Frontend | #plugins

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:04

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:03

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K viewsedited 05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02