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

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
👩‍💻 Расширение VS Code: Bookmarks

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

➡️ Ссылка на плагин

CodeBase | Frontend | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
8
⚡️ Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.

😀 Для быстрого запуска с помощью Docker:

docker run -d \
--init \
--name memos \
--publish 5230:5230 \
--volume ~/.memos/:/var/opt/memos \
neosmemo/memos:stable


CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
⚡️ AFISHA ⚡️

🔵 Сложность: Легкая
🔵 Страницы: Одностраничный
🔵 Язык: русский

🔗 Ссылка на макет
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
⚡️ Cleave.js - это JavaScript библиотека, которая применяется преимущественно для форматирования вводимого текста, обеспечивая плавную работу.

🔵 Она легка в использовании и проста в освоении.

🔗 Документация

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍4
⚡️ Dismantle.js — это библиотека для анализа и модификации исполняемого JavaScript-кода.

🟢 Она предоставляет инструменты для работы с абстрактными синтаксическими деревьями (AST), позволяя разработчикам исследовать и изменять структуру и поведение кода.

➡️ Основные возможности включают:

1️⃣ Разбор кода: Преобразование JavaScript-кода в синтаксическое дерево.

2️⃣ Анализ кода: Изучение элементов кода, таких как переменные, функции и выражения.

3️⃣ Манипуляция кодом: Изменение синтаксического дерева для рефакторинга или оптимизации.

4️⃣ Генерация кода: Преобразование измененного синтаксического дерева обратно в код.

👀 Эта библиотека полезна для создания инструментов разработки, таких как линтеры, форматеры и транспайлеры.

🔗 Установка

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3
⚡️ Как отобразить сообщение, если JavaScript отключен? ⚡️

🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.

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

🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.

1️⃣ Использование HTML тега <noscript>

🔵 Тег <noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.

➡️ Пример:

<noscript>
Видео не может проигрываться, так как JavaScript отключен.
</noscript>


➡️ Полный пример:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
<h1>Пример тега noscript</h1>
<noscript>
<h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2>
<style type="text/css">
#main-content { display: none; }
</style>
</noscript>
<div id="main-content">
<h2>JavaScript включен!</h2>
</div>
</body>
</html>


2️⃣ Использование метода meta refresh

🟣 Для отображения контента при отключенном JavaScript можно перенаправить пользователя на страницу с сообщением об этом. Метод meta refresh использует тег <meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.

➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:

<noscript>
<meta http-equiv="refresh" content="0;URL=ShowErrorPage.html">
</noscript>


🟣 Если JavaScript отключен, браузер перенаправит пользователя на "ShowErrorPage.html" с предупреждающим сообщением.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤‍🔥1👎1
⚡️ ESLintESLint ⚡️

➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.

➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.

➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.

🔗 Документация

CodeBase | Frontend | #plugin
Please open Telegram to view this post
VIEW IN TELEGRAM
👍63
⚡️ Ключевое слово this ⚡️

В
JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена.

➡️ Основные правила определения значения this:

1️⃣ Глобальный контекст (контекст выполнения скрипта): вне какой-либо функции this ссылается на глобальный объект (в браузерах это window, в Node.js — `global`).

console.log(this); // window (в браузере)


2️⃣ Внутри функции: если функция вызывается в глобальном контексте, this также будет ссылаться на глобальный объект.

function foo() {
console.log(this); // window (в браузере)
}
foo();


3️⃣ Методы объекта: если функция вызвана как метод объекта, this ссылается на этот объект.

const obj = {
method: function() {
console.log(this); // obj
}
};
obj.method();


4️⃣ Конструкторы: при вызове функции как конструктора с помощью new, this ссылается на новый экземпляр объекта.

function Person(name) {
this.name = name;
}
const person = new Person('John');
console.log(person.name); // John


5️⃣ call, apply и bind: методы call, apply и bind позволяют явно задать значение this.

 function greet() {
console.log(this.name);
}
const person = { name: 'John' };
greet.call(person); // John


6️⃣ Стрелочные функции: у стрелочных функций нет собственного this. Они захватывают значение this из окружающего контекста на момент своего определения.

const obj = {
method: function() {
const arrow = () => console.log(this);
arrow(); // obj
}
};
obj.method();


👀 Значение this может быть сложным для понимания, но понимание контекста вызова функции помогает предсказать, на что будет ссылаться this.

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍112🔥1
🐶 The Odin Project

The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.

➡️ Ссылка на проект

CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61
⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

CodeBase | Frontend
⚡️ Задание: Создайте переключаемую боковую панель ⚡️

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

➡️ Особенности:

🟢Возможность включения и отключения боковой панели

🟢Генерация пунктов меню из объекта JavaScript

➡️ Передовые функции:

🟢 Возможность перехода на различные страницы через взаимодействие с элементами

🟢 Сохранение выбранного состояния при наличии хэша в URL

