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

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚡️ Задание: Создайте переключаемую боковую панель ⚡️

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

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

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

🟢Генерация пунктов меню из объекта 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
⚡️ Создание сайта с крутой анимацией скролла ⚡️

🗣 Технологии: HTML, CSS, JS

Будет полезно новичкам, да и старичкам тоже.

🔗 Ссылка на урок

CodeBase | Frontend | #lesson #js
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍3
🖥 CSS Flexbox. Полный курс

В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы.

➡️ Ссылка на курс

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
10
⚡️ One Page Love — это платформа, где собрано множество одностраничных сайтов и лендингов.

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

CodeBase | Frontend | #templates
Please open Telegram to view this post
VIEW IN TELEGRAM
4
⚡️ Крутой способ анимировать вашу навигацию на сайте ⚡️

🟢 Технологии: HTML, CSS, JS

🔗 Ссылка

CodeBase | Frontend | #animate #js
Please open Telegram to view this post
VIEW IN TELEGRAM
1
🖥 Flexbox Froggy - это игра, которая позволит на практике разобраться, как использовать свойства CSS flexbox для выравнивания элементов. Вы можете играть в игру онлайн и смотреть примеры кода для каждого уровня.

Годная вещь для новичков, которые хотят разобраться с флексами 🔥

CodeBase | Frontend | #css #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥3👍1
⚡️ТОП-4 инструмента для разработки ИИ на JS ⚡️

➡️ AI.JSX — разработанный Fixie, является динамичным фреймворком для создания разговорных приложений с использованием JavaScript и JSX, оптимизированным для проектов на React.

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

➡️ TensorFlow.js — адаптация библиотеки TensorFlow от Google для JavaScript, специально созданная для использования в вебе и Node.js, чтобы внедрить возможности машинного обучения в браузеры и серверные приложения.

🔵 Одним из ключевых преимуществ TensorFlow.js является способность запуска моделей МО прямо в браузере.

➡️ Brain.js предлагает простой способ создания нейронных сетей на JavaScript, подходит для браузера и Node.js.

🔵 Основное применение Brain.js — автоматизация процессов, таких как анализ текста, объединение PDF, обработка изображений и другие задачи, связанные с обработкой данных.

➡️ Tabnine — помощник по автозаполнению кода на основе ИИ, улучшающий опыт программирования.

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

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


CodeBase | Frontend
| #js #AI
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥71👍1
⚡️ Создаем свою игру на JavaScript ⚡️

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

🔵 Конечно, иногда приходится обходить устаревшие решения, но преимущества языка перевешивают — на чистом JavaScript можно создать практически любую программу.

🔵 В этом гайде мы покажем, как написать 2D игру «Змейка». Однако, учтите, что этот гайд не предназначен для изучения JavaScript с нуля, поэтому вам понадобятся базовые знания.

🔵 Также потребуется знание HTML (включая HTML5 canvas) и CSS, хотя основное внимание будет уделено именно JavaScript.

🔗 Ссылка на код

CodeBase | Frontend | #pet #js
Please open Telegram to view this post
VIEW IN TELEGRAM
6
🔥 Знакомство с CSS-свойством inset 🔥

🔵 Оно является сокращением для знакомых вам свойств top, left, right и bottom.

🔵 Подобно краткому синтаксису для margin или padding, с помощью inset можно задать все смещения элемента одной строкой.

div {
position: absolute;
inset: 0;
}


🔵 Использование краткого синтаксиса полезно для сокращения объема CSS-файла и улучшения читаемости кода.

🔵 Однако стоит помнить, что inset — это логическое свойство, которое учитывает направление письма.

🔵 Если на вашем сайте используется язык с направлением текста справа налево (RTL), стороны могут поменяться местами: лево станет право, и наоборот.

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


CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👍4
⚡️ Свойство mask ⚡️

➡️ Настройка маски в CSS позволяет установить изображение в качестве маски для элемента с использованием свойства mask.

При этом можно указать:

mask-clip — область распространения маски;

mask-size — размер маски;

mask-position — позиционирование маски относительно элемента;

mask-repeat — повторение маски;

mask-composite — операцию композиции для маски и других слоев;

mask-mode — ссылку на маску;

mask-origin — начало координат маски.

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍31
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 Space Journey - это космическое путешествие, созданное с помощью CSS и JavaScript.

🔗 Ссылка

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