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

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
Готовишься к Frontend или Backend собеседованию?

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

Выбирай свое направление:

👩‍💻 Frontend
👩‍💻 Python
👩‍💻 Go
👩‍💻 Java
👩‍💻 C/C++
👩‍💻 C#
👩‍💻 PHP
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️Button with tooltip hover timing feedback — Плеер с анимированным нажатием при наведении.

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

🔗 Ссылка

CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
⚡️ Zod – библиотека для объявления и валидации схем, ориентированная на TypeScript.

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


➡️ Среди основных возможностей библиотеки:

Определение структуры данных.
Поддержка примитивных типов данных, массивов и объектов.
Валидация входных данных.
Обеспечение безопасности типов в приложениях.

✔️ Главное преимущество: Zod имеет дополнительные функции, которые выходят за рамки базовой валидации схемы. Например, позволяет определить пересечения и объединения типов для создания сложных схем.

👩‍💻 GitHub

CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
💠 Front Helper — это кладезь готовых решений в помощь начинающим и опытным фронтендерам.

⏵ Полезные инструменты для веб разработки.
⏵ Стильные Codepen-проекты
⏵ Нейронки для генерации чего угодно.
⏵ Плагины для Figma и многое другое

Подпишись и ускорь свою работу в разы!
Please open Telegram to view this post
VIEW IN TELEGRAM
3
👩‍💻 Что такое Map в JavaScript и как он работает?

Map — это структура данных в JavaScript, которая хранит ключи и значения. В отличие от объектов, Map позволяет использовать любые типы данных в качестве ключей и сохраняет порядок добавления элементов.

➡️ Пример:

// Создание Map
const map = new Map();

// Добавление ключей и значений
map.set('name', 'Alice');
map.set('age', 30);
map.set(1, 'Первый ключ');

// Получение значения по ключу
console.log(map.get('name')); // Alice

// Проверка наличия ключа
console.log(map.has('age')); // true

// Итерация по Map
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});


🗣️ В этом примере Map используется для хранения данных с разными типами ключей. Это удобная альтернатива объектам для работы с ключами сложных типов.

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1031
Forwarded from Видеоуроки IT
#layout #html #css
Вёрстка реального проекта #1 для новичков


Видеоуроки:
1 — Вводное видео
2 — Подготовка к вёрстке и нарезка макета из Figma
3 — Вёрстка HTML макета из Figma
4 — Вёрстка мобильной версии HTML макета из Figma

📹 Плейлист YouTube

Канал: AVIS TV
Please open Telegram to view this post
VIEW IN TELEGRAM
👍42
⚡️ ВСЕГДА ИЗУЧАЙ ЧТО-ТО НОВОЕ ⚡️

➡️ Важно не останавливаться на основных технологиях и инструментах в области Frontend-разработки.

➡️ Чтобы быть в курсе новейших трендов и методов, необходимо постоянно расширять свои знания и умения.

🟢 Два паттерна, PRPL (Push, Render, Pre-cache, Lazy-load) и RAIL (Response, Animation, Idle, Load), следует изучить для оптимизации загрузки и производительности веб-приложений.

🟢 Освоение ключевых метрик производительности веб-страниц, таких как Time to First Byte (TTFB), First Contentful Paint (FCP) и Time to Interactive (TTI), поможет в анализе и улучшении веб-сайтов.

🟢 Использование инструментов для мониторинга производительности, таких как Google Lighthouse и WebPageTest, необходимо для тестирования и контроля эффективности веб-страниц.

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

🟢 Расширение знаний в области серверного JavaScript с использованием Node.js позволит работать над полноценными Full-Stack проектами и понимать всю экосистему веб-разработки.

🟢 Изучение фреймворков для мобильной разработки, таких как React Native и Ionic, необходимо для создания кросс-платформенных мобильных приложений.

CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥31
📶 С 1 декабря для граждан РФ открыт доступ к платным материалам по программированию

Вот отсортированные базы с тонной материала(книги, курсы, ресурсы и гайды). Выбирай своё направление:

👩‍💻 Frontend 👩‍💻 PHP
⚙️ Backend 👩‍💻 Моб. Dev
📱 GitHub 👩‍💻 Разработка игр
🤓 Всё айти 👩‍💻 DevOps
👩‍💻 Python 🖥 Data Science
👩‍💻 Java 🐞 Тестирование
👩‍💻 C# 🤔 Хакинг & ИБ
👩‍💻 С/С++ 📱 Маркетинг
🖥 SQL 🖥 Дизайн
👩‍💻 Golang 👣 Rust

Скачивать ничего не нужно — все выложили в Telegram с доступом по ссылке
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍2
👩‍💻 Что такое clip-path в CSS и как оно работает?

clip-path — это свойство CSS, которое позволяет создавать фигуры, обрезающие элемент по заданному контуру. Оно используется для создания креативных масок и нестандартных форм элементов.

➡️ Пример:

<div class="clipped">Пример с clip-path</div>

<style>
.clipped {
width: 200px;
height: 100px;
background: lightblue;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%); /* Треугольная форма */
text-align: center;
line-height: 100px;
}
</style>


🗣️ В этом примере clip-path обрезает элемент .clipped по треугольному контуру. Свойство поддерживает различные функции, такие как circle, ellipse, и polygon, позволяя создавать уникальные дизайнерские элементы.

CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥21
Я знаю, сколько времени может уйти на поиск нужной информации в Telegram, поэтому регулярно делюсь полезными ссылками.

Сегодня подготовил для вас целую подборку каналов в
сфере «ИТ/ Разработка» 🔥

Тут вы точно найдете ответы на многие свои вопросы. А главное - вам не придется, тратить на поиски информации несколько часов 👇

Поэтому переходите, подписывайтесь и пользуйтесь на здоровье
👍32
Вкатываешься такой в веб, а там эти
😁15💯21
Всем привет! 👋
С 2008 года я занимаюсь продвижением сайтов в Яндекс и Google. 
Наверное, у многих тут есть свои сайты, развитием которых вы занимаетесь?

https://t.me/seoalliance - мой канал с актуальными методами и примерами продвижения сайтов. Найдете интересное.
https://seseo.ru/ - сайт
https://t.me/allianceseo?erid=LjN8K93vq - написать мне лично

Готов помочь с развитием и продвижением ваших сайтов на любом этапе

В общем, всё, что связано с рекламой и развитием сайтов - ко мне 🤝
Проконсультирую и направлю - бесплатно! 
Все мы немного IT'шники 😀

Что могу предложить:
Seo - поисковое продвижение.
Проведение аудитов сайтов.
Составление стратегии развития.
Контекстная реклама.
Создание оптимизированных сайтов.
Seo прототипирование на этапе создания сайта.
Услуги настройки и ведения контекстной рекламы.

#реклама
О рекламодателе
👍4👏2🤝2🙏1
😁7🔥51
This media is not supported in your browser
VIEW IN TELEGRAM
Мне всегда нравились каналы, которые запариваются над контентом и не постят всякий копипаст 10-летней давности.

Хороший пример — @concertzaal. Там так увлекательно пишут про технологии и медиа, что через неделю даже ваша бабушка начнет шарить за интернет-тренды, штучный интеллект и гаджеты.

Пригодится всем, кто много времени проводит в интернете, но кроме рилсов и тиктоков ничего не смотрит.

Посмотрите на досуге, это очень затягивает: @concertzaal
👍3
👩‍💻 Что такое тег <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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14