WebDev+ | Веб-разработка

Шпаргалка по самым важным методам объекта в JS

// Получает собственные ключи объекта
Object.keys({ a: 1, b: 2 })
// → ["a", "b"]

// Получает значения свойств объекта
Object.values({ a: 1, b: 2 })
// → [1, 2]

// Преобразует объект в массив пар [ключ, значение]
Object.entries({ a: 1, b: 2 })
// → [["a", 1], ["b", 2]]

// Преобразует пары [ключ, значение] обратно в объект
Object.fromEntries([["a", 1], ["b", 2]])
// → { a: 1, b: 2 }

// Копирует свойства одного или нескольких объектов
Object.assign({}, { a: 1 }, { b: 2 })
// → { a: 1, b: 2 }

// Замораживает объект (изменения запрещены)
const obj = { a: 1 }
Object.freeze(obj)
obj.a = 2
// → { a: 1 }

// Запечатывает объект (нельзя добавлять или удалять свойства)
const user = { name: "Ana" }
Object.seal(user)
delete user.name // игнорируется
user.age = 30 // игнорируется
// user → { name: "Ana" }

// Проверяет, является ли свойство собственным (не унаследованным)
Object.hasOwn({ a: 1 }, "a")
// → true

👉 Гайды по JavaScript

Сегодня отмечается День программиста! 256-й день года выбран не случайно:

Дата праздника объясняется расчетом: 2 (двоичная система исчисления) в степени 8 (количество битов в байте). То есть 2^8= 256. Поэтому в обычный год день программиста 13 сентября, а в високосный — 12 сентября

С праздником, коллеги! ☺️ @IT_Portal

Как работает DNS? Если вы веб-разработчик или DevOps-инженер, важно понимать, что происходит, когда вы вводите в браузере https://website.com и нажимаете Enter. Первое, что нужно сделать, — это перевести текстовый домен в машинный числовой IP-адрес. Этим занимается DNS-сервер, который работает как телефонная книга в интернете. Под капотом участвуют четыре типа серверов: recursive resolver, root name server, TLD name server и authoritative name server. 1. DNS Resolver Когда вы вводите https://website.com, запрос сначала отправляется на DNS Resolver. Этот сервер общается с другими DNS-серверами, чтобы найти нужный IP-адрес. 2. Root Name Server DNS Resolver обращается к Root-серверам (их 13), которыми управляют разные организации и делегированы ICANN. Они обрабатывают запросы для TLD (доменных зон верхнего уровня). Если Root-сервер не находит запись в своих зонах, он указывает на сервер имен для нужного TLD, например .com. 3. TLD Server Далее DNS Resolver опрашивает TLD-сервер, который возвращает IP авторитетного сервера домена. 4. Authoritative Name Server После запроса к авторитетному серверу домена тот возвращает IP адрес исходного сервера. На финальном этапе DNS Resolver передаёт этот IP клиенту, и браузер использует его, чтобы загрузить страницу. Кэширование Чтобы ускорить загрузку, DNS-записи могут храниться в кэше на разных уровнях: - браузер, - ОС, - роутер, - провайдер. Если IP есть в кэше, поиск через DNS Resolver не выполняется, что экономит время. Подробнее: Что происходит, когда вы вводите URL @WebDev_Plus

Как отцентрировать элемент с абсолютным позиционированием? Использовать auto-margin вместе с width/height? top/left в комбинации с translate? В современном CSS можно просто использовать place-self: center @WebDev_Plus

Эргономика мобильных интерфейсов Важные кнопки, меню и CTA стоит располагать в «зелёной зоне», а верх лучше оставлять для второстепенных элементов. @WebDev_Plus

⚡️ Бесплатное обучение фронтенд-разработке с нуля до Vue, Angular, React — с поддержкой от наставника Опыт в программировании не нужен. На канале Интенсивный JavaScript действующий тимлид и опытный разработчик помогает изучить фронтенд на практических задачах, которые интересно кодить С 13 сентября стартует бесплтаное обучение, где он на практике поможет разобраться в основах — HTML/CSS и JavaScript, а также попробовать три фреймворка — Vue, Angular и React Вот план обучения: 💡 с 13 сентября напишете фронтенд для сервиса доставки 💡 с 18 сентября свой киносайт 💡 а с 24 сентября свою доску объявлений Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду. Поделится способами посика клиентов с поомщью ИИ. Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией Подписывайтесь, чтобы участвовать, осталось 56 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно

Чувак создал супер-производительный CSV-редактор, полностью на HTML canvas Инструмент масштабируется под гигабайты данных и работает, как Excel. Мгновенно обрабатывает огромные файлы с максимальной производительностью. 🎉 @WebDev_Plus

Animate UI только что выпустила свою версию 1.0 ✓ React, TypeScript, Tailwind CSS и Motion ✓ Полностью настраиваемая ✓ 170 анимированных иконок Открытый исходный код: https://github.com/imskyleen/animate-ui @WebDev_Plus

7 дней бесплатного обучения frontend-разработке Роман Чернов, практикующий Fullstack-разработчик с опытом более 12 лет и кейсами от крупных брендов, запускает эксперимент: за 7 дней бесплатно подготовит 10 новичков к первым заказам. Уже в первую неделю обучения ты сделаешь сайт и загрузишь его на хостинг, оформишь портфолио по науке и получишь стратегию роста во фронтенде с нуля до 2000$ в месяц. 👉 Запишись до 20 сентября — участие бесплатно. 9 мест ещё свободно.

