JavaScript с нуля за 7 часов
JavaScript c нуля - Полный курс по основам для начинающих. В курсе вы найдете все необходимые темы, для того, чтобы начать программировать на JavaScript с нуля. В ролике вы сделаете несколько практических проектов, на которых рассмотрите сразу в боевых действиях язык.
📺 YouTube
WebDEV #видео
JavaScript c нуля - Полный курс по основам для начинающих. В курсе вы найдете все необходимые темы, для того, чтобы начать программировать на JavaScript с нуля. В ролике вы сделаете несколько практических проектов, на которых рассмотрите сразу в боевых действиях язык.
📺 YouTube
WebDEV #видео
Typescript: геттеры и сеттеры - полное руководство, кратко и с примерами
Изучаем возможность предоставлять доступы к private и protected свойствам классов и объектов через геттеры и сеттеры в TypeScript. Изучаем синтаксис методов get, set, особенности применения. Геттеры и сеттеры при наследовании классов. Отличия в перезаписи геттеров и сеттеров в TypeScript для private и protected свойств.
📺 YouTube
WebDEV #видео
Изучаем возможность предоставлять доступы к private и protected свойствам классов и объектов через геттеры и сеттеры в TypeScript. Изучаем синтаксис методов get, set, особенности применения. Геттеры и сеттеры при наследовании классов. Отличия в перезаписи геттеров и сеттеров в TypeScript для private и protected свойств.
📺 YouTube
WebDEV #видео
Лучшая альтернатива
Библиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
WebDev // IT & Чат
lodashБиблиотека утилит для JavaScript
✓ Без внешних зависимостей
✓ debounce, pick, chunk, cloneDeep, countBy...
✓ Оптимизирована для Node 18+ и современных браузеров
pnpm install es-toolkit
import { debounce, pick, chunk } from 'es-toolkit'
// 1. pick — выбирает конкретные свойства из объекта
const user = { name: 'Midu', email: 'midu@gmail.com', edad: 40 }
const profile = pick(user, ['name'])
console.log(profile) // { name: 'Midu' }
// 2. chunk — разбивает массив на группы
const nums = [1, 2, 3, 4, 5, 6, 7]
console.log(chunk(nums, 3))
// Результат: [[1, 2, 3], [4, 5, 6], [7]]
// 3. debounce — откладывает выполнение до завершения ввода
const debouncedSearch = debounce(query => {
console.log('Поиск:', query)
}, 500) // задержка 0.5 с
const searchInput = document.getElementById('buscador')
searchInput.addEventListener('input', e => {
debouncedSearch(e.target.value)
})WebDev // IT & Чат
❤2
Как веб и графдизайнеру собрать портфолио?
Есть ошибки, которые делают 80% ребят в портфолио, и потом думают, что дело в недостатке опыта.
Мы собрали 10 редфлагов в портфолио, которые мешают перейти в продукт и получать х2 по деньгам
💥 Примеры плохих и хороших кейсов
💥 Что убрать, что добавить в кейсах
💥 Как адаптировать портфолио под продуктовый рынок
Смотри [ошибки в портфолио]
Есть ошибки, которые делают 80% ребят в портфолио, и потом думают, что дело в недостатке опыта.
Мы собрали 10 редфлагов в портфолио, которые мешают перейти в продукт и получать х2 по деньгам
💥 Примеры плохих и хороших кейсов
💥 Что убрать, что добавить в кейсах
💥 Как адаптировать портфолио под продуктовый рынок
Смотри [ошибки в портфолио]
❤3
Webhooks и другие способы общения серверов
➡️ Читать статью
WebDev // IT & Чат
Веб-хуки — это механизм взаимодействия между веб-сервисами, который позволяет автоматически отправлять данные в реальном времени при возникновении определенного события.
В этой статье автор подробно рассмотрел принцип работы веб-хуков, их применение и меры безопасности, а также провёл наглядное сравнение с HTTP и WebSockets.
WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Доменные имена и что они реально значат
Расширение домена — это не просто случайное окончание. Оно формирует идентичность сайта, влияет на доверие и даже играет роль в SEO. Краткий гайд, чтобы выбирать осознанно
Совет: правильный домен повышает доверие, улучшает позиции в поиске и сразу даёт понять пользователям, о чём твой сайт.
WebDev // IT & Чат
Расширение домена — это не просто случайное окончание. Оно формирует идентичность сайта, влияет на доверие и даже играет роль в SEO. Краткий гайд, чтобы выбирать осознанно
.com → коммерция, самое популярное и надёжное
.net → сети и тех-бизнес
.edu → образовательные учреждения
.org → некоммерческие организации
.mil → сайты армии
.gov → госструктуры
.info → информационные порталы
.arpa → интернет-инфраструктура
.int → международные организации
.mobi → сайты для мобилок
.travel → туризм и путешествия
.jobs → работа и карьера
.ca → Канада
.coop → кооперативы и объединения
Совет: правильный домен повышает доверие, улучшает позиции в поиске и сразу даёт понять пользователям, о чём твой сайт.
WebDev // IT & Чат
❤1👍1
Дизайн ошибки 404
Разрабатываем дизайн 404 страницы ошибки для туристического сайта про Мальдивы в Фотошопе и Фигме.
➡️ Смотреть видео & Скачать видео
WebDev // IT & Чат
Разрабатываем дизайн 404 страницы ошибки для туристического сайта про Мальдивы в Фотошопе и Фигме.
WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
HTML и CSS антипаттерны
➡️ Читать статью
WebDev // IT & Чат
При изучении разных ЯП всегда есть практики, которым не рекомендуется следовать — это очень сильно помогает разработчикам избегать ошибок.👉 Так как HTML и CSS не относятся к языкам программирования, найти инфу по антипаттернам достаточно тяжело. Автор этой статьи собрал несколько примеров, которые лично относит к антипаттернам.
WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Топ-10 браузерных расширений для разработчиков
WebDev // IT & Чат
🔴 JSON Formatter
Форматирует JSON в дерево, удобно читать данные API.🔴 Wappalyzer
Позволяет увидеть, какие технологии использует сайт.🔴 Fake Filler
Автоматически заполняет формы фейковыми данными, ускоряя тестирование.🔴 Clear Cache
Быстро очищает кэш браузера для проверки новых версий сайта.🔴 Talend API Tester
Дает возможность визуально работать с API и тестировать их.🔴 Focus To-Do
Повышает продуктивность, отслеживая задачи с таймером Pomodoro.🔴 Lighthouse
Позволяет быстро проверить производительность и доступность сайта.🔴 Cookie Editor
Позволяет быстро создавать, редактировать и удалять куки для тестов и отладки.🔴 Web Developer
Добавляет дополнительные инструменты для инспекции и отладки сайта.🔴 Dark Reader
Переводит сайты в тёмную тему, снижая нагрузку на глаза.
WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.
Это легко делается с помощью CSS-фильтров.
То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.
WebDev // IT & Чат
Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.
Это легко делается с помощью CSS-фильтров.
/* Для светлой темы */
.logos-container img {
filter: brightness(0);
opacity: 0.6;
}
/* Для тёмной темы */
.logos-container img {
filter: invert(1) saturate(0) brightness(4);
opacity: 0.6;
}
То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.
WebDev // IT & Чат
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить AI-чатботов в проекты на React?
Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.
Поддерживает кучу кастомизаций, темы и гибкие настройки.
Где пригодится:
- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM
➡️ Установка:
react-chatbotify.com
WebDev // IT & Чат
Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.
Поддерживает кучу кастомизаций, темы и гибкие настройки.
Где пригодится:
- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM
npm install react-chatbotifyreact-chatbotify.com
WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
⌨️ подписаться
Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:
• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды
Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.
Please open Telegram to view this post
VIEW IN TELEGRAM