➡️ В процессе вы узнаете:

🟢 Как проводить проверки

🟢 Манипуляции с классами

🟢 Динамическое отображение элементов

🟢 Использование API истории

🟢 Определение местоположения объекта

🔗 Макет

🔗 Учебник

Если хотите и дальше получать полезную инфу с крутыми проектами, добавь 🔥 🔥 🔥

CodeBase | Frontend | #task
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4
⚡️ Псевдокласс :target ⚡️

🔵 Применяет стиль к целевому элементу в документе.

🔵 Он представляет целевой элемент с помощью id в соответствии с фрагментом URL.

✔️ Синтаксис
:target {
css declarations;
}


CodeBase | Frontend
| #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный куб "SVG Starry cube"

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

🔗 Ссылка

CodeBase | Frontend | #animated
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
⚡️ Сниппет JS: Шифр Цезаря ⚡️

🔵 Это простой метод шифрования текста, при котором каждый символ заменяется другим символом, сдвинутым на фиксированное количество позиций вправо или влево по алфавиту.

🔵 Например, при сдвиге на 1 символ А становится Б, Б становится В и так далее.

const caesarCipher = (str, num) => {
const arr = [...'abcdefghijklmnopqrstuvwxyz']
let newStr = ''

for (const char of str) {
const lower = char.toLowerCase()

if (!arr.includes(lower)) {
newStr += char
continue
}

let index = arr.indexOf(lower) + (num % 26)

if (index > 25) index -= 26
if (index < 0) index += 26

newStr +=
char === char.toUpperCase() ? arr[index].toUpperCase() : arr[index]
}
return newStr
}

caesarCipher('Hello World', 100) // Dahhk Sknhz
caesarCipher('Dahhk Sknhz', -100) // Hello World

CodeBase | Frontend | #snippets
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3
⚡️ Промисы + async/await ⚡️

🟢 В JavaScript можно отложить выполнение определенных участков кода на неопределенное время, например, с помощью функции setTimeout(), прослушивателя событий или сетевых запросов с использованием fetch API.

🟢 Промисы представляют собой способ делать асинхронный код в JavaScript предсказуемым. Они позволяют разрешать код, созданный при помощи async. Успешное выполнение кода обрабатывается через метод .then(), а ошибки - через метод .catch().

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

// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагается
// исполнить в коде позже
navigator.geolocation.getCurrentPosition(position => {
console.log(position);
}, error => {
console.error(error);
});
console.log("done");

// Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении
// журналированы, затем журналировано 'done'
const promise = new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});

promise
.then(position => console.log(position))
.catch(error => console.error(error))
.finally(() => console.log('done'));

// Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ
// работы с промисами
async function getPosition() {
// async/await работает только в функциях (пока)
const result = await new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(resolve, reject);
});
const position = await result;
console.log(position);
console.log('done');
}

getPosition();

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое.

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

➡️ Репозиторий составлен на русском языке.

🔗 Ссылка

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Flexer - визуальный конфигуратор CSS Flexbox, который отлично подходит для начинающих для изучения и понимания работы flexbox.

🔗 Ссылка

CodeBase | Frontend | #resource
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡️ Вы знали, что свойство length массивов в JavaScript не только получает длину массива, но также может устанавливать её?⚡️

🗣 При установке значения меньше текущей длины массива, элементы удаляются с конца массива, чтобы соответствовать новой длине.

🗣 Если значение больше текущей длины, то в конец массива добавляются пустые элементы.

🗣 Это часто применяется для полной очистки массива путем установки значения на 0.

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
🗣Интерактивное описание планет Солнечной системы, созданное с использованием SCSS, а не JavaScript.

🔗 Ссылка

CodeBase | Frontend | #scss
Please open Telegram to view this post
VIEW IN TELEGRAM
7👍1
⚡️ Plasmic - это визуальный конструктор для React, который позволяет создавать приложения на React без необходимости писать код, используя готовые компоненты.

🔵 Кроме того, Plasmic является очень эффективным и подходит для разработки маркетинговых веб-сайтов и сайтов электронной коммерции с большим объемом трафика.

🐱 GitHub
🔵 Сайт

CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
⚡️ Подготовил для вас небольшую подборку годноты ⚡️

➡️ Анимация

🔵 Animate.css – библиотека CSS анимаций
🔵 Magic – кроссбраузерные анимации
🔵 Hover.css – набор анимаций CSS

➡️ Фоновая заставка

🔵 Coverr – Короткие видео для фона на сайт
🔵 Subte Patterns – Фоны для сайта

➡️ Шпаргалки

🔵 FlexBox – шпаргалка по Flexbox
🔵 CSS Cheat Sheet – шпаргалка по CSS
🔵 Emmet Cheat Sheet – шпаргалка по Emmet

Если вам нравится такой формат постов, добавь 🔥🔥🔥


CodeBase | Frontend | #cheat_sheets #bg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1511