Чит-лист неизменяемых альтернатив 9 методов, изменяющих массивы в JavaScript @WebDev_Plus

Хочешь создавать лучшие анимации для своего сайта или приложения? Вот 12 принципов, которым нужно следовать: ① Эластичность: деформация для передачи веса и гибкости ② Антиципация: подготовка пользователя перед действием ③ Сцена: привлечение внимания к важному ④ Действие: покадровая анимация или ключевые позы ⑤ Непрерывность: ничего не останавливается и не начинается резко ⑥ Плавность: плавные входы и выходы ⑦ Арки: плавные движения для большего реализма ⑧ Контекст: детали, поддерживающие основное действие ⑨ Время: правильная продолжительность для плавности или скованности ⑩ Преувеличение: акценты для лучшего донесения идеи ⑪ Объем: добавление согласованности, глубины и реализма ⑫ Привлекательность: приятные, запоминающиеся анимации с характером Вот полная статья с примерами: 12 принципов анимации @WebDev_Plus

ml5.js — это библиотека машинного обучения для JavaScript, которая даёт доступ к ML-моделям прямо в браузере. С её помощью можно не только использовать готовые модели, но и обучать нейросети локально. В этом курсе ты узнаешь, как работать с ml5.js, и закрепишь навыки на практике, собирая реальные проекты @WebDev_Plus

Хочешь выучить React, Svelte, Vue или Angular? Вот страница, где сравнивается синтаксис всех четырёх фреймворков. Если уже знаешь один, то легко разберёшься в другом: → http://component-party.pages.dev @WebDev_Plus

⚡️ Айтишник из «VISION» скупил топовые айти-курсы и выложил гигабайты материалов к себе Каждый найдет что-то по душе: 1202 ГБ — Python 1811 ГБ — Frontend 1100 ГБ — C / C++ / C# 804 ГБ — Java 411 ГБ — SQL & БД 309 ГБ — DevOps 998 ГБ — ИБ & Хакинг 773 ГБ — Kotlin / Swift 189 ГБ — PHP 201 ГБ — GoLang 170 ГБ — Rust 167 ГБ — QA / Тестирование 310 ГБ — 1C + Лицензии 495 ГБ — Машинное обучение 704 ГБ — Аналитика Данных 991 ГБ — Дизайн Материалы в закрепе, постоянно пополняются👆🏻

Большинство разработчиков об этом даже не догадываются… любую веб-страницу можно превратить в текстовый редактор одной строкой JavaScript Просто вбей в консоль браузера:

document.designMode = "on";

И сразу получаешь страницу, где весь контент можно редактировать. Можно включать и выключать этот режим в любой момент, работает во всех популярных браузерах — Chrome, Firefox, Safari, Edge. Удобно для быстрых мокапов, теста идей по UI или просто чтобы поиграться. Напоминание: некоторые из самых мощных фич в технике годами лежат прямо на поверхности 🙂 @WebDev_Plus

Сохраняй себе 5 топовых тулз для веб-разработчиков Эти штуки реально ускоряют работу, делают код чище и экономят время. Полезный набор, который стоит держать под рукой. SVG Flag Icons — nucleoapp.com/svg-flag-icons EmbedPDF — embedpdf.com FliiipBook — fliiipbook.com use-mcp — github.com/modelcontextprotocol/use-mcp DayPicker — daypicker.dev Пригодятся в любом проекте @WebDev_Plus

Подогнал классную находку для веб-разработчиков Cursor Effects — набор ретро-эффектов курсора с кучей вариаций. Бесплатно, open source, и встраивается в проект буквально за пару строк кода. Мгновенно добавляет сайту креатива и выделяет его среди остальных :) github.com/tholman/cursor-effects @WebDev_Plus

freeCodeCamp выкатил ежедневные задачи по программированию. Решать их можно прямо в мобильном приложении или в /learn Это отличный способ прокачать навыки: можно тренироваться параллельно с прохождением курса или просто для практики на каждый день. Сегодняшний челендж — валидатор IPv4. Попробуйте решить Подробнее тут @WebDev_Plus

Задача «Тест по YAML» ❗️ Эта задача анонсировалась заранее и будет награждение первой тройки решивших. Призы символические, но так интереснее, чтобы был азарт. Ссылка на задачу на нашей площадке: задание. 📌 Исходники бекендовой части задачи прикреплены на сайте. Описание задачи: Для получения флага, нужно получить 1337 очков в тесте, где представлены 7 вопросов про парсинг YAML-файлов. Ответы проверяются в бекенде, по запросу с фронта. 📌 Заявки принимаются на сайте с задачами, где фиксируется время отправки и валидность флага. Про первые три решения автоматически сообщает бот в нашем чате. Ответы в зачет принимаются до 12 сентября 12:00 МСК, есть ровно неделя на решение. Далее будет пост с полным разбором этой задачи и объявлением победителей. Кто первый, тот молодец. Поехали! ❗️ Ссылка на задачу: перейти. ——— #⃣ #Задачи #CTF #Web 🐞 Канал // Чат // Задачи

Занес классную находку для тех, кто учит JS и любит MMORPG. Deepest World — браузерная песочница, где ты пишешь бота на JavaScript, а он уже сам фармит, крафтит и чистит данжи. Игра в раннем доступе и бесплатна. 🤩 Поиграть: https://deepestworld.com/ @WebDev_Plus